fix(core/filter-chip): align styling to latest styleguide changes (#458)

Author: nuke-ellington

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"

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);
     }
   }
 

packages/core/src/components/filter-chip/filter-chip.tsx

@@ -49,7 +49,7 @@ export class FilterChip {
         </div>
         <button
           disabled={this.disabled}
-          class="btn btn-invisible-secondary btn-oval"
+          class="btn btn-invisible-primary btn-oval"
           onClick={(e) => this.onCloseClick(e)}
         >
           <ix-icon name="close-small" size="16"></ix-icon>