@swisspost/design-system-styles 8.1.0 → 8.2.1

package/tokens/temp/device.scss

@@ -0,0 +1,204 @@
+// Do not edit manually!
+// This file was generated on:
+// Wed, 11 Sep 2024 12:33:34 GMT by the @swisspost/design-system-tokens package build command
+
+$post-desktop: (
+  'post-sem-font-size-heading-xs': var(--post-core-font-size-20),
+  'post-sem-font-size-heading-s': var(--post-core-font-size-24),
+  'post-sem-font-size-heading-m': var(--post-core-font-size-28),
+  'post-sem-font-size-heading-l': var(--post-core-font-size-32),
+  'post-sem-font-size-heading-xl': var(--post-core-font-size-36),
+  'post-sem-font-size-heading-xxl': var(--post-core-font-size-40),
+  'post-sem-font-size-text-xs': var(--post-core-font-size-12),
+  'post-sem-font-size-text-s': var(--post-core-font-size-14),
+  'post-sem-font-size-text-m': var(--post-core-font-size-16),
+  'post-sem-font-size-text-l': var(--post-core-font-size-18),
+  'post-sem-font-size-text-xl': var(--post-core-font-size-20),
+  'post-sem-elevation-base': var(--post-core-elevation-1),
+  'post-sem-elevation-s': var(--post-core-elevation-2),
+  'post-sem-elevation-m': var(--post-core-elevation-3),
+  'post-sem-elevation-l': var(--post-core-elevation-4),
+  'post-sem-elevation-xl': var(--post-core-elevation-5),
+  'post-sem-typo-title-h1': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-40)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h2': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-36)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h3': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-32)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h4': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-28)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h5': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-24)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h6': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-20)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h1': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-40)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h2': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-36)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h3': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-32)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h4': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-28)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h5': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-24)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h6': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-20)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-lead': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-24)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-paragraph': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-20)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-legend-l': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-32)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-legend-s': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-20)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-l': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-18)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-m': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-16)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-s': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-14)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-xs': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-12)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-link-underline': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-20)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default) underline,
+  'post-sem-typo-text-link': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-20)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-font-family-default': var(--post-core-font-family-frutiger),
+  'post-sem-spacing-interactive-gap-block-1': var(--post-core-dimension-16),
+  'post-sem-spacing-interactive-gap-block-2': var(--post-core-dimension-16),
+  'post-sem-spacing-interactive-gap-inline-1': var(--post-core-dimension-8),
+  'post-sem-spacing-interactive-gap-inline-2': var(--post-core-dimension-8),
+  'post-sem-spacing-interactive-gap-inline-3': var(--post-core-dimension-12),
+  'post-sem-spacing-interactive-gap-inline-4': var(--post-core-dimension-4),
+  'post-sem-spacing-interactive-gap-inline-5': var(--post-core-dimension-2),
+  'post-sem-spacing-interactive-padding-1': var(--post-core-dimension-0),
+  'post-sem-spacing-interactive-padding-2': var(--post-core-dimension-2),
+  'post-sem-spacing-interactive-padding-3': var(--post-core-dimension-10),
+  'post-sem-spacing-interactive-padding-inline-1': var(--post-core-dimension-14),
+  'post-sem-spacing-interactive-padding-inline-2': var(--post-core-dimension-32),
+  'post-sem-spacing-interactive-padding-block-1': var(--post-core-dimension-11),
+  'post-sem-spacing-interactive-padding-block-2': var(--post-core-dimension-4),
+  'post-sem-spacing-interactive-padding-block-3': var(--post-core-dimension-4-5),
+  'post-sem-spacing-interactive-padding-block-4': var(--post-core-dimension-7-5),
+  'post-sem-spacing-interactive-padding-block-5': var(--post-core-dimension-6),
+  'post-sem-spacing-interactive-padding-block-6': var(--post-core-dimension-1),
+  'post-sem-spacing-interactive-padding-block-7': var(--post-core-dimension-1),
+  'post-sem-spacing-interactive-padding-block-8': var(--post-core-dimension-32),
+  'post-sem-spacing-interactive-padding-block-9': var(--post-core-dimension-5),
+  'post-sem-sizing-interactive-icon-height': var(--post-core-dimension-24),
+  'post-sem-sizing-interactive-icon-width': var(--post-core-dimension-24),
+  'post-core-font-weight-bold': var(--post-core-font-weight-700),
+  'post-core-font-weight-regular': var(--post-core-font-weight-400),
+);
+
+$post-tablet: (
+  'post-sem-font-size-heading-xs': var(--post-core-font-size-20),
+  'post-sem-font-size-heading-s': var(--post-core-font-size-24),
+  'post-sem-font-size-heading-m': var(--post-core-font-size-28),
+  'post-sem-font-size-heading-l': var(--post-core-font-size-32),
+  'post-sem-font-size-heading-xl': var(--post-core-font-size-36),
+  'post-sem-font-size-heading-xxl': var(--post-core-font-size-40),
+  'post-sem-font-size-text-xs': var(--post-core-font-size-12),
+  'post-sem-font-size-text-s': var(--post-core-font-size-14),
+  'post-sem-font-size-text-m': var(--post-core-font-size-16),
+  'post-sem-font-size-text-l': var(--post-core-font-size-18),
+  'post-sem-font-size-text-xl': var(--post-core-font-size-20),
+  'post-sem-elevation-base': var(--post-core-elevation-1),
+  'post-sem-elevation-s': var(--post-core-elevation-2),
+  'post-sem-elevation-m': var(--post-core-elevation-3),
+  'post-sem-elevation-l': var(--post-core-elevation-4),
+  'post-sem-elevation-xl': var(--post-core-elevation-5),
+  'post-sem-typo-title-h1': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-40)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h2': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-36)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h3': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-32)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h4': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-28)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h5': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-24)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h6': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-20)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h1': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-40)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h2': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-36)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h3': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-32)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h4': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-28)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h5': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-24)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h6': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-20)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-lead': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-20)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-paragraph': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-16)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-legend-l': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-16)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-legend-s': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-16)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-l': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-18)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-m': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-16)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-s': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-14)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-xs': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-12)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-link-underline': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-line-height-150) var(--post-core-letter-spacing-default) underline var(--post-core-font-size-16),
+  'post-sem-typo-text-link': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-16)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-font-family-default': var(--post-core-font-family-frutiger),
+  'post-sem-spacing-interactive-gap-block-1': var(--post-core-dimension-16),
+  'post-sem-spacing-interactive-gap-block-2': var(--post-core-dimension-16),
+  'post-sem-spacing-interactive-gap-inline-1': var(--post-core-dimension-8),
+  'post-sem-spacing-interactive-gap-inline-2': var(--post-core-dimension-8),
+  'post-sem-spacing-interactive-gap-inline-3': var(--post-core-dimension-12),
+  'post-sem-spacing-interactive-gap-inline-4': var(--post-core-dimension-4),
+  'post-sem-spacing-interactive-gap-inline-5': var(--post-core-dimension-2),
+  'post-sem-spacing-interactive-padding-1': var(--post-core-dimension-1),
+  'post-sem-spacing-interactive-padding-2': var(--post-core-dimension-2),
+  'post-sem-spacing-interactive-padding-3': var(--post-core-dimension-10),
+  'post-sem-spacing-interactive-padding-inline-1': var(--post-core-dimension-14),
+  'post-sem-spacing-interactive-padding-inline-2': var(--post-core-dimension-30),
+  'post-sem-spacing-interactive-padding-block-1': var(--post-core-dimension-10),
+  'post-sem-spacing-interactive-padding-block-2': var(--post-core-dimension-4),
+  'post-sem-spacing-interactive-padding-block-3': var(--post-core-dimension-5),
+  'post-sem-spacing-interactive-padding-block-4': var(--post-core-dimension-5),
+  'post-sem-spacing-interactive-padding-block-5': var(--post-core-dimension-6),
+  'post-sem-spacing-interactive-padding-block-6': var(--post-core-dimension-0),
+  'post-sem-spacing-interactive-padding-block-7': var(--post-core-dimension-0),
+  'post-sem-spacing-interactive-padding-block-8': var(--post-core-dimension-24),
+  'post-sem-spacing-interactive-padding-block-9': var(--post-core-dimension-5),
+  'post-sem-sizing-interactive-icon-height': var(--post-core-dimension-22),
+  'post-sem-sizing-interactive-icon-width': var(--post-core-dimension-22),
+  'post-core-font-weight-bold': var(--post-core-font-weight-700),
+  'post-core-font-weight-regular': var(--post-core-font-weight-400),
+);
+
+$post-mobile: (
+  'post-sem-font-size-heading-xs': var(--post-core-font-size-20),
+  'post-sem-font-size-heading-s': var(--post-core-font-size-24),
+  'post-sem-font-size-heading-m': var(--post-core-font-size-28),
+  'post-sem-font-size-heading-l': var(--post-core-font-size-32),
+  'post-sem-font-size-heading-xl': var(--post-core-font-size-36),
+  'post-sem-font-size-heading-xxl': var(--post-core-font-size-40),
+  'post-sem-font-size-text-xs': var(--post-core-font-size-12),
+  'post-sem-font-size-text-s': var(--post-core-font-size-14),
+  'post-sem-font-size-text-m': var(--post-core-font-size-16),
+  'post-sem-font-size-text-l': var(--post-core-font-size-18),
+  'post-sem-font-size-text-xl': var(--post-core-font-size-20),
+  'post-sem-elevation-base': var(--post-core-elevation-1),
+  'post-sem-elevation-s': var(--post-core-elevation-2),
+  'post-sem-elevation-m': var(--post-core-elevation-3),
+  'post-sem-elevation-l': var(--post-core-elevation-4),
+  'post-sem-elevation-xl': var(--post-core-elevation-5),
+  'post-sem-typo-title-h1': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-40)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h2': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-36)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h3': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-32)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h4': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-28)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h5': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-24)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-title-h6': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-20)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h1': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-40)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h2': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-36)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h3': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-32)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h4': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-28)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h5': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-24)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-subtitle-sub-h6': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-20)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-lead': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-18)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-paragraph': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-14)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-legend-l': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-24)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-legend-s': var(--post-sem-font-family-default) var(--post-core-font-weight-700) var(--post-core-font-size-14)/var(--post-core-line-height-120) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-l': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-14)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-m': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-14)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-s': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-14)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-label-xs': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-12)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-typo-text-link-underline': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-14)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default) underline,
+  'post-sem-typo-text-link': var(--post-sem-font-family-default) var(--post-core-font-weight-400) var(--post-core-font-size-14)/var(--post-core-line-height-150) var(--post-core-letter-spacing-default),
+  'post-sem-font-family-default': var(--post-core-font-family-frutiger),
+  'post-sem-spacing-interactive-gap-block-1': var(--post-core-dimension-8),
+  'post-sem-spacing-interactive-gap-block-2': var(--post-core-dimension-16),
+  'post-sem-spacing-interactive-gap-inline-1': var(--post-core-dimension-6),
+  'post-sem-spacing-interactive-gap-inline-2': var(--post-core-dimension-8),
+  'post-sem-spacing-interactive-gap-inline-3': var(--post-core-dimension-12),
+  'post-sem-spacing-interactive-gap-inline-4': var(--post-core-dimension-4),
+  'post-sem-spacing-interactive-gap-inline-5': var(--post-core-dimension-2),
+  'post-sem-spacing-interactive-padding-1': var(--post-core-dimension-2),
+  'post-sem-spacing-interactive-padding-2': var(--post-core-dimension-2),
+  'post-sem-spacing-interactive-padding-3': var(--post-core-dimension-10),
+  'post-sem-spacing-interactive-padding-inline-1': var(--post-core-dimension-14),
+  'post-sem-spacing-interactive-padding-inline-2': var(--post-core-dimension-28),
+  'post-sem-spacing-interactive-padding-block-1': var(--post-core-dimension-10),
+  'post-sem-spacing-interactive-padding-block-2': var(--post-core-dimension-5-5),
+  'post-sem-spacing-interactive-padding-block-3': var(--post-core-dimension-6-5),
+  'post-sem-spacing-interactive-padding-block-4': var(--post-core-dimension-5),
+  'post-sem-spacing-interactive-padding-block-5': var(--post-core-dimension-6),
+  'post-sem-spacing-interactive-padding-block-6': var(--post-core-dimension-1-5),
+  'post-sem-spacing-interactive-padding-block-7': var(--post-core-dimension-0),
+  'post-sem-spacing-interactive-padding-block-8': var(--post-core-dimension-24),
+  'post-sem-spacing-interactive-padding-block-9': var(--post-core-dimension-5),
+  'post-sem-sizing-interactive-icon-height': var(--post-core-dimension-20),
+  'post-sem-sizing-interactive-icon-width': var(--post-core-dimension-20),
+  'post-core-font-weight-bold': var(--post-core-font-weight-700),
+  'post-core-font-weight-regular': var(--post-core-font-weight-400),
+);

