npm - @swisspost/design-system-tokens - Versions diffs - 9.0.0-next.9 → 10.0.0-next.38 - Mend

@swisspost/design-system-tokens 9.0.0-next.9 → 10.0.0-next.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/CHANGELOG.md +71 -0
package/_channel.scss +3 -3
package/_components.scss +88 -20
package/_core.scss +21 -18
package/_device.scss +25 -1
package/_elements.scss +1 -1
package/_helpers.scss +1 -1
package/_index.scss +2 -1
package/_palette.scss +56 -0
package/_palettes.scss +3 -3
package/_scheme.scss +37 -15
package/_theme.scss +17 -3
package/_utilities-formatted.scss +136 -0
package/_utilities.scss +41 -58
package/package.json +20 -14
package/palettes/_cargo-dark.scss +1 -1
package/palettes/_cargo-light.scss +1 -1
package/palettes/_post-dark.scss +1 -1
package/palettes/_post-light.scss +2 -2
package/tailwind/helpers.tailwind.js +1 -1
package/tailwind/utilities.tailwind.js +44 -59
package/tokens.json +1540 -971

package/_scheme.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 // Do not edit manually
 // This file was generated by the swisspost/design-system-tokens package
-// Mon, 16 Dec 2024 16:43:56 GMT
+// Mon, 19 May 2025 11:16:33 GMT
 $post-light: (
   post-scheme-color-signal-success-dark: var(--post-core-color-notification-green),
@@ -80,6 +80,7 @@ $post-light: (
   post-scheme-color-interactive-primary-enabled-bg2: var(--post-core-color-sandgrey-100),
   post-scheme-color-interactive-primary-enabled-stroke3: var(--post-core-color-brand-white),
   post-scheme-color-interactive-primary-enabled-bg3: var(--post-core-color-brand-white),
+  post-scheme-color-interactive-primary-enabled-stroke4: var(--post-core-color-sandgrey-030),
   post-scheme-color-interactive-primary-hover-bg: var(--post-core-color-brand-white),
   post-scheme-color-interactive-primary-hover-fg1: var(--post-core-color-sandgrey-070),
   post-scheme-color-interactive-primary-hover-stroke: var(--post-core-color-sandgrey-070),
@@ -87,6 +88,7 @@ $post-light: (
   post-scheme-color-interactive-primary-hover-bg2: var(--post-core-color-sandgrey-070),
   post-scheme-color-interactive-primary-hover-stroke3: var(--post-core-color-brand-white),
   post-scheme-color-interactive-primary-hover-bg3: var(--post-core-color-brand-white),
+  post-scheme-color-interactive-primary-hover-bg4: var(--post-core-color-sandgrey-006),
   post-scheme-color-interactive-primary-disabled-bg: var(--post-core-color-brand-white),
   post-scheme-color-interactive-primary-disabled-fg1: var(--post-core-color-sandgrey-060),
   post-scheme-color-interactive-primary-disabled-stroke: var(--post-core-color-sandgrey-060),
@@ -128,9 +130,11 @@ $post-light: (
   post-scheme-color-interactive-input-hover-bg: var(--post-core-color-brand-white),
   post-scheme-color-interactive-input-hover-fg: var(--post-core-color-sandgrey-070),
   post-scheme-color-interactive-input-hover-border: var(--post-core-color-sandgrey-070),
-  post-scheme-color-interactive-input-disabled-bg: var(--post-core-color-brand-white),
+  post-scheme-color-interactive-input-disabled-bg: var(--post-core-color-colorless),
   post-scheme-color-interactive-input-disabled-fg: var(--post-core-color-sandgrey-060),
   post-scheme-color-interactive-input-disabled-border: var(--post-core-color-sandgrey-060),
+  post-scheme-color-interactive-card-hover-bg: var(--post-core-color-sandgrey-060),
+  post-scheme-color-interactive-card-hover-fg: var(--post-core-color-brand-white),
   post-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-002),
   post-scheme-color-surface-default-fg: var(--post-core-color-sandgrey-100),
   post-scheme-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
@@ -138,17 +142,22 @@ $post-light: (
   post-scheme-color-surface-accent1-fg: var(--post-core-color-sandgrey-100),
   post-scheme-color-surface-alternate-bg: var(--post-core-color-sandgrey-006),
   post-scheme-color-surface-alternate-fg: var(--post-core-color-sandgrey-100),
+  post-scheme-color-surface-alternate-secondary-bg: var(--post-core-color-brand-white),
   post-scheme-color-surface-brand-bg: var(--post-core-color-brand-postyellow),
   post-scheme-color-surface-brand-fg: var(--post-core-color-sandgrey-100),
+  post-scheme-color-surface-brand-fg-accent: var(--post-core-color-sandgrey-100),
+  post-scheme-color-surface-brand-secondary-bg: var(--post-core-color-brand-white),
   post-scheme-color-surface-accent-bg: var(--post-core-color-sandgrey-080),
   post-scheme-color-surface-accent-fg: var(--post-core-color-brand-white),
   post-scheme-color-surface-accent-fg-accent: var(--post-core-color-brand-postyellow),
-  post-scheme-color-notification-badge-bg: var(--post-core-color-notification-red),
-  post-scheme-color-notification-badge-fg: var(--post-core-color-brand-white),
-  post-scheme-color-notification-badge-stroke: var(--post-core-color-brand-white),
-  post-scheme-color-notification-popover-hover: var(--post-core-color-sandgrey-020),
+  post-scheme-color-badge-bg: var(--post-core-color-notification-red),
+  post-scheme-color-badge-fg: var(--post-core-color-brand-white),
+  post-scheme-color-badge-stroke: var(--post-core-color-brand-white),
+  post-scheme-color-popover-hover: var(--post-core-color-sandgrey-020),
   post-scheme-accent-bg-scheme-1: var(--post-core-bg-scheme-light),
   post-scheme-accent-bg-scheme-2: var(--post-core-bg-scheme-dark),
+  post-scheme-accent-bg-scheme-3: var(--post-core-bg-scheme-dark),
+  post-scheme-accent-bg-scheme-4: var(--post-core-bg-scheme-light),
   post-cargo-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-002),
   post-cargo-scheme-color-surface-default-fg: var(--post-core-color-sandgrey-100),
   post-cargo-scheme-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
@@ -159,9 +168,11 @@ $post-light: (
   post-cargo-scheme-color-surface-brand-bg: var(--post-core-color-cargo-green),
   post-cargo-scheme-color-surface-brand-fg: var(--post-core-color-brand-white),
   post-cargo-scheme-color-surface-brand-fg-accent: var(--post-core-color-cargo-blue),
+  post-cargo-scheme-color-surface-brand-secondary-bg: var(--post-core-color-brand-white),
   post-cargo-scheme-color-surface-accent-bg: var(--post-core-color-cargo-blue),
   post-cargo-scheme-color-surface-accent-fg: var(--post-core-color-sandgrey-100),
   post-cargo-scheme-color-surface-accent-fg-accent: var(--post-core-color-cargo-green),
+  post-cargo-scheme-color-surface-accent-secondary-bg: var(--post-core-color-brand-white),
 );
 $post-dark: (
@@ -241,6 +252,7 @@ $post-dark: (
   post-scheme-color-interactive-primary-enabled-bg2: var(--post-core-color-brand-white),
   post-scheme-color-interactive-primary-enabled-stroke3: var(--post-core-color-sandgrey-100),
   post-scheme-color-interactive-primary-enabled-bg3: var(--post-core-color-colorless),
+  post-scheme-color-interactive-primary-enabled-stroke4: var(--post-core-color-sandgrey-030),
   post-scheme-color-interactive-primary-hover-bg: var(--post-core-color-sandgrey-070),
   post-scheme-color-interactive-primary-hover-fg1: var(--post-core-color-brand-white),
   post-scheme-color-interactive-primary-hover-stroke: var(--post-core-color-brand-white),
@@ -248,6 +260,7 @@ $post-dark: (
   post-scheme-color-interactive-primary-hover-bg2: var(--post-core-color-brand-white),
   post-scheme-color-interactive-primary-hover-stroke3: var(--post-core-color-sandgrey-070),
   post-scheme-color-interactive-primary-hover-bg3: var(--post-core-color-sandgrey-alpha-lightsand-20),
+  post-scheme-color-interactive-primary-hover-bg4: var(--post-core-color-sandgrey-006),
   post-scheme-color-interactive-primary-disabled-bg: var(--post-core-color-sandgrey-060),
   post-scheme-color-interactive-primary-disabled-fg1: var(--post-core-color-brand-white),
   post-scheme-color-interactive-primary-disabled-stroke: var(--post-core-color-brand-white),
@@ -285,13 +298,15 @@ $post-dark: (
   post-scheme-color-interactive-notification-error-stroke: var(--post-scheme-color-signal-error-dark),
   post-scheme-color-interactive-input-enabled-bg: var(--post-core-color-brand-white),
   post-scheme-color-interactive-input-enabled-fg: var(--post-core-color-sandgrey-100),
-  post-scheme-color-interactive-input-enabled-border: var(--post-core-color-sandgrey-080),
+  post-scheme-color-interactive-input-enabled-border: var(--post-core-color-sandgrey-100),
   post-scheme-color-interactive-input-hover-bg: var(--post-core-color-brand-white),
   post-scheme-color-interactive-input-hover-fg: var(--post-core-color-sandgrey-070),
   post-scheme-color-interactive-input-hover-border: var(--post-core-color-sandgrey-070),
-  post-scheme-color-interactive-input-disabled-bg: var(--post-core-color-brand-white),
-  post-scheme-color-interactive-input-disabled-fg: var(--post-core-color-sandgrey-060),
-  post-scheme-color-interactive-input-disabled-border: var(--post-core-color-sandgrey-060),
+  post-scheme-color-interactive-input-disabled-bg: var(--post-core-color-colorless),
+  post-scheme-color-interactive-input-disabled-fg: var(--post-core-color-sandgrey-alpha-lightsand-60),
+  post-scheme-color-interactive-input-disabled-border: var(--post-core-color-sandgrey-alpha-lightsand-60),
+  post-scheme-color-interactive-card-hover-bg: var(--post-core-color-sandgrey-060),
+  post-scheme-color-interactive-card-hover-fg: var(--post-core-color-brand-white),
   post-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-080),
   post-scheme-color-surface-default-fg: var(--post-core-color-brand-white),
   post-scheme-color-surface-default-stroke: var(--post-core-color-brand-white),
@@ -299,17 +314,22 @@ $post-dark: (
   post-scheme-color-surface-accent1-fg: var(--post-core-color-brand-white),
   post-scheme-color-surface-alternate-bg: var(--post-core-color-sandgrey-100),
   post-scheme-color-surface-alternate-fg: var(--post-core-color-brand-white),
+  post-scheme-color-surface-alternate-secondary-bg: var(--post-core-color-brand-white),
   post-scheme-color-surface-brand-bg: var(--post-core-color-brand-postyellow),
   post-scheme-color-surface-brand-fg: var(--post-core-color-sandgrey-100),
+  post-scheme-color-surface-brand-fg-accent: var(--post-core-color-sandgrey-100),
+  post-scheme-color-surface-brand-secondary-bg: var(--post-core-color-brand-white),
   post-scheme-color-surface-accent-bg: var(--post-core-color-sandgrey-002),
   post-scheme-color-surface-accent-fg: var(--post-core-color-sandgrey-100),
-  post-scheme-color-surface-accent-fg-accent: var(--post-core-color-brand-postyellow),
-  post-scheme-color-notification-badge-bg: var(--post-core-color-notification-red),
-  post-scheme-color-notification-badge-fg: var(--post-core-color-brand-white),
-  post-scheme-color-notification-badge-stroke: var(--post-core-color-brand-white),
-  post-scheme-color-notification-popover-hover: var(--post-core-color-sandgrey-020),
+  post-scheme-color-surface-accent-fg-accent: var(--post-core-color-sandgrey-100),
+  post-scheme-color-badge-bg: var(--post-core-color-notification-red),
+  post-scheme-color-badge-fg: var(--post-core-color-brand-white),
+  post-scheme-color-badge-stroke: var(--post-core-color-brand-white),
+  post-scheme-color-popover-hover: var(--post-core-color-sandgrey-020),
   post-scheme-accent-bg-scheme-1: var(--post-core-bg-scheme-dark),
   post-scheme-accent-bg-scheme-2: var(--post-core-bg-scheme-light),
+  post-scheme-accent-bg-scheme-3: var(--post-core-bg-scheme-dark),
+  post-scheme-accent-bg-scheme-4: var(--post-core-bg-scheme-light),
   post-cargo-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-080),
   post-cargo-scheme-color-surface-default-fg: var(--post-core-color-brand-white),
   post-cargo-scheme-color-surface-default-stroke: var(--post-core-color-brand-white),
@@ -320,7 +340,9 @@ $post-dark: (
   post-cargo-scheme-color-surface-brand-bg: var(--post-core-color-cargo-green),
   post-cargo-scheme-color-surface-brand-fg: var(--post-core-color-brand-white),
   post-cargo-scheme-color-surface-brand-fg-accent: var(--post-core-color-cargo-blue),
+  post-cargo-scheme-color-surface-brand-secondary-bg: var(--post-core-color-brand-white),
   post-cargo-scheme-color-surface-accent-bg: var(--post-core-color-cargo-blue),
   post-cargo-scheme-color-surface-accent-fg: var(--post-core-color-sandgrey-100),
   post-cargo-scheme-color-surface-accent-fg-accent: var(--post-core-color-cargo-green),
+  post-cargo-scheme-color-surface-accent-secondary-bg: var(--post-core-color-brand-white),
 );

package/_theme.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 // Do not edit manually
 // This file was generated by the swisspost/design-system-tokens package
-// Mon, 16 Dec 2024 16:43:56 GMT
+// Mon, 19 May 2025 11:16:33 GMT
 $post-post: (
   post-theme-palettes-bg-scheme-brand: var(--post-core-bg-scheme-light),
@@ -12,10 +12,17 @@ $post-post: (
   post-theme-color-palettes-default-fg: var(--post-scheme-color-surface-default-fg),
   post-theme-color-palettes-brand-bg: var(--post-scheme-color-surface-brand-bg),
   post-theme-color-palettes-brand-fg: var(--post-scheme-color-surface-brand-fg),
+  post-theme-color-palettes-brand-fg-accent: var(--post-scheme-color-surface-brand-fg-accent),
   post-theme-color-palettes-accent-bg: var(--post-scheme-color-surface-accent-bg),
   post-theme-color-palettes-accent-fg: var(--post-scheme-color-surface-accent-fg),
+  post-theme-color-palettes-accent-fg-accent: var(--post-scheme-color-surface-accent-fg-accent),
   post-theme-color-palettes-alternate-bg: var(--post-scheme-color-surface-alternate-bg),
   post-theme-color-palettes-alternate-fg: var(--post-scheme-color-surface-alternate-fg),
+  post-theme-color-palette-bg: var(--post-palette-color-post-bg),
+  post-theme-color-palette-fg: var(--post-palette-color-post-fg),
+  post-theme-color-palette-secondary: var(--post-palette-color-post-secondary),
+  post-theme-color-palette-secondary-bg: var(--post-palette-color-post-secondary-bg),
+  post-theme-color-palette-bg-scheme: var(--post-palette-color-post-bg-scheme),
 );
 $post-cargo: (
@@ -26,9 +33,16 @@ $post-cargo: (
   post-theme-color-palettes-default-bg: var(--post-cargo-scheme-color-surface-default-bg),
   post-theme-color-palettes-default-fg: var(--post-cargo-scheme-color-surface-default-fg),
   post-theme-color-palettes-brand-bg: var(--post-cargo-scheme-color-surface-brand-bg),
-  post-theme-color-palettes-brand-fg: var(--post-cargo-scheme-color-surface-brand-fg-accent),
+  post-theme-color-palettes-brand-fg: var(--post-cargo-scheme-color-surface-brand-fg),
+  post-theme-color-palettes-brand-fg-accent: var(--post-cargo-scheme-color-surface-brand-fg-accent),
   post-theme-color-palettes-accent-bg: var(--post-cargo-scheme-color-surface-accent-bg),
-  post-theme-color-palettes-accent-fg: var(--post-cargo-scheme-color-surface-accent-fg-accent),
+  post-theme-color-palettes-accent-fg: var(--post-cargo-scheme-color-surface-accent-fg),
+  post-theme-color-palettes-accent-fg-accent: var(--post-cargo-scheme-color-surface-accent-fg-accent),
   post-theme-color-palettes-alternate-bg: var(--post-cargo-scheme-color-surface-alternate-bg),
   post-theme-color-palettes-alternate-fg: var(--post-cargo-scheme-color-surface-alternate-fg),
+  post-theme-color-palette-bg: var(--post-palette-color-cargo-bg),
+  post-theme-color-palette-fg: var(--post-palette-color-cargo-fg),
+  post-theme-color-palette-secondary: var(--post-palette-color-cargo-secondary),
+  post-theme-color-palette-secondary-bg: var(--post-palette-color-cargo-secondary-bg),
+  post-theme-color-palette-bg-scheme: var(--post-palette-color-cargo-bg-scheme),
 );

package/_utilities-formatted.scss ADDED Viewed

@@ -0,0 +1,136 @@
+// Do not edit manually
+// This file was generated by the swisspost/design-system-tokens package
+// Mon, 19 May 2025 11:16:33 GMT
+$margin: (
+  0: var(--post-core-dimension-0),
+  1: var(--post-core-dimension-1),
+  2: var(--post-core-dimension-2),
+  4: var(--post-core-dimension-4),
+  6: var(--post-core-dimension-6),
+  8: var(--post-core-dimension-8),
+  12: var(--post-core-dimension-12),
+  16: var(--post-core-dimension-16),
+  24: var(--post-core-dimension-24),
+  32: var(--post-core-dimension-32),
+  40: var(--post-core-dimension-40),
+  48: var(--post-core-dimension-48),
+  56: var(--post-core-dimension-56),
+  64: var(--post-core-dimension-64),
+  72: var(--post-core-dimension-72),
+  80: var(--post-core-dimension-80),
+  88: var(--post-core-dimension-88),
+  96: var(--post-core-dimension-96),
+  104: var(--post-core-dimension-104),
+  auto: auto,
+);
+$padding: (
+  0: var(--post-core-dimension-0),
+  1: var(--post-core-dimension-1),
+  2: var(--post-core-dimension-2),
+  4: var(--post-core-dimension-4),
+  6: var(--post-core-dimension-6),
+  8: var(--post-core-dimension-8),
+  12: var(--post-core-dimension-12),
+  16: var(--post-core-dimension-16),
+  24: var(--post-core-dimension-24),
+  32: var(--post-core-dimension-32),
+  40: var(--post-core-dimension-40),
+  48: var(--post-core-dimension-48),
+  56: var(--post-core-dimension-56),
+  64: var(--post-core-dimension-64),
+  72: var(--post-core-dimension-72),
+  80: var(--post-core-dimension-80),
+  88: var(--post-core-dimension-88),
+  96: var(--post-core-dimension-96),
+  104: var(--post-core-dimension-104),
+  auto: auto,
+);
+$gap: (
+  0: var(--post-core-dimension-0),
+  1: var(--post-core-dimension-1),
+  2: var(--post-core-dimension-2),
+  4: var(--post-core-dimension-4),
+  6: var(--post-core-dimension-6),
+  8: var(--post-core-dimension-8),
+  12: var(--post-core-dimension-12),
+  16: var(--post-core-dimension-16),
+  24: var(--post-core-dimension-24),
+  32: var(--post-core-dimension-32),
+  40: var(--post-core-dimension-40),
+  48: var(--post-core-dimension-48),
+  56: var(--post-core-dimension-56),
+  64: var(--post-core-dimension-64),
+  72: var(--post-core-dimension-72),
+  80: var(--post-core-dimension-80),
+  88: var(--post-core-dimension-88),
+  96: var(--post-core-dimension-96),
+  104: var(--post-core-dimension-104),
+  auto: auto,
+);
+$surface: (
+  default: var(--post-core-color-sandgrey-002),
+  accent1: var(--post-core-color-brand-white),
+  accent2: var(--post-core-color-sandgrey-006),
+  accent3: var(--post-core-color-brand-postyellow),
+  accent4: var(--post-core-color-sandgrey-080),
+);
+$elevation: (
+  100: var(--post-device-elevation-100),
+  200: var(--post-device-elevation-200),
+  300: var(--post-device-elevation-300),
+  400: var(--post-device-elevation-400),
+  500: var(--post-device-elevation-500),
+);
+$border-width: (
+  1: var(--post-core-dimension-1),
+  2: var(--post-core-dimension-2),
+);
+$border-radius: (
+  4: var(--post-core-dimension-4),
+  8: var(--post-core-dimension-8),
+);
+$border-default: (
+  width: var(--post-core-dimension-1),
+  radius: var(--post-core-dimension-4),
+  color: var(--post-scheme-color-surface-default-stroke),
+);
+$font-weight: (
+  regular: var(--post-core-font-weight-400),
+  bold: var(--post-core-font-weight-700),
+  black: var(--post-core-font-weight-900),
+);
+$line-height: (
+  1: var(--post-core-line-height-100),
+  sm: var(--post-core-line-height-120),
+  lg: var(--post-core-line-height-150),
+);
+$letter-spacing: (
+  none: var(--post-core-letter-spacing-none),
+  default: var(--post-core-letter-spacing-default),
+);
+$font-size: (
+  1: var(--post-device-font-size-1),
+  2: var(--post-device-font-size-2),
+  3: var(--post-device-font-size-3),
+  4: var(--post-device-font-size-4),
+  5: var(--post-device-font-size-5),
+  6: var(--post-device-font-size-6),
+  7: var(--post-device-font-size-7),
+  8: var(--post-device-font-size-8),
+  9: var(--post-device-font-size-9),
+  10: var(--post-device-font-size-10),
+  11: var(--post-device-font-size-11),
+);

package/_utilities.scss CHANGED Viewed

@@ -1,112 +1,69 @@
 // Do not edit manually
 // This file was generated by the swisspost/design-system-tokens package
-// Mon, 16 Dec 2024 16:43:56 GMT
+// Mon, 19 May 2025 11:16:33 GMT
 $post-spacing: (
   post-utility-margin-0: var(--post-core-dimension-0),
   post-utility-margin-1: var(--post-core-dimension-1),
   post-utility-margin-2: var(--post-core-dimension-2),
-  post-utility-margin-3: var(--post-core-dimension-3),
   post-utility-margin-4: var(--post-core-dimension-4),
-  post-utility-margin-5: var(--post-core-dimension-5),
   post-utility-margin-6: var(--post-core-dimension-6),
   post-utility-margin-8: var(--post-core-dimension-8),
-  post-utility-margin-10: var(--post-core-dimension-10),
-  post-utility-margin-11: var(--post-core-dimension-11),
   post-utility-margin-12: var(--post-core-dimension-12),
-  post-utility-margin-14: var(--post-core-dimension-14),
-  post-utility-margin-15: var(--post-core-dimension-15),
   post-utility-margin-16: var(--post-core-dimension-16),
-  post-utility-margin-18: var(--post-core-dimension-18),
-  post-utility-margin-19: var(--post-core-dimension-19),
-  post-utility-margin-20: var(--post-core-dimension-20),
-  post-utility-margin-22: var(--post-core-dimension-22),
   post-utility-margin-24: var(--post-core-dimension-24),
-  post-utility-margin-26: var(--post-core-dimension-26),
-  post-utility-margin-28: var(--post-core-dimension-28),
-  post-utility-margin-30: var(--post-core-dimension-30),
   post-utility-margin-32: var(--post-core-dimension-32),
-  post-utility-margin-34: var(--post-core-dimension-34),
-  post-utility-margin-36: var(--post-core-dimension-36),
   post-utility-margin-40: var(--post-core-dimension-40),
   post-utility-margin-48: var(--post-core-dimension-48),
   post-utility-margin-56: var(--post-core-dimension-56),
   post-utility-margin-64: var(--post-core-dimension-64),
-  post-utility-margin-78: var(--post-core-dimension-78),
+  post-utility-margin-72: var(--post-core-dimension-72),
   post-utility-margin-80: var(--post-core-dimension-80),
+  post-utility-margin-88: var(--post-core-dimension-88),
   post-utility-margin-96: var(--post-core-dimension-96),
-  post-utility-margin-100: var(--post-core-dimension-100),
-  post-utility-margin-112: var(--post-core-dimension-112),
+  post-utility-margin-104: var(--post-core-dimension-104),
   post-utility-margin-auto: auto,
   post-utility-padding-0: var(--post-core-dimension-0),
   post-utility-padding-1: var(--post-core-dimension-1),
   post-utility-padding-2: var(--post-core-dimension-2),
-  post-utility-padding-3: var(--post-core-dimension-3),
   post-utility-padding-4: var(--post-core-dimension-4),
-  post-utility-padding-5: var(--post-core-dimension-5),
   post-utility-padding-6: var(--post-core-dimension-6),
   post-utility-padding-8: var(--post-core-dimension-8),
-  post-utility-padding-10: var(--post-core-dimension-10),
-  post-utility-padding-11: var(--post-core-dimension-11),
   post-utility-padding-12: var(--post-core-dimension-12),
-  post-utility-padding-14: var(--post-core-dimension-14),
-  post-utility-padding-15: var(--post-core-dimension-15),
   post-utility-padding-16: var(--post-core-dimension-16),
-  post-utility-padding-18: var(--post-core-dimension-18),
-  post-utility-padding-19: var(--post-core-dimension-19),
-  post-utility-padding-20: var(--post-core-dimension-20),
-  post-utility-padding-22: var(--post-core-dimension-22),
   post-utility-padding-24: var(--post-core-dimension-24),
-  post-utility-padding-26: var(--post-core-dimension-26),
-  post-utility-padding-28: var(--post-core-dimension-28),
-  post-utility-padding-30: var(--post-core-dimension-30),
   post-utility-padding-32: var(--post-core-dimension-32),
-  post-utility-padding-34: var(--post-core-dimension-34),
-  post-utility-padding-36: var(--post-core-dimension-36),
   post-utility-padding-40: var(--post-core-dimension-40),
   post-utility-padding-48: var(--post-core-dimension-48),
   post-utility-padding-56: var(--post-core-dimension-56),
   post-utility-padding-64: var(--post-core-dimension-64),
-  post-utility-padding-78: var(--post-core-dimension-78),
+  post-utility-padding-72: var(--post-core-dimension-72),
   post-utility-padding-80: var(--post-core-dimension-80),
+  post-utility-padding-88: var(--post-core-dimension-88),
   post-utility-padding-96: var(--post-core-dimension-96),
-  post-utility-padding-100: var(--post-core-dimension-100),
-  post-utility-padding-112: var(--post-core-dimension-112),
+  post-utility-padding-104: var(--post-core-dimension-104),
+  post-utility-padding-auto: auto,
   post-utility-gap-0: var(--post-core-dimension-0),
   post-utility-gap-1: var(--post-core-dimension-1),
   post-utility-gap-2: var(--post-core-dimension-2),
-  post-utility-gap-3: var(--post-core-dimension-3),
   post-utility-gap-4: var(--post-core-dimension-4),
-  post-utility-gap-5: var(--post-core-dimension-5),
   post-utility-gap-6: var(--post-core-dimension-6),
   post-utility-gap-8: var(--post-core-dimension-8),
-  post-utility-gap-10: var(--post-core-dimension-10),
-  post-utility-gap-11: var(--post-core-dimension-11),
   post-utility-gap-12: var(--post-core-dimension-12),
-  post-utility-gap-14: var(--post-core-dimension-14),
-  post-utility-gap-15: var(--post-core-dimension-15),
   post-utility-gap-16: var(--post-core-dimension-16),
-  post-utility-gap-18: var(--post-core-dimension-18),
-  post-utility-gap-19: var(--post-core-dimension-19),
-  post-utility-gap-20: var(--post-core-dimension-20),
-  post-utility-gap-22: var(--post-core-dimension-22),
   post-utility-gap-24: var(--post-core-dimension-24),
-  post-utility-gap-26: var(--post-core-dimension-26),
-  post-utility-gap-28: var(--post-core-dimension-28),
-  post-utility-gap-30: var(--post-core-dimension-30),
   post-utility-gap-32: var(--post-core-dimension-32),
-  post-utility-gap-34: var(--post-core-dimension-34),
-  post-utility-gap-36: var(--post-core-dimension-36),
   post-utility-gap-40: var(--post-core-dimension-40),
   post-utility-gap-48: var(--post-core-dimension-48),
   post-utility-gap-56: var(--post-core-dimension-56),
   post-utility-gap-64: var(--post-core-dimension-64),
-  post-utility-gap-78: var(--post-core-dimension-78),
+  post-utility-gap-72: var(--post-core-dimension-72),
   post-utility-gap-80: var(--post-core-dimension-80),
+  post-utility-gap-88: var(--post-core-dimension-88),
   post-utility-gap-96: var(--post-core-dimension-96),
-  post-utility-gap-100: var(--post-core-dimension-100),
-  post-utility-gap-112: var(--post-core-dimension-112),
+  post-utility-gap-104: var(--post-core-dimension-104),
+  post-utility-gap-auto: auto,
 );
 $post-color: (
@@ -117,10 +74,25 @@ $post-color: (
   post-utility-surface-accent4: var(--post-core-color-sandgrey-080),
 );
+$post-elevation: (
+  post-utility-elevation-100: var(--post-device-elevation-100),
+  post-utility-elevation-200: var(--post-device-elevation-200),
+  post-utility-elevation-300: var(--post-device-elevation-300),
+  post-utility-elevation-400: var(--post-device-elevation-400),
+  post-utility-elevation-500: var(--post-device-elevation-500),
+);
+$post-border: (
+  post-utility-border-width-1: var(--post-core-dimension-1),
+  post-utility-border-width-2: var(--post-core-dimension-2),
+  post-utility-border-radius-4: var(--post-core-dimension-4),
+  post-utility-border-radius-8: var(--post-core-dimension-8),
+  post-utility-border-default-width: var(--post-core-dimension-1),
+  post-utility-border-default-radius: var(--post-core-dimension-4),
+  post-utility-border-default-color: var(--post-scheme-color-surface-default-stroke),
+);
 $post-typo: (
-  post-utility-font-size-sm: var(--post-device-font-size-7),
-  post-utility-font-size-md: var(--post-device-font-size-6),
-  post-utility-font-size-lg: var(--post-device-font-size-5),
   post-utility-font-weight-regular: var(--post-core-font-weight-400),
   post-utility-font-weight-bold: var(--post-core-font-weight-700),
   post-utility-font-weight-black: var(--post-core-font-weight-900),
@@ -129,4 +101,15 @@ $post-typo: (
   post-utility-line-height-lg: var(--post-core-line-height-150),
   post-utility-letter-spacing-none: var(--post-core-letter-spacing-none),
   post-utility-letter-spacing-default: var(--post-core-letter-spacing-default),
+  post-utility-font-size-1: var(--post-device-font-size-1),
+  post-utility-font-size-2: var(--post-device-font-size-2),
+  post-utility-font-size-3: var(--post-device-font-size-3),
+  post-utility-font-size-4: var(--post-device-font-size-4),
+  post-utility-font-size-5: var(--post-device-font-size-5),
+  post-utility-font-size-6: var(--post-device-font-size-6),
+  post-utility-font-size-7: var(--post-device-font-size-7),
+  post-utility-font-size-8: var(--post-device-font-size-8),
+  post-utility-font-size-9: var(--post-device-font-size-9),
+  post-utility-font-size-10: var(--post-device-font-size-10),
+  post-utility-font-size-11: var(--post-device-font-size-11),
 );

package/package.json CHANGED Viewed

@@ -1,9 +1,11 @@
 {
   "name": "@swisspost/design-system-tokens",
-  "version": "9.0.0-next.9",
+  "version": "10.0.0-next.38",
   "description": "Design Tokens for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
+  "private": false,
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/swisspost/design-system.git"
@@ -12,30 +14,34 @@
   "bugs": {
     "url": "https://github.com/swisspost/design-system/issues"
   },
-  "type": "module",
-  "keywords": [
-    "tokens",
-    "tokens studio",
-    "scss",
-    "design-system",
-    "ui",
-    "frontend"
-  ],
   "publishConfig": {
     "directory": "./dist",
     "access": "public",
     "linkDirectory": true
   },
   "devDependencies": {
-    "@tokens-studio/sd-transforms": "1.2.2",
+    "@eslint/js": "9.18.0",
+    "@tokens-studio/sd-transforms": "1.2.9",
     "copyfiles": "2.4.1",
+    "eslint": "9.18.0",
+    "globals": "16.0.0",
     "rimraf": "6.0.1",
-    "style-dictionary": "4.0.1"
+    "style-dictionary": "4.3.0"
   },
+  "keywords": [
+    "tokens",
+    "tokens studio",
+    "scss",
+    "design-system",
+    "ui",
+    "frontend"
+  ],
   "scripts": {
-    "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist",
     "build": "pnpm clean && node ./build.js && pnpm copy-files",
+    "build:verbose": "node ./build.js --verbosity=verbose",
     "clean": "rimraf dist",
-    "build:verbose": "node ./build.js --verbosity=verbose"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist"
   }
 }

package/palettes/_cargo-dark.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 // Do not edit manually
 // This file was generated by the swisspost/design-system-tokens package
-// Mon, 16 Dec 2024 16:43:56 GMT
+// Mon, 19 May 2025 11:16:33 GMT
 $post-palettes: (
   post-palettes-color-default-bg: #373632,

package/palettes/_cargo-light.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 // Do not edit manually
 // This file was generated by the swisspost/design-system-tokens package
-// Mon, 16 Dec 2024 16:43:56 GMT
+// Mon, 19 May 2025 11:16:33 GMT
 $post-palettes: (
   post-palettes-color-default-bg: #fafafa,

package/palettes/_post-dark.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 // Do not edit manually
 // This file was generated by the swisspost/design-system-tokens package
-// Mon, 16 Dec 2024 16:43:56 GMT
+// Mon, 19 May 2025 11:16:33 GMT
 $post-palettes: (
   post-palettes-color-default-bg: #373632,

package/palettes/_post-light.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 // Do not edit manually
 // This file was generated by the swisspost/design-system-tokens package
-// Mon, 16 Dec 2024 16:43:56 GMT
+// Mon, 19 May 2025 11:16:33 GMT
 $post-palettes: (
   post-palettes-color-default-bg: #fafafa,
@@ -14,6 +14,6 @@ $post-palettes: (
   post-palettes-color-brand-fg: #050400,
   post-palettes-color-brand-bg-scheme: light,
   post-palettes-color-accent-bg: #373632,
-  post-palettes-color-accent-fg: #ffffff,
+  post-palettes-color-accent-fg: #ffcc00,
   post-palettes-color-accent-bg-scheme: dark,
 );

package/tailwind/helpers.tailwind.js CHANGED Viewed

@@ -1,7 +1,7 @@
 // Do not edit manually
 // This file was generated by the swisspost/design-system-tokens package
-// Mon, 16 Dec 2024 16:43:56 GMT
+// Mon, 19 May 2025 11:16:33 GMT
 export default {
   focus: {