@swisspost/design-system-tokens 9.0.0-next.13 → 9.0.0-next.14

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 (20) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/_channel.scss +1 -1
  3. package/_components.scss +5 -4
  4. package/_core.scss +3 -3
  5. package/_device.scss +1 -1
  6. package/_elements.scss +1 -1
  7. package/_helpers.scss +1 -1
  8. package/_index.scss +1 -1
  9. package/_palettes.scss +1 -1
  10. package/_scheme.scss +5 -1
  11. package/_theme.scss +1 -1
  12. package/_utilities.scss +1 -1
  13. package/package.json +5 -4
  14. package/palettes/_cargo-dark.scss +1 -1
  15. package/palettes/_cargo-light.scss +1 -1
  16. package/palettes/_post-dark.scss +1 -1
  17. package/palettes/_post-light.scss +1 -1
  18. package/tailwind/helpers.tailwind.js +1 -1
  19. package/tailwind/utilities.tailwind.js +1 -1
  20. package/tokens.json +37 -24
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @swisspost/design-system-tokens
2
2
 
3
+ ## 9.0.0-next.14
4
+
5
+ ### Patch Changes
6
+
7
+ - Added a transform function to avoid unitless zero values for specific token types (like `dimension`, etc.), which allows us to use these tokens also in css `calc()` functions. Because `<number-token>`s are always interpreted as `<number>`s or `<integer>`s, "unitless 0" `<length>`s aren’t supported in calc().
8
+ Source: https://drafts.csswg.org/css-values-3/#calc-type-checking (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4534](https://github.com/swisspost/design-system/pull/4534))
9
+
3
10
  ## 9.0.0-next.13
4
11
 