package/tokens/temp/index.scss

@@ -0,0 +1,10 @@
+// Do not edit manually!
+// This file was generated on:
+// Wed, 11 Sep 2024 12:33:34 GMT by the @swisspost/design-system-tokens package build command
+
+@use './core';
+@forward './mode';
+@forward './device';
+@forward './channel';
+@forward './theme';
+@forward './components';

package/tokens/temp/mode.scss

@@ -0,0 +1,177 @@
+// Do not edit manually!
+// This file was generated on:
+// Wed, 11 Sep 2024 12:33:34 GMT by the @swisspost/design-system-tokens package build command
+
+$post-light: (
+  'post-sem-color-signal-success-dark': var(--post-core-color-notification-green),
+  'post-sem-color-signal-success-light': var(--post-core-color-notification-green-light),
+  'post-sem-color-signal-error-dark': var(--post-core-color-notification-red),
+  'post-sem-color-signal-error-light': var(--post-core-color-notification-red-light),
+  'post-sem-color-signal-warning-dark': var(--post-core-color-notification-orange),
+  'post-sem-color-signal-warning-light': var(--post-core-color-notification-orange-light),
+  'post-sem-color-signal-information-dark': var(--post-core-color-notification-blue),
+  'post-sem-color-signal-information-light': var(--post-core-color-notification-blue-light),
+  'post-sem-color-interactive-button-primary-enabled-fg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-primary-enabled-bg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-button-primary-enabled-stroke': var(--post-sem-color-interactive-button-primary-enabled-bg),
+  'post-sem-color-interactive-button-primary-hover-fg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-primary-hover-bg': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-button-primary-hover-stroke': var(--post-sem-color-interactive-button-primary-hover-bg),
+  'post-sem-color-interactive-button-primary-disabled-fg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-primary-disabled-bg': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-button-primary-disabled-stroke': var(--post-sem-color-interactive-button-primary-disabled-bg),
+  'post-sem-color-interactive-button-secondary-enabled-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-button-secondary-enabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-secondary-enabled-stroke': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-button-secondary-hover-fg': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-button-secondary-hover-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-secondary-hover-stroke': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-button-secondary-disabled-fg': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-button-secondary-disabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-secondary-disabled-stroke': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-button-tertiary-enabled-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-button-tertiary-enabled-bg': var(--post-core-color-colorless),
+  'post-sem-color-interactive-button-tertiary-enabled-stroke': var(--post-sem-color-interactive-button-tertiary-enabled-bg),
+  'post-sem-color-interactive-button-tertiary-hover-fg': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-button-tertiary-hover-bg': var(--post-core-color-colorless),
+  'post-sem-color-interactive-button-tertiary-hover-stroke': var(--post-sem-color-interactive-button-tertiary-hover-bg),
+  'post-sem-color-interactive-button-tertiary-disabled-fg': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-button-tertiary-disabled-bg': var(--post-core-color-colorless),
+  'post-sem-color-interactive-button-tertiary-disabled-stroke': var(--post-sem-color-interactive-button-tertiary-disabled-bg),
+  'post-sem-color-interactive-focus-stroke': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-focus-stroke-inverted': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-text-input-enabled-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-text-input-enabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-text-input-enabled-stroke': var(--post-sem-color-interactive-text_input-enabled-fg),
+  'post-sem-color-interactive-text-input-hover-fg-label': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-text-input-hover-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-text-input-hover-fg-value': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-text-input-hover-stroke': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-primary-enabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-enabled-fg1': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-enabled-fg2': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-enabled-stroke': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-enabled-fg-handle': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-enabled-bg-handle': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-hover-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-hover-fg1': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-primary-hover-fg2': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-hover-stroke': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-primary-hover-fg-handle': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-hover-bg-handle': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-primary-disabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-disabled-fg1': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-disabled-fg2': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-disabled-stroke': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-disabled-bg2': var(--post-core-color-sandgrey-012),
+  'post-sem-color-interactive-primary-disabled-fg-handle': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-disabled-bg-handle': var(--post-core-color-sandgrey-012),
+  'post-sem-color-interactive-primary-disabled-stroke-handle': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-selected-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-selected-fg1': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-selected-fg2': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-selected-stroke': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-selected-fg-handle': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-selected-bg-handle': var(--post-comp-interactive-color-signal-success),
+  'post-sem-color-surface-default-bg': var(--post-core-color-sandgrey-002),
+  'post-sem-color-surface-default-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-surface-accent1-bg': var(--post-core-color-brand-white),
+  'post-sem-color-surface-accent1-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-surface-accent2-bg': var(--post-core-color-sandgrey-006),
+  'post-sem-color-surface-accent2-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-surface-accent3-bg': var(--post-core-color-brand-postyellow),
+  'post-sem-color-surface-accent3-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-surface-accent4-bg': var(--post-core-color-sandgrey-080),
+  'post-sem-color-surface-accent4-fg': var(--post-core-color-brand-white),
+  'post-sem-color-surface-accent4-fg-accent': var(--post-core-color-brand-postyellow),
+  'post-sem-color-notification-badge-bg': var(--post-core-color-notification-red),
+  'post-sem-color-notification-badge-fg': var(--post-core-color-brand-white),
+  'post-sem-color-notification-badge-stroke': var(--post-core-color-brand-white),
+);
+
+$post-dark: (
+  'post-sem-color-signal-success-dark': var(--post-core-color-notification-green),
+  'post-sem-color-signal-success-light': var(--post-core-color-notification-green-light),
+  'post-sem-color-signal-error-dark': var(--post-core-color-notification-red),
+  'post-sem-color-signal-error-light': var(--post-core-color-notification-red-light),
+  'post-sem-color-signal-warning-dark': var(--post-core-color-notification-orange),
+  'post-sem-color-signal-warning-light': var(--post-core-color-notification-orange-light),
+  'post-sem-color-signal-information-dark': var(--post-core-color-notification-blue),
+  'post-sem-color-signal-information-light': var(--post-core-color-notification-blue-light),
+  'post-sem-color-interactive-button-primary-enabled-fg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-primary-enabled-bg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-button-primary-enabled-stroke': var(--post-sem-color-interactive-button-primary-enabled-bg),
+  'post-sem-color-interactive-button-primary-hover-fg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-primary-hover-bg': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-button-primary-hover-stroke': var(--post-sem-color-interactive-button-primary-hover-bg),
+  'post-sem-color-interactive-button-primary-disabled-fg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-primary-disabled-bg': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-button-primary-disabled-stroke': var(--post-sem-color-interactive-button-primary-disabled-bg),
+  'post-sem-color-interactive-button-secondary-enabled-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-button-secondary-enabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-secondary-enabled-stroke': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-button-secondary-hover-fg': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-button-secondary-hover-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-secondary-hover-stroke': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-button-secondary-disabled-fg': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-button-secondary-disabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-button-secondary-disabled-stroke': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-button-tertiary-enabled-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-button-tertiary-enabled-bg': var(--post-core-color-colorless),
+  'post-sem-color-interactive-button-tertiary-enabled-stroke': var(--post-sem-color-interactive-button-tertiary-enabled-bg),
+  'post-sem-color-interactive-button-tertiary-hover-fg': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-button-tertiary-hover-bg': var(--post-core-color-colorless),
+  'post-sem-color-interactive-button-tertiary-hover-stroke': var(--post-sem-color-interactive-button-tertiary-hover-bg),
+  'post-sem-color-interactive-button-tertiary-disabled-fg': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-button-tertiary-disabled-bg': var(--post-core-color-colorless),
+  'post-sem-color-interactive-button-tertiary-disabled-stroke': var(--post-sem-color-interactive-button-tertiary-disabled-bg),
+  'post-sem-color-interactive-focus-stroke': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-focus-stroke-inverted': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-text-input-enabled-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-text-input-enabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-text-input-enabled-stroke': var(--post-sem-color-interactive-text_input-enabled-fg),
+  'post-sem-color-interactive-text-input-hover-fg-label': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-text-input-hover-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-text-input-hover-fg-value': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-text-input-hover-stroke': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-primary-enabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-enabled-fg1': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-enabled-fg2': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-enabled-stroke': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-enabled-fg-handle': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-enabled-bg-handle': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-hover-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-hover-fg1': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-primary-hover-fg2': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-hover-stroke': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-primary-hover-fg-handle': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-hover-bg-handle': var(--post-core-color-sandgrey-070),
+  'post-sem-color-interactive-primary-disabled-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-disabled-fg1': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-disabled-fg2': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-disabled-stroke': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-disabled-bg2': var(--post-core-color-sandgrey-012),
+  'post-sem-color-interactive-primary-disabled-fg-handle': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-disabled-bg-handle': var(--post-core-color-sandgrey-012),
+  'post-sem-color-interactive-primary-disabled-stroke-handle': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-selected-bg': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-selected-fg1': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-selected-fg2': var(--post-core-color-sandgrey-060),
+  'post-sem-color-interactive-primary-selected-stroke': var(--post-core-color-sandgrey-100),
+  'post-sem-color-interactive-primary-selected-fg-handle': var(--post-core-color-brand-white),
+  'post-sem-color-interactive-primary-selected-bg-handle': var(--post-comp-interactive-color-signal-success),
+  'post-sem-color-surface-default-bg': var(--post-core-color-sandgrey-002),
+  'post-sem-color-surface-default-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-surface-accent1-bg': var(--post-core-color-brand-white),
+  'post-sem-color-surface-accent1-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-surface-accent2-bg': var(--post-core-color-sandgrey-006),
+  'post-sem-color-surface-accent2-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-surface-accent3-bg': var(--post-core-color-brand-postyellow),
+  'post-sem-color-surface-accent3-fg': var(--post-core-color-sandgrey-100),
+  'post-sem-color-surface-accent4-bg': var(--post-core-color-sandgrey-080),
+  'post-sem-color-surface-accent4-fg': var(--post-core-color-brand-white),
+  'post-sem-color-surface-accent4-fg-accent': var(--post-core-color-brand-postyellow),
+  'post-sem-color-notification-badge-bg': var(--post-core-color-notification-red),
+  'post-sem-color-notification-badge-fg': var(--post-core-color-brand-white),
+  'post-sem-color-notification-badge-stroke': var(--post-core-color-brand-white),
+);

