diff --git a/src/lib/chip-field/chip-field.scss b/src/lib/chip-field/chip-field.scss index ecf4a2f56..8bc53913d 100644 --- 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 index 4bd089d85..add4d3041 100644 --- 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 index 6f62b7c03..fda7a8f23 100644 --- 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 index 469e61cf4..d7a5a6b44 100644 --- 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),