Raised version

* 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

lang/en.json

@@ -778,7 +778,9 @@
                 "title": "Group Roll"
             },
             "TokenConfig": {
-                "actorSizeUsed": "Actor size is set, determining the dimensions"
+                "actorSizeUsed": "Actor size is set, determining the dimensions",
+                "tokenSize": "Token Size",
+                "sizeCategory": "Size Category"
             }
         },
         "CLASS": {
@@ -2565,10 +2567,11 @@
                     "tokenImg": { "label": "Token Image" },
                     "tokenRingImg": { "label": "Subject Texture" },
                     "tokenSize": {
-                        "placeholder": "Using character dimensions",
-                        "disabledPlaceholder": "Set by character size",
+                        "placeholder": "Token Size",
+                        "disabledPlaceholder": "Token Size",
                         "height": { "label": "Height" },
                         "width": { "label": "Width" },
+                        "depth": { "label": "Depth" },
                         "scale": { "label": "Token Scale" }
                     },
                     "evolved": {

module/applications/dialogs/d20RollDialog.mjs

@@ -175,14 +175,14 @@ export default class D20RollDialog extends HandlebarsApplicationMixin(Applicatio
         this.disadvantage = advantage === -1;
 
         this.config.roll.advantage = this.config.roll.advantage === advantage ? 0 : advantage;
+        if (this.config.roll.advantage === 0) return this.render();
 
-        if (this.config.roll.advantage === 1 && this.config.data.rules.roll.defaultAdvantageDice) {
-            const faces = Number.parseInt(this.config.data.rules.roll.defaultAdvantageDice);
+        const defaultFaces =
+            this.config.roll.advantage === 1
+                ? this.config.data.rules.roll.defaultAdvantageDice
+                : this.config.data.rules.roll.defaultDisadvantageDice;
+        const faces = Number.parseInt(defaultFaces);
         this.roll.advantageFaces = Number.isNaN(faces) ? this.roll.advantageFaces : faces;
-        } else if (this.config.roll.advantage === -1 && this.config.data.rules.roll.defaultDisadvantageDice) {
-            const faces = Number.parseInt(this.config.data.rules.roll.defaultDisadvantageDice);
-            this.roll.advantageFaces = Number.isNaN(faces) ? this.roll.advantageFaces : faces;
-        }
 
         this.render();
     }

module/applications/sheets-configs/action-base-config.mjs

@@ -204,7 +204,7 @@ export default class DHActionBaseConfig extends DaggerheartSheet(ApplicationV2)
             };
         }
 
