Restored the chevron in inverse / dark mode.

Applied rarity colors to option text in the rarity dropdown. Fixed rarity color slug creation. Extracted Rarity Color management to its own feature static class.
kgar · Jan 12, 2025 · fb81841 · fb81841
1 parent 94f39a2
commit fb81841
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 50 deletions.
diff --git a/src/features/rarity-colors/RarityColors.ts b/src/features/rarity-colors/RarityColors.ts
@@ -0,0 +1,9 @@
+export class RarityColors {
+  static getRarityText(key: string) {
+    return CONFIG.DND5E.itemRarity[key] ?? '';
+  }
+
+  static getRarityColorVariableName(key: string) {
+    return `--t5e-color-rarity-${RarityColors.getRarityText(key).slugify()}`;
+  }
+}
diff --git a/src/foundry/config.types.ts b/src/foundry/config.types.ts
@@ -1,5 +1,11 @@
 import type { GroupableSelectOption } from 'src/types/types';
 
+type CurrencyItemConfig = {
+  label: string;
+  abbreviation: string;
+  conversion: number;
+};
+
 export type CONFIG = {
   debug: {
     applications: boolean;
@@ -3205,7 +3211,7 @@ export type CONFIG = {
       veryRare: string;
       legendary: string;
       artifact: string;
-    };
+    } & Record<string, string>;
     limitedUsePeriods: {
       lr: {
         label: string;
@@ -3613,32 +3619,12 @@ export type CONFIG = {
       };
     };
     currencies: {
-      pp: {
-        label: string;
-        abbreviation: string;
-        conversion: number;
-      };
-      gp: {
-        label: string;
-        abbreviation: string;
-        conversion: number;
-      };
-      ep: {
-        label: string;
-        abbreviation: string;
-        conversion: number;
-      };
-      sp: {
-        label: string;
-        abbreviation: string;
-        conversion: number;
-      };
-      cp: {
-        label: string;
-        abbreviation: string;
-        conversion: number;
-      };
-    };
+      pp: CurrencyItemConfig;
+      gp: CurrencyItemConfig;
+      ep: CurrencyItemConfig;
+      sp: CurrencyItemConfig;
+      cp: CurrencyItemConfig;
+    } & Record<string, CurrencyItemConfig>;
     dieSteps: Array<number>;
     damageScalingModes: {
       whole: {

diff --git a/src/foundry/foundry-and-system.d.ts b/src/foundry/foundry-and-system.d.ts
@@ -116,6 +116,7 @@ declare global {
       strict = false,
       lowercase = true,
     } = {}): string;
+    titleCase(): string;
   }
 
   interface Array<T> {

diff --git a/src/scss/hightouch/components/inputs.scss b/src/scss/hightouch/components/inputs.scss
@@ -330,8 +330,6 @@ input[type='checkbox'] {
   }
 }
 
-// To customize the chevron, try the bootstrap approach: https://getbootstrap.com/docs/5.3/forms/select/
-
 select {
   --bg-image-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill: %23666' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
   --bg-image-backdrop: none;
@@ -350,6 +348,8 @@ select {
   appearance: none;
   cursor: pointer;
 
+  font-size: var(--font-size-13);
+
   background-color: var(--t5e-component-card-onDefault-default);
   background-image: var(--bg-image-chevron), var(--bg-image-backdrop);
   background-repeat: no-repeat, repeat repeat;
@@ -384,9 +384,9 @@ select {
   }
 }
 
-&.dark, .inverse {
-  input[type='text'], select {
-    border-radius: 0.125rem;
+&.dark,
+.inverse {
+  input[type='text'] {
     border-color: var(--t5e-component-field-onInverse-border, #7a7a7a);
     background: var(--t5e-component-field-onInverse-background, #252830);
     box-shadow: 0px 0px 4px 0px var(--dnd5e-shadow-15, rgba(0, 0, 0, 0.15)); // TODO: make variable
@@ -398,8 +398,15 @@ select {
   }
 
   select {
-    // TODO: Fix the chevron
-    // --bg-image-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill: %23666' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
+    --bg-image-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill: %23999' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
+    background-color: var(--t5e-component-field-onInverse-background, #252830);
+    border-color: var(--t5e-component-field-onInverse-border, #7a7a7a);
+    color: var(--t5e-color-text-onInverse-default);
+
+    option {
+      background: var(--t5e-component-field-onInverse-background, #252830);
+      color: var(--t5e-color-text-onInverse-default);
+    }
   }
 
   .input-group {

diff --git a/src/scss/hightouch/items.scss b/src/scss/hightouch/items.scss
@@ -280,10 +280,20 @@
       }
     }
 
-    .item-rarity {
-      // Rarity select here
-
-      .rarity-text {
+    .item-rarity-container {
+      .item-rarity-selector {
+        height: var(--font-size-28);
+        line-height: var(--font-size-28);
+        padding-block: 0;
+        position: relative;
+        color: oklch(from var(--t5e-item-rarity-color) calc(l + 0.125) c h);
+
+        option {
+          color: oklch(from var(--t5e-item-rarity-color) calc(l + 0.125) c h);
+        }
+      }
+
+      .item-rarity-text {
         color: var(--t5e-item-rarity-color);
         font-family: var(--t5e-font-modesto-condensed);
         font-size: var(--font-size-12);

diff --git a/src/sheets/hightouch/container/ContainerSheet.svelte b/src/sheets/hightouch/container/ContainerSheet.svelte
@@ -11,28 +11,32 @@
   import { untrack } from 'svelte';
   import TidyVisibilityObserver from 'src/components/utility/TidyVisibilityObserver.svelte';
   import Select from 'src/components/inputs/Select.svelte';
-  import SelectOptions from 'src/components/inputs/SelectOptions.svelte';
+  import { RarityColors } from 'src/features/rarity-colors/RarityColors';
 
   let context = $derived(getContainerSheetHightouchContext());
 
   const localize = FoundryAdapter.localize;
 
   let selectedTabId: string = $state(CONSTANTS.TAB_CONTAINER_CONTENTS);
+
   let identifiedText = $derived(
     context.system.identified
       ? localize('DND5E.Identified')
       : localize('DND5E.Unidentified.Title'),
   );
+
+  let rarityColorVariable = $derived(
+    RarityColors.getRarityColorVariableName(context.system.rarity),
+  );
+
   let rarityText = $derived(
-    //@ts-expect-error
-    CONFIG.DND5E.itemRarity[context.system.rarity]?.titleCase() ?? '',
+    RarityColors.getRarityText(context.system.rarity).titleCase(),
   );
-  let rarityColorVariable = $derived(
-    `--t5e-color-rarity-${context.system.rarity?.slugify() ?? ''}`,
+
+  let denomination = $derived(
+    CONFIG.DND5E.currencies[context.system.price.denomination],
   );
-  let denomination =
-    //@ts-expect-error
-    $derived(CONFIG.DND5E.currencies[context.system.price.denomination]);
+
   let itemValueText = $derived(
     FoundryAdapter.formatNumber(context.system.price?.value),
   );
@@ -50,6 +54,16 @@
       return `-${headerHeight}px`;
     });
   });
+
+  let itemRarities = $derived(
+    Object.entries(context.config.itemRarity).map(([key, value]) => {
+      return {
+        key,
+        label: value,
+        rarityColorVariableName: RarityColors.getRarityColorVariableName(key),
+      };
+    }),
+  );
 </script>
 
 {#if !!containerNameEl}
@@ -88,21 +102,29 @@
       <img class="item-image" src={context.item.img} alt={context.item.name} />
       <ItemImageBorder />
     </div>
-    <div class="item-rarity">
+    <div class="item-rarity-container">
       {#if context.unlocked}
         <Select
           id="rarity-{context.item.sheet.id}"
           document={context.item}
           field="system.rarity"
-          class="item-rarity capitalize"
+          class="item-rarity-selector capitalize"
           value={context.system.rarity}
           disabled={!context.editable}
           blankValue=""
         >
-          <SelectOptions data={context.config.itemRarity} blank="" />
+          <option value=""></option>
+          {#each itemRarities as rarity (rarity.key)}
+            <option
+              value={rarity.key}
+              style="--t5e-item-rarity-color: var({rarity.rarityColorVariableName}, var(--t5e-color-text-onInverse-default));"
+            >
+              {rarity.label}
+            </option>
+          {/each}
         </Select>
       {:else}
-        <div class="rarity-text">{rarityText}</div>
+        <div class="item-rarity-text">{rarityText}</div>
       {/if}
     </div>
   </div>