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

package/themes/bootstrap/_overrides-mixins.scss

@@ -1,33 +0,0 @@
-@use './../../variables/components/tooltips';
-
-// Keep this mixin override: it is necessary to clear Bootstrap styles for .is-(in)valid and .(in)valid-feedback
-@mixin form-validation-state(
-  $state,
-  $color,
-  $icon,
-  $tooltip-color: color-contrast($color),
-  $tooltip-bg-color: $color,
-  $focus-box-shadow,
-  $border-color
-) {
-  // DEPRECATED
-  .#{$state}-tooltip {
-    position: absolute;
-    top: 100%;
-    z-index: 5;
-    display: none;
-    max-width: 100%; // Contain to parent when possible
-    padding: tooltips.$tooltip-padding-y tooltips.$tooltip-padding-x;
-    margin-top: 0.1rem;
-    @include font-size(tooltips.$tooltip-font-size);
-    color: $tooltip-color;
-    background-color: $tooltip-bg-color;
-    @include border-radius(tooltips.$tooltip-border-radius);
-  }
-
-  @include form-validation-state-selector($state) {
-    ~ .#{$state}-tooltip {
-      display: block;
-    }
-  }
-}

package/themes/bootstrap/forms/_floating-labels.scss

@@ -1,2 +0,0 @@
-@use './../core' as *;
-@import 'bootstrap/scss/forms/floating-labels';

package/themes/bootstrap/forms/_form-control.scss

@@ -1,2 +0,0 @@
-@use './../core' as *;
-@import 'bootstrap/scss/forms/form-control';

package/themes/bootstrap/forms/_form-select.scss

@@ -1,2 +0,0 @@
-@use './../core' as *;
-@import 'bootstrap/scss/forms/form-select';

package/themes/bootstrap/forms/_form-text.scss

@@ -1,2 +0,0 @@
-@use './../core' as *;
-@import 'bootstrap/scss/forms/form-text';

package/tokens/_modes.scss

@@ -1,11 +0,0 @@
-@use './core';
-@use './../placeholders/modes';
-
-:root,
-[data-color-mode='light'] {
-  @extend %color-mode-light;
-}
-
-[data-color-mode='dark'] {
-  @extend %color-mode-dark;
-}

package/tokens/temp/_mode.scss

