@swisspost/design-system-styles 9.0.0-next.2 → 9.0.0-next.21

package/components/card.scss

@@ -1,30 +1,68 @@
-@forward './../variables/options';
-
 @use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/card' as bootstrap-card;
 @use './../variables/color';
-@use './../variables/spacing';
 @use './../variables/commons';
-@use './../variables/components/card';
-@use './../functions/sizing';
-@use './../mixins/icons' as icons-mixins;
+@use './../mixins/icons' as icons-mx;
 @use './../variables/icons';
-@use './../variables/animation';
+@use '../mixins/utilities' as utilities-mx;
+
+@use './../functions/tokens';
+@use './../tokens/utilities';
+@use './../tokens/components';
 
-.card-group {
-  margin-top: commons.$border-width;
-  margin-left: commons.$border-width;
-  box-shadow: commons.$box-shadow-lg;
+tokens.$default-map: components.$post-cards;
+
+post-linkarea:has(> .card) {
+  border-radius: tokens.get('card-border-radius');
+  display: block;
+  @include utilities-mx.focus-style();
 }
 
 .card {
-  transition: box-shadow 0.25s;
-  border: 0;
-  border-radius: 0;
-  // Outline with card-group margin trick prevents double/jumping (on hover) borders
-  outline: 1px solid card.$card-border-color;
-  box-shadow: commons.$box-shadow-lg;
-  color: card.$card-color;
+  transition: all 250ms;
+  border-radius: tokens.get('card-border-radius');
+  background-color: tokens.get('card-enabled-bg1');
+  border: 1px solid tokens.get('card-non-interactive-stroke');
+
+  .palette-alternate & {
+    background-color: tokens.get('card-enabled-bg2');
+  }
+
+  // Add an elevation only if card is interactive
+  post-linkarea > & {
+    border: 0;
+    box-shadow: tokens.get('card-interactive-elevation');
+
+    &:hover {
+      background-color: tokens.get('card-hover-bg');
+
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      a,
+      .btn-tertiary {
+        color: tokens.get('card-hover-fg');
+      }
+    }
+  }
+
+  .card-header:first-child,
+  .list-group:first-child,
+  .card-img-top {
+    border-start-start-radius: tokens.get('card-border-radius');
+    border-start-end-radius: tokens.get('card-border-radius');
+  }
+
+  .card-footer:last-child,
+  .list-group:last-child,
+  .card-img-bottom {
+    border-end-start-radius: tokens.get('card-border-radius');
+    border-end-end-radius: tokens.get('card-border-radius');
+  }
 
   &.product-card,
   &.card-button {
@@ -37,39 +75,28 @@
     }
   }
 
-  & + & {
-    margin-top: sizing.calculate-single-box-shadow-size(commons.$box-shadow-lg) * 2;
-  }
-
-  .card-group > & {
-    margin-right: commons.$border-width;
-    margin-bottom: commons.$border-width;
-    box-shadow: none;
-
-    + .card {
-      margin-top: 0;
-    }
+  .list-group {
+    margin-block: 0 !important;
   }
 
   .list-group-item {
     padding: 1.25rem 1rem;
-    border-color: card.$card-border-color;
+    border-color: tokens.get('card-non-interactive-stroke');
   }
 
   .link-icon {
     text-decoration: none;
 
-    .pi,
     post-icon {
       width: 1.5rem;
       height: 1.5rem;
-      margin-right: 0.5rem;
+      margin-inline-end: 0.5rem;
     }
   }
 
   > .list-group + .card-footer,
   .card-body ~ .card-body {
-    border-top: 1px solid color.$gray-20;
+    border-block-start: 1px solid color.$gray-20;
   }
 }
 
@@ -80,11 +107,11 @@
 .card-footer,
 .list-group-item {
   > *:first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   > *:last-child {
-    margin-bottom: 0;
+    margin-block-end: 0;
   }
 }
 
@@ -96,19 +123,15 @@
   .product-card &,
   .card-button & {
     @include media-breakpoint-down(sm) {
-      padding: spacing.$size-regular;
+      padding: tokens.get('utility-gap-16', utilities.$post-spacing);
     }
 
     @include media-breakpoint-between(sm, md) {
-      padding: spacing.$size-large;
-    }
-
-    @include media-breakpoint-between(md, xxl) {
-      padding: spacing.$size-big;
+      padding: tokens.get('utility-gap-24', utilities.$post-spacing);
     }
 
-    @include media-breakpoint-up(xxl) {
-      padding: spacing.$size-bigger-big;
+    @include media-breakpoint-up(md) {
+      padding: tokens.get('utility-gap-32', utilities.$post-spacing);
     }
   }
 
@@ -121,7 +144,7 @@
   align-items: center;
 
   > *:not(:last-child) {
-    margin-right: 1rem;
+    margin-inline-end: 1rem;
   }
 }
 
@@ -153,47 +176,28 @@
       height: 100%;
     }
   }
