Added triggerChatRollFx

* 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

module/applications/dialogs/groupRollDialog.mjs

@@ -358,8 +358,6 @@ export default class GroupRollDialog extends HandlebarsApplicationMixin(Applicat
         });
 
         if (!result) return;
-        // todo: move logic to actor.rollTrait() or actor.diceRoll()
-        if (!game.modules.get('dice-so-nice')?.active) foundry.audio.AudioHelper.play({ src: CONFIG.sounds.dice });
 
         const rollData = result.messageRoll.toJSON();
         delete rollData.options.messageRoll;

module/applications/dialogs/resourceDiceDialog.mjs

@@ -1,4 +1,4 @@
-import { itemAbleRollParse } from '../../helpers/utils.mjs';
+import { itemAbleRollParse, triggerChatRollFx } from '../../helpers/utils.mjs';
 
 const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
 
@@ -69,7 +69,7 @@ export default class ResourceDiceDialog extends HandlebarsApplicationMixin(Appli
         const max = itemAbleRollParse(this.item.system.resource.max, this.actor, this.item);
         const diceFormula = `${max}${this.item.system.resource.dieFaces}`;
         const roll = await new Roll(diceFormula).evaluate();
-        if (game.modules.get('dice-so-nice')?.active) await game.dice3d.showForRoll(roll, game.user, true);
+        await triggerChatRollFx([roll]);
         this.rollValues = roll.terms[0].results.map(x => ({ value: x.result, used: false }));
         this.resetUsed = true;
 

module/applications/dialogs/tagTeamDialog.mjs

@@ -434,8 +434,6 @@ export default class TagTeamDialog extends HandlebarsApplicationMixin(Applicatio
 
         if (!result) return;
 
-        if (!game.modules.get('dice-so-nice')?.active) foundry.audio.AudioHelper.play({ src: CONFIG.sounds.dice });
-
         const rollData = result.messageRoll.toJSON();
         delete rollData.options.messageRoll;
         this.updatePartyData(

module/data/chat-message/actorRoll.mjs

@@ -1,3 +1,5 @@
+import { triggerChatRollFx } from '../../helpers/utils.mjs';
+
 const fields = foundry.data.fields;
 
 const targetsField = () =>
@@ -154,13 +156,7 @@ export default class DHActorRoll extends foundry.abstract.TypeDataModel {
             partData.roll = rerolled.toJSON();
         }
 
-        if (game.modules.get('dice-so-nice')?.active) {
+        await triggerChatRollFx(rerolls);
-            for (const roll of rerolls) {
-                await game.dice3d.showForRoll(roll, game.user, true);
-            }
-        } else {
-            foundry.audio.AudioHelper.play({ src: CONFIG.sounds.dice });
-        }
 
         return update;
     }

module/data/fields/action/damageField.mjs

@@ -72,9 +72,6 @@ export default class DamageField extends fields.SchemaField {
         damageConfig.source.message = messageId;
         damageConfig.directDamage = !!damageConfig.source?.message;
 
-        // if(damageConfig.source?.message && game.modules.get('dice-so-nice')?.active)
-        //     await game.dice3d.waitFor3DAnimationByMessageID(damageConfig.source.message);
-
         const damageResult = await CONFIG.Dice.daggerheart.DamageRoll.build(damageConfig);
         if (!damageResult) return false;
         if (damageResult.actionChatMessageHandled) config.actionChatMessageHandled = true;

module/data/fields/action/rollField.mjs

@@ -78,6 +78,24 @@ export class DHActionRollData extends foundry.abstract.DataModel {
         return formula;
     }
 
+    getModifier() {
+        const modifiers = [];
+        if (!this.parent?.actor) return modifiers;
+        switch (this.parent.actor.type) {
+            case 'companion':
+            case 'adversary':
+                if (this.type === CONFIG.DH.GENERAL.rollTypes.attack.id)
+                    modifiers.push({
+                        label: 'Bonus to Hit',
+                        value: this.bonus ?? this.parent.actor.system.attack.roll.bonus ?? 0
+                    });
+                break;
+            default:
+                break;
+        }
+        return modifiers;
+    }
+
     get rollTrait() {
         if (this.parent?.actor?.type !== 'character') return null;
         switch (this.type) {
@@ -127,6 +145,7 @@ export default class RollField extends fields.EmbeddedDataField {
         config.dialog.configure = RollField.getAutomation() ? !config.dialog.configure : config.dialog.configure;
 
         const roll = {
+            baseModifiers: this.roll.getModifier(),
             label: 'Attack',
             type: this.roll?.type,
             trait: this.roll?.rollTrait,

module/data/fields/action/summonField.mjs

@@ -1,4 +1,4 @@
-import { itemAbleRollParse } from '../../../helpers/utils.mjs';
+import { itemAbleRollParse, triggerChatRollFx } from '../../../helpers/utils.mjs';
 import FormulaField from '../formulaField.mjs';
 
 const fields = foundry.data.fields;
@@ -40,7 +40,7 @@ export default class DHSummonField extends fields.ArrayField {
             const roll = new Roll(itemAbleRollParse(summon.count, this.actor, this.item));
             await roll.evaluate();
             const count = roll.total;
-            if (!roll.isDeterministic && game.modules.get('dice-so-nice')?.active) rolls.push(roll);
+            if (!roll.isDeterministic) rolls.push(roll);
 
             const actor = await DHSummonField.getWorldActor(await foundry.utils.fromUuid(summon.actorUUID));
             /* Extending summon data in memory so it's available in actionField.toChat. Think it's harmless, but ugly. Could maybe find a better way. */
@@ -56,7 +56,7 @@ export default class DHSummonField extends fields.ArrayField {
             }
         }
 
-        if (rolls.length) await Promise.all(rolls.map(roll => game.dice3d.showForRoll(roll, game.user, true)));
+        if (rolls.length) await triggerChatRollFx(rolls);
 
         this.actor.sheet?.minimize();
         DHSummonField.handleSummon(summonData, this.actor);

module/dice/d20Roll.mjs

@@ -1,4 +1,5 @@
 import D20RollDialog from '../applications/dialogs/d20RollDialog.mjs';
+import { triggerChatRollFx } from '../helpers/utils.mjs';
 import DHRoll from './dhRoll.mjs';
 
 export default class D20Roll extends DHRoll {
@@ -128,30 +129,8 @@ export default class D20Roll extends DHRoll {
         }
     }
 
-    getBaseModifiers() {
-        const modifiers = [];
-        const actor = foundry.utils.fromUuidSync(this.options.source.actor);
-        if (!actor) return modifiers;
-        switch (actor.type) {
-            case 'companion':
-            case 'adversary':
-                if (
-                    this.options.roll.type === CONFIG.DH.GENERAL.rollTypes.attack.id ||
-                    this.options.source.action === actor.system.attack.id
-                )
-                    modifiers.push({
-                        label: 'Bonus to Hit',
-                        value: this.data.attack.roll.bonus ?? 0
-                    });
-                break;
-            default:
-                break;
-        }
-        return modifiers;
-    }
-
     applyBaseBonus() {
-        const modifiers = this.getBaseModifiers();
+        const modifiers = foundry.utils.deepClone(this.options.roll.baseModifiers) ?? [];
 
         modifiers.push(
             ...this.getBonus(
@@ -252,11 +231,7 @@ export default class D20Roll extends DHRoll {
         if (this instanceof game.system.api.dice.DualityRoll) return result;
 
         if (options?.liveRoll) {
-            if (game.modules.get('dice-so-nice')?.active) {
+            await triggerChatRollFx([result]);
-                await game.dice3d.showForRoll(result, game.user, true);
-            } else {
-                foundry.audio.AudioHelper.play({ src: CONFIG.sounds.dice });
-            }
         }
 
         return result;

module/dice/damageRoll.mjs

@@ -1,5 +1,5 @@
 import DamageDialog from '../applications/dialogs/damageDialog.mjs';
-import { parseRallyDice } from '../helpers/utils.mjs';
+import { parseRallyDice, triggerChatRollFx } from '../helpers/utils.mjs';
 import DHRoll from './dhRoll.mjs';
 
 export default class DamageRoll extends DHRoll {
@@ -43,25 +43,24 @@ export default class DamageRoll extends DHRoll {
         const chatMessage = config.source?.message
             ? ui.chat.collection.get(config.source.message)
             : getDocumentClass('ChatMessage').applyMode({}, config.rollMode ?? 'public');
+
+        const diceRolls = [];
         if (game.modules.get('dice-so-nice')?.active) {
+            config.mute = true;
             const pool = foundry.dice.terms.PoolTerm.fromRolls(
                 Object.values(config.damage).flatMap(r => r.parts.map(p => p.roll))
-                ),
-                diceRoll = Roll.fromTerms([pool]);
-            await game.dice3d.showForRoll(
-                diceRoll,
-                game.user,
-                true,
-                chatMessage.whisper?.length > 0 ? chatMessage.whisper : null,
-                chatMessage.blind
             );
-            config.mute = true;
+            diceRolls.push(Roll.fromTerms([pool]));
         }
+
+        await triggerChatRollFx(diceRolls, {
+            whisper: chatMessage.whisper?.length > 0 ? chatMessage.whisper : null,
+            blind: chatMessage.blind
+        });
         await super.buildPost(roll, config, message);
+
         if (config.source?.message) {
             chatMessage.update({ 'system.damage': config.damage });
-
-            if (!game.modules.get('dice-so-nice')?.active) foundry.audio.AudioHelper.play({ src: CONFIG.sounds.dice });
         }
     }
 
@@ -324,9 +323,10 @@ export default class DamageRoll extends DHRoll {
         const newIndex = parsedDiceTerms[dice].results.length;
         await term.reroll(`/r1=${termResult.result}`);
 
+        const diceRolls = [];
         if (game.modules.get('dice-so-nice')?.active) {
             const newResult = parsedDiceTerms[dice].results[newIndex];
-            const diceSoNiceRoll = {
+            diceRolls.push({
                 _evaluated: true,
                 dice: [
                     new foundry.dice.terms.Die({
@@ -337,11 +337,10 @@ export default class DamageRoll extends DHRoll {
                     })
                 ],
                 options: { appearance: {} }
-            };
+            });
-
-            await game.dice3d.showForRoll(diceSoNiceRoll, game.user, true);
         }
 
+        await triggerChatRollFx(diceRolls);
         await parsedRoll.evaluate();
 
         const results = parsedRoll.dice[dice].results.map(result => ({

module/dice/dhRoll.mjs

@@ -1,4 +1,5 @@
 import D20RollDialog from '../applications/dialogs/d20RollDialog.mjs';
+import { triggerChatRollFx } from '../helpers/utils.mjs';
 
 export default class DHRoll extends Roll {
     baseTerms = [];
@@ -75,9 +76,7 @@ export default class DHRoll extends Roll {
         }
 
         if (config.skips?.createMessage) {
-            if (game.modules.get('dice-so-nice')?.active) {
+            await triggerChatRollFx([roll]);
-                await game.dice3d.showForRoll(roll, game.user, true);
-            }
         } else if (!config.source?.message) {
             config.message = await this.toMessage(roll, config);
         }
@@ -85,6 +84,7 @@ export default class DHRoll extends Roll {
 
     static postEvaluate(roll, config = {}) {
         return {
+            ...roll.options.roll,
             total: roll.total,
             formula: roll.formula,
             dice: roll.dice.map(d => ({

module/dice/die/dualityDie.mjs

@@ -1,5 +1,4 @@
-import { ResourceUpdateMap } from '../../data/action/baseAction.mjs';
+import { updateResourcesForDualityReroll } from '../helpers.mjs';
-import DualityRoll from '../dualityRoll.mjs';
 
 export default class DualityDie extends foundry.dice.terms.Die {
     constructor(options) {
@@ -40,7 +39,7 @@ export default class DualityDie extends foundry.dice.terms.Die {
             if (options.liveRoll.isReaction) return;
 
             const newDuality = this.#getDualityState(options.liveRoll.roll);
-            DualityRoll.updateResources(oldDuality, newDuality, options.liveRoll.actor);
+            updateResourcesForDualityReroll(oldDuality, newDuality, options.liveRoll.actor);
         }
     }
 

module/dice/dualityRoll.mjs

@@ -2,7 +2,7 @@ import D20RollDialog from '../applications/dialogs/d20RollDialog.mjs';
 import D20Roll from './d20Roll.mjs';
 import { parseRallyDice, setDiceSoNiceForDualityRoll } from '../helpers/utils.mjs';
 import { getDiceSoNicePresets } from '../config/generalConfig.mjs';
-import { ResourceUpdateMap } from '../data/action/baseAction.mjs';
+import { updateResourcesForDualityReroll } from './helpers.mjs';
 
 export default class DualityRoll extends D20Roll {
     _advantageNumber = 1;
@@ -132,13 +132,7 @@ export default class DualityRoll extends D20Roll {
     }
 
     createBaseDice() {
-        if (
-            this.dice[0] instanceof game.system.api.dice.diceTypes.HopeDie &&
-            this.dice[1] instanceof game.system.api.dice.diceTypes.FearDie
-        ) {
         this.terms = [this.terms[0], this.terms[1], this.terms[2]];
-            return;
-        }
 
         this.terms[0] = new game.system.api.dice.diceTypes.HopeDie({
             faces: this.data.rules.dualityRoll?.defaultHopeDice ?? 12
@@ -391,24 +385,6 @@ export default class DualityRoll extends D20Roll {
         }
     }
 
-    static updateResources(oldDuality, newDuality, actor) {
-        const { hopeFear } = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Automation);
-        if (game.user.isGM ? !hopeFear.gm : !hopeFear.players) return;
-
-        const updates = [];
-        const hope = (newDuality >= 0 ? 1 : 0) - (oldDuality >= 0 ? 1 : 0);
-        const stress = (newDuality === 0 ? 1 : 0) - (oldDuality === 0 ? 1 : 0);
-        const fear = (newDuality === -1 ? 1 : 0) - (oldDuality === -1 ? 1 : 0);
-
-        if (hope !== 0) updates.push({ key: 'hope', value: hope, total: -1 * hope, enabled: true });
-        if (stress !== 0) updates.push({ key: 'stress', value: -1 * stress, total: stress, enabled: true });
-        if (fear !== 0) updates.push({ key: 'fear', value: fear, total: -1 * fear, enabled: true });
-
-        const resourceUpdates = new ResourceUpdateMap(actor);
-        resourceUpdates.addResources(updates);
-        resourceUpdates.updateResources();
-    }
-
     async reroll(options) {
         const oldDuality = this.withHope ? 1 : this.withFear ? -1 : 0;
         const rerolled = DualityRoll.fromData((await super.reroll(options)).toJSON());
@@ -435,7 +411,7 @@ export default class DualityRoll extends D20Roll {
 
             const newDuality = rerolled.withHope ? 1 : rerolled.withFear ? -1 : 0;
             const actor = await foundry.utils.fromUuid(this.options.source.actor);
-            DualityRoll.updateResources(oldDuality, newDuality, actor);
+            updateResourcesForDualityReroll(oldDuality, newDuality, actor);
         }
 
         return rerolled;

module/dice/helpers.mjs

@@ -0,0 +1,17 @@
+export function updateResourcesForDualityReroll(oldDuality, newDuality, actor) {
+    const { hopeFear } = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Automation);
+    if (game.user.isGM ? !hopeFear.gm : !hopeFear.players) return;
+
+    const updates = [];
+    const hope = (newDuality >= 0 ? 1 : 0) - (oldDuality >= 0 ? 1 : 0);
+    const stress = (newDuality === 0 ? 1 : 0) - (oldDuality === 0 ? 1 : 0);
+    const fear = (newDuality === -1 ? 1 : 0) - (oldDuality === -1 ? 1 : 0);
+
+    if (hope !== 0) updates.push({ key: 'hope', value: hope, total: -1 * hope, enabled: true });
+    if (stress !== 0) updates.push({ key: 'stress', value: -1 * stress, total: stress, enabled: true });
+    if (fear !== 0) updates.push({ key: 'fear', value: fear, total: -1 * fear, enabled: true });
+
+    const resourceUpdates = new ResourceUpdateMap(actor);
+    resourceUpdates.addResources(updates);
+    resourceUpdates.updateResources();
+}

module/helpers/utils.mjs

@@ -864,3 +864,18 @@ export function camelize(str) {
         })
         .replace(/\s+/g, '');
 }
+
+/**
+ * Triggers DiceSoNice rolls or dice roll audio for rolls. Not used for duality rolls.
+ * @param { Roll[] } rolls
+ * @return { void }
+ */
+export async function triggerChatRollFx(rolls, options = { whisper: false, blind: false }) {
+    const { whisper, blind } = options;
+    if (game.modules.get('dice-so-nice')?.active) {
+        const rerollPromises = rolls.map(roll => game.dice3d.showForRoll(roll, game.user, true, whisper, blind));
+        await Promise.allSettled(rerollPromises);
+    } else {
+        foundry.audio.AudioHelper.play({ src: CONFIG.sounds.dice });
+    }
+}

styles/less/dialog/beastform/sheet.less

@@ -43,7 +43,7 @@
         text-align: center;
         font-size: var(--font-size-16);
         margin: 0 4px;
-        border: 1px solid light-dark(@dark-blue, @golden);
+        border: 1px solid @color-border;
         border-radius: 6px;
         color: light-dark(@dark, @beige);
         background-image: url('../assets/parchments/dh-parchment-dark.png');
@@ -58,7 +58,7 @@
             position: relative;
             display: flex;
             justify-content: center;
-            border: 1px solid light-dark(@dark-blue, @golden);
+            border: 1px solid @color-border;
             border-radius: 6px;
             cursor: pointer;
             width: 120px;
@@ -164,7 +164,7 @@
 
                         .hybrid-data {
                             padding: 0 2px;
-                            border: 1px solid light-dark(@dark-blue, @golden);
+                            border: 1px solid @color-border;
                             border-radius: 6px;
                             color: light-dark(@dark, @beige);
                             background-image: url('../assets/parchments/dh-parchment-dark.png');
@@ -191,7 +191,7 @@
                 flex-direction: column;
                 gap: 4px;
                 padding: 0 4px;
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 border-radius: 6px;
                 color: light-dark(@dark, @beige);
                 background-image: url('../assets/parchments/dh-parchment-dark.png');
@@ -226,7 +226,7 @@
                 gap: 4px;
 
                 .trait-card {
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 6px;
                     padding: 2px;
                     opacity: 0.4;

styles/less/dialog/character-creation/selections-container.less

@@ -79,7 +79,7 @@
                 font-weight: bold;
                 padding: 0 2px;
                 background-image: url(../assets/parchments/dh-parchment-light.png);
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 border-radius: 6px;
                 color: light-dark(@beige, @dark);
                 opacity: 0.4;
@@ -203,7 +203,7 @@
                     height: 16px;
                     width: 110px;
                     min-height: unset;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     color: light-dark(@beige, @beige);
                     background-color: light-dark(var(--color-warm-3), var(--color-warm-3));
 
@@ -230,7 +230,7 @@
                 .suggested-trait-container {
                     width: 56px;
                     white-space: nowrap;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 6px;
                     color: light-dark(@beige, @dark);
                     background-image: url('../assets/parchments/dh-parchment-light.png');
@@ -345,7 +345,7 @@
                         display: flex;
                         justify-content: center;
                         position: relative;
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
                         border-radius: 6px;
 
                         .nav-section-text {
@@ -383,7 +383,7 @@
                             width: 56px;
                             text-align: center;
                             line-height: 1;
-                            border: 1px solid light-dark(@dark-blue, @golden);
+                            border: 1px solid @color-border;
                             border-radius: 6px;
                             color: light-dark(@beige, @dark);
                             background-image: url(../assets/parchments/dh-parchment-light.png);
@@ -447,7 +447,7 @@
                 height: 100%;
 
                 .simple-equipment {
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 8px;
                     position: relative;
                     display: flex;
@@ -466,7 +466,7 @@
                         top: -8px;
                         font-size: var(--font-size-12);
                         white-space: nowrap;
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
                         border-radius: 6px;
                         color: @dark;
                         background-image: url('../assets/parchments/dh-parchment-light.png');

styles/less/dialog/character-creation/tab-navigation.less

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

styles/less/dialog/compendiumBrowserPackDialog/sheet.less

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

styles/less/dialog/damage-reduction/damage-reduction-container.less

@@ -81,7 +81,7 @@
 
                 .mark-container {
                     cursor: pointer;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 6px;
                     height: 26px;
                     padding: 0 1px;
@@ -126,7 +126,7 @@
             width: 100%;
 
             .chip-inner-container {
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 border-radius: 6px;
                 height: 26px;
                 padding: 0 4px;

styles/less/dialog/dice-roll/roll-selection.less

@@ -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;

styles/less/dialog/downtime/downtime-container.less

@@ -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;
                     }
 
@@ -55,7 +55,7 @@
 
                 .activity-selected-marker {
                     font-size: var(--font-size-14);
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 6px;
                     color: light-dark(@dark, @beige);
                     background-image: url(../assets/parchments/dh-parchment-dark.png);
@@ -78,7 +78,7 @@
         }
 
         .refreshable-container {
-            border: 1px solid light-dark(@dark-blue, @golden);
+            border: 1px solid @color-border;
             border-radius: 6px;
             color: light-dark(@dark, @beige);
             background-image: url('../assets/parchments/dh-parchment-dark.png');

styles/less/dialog/group-roll-dialog/_common.less

@@ -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;
 }

styles/less/dialog/group-roll-dialog/main.less

@@ -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 {

styles/less/dialog/image-select/sheet.less

@@ -12,7 +12,7 @@
         img {
             width: 136px;
             height: 136px;
-            border: 1px solid light-dark(@dark-blue, @golden);
+            border: 1px solid @color-border;
             border-radius: 6px;
             opacity: 0.4;
 

styles/less/dialog/level-up/navigation-container.less

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

styles/less/dialog/multiclass-choice/sheet.less

@@ -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);
@@ -57,7 +57,7 @@
                     display: flex;
                     flex-wrap: wrap;
                     font-style: italic;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 6px;
                     padding: 4px 4px;
                 }

styles/less/dialog/tag-team-dialog/initialization.less

@@ -36,7 +36,7 @@
                 align-items: stretch;
                 justify-content: center;
                 border-radius: 6px;
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 overflow: hidden;
                 height: 11.5rem;
                 width: 122px;
@@ -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%);
                 }

styles/less/dialog/tag-team-dialog/sheet.less

@@ -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;
     }
@@ -42,7 +42,7 @@
                 img {
                     height: 64px;
                     border-radius: 6px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                 }
 
                 .member-name {
@@ -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 {

styles/less/global/dialog.less

@@ -36,8 +36,8 @@
             padding: 0;
 
             &:hover {
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
-                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;

styles/less/global/elements.less

@@ -2,8 +2,6 @@
 @import '../utils/fonts.less';
 
 .dh-style {
-    border: 1px solid light-dark(@dark-blue, @golden);
-
     input[type='text'],
     input[type='number'],
     textarea,
@@ -14,12 +12,12 @@
         box-shadow: 0 4px 30px @soft-shadow;
         backdrop-filter: blur(9.5px);
         outline: 2px solid transparent;
-        color: light-dark(@dark-blue, @golden);
+        color: @input-color-text;
-        border: 1px solid light-dark(@dark, @beige);
+        border: 1px solid @input-color-border;
         transition: all 0.3s ease;
 
         &::placeholder {
-            color: light-dark(@dark-40, @beige-50);
+            color: @color-text-subtle;
         }
 
         &:hover,
@@ -30,7 +28,7 @@
         &:focus[type='number'] {
             background: light-dark(@soft-shadow, @semi-transparent-dark-blue);
             box-shadow: none;
-            outline: 2px solid light-dark(@dark, @beige);
+            outline: 2px solid @input-color-border;
         }
 
         &:disabled[type='text'],
@@ -47,7 +45,7 @@
     .input[contenteditable] {
         cursor: var(--cursor-text);
         &:empty:before {
-            color: light-dark(@dark-40, @beige-50);
+            color: @color-text-subtle;
             content: attr(placeholder);
         }
     }
@@ -107,7 +105,7 @@
 
         &:hover {
             background: light-dark(@light-black, @dark-blue);
-            color: light-dark(@dark-blue, @golden);
+            color: @color-text-emphatic;
         }
 
         &.glow {
@@ -128,7 +126,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 +173,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;
@@ -265,7 +263,7 @@
         align-items: center;
         margin-top: 5px;
         border-radius: 6px;
-        border-color: light-dark(@dark-blue, @golden);
+        border-color: @color-fieldset-border;
 
         &.glassy {
             background-color: light-dark(@dark-blue-10, @golden-10);
@@ -274,7 +272,7 @@
             legend {
                 padding: 2px 12px;
                 border-radius: 3px;
-                background-color: light-dark(@dark-blue, @golden);
+                background-color: @color-fieldset-border;
                 color: light-dark(@beige, @dark-blue);
                 margin-bottom: var(--spacer-4);
             }
@@ -353,7 +351,7 @@
 
         legend {
             font-weight: bold;
-            color: light-dark(@dark-blue, @golden);
+            color: @color-text-emphatic;
 
             &.with-icon {
                 display: flex;
@@ -365,18 +363,6 @@
             }
         }
 
-        input[type='text'],
-        input[type='number'] {
-            color: light-dark(@dark, @beige);
-            transition: all 0.3s ease;
-            outline: 2px solid transparent;
-
-            &:focus,
-            &:hover {
-                outline: 2px solid light-dark(@dark, @beige);
-            }
-        }
-
         &[disabled],
         &.child-disabled .form-group,
         select[disabled],
@@ -514,7 +500,7 @@
         display: block;
         height: 1px;
         width: 100%;
-        border-bottom: 1px solid light-dark(@dark-blue, @golden);
+        border-bottom: 1px solid @color-border;
         mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
     }
 
@@ -522,7 +508,7 @@
         display: block;
         height: 1px;
         width: 100%;
-        border-bottom: 1px solid light-dark(@dark-blue, @golden);
+        border-bottom: 1px solid @color-border;
         mask-image: linear-gradient(270deg, transparent 0%, black 100%);
 
         &.invert {
@@ -571,7 +557,7 @@
                 border: 0;
 
                 &:hover {
-                    color: light-dark(@dark-blue, @golden);
+                    color: @color-text-emphatic;
                 }
 
                 &:not(:first-child) {

styles/less/global/filter-menu.less

@@ -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);

styles/less/global/inventory-item.less

@@ -287,7 +287,7 @@
         position: relative;
         height: 120px;
         width: 98px;
-        border: 1px solid light-dark(@dark-blue, @golden);
+        border: 1px solid @color-border;
         border-radius: 6px;
         cursor: pointer;
 

styles/less/global/resource-bar.less

@@ -50,16 +50,16 @@
             flex-wrap: wrap;
             gap: 5px;
             padding: 5px;
-            border: 1px solid light-dark(@dark-blue, @golden);
+            border: 1px solid @color-border;
             border-radius: 6px;
             z-index: 1;
-            color: light-dark(@dark-blue, @golden);
+            color: @color-text-emphatic;
             width: fit-content;
 
             .slot {
                 width: 15px;
                 height: 10px;
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 background: light-dark(@dark-blue-10, @golden-10);
                 border-radius: 3px;
                 transition: all 0.3s ease;
@@ -148,7 +148,7 @@
         appearance: none;
         width: 100px;
         height: 40px;
-        border: 1px solid light-dark(@dark-blue, @golden);
+        border: 1px solid @color-border;
         border-radius: 6px;
         z-index: 1;
         background: @dark-blue;

styles/less/global/sheet.less

@@ -4,7 +4,7 @@
 
 // Theme handling
 .appTheme({
-    background: @dark-blue-d0;
+    background: @dark-blue-c0;
     backdrop-filter: blur(7px);
 }, {
     background: url('../assets/parchments/dh-parchment-light.png') no-repeat center;
@@ -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;
             }
         }
     }

styles/less/global/tab-navigation.less

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

styles/less/hud/token-hud/token-hud.less

@@ -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;
             }
         }
     }

styles/less/sheets-settings/character-settings/sheet.less

@@ -1,6 +1,7 @@
 @import '../../utils/colors.less';
 
-.theme-light .application.daggerheart.dh-style.dialog {
+.appTheme({}, {
+    &.dialog.character-settings {
         .tab.details {
             .traits-inner-container .trait-container {
                 background: url('../assets/svg/trait-shield-light.svg') no-repeat;
@@ -12,6 +13,7 @@
             }
         }
     }
+});
 
 .application.daggerheart.dh-style.dialog {
     .tab.details {

styles/less/sheets-settings/header.less

@@ -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;
             }
         }
     }

styles/less/sheets/actors/actor-sheet-shared.less

@@ -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,9 +180,9 @@
                         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: 1px solid @color-border;
                         border-radius: 6px;
                         align-items: center;
                         width: fit-content;
@@ -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);
                         }
                     }

styles/less/sheets/actors/adversary/sidebar.less

@@ -65,9 +65,9 @@
             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: 1px solid @color-border;
             border-radius: 6px;
             align-items: center;
             width: fit-content;
@@ -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);
@@ -191,7 +191,7 @@
                         appearance: none;
                         width: 100px;
                         height: 40px;
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
                         border-radius: 6px;
                         z-index: 1;
                         background: @dark-blue;
@@ -237,7 +237,7 @@
                         display: flex;
                         width: 50px;
                         height: 30px;
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
                         border-bottom: none;
                         border-radius: 6px 6px 0 0;
                         padding: 0 6px;

styles/less/sheets/actors/character/header.less

@@ -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,9 +170,9 @@
                 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: 1px solid @color-border;
                 border-radius: 6px;
                 align-items: center;
                 width: fit-content;
@@ -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 {
@@ -226,7 +226,6 @@
             padding-left: 0.5rem;
 
             .trait {
-                --color-border: light-dark(@semi-transparent-dark-blue, @golden-60);
                 cursor: pointer;
                 position: relative;
 
@@ -238,10 +237,10 @@
 
                 .trait-name {
                     position: relative;
-                    background-color: light-dark(@semi-transparent-dark-blue, @golden-40);
+                    background-color: @trait-color-bg;
-                    border: 1px solid var(--color-border);
+                    border: 1px solid @trait-color-border;
                     border-radius: 3px;
-                    color: light-dark(var(--color-light-1), @golden);
+                    color: @color-text-emphatic;
                     font-size: var(--font-size-12);
                     font-weight: 600;
                     height: 1rem;
@@ -250,7 +249,7 @@
                     width: 100%;
                     padding: 0 0.1876px 0 0.375rem;
                     margin-right: 0.125rem; /* makes it center SLIGHTLY */
-                    text-shadow: 1px 1px 2px @light-black;
+                    text-shadow: 1px 1px 3px @color-text-shadow-contrast;
 
                     display: flex;
                     align-items: center;
@@ -259,7 +258,7 @@
                     .tier-mark {
                         position: absolute;
                         background-color: @dark-blue;
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
                         border-radius: 50%;
                         width: 1rem;
                         height: 1rem;
@@ -279,6 +278,7 @@
                 }
 
                 .trait-value-area {
+                    --color-border: @trait-color-border;
                     --background: light-dark(#e8e6e3, @dark-blue);
                     display: flex;
                     position: relative;
@@ -298,7 +298,7 @@
 
                     .spellcasting-mark {
                         position: absolute;
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
                         color: @golden;
                         left: 0;
                         right: 0;

styles/less/sheets/actors/character/loadout.less

@@ -45,7 +45,7 @@
 
             .btn-toggle-view {
                 background: light-dark(@dark-blue-10, @dark-blue);
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 border-radius: 15px;
                 padding: 0;
                 gap: 0;
@@ -54,7 +54,7 @@
                 span {
                     margin: 1px;
                     width: 26px;
-                    color: light-dark(@dark-blue, @golden);
+                    color: @color-text-emphatic;
 
                     &.list-icon {
                         i {

styles/less/sheets/actors/character/sidebar.less

@@ -40,7 +40,7 @@
 .application.sheet.dh-style .character-sidebar-sheet {
     width: 275px;
     min-width: 275px;
-    border-right: 1px solid light-dark(@dark-blue, @golden);
+    border-right: 1px solid @color-border;
 
     .portrait {
         position: relative;
@@ -168,7 +168,7 @@
                     appearance: none;
                     width: 100px;
                     height: 40px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 6px;
                     z-index: 1;
                     background: @dark-blue;
@@ -282,11 +282,11 @@
 
                     &:hover {
                         background: light-dark(@light-black, @dark-blue);
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
 
                         h4,
                         i {
-                            color: light-dark(@dark-blue, @golden);
+                            color: @color-text-emphatic;
                         }
                     }
                 }
@@ -309,12 +309,12 @@
                         flex-wrap: wrap;
                         gap: 4px;
                         padding: 5px;
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
                         border-radius: 6px;
                         z-index: 1;
                         background: @dark-blue;
                         justify-content: center;
-                        color: light-dark(@dark-blue, @golden);
+                        color: @color-text-emphatic;
 
                         .armor-slot {
                             cursor: pointer;
@@ -343,12 +343,12 @@
 
                         &:hover {
                             background: light-dark(@light-black, @dark-blue);
-                            border: 1px solid light-dark(@dark-blue, @golden);
+                            border: 1px solid @color-border;
 
                             .label,
                             .value,
                             i {
-                                color: light-dark(@dark-blue, @golden);
+                                color: @color-text-emphatic;
                             }
                         }
 
@@ -375,7 +375,7 @@
                     text-align: center;
                     z-index: 2;
                     color: light-dark(@dark-blue, @beige);
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-bottom: none;
                     border-radius: 6px 6px 0 0;
 
@@ -411,7 +411,7 @@
                     appearance: none;
                     width: 80px;
                     height: 30px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 6px;
                     z-index: 1;
                     background: light-dark(transparent, @dark-blue);
@@ -450,7 +450,7 @@
                     display: flex;
                     width: 50px;
                     height: 30px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-bottom: none;
                     border-radius: 6px 6px 0 0;
                     padding: 0 6px;
@@ -513,9 +513,9 @@
             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: 1px solid @color-border;
             border-radius: 6px;
             align-items: center;
             width: fit-content;
@@ -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);

styles/less/sheets/actors/companion/header.less

@@ -30,14 +30,14 @@
                 font-size: var(--font-size-24);
                 outline: 2px solid transparent;
                 box-shadow: unset;                
-                text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80);
+                text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
                 
                 height: 2rem;
                 text-align: center;
                 transition: all 0.3s ease;
 
                 &:hover {
-                    outline: 2px solid light-dark(@dark, @golden);
+                    outline: 2px solid @color-border;
                 }
             }
         }
@@ -68,7 +68,7 @@
                     display: flex;
                     width: 50px;
                     height: 40px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-bottom: none;
                     border-radius: 6px 6px 0 0;
                     padding: 0 6px;
@@ -100,104 +100,6 @@
                 }
             }
 
-            // .status-bar {
-            //     display: flex;
-            //     justify-content: center;
-            //     position: relative;
-            //     width: 100px;
-            //     height: 40px;
-
-            //     .status-label {
-            //         position: relative;
-            //         top: 40px;
-            //         height: 22px;
-            //         width: 79px;
-            //         clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
-            //         background: light-dark(@dark-blue, @golden);
-
-            //         h4 {
-            //             font-weight: bold;
-            //             text-align: center;
-            //             line-height: 18px;
-            //             color: light-dark(@beige, @dark-blue);
-            //         }
-            //     }
-            //     .status-value {
-            //         position: absolute;
-            //         display: flex;
-            //         padding: 0 6px;
-            //         font-size: 1.5rem;
-            //         align-items: center;
-            //         width: 100px;
-            //         height: 40px;
-            //         justify-content: center;
-            //         text-align: center;
-            //         z-index: 2;
-            //         color: @beige;
-
-            //         input[type='number'] {
-            //             background: transparent;
-            //             font-size: 1.5rem;
-            //             width: 40px;
-            //             height: 30px;
-            //             text-align: center;
-            //             border: none;
-            //             outline: 2px solid transparent;
-            //             color: @beige;
-
-            //             &.bar-input {
-            //                 padding: 0;
-            //                 color: @beige;
-            //                 backdrop-filter: none;
-            //                 background: transparent;
-            //                 transition: all 0.3s ease;
-
-            //                 &:hover,
-            //                 &:focus {
-            //                     background: @semi-transparent-dark-blue;
-            //                     backdrop-filter: blur(9.5px);
-            //                 }
-            //             }
-            //         }
-
-            //         .bar-label {
-            //             width: 40px;
-            //         }
-            //     }
-            //     .progress-bar {
-            //         position: absolute;
-            //         appearance: none;
-            //         width: 100px;
-            //         height: 40px;
-            //         border: 1px solid light-dark(@dark-blue, @golden);
-            //         border-radius: 6px;
-            //         z-index: 1;
-            //         background: @dark-blue;
-
-            //         &::-webkit-progress-bar {
-            //             border: none;
-            //             background: @dark-blue;
-            //             border-radius: 6px;
-            //         }
-            //         &::-webkit-progress-value {
-            //             background: @gradient-hp;
-            //             border-radius: 6px;
-            //         }
-            //         &.stress-color::-webkit-progress-value {
-            //             background: @gradient-stress;
-            //             border-radius: 6px;
-            //         }
-            //         &::-moz-progress-bar {
-            //             background: @gradient-hp;
-            //             border-radius: 6px;
-            //         }
-            //         &.stress-color::-moz-progress-bar {
-            //             background: @gradient-stress;
-            //             border-radius: 6px;
-            //         }
-            //     }
-            // }
-
             .level-div {
                 white-space: nowrap;
                 display: flex;

styles/less/sheets/actors/environment/header.less

@@ -36,15 +36,14 @@
                 transition: all 0.3s ease;
                 outline: 2px solid transparent;
                 box-shadow: none;
-                text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80);
+                text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
-
                 padding-left: 0;
                 height: 2.625rem;
 
                 &:hover[type='text'],
                 &:focus[type='text'] {
                     box-shadow: none;
-                    outline: 2px solid light-dark(@dark-blue, @golden);
+                    outline: 2px solid @color-border;
                 }
             }
             
@@ -98,7 +97,7 @@
                     display: flex;
                     width: 50px;
                     height: 30px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-bottom: none;
                     border-radius: 6px 6px 0 0;
                     padding: 0 6px;

styles/less/sheets/actors/party/header.less

@@ -20,11 +20,12 @@
         input.item-name[type='text'] {
             backdrop-filter: none;
             border: none;
+            color: @color-text-emphatic;
             font-family: @font-title;
             font-size: var(--font-size-32);
             outline: 2px solid transparent;
             box-shadow: unset;
-            text-shadow: 0 0 4px light-dark(white, @dark-80), 0 0 8px light-dark(white, @dark-80), 0 0 14px light-dark(white, @dark-80);
+            text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;
 
             text-align: center;
             transition: all 0.3s ease;
@@ -33,7 +34,7 @@
 
             &:hover[type='text'],
             &:focus[type='text'] {
-                outline: 2px solid light-dark(@dark-blue, @golden);
+                outline: 2px solid @color-border;
             }
         }
 

styles/less/sheets/actors/party/party-members.less

@@ -48,7 +48,7 @@
                         border-radius: 50%;
                         width: 24px;
                         height: 24px;
-                        border: 1px solid light-dark(@dark-blue, @golden);
+                        border: 1px solid @color-border;
                         object-fit: cover;
                     }
                 }
@@ -79,9 +79,9 @@
                     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: 1px solid @color-border;
                     border-radius: 3px;
                     align-items: baseline;
                     width: fit-content;
@@ -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,9 +132,9 @@
                 .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: 1px solid @color-border;
                     border-radius: 3px;
                     align-items: center;
                     width: fit-content;
@@ -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,9 +212,9 @@
                         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: 1px solid @color-border;
                         border-radius: 0 6px 6px 0;
                         width: fit-content;
                         min-height: 22px;
@@ -232,7 +232,7 @@
                         .slot {
                             width: 16px;
                             height: 10px;
-                            border: 1px solid light-dark(@dark-blue, @golden);
+                            border: 1px solid @color-border;
                             background: light-dark(@dark-blue-10, @golden-10);
                             border-radius: 3px;
                             transition: all 0.3s ease;
@@ -248,7 +248,7 @@
 
             .traits {
                 background-color: light-dark(@dark-blue-10, @dark-blue);
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 border-radius: 6px;
                 display: grid;
                 grid-template-columns: 1fr 1fr;                
@@ -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;

styles/less/ui/chat/group-roll.less

@@ -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;

styles/less/ui/chat/sheet.less

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

styles/less/ui/countdown/countdown.less

@@ -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;

styles/less/ui/effects-display/sheet.less

@@ -20,7 +20,7 @@
         .effect-container {
             position: relative;
             pointer-events: all;
-            border: 1px solid light-dark(@dark-blue, @golden);
+            border: 1px solid @color-border;
             border-radius: 3px;
 
             img {

styles/less/ui/item-browser/item-browser.less

@@ -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,8 +265,8 @@
         .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: 1px solid @color-border;
             border-radius: 3px;
             min-height: 30px;
             font-weight: bold;

styles/less/ui/settings/homebrew-settings/domains.less

@@ -60,7 +60,7 @@
                 position: relative;
                 display: flex;
                 justify-content: center;
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 border-radius: 6px;
 
                 &.selectable {
@@ -76,7 +76,7 @@
                 .domain-label {
                     position: absolute;
                     top: 4px;
-                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border: 1px solid @color-border;
                     border-radius: 6px;
                     padding: 0 2px;
                     color: light-dark(@dark, @beige);

styles/less/ui/settings/homebrew-settings/resources.less

@@ -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;

styles/less/ui/settings/homebrew-settings/types.less

@@ -21,7 +21,7 @@
                 border: 1px solid;
                 border-radius: 6px;
                 padding: 0 8px;
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 color: light-dark(@dark, @beige);
                 background-image: url('../assets/parchments/dh-parchment-dark.png');
                 cursor: pointer;

styles/less/ui/settings/settings.less

@@ -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,

styles/less/ui/sidebar/daggerheartMenu.less

@@ -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;

styles/less/utils/colors.less

@@ -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);
@@ -83,8 +84,47 @@
     --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);
+/** 
+ * 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) {  
+    .dh-style :scope,
+    :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;
+    }
 }
 
 @primary-blue: var(--primary-blue, #1488cc);
@@ -139,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);
@@ -161,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));
 
@@ -193,4 +234,14 @@
     }
 }
 
-@color-text-subtle: var(--dh-color-text-subtle);
+// 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);

styles/less/utils/mixin.less

@@ -5,16 +5,16 @@
  */
 .appTheme(@darkRules, @lightRules) {
     // Dark theme selectors
-    .themed.theme-dark .application.daggerheart.sheet.dh-style,
+    .themed.theme-dark .application.daggerheart.dh-style,
-    .themed.theme-dark.application.daggerheart.sheet.dh-style,
+    .themed.theme-dark.application.daggerheart.dh-style,
     body.theme-dark .application.daggerheart,
     body.theme-dark.application.daggerheart {
         @darkRules();
     }
 
     // Light theme selectors
-    .themed.theme-light .application.daggerheart.sheet.dh-style,
+    .themed.theme-light .application.daggerheart.dh-style,
-    .themed.theme-light.application.daggerheart.sheet.dh-style,
+    .themed.theme-light.application.daggerheart.dh-style,
     body.theme-light .application.daggerheart,
     body.theme-light.application.daggerheart {
         @lightRules();
@@ -50,15 +50,16 @@
  */
 .dh-typography() {
     h1 {
+        --dh-input-color-text: @color-text-emphatic;
         font-family: @font-title;
         margin: 0;
         border: none;
         font-weight: normal;
-    }
+        input[type='text'],
-
+        .input[contenteditable] {
-    h1 input[type='text'] {
             font-family: @font-title;
         }
+    }
 
     h2,
     h3 {

styles/less/ux/tooltip/armorManagement.less

@@ -83,7 +83,7 @@
                 appearance: none;
                 width: 100%;
                 height: 30px;
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 border-radius: 6px;
                 z-index: 1;
                 background: @dark-blue;
@@ -118,13 +118,13 @@
         flex-wrap: wrap;
         gap: 4px;
         padding: 5px;
-        border: 1px solid light-dark(@dark-blue, @golden);
+        border: 1px solid @color-border;
         border-radius: 6px;
         z-index: 1;
         background: @dark-blue;
         align-items: center;
         justify-content: center;
-        color: light-dark(@dark-blue, @golden);
+        color: @color-text-emphatic;
         min-height: 30px;
         width: 100%;
 

styles/less/ux/tooltip/resource-management.less

@@ -9,9 +9,9 @@
         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: 1px solid @color-border;
         border-radius: 6px;
         align-items: center;
         width: fit-content;
@@ -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;
         }
 

styles/less/ux/tooltip/sheet.less

@@ -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;
     }
 

styles/less/ux/tooltip/tooltip.less

@@ -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;
     }
@@ -238,7 +238,7 @@ aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-s
             .tooltip-chip {
                 font-size: var(--font-size-18);
                 padding: 2px 4px;
-                border: 1px solid light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
                 border-radius: 6px;
                 color: light-dark(@dark, @beige);
                 background-image: url(../assets/parchments/dh-parchment-dark.png);

system.json

@@ -2,7 +2,7 @@
     "id": "daggerheart",
     "title": "Daggerheart",
     "description": "An unofficial implementation of the Daggerheart system",
-    "version": "2.2.6",
+    "version": "2.2.7",
     "compatibility": {
         "minimum": "14.361",
         "verified": "14.363",
@@ -10,7 +10,7 @@
     },
     "url": "https://github.com/Foundryborne/daggerheart",
     "manifest": "https://raw.githubusercontent.com/Foundryborne/daggerheart/v14/system.json",
-    "download": "https://github.com/Foundryborne/daggerheart/releases/download/2.2.6/system.zip",
+    "download": "https://github.com/Foundryborne/daggerheart/releases/download/2.2.7/system.zip",
     "authors": [
         {
             "name": "WBHarry"