Use BEM for combat values

src/module/handlebars/handlebars-partials.ts

@@ -1,6 +1,7 @@
 export default async function registerHandlebarsPartials(): Promise<void> {
     const templatePaths = [
         "systems/ds4/templates/sheets/actor/components/character-progression.hbs",
+        "systems/ds4/templates/sheets/actor/components/combat-value.hbs",
         "systems/ds4/templates/sheets/actor/components/combat-values.hbs",
         "systems/ds4/templates/sheets/actor/components/core-value.hbs",
         "systems/ds4/templates/sheets/actor/components/core-values.hbs",

src/scss/components/_combat_value.scss

@@ -0,0 +1,61 @@
+@use "../utils/mixins";
+@use "../utils/variables";
+
+.ds4-combat-value {
+    $size: 3.75rem;
+
+    display: grid;
+    place-items: center;
+    row-gap: 0.5em;
+
+    &__value {
+        $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
+        @include mixins.centered-content;
+
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        font-size: 1.5em;
+        height: $size;
+        width: $size;
+
+        &--hitPoints {
+            background-image: url("#{$combat-values-icons-path}/hit-points.png");
+        }
+        &--defense {
+            background-image: url("#{$combat-values-icons-path}/defense.png");
+        }
+        &--initiative {
+            background-image: url("#{$combat-values-icons-path}/initiative.png");
+        }
+        &--movement {
+            background-image: url("#{$combat-values-icons-path}/movement-rate.png");
+        }
+        &--meleeAttack {
+            background-image: url("#{$combat-values-icons-path}/melee-attack.png");
+        }
+        &--rangedAttack {
+            background-image: url("#{$combat-values-icons-path}/ranged-attack.png");
+        }
+        &--spellcasting {
+            background-image: url("#{$combat-values-icons-path}/spellcasting.png");
+        }
+        &--targetedSpellcasting {
+            background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png");
+        }
+    }
+
+    &__formula {
+        align-items: center;
+        justify-content: space-between;
+        display: flex;
+        gap: 0.15em;
+        text-align: center;
+        width: $size;
+    }
+
+    &__formula-base,
+    &__formula-modifier {
+        flex: 1 1 4em;
+    }
+}

src/scss/components/_combat_values.scss

@@ -1,53 +1,7 @@
-@use "../utils/mixins";
 @use "../utils/variables";
 
-.combat-values {
+.ds4-combat-values {
+    display: flex;
     margin-top: variables.$margin-sm;
-    .combat-value-with-formula {
+    justify-content: space-between;
-        $size: 60px;
-        display: grid;
-        place-items: center;
-        row-gap: variables.$margin-sm;
-        .combat-value {
-            $combat-values-icons-path: "#{variables.$official-icons-path}/combat-values";
-            @include mixins.centered-content;
-            height: $size;
-            width: $size;
-            flex: 0 0 auto;
-            background-size: contain;
-            font-size: 1.5em;
-            &.hitPoints {
-                background-image: url("#{$combat-values-icons-path}/hit-points.png");
-            }
-            &.defense {
-                background-image: url("#{$combat-values-icons-path}/defense.png");
-            }
-            &.initiative {
-                background-image: url("#{$combat-values-icons-path}/initiative.png");
-            }
-            &.movement {
-                background-image: url("#{$combat-values-icons-path}/movement-rate.png");
-            }
-            &.meleeAttack {
-                background-image: url("#{$combat-values-icons-path}/melee-attack.png");
-            }
-            &.rangedAttack {
-                background-image: url("#{$combat-values-icons-path}/ranged-attack.png");
-            }
-            &.spellcasting {
-                background-image: url("#{$combat-values-icons-path}/spellcasting.png");
-            }
-            &.targetedSpellcasting {
-                background-image: url("#{$combat-values-icons-path}/targeted-spellcasting.png");
-            }
-        }
-
-        .combat-value-formula {
-            width: $size;
-            text-align: center;
-            span {
-                line-height: variables.$default-input-height;
-            }
-        }
-    }
 }

src/scss/ds4.scss

@@ -18,6 +18,7 @@
     @include meta.load-css("components/character_progression");
     @include meta.load-css("components/character_values");
     @include meta.load-css("components/combat_values");
+    @include meta.load-css("components/combat_value");
     @include meta.load-css("components/description");
     @include meta.load-css("components/forms");
     @include meta.load-css("components/item_list");

src/templates/sheets/actor/components/combat-value.hbs

@@ -0,0 +1,22 @@
+{{!--
+!-- Render a combat value.
+!--
+!-- @param combat-value-key: The key of the combat value
+!-- @param combat-value-data: The data for the attribute
+!-- @param combat-value-label: The label for the attribute
+--}}
+
+<div class="ds4-combat-value">
+    <div class="ds4-combat-value__value ds4-combat-value__value--{{combat-value-key}}"
+        title="{{combat-value-label}}: {{combat-value-data.tooltip}}">
+        {{combat-value-data.total}}
+    </div>
+    <div class="ds4-combat-value__formula">
+        <span class="ds4-combat-value__formula-base"
+            title="{{combat-value-label}} {{localize 'DS4.TooltipBaseValue'}}">{{combat-value-data.base}}</span>
+        <span>+</span>
+        <input class="ds4-combat-value__formula-modifier" type="number" name="data.combatValues.{{combat-value-key}}.mod"
+            value='{{combat-value-data.mod}}' data-dtype="Number"
+            title="{{combat-value-label}} {{localize 'DS4.TooltipModifier'}}" />
+    </div>
+</div>

src/templates/sheets/actor/components/combat-values.hbs

@@ -1,33 +1,6 @@
-{{!-- ======================================================================== --}}
+<div class="ds4-combat-values">
-{{!-- INLINE PARTIAL DEFINITIONS --}}
-{{!-- ======================================================================== --}}
-
-{{!--
-!-- Render a combat value.
-!--
-!-- @param combat-value-key: The key of the combat value
-!-- @param combat-value-data: The data for the attribute
-!-- @param combat-value-label: The label for the attribute
---}}
-
-{{#*inline "combat-value"}}
-<div class="combat-value-with-formula">
-    <div class="combat-value {{combat-value-key}}" title="{{combat-value-label}}: {{combat-value-data.tooltip}}"><span
-            class="combat-value-total">{{combat-value-data.total}}</span>
-    </div>
-    <div class="combat-value-formula flexrow"><span class="combat-value-base"
-            title="{{combat-value-label}} {{localize 'DS4.TooltipBaseValue'}}">{{combat-value-data.base}}</span><span>+</span><input
-            type="number" name="data.combatValues.{{combat-value-key}}.mod" value='{{combat-value-data.mod}}'
-            data-dtype="Number" title="{{combat-value-label}} {{localize 'DS4.TooltipModifier'}}" />
-    </div>
-</div>
-{{/inline}}
-
-{{!-- ======================================================================== --}}
-
-<div class="combat-values flexrow flex-between">
     {{#each config.i18n.combatValues as |combat-value-label combat-value-key|}}
-    {{> combat-value combat-value-key=combat-value-key combat-value-data=(lookup ../data.combatValues
+    {{> systems/ds4/templates/sheets/actor/components/combat-value.hbs combat-value-key=combat-value-key
-    combat-value-key) combat-value-label=combat-value-label}}
+    combat-value-data=(lookup ../data.combatValues combat-value-key) combat-value-label=combat-value-label}}
     {{/each}}
 </div>