package/tokens/temp/theme.scss

@@ -0,0 +1,7 @@
+// Do not edit manually!
+// This file was generated on:
+// Wed, 11 Sep 2024 12:33:34 GMT by the @swisspost/design-system-tokens package build command
+
+$post-theme: (
+  'post-post-sem-sizing-interactive-height-filler': var(--post-core-dimension-24),
+);

package/variables/_color.scss

@@ -184,20 +184,32 @@ $background-colors: map.merge($background-colors, $signal-colors);
 $background-colors: map.merge($background-colors, $signal-background-colors);
 $background-colors: map.merge($background-colors, $accent-colors);
 
-// Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
-$dark-backgrounds: () !default;
+// Compile a list of light and dark backgrounds, used in the :is selector mixin at mixins/color
+$_backgrounds: (
+  light: (),
+  dark: (),
+) !default;
+
 @each $color-name, $color in $background-colors {
-  @if (contrast-fn.light-or-dark($color) == 'dark') {
-    $dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$color-name}', $separator: comma);
-  }
+  $key: contrast-fn.light-or-dark($color);
+  $values: list.append(map.get($_backgrounds, $key), '.bg-#{$color-name}', $separator: comma);
+  $_backgrounds: map.set($_backgrounds, $key, $values);
 }
+
 @each $color-name, $color in $notification-colors {
-  @if (contrast-fn.light-or-dark($color) == 'dark') {
-    $dark-backgrounds: list.append($dark-backgrounds, '.alert-#{$color-name}', $separator: comma);
-    $dark-backgrounds: list.append(
-      $dark-backgrounds,
-      'post-alert[type=#{$color-name}]',
-      $separator: comma
-    );
-  }
+  $key: contrast-fn.light-or-dark($color);
+  $values: list.join(
+    map.get($_backgrounds, $key),
+    '.alert-#{$color-name}' 'post-alert[type=#{$color-name}]',
+    $separator: comma
+  );
+  $_backgrounds: map.set($_backgrounds, $key, $values);
 }
