feat(components/lists): tokenize filter styles (#3019)

apps/e2e/lists-storybook-e2e/src/e2e/filter.component.cy.ts

@@ -26,5 +26,5 @@ describe('lists-storybook', () => {
         );
       });
     });
-  });
+  }, true);
 });

libs/components/lists/src/lib/modules/filter/filter-button.component.scss

@@ -1,7 +1,5 @@
 @use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
-@use 'libs/components/theme/src/lib/styles/_public-api/themes/modern/_compat/mixins'
-  as modernMixins;
 
 .sky-filter-btn-active,
 .sky-filter-btn-active:hover,
@@ -20,16 +18,64 @@
   .sky-filter-btn-active,
   .sky-filter-btn-active:hover,
   .sky-filter-btn-active:focus {
-    color: initial;
+    background-color: var(--sky-color-background-selected-soft);
     border: none;
-
-    @include modernMixins.sky-theme-modern-button-variant(
-      var(--sky-text-color-action-primary),
-      var(--sky-background-color-input-selected),
-      var(--sky-background-color-primary-dark),
-      var(--sky-background-color-primary-dark),
-      $sky-theme-modern-padding-button-standard
+    box-shadow: inset 0 0 0 var(--sky-border-width-selected-s)
+      var(--sky-color-border-selected);
+    color: var(--sky-color-text-action);
+    padding: var(
+      --sky-override-button-padding,
+      var(--sky-space-inset-pillarbox-1_2-top-m)
+        var(--sky-space-inset-pillarbox-1_2-right-m)
+        var(--sky-space-inset-pillarbox-1_2-bottom-m)
+        var(--sky-space-inset-pillarbox-1_2-left-m)
     );
+
+    sky-icon {
+      color: var(--sky-color-icon-action);
+    }
+
+    &:hover {
+      box-shadow: inset 0 0 0 var(--sky-border-width-action-hover)
+        var(--sky-color-border-selected);
+    }
+
+    &:active,
+    &.sky-btn-active {
+      box-shadow: inset 0 0 0 var(--sky-border-width-action-active)
+        var(--sky-color-border-selected);
+      background-image: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &:not(:active) {
+        box-shadow:
+          inset 0 0 0 var(--sky-border-width-action-focus)
+            var(--sky-color-border-selected),
+          var(--sky-elevation-focus);
+      }
+    }
+
+    &.sky-btn-disabled,
+    &[disabled] {
+      &,
+      &:hover,
+      &:focus-visible,
+      &.sky-btn-focus,
+      &:active,
+      &.sky-btn-active {
+        background-color: var(--sky-color-background-action-secondary-disabled);
+        box-shadow: inset 0 0 0 var(--sky-border-width-action-disabled)
+          var(--sky-color-border-action-secondary-disabled);
+        color: var(--sky-color-text-deemphasized);
+
+        sky-icon {
+          color: var(--sky-color-icon-deemphasized);
+        }
+      }
+    }
   }
 }
 

libs/components/lists/src/lib/modules/filter/filter-inline-item.component.scss

@@ -1,5 +1,13 @@
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-filter-inline-item') {
+  --sky-override-filter-inline-item-margin-right: #{$sky-margin};
+}
 
 .sky-filter-inline-item {
-  margin-right: $sky-margin;
+  margin-right: var(
+    --sky-override-filter-inline-item-margin-right,
+    var(--sky-space-gap-form-s)
+  );
 }

libs/components/lists/src/lib/modules/filter/filter-inline.component.scss

@@ -1,7 +1,16 @@
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-filter-inline') {
+  --sky-override-filter-inline-background-color: #{$sky-background-color-neutral-light};
+}
+
+@include compatMixins.sky-modern-overrides('.sky-filter-inline') {
+  --sky-override-filter-inline-background-color: #{$sky-background-color-neutral-light};
+}
 
 .sky-filter-inline {
-  background-color: $sky-background-color-neutral-light;
+  background-color: var(--sky-override-filter-inline-background-color);
   display: flex;
   align-items: center;
 }

libs/components/lists/src/lib/modules/filter/filter-summary-item.component.scss

@@ -1,16 +1,22 @@
-@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
-@use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-host-overrides() {
+  --sky-override-filter-summary-item-margin-right: 5px;
+}
+
+@include compatMixins.sky-modern-overrides('.sky-filter-summary-item') {
+  --sky-override-filter-summary-item-padding: 0 0
+    var(--sky-space-gap-action_group-s) 0;
+}
 
 .sky-filter-summary-item {
   display: inline-block;
+  padding: var(--sky-override-filter-summary-item-padding);
 }
 
 :host:not(:last-child) {
-  margin-right: $sky-margin-inline-compact;
-}
-
-@include mixins.sky-theme-modern() {
-  .sky-filter-summary-item {
-    padding: 0 0 5px 0;
-  }
+  margin-right: var(
+    --sky-override-filter-summary-item-margin-right,
+    var(--sky-space-gap-action_group-s)
+  );
 }

libs/components/lists/src/lib/modules/filter/filter-summary-item.component.ts

@@ -5,6 +5,7 @@ import {
   Input,
   Output,
 } from '@angular/core';
+import { SkyThemeComponentClassDirective } from '@skyux/theme';
 
 /**
  * Specifies a filter that was applied.
@@ -13,6 +14,8 @@ import {
   selector: 'sky-filter-summary-item',
   styleUrls: ['./filter-summary-item.component.scss'],
   templateUrl: './filter-summary-item.component.html',
+  hostDirectives: [SkyThemeComponentClassDirective],
+
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })

libs/components/lists/src/lib/modules/filter/filter-summary.component.scss

@@ -1,13 +1,33 @@
-@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
 @use 'libs/components/theme/src/lib/styles/variables' as *;
+@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
+
+@include compatMixins.sky-default-overrides('.sky-filter-summary') {
+  --sky-override-filter-summary-background-color: #{$sky-color-white};
+  --sky-override-filter-summary-font-weight: 600;
+  --sky-override-filter-summary-header-margin: #{$sky-margin-half $sky-margin 0
+    0};
+  --sky-override-filter-summary-row-gap: 0;
+}
+
+@include compatMixins.sky-modern-overrides('.sky-filter-summary') {
+  --sky-override-filter-summary-background-color: #{$sky-color-white};
+  --sky-override-filter-summary-font-weight: 600;
+  --sky-override-filter-summary-row-gap: 0;
+}
 
 .sky-filter-summary-header {
-  margin: $sky-margin-half $sky-margin 0 0;
-  font-weight: 600;
+  margin: var(
+    --sky-override-filter-summary-header-margin,
+    0 var(--sky-space-gap-text_action-s) 0 0
+  );
+  font-weight: var(
+    --sky-override-filter-summary-font-weight,
+    var(--sky-font-weight-emphasized)
+  );
 }
 
 .sky-filter-summary {
-  background-color: $sky-color-white;
+  background-color: var(--sky-override-filter-summary-background-color);
   overflow-x: auto;
   display: flex;
   align-items: flex-start;
@@ -16,10 +36,8 @@
 .sky-filter-summary-items {
   display: flex;
   flex-wrap: wrap;
-}
-
-@include mixins.sky-theme-modern() {
-  .sky-filter-summary-header {
-    margin: 0 $sky-margin 0 0;
-  }
+  row-gap: var(
+    --sky-override-filter-summary-row-gap,
+    var(--sky-space-gap-action_group-s)
+  );
 }