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

package/components/subnavigation.scss

@@ -1,14 +1,17 @@
-@forward './../variables/options';
-
 @use './../themes/bootstrap/core' as *;
 
-@use './../mixins/utilities';
-@use './../functions/utilities' as utility-functions;
+@use './../mixins/utilities' as utilities-mx;
+@use './../functions/utilities' as utilities-fx;
 @use './../variables/components/subnavigation';
 @use './../variables/animation';
 @use './../variables/spacing';
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 $module-name: 'subnavigation';
 
 .#{$module-name} {
@@ -16,11 +19,11 @@ $module-name: 'subnavigation';
   background-color: subnavigation.$subnavigation-background-color;
 
   &::after {
-    @include utilities.full-width-underscore(
+    @include utilities-mx.full-width-underscore(
       subnavigation.$subnavigation-border-bottom-color,
       subnavigation.$subnavigation-border-bottom-width
     );
-    z-index: utility-functions.z-index(subnavigation, underscore-root);
+    z-index: utilities-fx.z-index(subnavigation, underscore-root);
   }
 
   &-alternate {
@@ -69,11 +72,11 @@ $module-name: 'subnavigation';
       padding: subnavigation.$subnavigation-link-padding-lg;
     }
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-micro);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-4') * -1);
       }
     }
 