-
-  .card-group .card {
-    img {
-      height: auto;
-      max-height: 50%;
-    }
-
-    > .card-header,
-    > .card-footer {
-      flex: 0 0 auto;
-    }
-  }
 }
 
 .card-links {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+  padding-inline: 0.5rem;
 
   a {
     display: inline-flex;
     align-items: center;
-    padding-inline: spacing.$size-mini;
-    gap: spacing.$size-mini;
-    color: color.$gray-60;
+    padding-inline: tokens.get('utility-gap-8', utilities.$post-spacing);
+    gap: tokens.get('utility-gap-8', utilities.$post-spacing);
     text-decoration: none;
     -ms-flex-align: center;
 
     &::before {
-      @include icons-mixins.icon(3020);
+      @include icons-mx.icon(3020);
       content: '';
       display: inline-block;
       width: icons.$icon-size-default;
       height: icons.$icon-size-default;
     }
-
-    &:hover,
-    &:focus {
-      color: color.$black;
-    }
   }
 }

package/components/checkbox.css

@@ -0,0 +1 @@
+.form-check{display:flex;flex-wrap:wrap;align-items:flex-start;width:fit-content;border-radius:var(--post-device-border-radius-focus)}.form-check-inline{display:inline-flex;vertical-align:top}fieldset>.form-check-inline:not(:last-of-type){margin-right:var(--post-core-dimension-24)}.form-check:has(>input:not(:only-child)){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(>input:not(:only-child)):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(>input:not(:only-child)):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:has(>input:not(:only-child))>input{outline:none !important}.form-check:has(input[type=checkbox]):not(.form-switch){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=checkbox]):not(.form-switch):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=checkbox]):not(.form-switch)>input[type=checkbox][disabled]~label{color:GrayText}}.form-check.form-switch>input[type=checkbox]~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check.form-switch>input[type=checkbox]:not([disabled])~label{cursor:pointer}.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox]:not([disabled]):hover~label{color:Highlight}}.form-check.form-switch>input[type=checkbox][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check.form-switch>input[type=checkbox][disabled]~label{color:GrayText}}.form-check:has(input[type=radio]){padding-block:var(--post-device-spacing-padding-block-19)}fieldset>.form-check:has(input[type=radio]):not(:last-of-type){margin-bottom:var(--post-device-spacing-gap-4)}.form-check:has(input[type=radio])>input[type=radio]~label{padding-block:var(--post-device-spacing-padding-block-20);padding-inline-start:var(--post-device-spacing-gap-inline-12);color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-check:has(input[type=radio])>input[type=radio]:not([disabled])~label{cursor:pointer}.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio]:not([disabled]):hover~label{color:Highlight}}.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:has(input[type=radio])>input[type=radio][disabled]~label{color:GrayText}}.form-check>label{transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1);flex:1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check>label{transition:none}}:where(.form-check>input[type=checkbox]){outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=checkbox]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:where(.form-check>input[type=checkbox]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.form-check:not(.form-switch):has(input[type=checkbox])>input{appearance:none;flex:none;display:inline-flex;margin:var(--post-device-spacing-padding-1);margin-block:calc(var(--post-device-spacing-padding-1) + var(--post-device-spacing-padding-block-18));width:var(--post-device-sizing-interactive-icon-size);height:var(--post-device-sizing-interactive-icon-size);background-color:var(--post-scheme-color-interactive-primary-enabled-bg3);border:var(--post-device-border-width-default) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-core-dimension-2);color:var(--post-scheme-color-interactive-primary-enabled-fg1);vertical-align:top;transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),color 250ms cubic-bezier(0.4, 0, 0.2, 1),box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input{background-color:Field;border-color:FieldText;color:FieldText;transition:none}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]){cursor:pointer}.form-check:not(.form-switch):has(input[type=checkbox])>input::after{display:block;content:"";width:100%;height:100%;mask-size:var(--post-device-sizing-interactive-icon-size);mask-repeat:no-repeat;mask-position:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate{background-color:SelectedItem}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:currentColor}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{background-color:SelectedItemText}}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke);color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover{background-color:Field;border-color:Highlight}.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input:not([disabled]):hover:indeterminate::after{background-color:Highlight}}.form-check:not(.form-switch):has(input[type=checkbox])>input:checked::after{mask-image:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input:indeterminate::after{mask-image:url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>")}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg6);border:var(--post-device-border-width-default) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke4);color:var(--post-scheme-color-interactive-primary-disabled-fg4)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]{background-color:Field;border-color:GrayText}.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:checked::after,.form-check:not(.form-switch):has(input[type=checkbox])>input[disabled]:indeterminate::after{background-color:GrayText}}

package/components/checkbox.scss

@@ -0,0 +1,127 @@
+@use 'form-check';
+@use '../variables/color';
+@use '../variables/animation';
+@use '../mixins/color' as color-mx;
+@use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
+@use '../tokens/components';
+@use '../functions/tokens';
+
+tokens.$default-map: components.$post-checkbox;
+
+$checkbox-icon-checked: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M7.51712 12.1332L4.30712 8.69325C4.02712 8.39325 4.03712 7.91325 4.34712 7.63325C4.64712 7.35325 5.12712 7.36325 5.40712 7.67325L7.31712 9.72325L10.7171 4.57325C10.9471 4.22325 11.4071 4.13325 11.7571 4.36325C12.1071 4.59325 12.1971 5.05325 11.9671 5.40325L7.51712 12.1332Z'/></svg>");
+$checkbox-icon-indeterminate: url("data:image/svg+xml,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M11.21 8.5H4.75C4.34 8.5 4 8.16 4 7.75C4 7.34 4.34 7 4.75 7H11.21C11.62 7 11.96 7.34 11.96 7.75C11.96 8.16 11.62 8.5 11.21 8.5Z'/></svg>");
+
+:where(.form-check > input[type='checkbox']) {
+  @include utility-mx.focus-style();
+}
+
+.form-check:not(.form-switch):has(input[type='checkbox']) {
+  > input {
+    appearance: none;
+    flex: none;
+    display: inline-flex;
+    margin: tokens.get('checkbox-icon-padding-inner');
+    margin-block: calc(
+      tokens.get('checkbox-icon-padding-inner') + tokens.get('checkbox-icon-padding-container')
+    );
+    width: tokens.get('checkbox-icon-size');
+    height: tokens.get('checkbox-icon-size');
+    background-color: tokens.get('checkbox-enabled-bg');
+    border: tokens.get('checkbox-icon-border-width') tokens.get('checkbox-border-style-default')
+      tokens.get('checkbox-enabled-stroke');
+    border-radius: tokens.get('checkbox-border-radius');
+    color: tokens.get('checkbox-enabled-fg');
+    vertical-align: top;
+    transition:
+      background-color #{animation.$transition-base-timing},
+      border-color #{animation.$transition-base-timing},
+      color #{animation.$transition-base-timing},
+      box-shadow #{animation.$transition-base-timing};
+
+    @include utility-mx.high-contrast-mode() {
+      background-color: Field;
+      border-color: FieldText;
+      color: FieldText;
+      transition: none;
+    }
+
+    &:not([disabled]) {
+      cursor: pointer;
+    }
+
+    &::after {
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      mask-size: tokens.get('checkbox-icon-size');
+      mask-repeat: no-repeat;
+      mask-position: center;
+    }
+
+    &:checked,
+    &:indeterminate {
+      @include utility-mx.high-contrast-mode() {
+        background-color: SelectedItem;
+      }
+
+      &::after {
+        background-color: currentColor;
+
+        @include utility-mx.high-contrast-mode() {
+          background-color: SelectedItemText;
+        }
+      }
+    }
+
+    &:not([disabled]):hover {
+      background-color: tokens.get('checkbox-hover-bg');
+      border-color: tokens.get('checkbox-hover-stroke');
+      color: tokens.get('checkbox-hover-fg');
+
+      @include utility-mx.high-contrast-mode() {
+        background-color: Field;
+        border-color: Highlight;
+
+        &:checked,
+        &:indeterminate {
+          &::after {
+            background-color: Highlight;
+          }
+        }
+      }
+    }
+
+    &:checked {
+      &::after {
+        mask-image: $checkbox-icon-checked;
+      }
+    }
+
+    &:indeterminate {
+      &::after {
+        mask-image: $checkbox-icon-indeterminate;
+      }
+    }
+
+    &[disabled] {
+      background-color: tokens.get('checkbox-disabled-bg');
+      border: tokens.get('checkbox-icon-border-width') tokens.get('checkbox-border-style-disabled')
+        tokens.get('checkbox-disabled-stroke');
+      color: tokens.get('checkbox-disabled-fg');
+
+      @include utility-mx.high-contrast-mode() {
+        background-color: Field;
+        border-color: GrayText;
+
+        &:checked,
+        &:indeterminate {
+          &::after {
+            background-color: GrayText;
+          }
+        }
+      }
+    }
+  }
+}

package/components/chip.css

@@ -1 +1 @@
-.chip-sm.chip-filter>.chip-filter-label>.badge{--post-badge-height: 1rem;--post-badge-padding-x: 0.25rem;font-size:10px}.chip-dismissible{position:relative;padding-inline-start:.5rem;gap:.5rem;outline:none;border-radius:50rem;display:inline-flex;align-items:center;height:2.5rem;max-width:100%;padding-inline:1rem;border:2px solid #666;gap:.5rem;line-height:1.5;font-size:1rem;font-weight:400;color:#333;background-color:#fff;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-dismissible>.chip-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.chip-dismissible::before,.chip-dismissible::after{content:"";display:inline-block;flex:0 0 auto;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-dismissible::before{border-radius:50%}.chip-dismissible:hover::before{background-color:#ccc;border:1px solid #666}.chip-dismissible::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;top:50%;transform:translateY(-50%)}.chip-dismissible::before{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.chip-dismissible:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-style:solid !important;background-color:#ccc}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.chip-dismissible:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:solid !important;background-color:#ccc}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-color:Highlight !important}}}.chip-dismissible:disabled{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:disabled{color:GrayText;border-color:GrayText}}.chip-filter{display:inline-block;max-width:100%}.chip-filter-label{cursor:pointer;border-radius:50rem;display:inline-flex;align-items:center;height:2.5rem;max-width:100%;padding-inline:1rem;border:2px solid #666;gap:.5rem;line-height:1.5;font-size:1rem;font-weight:400;color:#333;background-color:#fff;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-filter-label>.chip-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.chip-filter-label>.badge{box-sizing:border-box;min-width:var(--post-badge-height);padding-inline:calc(var(--post-badge-padding-x)*.75);color:#000;background-color:#ccc;border:2px solid #666;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-filter-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.chip-filter-input:checked+.chip-filter-label{color:#000;background-color:#fc0}.chip-filter-input:checked+.chip-filter-label>.badge{background-color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked+.chip-filter-label{border-color:Highlight}}.chip-filter-input:checked:disabled+.chip-filter-label{background-color:#f4f3f1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:disabled+.chip-filter-label>.chip-text{text-decoration:underline}}.chip-filter-input:checked:not(:disabled)+.chip-filter-label>.chip-text{text-decoration:underline;transition:-webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-filter-input:checked:not(:disabled)+.chip-filter-label:hover>.chip-text{text-decoration-color:rgba(0,0,0,0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:not(:disabled)+.chip-filter-label:hover>.chip-text{text-decoration-color:initial}}.chip-filter-input:checked:not(:disabled)+.chip-filter-label{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.chip-filter-input:checked:not(:disabled):is(:focus-visible,:has(:focus-visible),.pretend-focus)+.chip-filter-label{outline-style:solid !important}.chip-filter-input:checked:not(:disabled):is(:focus-visible,:has(:focus-visible),.pretend-focus)+.chip-filter-label>.chip-text{text-decoration-color:rgba(0,0,0,0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:not(:disabled):is(:focus-visible,:has(:focus-visible),.pretend-focus)+.chip-filter-label{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.chip-filter-input:checked:not(:disabled):is(:focus-visible,:focus-within,.pretend-focus)+.chip-filter-label{outline-style:solid !important}.chip-filter-input:checked:not(:disabled):is(:focus-visible,:focus-within,.pretend-focus)+.chip-filter-label>.chip-text{text-decoration-color:rgba(0,0,0,0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:not(:disabled):is(:focus-visible,:focus-within,.pretend-focus)+.chip-filter-label{outline-color:Highlight !important}}}.chip-filter-input:not(:checked)+.chip-filter-label:hover{color:#000;background-color:#ccc}.chip-filter-input:not(:checked)+.chip-filter-label:hover>.badge{background-color:#fff}.chip-filter-input:disabled+.chip-filter-label{pointer-events:none;color:var(--post-gray-60);border-color:var(--post-gray-40);border-style:dashed;background-clip:padding-box;text-decoration:line-through;background-color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:disabled+.chip-filter-label>.badge{color:GrayText;border-color:GrayText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:disabled+.chip-filter-label{color:GrayText;border-color:GrayText}}.chip-sm.chip-dismissible{height:2rem;font-size:.875rem;gap:.375rem;padding-inline:.75rem;padding-inline-start:.5rem;gap:.375rem}.chip-sm.chip-dismissible::before,.chip-sm.chip-dismissible::after{height:1rem;width:1rem}.chip-sm.chip-filter>.chip-filter-label{height:2rem;font-size:.875rem;gap:.375rem;padding-inline:.75rem}.chip-sm.chip-filter>.chip-filter-label>.badge{line-height:1;border-width:1px;padding-inline:calc(var(--post-badge-padding-x)*1.2)}
+.chip-sm.chip-filter>.chip-filter-label>.badge{--post-badge-height: var(--post-core-dimension-16);--post-badge-padding-x: var(--post-core-dimension-4);font-size:10px}.chip-dismissible{position:relative;padding-inline-start:var(--post-core-dimension-8);gap:var(--post-core-dimension-8);outline:none !important;border-radius:50rem;display:inline-flex;align-items:center;height:var(--post-device-sizing-interactive-button-height-1);max-width:100%;padding-inline:var(--post-core-dimension-16);border:2px solid #666;gap:var(--post-core-dimension-8);line-height:1.5;font-size:1rem;font-weight:var(--post-core-font-weight-400);color:#333;background-color:#fff;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-dismissible>.chip-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.chip-dismissible::before,.chip-dismissible::after{content:"";display:inline-block;flex:0 0 auto;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-dismissible::before{border-radius:50%}.chip-dismissible:hover::before{background-color:#ccc;border:1px solid #666}.chip-dismissible::after{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;top:50%;transform:translateY(-50%)}.chip-dismissible::before{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.chip-dismissible:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;background-color:#ccc}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.chip-dismissible:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-style:var(--post-core-border-style-solid) !important;background-color:#ccc}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:is(:focus-visible,:focus-within,.pretend-focus)::before{outline-color:Highlight !important}}}.chip-dismissible:disabled{pointer-events:none;color:var(--post-scheme-color-interactive-input-disabled-fg);border-color:var(--post-scheme-color-interactive-input-disabled-border);border-style:var(--post-core-border-style-dash);background-clip:padding-box}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-dismissible:disabled{color:GrayText;border-color:GrayText}}.chip-filter{display:inline-block;max-width:100%}.chip-filter{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.chip-filter:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:50rem;width:fit-content}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.chip-filter:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:50rem;width:fit-content}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.chip-filter-label{cursor:pointer;border-radius:50rem;display:inline-flex;align-items:center;height:var(--post-device-sizing-interactive-button-height-1);max-width:100%;padding-inline:var(--post-core-dimension-16);border:2px solid #666;gap:var(--post-core-dimension-8);line-height:1.5;font-size:1rem;font-weight:var(--post-core-font-weight-400);color:#333;background-color:#fff;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-filter-label>.chip-text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.chip-filter-label>.badge{box-sizing:border-box;min-width:var(--post-badge-height);padding-inline:calc(var(--post-badge-padding-x)*.75);color:#000;background-color:#ccc;border:2px solid #666;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-filter-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.chip-filter-input:checked+.chip-filter-label{color:#000;background-color:#fc0}.chip-filter-input:checked+.chip-filter-label>.badge{background-color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked+.chip-filter-label{border-color:Highlight}}.chip-filter-input:checked:disabled+.chip-filter-label{background-color:#f4f3f1}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:disabled+.chip-filter-label>.chip-text{text-decoration:underline}}.chip-filter-input:checked:not(:disabled)+.chip-filter-label>.chip-text{text-decoration:underline;transition:-webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-decoration 150ms cubic-bezier(0.4, 0, 0.2, 1)}.chip-filter-input:checked:not(:disabled)+.chip-filter-label:hover>.chip-text{text-decoration-color:rgba(0,0,0,0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:checked:not(:disabled)+.chip-filter-label:hover>.chip-text{text-decoration-color:initial}}.chip-filter-input:not(:checked)+.chip-filter-label:hover{color:#000;background-color:#ccc}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:not(:checked)+.chip-filter-label:hover{border-color:highlight}}.chip-filter-input:not(:checked)+.chip-filter-label:hover>.badge{background-color:#fff}.chip-filter-input:disabled+.chip-filter-label{pointer-events:none;color:var(--post-scheme-color-interactive-input-disabled-fg);border-color:var(--post-scheme-color-interactive-input-disabled-border);border-style:var(--post-core-border-style-dash);background-clip:padding-box;background-color:#fff}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:disabled+.chip-filter-label>.badge{color:GrayText;border-color:GrayText}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.chip-filter-input:disabled+.chip-filter-label{color:GrayText;border-color:GrayText}}.chip-sm.chip-dismissible{height:2rem;font-size:.875rem;gap:.375rem;padding-inline:var(--post-core-dimension-12);padding-inline-start:var(--post-core-dimension-8);gap:.375rem}.chip-sm.chip-dismissible::before,.chip-sm.chip-dismissible::after{height:var(--post-core-dimension-16);width:var(--post-core-dimension-16)}.chip-sm.chip-filter>.chip-filter-label{height:2rem;font-size:.875rem;gap:.375rem;padding-inline:var(--post-core-dimension-12)}.chip-sm.chip-filter>.chip-filter-label>.badge{line-height:1;border-width:1px;padding-inline:calc(var(--post-badge-padding-x)*1.2)}

package/components/chip.scss

@@ -1,5 +1,3 @@
-@forward './../variables/options';
-
 @use './../variables/components/chip';
 @use './../mixins/utilities';
 @use './../mixins/chip' as chip-mx;
@@ -51,6 +49,11 @@
   display: inline-block;
   max-width: 100%;
 
+  @include utilities.focus-style() {
+    border-radius: chip.$chip-border-radius;
+    width: fit-content;
+  }
+
   &-label {
     cursor: pointer;
     @include chip-mx.chip-styles();
@@ -108,12 +111,6 @@
             text-decoration-color: initial;
           }
         }
-
-        @include utilities.focus-style('+ .chip-filter-label') {
-          > .chip-text {
-            text-decoration-color: transparent;
-          }
-        }
       }
     }
 
@@ -121,6 +118,10 @@
       color: chip.$chip-hover-color;
       background-color: chip.$chip-hover-bg;
 
+      @include utilities.high-contrast-mode() {
+        border-color: highlight;
+      }
+
       > .badge {
         background-color: chip.$chip-bg;
       }

package/components/close.css

@@ -1 +1 @@
-.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:4px;color:var(--post-gray-80);transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}.btn-close{outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:1.5rem;width:1.5rem}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=error]) .btn-close{color:var(--post-contrast-color)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:var(--post-contrast-color)}.btn-close:disabled{color:var(--post-gray-40)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}
+.btn-close{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{background-color:ButtonFace !important}.btn-close:hover{background-color:Highlight !important}}.btn-close{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:"";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}