+
+$backgrounds: list.join(
+  map.get($_backgrounds, light),
+  map.get($_backgrounds, dark),
+  $separator: comma
+);
+$dark-backgrounds: map.get($_backgrounds, dark) !default;
+$light-backgrounds: map.get($_backgrounds, light) !default;

package/variables/components/_accordion.scss

@@ -50,9 +50,12 @@ $accordion-button-hover-color: color.$black !default;
 $accordion-button-font-weight: type.$font-weight-bold !default;
 $accordion-button-line-height: type.$line-height-copy !default;
 $accordion-icon-width: spacing.$size-large !default;
-$accordion-button-icon: url('#{icons.get-colored-svg-url(2113, $accordion-button-color)}');
-$accordion-button-active-icon: url('#{icons.get-colored-svg-url(2113, $accordion-button-active-color)}');
-$accordion-hcm-icon: url('#{icons.get-colored-svg-url(2113, color.$white)}');
+$_accordion-button-icon: icons.get-colored-svg-url(2113, $accordion-button-color);
+$_accordion-button-active-icon: icons.get-colored-svg-url(2113, $accordion-button-active-color);
+$_accordion-hcm-icon: icons.get-colored-svg-url(2113, color.$white);
+$accordion-button-icon: url('#{$_accordion-button-icon}');
+$accordion-button-active-icon: url('#{$_accordion-button-active-icon}');
+$accordion-hcm-icon: url('#{$_accordion-hcm-icon}');
 $accordion-header-font-curve: 'regular' !default;
 $accordion-heading-margin: spacing.$size-bigger-big 0 0 !default;
 $accordion-heading-font-curve: $accordion-header-font-curve !default;

