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

Add emphatic color variable and set up scoped based overrides for core variables

Browse source
This commit is contained in:
Carlos Fernandez 2026-05-26 02:18:34 -04:00
parent e529dd0f88
commit 475b8bd149
36 changed files with 86 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

2
styles/less/dialog/character-creation/tab-navigation.less
View file

@ -7,7 +7,7 @@
border-top: 0;
a {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&[disabled] {
opacity: 0.4;

1
styles/less/dialog/compendiumBrowserPackDialog/sheet.less
View file

@ -67,7 +67,6 @@
i {
font-size: 18px;
// color: light-dark(@dark-blue, @golden);
}
}
}

4
styles/less/dialog/dice-roll/roll-selection.less
View file

@ -56,7 +56,7 @@
cursor: pointer;
padding: 5px;
background: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.label {
font-style: normal;
@ -129,7 +129,7 @@
cursor: pointer;
padding: 5px;
background: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.label {
font-style: normal;

2
styles/less/dialog/downtime/downtime-container.less
View file

@ -37,7 +37,7 @@
.activity-marker {
font-size: 0.5rem;
flex: none;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
margin-right: 4px;
}

2
styles/less/dialog/group-roll-dialog/_common.less
View file

@ -1,5 +1,5 @@
h1 {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
font: 700 var(--font-size-24) var(--dh-font-subtitle);
text-align: center;
}

2
styles/less/dialog/group-roll-dialog/main.less
View file

@ -110,7 +110,7 @@
display: flex;
flex-direction: row;
button {
--button-text-color: var(--color-text-primary);
--button-text-color: @color-text-primary;
--button-size: 1.5em;
padding: 0 var(--spacer-4);
img {

2
styles/less/dialog/level-up/navigation-container.less
View file

@ -19,7 +19,7 @@
a,
span {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}

2
styles/less/dialog/multiclass-choice/sheet.less
View file

@ -35,7 +35,7 @@
width: 120px;
height: 120px;
background: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.selected {
background: light-dark(@dark-blue-40, @golden-40);

2
styles/less/dialog/tag-team-dialog/initialization.less
View file

@ -62,7 +62,7 @@
padding: 5rem 4px var(--spacer-8) 4px;
text-align: center;
color: var(--color-text-primary);
color: @color-text-primary;
text-shadow: 1px 1px 2px var(--shadow-color), 0 0 10px var(--shadow-color);
.smooth-gradient-ease-in-out(background-image, to bottom, var(--shadow-color), 100%);
}

8
styles/less/dialog/tag-team-dialog/sheet.less
View file

@ -1,6 +1,6 @@
.daggerheart.dialog.dh-style.views.tag-team-dialog .window-content {
h1 {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
font: 700 var(--font-size-24) var(--dh-font-subtitle);
text-align: center;
}
@ -64,7 +64,7 @@
.roll-title {
font-size: var(--font-size-20);
font-weight: bold;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
text-align: center;
display: flex;
align-items: center;
@ -72,7 +72,7 @@
&::before,
&::after {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
content: '';
flex: 1;
height: 2px;
@ -202,7 +202,7 @@
justify-content: center;
i {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
font-size: 48px;
&.inactive {

4
styles/less/global/dialog.less
View file

@ -37,7 +37,7 @@
&:hover {
border: 1px solid light-dark(@dark-blue, @golden);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}
@ -81,7 +81,7 @@
cursor: pointer;
padding: 5px;
background: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.label {
font-style: normal;

12
styles/less/global/elements.less
View file

@ -14,7 +14,7 @@
box-shadow: 0 4px 30px @soft-shadow;
backdrop-filter: blur(9.5px);
outline: 2px solid transparent;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
border: 1px solid light-dark(@dark, @beige);
transition: all 0.3s ease;
@ -107,7 +107,7 @@
&:hover {
background: light-dark(@light-black, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
&.glow {
@ -128,7 +128,7 @@
&.reverted {
background: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
border: 1px solid light-dark(@dark, transparent);
&:hover {
background: light-dark(transparent, @golden);
@ -175,7 +175,7 @@
height: inherit;
.tag {
padding: 0.3rem 0.5rem;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
background-color: light-dark(@dark-blue-10, @golden-40);
border-radius: 3px;
transition: 0.13s ease-out;
@ -353,7 +353,7 @@
legend {
font-weight: bold;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.with-icon {
display: flex;
@ -571,7 +571,7 @@
border: 0;
&:hover {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
&:not(:first-child) {

4
styles/less/global/filter-menu.less
View file

@ -13,7 +13,7 @@
legend {
font-weight: bold;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
font-size: var(--font-size-12);
}
@ -25,7 +25,7 @@
button {
background: light-dark(@light-black, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
outline: none;
box-shadow: none;
border: 1px solid light-dark(@dark-blue, @dark-blue);

2
styles/less/global/resource-bar.less
View file

@ -53,7 +53,7 @@
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
z-index: 1;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
width: fit-content;
.slot {

2
styles/less/global/sheet.less
View file

@ -43,7 +43,7 @@ body.game:is(.performance-low, .noblur) {
&:hover {
border-color: light-dark(@dark-blue, @golden);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}

2
styles/less/global/tab-navigation.less
View file

@ -20,7 +20,7 @@
white-space: nowrap;
a {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}

2
styles/less/hud/token-hud/token-hud.less
View file

@ -24,7 +24,7 @@
.palette-category-title {
grid-column: span var(--effect-columns);
font-weight: bold;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}

2
styles/less/sheets-settings/header.less
View file

@ -13,7 +13,7 @@
font-size: var(--font-size-24);
margin: 0;
text-align: center;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}

10
styles/less/sheets/actors/actor-sheet-shared.less
View file

@ -127,7 +127,7 @@
.title-name {
text-align: start;
font-size: var(--font-size-28);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
text-align: center;
}
}
@ -180,7 +180,7 @@
display: flex;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -194,7 +194,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
.domain {
@ -206,7 +206,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
img {
@ -230,7 +230,7 @@
padding: 10px;
border-radius: 5px;
min-width: 90px;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
background-color: light-dark(@dark-blue-10, @golden-40);
}
}

4
styles/less/sheets/actors/adversary/sidebar.less
View file

@ -65,7 +65,7 @@
display: flex;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -77,7 +77,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.threshold-value {
color: light-dark(@dark, @beige);

8
styles/less/sheets/actors/character/header.less
View file

@ -103,7 +103,7 @@
padding: 5px 0;
margin-bottom: 8px;
font-size: var(--font-size-12);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.missing-header-feature {
opacity: 0.5;
@ -170,7 +170,7 @@
display: flex;
gap: 4px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -182,7 +182,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
margin-right: 4px;
}
@ -195,7 +195,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
img {

2
styles/less/sheets/actors/character/loadout.less
View file

@ -54,7 +54,7 @@
span {
margin: 1px;
width: 26px;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.list-icon {
i {

10
styles/less/sheets/actors/character/sidebar.less
View file

@ -286,7 +286,7 @@
h4,
i {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}
@ -314,7 +314,7 @@
z-index: 1;
background: @dark-blue;
justify-content: center;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.armor-slot {
cursor: pointer;
@ -348,7 +348,7 @@
.label,
.value,
i {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
@ -513,7 +513,7 @@
align-self: center;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -525,7 +525,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.threshold-value {
color: light-dark(@dark, @beige);

14
styles/less/sheets/actors/party/party-members.less
View file

@ -79,7 +79,7 @@
display: flex;
gap: 4px;
background-color: light-dark(var(--color-light-1), @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 4px 6px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 3px;
@ -93,7 +93,7 @@
&.threshold-label {
font-size: var(--font-size-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
&.threshold-value {
@ -116,7 +116,7 @@
width: 100%;
z-index: 1;
font-size: var(--font-size-20);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
font-weight: bold;
}
@ -132,7 +132,7 @@
.hope-section {
display: flex;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 3px 6px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 3px;
@ -144,7 +144,7 @@
font-size: var(--font-size-12);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
margin-right: 3px;
}
@ -212,7 +212,7 @@
gap: 4px;
background-color: light-dark(@dark-blue-10, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 2px 5px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 0 6px 6px 0;
@ -260,7 +260,7 @@
justify-content: space-between;
gap: 3px;
.label {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
.value {
font-weight: 600;

6
styles/less/ui/chat/group-roll.less
View file

@ -31,7 +31,7 @@
}
i {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
}
}
@ -71,7 +71,7 @@
align-items: center;
justify-content: center;
gap: 10px;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.main-value {
font-size: var(--font-size-24);
@ -153,7 +153,7 @@
cursor: pointer;
padding: 5px;
background: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
&.finished {
background-color: initial;

2
styles/less/ui/chat/sheet.less
View file

@ -93,7 +93,7 @@
}
a[href] {
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
a[href]:hover,

2
styles/less/ui/countdown/countdown.less
View file

@ -17,7 +17,7 @@
position: relative;
border: 0;
box-shadow: none;
color: var(--color-text-primary);
color: @color-text-primary;
width: 300px;
pointer-events: all;
align-self: flex-end;

6
styles/less/ui/item-browser/item-browser.less
View file

@ -200,7 +200,7 @@
font-weight: bold;
border-radius: 3px;
background-color: light-dark(@dark-blue-40, @golden-40);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
.subfolder-list {
@ -218,7 +218,7 @@
font-weight: bold;
border-radius: 3px;
background-color: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
}
.wrapper {
@ -265,7 +265,7 @@
.item-list-header {
align-items: center;
background-color: light-dark(@dark-15, @dark-golden-80);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 3px;
min-height: 30px;

2
styles/less/ui/settings/homebrew-settings/resources.less
View file

@ -61,7 +61,7 @@
display: flex;
align-items: center;
gap: 4px;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
i {
font-size: 14px;

2
styles/less/ui/settings/settings.less
View file

@ -1,7 +1,7 @@
@import '../../utils/colors.less';
.daggerheart.dh-style.setting {
--color-form-label: var(--color-text-primary);
--color-form-label: @color-text-primary;
h2,
h3,

2
styles/less/ui/sidebar/daggerheartMenu.less
View file

@ -34,7 +34,7 @@
cursor: pointer;
padding: 5px;
background: light-dark(@dark-blue-10, @golden-10);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
.label {
font-style: normal;

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

@ -83,8 +83,21 @@
--gradient-stress: linear-gradient(15deg, rgb(130, 59, 1) 0%, rgb(252, 142, 69) 65%, rgb(190, 0, 0) 100%);
--primary-color-fear: rgba(9, 71, 179, 0.75);
}
--dh-color-text-subtle: light-dark(#555, #a29086);
@scope (.theme-light) to (.themed) {
.dh-style,
.duality {
--color-text-emphatic: @dark-blue;
--color-text-subtle: #555;
}
}
@scope (.theme-dark) to (.themed) {
.dh-style,
.duality {
--color-text-emphatic: @golden;
--color-text-subtle: #a29086;
}
}
@primary-blue: var(--primary-blue, #1488cc);
@ -193,4 +206,7 @@
}
}
@color-text-subtle: var(--dh-color-text-subtle);
// LESS variable versions of core foundry color variables
@color-text-emphatic: var(--color-text-emphatic);
@color-text-primary: var(--color-text-primary);
@color-text-subtle: var(--color-text-subtle);

2
styles/less/ux/tooltip/armorManagement.less
View file

@ -124,7 +124,7 @@
background: @dark-blue;
align-items: center;
justify-content: center;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
min-height: 30px;
width: 100%;

4
styles/less/ux/tooltip/resource-management.less
View file

@ -9,7 +9,7 @@
display: flex;
gap: 10px;
background-color: light-dark(transparent, @dark-blue);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
padding: 5px 10px;
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 6px;
@ -22,7 +22,7 @@
font-size: var(--font-size-14);
font-weight: bold;
text-transform: uppercase;
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
margin: 0;
}

2
styles/less/ux/tooltip/sheet.less
View file

@ -3,7 +3,7 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip),
#tooltip.bordered-tooltip {
.tooltip-title {
font-size: var(--font-size-20);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
font-weight: 700;
}

2
styles/less/ux/tooltip/tooltip.less
View file

@ -132,7 +132,7 @@ aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
border-radius: 3px;
padding: 3px;
background: light-dark(@dark-blue-60, @rustic-brown-80);
color: light-dark(@dark-blue, @golden);
color: @color-text-emphatic;
font-size: 12px;
margin-bottom: 10px;
}