@@ -1,299 +0,0 @@
-// Do not edit manually!
-// This file was generated on:
-// Mon, 14 Oct 2024 18:07:38 GMT by the @swisspost/design-system-tokens package build command
-
-$post-light: (
-  post-mode-color-signal-success-dark: var(--post-core-color-notification-green),
-  post-mode-color-signal-success-light: var(--post-core-color-notification-green-light),
-  post-mode-color-signal-error-dark: var(--post-core-color-notification-red),
-  post-mode-color-signal-error-light: var(--post-core-color-notification-red-light),
-  post-mode-color-signal-warning-dark: var(--post-core-color-notification-orange),
-  post-mode-color-signal-warning-light: var(--post-core-color-notification-orange-light),
-  post-mode-color-signal-information-dark: var(--post-core-color-notification-blue),
-  post-mode-color-signal-information-light: var(--post-core-color-notification-blue-light),
-  post-mode-color-interactive-button-primary-enabled-fg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-enabled-bg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-primary-enabled-stroke: var(--post-mode-color-interactive-button-primary-enabled-bg),
-  post-mode-color-interactive-button-primary-enabled-fg-inverted: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-primary-enabled-bg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-enabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-hover-fg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-hover-bg: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-primary-hover-stroke: var(--post-mode-color-interactive-button-primary-hover-bg),
-  post-mode-color-interactive-button-primary-hover-fg-inverted: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-primary-hover-bg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-hover-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-disabled-fg: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-primary-disabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-disabled-stroke: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-primary-disabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-disabled-bg-inverted: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-primary-disabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-secondary-enabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-enabled-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-secondary-enabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-enabled-bg-inverted: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-secondary-enabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-hover-fg: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-secondary-hover-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-hover-stroke: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-secondary-hover-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-hover-bg-inverted: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-secondary-hover-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-disabled-fg: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-secondary-disabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-disabled-stroke: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-secondary-disabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-disabled-bg-inverted: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-secondary-disabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-tertiary-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-tertiary-enabled-bg: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-enabled-stroke: var(--post-mode-color-interactive-button-tertiary-enabled-bg),
-  post-mode-color-interactive-button-tertiary-enabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-tertiary-enabled-bg-inverted: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-enabled-stroke-inverted: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-hover-fg: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-tertiary-hover-bg: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-hover-stroke: var(--post-mode-color-interactive-button-tertiary-hover-bg),
-  post-mode-color-interactive-button-tertiary-hover-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-tertiary-hover-bg-inverted: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-tertiary-hover-stroke-inverted: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-disabled-fg: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-tertiary-disabled-bg: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-disabled-stroke: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-tertiary-disabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-tertiary-disabled-bg-inverted: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-tertiary-disabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-segmented-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-segmented-enabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-segmented-enabled-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-segmented-hover-fg: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-segmented-hover-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-segmented-hover-stroke: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-segmented-selected-fg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-segmented-selected-bg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-segmented-selected-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-focus-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-focus-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-text_input-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-text_input-enabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-text_input-enabled-stroke: var(--post-mode-color-interactive-text_input-enabled-fg),
-  post-mode-color-interactive-text_input-hover-fg-label: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-text_input-hover-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-text_input-hover-fg-value: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-text_input-hover-stroke: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-primary-enabled-bg1: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-enabled-fg1: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-enabled-fg2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-enabled-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-enabled-fg3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-enabled-bg2: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-enabled-stroke3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-hover-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-hover-fg1: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-primary-hover-fg2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-hover-stroke: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-primary-hover-fg3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-hover-bg2: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-primary-hover-stroke3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-disabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-disabled-fg1: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-fg2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-stroke: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-bg2: var(--post-core-color-sandgrey-012),
-  post-mode-color-interactive-primary-disabled-fg3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-disabled-bg3: var(--post-core-color-sandgrey-012),
-  post-mode-color-interactive-primary-disabled-stroke2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-bg4: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-stroke3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-selected-bg1: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-selected-fg1: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-selected-fg2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-selected-stroke1: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-selected-fg3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-selected-bg2: var(--post-core-color-notification-green),
-  post-mode-color-interactive-primary-selected-stroke4: var(--post-core-color-notification-green),
-  post-mode-color-interactive-primary-selected-stroke2: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-selected-stroke3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-notification-info-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-notification-info-bg: var(--post-mode-color-signal-information-light),
-  post-mode-color-interactive-notification-info-icon: var(--post-mode-color-signal-information-dark),
-  post-mode-color-interactive-notification-info-stroke: var(--post-mode-color-signal-information-dark),
-  post-mode-color-interactive-notification-success-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-notification-success-bg: var(--post-mode-color-signal-success-light),
-  post-mode-color-interactive-notification-success-icon: var(--post-mode-color-signal-success-dark),
-  post-mode-color-interactive-notification-success-stroke: var(--post-mode-color-signal-success-dark),
-  post-mode-color-interactive-notification-warning-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-notification-warning-bg: var(--post-mode-color-signal-warning-light),
-  post-mode-color-interactive-notification-warning-icon: var(--post-mode-color-signal-warning-dark),
-  post-mode-color-interactive-notification-warning-stroke: var(--post-mode-color-signal-warning-dark),
-  post-mode-color-interactive-notification-error-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-notification-error-bg: var(--post-mode-color-signal-error-light),
-  post-mode-color-interactive-notification-error-icon: var(--post-mode-color-signal-error-dark),
-  post-mode-color-interactive-notification-error-stroke: var(--post-mode-color-signal-error-dark),
-  post-mode-color-surface-default-bg: var(--post-core-color-sandgrey-002),
-  post-mode-color-surface-default-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-accent1-bg: var(--post-core-color-brand-white),
-  post-mode-color-surface-accent1-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-accent2-bg: var(--post-core-color-sandgrey-006),
-  post-mode-color-surface-accent2-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-accent3-bg: var(--post-core-color-brand-postyellow),
-  post-mode-color-surface-accent3-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-accent4-bg: var(--post-core-color-sandgrey-080),
-  post-mode-color-surface-accent4-fg: var(--post-core-color-brand-white),
-  post-mode-color-surface-accent4-fg-accent: var(--post-core-color-brand-postyellow),
-  post-mode-color-notification-badge-bg: var(--post-core-color-notification-red),
-  post-mode-color-notification-badge-fg: var(--post-core-color-brand-white),
-  post-mode-color-notification-badge-stroke: var(--post-core-color-brand-white),
-  post-mode-color-notification-popover-hover: var(--post-core-color-sandgrey-020),
-);
-
-$post-dark: (
-  post-mode-color-signal-success-dark: var(--post-core-color-notification-green),
-  post-mode-color-signal-success-light: var(--post-core-color-notification-green-light),
-  post-mode-color-signal-error-dark: var(--post-core-color-notification-red),
-  post-mode-color-signal-error-light: var(--post-core-color-notification-red-light),
-  post-mode-color-signal-warning-dark: var(--post-core-color-notification-orange),
-  post-mode-color-signal-warning-light: var(--post-core-color-notification-orange-light),
-  post-mode-color-signal-information-dark: var(--post-core-color-notification-blue),
-  post-mode-color-signal-information-light: var(--post-core-color-notification-blue-light),
-  post-mode-color-interactive-button-primary-enabled-fg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-enabled-bg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-primary-enabled-stroke: var(--post-mode-color-interactive-button-primary-enabled-bg),
-  post-mode-color-interactive-button-primary-enabled-fg-inverted: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-primary-enabled-bg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-enabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-hover-fg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-hover-bg: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-primary-hover-stroke: var(--post-mode-color-interactive-button-primary-hover-bg),
-  post-mode-color-interactive-button-primary-hover-fg-inverted: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-primary-hover-bg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-hover-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-disabled-fg: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-primary-disabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-disabled-stroke: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-primary-disabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-primary-disabled-bg-inverted: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-primary-disabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-secondary-enabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-enabled-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-secondary-enabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-enabled-bg-inverted: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-secondary-enabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-hover-fg: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-secondary-hover-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-hover-stroke: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-secondary-hover-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-hover-bg-inverted: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-secondary-hover-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-disabled-fg: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-secondary-disabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-disabled-stroke: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-secondary-disabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-secondary-disabled-bg-inverted: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-secondary-disabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-tertiary-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-tertiary-enabled-bg: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-enabled-stroke: var(--post-mode-color-interactive-button-tertiary-enabled-bg),
-  post-mode-color-interactive-button-tertiary-enabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-tertiary-enabled-bg-inverted: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-enabled-stroke-inverted: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-hover-fg: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-tertiary-hover-bg: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-hover-stroke: var(--post-mode-color-interactive-button-tertiary-hover-bg),
-  post-mode-color-interactive-button-tertiary-hover-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-tertiary-hover-bg-inverted: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-tertiary-hover-stroke-inverted: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-disabled-fg: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-tertiary-disabled-bg: var(--post-core-color-colorless),
-  post-mode-color-interactive-button-tertiary-disabled-stroke: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-tertiary-disabled-fg-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-tertiary-disabled-bg-inverted: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-button-tertiary-disabled-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-segmented-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-segmented-enabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-segmented-enabled-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-segmented-hover-fg: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-segmented-hover-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-segmented-hover-stroke: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-button-segmented-selected-fg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-button-segmented-selected-bg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-button-segmented-selected-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-focus-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-focus-stroke-inverted: var(--post-core-color-brand-white),
-  post-mode-color-interactive-text_input-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-text_input-enabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-text_input-enabled-stroke: var(--post-mode-color-interactive-text_input-enabled-fg),
-  post-mode-color-interactive-text_input-hover-fg-label: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-text_input-hover-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-text_input-hover-fg-value: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-text_input-hover-stroke: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-primary-enabled-bg1: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-enabled-fg1: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-enabled-fg2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-enabled-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-enabled-fg3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-enabled-bg2: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-enabled-stroke3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-hover-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-hover-fg1: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-primary-hover-fg2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-hover-stroke: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-primary-hover-fg3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-hover-bg2: var(--post-core-color-sandgrey-070),
-  post-mode-color-interactive-primary-hover-stroke3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-disabled-bg: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-disabled-fg1: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-fg2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-stroke: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-bg2: var(--post-core-color-sandgrey-012),
-  post-mode-color-interactive-primary-disabled-fg3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-disabled-bg3: var(--post-core-color-sandgrey-012),
-  post-mode-color-interactive-primary-disabled-stroke2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-bg4: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-disabled-stroke3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-selected-bg1: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-selected-fg1: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-selected-fg2: var(--post-core-color-sandgrey-060),
-  post-mode-color-interactive-primary-selected-stroke1: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-primary-selected-fg3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-selected-bg2: var(--post-core-color-notification-green),
-  post-mode-color-interactive-primary-selected-stroke4: var(--post-core-color-notification-green),
-  post-mode-color-interactive-primary-selected-stroke2: var(--post-core-color-brand-white),
-  post-mode-color-interactive-primary-selected-stroke3: var(--post-core-color-brand-white),
-  post-mode-color-interactive-notification-info-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-notification-info-bg: var(--post-mode-color-signal-information-light),
-  post-mode-color-interactive-notification-info-icon: var(--post-mode-color-signal-information-dark),
-  post-mode-color-interactive-notification-info-stroke: var(--post-mode-color-signal-information-dark),
-  post-mode-color-interactive-notification-success-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-notification-success-bg: var(--post-mode-color-signal-success-light),
-  post-mode-color-interactive-notification-success-icon: var(--post-mode-color-signal-success-dark),
-  post-mode-color-interactive-notification-success-stroke: var(--post-mode-color-signal-success-dark),
-  post-mode-color-interactive-notification-warning-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-notification-warning-bg: var(--post-mode-color-signal-warning-light),
-  post-mode-color-interactive-notification-warning-icon: var(--post-mode-color-signal-warning-dark),
-  post-mode-color-interactive-notification-warning-stroke: var(--post-mode-color-signal-warning-dark),
-  post-mode-color-interactive-notification-error-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-interactive-notification-error-bg: var(--post-mode-color-signal-error-light),
-  post-mode-color-interactive-notification-error-icon: var(--post-mode-color-signal-error-dark),
-  post-mode-color-interactive-notification-error-stroke: var(--post-mode-color-signal-error-dark),
-  post-mode-color-surface-default-bg: var(--post-core-color-sandgrey-002),
-  post-mode-color-surface-default-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-accent1-bg: var(--post-core-color-brand-white),
-  post-mode-color-surface-accent1-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-accent2-bg: var(--post-core-color-sandgrey-006),
-  post-mode-color-surface-accent2-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-accent3-bg: var(--post-core-color-brand-postyellow),
-  post-mode-color-surface-accent3-fg: var(--post-core-color-sandgrey-100),
-  post-mode-color-surface-accent4-bg: var(--post-core-color-sandgrey-080),
-  post-mode-color-surface-accent4-fg: var(--post-core-color-brand-white),
-  post-mode-color-surface-accent4-fg-accent: var(--post-core-color-brand-postyellow),
-  post-mode-color-notification-badge-bg: var(--post-core-color-notification-red),
-  post-mode-color-notification-badge-fg: var(--post-core-color-brand-white),
-  post-mode-color-notification-badge-stroke: var(--post-core-color-brand-white),
-  post-mode-color-notification-popover-hover: var(--post-core-color-sandgrey-020),
-);

