Style-sheet-vars

package.json

@@ -20,6 +20,7 @@
     "@tinymce/tinymce-vue": "^5.0.0",
     "@types/lodash": "^4.14.170",
     "@types/marked": "^4.0.3",
+    "@types/node": "^18.8.0",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
     "@typescript/analyze-trace": "^0.9.0",

src/module/helpers/handlebars.ts

@@ -212,7 +212,7 @@ export class IronswornHandlebarsHelpers {
               viewbox="0 0 17.32050807568877 20"
               class="rank-pip ${
                 isFilled ? 'filled' : ''
-              } clickable svg ironsworn__progress__rank"
+              }s svg ironsworn__progress__rank"
               data-rank="${testRank}"
               data-item="${id}"
             >

src/module/vue/bondset-sheet.vue

@@ -11,10 +11,10 @@
           <input type="text" v-model="bond.name" @blur="save" />
           <textarea v-model="bond.notes" @blur="save" />
         </div>
-        <BtnFaicon class="block nogrow" icon="trash" @click="deleteBond(i)" />
+        <BtnFaicon class="btn-block nogrow" icon="trash" @click="deleteBond(i)" />
       </article>
     </CollapseTransition>
-    <BtnFaicon class="block nogrow" icon="plus" @click="addBond" />
+    <BtnFaicon class="btn-block nogrow" icon="plus" @click="addBond" />
   </div>
 </template>
 <script setup lang="ts">

src/module/vue/challenge-resolution-dialog.vue

@@ -39,7 +39,7 @@
       <div class="boxrow flexrow">
         <button
           type="button"
-          class="clickable block save"
+          class="btn-block save"
           :class="{ disabled: saveDisabled }"
           @click="save"
         >

src/module/vue/character-sheet.vue

@@ -11,7 +11,7 @@
 
     <!-- Main body row -->
     <!-- Momentum on left -->
-    <div class="flexcol margin-left">
+    <div class="flexcol left-margin">
       <MomentumMeterSlider labelPosition="right" data-tooltip-direction="UP" />
     </div>
 
@@ -38,8 +38,9 @@
     </div>
 
     <!-- Stats on right -->
+
     <PcConditionMeters
-      class="flexcol margin-right"
+      class="flexcol right-margin"
       data-tooltip-direction="UP"
       labelPosition="left"
     />

src/module/vue/components/active-completed-progresses.vue

@@ -25,12 +25,12 @@
       <progress-controls :foeCompendium="foeCompendium" />
     </div>
 
-    <div class="item-row nogrow progress-completed" style="margin-top: 1rem">
+    <div class="item-row nogrow progress-completed">
       <!-- TODO: refactor this as a component in PR for collapsible/progressive disclosure element -->
       <h3>
         <btn-faicon
           :disabled="completedItems.length === 0"
-          class="text collapse-control"
+          class="click-text collapse-control"
           :class="completedClass"
           :icon="completedCaret"
           @click="data.expandCompleted = !data.expandCompleted"
@@ -71,6 +71,7 @@
 
 <style lang="less">
 .progress-completed {
+  margin-top: 1rem;
   .collapse-control {
     text-transform: uppercase;
     height: inherit;
@@ -79,25 +80,21 @@
   }
   h3 {
     display: flex;
-  }
-  .highlighted {
-    background-color: lightyellow;
+    border-bottom: none;
   }
 }
 </style>
 
 <style lang="less" scoped>
+.progress-completed {
+}
 h3 {
   margin: 5px 0;
   transition: background-color 0.2s ease;
   i {
     width: 15px;
     text-align: center;
   }
-
-  &.highlighted {
-    background-color: lightyellow;
-  }
 }
 </style>
 

src/module/vue/components/asset/asset-browser-card.vue

@@ -14,13 +14,12 @@
     @dragstart="dragStart"
   >
     <header class="asset-header nogrow flexrow">
-      <i class="fa-solid fa-grip nogrow block draggable item"></i>
-
+      <i class="fa-solid fa-grip nogrow btn-block draggable item"></i>
       <button
         type="button"
         @click="state.expanded = !state.expanded"
         :aria-controls="bodyId"
-        class="clickable text asset-expand-toggle"
+        class="click-text asset-expand-toggle"
       >
         <h4 class="asset-title">
           {{ foundryItem().name }}
@@ -84,6 +83,8 @@
           :max="data.data.track.max"
           :currentValue="data.data.track.current"
           :read-only="true"
+          :fillColorHover="data.data.color"
+          :fillColorSelected="data.data.color"
         >
           <template #label>
             <label>{{ data.data.track.name }}</label>

src/module/vue/components/asset/asset-exclusiveoption.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- TODO: as radio set -->
   <div
-    class="clickable block stack-row"
+    class="btn-block stack-row"
     :class="selectedClass"
     @click="$emit('click')"
   >