@swisspost/design-system-tokens 10.0.0-next.42 → 10.0.0-next.43

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 (25) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/_channel.scss +1 -1
  3. package/_components.scss +14 -1
  4. package/_core.scss +2 -1
  5. package/_device.scss +4 -1
  6. package/_elements.scss +4 -3
  7. package/_helpers.scss +1 -1
  8. package/_index.scss +3 -3
  9. package/_palette.scss +29 -41
  10. package/_scheme.scss +5 -9
  11. package/_schemestatic.scss +56 -0
  12. package/_theme.scss +61 -39
  13. package/_utilities-formatted.scss +2 -1
  14. package/_utilities.scss +2 -1
  15. package/package.json +1 -1
  16. package/tailwind/helpers.tailwind.css +17 -0
  17. package/tailwind/utilities.tailwind.css +108 -0
  18. package/tokens.json +741 -458
  19. package/_palettes.scss +0 -19
  20. package/palettes/_cargo-dark.scss +0 -19
  21. package/palettes/_cargo-light.scss +0 -19
  22. package/palettes/_post-dark.scss +0 -19
  23. package/palettes/_post-light.scss +0 -19
  24. package/tailwind/helpers.tailwind.js +0 -17
  25. package/tailwind/utilities.tailwind.js +0 -129
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @swisspost/design-system-tokens
2
2
 
