cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-06-06 04:44:16 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[Refactor] Define more border and input color variables (#1937)

Browse source 
* Define more border and input color variables

* Rename custom color variables

* Fix assignment of variables

* Apply border color variable to matching borders

* Add trait header colors and shadow contrast
This commit is contained in:
Carlos Fernandez 2026-05-27 16:20:16 -04:00 • committed by GitHub
parent 48f9ffc318
commit 1ab8170d2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 120 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

35
styles/less/utils/colors.less
View file

@ -51,7 +51,7 @@
--dark-blue-50: #18162e50;
--dark-blue-60: #18162e60;
--dark-blue-90: #18162e90;
--dark-blue-d0: #18162ed0;
--dark-blue-c0: #18162ec0;
--semi-transparent-dark-blue: rgba(24, 22, 46, 0.33);
--dark: #222222;
@ -71,6 +71,7 @@
--beige-filter: brightness(0) saturate(100%) invert(87%) sepia(25%) saturate(164%) hue-rotate(339deg) brightness(106%) contrast(87%);
--bright-beige-filter: brightness(0) saturate(100%) invert(87%) sepia(15%) saturate(343%) hue-rotate(333deg) brightness(110%) contrast(87%);
--light-white: rgba(255, 255, 255, 0.3);
--soft-white-shadow: rgba(255, 255, 255, 0.05);
--light-black: rgba(0, 0, 0, 0.3);
@ -85,13 +86,27 @@
--primary-color-fear: rgba(9, 71, 179, 0.75);
}
/**
* Override core foundry color variables in theme scopes, and add some new theme specific variants.
* These are intended to be more representative of its use case, so avoid naming these after the color.
* Some foundry variables are heavily scoped and we need to redefine them (https://github.com/foundryvtt/foundryvtt/issues/12893)
* Convention for the redefined ones is --dh-{element}-color-{thing}
*/
@scope (.theme-light) to (.themed) {
.dh-style :scope,
:scope.dh-style,
.dh-style,
.duality {
--color-border: @dark-blue;
--color-fieldset-border: @dark-blue;
--color-text-emphatic: @dark-blue;
--color-text-subtle: #555;
--dh-color-text-shadow-contrast: #ffffffa0;
--dh-input-color-border: @dark;
--dh-input-color-text: @dark;
--dh-trait-color-bg: #b1afb6;
--dh-trait-color-border: #8e8d96;
}
}
@scope (.theme-dark) to (.themed) {
@ -99,8 +114,16 @@
:scope.dh-style,
.dh-style,
.duality {
--color-border: @golden;
--color-fieldset-border: @golden;
--color-text-emphatic: @golden;
--color-text-subtle: #a29086;
--dh-color-text-shadow-contrast: @dark-80;
--dh-input-color-border: @beige;
--dh-input-color-text: @beige;
--dh-trait-color-bg: #50433F;
--dh-trait-color-border: #927952;
}
}
@ -156,7 +179,7 @@
@dark-blue-50: var(--dark-blue-50, #18162e50);
@dark-blue-60: var(--dark-blue-60, #18162e60);
@dark-blue-90: var(--dark-blue-90, #18162e90);
@dark-blue-d0: var(--dark-blue-d0, #18162ed0);
@dark-blue-c0: var(--dark-blue-c0, #18162ec0);
@semi-transparent-dark-blue: var(--semi-transparent-dark-blue, rgba(24, 22, 46, 0.33));
@dark: var(--dark, #222222);
@ -178,6 +201,7 @@
@soft-white-shadow: var(--soft-white-shadow, rgba(255, 255, 255, 0.05));
@light-white: var(--light-white, rgba(255, 255, 255, 0.3));
@light-black: var(--light-black, rgba(0, 0, 0, 0.3));
@soft-shadow: var(--soft-shadow, rgba(0, 0, 0, 0.05));
@ -211,6 +235,13 @@
}
// LESS variable versions of core foundry color variables
@color-border: var(--color-border);
@color-fieldset-border: var(--color-fieldset-border);
@color-text-emphatic: var(--color-text-emphatic);
@color-text-primary: var(--color-text-primary);
@color-text-subtle: var(--color-text-subtle);
@color-text-shadow-contrast: var(--dh-color-text-shadow-contrast);
@input-color-border: var(--dh-input-color-border);
@input-color-text: var(--dh-input-color-text);
@trait-color-bg: var(--dh-trait-color-bg);
@trait-color-border: var(--dh-trait-color-border);

9
styles/less/utils/mixin.less
View file

@ -50,14 +50,15 @@
*/
.dh-typography() {
h1 {
--dh-input-color-text: @color-text-emphatic;
font-family: @font-title;
margin: 0;
border: none;
font-weight: normal;
}
h1 input[type='text'] {
font-family: @font-title;
input[type='text'],
.input[contenteditable] {
font-family: @font-title;
}
}
h2,