@swisspost/design-system-tokens 9.0.0-next.5 → 9.0.0-next.7

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 +8 -0
  2. package/_channel.scss +1 -1
  3. package/_components.scss +97 -106
  4. package/_core.scss +2 -12
  5. package/_device.scss +12 -117
  6. package/_elements.scss +5 -3
  7. package/_helpers.scss +1 -1
  8. package/_index.scss +1 -1
  9. package/_palettes.scss +1 -1
  10. package/_scheme.scss +33 -47
  11. package/_theme.scss +1 -1
  12. package/_utilities.scss +1 -1
  13. package/package.json +1 -1
  14. package/palettes/_cargo-dark.scss +19 -0
  15. package/palettes/_cargo-light.scss +19 -0
  16. package/palettes/_post-dark.scss +19 -0
  17. package/palettes/_post-light.scss +19 -0
  18. package/tailwind/helpers.tailwind.js +1 -1
  19. package/tailwind/utilities.tailwind.js +1 -1
  20. package/tokens.json +578 -1274
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, 18 Nov 2024 17:05:11 GMT
4
+ // Wed, 04 Dec 2024 07:43:08 GMT
5
5
 
6
6
  $post-light: (
7
7
  post-scheme-color-signal-success-dark: var(--post-core-color-notification-green),
@@ -70,24 +70,8 @@ $post-light: (
70
70
  post-scheme-color-interactive-button-tertiary-disabled-fg-inverted: var(--post-core-color-brand-white),
71
71
  post-scheme-color-interactive-button-tertiary-disabled-bg-inverted: var(--post-core-color-sandgrey-alpha-lightsand-30),
72
72
  post-scheme-color-interactive-button-tertiary-disabled-stroke-inverted: var(--post-core-color-brand-white),
73
- post-scheme-color-interactive-button-segmented-enabled-fg: var(--post-core-color-sandgrey-100),
74
- post-scheme-color-interactive-button-segmented-enabled-bg: var(--post-core-color-brand-white),
75
- post-scheme-color-interactive-button-segmented-enabled-stroke: var(--post-core-color-sandgrey-100),
76
- post-scheme-color-interactive-button-segmented-hover-fg: var(--post-core-color-sandgrey-070),
77
- post-scheme-color-interactive-button-segmented-hover-bg: var(--post-core-color-brand-white),
78
- post-scheme-color-interactive-button-segmented-hover-stroke: var(--post-core-color-sandgrey-070),
79
- post-scheme-color-interactive-button-segmented-selected-fg: var(--post-core-color-brand-white),
80
- post-scheme-color-interactive-button-segmented-selected-bg: var(--post-core-color-sandgrey-100),
81
- post-scheme-color-interactive-button-segmented-selected-stroke: var(--post-core-color-sandgrey-100),
82
73
  post-scheme-color-interactive-focus-stroke: var(--post-core-color-sandgrey-100),
83
74
  post-scheme-color-interactive-focus-stroke-inverted: var(--post-core-color-brand-white),
84
- post-scheme-color-interactive-text_input-enabled-fg: var(--post-core-color-sandgrey-100),
85
- post-scheme-color-interactive-text_input-enabled-bg: var(--post-core-color-brand-white),
86
- post-scheme-color-interactive-text_input-enabled-stroke: var(--post-scheme-color-interactive-text_input-enabled-fg),
87
- post-scheme-color-interactive-text_input-hover-fg-label: var(--post-core-color-sandgrey-070),
88
- post-scheme-color-interactive-text_input-hover-bg: var(--post-core-color-brand-white),
89
- post-scheme-color-interactive-text_input-hover-fg-value: var(--post-core-color-sandgrey-100),
90
- post-scheme-color-interactive-text_input-hover-stroke: var(--post-core-color-sandgrey-070),
91
75
  post-scheme-color-interactive-primary-enabled-bg1: var(--post-core-color-brand-white),
92
76
  post-scheme-color-interactive-primary-enabled-fg1: var(--post-core-color-sandgrey-100),
93
77
  post-scheme-color-interactive-primary-enabled-fg2: var(--post-core-color-sandgrey-060),
@@ -95,31 +79,31 @@ $post-light: (
95
79
  post-scheme-color-interactive-primary-enabled-fg3: var(--post-core-color-brand-white),
96
80
  post-scheme-color-interactive-primary-enabled-bg2: var(--post-core-color-sandgrey-100),
97
81
  post-scheme-color-interactive-primary-enabled-stroke3: var(--post-core-color-brand-white),
82
+ post-scheme-color-interactive-primary-enabled-bg3: var(--post-core-color-brand-white),
98
83
  post-scheme-color-interactive-primary-hover-bg: var(--post-core-color-brand-white),
99
84
  post-scheme-color-interactive-primary-hover-fg1: var(--post-core-color-sandgrey-070),
100
- post-scheme-color-interactive-primary-hover-fg2: var(--post-core-color-sandgrey-060),
101
85
  post-scheme-color-interactive-primary-hover-stroke: var(--post-core-color-sandgrey-070),
102
86
  post-scheme-color-interactive-primary-hover-fg3: var(--post-core-color-brand-white),
103
87
  post-scheme-color-interactive-primary-hover-bg2: var(--post-core-color-sandgrey-070),
104
88
  post-scheme-color-interactive-primary-hover-stroke3: var(--post-core-color-brand-white),
89
+ post-scheme-color-interactive-primary-hover-bg3: var(--post-core-color-brand-white),
105
90
  post-scheme-color-interactive-primary-disabled-bg: var(--post-core-color-brand-white),
106
91
  post-scheme-color-interactive-primary-disabled-fg1: var(--post-core-color-sandgrey-060),
107
- post-scheme-color-interactive-primary-disabled-fg2: var(--post-core-color-sandgrey-060),
108
92
  post-scheme-color-interactive-primary-disabled-stroke: var(--post-core-color-sandgrey-060),
109
- post-scheme-color-interactive-primary-disabled-bg2: var(--post-core-color-sandgrey-012),
110
93
  post-scheme-color-interactive-primary-disabled-fg3: var(--post-core-color-brand-white),
111
- post-scheme-color-interactive-primary-disabled-bg3: var(--post-core-color-sandgrey-012),
112
94
  post-scheme-color-interactive-primary-disabled-stroke2: var(--post-core-color-sandgrey-060),
113
95
  post-scheme-color-interactive-primary-disabled-bg4: var(--post-core-color-sandgrey-060),
114
96
  post-scheme-color-interactive-primary-disabled-stroke3: var(--post-core-color-brand-white),
97
+ post-scheme-color-interactive-primary-disabled-bg5: var(--post-core-color-sandgrey-012),
98
+ post-scheme-color-interactive-primary-disabled-fg4: var(--post-core-color-sandgrey-060),
99
+ post-scheme-color-interactive-primary-disabled-stroke4: var(--post-core-color-sandgrey-060),
100
+ post-scheme-color-interactive-primary-disabled-bg6: var(--post-core-color-brand-white),
115
101
  post-scheme-color-interactive-primary-selected-bg1: var(--post-core-color-brand-white),
116
102
  post-scheme-color-interactive-primary-selected-fg1: var(--post-core-color-sandgrey-100),
117
- post-scheme-color-interactive-primary-selected-fg2: var(--post-core-color-sandgrey-060),
118
103
  post-scheme-color-interactive-primary-selected-stroke1: var(--post-core-color-sandgrey-100),
119
104
  post-scheme-color-interactive-primary-selected-fg3: var(--post-core-color-brand-white),
120
105
  post-scheme-color-interactive-primary-selected-bg2: var(--post-core-color-notification-green),
121
106
  post-scheme-color-interactive-primary-selected-stroke4: var(--post-core-color-notification-green),
122
- post-scheme-color-interactive-primary-selected-stroke2: var(--post-core-color-brand-white),
123
107
  post-scheme-color-interactive-primary-selected-stroke3: var(--post-core-color-brand-white),
124
108
  post-scheme-color-interactive-primary-selected-bg4: var(--post-core-color-sandgrey-100),
125
109
  post-scheme-color-interactive-notification-info-fg: var(--post-core-color-sandgrey-100),
@@ -138,6 +122,15 @@ $post-light: (
138
122
  post-scheme-color-interactive-notification-error-bg: var(--post-scheme-color-signal-error-light),
139
123
  post-scheme-color-interactive-notification-error-icon: var(--post-scheme-color-signal-error-dark),
140
124
  post-scheme-color-interactive-notification-error-stroke: var(--post-scheme-color-signal-error-dark),
125
+ post-scheme-color-interactive-input-enabled-bg: var(--post-core-color-brand-white),
126
+ post-scheme-color-interactive-input-enabled-fg: var(--post-core-color-sandgrey-100),
127
+ post-scheme-color-interactive-input-enabled-border: var(--post-core-color-sandgrey-100),
128
+ post-scheme-color-interactive-input-hover-bg: var(--post-core-color-brand-white),
129
+ post-scheme-color-interactive-input-hover-fg: var(--post-core-color-sandgrey-070),
130
+ post-scheme-color-interactive-input-hover-border: var(--post-core-color-sandgrey-070),
131
+ post-scheme-color-interactive-input-disabled-bg: var(--post-core-color-brand-white),
132
+ post-scheme-color-interactive-input-disabled-fg: var(--post-core-color-sandgrey-060),
133
+ post-scheme-color-interactive-input-disabled-border: var(--post-core-color-sandgrey-060),
141
134
  post-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-002),
142
135
  post-scheme-color-surface-default-fg: var(--post-core-color-sandgrey-100),
143
136
  post-scheme-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
@@ -238,24 +231,8 @@ $post-dark: (
238
231
  post-scheme-color-interactive-button-tertiary-disabled-fg-inverted: var(--post-core-color-sandgrey-060),
239
232
  post-scheme-color-interactive-button-tertiary-disabled-bg-inverted: var(--post-core-color-colorless),
240
233
  post-scheme-color-interactive-button-tertiary-disabled-stroke-inverted: var(--post-core-color-sandgrey-060),
241
- post-scheme-color-interactive-button-segmented-enabled-fg: var(--post-core-color-brand-white),
242
- post-scheme-color-interactive-button-segmented-enabled-bg: var(--post-core-color-sandgrey-100),
243
- post-scheme-color-interactive-button-segmented-enabled-stroke: var(--post-core-color-brand-white),
244
- post-scheme-color-interactive-button-segmented-hover-fg: var(--post-core-color-brand-white),
245
- post-scheme-color-interactive-button-segmented-hover-bg: var(--post-core-color-sandgrey-070),
246
- post-scheme-color-interactive-button-segmented-hover-stroke: var(--post-core-color-brand-white),
247
- post-scheme-color-interactive-button-segmented-selected-fg: var(--post-core-color-sandgrey-100),
248
- post-scheme-color-interactive-button-segmented-selected-bg: var(--post-core-color-brand-white),
249
- post-scheme-color-interactive-button-segmented-selected-stroke: var(--post-core-color-brand-white),
250
234
  post-scheme-color-interactive-focus-stroke: var(--post-core-color-brand-white),
251
235
  post-scheme-color-interactive-focus-stroke-inverted: var(--post-core-color-sandgrey-100),
252
- post-scheme-color-interactive-text_input-enabled-fg: var(--post-core-color-brand-white),
253
- post-scheme-color-interactive-text_input-enabled-bg: var(--post-core-color-sandgrey-100),
254
- post-scheme-color-interactive-text_input-enabled-stroke: var(--post-scheme-color-interactive-text_input-enabled-fg),
255
- post-scheme-color-interactive-text_input-hover-fg-label: var(--post-core-color-sandgrey-070),
256
- post-scheme-color-interactive-text_input-hover-bg: var(--post-core-color-brand-white),
257
- post-scheme-color-interactive-text_input-hover-fg-value: var(--post-core-color-sandgrey-100),
258
- post-scheme-color-interactive-text_input-hover-stroke: var(--post-core-color-sandgrey-070),
259
236
  post-scheme-color-interactive-primary-enabled-bg1: var(--post-core-color-sandgrey-100),
260
237
  post-scheme-color-interactive-primary-enabled-fg1: var(--post-core-color-brand-white),
261
238
  post-scheme-color-interactive-primary-enabled-fg2: var(--post-core-color-sandgrey-060),
@@ -263,31 +240,31 @@ $post-dark: (
263
240
  post-scheme-color-interactive-primary-enabled-fg3: var(--post-core-color-sandgrey-100),
264
241
  post-scheme-color-interactive-primary-enabled-bg2: var(--post-core-color-brand-white),
265
242
  post-scheme-color-interactive-primary-enabled-stroke3: var(--post-core-color-sandgrey-100),
243
+ post-scheme-color-interactive-primary-enabled-bg3: var(--post-core-color-colorless),
266
244
  post-scheme-color-interactive-primary-hover-bg: var(--post-core-color-sandgrey-070),
267
245
  post-scheme-color-interactive-primary-hover-fg1: var(--post-core-color-brand-white),
268
- post-scheme-color-interactive-primary-hover-fg2: var(--post-core-color-sandgrey-060),
269
246
  post-scheme-color-interactive-primary-hover-stroke: var(--post-core-color-brand-white),
270
247
  post-scheme-color-interactive-primary-hover-fg3: var(--post-core-color-sandgrey-070),
271
248
  post-scheme-color-interactive-primary-hover-bg2: var(--post-core-color-brand-white),
272
249
  post-scheme-color-interactive-primary-hover-stroke3: var(--post-core-color-sandgrey-070),
250
+ post-scheme-color-interactive-primary-hover-bg3: var(--post-core-color-sandgrey-alpha-lightsand-20),
273
251
  post-scheme-color-interactive-primary-disabled-bg: var(--post-core-color-sandgrey-060),
274
252
  post-scheme-color-interactive-primary-disabled-fg1: var(--post-core-color-brand-white),
275
- post-scheme-color-interactive-primary-disabled-fg2: var(--post-core-color-brand-white),
276
253
  post-scheme-color-interactive-primary-disabled-stroke: var(--post-core-color-brand-white),
277
- post-scheme-color-interactive-primary-disabled-bg2: var(--post-core-color-sandgrey-012),
278
254
  post-scheme-color-interactive-primary-disabled-fg3: var(--post-core-color-sandgrey-060),
279
- post-scheme-color-interactive-primary-disabled-bg3: var(--post-core-color-sandgrey-012),
280
255
  post-scheme-color-interactive-primary-disabled-stroke2: var(--post-core-color-brand-white),
281
256
  post-scheme-color-interactive-primary-disabled-bg4: var(--post-core-color-brand-white),
282
257
  post-scheme-color-interactive-primary-disabled-stroke3: var(--post-core-color-sandgrey-060),
258
+ post-scheme-color-interactive-primary-disabled-bg5: var(--post-core-color-sandgrey-alpha-lightsand-10),
259
+ post-scheme-color-interactive-primary-disabled-fg4: var(--post-core-color-sandgrey-alpha-lightsand-60),
260
+ post-scheme-color-interactive-primary-disabled-stroke4: var(--post-core-color-sandgrey-alpha-lightsand-60),
261
+ post-scheme-color-interactive-primary-disabled-bg6: var(--post-core-color-colorless),
283
262
  post-scheme-color-interactive-primary-selected-bg1: var(--post-core-color-sandgrey-100),
284
263
  post-scheme-color-interactive-primary-selected-fg1: var(--post-core-color-brand-white),
285
- post-scheme-color-interactive-primary-selected-fg2: var(--post-core-color-sandgrey-060),
286
264
  post-scheme-color-interactive-primary-selected-stroke1: var(--post-core-color-brand-white),
287
265
  post-scheme-color-interactive-primary-selected-fg3: var(--post-core-color-sandgrey-100),
288
- post-scheme-color-interactive-primary-selected-bg2: var(--post-core-color-notification-green),
289
- post-scheme-color-interactive-primary-selected-stroke4: var(--post-core-color-notification-green),
290
- post-scheme-color-interactive-primary-selected-stroke2: var(--post-core-color-sandgrey-100),
266
+ post-scheme-color-interactive-primary-selected-bg2: var(--post-core-color-notification-green-light),
267
+ post-scheme-color-interactive-primary-selected-stroke4: var(--post-core-color-notification-green-light),
291
268
  post-scheme-color-interactive-primary-selected-stroke3: var(--post-core-color-sandgrey-100),
292
269
  post-scheme-color-interactive-primary-selected-bg4: var(--post-core-color-brand-white),
293
270
  post-scheme-color-interactive-notification-info-fg: var(--post-core-color-sandgrey-100),
@@ -306,6 +283,15 @@ $post-dark: (
306
283
  post-scheme-color-interactive-notification-error-bg: var(--post-scheme-color-signal-error-light),
307
284
  post-scheme-color-interactive-notification-error-icon: var(--post-scheme-color-signal-error-dark),
308
285
  post-scheme-color-interactive-notification-error-stroke: var(--post-scheme-color-signal-error-dark),
286
+ post-scheme-color-interactive-input-enabled-bg: var(--post-core-color-brand-white),
287
+ post-scheme-color-interactive-input-enabled-fg: var(--post-core-color-sandgrey-100),
288
+ post-scheme-color-interactive-input-enabled-border: var(--post-core-color-sandgrey-080),
289
+ post-scheme-color-interactive-input-hover-bg: var(--post-core-color-brand-white),
290
+ post-scheme-color-interactive-input-hover-fg: var(--post-core-color-sandgrey-070),
291
+ post-scheme-color-interactive-input-hover-border: var(--post-core-color-sandgrey-070),
292
+ post-scheme-color-interactive-input-disabled-bg: var(--post-core-color-brand-white),
293
+ post-scheme-color-interactive-input-disabled-fg: var(--post-core-color-sandgrey-060),
294
+ post-scheme-color-interactive-input-disabled-border: var(--post-core-color-sandgrey-060),
309
295
  post-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-080),
310
296
  post-scheme-color-surface-default-fg: var(--post-core-color-brand-white),
311
297
  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, 18 Nov 2024 17:05:11 GMT
4
+ // Wed, 04 Dec 2024 07:43:08 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, 18 Nov 2024 17:05:11 GMT
4
+ // Wed, 04 Dec 2024 07:43:08 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.5",
3
+ "version": "9.0.0-next.7",
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/palettes/_cargo-dark.scss ADDED
@@ -0,0 +1,19 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Wed, 04 Dec 2024 07:43:08 GMT
5
+
6
+ $post-palettes: (
7
+ post-palettes-color-default-bg: #373632,
8
+ post-palettes-color-default-fg: #ffffff,
9
+ post-palettes-color-default-bg-scheme: dark,
10
+ post-palettes-color-alternate-bg: #050400,
11
+ post-palettes-color-alternate-fg: #ffffff,
12
+ post-palettes-color-alternate-bg-scheme: dark,
13
+ post-palettes-color-brand-bg: #00411c,
14
+ post-palettes-color-brand-fg: #aadcff,
15
+ post-palettes-color-brand-bg-scheme: dark,
16
+ post-palettes-color-accent-bg: #aadcff,
17
+ post-palettes-color-accent-fg: #00411c,
18
+ post-palettes-color-accent-bg-scheme: light,
19
+ );
package/palettes/_cargo-light.scss ADDED
@@ -0,0 +1,19 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Wed, 04 Dec 2024 07:43:08 GMT
5
+
6
+ $post-palettes: (
7
+ post-palettes-color-default-bg: #fafafa,
8
+ post-palettes-color-default-fg: #050400,
9
+ post-palettes-color-default-bg-scheme: light,
10
+ post-palettes-color-alternate-bg: #f0efed,
11
+ post-palettes-color-alternate-fg: #050400,
12
+ post-palettes-color-alternate-bg-scheme: light,
13
+ post-palettes-color-brand-bg: #00411c,
14
+ post-palettes-color-brand-fg: #aadcff,
15
+ post-palettes-color-brand-bg-scheme: dark,
16
+ post-palettes-color-accent-bg: #aadcff,
17
+ post-palettes-color-accent-fg: #00411c,
18
+ post-palettes-color-accent-bg-scheme: light,
19
+ );
package/palettes/_post-dark.scss ADDED
@@ -0,0 +1,19 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Wed, 04 Dec 2024 07:43:08 GMT
5
+
6
+ $post-palettes: (
7
+ post-palettes-color-default-bg: #373632,
8
+ post-palettes-color-default-fg: #ffffff,
9
+ post-palettes-color-default-bg-scheme: dark,
10
+ post-palettes-color-alternate-bg: #050400,
11
+ post-palettes-color-alternate-fg: #ffffff,
12
+ post-palettes-color-alternate-bg-scheme: dark,
13
+ post-palettes-color-brand-bg: #ffcc00,
14
+ post-palettes-color-brand-fg: #050400,
15
+ post-palettes-color-brand-bg-scheme: light,
16
+ post-palettes-color-accent-bg: #fafafa,
17
+ post-palettes-color-accent-fg: #050400,
18
+ post-palettes-color-accent-bg-scheme: light,
19
+ );
package/palettes/_post-light.scss ADDED
@@ -0,0 +1,19 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Wed, 04 Dec 2024 07:43:08 GMT
5
+
6
+ $post-palettes: (
7
+ post-palettes-color-default-bg: #fafafa,
8
+ post-palettes-color-default-fg: #050400,
9
+ post-palettes-color-default-bg-scheme: light,
10
+ post-palettes-color-alternate-bg: #f0efed,
11
+ post-palettes-color-alternate-fg: #050400,
12
+ post-palettes-color-alternate-bg-scheme: light,
13
+ post-palettes-color-brand-bg: #ffcc00,
14
+ post-palettes-color-brand-fg: #050400,
15
+ post-palettes-color-brand-bg-scheme: light,
16
+ post-palettes-color-accent-bg: #373632,
17
+ post-palettes-color-accent-fg: #ffffff,
18
+ post-palettes-color-accent-bg-scheme: dark,
19
+ );
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, 18 Nov 2024 17:05:11 GMT
4
+ // Wed, 04 Dec 2024 07:43:08 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, 18 Nov 2024 17:05:11 GMT
4
+ // Wed, 04 Dec 2024 07:43:08 GMT
5
5
 
6
6
  export default {
7
7
  utility: {