diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx index 6ae05b1d3f4..5669d37c7d1 100644 --- a/packages/core/src/components/category-filter/category-filter.tsx +++ b/packages/core/src/components/category-filter/category-filter.tsx @@ -581,7 +581,7 @@ export class CategoryFilter { 'reset-button': true, 'hide-reset-button': !this.filterTokens.length && !this.category, }} - variant="Secondary" + variant="Primary" ghost oval icon="clear" diff --git a/packages/core/src/components/filter-chip/filter-chip.scss b/packages/core/src/components/filter-chip/filter-chip.scss index 4138dedf70b..fff86ee9163 100644 --- a/packages/core/src/components/filter-chip/filter-chip.scss +++ b/packages/core/src/components/filter-chip/filter-chip.scss @@ -17,28 +17,35 @@ justify-content: space-between; height: $large-space; padding-left: $small-space; - border: var(--theme-focus--border-thickness) solid transparent; + border: var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color); border-radius: $x-large-space; - background-color: var(--theme-chip--background); - color: var(--theme-chip--color); + background-color: var(--theme-color-ghost); + color: var(--theme-chip-primary-outline--color); @include hover { - background-color: var(--theme-chip--background--hover); + background-color: var(--theme-color-ghost-primary--hover); + border-color: var(--theme-chip-primary-outline--border-color--hover); + color: var(--theme-chip-primary-outline--color--hover); } @include active { - background-color: var(--theme-chip--background--active); + background-color: var(--theme-color-ghost-primary--active); + border-color: var(--theme-chip-primary-outline--border-color--active); + color: var(--theme-chip-primary-outline--color--active); } @include focus-visible { - border-color: #199fff; + outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness); + outline-offset: -0.125rem; } .slot-container { @include ellipsis; :host-context(.disabled) { - color: var(--theme-chip--color-diabled); + background-color: var(--theme-color-ghost); + border-color: var(--theme-color-component-4); + color: var(--theme-color-weak-text); } } diff --git a/packages/core/src/components/filter-chip/filter-chip.tsx b/packages/core/src/components/filter-chip/filter-chip.tsx index fe461247b0e..c639c681509 100644 --- a/packages/core/src/components/filter-chip/filter-chip.tsx +++ b/packages/core/src/components/filter-chip/filter-chip.tsx @@ -49,7 +49,7 @@ export class FilterChip {