fix(chip-field): add focus-indicator-color token to chips to fix th…

…emed "field" chips (#705)
tyler-technologies-oss · Oct 16, 2024 · df4976e · df4976e
1 parent d715bbb
commit df4976e
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 2 deletions.
diff --git a/src/lib/chip-field/chip-field.scss b/src/lib/chip-field/chip-field.scss
@@ -72,7 +72,8 @@ $themes: (primary, secondary, tertiary, success, warning, error, info);
       @include chip.provide-theme(
         (
           field-background: theme.variable($theme),
-          field-color: theme.variable(on-#{$theme})
+          field-color: theme.variable(on-#{$theme}),
+          focus-indicator-color: theme.variable($theme)
         )
       );
     }

diff --git a/src/lib/chips/chip/chip.scss b/src/lib/chips/chip/chip.scss
@@ -59,7 +59,7 @@
 forge-focus-indicator {
   @include focus-indicator.provide-theme(
     (
-      color: #{token(color)},
+      color: #{token(focus-indicator-color)},
       shape: #{token(shape)}
     )
   );

diff --git a/src/lib/chips/chip/chip.ts b/src/lib/chips/chip/chip.ts
@@ -77,6 +77,7 @@ declare global {
  * @cssproperty --forge-chip-padding-block - The block padding of the chip.
  * @cssproperty --forge-chip-cursor - The cursor style of the chip.
  * @cssproperty --forge-chip-icon-font-size - The font size of the chip icon.
+ * @cssproperty --forge-chip-focus-indicator-color - The color of the focus indicator.
  * @cssproperty --forge-chip-disabled-opacity - The opacity of the disabled chip.
  * @cssproperty --forge-chip-disabled-cursor - The cursor style of the disabled chip.
  * @cssproperty --forge-chip-dense-height - The height of the dense chip.

diff --git a/src/lib/core/styles/tokens/chips/chip/_tokens.scss b/src/lib/core/styles/tokens/chips/chip/_tokens.scss
@@ -17,6 +17,7 @@ $tokens: (
   padding-block: utils.module-val(chip, padding-block, 0),
   cursor: utils.module-val(chip, cursor, pointer),
   icon-font-size: utils.module-val(chip, icon-font-size, 1.5rem),
+  focus-indicator-color: utils.module-ref(chip, focus-indicator-color, color),
   // Disabled
   disabled-opacity: utils.module-val(chip, disabled-opacity, theme.emphasis(medium-low)),
   disabled-cursor: utils.module-val(chip, disabled-cursor, not-allowed),