5
12
  ## 9.0.0-next.12
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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-edk: (
7
7
  post-channel-sizing-interactive-height-filler: var(--post-core-dimension-24),
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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-accordion: (
7
7
  post-accordion-header-padding-block-closed: var(--post-device-spacing-padding-19),
@@ -213,6 +213,10 @@ $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-enabled-bg1: var(--post-theme-color-palettes-alternate-bg),
217
+ post-card-enabled-bg2: var(--post-theme-color-palettes-default-bg),
218
+ post-card-hover-bg: var(--post-scheme-color-interactive-card-hover-bg),
219
+ post-card-hover-fg: var(--post-scheme-color-interactive-card-hover-fg),
216
220
  );
217
221
 
218
222
  $post-checkbox: (
@@ -677,10 +681,7 @@ $post-teaser: (
677
681
  post-teaser-card-lg-section-content-gap: var(--post-core-dimension-24),
678
682
  post-teaser-card-lg-heading-font-size: var(--post-device-font-size-4),
679
683
  post-teaser-card-lg-content-gap: var(--post-device-spacing-gap-block-3),
680
- post-teaser-card-enabled-bg: var(--post-scheme-color-interactive-primary-enabled-bg1),
681
684
  post-teaser-card-content-enabled-fg: var(--post-scheme-color-interactive-primary-enabled-fg1),
682
- post-teaser-card-content-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
683
- post-teaser-card-hover-bg: var(--post-scheme-color-interactive-primary-hover-bg4),
684
685
  );
685
686
 
686
687
  $post-text-area: (
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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  :root {
7
7
  --post-core-color-brand-postyellow: #ffcc00;
@@ -51,7 +51,7 @@
51
51
  --post-core-color-colorless: rgba(255, 255, 255, 0);
52
52
  --post-core-color-cargo-green: #00411c;
53
53
  --post-core-color-cargo-blue: #aadcff;
54
- --post-core-dimension-0: 0;
54
+ --post-core-dimension-0: 0px;
55
55
  --post-core-dimension-1: 1px;
56
56
  --post-core-dimension-2: 2px;
57
57
  --post-core-dimension-3: 3px;
@@ -133,7 +133,7 @@
133
133
  --post-core-line-height-120: 1.2;
134
134
  --post-core-line-height-150: 1.5;
135
135
  --post-core-letter-spacing-default: 0.0012em;
136
- --post-core-letter-spacing-none: 0;
136
+ --post-core-letter-spacing-none: 0px;
137
137
  --post-core-font-family-swiss-post: 'Swiss Post Sans';
138
138
  --post-core-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
139
139
  --post-core-elevation-2: 0 2px 4px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-desktop: (
7
7
  post-device-font-size-1: var(--post-core-font-size-40),
package/_elements.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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-body: (
7
7
  post-body-font-family: var(--post-device-font-family-default),
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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-focus: (
7
7
  post-focus-outline-offset: var(--post-device-spacing-padding-2),
package/_index.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  // Do not edit manually
2
2
  // This file was generated by the swisspost/design-system-tokens package
3
- // Mon, 27 Jan 2025 13:57:22 GMT
3
+ // Tue, 04 Feb 2025 11:16:05 GMT
4
4
 
5
5
  @use './core';
6
6
  @forward './scheme';
package/_palettes.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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-palettes: (
7
7
  post-palettes-color-default-bg: var(--post-theme-color-palettes-default-bg),
package/_scheme.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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-light: (
7
7
  post-scheme-color-signal-success-dark: var(--post-core-color-notification-green),
@@ -133,6 +133,8 @@ $post-light: (
133
133
  post-scheme-color-interactive-input-disabled-bg: var(--post-core-color-colorless),
134
134
  post-scheme-color-interactive-input-disabled-fg: var(--post-core-color-sandgrey-060),
135
135
  post-scheme-color-interactive-input-disabled-border: var(--post-core-color-sandgrey-060),
136
+ post-scheme-color-interactive-card-hover-bg: var(--post-core-color-sandgrey-060),
137
+ post-scheme-color-interactive-card-hover-fg: var(--post-core-color-brand-white),
136
138
  post-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-002),
137
139
  post-scheme-color-surface-default-fg: var(--post-core-color-sandgrey-100),
138
140
  post-scheme-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
@@ -296,6 +298,8 @@ $post-dark: (
296
298
  post-scheme-color-interactive-input-disabled-bg: var(--post-core-color-colorless),
297
299
  post-scheme-color-interactive-input-disabled-fg: var(--post-core-color-sandgrey-alpha-lightsand-60),
298
300
  post-scheme-color-interactive-input-disabled-border: var(--post-core-color-sandgrey-alpha-lightsand-60),
301
+ post-scheme-color-interactive-card-hover-bg: var(--post-core-color-sandgrey-060),
302
+ post-scheme-color-interactive-card-hover-fg: var(--post-core-color-brand-white),
299
303
  post-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-080),
300
304
  post-scheme-color-surface-default-fg: var(--post-core-color-brand-white),
301
305
  post-scheme-color-surface-default-stroke: var(--post-core-color-brand-white),
package/_theme.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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-post: (
7
7
  post-theme-palettes-bg-scheme-brand: var(--post-core-bg-scheme-light),
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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-spacing: (
7
7
  post-utility-margin-0: var(--post-core-dimension-0),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swisspost/design-system-tokens",
3
- "version": "9.0.0-next.13",
3
+ "version": "9.0.0-next.14",
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",
@@ -36,10 +36,11 @@
36
36
  "style-dictionary": "4.3.0"
37
37
  },
38
38
  "scripts": {
39
- "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist",
40
39
  "build": "pnpm clean && node ./build.js && pnpm copy-files",
41
- "clean": "rimraf dist",
42
40
  "build:verbose": "node ./build.js --verbosity=verbose",
43
- "lint": "eslint"
41
+ "clean": "rimraf dist",
42
+ "lint": "eslint",
43
+ "lint:fix": "eslint --fix",
44
+ "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist"
44
45
  }
45
46
  }
package/palettes/_cargo-dark.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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-palettes: (
7
7
  post-palettes-color-default-bg: #373632,
package/palettes/_cargo-light.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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-palettes: (
7
7
  post-palettes-color-default-bg: #fafafa,
package/palettes/_post-dark.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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-palettes: (
7
7
  post-palettes-color-default-bg: #373632,
package/palettes/_post-light.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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  $post-palettes: (
7
7
  post-palettes-color-default-bg: #fafafa,
package/tailwind/helpers.tailwind.js 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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  export default {
7
7
  focus: {
package/tailwind/utilities.tailwind.js 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
- // Mon, 27 Jan 2025 13:57:22 GMT
4
+ // Tue, 04 Feb 2025 11:16:05 GMT
5
5
 
6
6
  export default {
7
7
  utility: {
package/tokens.json CHANGED
@@ -337,7 +337,7 @@
337
337
  },
338
338
  "50": {
339
339
  "$type": "dimension",
340
- "$value": "50px"
340
+ "$value": "50"
341
341
  },
342
342
  "56": {
343
343
  "$type": "dimension",
@@ -345,7 +345,7 @@
345
345
  },
346
346
  "58": {
347
347
  "$type": "dimension",
348
- "$value": "58px"
348
+ "$value": "58"
349
349
  },
350
350
  "64": {
351
351
  "$type": "dimension",
@@ -365,11 +365,11 @@
365
365
  },
366
366
  "82": {
367
367
  "$type": "dimension",
368
- "$value": "82px"
368
+ "$value": "82"
369
369
  },
370
370
  "88": {
371
371
  "$type": "dimension",
372
- "$value": "88px"
372
+ "$value": "88"
373
373
  },
374
374
  "96": {
375
375
  "$type": "dimension",
@@ -385,23 +385,23 @@
385
385
  },
386
386
  "164": {
387
387
  "$type": "dimension",
388
- "$value": "164px"
388
+ "$value": "164"
389
389
  },
390
390
  "180": {
391
391
  "$type": "dimension",
392
- "$value": "180px"
392
+ "$value": "180"
393
393
  },
394
394
  "188": {
395
395
  "$type": "dimension",
396
- "$value": "188px"
396
+ "$value": "188"
397
397
  },
398
398
  "240": {
399
399
  "$type": "dimension",
400
- "$value": "240px"
400
+ "$value": "240"
401
401
  },
402
402
  "312": {
403
403
  "$type": "dimension",
404
- "$value": "312px"
404
+ "$value": "312"
405
405
  },
406
406
  "1280": {
407
407
  "$type": "dimension",
@@ -1274,6 +1274,18 @@
1274
1274
  "$value": "{post.core.color.sandgrey.060}"
1275
1275
  }
1276
1276
  }
1277
+ },
1278
+ "card": {
1279
+ "hover": {
1280
+ "bg": {
1281
+ "$type": "color",
1282
+ "$value": "{post.core.color.sandgrey.060}"
1283
+ },
1284
+ "fg": {
1285
+ "$type": "color",
1286
+ "$value": "{post.core.color.brand.white}"
1287
+ }
1288
+ }
1277
1289
  }
1278
1290
  },
1279
1291
  "surface": {
@@ -5165,6 +5177,22 @@
5165
5177
  "$type": "color",
5166
5178
  "$value": "{post.scheme.color.interactive.primary.enabled.stroke4}"
5167
5179
  }
5180
+ },
5181
+ "enabled-bg1": {
5182
+ "$type": "color",
5183
+ "$value": "{post.theme.color.palettes.alternate.bg}"
5184
+ },
5185
+ "enabled-bg2": {
5186
+ "$type": "color",
5187
+ "$value": "{post.theme.color.palettes.default.bg}"
5188
+ },
5189
+ "hover-bg": {
5190
+ "$type": "color",
5191
+ "$value": "{post.scheme.color.interactive.card.hover.bg}"
5192
+ },
5193
+ "hover-fg": {
5194
+ "$type": "color",
5195
+ "$value": "{post.scheme.color.interactive.card.hover.fg}"
5168
5196
  }
5169
5197
  }
5170
5198
  }
@@ -7305,23 +7333,11 @@
7305
7333
  }
7306
7334
  }
7307
7335
  },
7308
- "enabled-bg": {
7309
- "$type": "color",
7310
- "$value": "{post.scheme.color.interactive.primary.enabled.bg1}"
7311
- },
7312
7336
  "content": {
7313
7337
  "enabled-fg": {
7314
7338
  "$type": "color",
7315
7339
  "$value": "{post.scheme.color.interactive.primary.enabled.fg1}"
7316
- },
7317
- "hover-fg": {
7318
- "$type": "color",
7319
- "$value": "{post.scheme.color.interactive.primary.hover.fg1}"
7320
7340
  }
7321
- },
7322
- "hover-bg": {
7323
- "$type": "color",
7324
- "$value": "{post.scheme.color.interactive.primary.hover.bg4}"
7325
7341
  }
7326
7342
  }
7327
7343
  }
@@ -10734,10 +10750,7 @@
10734
10750
  "post.teaser.card.lg.section.content.gap": "c838062f96129e9b66cddaaf664e24a53a80dd5a",
10735
10751
  "post.teaser.card.lg.heading.font-size": "0f3a213b39a0c53f46d60602bdf8f0255d49a874",
10736
10752
  "post.teaser.card.lg.content.gap": "c5363014eb94be30e06a55c98f9c9799e8e7a5aa",
10737
- "post.teaser.card.enabled-bg": "e264d69dc6c093ca0899a6b08713d04d9ccc0ac4",
10738
10753
  "post.teaser.card.content.enabled-fg": "f5873b609c3f86b4513243564e2f857934ead3bb",
10739
- "post.teaser.card.content.hover-fg": "bc215ee485842dc3b12dcd34d7589921fd3fc0f0",
10740
- "post.teaser.card.hover-bg": "be7b9f4dfc1dde85a254a4a43a70b60ca2c98f8d",
10741
10754
  "post.textarea.enabled-bg": "9f294c42d575aff74d6cf90d734367a803194216",
10742
10755
  "post.textarea.enabled-fg": "7d5bb970bd293753c57df39aaeaa38b7d279a90c",
10743
10756
  "post.textarea.hover-bg": "91d02a0756c0a534d57e42cdb64636d2d2e368dd",