@@ -90,11 +93,11 @@ $module-name: 'subnavigation';
     }
 
     &:not(.active)::after {
-      @include utilities.full-width-underscore(
+      @include utilities-mx.full-width-underscore(
         #{subnavigation.$subnavigation-link-underscore-color-hover},
         #{subnavigation.$subnavigation-link-underscore-height}
       );
-      z-index: utility-functions.z-index(subnavigation, underscore-link);
+      z-index: utilities-fx.z-index(subnavigation, underscore-link);
       right: animation.$transition-distance-medium;
       left: animation.$transition-distance-medium;
       opacity: 0;
@@ -116,16 +119,16 @@ $module-name: 'subnavigation';
       font-weight: $font-weight-bold;
 
       &::after {
-        @include utilities.full-width-underscore(
+        @include utilities-mx.full-width-underscore(
           #{subnavigation.$subnavigation-link-underscore-color-active},
           #{subnavigation.$subnavigation-link-underscore-height}
         );
-        z-index: utility-functions.z-index(subnavigation, underscore-link);
+        z-index: utilities-fx.z-index(subnavigation, underscore-link);
       }
     }
   }
 
-  @include utilities.high-contrast-mode() {
+  @include utilities-mx.high-contrast-mode() {
     &::after {
       background-color: CanvasText;
     }

package/components/switch.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}}.form-switch{display:flex}.form-switch .form-check-input{appearance:none;cursor:pointer;position:relative;display:flex;align-items:center;height:var(--post-core-dimension-24);width:var(--post-core-dimension-48);margin-block:var(--post-device-spacing-padding-block-18);border:var(--post-device-border-width-alternative1) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-primary-enabled-bg2);padding:var(--post-device-spacing-padding-block-7) 0 var(--post-device-spacing-padding-block-7) var(--post-core-dimension-4);transition:background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),border-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-switch .form-check-input::before,.form-switch .form-check-input::after{position:absolute;display:block;cursor:pointer;content:"";width:var(--post-core-dimension-18);height:var(--post-core-dimension-18);background-color:var(--post-scheme-color-interactive-primary-enabled-fg3);border-radius:var(--post-device-border-radius-round);transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.form-switch .form-check-input::before{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>");background-color:rgba(0,0,0,0);z-index:1;mask-size:var(--post-core-dimension-18);mask-repeat:no-repeat;mask-position:center}.form-switch .form-check-input::after{border:var(--post-device-border-width-alternative1) var(--post-core-border-style-solid) var(--post-scheme-color-interactive-primary-enabled-stroke3)}.form-switch .form-check-input:checked{background-color:var(--post-scheme-color-interactive-primary-selected-bg2);border-color:var(--post-scheme-color-interactive-primary-selected-stroke4)}.form-switch .form-check-input:checked::before,.form-switch .form-check-input:checked::after{transform:translateX(calc(var(--post-core-dimension-48) - var(--post-core-dimension-18) * 1.5))}.form-switch .form-check-input:checked::before{background-color:var(--post-scheme-color-interactive-primary-selected-bg2)}.form-switch .form-check-input:checked::after{mask-image:none;background-color:var(--post-scheme-color-interactive-primary-selected-fg3);border-color:var(--post-scheme-color-interactive-primary-selected-stroke3)}.form-switch .form-check-input:checked+.form-check-label{color:var(--post-scheme-color-interactive-primary-selected-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-switch .form-check-input{transition:none;border:var(--post-device-border-width-alternative1) var(--post-core-border-style-solid) CanvasText}.form-switch .form-check-input:checked{background-color:SelectedItem !important}.form-switch .form-check-input::after{max-width:var(--post-core-dimension-18);border-color:Canvas;background-color:CanvasText}.form-switch .form-check-input:checked::after,.form-switch .form-check-input:checked::before{transform:translateX(calc(var(--post-core-dimension-48) - var(--post-core-dimension-18) - var(--post-core-dimension-4) * 2 - var(--post-device-border-width-alternative1) * 2))}}.form-switch .form-check-input[disabled]{background-color:var(--post-scheme-color-interactive-primary-disabled-bg5);border:var(--post-device-border-width-alternative1) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-switch .form-check-input[disabled]{border:var(--post-device-border-width-alternative1) var(--post-core-border-style-dash) GrayText}}.form-switch .form-check-input[disabled]+.form-check-label{color:var(--post-scheme-color-interactive-primary-disabled-fg1)}.form-switch .form-check-input[disabled]::after{background-color:var(--post-scheme-color-interactive-primary-disabled-fg3);border:var(--post-device-border-width-alternative1) var(--post-core-border-style-dash) var(--post-scheme-color-interactive-primary-disabled-stroke2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .form-switch .form-check-input[disabled]::after{border:var(--post-device-border-width-alternative1) var(--post-core-border-style-dash) rgba(255,255,255,.8)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-switch .form-check-input[disabled]::after{border:var(--post-device-border-width-alternative1) var(--post-core-border-style-dash) GrayText}}.form-switch .form-check-input[disabled]:checked::before{background-color:var(--post-scheme-color-interactive-primary-disabled-fg1);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>");mask-repeat:no-repeat;mask-position:center}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-switch .form-check-input[disabled]::after{border-color:Field}.form-switch .form-check-input[disabled]:checked{background-color:GrayText !important}}.form-switch .form-check-input.is-invalid{border-color:rgba(0,0,0,0)}.form-switch .form-check-input.is-invalid+label{color:var(--post-scheme-color-interactive-primary-enabled-fg1)}.form-switch:has(input:not([disabled]):hover) input{background-color:var(--post-scheme-color-interactive-primary-hover-bg2);border-color:var(--post-scheme-color-interactive-primary-hover-stroke)}.form-switch:has(input:not([disabled]):hover) input::after{background-color:var(--post-scheme-color-interactive-primary-hover-fg3);border-color:var(--post-scheme-color-interactive-primary-hover-stroke3)}.form-switch:has(input:not([disabled]):hover) input:checked::before{background-color:var(--post-scheme-color-interactive-primary-hover-fg1)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.form-switch:has(input:not([disabled]):hover) input{border-color:Highlight}.form-switch:has(input:not([disabled]):hover) input::after{background-color:CanvasText}}.form-switch .form-check-label{color:var(--post-scheme-color-interactive-primary-enabled-fg1);padding-block:var(--post-device-spacing-padding-block-9)}.form-switch .form-check-label.order-first{flex:0 auto;padding-inline-end:var(--post-device-spacing-gap-inline-3)}.form-switch .form-check-label:not(.order-first){padding-inline-start:var(--post-device-spacing-gap-inline-3)}

package/components/switch.scss