package/utilities/_functions.scss

@@ -1,35 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-
-@use '../functions/string';
-@use '../functions/tokens' as tokens-fn;
-@use '../tokens/utilities' as tokens;
-
-$token-maps: meta.module-variables(tokens);
-
-@function from-tokens($set, $group: $set) {
-  $map-name: 'post-#{$set}';
-  $token-prefix: 'post-utility-#{$group}-';
-
-  @if (not map.has-key($token-maps, $map-name)) {
-    @error 'The utility token map named "$#{$map-name}" is missing.';
-  }
-
-  $values: ();
-  @each $key, $value in map.get($token-maps, $map-name) {
-    @if (string.contains($key, $token-prefix)) {
-      $new-value: (
-        string.replace($key, $token-prefix, ''): $value,
-      );
-
-      $values: map.merge($values, $new-value);
-    }
-  }
-
-  @if (list.length($values) == 0) {
-    @error 'No token matching "#{$token-prefix}*" was found in the "$#{$map-name}" map.';
-  }
-
-  @return $values;
-}

package/utilities/temp/_legacy.scss

@@ -1,95 +0,0 @@
-@use 'sass:map';
-@use 'sass:color' as sass-color;
-@use 'sass:list';
-
-@use '../../themes/bootstrap/core' as *;
-@use '../../themes/bootstrap/utilities' as bu; // TODO: Move Design System utilities to utilities folder.
-@use '../../mixins/color' as color-mx;
-@use '../../mixins/utilities';
-@use '../../variables/color';
-@use '../../variables/spacing';
-@use '../../variables/grid';
-
-.bold {
-  font-weight: 700;
-}
-
-.light {
-  font-weight: 300;
-}
-
-.regular {
-  font-weight: 400;
-}
-
-.h-visuallyhidden {
-  @include utilities.visuallyhidden;
-}
-
-.h-visuallyhidden-up-md {
-  @include media-breakpoint-up(md) {
-    @include utilities.visuallyhidden;
-  }
-}
-
-.h-visuallyhidden-down-rg {
-  @include media-breakpoint-down(rg) {
-    @include utilities.visuallyhidden;
-  }
-}
-
-.h-visuallyhidden-down-lg {
-  @include media-breakpoint-down(lg) {
-    @include utilities.visuallyhidden;
-  }
-}
-
-.h-clearfix {
-  @include clearfix;
-}
-
-//-- Legacy --
-span.spacer {
-  display: block;
-  width: spacing.$spacer;
-  height: spacing.$spacer;
-}
-
-.no-toggle-arrow::after {
-  display: none !important;
-}
-
-// Background Utility
-@each $name, $color in color.$background-colors {
-  .bg-#{$name} {
-    @include color-mx.colored-background($color);
-  }
-}
-
-// TODO: refactor to link default styles
-.text-auto {
-  a {
-    color: inherit;
-
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
-a {
-  color: var(--post-contrast-color);
-
-  &:hover {
-    color: rgba(var(--post-contrast-color-rgb), 0.8);
-  }
-
-  @include utilities.high-contrast-mode() {
-    &,
-    &:visited,
-    &:focus,
-    &:hover {
-      color: LinkText !important;
-    }
-  }
-}

package/variables/_options.scss

@@ -1,5 +0,0 @@
-// Options
-//
-// Modify global options
-
-$font-base-path: 'https://fonts.post.ch/frutigerneueforpost/v2' !default;

package/variables/components/_carousel.scss

@@ -1,27 +0,0 @@
-@use './../color';
-
-// Carousel
-
-$carousel-control-color: color.$white !default;
-$carousel-control-width: 15% !default;
-$carousel-control-opacity: 0.5 !default;
-$carousel-control-hover-opacity: 0.9 !default;
-$carousel-control-transition: opacity 0.15s ease !default;
-
-$carousel-indicator-width: 30px !default;
-$carousel-indicator-height: 3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer: 3px !default;
-$carousel-indicator-active-bg: color.$white !default;
-$carousel-indicator-transition: opacity 0.6s ease !default;
-
-$carousel-caption-width: 70% !default;
-$carousel-caption-color: color.$white !default;
-
-$carousel-control-icon-width: 20px !default;
-
-$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
-$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
-
-$carousel-transition-duration: 0.6s !default;
-$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

package/variables/components/_figures.scss

@@ -1,6 +0,0 @@
-@use './../color';
-
-// Figures
-
-$figure-caption-font-size: 90% !default;
-$figure-caption-color: color.$gray-60 !default;

package/variables/components/_form-select.scss

@@ -1,13 +0,0 @@
-@use './forms';
-@use './../color';
-@use './../../functions/icons';
-
-$form-select-border-radius: forms.$input-border-radius;
-$form-select-disabled-color: forms.$input-disabled-color;
-$form-select-disabled-bg: forms.$input-disabled-bg;
-$form-select-disabled-border-color: color.$gray-40;
-$form-select-indicator-color: color.$black;
-$form-select-indicator: url('#{icons.get-colored-svg-url('2113', $form-select-indicator-color)}') !default;
-$form-select-indicator-disabled: url('#{icons.get-colored-svg-url('2113', $form-select-disabled-border-color)}') !default;
-$form-select-indicator-hcm-dark: url('#{icons.get-colored-svg-url('2113', color.$white)}') !default;
-$form-select-indicator-hcm-light: url('#{icons.get-colored-svg-url('2113', color.$black)}') !default;

package/variables/components/_form-validation.scss

@@ -1,38 +0,0 @@
-@use './../color';
-@use './../spacing';
-@use './../type';
-@use './../components/button';
-@use './../components/forms';
-@use './../../functions/icons';
-@use './../../functions/sizing';
-
-// Bootstrap variables
-$form-feedback-margin-top: 0 !default;
-$form-feedback-font-size: type.$font-size-12 !default;
-$form-feedback-valid-color: color.$gray-60 !default;
-$form-feedback-invalid-color: color.$error !default;
-$form-feedback-icon-valid: url('#{icons.get-colored-svg-url('2105', color.$success)}') !default;
-$form-feedback-icon-valid-hcm-dark: url('#{icons.get-colored-svg-url('2105', color.$white)}') !default;
-$form-feedback-icon-valid-hcm-light: url('#{icons.get-colored-svg-url('2105', color.$black)}') !default;
-$form-feedback-icon-invalid: url('#{icons.get-colored-svg-url('2104', color.$error)}') !default;
-$form-feedback-icon-invalid-hcm-dark: url('#{icons.get-colored-svg-url('2104', color.$white)}') !default;
-$form-feedback-icon-invalid-hcm-light: url('#{icons.get-colored-svg-url('2104', color.$black)}') !default;
-
-// Design System custom variables
-$form-feedback-padding-x: spacing.$size-regular !default;
-$form-feedback-padding-y: sizing.px-to-rem(6);
-$form-feedback-padding-y-sm: spacing.$size-micro;
-$form-feedback-icon-size: 2rem !default; // Equals 24pt [svg-size]
-$form-feedback-icon-offset: spacing.$size-mini !default;
-$form-feedback-valid-bg: color.$success !default;
-$form-feedback-valid-text: color.$white !default;
-$form-feedback-invalid-bg: color.$error !default;
-$form-feedback-invalid-text: color.$white !default;
-$form-feedback-custom-color: color.$success !default;
-$form-feedback-custom-bg: color.$success !default;
-$form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
-  rgba($form-feedback-invalid-color, 0.25) !default;
-$form-feedback-valid-box-shadow: 0 0 0 forms.$input-focus-width
-  rgba($form-feedback-valid-color, 0.25) !default;
-$form-feedback-custom-text: color.$white !default;
-$form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !default;

package/variables/components/_list-group.scss

@@ -1,29 +0,0 @@
-@use 'sass:map';
-@use './../color';
-@use './../spacing';
-@use './../commons';
-
-// List group
-
-$list-group-bg: color.$white !default;
-$list-group-border-color: color.$gray-10 !default;
-$list-group-border-width: commons.$border-width !default;
-$list-group-border-radius: 0 !default;
-
-$list-group-item-padding-y: map.get(spacing.$post-sizes, 'small-regular') !default;
-$list-group-item-padding-x: map.get(spacing.$post-sizes, 'large') !default;
-
-$list-group-hover-bg: color.$light !default;
-$list-group-hover-bg-inverted: color.$white !default;
-$list-group-active-color: color.$white !default;
-$list-group-active-bg: color.$gray-80 !default;
-$list-group-active-border-color: $list-group-active-bg !default;
-
-$list-group-disabled-color: color.$gray-20 !default;
-$list-group-disabled-bg: $list-group-bg !default;
-
-$list-group-action-color: color.$gray-60 !default;
-$list-group-action-hover-color: color.$black !default;
-
-$list-group-action-active-color: color.$black !default;
-$list-group-action-active-bg: color.$gray-20 !default;