3
+ ## 10.0.0-next.43
4
+
5
+ ### Major Changes
6
+
7
+ - Updated color palettes to use the `light-dark()` CSS function for setting component color schemes on supporting browsers. A fallback solution is included for unsupported browsers.
8
+
9
+ Palettes now require adding the `.palette` class in addition to existing palette classes (e.g., `.palette-default`, `.palette-brand`).
10
+
11
+ BEFORE:
12
+
13
+ ```html
14
+ <div class="palette-brand">Content</div>
15
+ ```
16
+
17
+ AFTER:
18
+
19
+ ```html
20
+ <div class="palette palette-brand">Content</div>
21
+ ```
22
+
23
+ Also renamed the following CSS custom properties:
24
+
25
+ - `--post-current-palette-fg` → `--post-current-fg`
26
+ - `--post-current-palette-bg` → `--post-current-bg` (by [@alizedebray](https://github.com/alizedebray) with [#5250](https://github.com/swisspost/design-system/pull/5250))
27
+
3
28
  ## 10.0.0-next.42
4
29
 
5
30
  ## 10.0.0-next.41
package/_channel.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-edk: (
7
7
  keep: undefined,
package/_components.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-accordion: (
7
7
  post-accordion-header-padding-block-closed: var(--post-device-spacing-padding-19),
@@ -213,6 +213,9 @@ $post-cards: (
213
213
  post-card-border-radius: var(--post-device-border-radius-2),
214
214
  post-card-interactive-elevation: var(--post-device-elevation-200),
215
215
  post-card-non-interactive-stroke: var(--post-scheme-color-interactive-primary-enabled-stroke4),
216
+ post-card-bg: var(--post-palette-color-nested-bg),
217
+ post-card-fg: var(--post-palette-color-nested-fg),
218
+ post-card-scheme: var(--post-palette-color-nested-scheme),
216
219
  post-card-enabled-bg1: var(--post-theme-color-palettes-alternate-bg),
217
220
  post-card-enabled-bg2: var(--post-theme-color-palettes-default-bg),
218
221
  post-card-hover-bg: var(--post-scheme-color-interactive-card-hover-bg),
@@ -528,6 +531,16 @@ $post-listcheck: (
528
531
  post-list-check-color-text-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
529
532
  );
530
533
 
534
+ $post-palettes: (
535
+ post-palettes-bg: var(--post-palette-color-bg),
536
+ post-palettes-fg: var(--post-palette-color-fg),
537
+ post-palettes-fg-secondary: var(--post-palette-color-fg-secondary),
538
+ post-palettes-nested-bg: var(--post-palette-color-nested-bg),
539
+ post-palettes-nested-fg: var(--post-palette-color-nested-fg),
540
+ post-palettes-nested-scheme: var(--post-palette-color-nested-scheme),
541
+ post-palettes-scheme: var(--post-palette-color-scheme),
542
+ );
543
+
531
544
  $post-popover: (
532
545
  post-popover-close-button-enabled-fg: var(--post-scheme-color-surface-accent-fg),
533
546
  post-popover-close-button-selected-fg: var(--post-scheme-color-surface-accent-fg),
package/_core.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  :root {
7
7
  --post-core-color-brand-postyellow: #ffcc00;
@@ -119,6 +119,7 @@
119
119
  --post-core-font-weight-400: 400;
120
120
  --post-core-font-weight-700: 700;
121
121
  --post-core-font-weight-900: 900;
122
+ --post-core-font-weight-950: 950;
122
123
  --post-core-font-size-10: 0.625rem;
123
124
  --post-core-font-size-12: 0.75rem;
124
125
  --post-core-font-size-14: 0.875rem;
package/_device.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-desktop: (
7
7
  post-device-font-size-1: var(--post-core-font-size-40),
@@ -140,6 +140,7 @@ $post-desktop: (
140
140
  post-device-font-weight-bold: var(--post-core-font-weight-700),
141
141
  post-device-font-weight-regular: var(--post-core-font-weight-400),
142
142
  post-device-font-weight-black: var(--post-core-font-weight-900),
143
+ post-device-font-weight-extra-black: var(--post-core-font-weight-950),
143
144
  post-device-line-height-heading: var(--post-core-line-height-120),
144
145
  post-device-line-height-content: var(--post-core-line-height-150),
145
146
  post-device-line-height-legend: var(--post-core-line-height-120),
@@ -295,6 +296,7 @@ $post-tablet: (
295
296
  post-device-font-weight-bold: var(--post-core-font-weight-700),
296
297
  post-device-font-weight-regular: var(--post-core-font-weight-400),
297
298
  post-device-font-weight-black: var(--post-core-font-weight-900),
299
+ post-device-font-weight-extra-black: var(--post-core-font-weight-950),
298
300
  post-device-line-height-heading: var(--post-core-line-height-120),
299
301
  post-device-line-height-content: var(--post-core-line-height-150),
300
302
  post-device-line-height-legend: var(--post-core-line-height-120),
@@ -450,6 +452,7 @@ $post-mobile: (
450
452
  post-device-font-weight-bold: var(--post-core-font-weight-700),
451
453
  post-device-font-weight-regular: var(--post-core-font-weight-400),
452
454
  post-device-font-weight-black: var(--post-core-font-weight-900),
455
+ post-device-font-weight-extra-black: var(--post-core-font-weight-950),
453
456
  post-device-line-height-heading: var(--post-core-line-height-120),
454
457
  post-device-line-height-content: var(--post-core-line-height-150),
455
458
  post-device-line-height-legend: var(--post-core-line-height-120),
package/_elements.scss CHANGED
@@ -1,15 +1,16 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-body: (
7
+ post-body-color-bg: var(--post-theme-color-body-bg),
8
+ post-body-color-fg: var(--post-theme-color-body-fg),
7
9
  post-body-font-family: var(--post-device-font-family-default),
8
10
  post-body-font-size: var(--post-device-font-size-6),
9
11
  post-body-font-weight: var(--post-device-font-weight-regular),
10
12
  post-body-line-height: var(--post-device-line-height-content),
11
13
  post-body-letter-spacing: var(--post-core-letter-spacing-default),
12
- post-body-color: var(--post-scheme-color-surface-default-fg),
13
14
  );
14
15
 
15
16
  $post-heading: (
@@ -32,7 +33,7 @@ $post-heading: (
32
33
  post-h6-margin-block-start: var(--post-device-spacing-margin-1),
33
34
  post-h6-margin-block-end: var(--post-device-spacing-margin-3),
34
35
  post-heading-line-height: var(--post-device-line-height-heading),
35
- post-heading-font-weight: var(--post-device-font-weight-black),
36
+ post-heading-font-weight: var(--post-device-font-weight-extra-black),
36
37
  );
37
38
 
38
39
  $post-paragraph: (
package/_helpers.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-focus: (
7
7
  post-focus-outline-offset: var(--post-device-spacing-padding-2),
package/_index.scss CHANGED
@@ -1,15 +1,15 @@
1
1
  // Do not edit manually
2
2
  // This file was generated by the swisspost/design-system-tokens package
3
- // Tue, 22 Jul 2025 07:22:42 GMT
3
+ // Thu, 14 Aug 2025 15:00:18 GMT
4
4
 
5
5
  @use './core';
6
+ @forward './schemestatic';
6
7
  @forward './scheme';
7
8
  @forward './device';
8
9
  @forward './channel';
9
- @forward './palette';
10
10
  @forward './theme';
11
+ @forward './palette';
11
12
  @forward './elements';
12
13
  @forward './components';
13
14
  @forward './utilities';
14
- @forward './palettes';
15
15
  @forward './helpers';
package/_palette.scss CHANGED
@@ -1,56 +1,44 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-default: (
7
- post-palette-color-post-bg: var(--post-scheme-color-surface-default-bg),
8
- post-palette-color-post-fg: var(--post-scheme-color-surface-default-fg),
9
- post-palette-color-post-secondary: var(--post-scheme-color-surface-default-fg),
10
- post-palette-color-post-secondary-bg: var(--post-scheme-color-surface-alternate-bg),
11
- post-palette-color-post-bg-scheme: var(--post-scheme-accent-bg-scheme-1),
12
- post-palette-color-cargo-bg: var(--post-cargo-scheme-color-surface-default-bg),
13
- post-palette-color-cargo-fg: var(--post-cargo-scheme-color-surface-default-fg),
14
- post-palette-color-cargo-secondary: var(--post-cargo-scheme-color-surface-default-fg),
15
- post-palette-color-cargo-secondary-bg: var(--post-cargo-scheme-color-surface-alternate-bg),
16
- post-palette-color-cargo-bg-scheme: var(--post-scheme-accent-bg-scheme-1),
7
+ post-palette-color-scheme: var(--post-theme-color-palettes-default-scheme),
8
+ post-palette-color-bg: var(--post-theme-color-palettes-default-bg),
9
+ post-palette-color-fg: var(--post-theme-color-palettes-default-fg),
10
+ post-palette-color-fg-secondary: var(--post-theme-color-palettes-default-fg-secondary),
11
+ post-palette-color-nested-bg: var(--post-theme-color-palettes-default-nested-bg),
12
+ post-palette-color-nested-fg: var(--post-theme-color-palettes-default-nested-fg),
13
+ post-palette-color-nested-scheme: var(--post-theme-color-palettes-default-nested-scheme),
17
14
  );
18
15
 
19
16
  $post-alternate: (
20
- post-palette-color-post-bg: var(--post-scheme-color-surface-alternate-bg),
21
- post-palette-color-post-fg: var(--post-scheme-color-surface-alternate-fg),
22
- post-palette-color-post-secondary: var(--post-scheme-color-surface-alternate-fg),
23
- post-palette-color-post-secondary-bg: var(--post-scheme-color-surface-default-bg),
24
- post-palette-color-post-bg-scheme: var(--post-scheme-accent-bg-scheme-1),
25
- post-palette-color-cargo-bg: var(--post-cargo-scheme-color-surface-alternate-bg),
26
- post-palette-color-cargo-fg: var(--post-cargo-scheme-color-surface-alternate-fg),
27
- post-palette-color-cargo-secondary: var(--post-cargo-scheme-color-surface-alternate-fg),
28
- post-palette-color-cargo-secondary-bg: var(--post-cargo-scheme-color-surface-default-bg),
29
- post-palette-color-cargo-bg-scheme: var(--post-scheme-accent-bg-scheme-1),
17
+ post-palette-color-scheme: var(--post-theme-color-palettes-alternate-scheme),
18
+ post-palette-color-bg: var(--post-theme-color-palettes-alternate-bg),
19
+ post-palette-color-fg: var(--post-theme-color-palettes-alternate-fg),
20
+ post-palette-color-fg-secondary: var(--post-theme-color-palettes-alternate-fg-secondary),
21
+ post-palette-color-nested-bg: var(--post-theme-color-palettes-alternate-nested-bg),
22
+ post-palette-color-nested-fg: var(--post-theme-color-palettes-alternate-nested-fg),
23
+ post-palette-color-nested-scheme: var(--post-theme-color-palettes-alternate-nested-scheme),
30
24
  );
31
25
 
32
26
  $post-accent: (
33
- post-palette-color-post-bg: var(--post-scheme-color-surface-accent-bg),
34
- post-palette-color-post-fg: var(--post-scheme-color-surface-accent-fg),
35
- post-palette-color-post-secondary: var(--post-scheme-color-surface-accent-fg-accent),
36
- post-palette-color-post-secondary-bg: var(--post-scheme-color-surface-accent-secondary-bg),
37
- post-palette-color-post-bg-scheme: var(--post-scheme-accent-bg-scheme-3),
38
- post-palette-color-cargo-bg: var(--post-cargo-scheme-color-surface-accent-bg),
39
- post-palette-color-cargo-fg: var(--post-cargo-scheme-color-surface-accent-fg),
40
- post-palette-color-cargo-secondary: var(--post-cargo-scheme-color-surface-accent-fg-accent),
41
- post-palette-color-cargo-secondary-bg: var(--post-cargo-scheme-color-surface-accent-secondary-bg),
42
- post-palette-color-cargo-bg-scheme: var(--post-scheme-accent-bg-scheme-4),
27
+ post-palette-color-scheme: var(--post-theme-color-palettes-accent-scheme),
28
+ post-palette-color-bg: var(--post-theme-color-palettes-accent-bg),
29
+ post-palette-color-fg: var(--post-theme-color-palettes-accent-fg),
30
+ post-palette-color-fg-secondary: var(--post-theme-color-palettes-accent-fg-secondary),
31
+ post-palette-color-nested-bg: var(--post-theme-color-palettes-accent-nested-bg),
32
+ post-palette-color-nested-fg: var(--post-theme-color-palettes-accent-nested-fg),
33
+ post-palette-color-nested-scheme: var(--post-theme-color-palettes-accent-nested-scheme),
43
34
  );
44
35
 
45
36
  $post-brand: (
46
- post-palette-color-post-bg: var(--post-scheme-color-surface-brand-bg),
47
- post-palette-color-post-fg: var(--post-scheme-color-surface-brand-fg),
48
- post-palette-color-post-secondary: var(--post-scheme-color-surface-brand-fg-accent),
49
- post-palette-color-post-secondary-bg: var(--post-scheme-color-surface-brand-secondary-bg),
50
- post-palette-color-post-bg-scheme: var(--post-scheme-accent-bg-scheme-4),
51
- post-palette-color-cargo-bg: var(--post-cargo-scheme-color-surface-brand-bg),
52
- post-palette-color-cargo-fg: var(--post-cargo-scheme-color-surface-brand-fg),
53
- post-palette-color-cargo-secondary: var(--post-cargo-scheme-color-surface-brand-fg-accent),
54
- post-palette-color-cargo-secondary-bg: var(--post-cargo-scheme-color-surface-brand-secondary-bg),
55
- post-palette-color-cargo-bg-scheme: var(--post-scheme-accent-bg-scheme-3),
37
+ post-palette-color-scheme: var(--post-theme-color-palettes-brand-scheme),
38
+ post-palette-color-bg: var(--post-theme-color-palettes-brand-bg),
39
+ post-palette-color-fg: var(--post-theme-color-palettes-brand-fg),
40
+ post-palette-color-fg-secondary: var(--post-theme-color-palettes-brand-fg-secondary),
41
+ post-palette-color-nested-bg: var(--post-theme-color-palettes-brand-nested-bg),
42
+ post-palette-color-nested-fg: var(--post-theme-color-palettes-brand-nested-fg),
43
+ post-palette-color-nested-scheme: var(--post-theme-color-palettes-brand-nested-scheme),
56
44
  );
package/_scheme.scss CHANGED
@@ -1,9 +1,11 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-light: (
7
+ post-scheme-color-body-bg: var(--post-core-color-sandgrey-002),
8
+ post-scheme-color-body-fg: var(--post-core-color-sandgrey-100),
7
9
  post-scheme-color-signal-success-dark: var(--post-core-color-notification-green),
8
10
  post-scheme-color-signal-success-light: var(--post-core-color-notification-green-light),
9
11
  post-scheme-color-signal-error-dark: var(--post-core-color-notification-red),
@@ -154,10 +156,6 @@ $post-light: (
154
156
  post-scheme-color-badge-fg: var(--post-core-color-brand-white),
155
157
  post-scheme-color-badge-stroke: var(--post-core-color-brand-white),
156
158
  post-scheme-color-popover-hover: var(--post-core-color-sandgrey-020),
157
- post-scheme-accent-bg-scheme-1: var(--post-core-bg-scheme-light),
158
- post-scheme-accent-bg-scheme-2: var(--post-core-bg-scheme-dark),
159
- post-scheme-accent-bg-scheme-3: var(--post-core-bg-scheme-dark),
160
- post-scheme-accent-bg-scheme-4: var(--post-core-bg-scheme-light),
161
159
  post-cargo-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-002),
162
160
  post-cargo-scheme-color-surface-default-fg: var(--post-core-color-sandgrey-100),
163
161
  post-cargo-scheme-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
@@ -176,6 +174,8 @@ $post-light: (
176
174
  );
177
175
 
178
176
  $post-dark: (
177
+ post-scheme-color-body-bg: var(--post-core-color-sandgrey-080),
178
+ post-scheme-color-body-fg: var(--post-core-color-brand-white),
179
179
  post-scheme-color-signal-success-dark: var(--post-core-color-notification-green),
180
180
  post-scheme-color-signal-success-light: var(--post-core-color-notification-green-light),
181
181
  post-scheme-color-signal-error-dark: var(--post-core-color-notification-red),
@@ -326,10 +326,6 @@ $post-dark: (
326
326
  post-scheme-color-badge-fg: var(--post-core-color-brand-white),
327
327
  post-scheme-color-badge-stroke: var(--post-core-color-brand-white),
328
328
  post-scheme-color-popover-hover: var(--post-core-color-sandgrey-020),
329
- post-scheme-accent-bg-scheme-1: var(--post-core-bg-scheme-dark),
330
- post-scheme-accent-bg-scheme-2: var(--post-core-bg-scheme-light),
331
- post-scheme-accent-bg-scheme-3: var(--post-core-bg-scheme-dark),
332
- post-scheme-accent-bg-scheme-4: var(--post-core-bg-scheme-light),
333
329
  post-cargo-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-080),
334
330
  post-cargo-scheme-color-surface-default-fg: var(--post-core-color-brand-white),
335
331
  post-cargo-scheme-color-surface-default-stroke: var(--post-core-color-brand-white),
package/_schemestatic.scss ADDED
@@ -0,0 +1,56 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
+
6
+ $post-light: (
7
+ post-scheme-even: var(--post-core-bg-scheme-light),
8
+ post-scheme-swapped: var(--post-core-bg-scheme-dark),
9
+ post-scheme-light: var(--post-core-bg-scheme-light),
10
+ post-scheme-dark: var(--post-core-bg-scheme-dark),
11
+ post-scheme-color-palette-bg-1: var(--post-core-color-sandgrey-002),
12
+ post-scheme-color-palette-bg-2: var(--post-core-color-sandgrey-006),
13
+ post-scheme-color-palette-bg-3: var(--post-core-color-brand-postyellow),
14
+ post-scheme-color-palette-bg-4: var(--post-core-color-sandgrey-080),
15
+ post-scheme-color-palette-bg-5: var(--post-core-color-cargo-blue),
16
+ post-scheme-color-palette-bg-6: var(--post-core-color-cargo-green),
17
+ post-scheme-color-palette-bg-7: var(--post-core-color-sandgrey-006),
18
+ post-scheme-color-palette-fg-1: var(--post-core-color-sandgrey-100),
19
+ post-scheme-color-palette-fg-2: var(--post-core-color-brand-white),
20
+ post-scheme-color-palette-fg-3: var(--post-core-color-sandgrey-100),
21
+ post-scheme-color-palette-fg-4: var(--post-core-color-brand-white),
22
+ post-scheme-color-palette-stroke-1: var(--post-core-color-sandgrey-100),
23
+ post-scheme-color-palette-fg-secondary-2: var(--post-core-color-cargo-blue),
24
+ post-scheme-color-palette-fg-secondary-3: var(--post-core-color-cargo-green),
25
+ post-scheme-color-palette-nested-bg-1: var(--post-core-color-sandgrey-006),
26
+ post-scheme-color-palette-nested-bg-2: var(--post-core-color-brand-white),
27
+ post-scheme-color-palette-nested-bg-3: var(--post-core-color-brand-white),
28
+ post-scheme-color-palette-nested-fg-1: var(--post-core-color-brand-black),
29
+ post-scheme-color-palette-nested-fg-2: var(--post-core-color-brand-black),
30
+ );
31
+
32
+ $post-dark: (
33
+ post-scheme-even: var(--post-core-bg-scheme-dark),
34
+ post-scheme-swapped: var(--post-core-bg-scheme-light),
35
+ post-scheme-light: var(--post-core-bg-scheme-light),
36
+ post-scheme-dark: var(--post-core-bg-scheme-dark),
37
+ post-scheme-color-palette-bg-1: var(--post-core-color-sandgrey-080),
38
+ post-scheme-color-palette-bg-2: var(--post-core-color-sandgrey-100),
39
+ post-scheme-color-palette-bg-3: var(--post-core-color-brand-postyellow),
40
+ post-scheme-color-palette-bg-4: var(--post-core-color-sandgrey-002),
41
+ post-scheme-color-palette-bg-5: var(--post-core-color-cargo-blue),
42
+ post-scheme-color-palette-bg-6: var(--post-core-color-cargo-green),
43
+ post-scheme-color-palette-bg-7: var(--post-core-color-sandgrey-100),
44
+ post-scheme-color-palette-fg-1: var(--post-core-color-brand-white),
45
+ post-scheme-color-palette-fg-2: var(--post-core-color-sandgrey-100),
46
+ post-scheme-color-palette-fg-3: var(--post-core-color-sandgrey-100),
47
+ post-scheme-color-palette-fg-4: var(--post-core-color-brand-white),
48
+ post-scheme-color-palette-stroke-1: var(--post-core-color-brand-white),
49
+ post-scheme-color-palette-fg-secondary-2: var(--post-core-color-cargo-blue),
50
+ post-scheme-color-palette-fg-secondary-3: var(--post-core-color-cargo-green),
51
+ post-scheme-color-palette-nested-bg-1: var(--post-core-color-sandgrey-100),
52
+ post-scheme-color-palette-nested-bg-2: var(--post-core-color-sandgrey-080),
53
+ post-scheme-color-palette-nested-bg-3: var(--post-core-color-brand-white),
54
+ post-scheme-color-palette-nested-fg-1: var(--post-core-color-brand-black),
55
+ post-scheme-color-palette-nested-fg-2: var(--post-core-color-brand-white),
56
+ );
package/_theme.scss CHANGED
@@ -1,48 +1,70 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-post: (
7
- post-theme-palettes-bg-scheme-brand: var(--post-core-bg-scheme-light),
8
- post-theme-palettes-bg-scheme-emphasis: var(--post-scheme-accent-bg-scheme-2),
9
- post-theme-palettes-bg-scheme-default: var(--post-scheme-accent-bg-scheme-1),
10
- post-theme-palettes-bg-scheme-alternate: var(--post-scheme-accent-bg-scheme-1),
11
- post-theme-color-palettes-default-bg: var(--post-scheme-color-surface-default-bg),
12
- post-theme-color-palettes-default-fg: var(--post-scheme-color-surface-default-fg),
13
- post-theme-color-palettes-brand-bg: var(--post-scheme-color-surface-brand-bg),
14
- post-theme-color-palettes-brand-fg: var(--post-scheme-color-surface-brand-fg),
15
- post-theme-color-palettes-brand-fg-accent: var(--post-scheme-color-surface-brand-fg-accent),
16
- post-theme-color-palettes-accent-bg: var(--post-scheme-color-surface-accent-bg),
17
- post-theme-color-palettes-accent-fg: var(--post-scheme-color-surface-accent-fg),
18
- post-theme-color-palettes-accent-fg-accent: var(--post-scheme-color-surface-accent-fg-accent),
19
- post-theme-color-palettes-alternate-bg: var(--post-scheme-color-surface-alternate-bg),
20
- post-theme-color-palettes-alternate-fg: var(--post-scheme-color-surface-alternate-fg),
21
- post-theme-color-palette-bg: var(--post-palette-color-post-bg),
22
- post-theme-color-palette-fg: var(--post-palette-color-post-fg),
23
- post-theme-color-palette-secondary: var(--post-palette-color-post-secondary),
24
- post-theme-color-palette-secondary-bg: var(--post-palette-color-post-secondary-bg),
25
- post-theme-color-palette-bg-scheme: var(--post-palette-color-post-bg-scheme),
7
+ post-theme-color-body-bg: var(--post-scheme-color-body-bg),
8
+ post-theme-color-body-fg: var(--post-scheme-color-body-fg),
9
+ post-theme-color-palettes-default-scheme: var(--post-scheme-even),
10
+ post-theme-color-palettes-default-bg: var(--post-scheme-color-palette-bg-1),
11
+ post-theme-color-palettes-default-fg: var(--post-scheme-color-palette-fg-1),
12
+ post-theme-color-palettes-default-fg-secondary: var(--post-scheme-color-palette-fg-1),
13
+ post-theme-color-palettes-default-nested-bg: var(--post-scheme-color-palette-nested-bg-1),
14
+ post-theme-color-palettes-default-nested-fg: var(--post-scheme-color-palette-nested-fg-2),
15
+ post-theme-color-palettes-default-nested-scheme: var(--post-scheme-even),
16
+ post-theme-color-palettes-alternate-scheme: var(--post-scheme-even),
17
+ post-theme-color-palettes-alternate-bg: var(--post-scheme-color-palette-bg-2),
18
+ post-theme-color-palettes-alternate-fg: var(--post-scheme-color-palette-fg-1),
19
+ post-theme-color-palettes-alternate-fg-secondary: var(--post-scheme-color-palette-fg-1),
20
+ post-theme-color-palettes-alternate-nested-bg: var(--post-scheme-color-palette-nested-bg-2),
21
+ post-theme-color-palettes-alternate-nested-fg: var(--post-scheme-color-palette-nested-fg-2),
22
+ post-theme-color-palettes-alternate-nested-scheme: var(--post-scheme-even),
23
+ post-theme-color-palettes-accent-scheme: var(--post-scheme-swapped),
24
+ post-theme-color-palettes-accent-bg: var(--post-scheme-color-palette-bg-4),
25
+ post-theme-color-palettes-accent-fg: var(--post-scheme-color-palette-fg-2),
26
+ post-theme-color-palettes-accent-fg-secondary: var(--post-scheme-color-palette-fg-2),
27
+ post-theme-color-palettes-accent-nested-bg: var(--post-scheme-color-palette-nested-bg-2),
28
+ post-theme-color-palettes-accent-nested-fg: var(--post-scheme-color-palette-nested-fg-2),
29
+ post-theme-color-palettes-accent-nested-scheme: var(--post-scheme-even),
30
+ post-theme-color-palettes-brand-scheme: var(--post-scheme-light),
31
+ post-theme-color-palettes-brand-bg: var(--post-scheme-color-palette-bg-3),
32
+ post-theme-color-palettes-brand-fg: var(--post-scheme-color-palette-fg-3),
33
+ post-theme-color-palettes-brand-fg-secondary: var(--post-scheme-color-palette-fg-3),
34
+ post-theme-color-palettes-brand-nested-bg: var(--post-scheme-color-palette-nested-bg-3),
35
+ post-theme-color-palettes-brand-nested-fg: var(--post-scheme-color-palette-nested-fg-1),
36
+ post-theme-color-palettes-brand-nested-scheme: var(--post-scheme-light),
26
37
  );
27
38
 
28
39
  $post-cargo: (
29
- post-theme-palettes-bg-scheme-brand: var(--post-core-bg-scheme-dark),
30
- post-theme-palettes-bg-scheme-emphasis: var(--post-core-bg-scheme-light),
31
- post-theme-palettes-bg-scheme-default: var(--post-scheme-accent-bg-scheme-1),
32
- post-theme-palettes-bg-scheme-alternate: var(--post-scheme-accent-bg-scheme-1),
33
- post-theme-color-palettes-default-bg: var(--post-cargo-scheme-color-surface-default-bg),
34
- post-theme-color-palettes-default-fg: var(--post-cargo-scheme-color-surface-default-fg),
35
- post-theme-color-palettes-brand-bg: var(--post-cargo-scheme-color-surface-brand-bg),
36
- post-theme-color-palettes-brand-fg: var(--post-cargo-scheme-color-surface-brand-fg),
37
- post-theme-color-palettes-brand-fg-accent: var(--post-cargo-scheme-color-surface-brand-fg-accent),
38
- post-theme-color-palettes-accent-bg: var(--post-cargo-scheme-color-surface-accent-bg),
39
- post-theme-color-palettes-accent-fg: var(--post-cargo-scheme-color-surface-accent-fg),
40
- post-theme-color-palettes-accent-fg-accent: var(--post-cargo-scheme-color-surface-accent-fg-accent),
41
- post-theme-color-palettes-alternate-bg: var(--post-cargo-scheme-color-surface-alternate-bg),
42
- post-theme-color-palettes-alternate-fg: var(--post-cargo-scheme-color-surface-alternate-fg),
43
- post-theme-color-palette-bg: var(--post-palette-color-cargo-bg),
44
- post-theme-color-palette-fg: var(--post-palette-color-cargo-fg),
45
- post-theme-color-palette-secondary: var(--post-palette-color-cargo-secondary),
46
- post-theme-color-palette-secondary-bg: var(--post-palette-color-cargo-secondary-bg),
47
- post-theme-color-palette-bg-scheme: var(--post-palette-color-cargo-bg-scheme),
40
+ post-theme-color-body-bg: var(--post-scheme-color-body-bg),
41
+ post-theme-color-body-fg: var(--post-scheme-color-body-fg),
42
+ post-theme-color-palettes-default-scheme: var(--post-scheme-even),
43
+ post-theme-color-palettes-default-bg: var(--post-scheme-color-palette-bg-1),
44
+ post-theme-color-palettes-default-fg: var(--post-scheme-color-palette-fg-1),
45
+ post-theme-color-palettes-default-fg-secondary: var(--post-scheme-color-palette-fg-1),
46
+ post-theme-color-palettes-default-nested-bg: var(--post-scheme-color-palette-nested-bg-1),
47
+ post-theme-color-palettes-default-nested-fg: var(--post-scheme-color-palette-nested-fg-2),
48
+ post-theme-color-palettes-default-nested-scheme: var(--post-scheme-even),
49
+ post-theme-color-palettes-alternate-scheme: var(--post-scheme-even),
50
+ post-theme-color-palettes-alternate-bg: var(--post-scheme-color-palette-bg-7),
51
+ post-theme-color-palettes-alternate-fg: var(--post-scheme-color-palette-fg-1),
52
+ post-theme-color-palettes-alternate-fg-secondary: var(--post-scheme-color-palette-fg-1),
53
+ post-theme-color-palettes-alternate-nested-bg: var(--post-scheme-color-palette-nested-bg-2),
54
+ post-theme-color-palettes-alternate-nested-fg: var(--post-scheme-color-palette-nested-fg-2),
55
+ post-theme-color-palettes-alternate-nested-scheme: var(--post-scheme-even),
56
+ post-theme-color-palettes-accent-scheme: var(--post-scheme-light),
57
+ post-theme-color-palettes-accent-bg: var(--post-scheme-color-palette-bg-5),
58
+ post-theme-color-palettes-accent-fg: var(--post-scheme-color-palette-fg-3),
59
+ post-theme-color-palettes-accent-fg-secondary: var(--post-scheme-color-palette-fg-secondary-3),
60
+ post-theme-color-palettes-accent-nested-bg: var(--post-scheme-color-palette-nested-bg-3),
61
+ post-theme-color-palettes-accent-nested-fg: var(--post-scheme-color-palette-nested-fg-1),
62
+ post-theme-color-palettes-accent-nested-scheme: var(--post-scheme-light),
63
+ post-theme-color-palettes-brand-scheme: var(--post-scheme-dark),
64
+ post-theme-color-palettes-brand-bg: var(--post-scheme-color-palette-bg-6),
65
+ post-theme-color-palettes-brand-fg: var(--post-scheme-color-palette-fg-4),
66
+ post-theme-color-palettes-brand-fg-secondary: var(--post-scheme-color-palette-fg-secondary-2),
67
+ post-theme-color-palettes-brand-nested-bg: var(--post-scheme-color-palette-nested-bg-3),
68
+ post-theme-color-palettes-brand-nested-fg: var(--post-scheme-color-palette-nested-fg-1),
69
+ post-theme-color-palettes-brand-nested-scheme: var(--post-scheme-light),
48
70
  );
package/_utilities-formatted.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $margin: (
7
7
  0: var(--post-core-dimension-0),
@@ -108,6 +108,7 @@ $font-weight: (
108
108
  regular: var(--post-core-font-weight-400),
109
109
  bold: var(--post-core-font-weight-700),
110
110
  black: var(--post-core-font-weight-900),
111
+ extra-black: var(--post-core-font-weight-950),
111
112
  );
112
113
 
113
114
  $line-height: (
package/_utilities.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  // Do not edit manually
3
3
  // This file was generated by the swisspost/design-system-tokens package
4
- // Tue, 22 Jul 2025 07:22:42 GMT
4
+ // Thu, 14 Aug 2025 15:00:18 GMT
5
5
 
6
6
  $post-spacing: (
7
7
  post-utility-margin-0: var(--post-core-dimension-0),
@@ -96,6 +96,7 @@ $post-typo: (
96
96
  post-utility-font-weight-regular: var(--post-core-font-weight-400),
97
97
  post-utility-font-weight-bold: var(--post-core-font-weight-700),
98
98
  post-utility-font-weight-black: var(--post-core-font-weight-900),
99
+ post-utility-font-weight-extra-black: var(--post-core-font-weight-950),
99
100
  post-utility-line-height-1: var(--post-core-line-height-100),
100
101
  post-utility-line-height-sm: var(--post-core-line-height-120),
101
102
  post-utility-line-height-lg: var(--post-core-line-height-150),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swisspost/design-system-tokens",
3
- "version": "10.0.0-next.42",
3
+ "version": "10.0.0-next.43",
4
4
  "description": "Design Tokens for the Swiss Post Design System.",
5
5
  "author": "Swiss Post <design-system@post.ch>",
6
6
  "license": "Apache-2.0",
package/tailwind/helpers.tailwind.css ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Do not edit manually
3
+ * This file was generated by the swisspost/design-system-tokens package
4
+ * Thu, 14 Aug 2025 15:00:18 GMT
5
+ */
6
+
7
+
8
+ @import "tailwindcss";
9
+
10
+ @theme {
11
+ --focus-outline-offset: var(--post-device-spacing-padding-2);
12
+ --focus-outline-color: var(--post-scheme-color-interactive-focus-stroke);
13
+ --focus-outline-color-inverted: var(--post-scheme-color-interactive-focus-stroke-inverted);
14
+ --focus-outline-width: var(--post-device-border-width-focus);
15
+ --focus-border-style: var(--post-core-border-style-solid);
16
+ --focus-border-radius: var(--post-device-border-radius-focus);
17
+ }