@@ -0,0 +1,212 @@
+@use 'form-check';
+@use '../variables/color';
+@use '../variables/commons';
+@use '../variables/type';
+@use '../variables/spacing';
+@use '../variables/animation';
+@use '../mixins/color' as color-mx;
+@use '../mixins/icons' as icons-mx;
+@use '../mixins/utilities' as utility-mx;
+@use '../tokens/components' as components;
+@use '../functions/tokens' as tokens;
+
+tokens.$default-map: components.$post-switch;
+
+$switch-handle-icon: 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-switch {
+  display: flex;
+
+  .form-check-input {
+    appearance: none;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: tokens.get('switch-element-height');
+    width: tokens.get('switch-element-width');
+    margin-block: tokens.get('switch-icon-padding-container');
+    border: tokens.get('switch-border-width') tokens.get('switch-border-style-default')
+      tokens.get('switch-element-enabled-stroke');
+    border-radius: tokens.get('switch-border-radius-round');
+    background-color: tokens.get('switch-element-enabled-bg');
+    padding: tokens.get('switch-padding-block-text') 0 tokens.get('switch-padding-block-text')
+      tokens.get('switch-padding-inline-handle');
+    transition:
+      background-color animation.$transition-base-timing,
+      border-color animation.$transition-base-timing;
+
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      cursor: pointer;
+      content: '';
+      width: tokens.get('switch-element-handle');
+      height: tokens.get('switch-element-handle');
+      background-color: tokens.get('switch-handle-enabled');
+      border-radius: tokens.get('switch-border-radius-round');
+      transition:
+        transform animation.$transition-base-timing,
+        background-color animation.$transition-base-timing;
+    }
+
+    &::before {
+      mask-image: $switch-handle-icon;
+      background-color: transparent;
+      z-index: 1;
+      mask-size: tokens.get('switch-element-handle');
+      mask-repeat: no-repeat;
+      mask-position: center;
+    }
+
+    &::after {
+      border: tokens.get('switch-border-width') tokens.get('switch-border-style-default')
+        tokens.get('switch-handle-enabled-stroke');
+    }
+
+    &:checked {
+      background-color: tokens.get('switch-element-selected-bg');
+      border-color: tokens.get('switch-element-selected-stroke');
+
+      &::before,
+      &::after {
+        transform: translateX(
+          calc(tokens.get('switch-element-width') - tokens.get('switch-element-handle') * 1.5)
+        );
+      }
+
+      &::before {
+        background-color: tokens.get('switch-icon-success');
+      }
+
+      &::after {
+        @include icons-mx.remove-icon;
+        background-color: tokens.get('switch-handle-selected');
+        border-color: tokens.get('switch-handle-selected-stroke');
+      }
+
+      + .form-check-label {
+        color: tokens.get('switch-text-selected-fg');
+      }
+    }
+
+    @include utility-mx.high-contrast-mode {
+      transition: none;
+      border: tokens.get('switch-border-width') tokens.get('switch-border-style-default') CanvasText;
+
+      &:checked {
+        background-color: SelectedItem !important;
+      }
+
+      &::after {
+        max-width: tokens.get('switch-element-handle');
+        border-color: Canvas;
+        background-color: CanvasText;
+      }
+
+      &:checked::after,
+      &:checked::before {
+        transform: translateX(
+          calc(
+            tokens.get('switch-element-width') - tokens.get('switch-element-handle') - tokens.get(
+                'switch-padding-inline-handle'
+              ) * 2 - tokens.get('switch-border-width') * 2
+          )
+        );
+      }
+    }
+
+    &[disabled] {
+      background-color: tokens.get('switch-element-disabled-bg');
+      border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+        tokens.get('switch-element-disabled-stroke');
+
+      @include utility-mx.high-contrast-mode {
+        border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+          GrayText;
+      }
+
+      + .form-check-label {
+        color: tokens.get('switch-text-disabled-fg');
+      }
+
+      &::after {
+        background-color: tokens.get('switch-handle-disabled');
+        border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+          tokens.get('switch-handle-disabled-stroke');
+
+        @include color-mx.on-dark-background {
+          border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+            color.$white-alpha-80;
+        }
+
+        @include utility-mx.high-contrast-mode {
+          border: tokens.get('switch-border-width') tokens.get('switch-border-style-disabled')
+            GrayText;
+        }
+      }
+
+      &:checked::before {
+        background-color: tokens.get('switch-icon-disabled');
+        mask-image: $switch-handle-icon;
+        mask-repeat: no-repeat;
+        mask-position: center;
+      }
+
+      @include utility-mx.high-contrast-mode {
+        &::after {
+          border-color: Field;
+        }
+
+        &:checked {
+          background-color: GrayText !important;
+        }
+      }
+    }
+
+    &.is-invalid {
+      border-color: transparent;
+
+      + label {
+        color: tokens.get('switch-text-enabled-fg');
+      }
+    }
+  }
+
+  &:has(input:not([disabled]):hover) input {
+    background-color: tokens.get('switch-element-hover-bg');
+    border-color: tokens.get('switch-element-hover-stroke');
+
+    &::after {
+      background-color: tokens.get('switch-handle-hover');
+      border-color: tokens.get('switch-handle-hover-stroke');
+    }
+
+    &:checked::before {
+      background-color: tokens.get('switch-icon-hover');
+    }
+
+    @include utility-mx.high-contrast-mode {
+      border-color: Highlight;
+
+      &::after {
+        background-color: CanvasText;
+      }
+    }
+  }
+
+  .form-check-label {
+    color: tokens.get('switch-text-enabled-fg');
+    padding-block: tokens.get('switch-padding-block-container-text');
+
+    &.order-first {
+      flex: 0 auto;
+      padding-inline-end: tokens.get('switch-gap-inline-text');
+    }
+
+    &:not(.order-first) {
+      padding-inline-start: tokens.get('switch-gap-inline-text');
+    }
+  }
+}