package/components/close.scss

@@ -1,5 +1,3 @@
-@forward './../variables/options';
-
 @use './../mixins/utilities' as utilities-mx;
 @use './../placeholders/close' as close-ph;
 @use './../variables/color';

package/components/datatable.css

@@ -12,6 +12,4 @@
  * Copyright 2021 by Swiss Post, Information Technology
  *//*!
  * Copyright 2021 by Swiss Post, Information Technology
- *//*!
- * Copyright 2021 by Swiss Post, Information Technology
- */.datatable-paginated-footer .datatable-row-count-label,.datatable-paginated-footer .datatable-row-count-input{font-size:.9375rem}@media(min-width: 600px){.datatable-paginated-footer .datatable-row-count-label,.datatable-paginated-footer .datatable-row-count-input{font-size:1rem}}@media(min-width: 1024px){.datatable-paginated-footer .datatable-row-count-label,.datatable-paginated-footer .datatable-row-count-input{font-size:1.0625rem}}.datatable-header-cell{padding:.5rem 1rem;font-weight:700}.datatable-header[ng-reflect-sorts*=object] .datatable-header-cell:not(.sort-active){color:#666}.datatable-header-cell-template-wrap{display:flex;align-items:center}.datatable-header-cell-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.datatable-flush .datatable-header-cell{border-bottom:2px solid #e6e6e6}.datatable-body-cell{display:flex !important;align-items:center;margin-bottom:2px;padding:.5rem 1rem;background-color:#faf9f8}.datatable-spaced-cells .datatable-body-cell{margin-right:2px}.datatable-inverted .datatable-body-cell{background-color:#fff}.datatable-flush .datatable-body-cell,.datatable-striped-rows .datatable-row-odd .datatable-body-cell{margin:0;background-color:rgba(0,0,0,0)}.datatable-flush .datatable-body-cell{border-bottom:2px solid #e6e6e6}.ngx-datatable .sort-btn{flex:0 0 auto;width:1rem;height:1rem;margin-left:.5rem}.ngx-datatable .sort-btn.datatable-icon-sort-unset{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='m9.1 13.8-.9-1 7.8-7 7.8 7.1-.9 1L16 7.6zm6.9 10-6.9-6.3-.9 1 7.8 7.1 7.8-7.1-.9-1z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='m9.1 13.8-.9-1 7.8-7 7.8 7.1-.9 1L16 7.6zm6.9 10-6.9-6.3-.9 1 7.8 7.1 7.8-7.1-.9-1z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.ngx-datatable .sort-btn.datatable-icon-up,.ngx-datatable .sort-btn.datatable-icon-down{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.ngx-datatable .sort-btn.datatable-icon-down{transform:rotate(180deg)}.datatable-button-cell{align-items:stretch;padding:0}.datatable-button-cell .datatable-body-cell-label{display:flex;flex-grow:1;align-items:stretch}.datatable-button-cell .datatable-button{display:flex;align-items:center;padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:calc(100% - 2*0.125rem);height:calc(100% - 2*0.125rem);margin:.125rem;padding:.5rem 1rem;border-radius:0}.datatable-button-cell .datatable-button:focus{outline:0;box-shadow:0 0 0 .125rem rgba(51,51,51,.25)}.datatable-paginated-footer{display:flex;flex:1 0 auto;align-items:center;justify-content:flex-end;padding:.125rem 1rem}.datatable-paginated-footer .datatable-row-count-label{flex:0 0 auto;margin:0 .5rem 0 0}.datatable-paginated-footer .datatable-row-count-input{flex:0 0 7rem;height:calc(2.25rem + 4px);padding-top:0;padding-bottom:0}.datatable-paginated-footer .datatable-row-count-input+.datatable-pagination{padding-left:.5rem;border-left:2px solid #e6e6e6}.datatable-paginated-footer .datatable-pagination{flex:0 0 auto}.datatable-paginated-footer .datatable-pagination .pagination{margin-bottom:0}.datatable-paginated-footer .datatable-loader{margin:auto}.progress-linear{display:block;position:sticky;top:0;width:100%;height:.25rem;margin:0;padding:0}.progress-linear .container{display:block;position:relative;width:100%;height:5px;overflow:hidden;transform:translate(0, 0) scale(1, 1);background-color:#e6e6e6}.progress-linear .container .bar{position:absolute;top:0;bottom:0;left:0;width:100%;height:5px;transition:all .2s linear;animation:query .8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);background-color:#fc0}@keyframes query{0%{transform:translateX(35%) scale(0.3, 1);opacity:1}100%{transform:translateX(-50%) scale(0, 1);opacity:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.ngx-datatable .datatable-header-cell,.ngx-datatable .datatable-body-cell,.ngx-datatable .datatable-footer-cell{margin:0;background-color:Canvas;border:0 none;color:CanvasText}.ngx-datatable .datatable-button:hover,.ngx-datatable .datatable-button:focus-visible{outline:2px solid Highlight;outline-offset:-2px}.ngx-datatable:not(.datatable-spaced-cells) .datatable-row-wrapper .datatable-body-cell{border-top:2px solid CanvasText}.ngx-datatable:not(.datatable-spaced-cells) .datatable-row-wrapper:last-child .datatable-body-cell{border-bottom:2px solid CanvasText}.ngx-datatable.datatable-spaced-cells .datatable-row-wrapper .datatable-body-cell{border-top:2px solid CanvasText;border-left:2px solid CanvasText}.ngx-datatable.datatable-spaced-cells .datatable-row-wrapper .datatable-body-cell:last-child{border-right:2px solid CanvasText}.ngx-datatable.datatable-spaced-cells .datatable-row-wrapper:last-child .datatable-body-cell{border-bottom:2px solid CanvasText}}
+ */.datatable-paginated-footer .datatable-row-count-label,.datatable-paginated-footer .datatable-row-count-input{font-size:.9375rem;font-size:1rem}@media(min-width: 1024px){.datatable-paginated-footer .datatable-row-count-label,.datatable-paginated-footer .datatable-row-count-input{font-size:1.0625rem}}.datatable-header-cell{padding:var(--post-core-dimension-8) var(--post-core-dimension-16);font-weight:var(--post-core-font-weight-700)}.datatable-header[ng-reflect-sorts*=object] .datatable-header-cell:not(.sort-active){color:#666}.datatable-header-cell-template-wrap{display:flex;align-items:center}.datatable-header-cell-wrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.datatable-flush .datatable-header-cell{border-bottom:var(--post-core-dimension-2) solid #e6e6e6}.datatable-body-cell{display:flex !important;align-items:center;margin-bottom:var(--post-core-dimension-2);padding:var(--post-core-dimension-8) var(--post-core-dimension-16);background-color:#faf9f8}.datatable-spaced-cells .datatable-body-cell{margin-right:var(--post-core-dimension-2)}.datatable-inverted .datatable-body-cell{background-color:#fff}.datatable-flush .datatable-body-cell,.datatable-striped-rows .datatable-row-odd .datatable-body-cell{margin:0;background-color:rgba(0,0,0,0)}.datatable-flush .datatable-body-cell{border-bottom:var(--post-core-dimension-2) solid #e6e6e6}.ngx-datatable .sort-btn{flex:0 0 auto;width:var(--post-core-dimension-16);height:var(--post-core-dimension-16);margin-left:var(--post-core-dimension-8)}.ngx-datatable .sort-btn.datatable-icon-sort-unset{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Crect/%3E%3Cpath d='m9.1 13.8-.9-1 7.8-7 7.8 7.1-.9 1L16 7.6zm6.9 10-6.9-6.3-.9 1 7.8 7.1 7.8-7.1-.9-1z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.ngx-datatable .sort-btn.datatable-icon-up,.ngx-datatable .sort-btn.datatable-icon-down{mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m23.6 18.3-.9.9-6.7-6.6-6.6 6.6-.9-.9 7.5-7.6z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color}.ngx-datatable .sort-btn.datatable-icon-down{transform:rotate(180deg)}.datatable-button-cell{align-items:stretch;padding:0}.datatable-button-cell .datatable-body-cell-label{display:flex;flex-grow:1;align-items:stretch}.datatable-button-cell .datatable-button{display:flex;align-items:center;padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;width:calc(100% - 2*0.125rem);height:calc(100% - 2*0.125rem);margin:.125rem;padding:var(--post-core-dimension-8) var(--post-core-dimension-16);border-radius:0}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.datatable-button-cell .datatable-button{background-color:ButtonFace !important}.datatable-button-cell .datatable-button:hover{background-color:Highlight !important}}.datatable-button-cell .datatable-button:focus{outline:0;box-shadow:0 0 0 .125rem rgba(51,51,51,.25)}.datatable-paginated-footer{display:flex;flex:1 0 auto;align-items:center;justify-content:flex-end;padding:.125rem var(--post-core-dimension-16)}.datatable-paginated-footer .datatable-row-count-label{flex:0 0 auto;margin:0 var(--post-core-dimension-8) 0 0}.datatable-paginated-footer .datatable-row-count-input{flex:0 0 7rem;height:calc(1.25rem + var(--post-core-dimension-8)*2 + 4px);padding-top:0;padding-bottom:0}.datatable-paginated-footer .datatable-row-count-input+.datatable-pagination{padding-left:var(--post-core-dimension-8);border-left:var(--post-core-dimension-2) solid #e6e6e6}.datatable-paginated-footer .datatable-pagination{flex:0 0 auto}.datatable-paginated-footer .datatable-pagination .pagination{margin-bottom:0}.datatable-paginated-footer .datatable-loader{margin:auto}.progress-linear{display:block;position:sticky;top:0;width:100%;height:var(--post-core-dimension-4);margin:0;padding:0}.progress-linear .container{display:block;position:relative;width:100%;height:5px;overflow:hidden;transform:translate(0, 0) scale(1, 1);background-color:#e6e6e6}.progress-linear .container .bar{position:absolute;top:0;bottom:0;left:0;width:100%;height:5px;transition:all .2s linear;animation:query .8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);background-color:#fc0}@keyframes query{0%{transform:translateX(35%) scale(0.3, 1);opacity:1}100%{transform:translateX(-50%) scale(0, 1);opacity:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.ngx-datatable .datatable-header-cell,.ngx-datatable .datatable-body-cell,.ngx-datatable .datatable-footer-cell{margin:0;background-color:Canvas;border:0 none;color:CanvasText}.ngx-datatable .datatable-button:hover,.ngx-datatable .datatable-button:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-2)*-1)}.ngx-datatable:not(.datatable-spaced-cells) .datatable-row-wrapper .datatable-body-cell{border-top:var(--post-core-dimension-2) solid CanvasText}.ngx-datatable:not(.datatable-spaced-cells) .datatable-row-wrapper:last-child .datatable-body-cell{border-bottom:var(--post-core-dimension-2) solid CanvasText}.ngx-datatable.datatable-spaced-cells .datatable-row-wrapper .datatable-body-cell{border-top:var(--post-core-dimension-2) solid CanvasText;border-left:var(--post-core-dimension-2) solid CanvasText}.ngx-datatable.datatable-spaced-cells .datatable-row-wrapper .datatable-body-cell:last-child{border-right:var(--post-core-dimension-2) solid CanvasText}.ngx-datatable.datatable-spaced-cells .datatable-row-wrapper:last-child .datatable-body-cell{border-bottom:var(--post-core-dimension-2) solid CanvasText}}

package/components/datatable.scss

@@ -7,12 +7,17 @@
 @use './../variables/components/datatable';
 @use './../variables/components/forms';
 
-@use './../mixins/button' as button-mixins;
+@use './../mixins/button' as button-mx;
 @use './../mixins/icons' as icons-mx;
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
 
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 .datatable-header-cell {
   padding: datatable.$datatable-cell-padding;
   font-weight: datatable.$datatable-header-font-weight;
@@ -65,9 +70,9 @@
 
 .ngx-datatable .sort-btn {
   flex: 0 0 auto;
-  width: spacing.$size-regular;
-  height: spacing.$size-regular;
-  margin-left: spacing.$size-mini;
+  width: tokens.get('utility-gap-16');
+  height: tokens.get('utility-gap-16');
+  margin-left: tokens.get('utility-gap-8');
 
   &.datatable-icon-sort-unset {
     @include icons-mx.icon(2127);
@@ -96,7 +101,7 @@
   .datatable-button {
     display: flex;
     align-items: center;
-    @include button-mixins.reset-button;
+    @include button-mx.reset-button;
     width: datatable.$datatable-button-width;
     height: datatable.$datatable-button-height;
     margin: datatable.$datatable-button-margin;
@@ -120,7 +125,7 @@
   .datatable-row-count-label {
     @extend %font-curve-small;
     flex: 0 0 auto;
-    margin: 0 spacing.$size-mini 0 0;
+    margin: 0 tokens.get('utility-gap-8') 0 0;
   }
 
   .datatable-row-count-input {
@@ -131,7 +136,7 @@
     padding-bottom: 0;
 
     + .datatable-pagination {
-      padding-left: spacing.$size-mini;
+      padding-left: tokens.get('utility-gap-8');
       border-left: datatable.$datatable-footer-separator;
     }
   }
@@ -195,7 +200,7 @@
   }
 }
 
-@include utilities.high-contrast-mode() {
+@include utilities-mx.high-contrast-mode() {
   .ngx-datatable {
     .datatable-header-cell,
     .datatable-body-cell,
@@ -209,8 +214,8 @@
     .datatable-button {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-line);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-2') * -1);
       }
     }
 
@@ -218,12 +223,12 @@
     &:not(.datatable-spaced-cells) {
       .datatable-row-wrapper {
         .datatable-body-cell {
-          border-top: spacing.$size-line solid CanvasText;
+          border-top: tokens.get('utility-gap-2') solid CanvasText;
         }
 
         &:last-child {
           .datatable-body-cell {
-            border-bottom: spacing.$size-line solid CanvasText;
+            border-bottom: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
       }
@@ -233,17 +238,17 @@
     &.datatable-spaced-cells {
       .datatable-row-wrapper {
         .datatable-body-cell {
-          border-top: spacing.$size-line solid CanvasText;
-          border-left: spacing.$size-line solid CanvasText;
+          border-top: tokens.get('utility-gap-2') solid CanvasText;
+          border-left: tokens.get('utility-gap-2') solid CanvasText;
 
           &:last-child {
-            border-right: spacing.$size-line solid CanvasText;
+            border-right: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
 
         &:last-child {
           .datatable-body-cell {
-            border-bottom: spacing.$size-line solid CanvasText;
+            border-bottom: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
       }