package/variables/components/_close.scss

@@ -15,7 +15,9 @@ $btn-close-width: spacing.$size-large !default;
 $btn-close-height: $btn-close-width !default;
 $btn-close-padding-x: spacing.$size-regular !default;
 $btn-close-color: color.$black !default;
-$btn-close-bg: url('#{icons.get-colored-svg-url('2043', $btn-close-color)}') !default;
-$btn-close-hcm-bg: url('#{icons.get-colored-svg-url('2043', color.$white)}') !default;
+$_btn-close-bg: icons.get-colored-svg-url(2043, $btn-close-color);
+$_btn-close-hcm-bg: icons.get-colored-svg-url(2043, color.$white);
+$btn-close-bg: url('#{$_btn-close-bg}') !default;
+$btn-close-hcm-bg: url('#{$_btn-close-hcm-bg}') !default;
 $btn-close-opacity: 0.5 !default;
 $btn-close-hover-opacity: 0.75 !default;

package/variables/components/_datatable.scss

@@ -43,7 +43,11 @@ $datatable-progressbar-backgroundcolor: color.$gray-10;
 $datatable-progressbar-activecolor: color.$yellow;
 
 // DEPRECATED
-$datatable-sort-asc-icon: url('#{icons.get-colored-svg-url('2112', color.$gray-80)}');
-$datatable-sort-desc-icon: url('#{icons.get-colored-svg-url('2113', color.$gray-80)}');
-$datatable-sort-unset-icon: url('#{icons.get-colored-svg-url('2127', color.$gray-80)}');
-$datatable-editable-icon: url('#{icons.get-colored-svg-url('3193', color.$gray-80)}');
+$_datatable-sort-asc-icon: icons.get-colored-svg-url('2112', color.$gray-80);
+$_datatable-sort-desc-icon: icons.get-colored-svg-url('2113', color.$gray-80);
+$_datatable-sort-unset-icon: icons.get-colored-svg-url('2127', color.$gray-80);
+$_datatable-editable-icon: icons.get-colored-svg-url('3193', color.$gray-80);
+$datatable-sort-asc-icon: url('#{$_datatable-sort-asc-icon}');
+$datatable-sort-desc-icon: url('#{$_datatable-sort-desc-icon}');
+$datatable-sort-unset-icon: url('#{$_datatable-sort-unset-icon}');
+$datatable-editable-icon: url('#{$_datatable-editable-icon}');