package/components/tables.css

@@ -1 +1 @@
-.table{--bs-table-color-type: initial;--bs-table-bg-type: initial;--bs-table-color-state: initial;--bs-table-bg-state: initial;--bs-table-color: var(--post-contrast-color);--bs-table-bg: transparent;--bs-table-border-color: hsl(0, 0%, 90%);--bs-table-accent-bg: transparent;--bs-table-striped-color: var(--post-contrast-color);--bs-table-striped-bg: #faf9f8;--bs-table-active-color: var(--post-contrast-color);--bs-table-active-bg: #fc0;--bs-table-hover-color: var(--post-contrast-color);--bs-table-hover-bg: hsl(0, 0%, 90%);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.75rem .5rem;color:var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(1px*2) solid #e6e6e6}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.5rem .25rem}.table-bordered>:not(caption)>*{border-width:1px 0}.table-bordered>:not(caption)>*>*{border-width:0 1px}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type: var(--bs-table-striped-color);--bs-table-bg-type: var(--bs-table-striped-bg)}.table-striped-columns>:not(caption)>tr>:nth-child(even){--bs-table-color-type: var(--bs-table-striped-color);--bs-table-bg-type: var(--bs-table-striped-bg)}.table-active{--bs-table-color-state: var(--bs-table-active-color);--bs-table-bg-state: var(--bs-table-active-bg)}.table-hover>tbody>tr:hover>*{--bs-table-color-state: var(--bs-table-hover-color);--bs-table-bg-state: var(--bs-table-hover-bg)}.table-primary{--bs-table-color: #000;--bs-table-bg: #d6d6d6;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-secondary{--bs-table-color: #000;--bs-table-bg: #e0e0e0;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-success{--bs-table-color: #000;--bs-table-bg: #d5e7d2;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-info{--bs-table-color: #000;--bs-table-bg: #f5fafc;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-warning{--bs-table-color: #000;--bs-table-bg: #fdeccc;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-danger{--bs-table-color: #000;--bs-table-bg: #f8d7da;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-light{--bs-table-color: #000;--bs-table-bg: #faf9f8;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-dark{--bs-table-color: #fff;--bs-table-bg: hsl(0, 0%, 20%);--bs-table-border-color: white;--bs-table-striped-bg: white;--bs-table-striped-color: #000;--bs-table-active-bg: white;--bs-table-active-color: #000;--bs-table-hover-bg: white;--bs-table-hover-color: #000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width: 399.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 599.98px){.table-responsive-rg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 779.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 1023.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 1279.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 1439.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.table>:not(:first-child){border-width:0}.table-mono>thead,.table-mono>tbody,.table-mono>tfoot,.table-mono>:is(thead,tbody,tfoot)>tr,.table-mono>:is(thead,tbody,tfoot)>tr>:is(td,th){border-color:#fff;border-width:2px}.table-mono.table-striped:not(.table-hover)>tbody>tr>:is(th,td),.table-mono.table-striped.table-hover>tbody>tr:not(:hover)>:is(th,td){box-shadow:none}.table-mono.table-hover:not(.table-bordered)>tbody>tr>:is(td,th){border:0}.table-mono:not(.table-bordered)>:is(thead,tbody,tfoot)>tr>:is(td,th){border:0}.table-mono.table-borderless>thead,.table-mono.table-borderless>tbody,.table-mono.table-borderless>tfoot,.table-mono.table-borderless>:is(thead,tbody,tfoot)>tr,.table-mono.table-borderless>:is(thead,tbody,tfoot)>tr>:is(td,th){border:0}.table-mono>tbody>tr{background-color:#f4f3f1}
+.table{--bs-table-color-type: initial;--bs-table-bg-type: initial;--bs-table-color-state: initial;--bs-table-bg-state: initial;--bs-table-color: #000;--bs-table-bg: transparent;--bs-table-border-color: hsl(0, 0%, 90%);--bs-table-accent-bg: transparent;--bs-table-striped-color: #000;--bs-table-striped-bg: #faf9f8;--bs-table-active-color: #000;--bs-table-active-bg: #fc0;--bs-table-hover-color: #000;--bs-table-hover-bg: hsl(0, 0%, 90%);width:100%;margin-bottom:1rem;vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:var(--post-core-dimension-12) var(--post-core-dimension-4);color:var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(1px*2) solid #e6e6e6}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:var(--post-core-dimension-8) var(--post-core-dimension-4)}.table-bordered>:not(caption)>*{border-width:1px 0}.table-bordered>:not(caption)>*>*{border-width:0 1px}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child){border-top-width:0}.table-striped>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type: var(--bs-table-striped-color);--bs-table-bg-type: var(--bs-table-striped-bg)}.table-striped-columns>:not(caption)>tr>:nth-child(even){--bs-table-color-type: var(--bs-table-striped-color);--bs-table-bg-type: var(--bs-table-striped-bg)}.table-active{--bs-table-color-state: var(--bs-table-active-color);--bs-table-bg-state: var(--bs-table-active-bg)}.table-hover>tbody>tr:hover>*{--bs-table-color-state: var(--bs-table-hover-color);--bs-table-bg-state: var(--bs-table-hover-bg)}.table-primary{--bs-table-color: #000;--bs-table-bg: #d6d6d6;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-secondary{--bs-table-color: #000;--bs-table-bg: #e0e0e0;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-success{--bs-table-color: #000;--bs-table-bg: #d5e7d2;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-info{--bs-table-color: #000;--bs-table-bg: #f5fafc;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-warning{--bs-table-color: #000;--bs-table-bg: #fdeccc;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-danger{--bs-table-color: #000;--bs-table-bg: #f8d7da;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-light{--bs-table-color: #000;--bs-table-bg: #faf9f8;--bs-table-border-color: black;--bs-table-striped-bg: black;--bs-table-striped-color: #fff;--bs-table-active-bg: black;--bs-table-active-color: #fff;--bs-table-hover-bg: black;--bs-table-hover-color: #fff;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-dark{--bs-table-color: #fff;--bs-table-bg: hsl(0, 0%, 20%);--bs-table-border-color: white;--bs-table-striped-bg: white;--bs-table-striped-color: #000;--bs-table-active-bg: white;--bs-table-active-color: #000;--bs-table-hover-bg: white;--bs-table-hover-color: #000;color:var(--bs-table-color);border-color:var(--bs-table-border-color)}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width: 599.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 779.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 1023.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 1279.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.table>:not(:first-child){border-width:0}.table-mono>thead,.table-mono>tbody,.table-mono>tfoot,.table-mono>:is(thead,tbody,tfoot)>tr,.table-mono>:is(thead,tbody,tfoot)>tr>:is(td,th){border-color:#fff;border-width:2px}.table-mono.table-striped:not(.table-hover)>tbody>tr>:is(th,td),.table-mono.table-striped.table-hover>tbody>tr:not(:hover)>:is(th,td){box-shadow:none}.table-mono.table-hover:not(.table-bordered)>tbody>tr>:is(td,th){border:0}.table-mono:not(.table-bordered)>:is(thead,tbody,tfoot)>tr>:is(td,th){border:0}.table-mono.table-borderless>thead,.table-mono.table-borderless>tbody,.table-mono.table-borderless>tfoot,.table-mono.table-borderless>:is(thead,tbody,tfoot)>tr,.table-mono.table-borderless>:is(thead,tbody,tfoot)>tr>:is(td,th){border:0}.table-mono>tbody>tr{background-color:#f4f3f1}

package/components/tables.scss

@@ -1,4 +1,3 @@
-@forward './../variables/options';
 @use './../variables/color';
 @use './../variables/commons';
 

package/components/tabs/_tab-title.scss

@@ -1,11 +1,14 @@
-@forward './../../variables/options';
-
 @use './../../mixins/color' as color-mx;
 @use './../../mixins/utilities' as utilities-mx;
 @use './../../variables/color';
 @use './../../variables/spacing';
 @use './../../variables/components/nav';
 
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 .tab-title[role='tab'] {
   display: inline-block;
   cursor: pointer;
@@ -17,27 +20,27 @@
   border-left: 1px solid transparent;
   outline-color: currentColor;
   opacity: 0.7;
-  color: var(--post-contrast-color);
+  color: color.$black;
   text-decoration: none;
   background-color: transparent;
 
   &:focus {
     background-color: unset;
-    color: var(--post-contrast-color);
+    color: color.$black;
   }
 
   &:hover {
     opacity: 1;
-    background-color: rgba(var(--post-contrast-color-rgb), 0.6);
-    color: var(--post-contrast-color-inverted);
+    background-color: color.$black-alpha-60;
+    color: color.$white;
   }
 
   // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
   &:focus-visible {
     outline: transparent;
     opacity: 1;
-    background-color: rgba(var(--post-contrast-color-rgb), 0.6);
-    color: var(--post-contrast-color-inverted);
+    background-color: color.$black-alpha-60;
+    color: color.$white;
     box-shadow: none;
 
     &::after {
@@ -57,8 +60,8 @@
     border-right-color: nav.$nav-tabs-border-color;
     border-left-color: nav.$nav-tabs-border-color;
     opacity: 1;
-    background-color: var(--post-contrast-color-inverted);
-    color: var(--post-contrast-color);
+    background-color: color.$white;
+    color: color.$black;
     font-weight: 700;
 
     // Create a line that does not suffer from border corner mitering
@@ -69,7 +72,7 @@
       top: 0;
       right: -1px;
       left: -1px;
-      height: spacing.$size-micro;
+      height: tokens.get('utility-gap-4');
       background-color: nav.$nav-tabs-link-active-border-color;
     }
   }
@@ -95,8 +98,8 @@
     &:focus,
     &:focus-within,
     &:focus-visible {
-      outline: spacing.$size-line solid Highlight;
-      outline-offset: -(spacing.$size-micro);
+      outline: tokens.get('utility-gap-2') solid Highlight;
+      outline-offset: calc(tokens.get('utility-gap-4') * -1);
     }
 
     &.active {
@@ -110,45 +113,3 @@
     }
   }
 }
-
-// Careful, this generates a lot of code
-@each $key, $color in color.$background-colors {
-  .bg-#{$key} {
-    .tab-title {
-      background-color: $color;
-
-      &.active {
-        background-color: $color;
-      }
-    }
-
-    .nav-item {
-      background-color: $color;
-    }
-  }
-}
-
-[class*='bg-'] .tab-title.active {
-  &:focus {
-    &::after {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-
-  // write supports for selectors this way: https://stackoverflow.com/a/62666132
-  // need to include * otherwise it throws build error
-  @supports #{'\selector(*:focus-visible)'} {
-    &:focus {
-      &::after {
-        background-color: unset;
-      }
-    }
-
-    // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
-    &:focus-visible {
-      &::after {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-    }
-  }
-}

package/components/tabs/_tabs-wrapper.scss

@@ -1,5 +1,3 @@
-@forward './../../variables/options';
-
 @use './../../mixins/utilities' as utilities-mx;
 @use './../../variables/color';
 @use './../../variables/spacing';
@@ -10,7 +8,7 @@
   padding-top: spacing.$spacer;
   border: 0;
   background-color: rgba(
-    var(--post-contrast-color-rgb),
+    color.$black,
     0.02
   ); // 0.02 gets as close as possible to color.$light on white background
 
@@ -38,7 +36,6 @@
 }
 
 .tabs {
-  @include utilities-mx.reset-list;
   display: flex;
   flex-wrap: nowrap;
   overflow-x: auto;
@@ -47,6 +44,8 @@
   overscroll-behavior-x: contain;
   white-space: nowrap;
 
+  @include utilities-mx.reset-list;
+
   // Scrolling fix to make the tabs scroll a little more so the right most tab is not
   // flush with the window border
   &::after {
@@ -60,12 +59,3 @@
 .tab-content {
   padding-top: spacing.$spacer;
 }
-
-// Careful, this generates a lot of code
-@each $key, $color in color.$background-colors {
-  .bg-#{$key} {
-    .tabs-wrapper {
-      background-color: $color;
-    }
-  }
-}

package/components/tabs/index.css

@@ -1 +1 @@
-.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(var(--post-contrast-color-rgb), 0.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-white .tabs-wrapper{background-color:#fff}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-black .tabs-wrapper{background-color:#000}.bg-primary .tabs-wrapper{background-color:#333}.bg-secondary .tabs-wrapper{background-color:#666}.bg-success .tabs-wrapper{background-color:#2c871d}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-error .tabs-wrapper{background-color:#a51728}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}.bg-error-background .tabs-wrapper{background-color:#ffdade}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}.tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}: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]) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}: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]) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}
+.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}

package/components/tabs/index.scss

@@ -1,4 +1,2 @@
-@forward '../../variables/options';
-
 @use 'tabs-wrapper';
 @use 'tab-title';

package/components/tag.css

@@ -1 +1 @@
-.tag,.tag:where(:has(:not(pre))){--post-tag-bg: hsl(0, 0%, 90%);--post-tag-fg: #000;display:inline-flex;align-items:center;gap:.25rem;padding:0 .5rem;max-width:100%;background-color:var(--post-tag-bg);border:1px solid rgba(0,0,0,0);border-radius:.25rem;font-size:1rem;line-height:1.875rem;white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:1.5rem}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg: #fff;--post-tag-fg: #000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg: #fc0;--post-tag-fg: #000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg: #2c871d;--post-tag-fg: #fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg: #f49e00;--post-tag-fg: #000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg: #a51728;--post-tag-fg: #fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg: #cce4ee;--post-tag-fg: #000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:var(--post-contrast-color)}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}
+.tag,.tag:where(:has(:not(pre))){--post-tag-bg: hsl(0, 0%, 90%);--post-tag-fg: #000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg: #fff;--post-tag-fg: #000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg: #fc0;--post-tag-fg: #000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg: #2c871d;--post-tag-fg: #fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg: #f49e00;--post-tag-fg: #000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg: #a51728;--post-tag-fg: #fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg: #cce4ee;--post-tag-fg: #000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}

package/components/tag.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@forward './../variables/options';
 @use './../variables/color';
 @use './../variables/components/tag';
 @use './../functions/contrast' as contrast-fn;
@@ -63,7 +62,7 @@
   }
 
   &.tag-white {
-    border-color: var(--post-contrast-color);
+    border-color: color.$black;
   }
 
   // Can be removed completely as soon as Firefox ESR v128 is released and rolled out

package/components/teaser.css

@@ -0,0 +1 @@
+.teaser-card{height:100%;position:relative;display:flex;flex-direction:column}.teaser-card img{height:var(--post-device-sizing-content-height-1);min-height:var(--post-device-sizing-content-height-1);width:100%;object-fit:cover;border-top-left-radius:var(--post-device-border-radius-2);border-top-right-radius:var(--post-device-border-radius-2)}.teaser-card h1,.teaser-card h2,.teaser-card h3,.teaser-card h4,.teaser-card h5,.teaser-card h6,.teaser-card p{margin:0;word-break:break-word}.teaser-card h1,.teaser-card h2,.teaser-card h3,.teaser-card h4,.teaser-card h5,.teaser-card h6{font-size:var(--post-device-font-size-5)}.teaser-card>div{display:flex;flex-direction:column;align-items:flex-start;padding:var(--post-device-spacing-padding-5);gap:var(--post-device-spacing-gap-7);height:100%;justify-content:space-between}.teaser-card>div>div{display:flex;flex-direction:column;gap:var(--post-core-dimension-6)}.teaser-card.teaser-card-lg img{height:var(--post-device-sizing-content-height-2);min-height:var(--post-device-sizing-content-height-2)}.teaser-card.teaser-card-lg h1,.teaser-card.teaser-card-lg h2,.teaser-card.teaser-card-lg h3,.teaser-card.teaser-card-lg h4,.teaser-card.teaser-card-lg h5,.teaser-card.teaser-card-lg h6{font-size:var(--post-device-font-size-4)}.teaser-card.teaser-card-lg>div{padding:var(--post-device-spacing-padding-20);gap:var(--post-core-dimension-24)}.teaser-card.teaser-card-lg>div>div{gap:var(--post-device-spacing-gap-block-3)}