-        if (this.action.parent.metadata?.isQuantifiable) {
+        if (this.action.parent.metadata.isInventoryItem) {
             options.quantity = {
                 label: 'DAGGERHEART.GENERAL.itemQuantity',
                 group: 'Global'

module/applications/sheets-configs/activeEffectConfig.mjs

@@ -175,6 +175,7 @@ export default class DhActiveEffectConfig extends foundry.applications.sheets.Ac
         const partContext = await super._preparePartContext(partId, context);
         switch (partId) {
             case 'details':
+                partContext.isItemEffect = partContext.isItemEffect || this.options.isSetting;
                 const useGeneric = game.settings.get(
                     CONFIG.DH.id,
                     CONFIG.DH.SETTINGS.gameSettings.appearance

module/applications/sheets/actors/character.mjs

@@ -184,6 +184,9 @@ export default class CharacterSheet extends DHBaseActorSheet {
         for (const input of form.querySelectorAll('input:not([type=search]), .editor.prosemirror')) {
             input.disabled = disabled;
         }
+        for (const element of form.querySelectorAll('.input[contenteditable]')) {
+            element.classList.toggle('disabled', disabled);
+        }
     }
 
     /** @inheritDoc */
@@ -368,7 +371,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
                     const doc = getDocFromElementSync(target);
                     return doc?.isOwner && !isItemWizardManaged(doc);
                 },
-                callback: async (target, event) => {
+                onClick: async (event, target) => {
                     const doc = await getDocFromElement(target);
                     if (event.shiftKey) return doc.delete();
                     else return doc.deleteDialog();
@@ -393,7 +396,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
                     const doc = getDocFromElementSync(target);
                     return doc?.isOwner && doc.system.inVault;
                 },
-                callback: async target => {
+                onClick: async (_, target) => {
                     const doc = await getDocFromElement(target);
                     const actorLoadout = doc.actor.system.loadoutSlot;
                     if (actorLoadout.available) return doc.update({ 'system.inVault': false });
@@ -407,7 +410,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
                     const doc = getDocFromElementSync(target);
                     return doc?.isOwner && doc.system.inVault;
                 },
-                callback: async (target, event) => {
+                onClick: async (event, target) => {
                     const doc = await getDocFromElement(target);
                     const actorLoadout = doc.actor.system.loadoutSlot;
                     if (!actorLoadout.available) {
@@ -446,7 +449,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
                     const doc = getDocFromElementSync(target);
                     return doc?.isOwner && !doc.system.inVault;
                 },
-                callback: async target => (await getDocFromElement(target)).update({ 'system.inVault': true })
+                onClick: async (_, target) => (await getDocFromElement(target)).update({ 'system.inVault': true })
             }
         ].map(option => ({
             ...option,
@@ -472,7 +475,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
                     const doc = getDocFromElementSync(target);
                     return doc.isOwner && doc && !doc.system.equipped;
                 },
-                callback: (target, event) => CharacterSheet.#toggleEquipItem.call(this, event, target)
+                onClick: (event, target) => CharacterSheet.#toggleEquipItem.call(this, event, target)
             },
             {
                 label: 'unequip',
@@ -481,7 +484,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
                     const doc = getDocFromElementSync(target);
                     return doc.isOwner && doc && doc.system.equipped;
                 },
-                callback: (target, event) => CharacterSheet.#toggleEquipItem.call(this, event, target)
+                onClick: (event, target) => CharacterSheet.#toggleEquipItem.call(this, event, target)
             }
         ].map(option => ({
             ...option,

module/applications/sheets/actors/party.mjs

@@ -26,7 +26,6 @@ export default class Party extends DHBaseActorSheet {
         actions: {
             openDocument: Party.#openDocument,
             deletePartyMember: Party.#deletePartyMember,
-            deleteItem: Party.#deleteItem,
             toggleHope: Party.#toggleHope,
             toggleHitPoints: Party.#toggleHitPoints,
             toggleStress: Party.#toggleStress,
@@ -509,23 +508,4 @@ export default class Party extends DHBaseActorSheet {
         const newMembersList = currentMembers.filter(uuid => uuid !== doc.uuid);
         await this.document.update({ 'system.partyMembers': newMembersList });
     }
-
-    static async #deleteItem(event, target) {
-        const doc = await getDocFromElement(target.closest('.inventory-item'));
-        if (!event.shiftKey) {
-            const confirmed = await foundry.applications.api.DialogV2.confirm({
-                window: {
-                    title: game.i18n.format('DAGGERHEART.APPLICATIONS.DeleteConfirmation.title', {
-                        type: game.i18n.localize('TYPES.Actor.party'),
-                        name: doc.name
-                    })
-                },
-                content: game.i18n.format('DAGGERHEART.APPLICATIONS.DeleteConfirmation.text', { name: doc.name })
-            });
-
-            if (!confirmed) return;
-        }
-
-        this.document.deleteEmbeddedDocuments('Item', [doc.id]);
-    }
 }

module/applications/sheets/api/application-mixin.mjs

@@ -424,7 +424,7 @@ export default function DHApplicationMixin(Base) {
                         const target = element.closest('[data-item-uuid]');
                         return !target.dataset.disabled && target.dataset.itemType !== 'beastform';
                     },
-                    callback: async target => (await getDocFromElement(target)).update({ disabled: true })
+                    onClick: async (_, target) => (await getDocFromElement(target)).update({ disabled: true })
                 },
                 {
                     label: 'enableEffect',
@@ -433,7 +433,7 @@ export default function DHApplicationMixin(Base) {
                         const target = element.closest('[data-item-uuid]');
                         return target.dataset.disabled && target.dataset.itemType !== 'beastform';
                     },
-                    callback: async target => (await getDocFromElement(target)).update({ disabled: false })
+                    onClick: async (_, target) => (await getDocFromElement(target)).update({ disabled: false })
                 }
             ].map(option => ({
                 ...option,
@@ -478,7 +478,9 @@ export default function DHApplicationMixin(Base) {
                             (doc?.isOwner && (!doc?.hasOwnProperty('systemPath') || doc?.inCollection))
                         );
                     },
-                    callback: async target => (await getDocFromElement(target)).sheet.render({ force: true })
+                    onClick: async (_, target) => {
+                        return (await getDocFromElement(target)).sheet.render({ force: true });
+                    }
                 }
             ];
 
@@ -493,7 +495,7 @@ export default function DHApplicationMixin(Base) {
                             !foundry.utils.isEmpty(doc?.damage?.parts);
                         return doc?.isOwner && hasDamage;
                     },
-                    callback: async (target, event) => {
+                    onClick: async (event, target) => {
                         const doc = await getDocFromElement(target),
                             action = doc?.system?.attack ?? doc;
                         const config = action.prepareConfig(event);
@@ -513,7 +515,7 @@ export default function DHApplicationMixin(Base) {
                         const doc = getDocFromElementSync(target);
                         return doc?.isOwner && !(doc.type === 'domainCard' && doc.system.inVault);
                     },
-                    callback: async (target, event) => (await getDocFromElement(target)).use(event)
+                    onClick: async (event, target) => (await getDocFromElement(target)).use(event)
                 });
             }
 
@@ -521,7 +523,7 @@ export default function DHApplicationMixin(Base) {
                 options.push({
                     label: 'DAGGERHEART.APPLICATIONS.ContextMenu.sendToChat',
                     icon: 'fa-solid fa-message',
-                    callback: async target => (await getDocFromElement(target)).toChat(this.document.uuid)
+                    onClick: async (_, target) => (await getDocFromElement(target)).toChat(this.document.uuid)
                 });
 
             if (deletable)
@@ -533,7 +535,7 @@ export default function DHApplicationMixin(Base) {
                         const doc = getDocFromElementSync(target);
                         return doc?.isOwner !== false && target.dataset.itemType !== 'beastform';
                     },
-                    callback: async (target, event) => {
+                    onClick: async (event, target) => {
                         const doc = await getDocFromElement(target);
                         if (event.shiftKey) return doc.delete();
                         else return doc.deleteDialog();

module/applications/sheets/api/base-actor.mjs

@@ -166,6 +166,15 @@ export default class DHBaseActorSheet extends DHApplicationMixin(ActorSheetV2) {
         }
     }
 
+    /** Add support for input content editables */
+    _toggleDisabled(disabled) {
+        super._toggleDisabled(disabled);
+        const form = this.form;
+        for (const element of form.querySelectorAll('.input[contenteditable]')) {
+            element.classList.toggle('disabled', disabled);
+        }
+    }
+
     /* -------------------------------------------- */
     /*  Context Menu                                */
     /* -------------------------------------------- */

module/applications/sheets/api/base-item.mjs

@@ -126,7 +126,7 @@ export default class DHBaseItemSheet extends DHApplicationMixin(ItemSheetV2) {
         options.push({
             name: 'CONTROLS.CommonDelete',
             icon: '<i class="fa-solid fa-trash"></i>',
-            callback: async target => {
+            onClick: async (_, target) => {
                 const feature = await getDocFromElement(target);
                 if (!feature) return;
                 const confirmed = await foundry.applications.api.DialogV2.confirm({

module/applications/ui/itemBrowser.mjs

@@ -1,3 +1,4 @@
+import { getDocFromElement } from '../../helpers/utils.mjs';
 import { RefreshType, socketEvent } from '../../systemRegistration/socket.mjs';
 
 const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
@@ -47,7 +48,8 @@ export class ItemBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
             expandContent: this.expandContent,
             resetFilters: this.resetFilters,
             sortList: this.sortList,
-            openSettings: this.openSettings
+            openSettings: this.openSettings,
+            viewSheet: this.#onViewSheet
         },
         position: {
             left: 100,
@@ -306,7 +308,8 @@ export class ItemBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
                 {
                     items: this.items,
                     menu: this.selectedMenu,
-                    formatLabel: this.formatLabel
+                    formatLabel: this.formatLabel,
+                    viewSheet: this.items[0] instanceof Actor
                 }
             );
 
@@ -568,6 +571,11 @@ export class ItemBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
         }
     }
 
+    static async #onViewSheet(_, target) {
+        const document = await getDocFromElement(target);
+        document?.sheet?.render(true);
+    }
+
     _createDragProcess() {
         new foundry.applications.ux.DragDrop.implementation({
             dragSelector: '.item-container',
@@ -606,7 +614,16 @@ export class ItemBrowser extends HandlebarsApplicationMixin(ApplicationV2) {
                 items: {
                     folder: 'equipments',
                     render: {
-                        noFolder: true
+                        folders: [
+                            'equipments',
+                            'ancestries',
+                            'classes',
+                            'subclasses',
+                            'domains',
+                            'communities',
+                            'beastforms'
+                            // excluded: features
+                        ]
                     }
                 },
                 compendium: {}

module/data/action/baseAction.mjs

@@ -148,10 +148,14 @@ export default class DHBaseAction extends ActionMixin(foundry.abstract.DataModel
               : null;
     }
 
-    /** Returns true if the action is usable */
+    /**
+     * Returns true if the action is usable.
+     * An action is usable on any actor type. For example, an adversary might have a base attack action.
+     */
     get usable() {
         const actor = this.actor;
-        return this.isOwner && actor?.type === 'character';
+        const pack = actor?.pack ? game.packs.get(actor.pack) : null;
+        return !pack?.locked && this.isOwner;
     }
 
     static getRollType(parent) {

module/data/activeEffect/beastformEffect.mjs

@@ -35,6 +35,7 @@ export default class BeastformEffect extends BaseEffect {
     static migrateData(source) {
         if (!source.characterTokenData.tokenSize.height) source.characterTokenData.tokenSize.height = 1;
         if (!source.characterTokenData.tokenSize.width) source.characterTokenData.tokenSize.width = 1;
+        if (!source.characterTokenData.tokenSize.depth) source.characterTokenData.tokenSize.depth = 1;
 
         return super.migrateData(source);
     }
@@ -52,7 +53,8 @@ export default class BeastformEffect extends BaseEffect {
         if (this.parent.parent.type === 'character') {
             const baseUpdate = {
                 height: this.characterTokenData.tokenSize.height,
-                width: this.characterTokenData.tokenSize.width
+                width: this.characterTokenData.tokenSize.width,
+                depth: this.characterTokenData.tokenSize.depth
             };
             const update = {
                 ...baseUpdate,

module/data/fields/action/costField.mjs

@@ -103,7 +103,7 @@ export default class CostField extends fields.ArrayField {
     static calcCosts(costs) {
         const resources = CostField.getResources.call(this, costs);
         let filteredCosts = costs;
-        if (this.parent?.metadata.isQuantifiable && this.parent.consumeOnUse === false) {
+        if (this.parent?.isInventoryItem && this.parent.consumeOnUse === false) {
             filteredCosts = filteredCosts.filter(c => c.key !== 'quantity');
         }
 

module/data/item/beastform.mjs

@@ -51,7 +51,8 @@ export default class DHBeastform extends BaseDataItem {
                 }),
                 scale: new fields.NumberField({ nullable: false, min: 0.2, max: 3, step: 0.05, initial: 1 }),
                 height: new fields.NumberField({ integer: true, min: 1, initial: null, nullable: true }),
-                width: new fields.NumberField({ integer: true, min: 1, initial: null, nullable: true })
+                width: new fields.NumberField({ integer: true, min: 1, initial: null, nullable: true }),
+                depth: new fields.NumberField({ integer: true, min: 1, initial: null, nullable: true })
             }),
             mainTrait: new fields.StringField({
                 required: true,
@@ -192,7 +193,8 @@ export default class DHBeastform extends BaseDataItem {
                     tokenSize: {
                         scale: this.parent.parent.prototypeToken.texture.scaleX,
                         height: this.parent.parent.prototypeToken.height,
-                        width: this.parent.parent.prototypeToken.width
+                        width: this.parent.parent.prototypeToken.width,
+                        depth: this.parent.parent.prototypeToken.depth
                     }
                 },
                 advantageOn: this.advantageOn,
@@ -211,10 +213,12 @@ export default class DHBeastform extends BaseDataItem {
                 : null;
         const width = autoTokenSize ?? this.tokenSize.width;
         const height = autoTokenSize ?? this.tokenSize.height;
+        const depth = autoTokenSize ?? this.tokenSize.depth;
 
         const prototypeTokenUpdate = {
             height,
             width,
+            depth,
             texture: {
                 src: this.tokenImg,
                 scaleX: this.tokenSize.scale,

module/dice/dualityRoll.mjs

@@ -148,14 +148,22 @@ export default class DualityRoll extends D20Roll {
     }
 
     applyAdvantage() {
-        if (this.hasAdvantage || this.hasDisadvantage) {
-            const dieFaces = this.advantageFaces,
-                advDie = new foundry.dice.terms.Die({ faces: dieFaces, number: this.advantageNumber });
+        const advDieClass = this.hasAdvantage
+            ? game.system.api.dice.diceTypes.AdvantageDie
+            : this.hasDisadvantage
+              ? game.system.api.dice.diceTypes.DisadvantageDie
+              : null;
+        if (advDieClass) {
+            const advDie = new advDieClass({ faces: this.advantageFaces, number: this.advantageNumber });
+            if (this.terms.length < 4) {
                 if (this.advantageNumber > 1) advDie.modifiers = ['kh'];
                 this.terms.push(
                     new foundry.dice.terms.OperatorTerm({ operator: this.hasDisadvantage ? '-' : '+' }),
                     advDie
                 );
+            } else {
+                this.terms[4] = advDie;
+            }
         }
         if (this.rallyFaces)
             this.terms.push(

module/documents/item.mjs

@@ -73,8 +73,10 @@ export default class DHItem extends foundry.documents.Item {
     /** Returns true if the item can be used */
     get usable() {
         const actor = this.actor;
-        const actionsList = this.system.actionsList;
-        return this.isOwner && actor?.type === 'character' && (actionsList?.size || actionsList?.length);
+        const pack = actor?.pack ? game.packs.get(actor.pack) : null;
+        const hasActions = this.system.actionsList?.size || this.system.actionsList?.length;
+        const isValidType = actor?.type === 'character' || this.type === 'feature';
+        return !pack?.locked && this.isOwner && isValidType && hasActions;
     }
 
     /** @inheritdoc */

module/documents/scene.mjs

@@ -20,7 +20,7 @@ export default class DhScene extends Scene {
         const prototype = tokenDoc.actor?.prototypeToken ?? tokenDoc;
         this.#sizeSyncBatch.set(tokenDoc.id, {
             size: tokenSize,
-            prototypeSize: { width: prototype.width, height: prototype.height },
+            prototypeSize: { width: prototype.width, height: prototype.height, depth: prototype.depth },
             position: { x: tokenDoc.x, y: tokenDoc.y, elevation: tokenDoc.elevation }
         });
         this.#processSyncBatch();
@@ -36,11 +36,13 @@ export default class DhScene extends Scene {
                 const tokenSize = tokenSizes[size];
                 const width = size !== CONFIG.DH.ACTOR.tokenSize.custom.id ? tokenSize : prototypeSize.width;
                 const height = size !== CONFIG.DH.ACTOR.tokenSize.custom.id ? tokenSize : prototypeSize.height;
+                const depth = size !== CONFIG.DH.ACTOR.tokenSize.custom.id ? tokenSize : prototypeSize.depth;
                 const updatedPosition = DHToken.getSnappedPositionInSquareGrid(this.grid, position, width, height);
                 return {
                     _id,
                     width,
                     height,
+                    depth,
                     ...updatedPosition
                 };
             });

module/documents/token.mjs

@@ -66,7 +66,8 @@ export default class DHToken extends CONFIG.Token.documentClass {
                 if (tokenSize && actor.system.size !== CONFIG.DH.ACTOR.tokenSize.custom.id) {
                     document.updateSource({
                         width: tokenSize,
-                        height: tokenSize
+                        height: tokenSize,
+                        depth: tokenSize
                     });
                 }
             }
@@ -90,7 +91,7 @@ export default class DHToken extends CONFIG.Token.documentClass {
             ) {
                 const tokenSizes = game.settings.get(CONFIG.DH.id, CONFIG.DH.SETTINGS.gameSettings.Homebrew).tokenSizes;
                 const tokenSize = tokenSizes[update.system.size];
-                if (tokenSize !== this.width || tokenSize !== this.height) {
+                if (tokenSize !== this.width || tokenSize !== this.height || tokenSize !== this.depth) {
                     this.parent?.syncTokenDimensions(this, update.system.size);
                 }
             }

module/documents/tokenManager.mjs

@@ -15,6 +15,7 @@ export default class DhTokenManager {
             if (tokenSize && actor.system.size !== CONFIG.DH.ACTOR.tokenSize.custom.id) {
                 tokenData.width = tokenSize;
                 tokenData.height = tokenSize;
+                tokenData.depth = tokenSize;
             }
         }
 

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

@@ -1,3 +1,5 @@
+@import '../../utils/mixin.less';
+
 .theme-light .daggerheart.dialog.dh-style.views.tag-team-dialog {
     .initialization-container .members-container .member-container {
         .member-name {
@@ -34,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;
@@ -60,19 +62,9 @@
                     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);
-
-                    // Basic "scrim" gradient
-                    background-image: linear-gradient(
-                        to top,
-                        var(--shadow-color),
-                        rgba(from var(--shadow-color) r g b / 0.834) 10.6%,
-                        rgba(from var(--shadow-color) r g b / 0.541) 34%,
-                        rgba(from var(--shadow-color) r g b / 0.382) 47%,
-                        rgba(from var(--shadow-color) r g b / 0.194) 65%,
-                        transparent 100%
-                    );
+                    .smooth-gradient-ease-in-out(background-image, to bottom, var(--shadow-color), 100%);
                 }
 
                 img {

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);
-                color: light-dark(@dark-blue, @golden);
+                border: 1px solid @color-border;
+                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);
-        border: 1px solid light-dark(@dark, @beige);
+        color: @input-color-text;
+        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;
@@ -11,7 +12,8 @@
                 }
             }
         }
-}
+    }
+});
 
 .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

@@ -34,7 +34,7 @@
     .attribution-header-label {
         font-style: italic;
         font-family: @font-body;
-        color: light-dark(@chat-blue-bg, @beige-50);
+        color: @color-text-subtle;
     }
 
     .tab.inventory {
@@ -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);
-                    border: 1px solid var(--color-border);
+                    background-color: @trait-color-bg;
+                    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

@@ -11,7 +11,7 @@
         .profile {
             height: 235px;
             cursor: pointer;
-            mask-image: linear-gradient(0deg, transparent 0%, black 10%);
+            .smooth-gradient-ease-in-out(mask-image, to top, black, 2.25rem);
         }
 
         .actor-name {
@@ -24,15 +24,20 @@
             margin-bottom: -30px;
 
             input[type='text'] {
+                backdrop-filter: none;
+                border: none;
+                font-family: @font-title;
                 font-size: var(--font-size-24);
-                height: 32px;
-                text-align: center;
-                border: 1px solid transparent;
                 outline: 2px solid transparent;
+                box-shadow: unset;                
+                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;
                 }
             }
         }
@@ -63,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;
@@ -95,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;
@@ -243,7 +150,7 @@
         .companion-navigation {
             display: flex;
             gap: 8px;
-            align-items: center;
+            align-items: baseline;
             width: 100%;
         }
     }

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

@@ -1,5 +1,6 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
 
 .application.sheet.daggerheart.actor.dh-style.environment {
     .environment-header-sheet {
@@ -10,28 +11,52 @@
 
         .profile {
             height: 235px;
-            mask-image: linear-gradient(0deg, transparent 0%, black 10%);
             cursor: pointer;
+            .smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem);
         }
 
         .item-container {
-            display: flex;
+            display: grid;
+            grid-auto-flow: row;
+            grid-template-columns: 1fr min-content;
+
             align-items: center;
             position: relative;
-            top: -45px;
-            gap: 20px;
+            top: -36px;
+            gap: 0 var(--spacer-12);
             padding: 0 20px;
-            margin-bottom: -30px;
+            margin-bottom: -26px;
 
-            .item-info {
-                display: flex;
-                flex-direction: column;
-                gap: 8px;
+            .item-name input[type='text'] {
+                backdrop-filter: none;
+                border: none;
+                font-family: @font-title;
+                font-size: var(--font-size-32);
+                text-align: start;
+                transition: all 0.3s ease;
+                outline: 2px solid transparent;
+                box-shadow: none;
+                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 @color-border;
+                }
+            }
+            
+            .flexrow {
+                align-items: baseline;
+                grid-column: span 2;
+            }
 
             .tags {
                 display: flex;
                 gap: 10px;
                 padding-bottom: 0;
+                flex: 0;
 
                 .tag {
                     display: flex;
@@ -41,6 +66,7 @@
                     padding: 3px 5px;
                     font-size: var(--font-size-12);
                     font: @font-body;
+                    white-space: nowrap;
 
                     background: light-dark(@dark-15, @beige-15);
                     border: 1px solid light-dark(@dark, @beige);
@@ -57,11 +83,8 @@
             }
 
             .attribution-header-label {
-                    text-align: left;
+                text-align: right;
                 position: relative;
-                    top: 4px;
-                    margin-bottom: -6px;
-                }
             }
 
             .status-number {
@@ -74,14 +97,14 @@
                     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;
                     font-size: 1.2rem;
                     align-items: center;
                     justify-content: center;
-                    background: light-dark(transparent, @dark-blue);
+                    background: light-dark(#e8e6e3, @dark-blue);
                     z-index: 2;
 
                     &.armor-slots {
@@ -93,7 +116,7 @@
                 .status-label {
                     padding: 2px 10px;
                     width: 100%;
-                    border-radius: 3px;
+                    border-radius: 0 0 3px 3px;
                     background: light-dark(@dark-blue, @golden);
 
                     h4 {
@@ -105,37 +128,23 @@
                     }
                 }
             }
-
-            .item-name {
-                input[type='text'] {
-                    font-size: var(--font-size-32);
-                    height: 42px;
-                    text-align: start;
-                    transition: all 0.3s ease;
-                    outline: 2px solid transparent;
-                    border: 1px solid transparent;
-
-                    &:hover[type='text'],
-                    &:focus[type='text'] {
-                        box-shadow: none;
-                        outline: 2px solid light-dark(@dark-blue, @golden);
-                    }
-                }
-            }
         }
 
         .environment-info {
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: var(--spacer-8);
             padding: 10px 20px;
         }
 
         .environment-navigation {
             display: flex;
             gap: 20px;
-            align-items: center;
+            align-items: baseline;
             padding: 0 20px;
+            .tab-navigation {
+                margin-top: 0;
+            }
         }
     }
 }

styles/less/sheets/actors/environment/sheet.less

@@ -5,10 +5,6 @@
 .appTheme({
     &.environment {
         background-image: url('../assets/parchments/dh-parchment-dark.png');
-
-        .attribution-header-label {
-            background-image: url('../assets/parchments/dh-parchment-dark.png');
-        }
     }
 }, {
     &.environment {

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

@@ -1,5 +1,6 @@
 @import '../../../utils/colors.less';
 @import '../../../utils/fonts.less';
+@import '../../../utils/mixin.less';
 
 .party-header-sheet {
     display: flex;
@@ -9,26 +10,31 @@
 
     .profile {
         height: 235px;
-        mask-image: linear-gradient(0deg, transparent 0%, black 10%);
         cursor: pointer;
+        .smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem);
     }
 
     .item-container {
-        .item-name {
-            padding: 0 20px;
-            input[type='text'] {
-                font-size: 32px;
-                height: 42px;
+        margin-top: -2rem;
+        z-index: 1;
+        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 @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;
-                outline: 2px solid transparent;
-                border: 1px solid transparent;
+            width: calc(100% - 40px);
+            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;
             }
         }
 

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 {
@@ -245,7 +245,7 @@
         }
 
         .item-list-header,
-        .item-list [data-action='expandContent'] {
+        .item-list .item-info[data-action] {
             display: flex;
 
             > * {
@@ -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);
-            border: 1px solid light-dark(@dark-blue, @golden);
+            color: @color-text-emphatic;
+            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);
@@ -85,6 +86,47 @@
     --primary-color-fear: rgba(9, 71, 179, 0.75);
 }
 
+/** 
+ * Override core foundry color variables in theme scopes, and add some new theme specific variants.
+ * These are intended to be more representative of its use case, so avoid naming these after the color.
+ * Some foundry variables are heavily scoped and we need to redefine them (https://github.com/foundryvtt/foundryvtt/issues/12893)
+ * Convention for the redefined ones is --dh-{element}-color-{thing}
+ */
+@scope (.theme-light) to (.themed) {
+    .dh-style :scope,
+    :scope.dh-style,
+    .dh-style,
+    .duality {
+        --color-border: @dark-blue;
+        --color-fieldset-border: @dark-blue;
+        --color-text-emphatic: @dark-blue;
+        --color-text-subtle: #555;
+
+        --dh-color-text-shadow-contrast: #ffffffa0;
+        --dh-input-color-border: @dark;
+        --dh-input-color-text: @dark;
+        --dh-trait-color-bg: #b1afb6;
+        --dh-trait-color-border: #8e8d96;
+    }
+}
+@scope (.theme-dark) to (.themed) {  
+    .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);
 @secondary-blue: var(--secondary-blue, #2b32b2);
 
@@ -137,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);
@@ -159,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));
 
@@ -190,3 +233,15 @@
         box-shadow: 0 0 2px 2px @dark-blue;
     }
 }
+
+// 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.sheet.dh-style,
+    .themed.theme-dark .application.daggerheart.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.sheet.dh-style,
+    .themed.theme-light .application.daggerheart.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;
-    }
-
-    h1 input[type='text'] {
+        input[type='text'],
+        .input[contenteditable] {
             font-family: @font-title;
         }
+    }
 
     h2,
     h3 {
@@ -114,3 +115,48 @@
         font-family: @font-body;
     }
 }
+
+
+// A simple ease-out mask
+.smooth-gradient-ease-out(@param, @to, @destination, @length) {
+    @{param}+: linear-gradient(
+        @to,
+        transparent 0%,
+        rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.008 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.029 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.064 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.166 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.304 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.554 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.644 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.735 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.825 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length),
+        @destination @length
+    );
+}
+
+/**
+ * A simple ease in and out mask.
+ * @param - the parameter to add to
+ * @param - direction, such as "to top"
+ * @destination - the color at the destination. The origin is always transparent
+ * @length - the value at the destination
+ */
+.smooth-gradient-ease-in-out(@param, @to, @destination, @length: 100%) {
+    @{param}+: linear-gradient(
+        @to,
+        transparent 0%,
+        rgb(from @destination r g b / ~"calc(alpha * 0.013)") calc(0.081 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.049)") calc(0.155 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.104)") calc(0.225 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.259)") calc(0.353 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.45)") calc(0.471 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.741)") calc(0.647 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.825)") calc(0.71 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.896)") calc(0.775 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.951)") calc(0.845 * @length),
+        rgb(from @destination r g b / ~"calc(alpha * 0.987)") calc(0.914 * @length),
+        @destination @length
+    );
+}

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,15 +2,15 @@
     "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.361",
+        "verified": "14.363",
         "maximum": "14"
     },
     "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"

templates/hud/tokenHUD.hbs

@@ -17,7 +17,7 @@
     {{/if}}
 
     <button type="button" class="control-icon" data-action="sort" data-tooltip aria-label="HUD.ToFrontOrBack">
-        <i class="fa-solid fa-arrow-down-arrow-up" inert></i>
+        <i class="fa-solid fa-bring-forward" inert></i>
     </button>
 
     {{#if hasCompanion}}
@@ -26,6 +26,13 @@
         </button>
     {{/if}}
 
+    {{#if isGM}}
+        <button type="button" class="control-icon {{lockedClass}}" data-action="locked"
+            data-tooltip aria-label="{{localize (ifThen lockedClass "HUD.Unlock" "HUD.Lock")}}">
+            <i class="fa-solid {{ifThen lockedClass "fa-lock" "fa-lock-open"}}" inert></i>
+        </button>
+    {{/if}}
+
     {{#if canConfigure}}
     <button type="button" class="control-icon" data-action="config" data-tooltip aria-label="HUD.OpenConfig">
         <i class="fa-solid fa-gear" inert></i>

templates/sheets-settings/token-config/appearance.hbs

@@ -1,4 +1,5 @@
 <div class="tab scrollable{{#if tab.active}} active{{/if}}" data-group="{{tab.group}}" data-tab="{{tab.id}}">
+    <div class="token-image-group">
         {{formGroup fields.texture.fields.src value=source.texture.src rootId=rootId}}
         {{#if randomImgEnabled}}
         {{formGroup fields.randomImg value=source.randomImg classes="slim" rootId=rootId}}
@@ -10,11 +11,33 @@
             </select>
         </div>
         {{/if}}
+
+        {{#if imagePreview}}
+            <div class="{{imagePreview.cls}}">
+                {{#if imagePreview.isVideo}}
+                <video class="token-image-thumb" src="{{imagePreview.src}}" autoplay muted loop playsinline
+                    disablepictureinpicture></video>
+                {{else}}
+                <img class="token-image-thumb" src="{{imagePreview.src}}" alt="{{localize "TOKEN.ImagePreview"}}">
+                {{/if}}
+                <div class="token-image-controls">
+                    <button type="button" class="cycle-prev icon fa-solid fa-chevron-left" data-action="cycleImage"
+                            data-delta="-1" aria-label="{{localize "TOKEN.ImageCyclePrev"}}"
+                            {{#unless imagePreview.hasPrev}} disabled{{/unless}}></button>
+                    <span class="counter">{{imagePreview.current}} / {{imagePreview.total}}</span>
+                    <button type="button" class="cycle-next icon fa-solid fa-chevron-right" data-action="cycleImage"
+                            data-delta="1" aria-label="{{localize "TOKEN.ImageCycleNext"}}"
+                            {{#unless imagePreview.hasNext}} disabled{{/unless}}></button>
+                </div>
+            </div>
+        {{/if}}
+    </div>
+
     <fieldset>
-        <legend>{{localize "Token Size"}}</legend>
+        <legend>{{localize "DAGGERHEART.APPLICATIONS.TokenConfig.tokenSize"}}</legend>
         {{#if usesActorSize}}
-            <div class="form-group lim">
-                <label>{{localize "Size Category"}}</label>
+            <div class="form-group slim">
+                <label>{{localize "DAGGERHEART.APPLICATIONS.TokenConfig.sizeCategory"}}</label>
 
                 <select id="dhTokenSize">
                     {{selectOptions tokenSizes selected=tokenSize valueAttr="id" labelAttr="label" localize=true}}
@@ -23,15 +46,17 @@
         {{/if}}
 
         <div id="tokenSizeDimensions" class="form-group slim" {{#if actorSizeDisable}}data-tooltip="{{localize "DAGGERHEART.APPLICATIONS.TokenConfig.actorSizeUsed"}}"{{/if}}>
-            <label>
-                {{localize "TOKEN.Dimensions"}} <span class="units">({{localize "GridSpaces"}})</span>
-                <i class="fa-solid fa-lock" {{#unless actorSizeDisable}}style="opacity: 0%;"{{/unless}}></i>
-            </label>
-            <div class="form-fields">
+            <span class="label">
+                {{localize "TOKEN.Size"}}
+                <span class="units">({{localize "MEASUREMENT.GridSpaces"}})</span>
+            </span>
+            <div class="form-group slim">
                 <label for="{{rootId}}-width">{{localize "DOCUMENT.FIELDS.width.label"}}</label>
                 {{formInput fields.width value=source.width id=(concat rootId "-width") disabled=actorSizeDisable}}
                 <label for="{{rootId}}-height">{{localize "DOCUMENT.FIELDS.height.label"}}</label>
                 {{formInput fields.height value=source.height id=(concat rootId "-height") disabled=actorSizeDisable}}
+                <label for="{{rootId}}-depth">Z</label>
+                {{formInput fields.depth value=source.depth id=(concat rootId "-depth") disabled=actorSizeDisable}}
             </div>
         </div>
     </fieldset>

templates/sheets/activeEffect/details.hbs

@@ -5,16 +5,9 @@
     {{formGroup systemFields.targetDispositions value=source.system.targetDispositions name=(concat "system.targetDispositions") localize=true}}
 
     {{#if isActorEffect}}
-        <div class="form-group">
-            <label>{{localize "EFFECT.FIELDS.origin.label"}}</label>
-            <div class="form-fields">
-                <input type="text" value="{{source.origin}}" disabled />
-            </div>
-        </div>
-    {{/if}}
-    
-    {{#if isItemEffect}}
-        {{formGroup fields.transfer value=source.transfer rootId=rootId label=legacyTransfer.label hint=(localize "DAGGERHEART.EFFECTS.Attachments.transferHint")}}
+        {{formGroup fields.origin value=source.origin rootId=rootId disabled=true}}
+    {{else if isItemEffect}}
+        {{formGroup fields.transfer value=source.transfer rootId=rootId}}
     {{/if}}
 
     {{formGroup fields.statuses value=source.statuses options=statuses rootId=rootId classes="statuses"}}

templates/sheets/actors/adversary/features.hbs

@@ -6,6 +6,7 @@
             type='feature'
             collection=@root.features
             hideContextMenu=true
+            hideModifyControls=true
             canCreate=@root.editable
             showActions=@root.editable
         }}

templates/sheets/actors/environment/features.hbs

@@ -9,6 +9,7 @@
         type='feature'
         collection=@root.features
         hideContextMenu=true
+        hideModifyControls=true
         canCreate=@root.editable
         showActions=@root.editable
         }}

templates/sheets/actors/environment/header.hbs

@@ -1,9 +1,20 @@
 <header class='environment-header-sheet'>
     <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
     <div class='item-container'>
-        <div class="item-info">
         <h1 class='item-name'><input type='text' name='name' value='{{source.name}}' /></h1>
-            <div class="flexcol">
+        <div class="status-number">
+            <div class='status-value armor-slots'>
+                {{#if source.system.difficulty}}
+                    <p>{{source.system.difficulty}}</p>
+                {{else}}
+                    <p>-</p>
+                {{/if}}
+            </div>
+            <div class="status-label">
+                <h4>{{localize "DAGGERHEART.GENERAL.difficulty"}}</h4>
+            </div>
+        </div>
+        <div class="flexrow">
             <div class="tags">
                 <div class="tag">
                     <span>
@@ -23,19 +34,6 @@
             {{/if}}
         </div>
     </div>
-        <div class="status-number">
-            <div class='status-value armor-slots'>
-                {{#if source.system.difficulty}}
-                    <p>{{source.system.difficulty}}</p>
-                {{else}}
-                    <p>-</p>
-                {{/if}}
-            </div>
-            <div class="status-label">
-                <h4>{{localize "DAGGERHEART.GENERAL.difficulty"}}</h4>
-            </div>
-        </div>
-    </div>
     <line-div></line-div>
     <div class="environment-info">
         <span class="description">

templates/sheets/actors/party/header.hbs

@@ -2,9 +2,7 @@
     <img class='profile' src='{{source.img}}' data-action='editImage' data-edit='img' />
     <div class='item-container'>
         <div class="item-info">
-            <h1 class='item-name'>
-                <input type='text' name='name' value='{{source.name}}' autocomplete="off" spellcheck="false"/>
-            </h1>
+            <input class="item-name" type='text' name='name' value='{{source.name}}' autocomplete="off" spellcheck="false"/>
         </div>
     </div>
 </header>

templates/sheets/global/partials/inventory-fieldset-items-V2.hbs

@@ -19,6 +19,8 @@ Parameters:
 - showLabels {boolean} : If true, show label-tags else show simple tags.
 - hideTooltip {boolean} : If true, disables the tooltip on the item image.
 - hideControls {boolean} : If true, hides the controls inside inventory-item partials.
+- hideContextMenu {boolean}: If true, hides the context menu dropdown button
+- hideModifyControls {boolean}: If true, hides the edit and delete options
 - hideDescription {boolean} : If true, hides the item's description.
 - hideResources {boolean} : If true, hides the item's resources.
 - showActions {boolean} : If true show feature's actions. 
@@ -59,6 +61,7 @@ Parameters:
     actorType=(ifThen ../actorType ../actorType @root.document.type)
     hideControls=../hideControls
     hideContextMenu=../hideContextMenu
+    hideModifyControls=../hideModifyControls
     isActor=../isActor
     categoryAdversary=../categoryAdversary
     hideTooltip=../hideTooltip

templates/sheets/global/partials/inventory-item-V2.hbs

@@ -12,6 +12,8 @@ Parameters:
 - hideTags {boolean} : If true, hide simple-tags else show simple-tags.
 - hideTooltip {boolean} : If true, disables the tooltip on the item image.
 - hideControls {boolean} : If true, hides the controls inside inventory-item partials.
+- hideContextMenu {boolean}: If true, hides the context menu dropdown button
+- hideModifyControls {boolean}: If true, hides the edit and delete options (todo: swap to show, only party cares to show this)
 - hideDescription {boolean} : If true, hides the item's description.
 - hideResources {boolean} : If true, hides the item's resources.
 - showActions {boolean} : If true show feature's actions.
@@ -112,12 +114,12 @@ Parameters:
                 <a data-action="triggerContextMenu" data-tooltip="DAGGERHEART.UI.Tooltip.moreOptions">
                     <i class="fa-solid fa-fw fa-ellipsis-vertical" inert></i>
                 </a>
-            {{else if @root.editable}}
+            {{else if (and @root.editable (not hideModifyControls))}}
                 <a data-action="editDoc" data-tooltip="DAGGERHEART.UI.Tooltip.edit">
                     <i class="fa-solid fa-edit" inert></i>
                 </a>
                 {{#if (not isActor)}}
-                    <a data-action="deleteItem" data-tooltip="DAGGERHEART.UI.Tooltip.deleteItem">
+                    <a data-action="deleteDoc" data-tooltip="DAGGERHEART.UI.Tooltip.deleteItem">
                         <i class="fa-solid fa-trash" inert></i>
                     </a>
                 {{else if (eq type 'adversary')}}

templates/sheets/global/partials/inventory-item-compact.hbs

@@ -5,7 +5,7 @@
     (hasProperty item "toChat" ) "toChat" "editDoc" ) }}' {{#unless hideTooltip}} {{#if (eq type 'attack' )}}
     data-tooltip="#attack#{{item.actor.uuid}}" {{else}} data-tooltip="#item#{{item.uuid}}" {{/if}} {{/unless}}>
         <img src="{{item.img}}" class="item-img {{#if isActor}}actor-img{{/if}}" />
-        {{#if (or item.system.actionsList.size item.system.actionsList.length item.actionType)}}
+        {{#if item.usable}}
             {{#if @root.isNPC}}
                 <img class="roll-img d20" src="systems/daggerheart/assets/icons/dice/default/d20.svg" alt="d20">
             {{else}}

templates/sheets/items/beastform/settings.hbs

@@ -46,6 +46,13 @@
                     placeholder=(localize (ifThen dimensionsDisabled "DAGGERHEART.ITEMS.Beastform.FIELDS.tokenSize.disabledPlaceholder" "DAGGERHEART.ITEMS.Beastform.FIELDS.tokenSize.placeholder")) 
                     disabled=dimensionsDisabled 
                 }}
+                {{formGroup 
+                    systemFields.tokenSize.fields.depth 
+                    value=source.system.tokenSize.depth 
+                    localize=true 
+                    placeholder=(localize (ifThen dimensionsDisabled "DAGGERHEART.ITEMS.Beastform.FIELDS.tokenSize.disabledPlaceholder" "DAGGERHEART.ITEMS.Beastform.FIELDS.tokenSize.placeholder")) 
+                    disabled=dimensionsDisabled 
+                }}
             </div>
             <div class="full-width">
                 {{formGroup systemFields.tokenSize.fields.scale value=source.system.tokenSize.scale localize=true }}

templates/ui/combatTracker/combatTrackerSection.hbs

@@ -13,20 +13,20 @@
                         <div class="combatant-controls flex-0">
                             {{#if @root.user.isGM}}
                             <button type="button" class="inline-control combatant-control icon fa-solid fa-eye-slash {{#if hidden}}active{{/if}}"
-                                    data-action="toggleHidden" data-tooltip aria-label="{{ localize "COMBAT.ToggleVis" }}"></button>
+                                    data-action="toggleHidden" data-tooltip aria-label="{{ localize (ifThen hidden "COMBATANT.Show" "COMBATANT.Hide") }}"></button>
                             <button type="button" class="inline-control combatant-control icon fa-solid fa-skull {{#if isDefeated}}active{{/if}}"
                                     data-action="toggleDefeated" data-tooltip
-                                    aria-label="{{ localize "COMBAT.ToggleDead" }}"></button>
+                                    aria-label="{{ localize (ifThen isDefeated "COMBATANT.UnmarkDefeated" "COMBATANT.MarkDefeated") }}"></button>
                             {{/if}}
                             {{#if canPing}}
                             <button type="button" class="inline-control combatant-control icon fa-solid fa-bullseye-arrow"
                                     data-action="pingCombatant" data-tooltip
-                                    aria-label="{{ localize "COMBAT.PingCombatant" }}"></button>
+                                    aria-label="{{ localize "COMBATANT.Ping" }}"></button>
                             {{/if}}
                             {{#unless @root.user.isGM}}
                             <button type="button" class="inline-control combatant-control icon fa-solid fa-arrows-to-eye"
                                     data-action="panToCombatant" data-tooltip
-                                    aria-label="{{ localize "COMBAT.PanToCombatant" }}"></button>
+                                    aria-label="{{ localize "COMBATANT.PanTo" }}"></button>
                             {{/unless}}
                         </div>
 

templates/ui/itemBrowser/itemContainer.hbs

@@ -1,7 +1,7 @@
 {{#each items}}
     <div class="item-container" data-item-uuid="{{uuid}}" draggable="true">
         <div class="item-header">
-            <div class="item-info" data-action="expandContent">
+            <div class="item-info" {{#if @root.viewSheet}}data-action="viewSheet"{{else}}data-action="expandContent"{{/if}}>
                 <img src="{{img}}" data-item-key="img" class="item-list-img">
                 <span data-item-key="name" class="item-list-name">{{name}}</span>
                 {{#each ../menu.data.columns}}
@@ -9,11 +9,13 @@
                 {{/each}}
             </div>
         </div>
+        {{#unless viewSheet}}
             <div class="item-desc extensible">
                 <span class="wrapper">
                     {{{system.enrichedTags}}}
                     {{{system.enrichedDescription}}}
                 </span>
             </div>
+        {{/unless}}
     </div>
 {{/each}}

templates/ui/sceneNavigation/scene-navigation.hbs

@@ -12,15 +12,20 @@
         </menu>
     {{/with}}
     {{#if scenes.levels}}
-        <menu id="scene-navigation-levels" class="scene-levels scene-navigation-menu flexcol" style="--max-levels: {{ scenes.levels.length }}">
+        <menu id="scene-navigation-levels" class="scene-levels scene-navigation-menu flexcol" 
+            style="--max-levels: {{ scenes.levels.length }}">
             {{#each scenes.levels}}
             <li class="level-row">
-                {{#with button}}
-                <button type="button" class="ui-control icon fa-solid {{ css }}" data-action="cycleLevel"
-                        data-direction="{{ direction }}" aria-label="{{ label }}"></button>
-                {{/with}}
                 <div class="ui-control scene scene-level {{ css }}" data-scene-id="{{ sceneId }}" data-level-id="{{ id }}" data-action="viewLevel">
                     <span class="ellipsis">{{ name }}</span>
+                    {{#if users}}
+                    <ul class="scene-players">
+                        {{#each users}}
+                        <li class="scene-player" style="--color-bg: {{ color }}; --color-border: {{ border }}" data-tooltip
+                            aria-label="{{ name }}">{{ letter }}</li>
+                        {{/each}}
+                    </ul>
+                    {{/if}}
                 </div>
             </li>
             {{/each}}
@@ -40,7 +45,8 @@
 
 {{#*inline ".scene"}}
 <li class="scene-wrapper">
-    <div class="ui-control scene {{ cssClass }}" data-scene-id="{{ id }}" data-action="viewScene" {{#if tooltip}}data-tooltip-text="{{ tooltip }}"{{/if}}>
+    <div class="ui-control scene {{ cssClass }}" data-scene-id="{{ id }}" data-action="viewScene" 
+        {{#if tooltip}}data-tooltip-text="{{ tooltip }}"{{/if}}>
         <span class="scene-name ellipsis">{{ name }}</span>
         {{#if users}}
         <ul class="scene-players">