package/variables/components/_form-check.scss

@@ -126,14 +126,17 @@ $form-check-input-checked-color: forms.$input-focus-border-color !default;
 $form-check-input-checked-bg-color: transparent !default;
 $form-check-input-checked-border-color: $form-check-input-checked-color !default;
 $form-check-input-checked-bg-icon: 3035 !default;
-$form-check-input-checked-bg-image: url('#{icons.get-colored-svg-url($form-check-input-checked-bg-icon, $form-check-input-checked-color)}') !default;
+$_form-check-input-checked-bg-image: icons.get-colored-svg-url($form-check-input-checked-bg-icon, $form-check-input-checked-color);
+$form-check-input-checked-bg-image: url('#{$_form-check-input-checked-bg-image}') !default; 
 $form-check-radio-checked-bg-icon: "data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 6 6'%3E%3Ccircle r='2'%3E%3C/circle%3E%3C/svg%3E" !default;
-$form-check-radio-checked-bg-image: url('#{icons.add-fill-color($form-check-radio-checked-bg-icon, $form-check-input-checked-color)}') !default;
+$_form-check-radio-checked-bg-image: icons.add-fill-color($form-check-radio-checked-bg-icon, $form-check-input-checked-color);
+$form-check-radio-checked-bg-image: url('#{$_form-check-radio-checked-bg-image}') !default;
 $form-check-input-indeterminate-color: $form-check-input-checked-color !default;
 $form-check-input-indeterminate-bg-color: transparent !default;
 $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-color !default;
 $form-check-input-indeterminate-bg-icon: 2039 !default;
-$form-check-input-indeterminate-bg-image: url('#{icons.get-colored-svg-url($form-check-input-indeterminate-bg-icon, $form-check-input-indeterminate-color)}') !default;
+$_form-check-input-indeterminate-bg-image: icons.get-colored-svg-url($form-check-input-indeterminate-bg-icon, $form-check-input-indeterminate-color);
+$form-check-input-indeterminate-bg-image: url('#{$_form-check-input-indeterminate-bg-image}') !default;
 $form-check-inline-margin-end: spacing.$size-large !default;
 $form-check-label-cursor: pointer !default;
 $form-check-label-color: forms.$form-label-color !default;

package/variables/components/_form-select.scss

@@ -7,7 +7,11 @@ $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;
+$_form-select-indicator: icons.get-colored-svg-url(2113, $form-select-indicator-color);
+$_form-select-indicator-disabled: icons.get-colored-svg-url(2113, $form-select-disabled-border-color);
+$_form-select-indicator-hcm-dark: icons.get-colored-svg-url(2113, color.$white);
+$_form-select-indicator-hcm-light: icons.get-colored-svg-url(2113, color.$black);
+$form-select-indicator: url('#{$_form-select-indicator}') !default;
+$form-select-indicator-disabled: url('#{$_form-select-indicator-disabled}') !default;
+$form-select-indicator-hcm-dark: url('#{$_form-select-indicator-hcm-dark}') !default;
+$form-select-indicator-hcm-light: url('#{$_form-select-indicator-hcm-light}') !default;

package/variables/components/_form-validation.scss

@@ -11,12 +11,18 @@ $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;
+$_form-feedback-icon-valid: icons.get-colored-svg-url(2105, color.$success);
+$_form-feedback-icon-valid-hcm-dark: icons.get-colored-svg-url(2105, color.$white);
+$_form-feedback-icon-valid-hcm-light: icons.get-colored-svg-url(2105, color.$black);
+$_form-feedback-icon-invalid: icons.get-colored-svg-url(2104, color.$error);
+$_form-feedback-icon-invalid-hcm-dark: icons.get-colored-svg-url(2104, color.$white);
+$_form-feedback-icon-invalid-hcm-light: icons.get-colored-svg-url(2104, color.$black);
+$form-feedback-icon-valid: url('#{$_form-feedback-icon-valid}') !default;
+$form-feedback-icon-valid-hcm-dark: url('#{$_form-feedback-icon-valid-hcm-dark}') !default;
+$form-feedback-icon-valid-hcm-light: url('#{$_form-feedback-icon-valid-hcm-light}') !default;
+$form-feedback-icon-invalid: url('#{$_form-feedback-icon-invalid}') !default;
+$form-feedback-icon-invalid-hcm-dark: url('#{$_form-feedback-icon-invalid-hcm-dark}') !default;
+$form-feedback-icon-invalid-hcm-light: url('#{$_form-feedback-icon-invalid-hcm-light}') !default;
 
 // Design System custom variables
 $form-feedback-padding-x: spacing.$size-regular !default;

package/variables/components/_stepper.scss

@@ -39,7 +39,9 @@ $stepper-link-hover-color: $stepper-link-color;
 $stepper-indicator-hover-outline: spacing.$size-line solid var(--post-focus-color);
 $stepper-indicator-font-size: type.$font-size-16;
 $stepper-link-current-font-size: type.$font-size-16;
-$stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepper-indicator-color)}');
-$stepper-indicator-hover-check-icon: url('#{icon-fn.get-colored-svg-url('2105',$stepper-indicator-hover-color)}');
+$_stepper-indicator-check-icon: icon-fn.get-colored-svg-url(2105, $stepper-indicator-color);
+$_stepper-indicator-hover-check-icon: icon-fn.get-colored-svg-url(2105, $stepper-indicator-hover-color);
+$stepper-indicator-check-icon: url('#{$_stepper-indicator-check-icon}');
+$stepper-indicator-hover-check-icon: url('#{$_stepper-indicator-hover-check-icon}');
 $stepper-indicator-height: $stepper-indicator-size;
 $stepper-indicator-check-icon-size: $stepper-indicator-check-size;

package/variables/components/_tag.scss

@@ -6,7 +6,7 @@
 $tag-gap: spacing.$size-micro;
 $tag-padding-y: 0;
 $tag-padding-x: spacing.$size-mini;
-$tag-max-width: sizing.px-to-rem(296);
+$tag-max-width: 100%;
 $tag-border-width: spacing.$size-hair;
 $tag-border-radius: spacing.$size-micro;
 $tag-font-size: type.$font-size-16;