@swisspost/design-system-tokens 9.0.0-next.4

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 (19) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/CONTRIBUTING.md +19 -0
  3. package/LICENSE +202 -0
  4. package/README.md +48 -0
  5. package/_channel.scss +12 -0
  6. package/_components.scss +775 -0
  7. package/_core.scss +153 -0
  8. package/_device.scss +535 -0
  9. package/_elements.scss +77 -0
  10. package/_helpers.scss +13 -0
  11. package/_index.scss +14 -0
  12. package/_palettes.scss +19 -0
  13. package/_scheme.scss +340 -0
  14. package/_theme.scss +34 -0
  15. package/_utilities.scss +132 -0
  16. package/package.json +41 -0
  17. package/tailwind/helpers.tailwind.js +17 -0
  18. package/tailwind/utilities.tailwind.js +144 -0
  19. package/tokens.json +11360 -0
package/_device.scss ADDED
@@ -0,0 +1,535 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 11 Nov 2024 15:43:49 GMT
5
+
6
+ $post-desktop: (
7
+ post-device-font-size-1: var(--post-core-font-size-40),
8
+ post-device-font-size-2: var(--post-core-font-size-36),
9
+ post-device-font-size-3: var(--post-core-font-size-32),
10
+ post-device-font-size-4: var(--post-core-font-size-28),
11
+ post-device-font-size-5: var(--post-core-font-size-24),
12
+ post-device-font-size-6: var(--post-core-font-size-20),
13
+ post-device-font-size-7: var(--post-core-font-size-16),
14
+ post-device-font-size-8: var(--post-core-font-size-16),
15
+ post-device-font-size-9: var(--post-core-font-size-14),
16
+ post-device-font-size-10: var(--post-core-font-size-14),
17
+ post-device-font-size-11: var(--post-core-font-size-12),
18
+ post-device-font-size-heading-xs: var(--post-core-font-size-20),
19
+ post-device-font-size-heading-s: var(--post-core-font-size-24),
20
+ post-device-font-size-heading-m: var(--post-core-font-size-28),
21
+ post-device-font-size-heading-l: var(--post-core-font-size-32),
22
+ post-device-font-size-heading-xl: var(--post-core-font-size-36),
23
+ post-device-font-size-heading-xxl: var(--post-core-font-size-40),
24
+ post-device-font-size-text-xs: var(--post-core-font-size-12),
25
+ post-device-font-size-text-s: var(--post-core-font-size-14),
26
+ post-device-font-size-text-m: var(--post-core-font-size-16),
27
+ post-device-font-size-text-l: var(--post-core-font-size-18),
28
+ post-device-font-size-text-xl: var(--post-core-font-size-20),
29
+ post-device-font-size-text-xxs: var(--post-core-font-size-10),
30
+ post-device-elevation-100: var(--post-core-elevation-1),
31
+ post-device-elevation-200: var(--post-core-elevation-2),
32
+ post-device-elevation-300: var(--post-core-elevation-3),
33
+ post-device-elevation-400: var(--post-core-elevation-4),
34
+ post-device-elevation-500: var(--post-core-elevation-5),
35
+ post-device-font-family-default: var(--post-core-font-family-swiss-post),
36
+ post-device-spacing-gap-1: var(--post-core-dimension-8),
37
+ post-device-spacing-gap-2: var(--post-core-dimension-2),
38
+ post-device-spacing-gap-3: var(--post-core-dimension-12),
39
+ post-device-spacing-gap-4: var(--post-core-dimension-16),
40
+ post-device-spacing-gap-5: var(--post-core-dimension-24),
41
+ post-device-spacing-gap-6: var(--post-core-dimension-0),
42
+ post-device-spacing-gap-7: var(--post-core-dimension-16),
43
+ post-device-spacing-gap-block-1: var(--post-core-dimension-8),
44
+ post-device-spacing-gap-block-2: var(--post-core-dimension-16),
45
+ post-device-spacing-gap-block-3: var(--post-core-dimension-16),
46
+ post-device-spacing-gap-inline-1: var(--post-core-dimension-8),
47
+ post-device-spacing-gap-inline-2: var(--post-core-dimension-16),
48
+ post-device-spacing-gap-inline-3: var(--post-core-dimension-12),
49
+ post-device-spacing-gap-inline-4: var(--post-core-dimension-4),
50
+ post-device-spacing-gap-inline-5: var(--post-core-dimension-2),
51
+ post-device-spacing-gap-inline-6: var(--post-core-dimension-24),
52
+ post-device-spacing-gap-inline-7: var(--post-core-dimension-18),
53
+ post-device-spacing-gap-inline-8: var(--post-core-dimension-12),
54
+ post-device-spacing-gap-inline-9: var(--post-core-dimension-10),
55
+ post-device-spacing-gap-inline-10: var(--post-core-dimension-8),
56
+ post-device-spacing-gap-inline-11: var(--post-core-dimension-6),
57
+ post-device-spacing-gap-inline-12: var(--post-core-dimension-8),
58
+ post-device-spacing-gap-inline-13: var(--post-core-dimension-1),
59
+ post-device-spacing-padding-1: var(--post-core-dimension-0),
60
+ post-device-spacing-padding-2: var(--post-core-dimension-2),
61
+ post-device-spacing-padding-3: var(--post-core-dimension-10),
62
+ post-device-spacing-padding-4: var(--post-core-dimension-0),
63
+ post-device-spacing-padding-5: var(--post-core-dimension-16),
64
+ post-device-spacing-padding-6: var(--post-core-dimension-32),
65
+ post-device-spacing-padding-7: var(--post-core-dimension-8-5),
66
+ post-device-spacing-padding-8: var(--post-core-dimension-5),
67
+ post-device-spacing-padding-9: var(--post-core-dimension-19),
68
+ post-device-spacing-padding-10: var(--post-core-dimension-22),
69
+ post-device-spacing-padding-11: var(--post-core-dimension-14),
70
+ post-device-spacing-padding-12: var(--post-core-dimension-1),
71
+ post-device-spacing-padding-13: var(--post-core-dimension-16),
72
+ post-device-spacing-padding-14: var(--post-core-dimension-14),
73
+ post-device-spacing-padding-15: var(--post-core-dimension-8),
74
+ post-device-spacing-padding-16: var(--post-core-dimension-4),
75
+ post-device-spacing-padding-17: var(--post-core-dimension-16),
76
+ post-device-spacing-padding-18: var(--post-core-dimension-0),
77
+ post-device-spacing-padding-19: var(--post-core-dimension-17-5),
78
+ post-device-spacing-padding-20: var(--post-core-dimension-15-5),
79
+ post-device-spacing-padding-21: var(--post-core-dimension-16),
80
+ post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
81
+ post-device-spacing-padding-inline-3: var(--post-core-dimension-16),
82
+ post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
83
+ post-device-spacing-padding-inline-5: var(--post-core-dimension-22),
84
+ post-device-spacing-padding-inline-6: var(--post-core-dimension-18),
85
+ post-device-spacing-padding-inline-7: var(--post-core-dimension-14),
86
+ post-device-spacing-padding-inline-8: var(--post-core-dimension-2),
87
+ post-device-spacing-padding-inline-9: var(--post-core-dimension-0),
88
+ post-device-spacing-padding-block-1: var(--post-core-dimension-11),
89
+ post-device-spacing-padding-block-2: var(--post-core-dimension-4),
90
+ post-device-spacing-padding-block-3: var(--post-core-dimension-4-5),
91
+ post-device-spacing-padding-block-4: var(--post-core-dimension-7-5),
92
+ post-device-spacing-padding-block-5: var(--post-core-dimension-6),
93
+ post-device-spacing-padding-block-6: var(--post-core-dimension-1),
94
+ post-device-spacing-padding-block-7: var(--post-core-dimension-1),
95
+ post-device-spacing-padding-block-8: var(--post-core-dimension-8),
96
+ post-device-spacing-padding-block-9: var(--post-core-dimension-0),
97
+ post-device-spacing-padding-block-10: var(--post-core-dimension-24),
98
+ post-device-spacing-padding-block-11: var(--post-core-dimension-4),
99
+ post-device-spacing-padding-block-12: var(--post-core-dimension-10),
100
+ post-device-spacing-padding-block-13: var(--post-core-dimension-16),
101
+ post-device-spacing-padding-block-14: var(--post-core-dimension-8),
102
+ post-device-spacing-padding-block-15: var(--post-core-dimension-5),
103
+ post-device-spacing-padding-block-16: var(--post-core-dimension-13),
104
+ post-device-spacing-padding-block-17: var(--post-core-dimension-10),
105
+ post-device-spacing-padding-block-18: var(--post-core-dimension-3),
106
+ post-device-spacing-padding-block-19: var(--post-core-dimension-1),
107
+ post-device-spacing-padding-block-20: var(--post-core-dimension-0),
108
+ post-device-spacing-padding-block-21: var(--post-core-dimension-32),
109
+ post-device-spacing-padding-block-22: var(--post-core-dimension-17),
110
+ post-device-spacing-padding-block-23: var(--post-core-dimension-16),
111
+ post-device-spacing-padding-block-24: var(--post-core-dimension-3),
112
+ post-device-spacing-padding-block-25: var(--post-core-dimension-24),
113
+ post-device-spacing-padding-block-26: var(--post-core-dimension-26),
114
+ post-device-spacing-padding-block-27: var(--post-core-dimension-17),
115
+ post-device-spacing-padding-block-28: var(--post-core-dimension-17),
116
+ post-device-spacing-padding-block-29: var(--post-core-dimension-25-5),
117
+ post-device-spacing-padding-block-30: var(--post-core-dimension-6-5),
118
+ post-device-spacing-margin-1: var(--post-core-dimension-40),
119
+ post-device-spacing-margin-2: var(--post-core-dimension-24),
120
+ post-device-spacing-margin-3: var(--post-core-dimension-16),
121
+ post-device-spacing-margin-4: var(--post-core-dimension-24),
122
+ post-device-spacing-margin-5: var(--post-core-dimension-40),
123
+ post-device-spacing-margin-6: var(--post-core-dimension-32),
124
+ post-device-sizing-interactive-icon-height: var(--post-core-dimension-24),
125
+ post-device-sizing-interactive-icon-width: var(--post-core-dimension-24),
126
+ post-device-sizing-interactive-icon-size: var(--post-core-dimension-24),
127
+ post-device-sizing-interactive-icon-size2: var(--post-core-dimension-24),
128
+ post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
129
+ post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
130
+ post-device-sizing-interactive-textfields-icon: var(--post-core-dimension-32),
131
+ post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-40),
132
+ post-device-sizing-interactive-button-height-1: var(--post-core-dimension-48),
133
+ post-device-sizing-interactive-button-height-2: var(--post-core-dimension-56),
134
+ post-device-sizing-interactive-button-height-3: var(--post-core-dimension-40),
135
+ post-device-sizing-interactive-button-height-4: var(--post-core-dimension-40),
136
+ post-device-sizing-interactive-button-height-5: var(--post-core-dimension-48),
137
+ post-device-sizing-interactive-button-height-6: var(--post-core-dimension-64),
138
+ post-device-sizing-interactive-button-appstore-width-google: 162px,
139
+ post-device-sizing-interactive-button-appstore-width-apple: 143.6px,
140
+ post-device-sizing-interactive-button-icon-1: var(--post-core-dimension-24),
141
+ post-device-sizing-interactive-button-icon-2: var(--post-core-dimension-20),
142
+ post-device-sizing-interactive-button-icon-3: var(--post-core-dimension-24),
143
+ post-device-sizing-interactive-button-icon-4: var(--post-core-dimension-20),
144
+ post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-16),
145
+ post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-8),
146
+ post-device-sizing-interactive-footer-socialmedia: var(--post-core-dimension-40),
147
+ post-device-sizing-notification-1: var(--post-core-dimension-24),
148
+ post-device-sizing-notification-2: var(--post-core-dimension-16),
149
+ post-device-sizing-notification-3: var(--post-core-dimension-8),
150
+ post-device-sizing-notification-icon-1: var(--post-core-dimension-28),
151
+ post-device-sizing-notification-icon-2: var(--post-core-dimension-64),
152
+ post-device-sizing-notification-icon-3: var(--post-core-dimension-32),
153
+ post-device-sizing-notification-icon-4: var(--post-core-dimension-48),
154
+ post-device-sizing-icon-1: var(--post-core-dimension-24),
155
+ post-device-sizing-icon-2: var(--post-core-dimension-30),
156
+ post-device-sizing-icon-3: var(--post-core-dimension-16),
157
+ post-device-sizing-logo-1: var(--post-core-dimension-72),
158
+ post-device-border-radius-1: var(--post-core-dimension-4),
159
+ post-device-border-radius-2: var(--post-core-dimension-8),
160
+ post-device-border-radius-round: var(--post-core-dimension-100),
161
+ post-device-border-radius-focus: var(--post-core-dimension-4),
162
+ post-device-font-weight-bold: var(--post-core-font-weight-700),
163
+ post-device-font-weight-regular: var(--post-core-font-weight-400),
164
+ post-device-font-weight-medium: var(--post-core-font-weight-500),
165
+ post-device-font-weight-black: var(--post-core-font-weight-900),
166
+ post-device-line-height-heading: var(--post-core-line-height-120),
167
+ post-device-line-height-content: var(--post-core-line-height-150),
168
+ post-device-line-height-legend: var(--post-core-line-height-120),
169
+ post-device-line-height-label: var(--post-core-line-height-150),
170
+ post-device-line-height-link: var(--post-core-line-height-150),
171
+ post-device-border-width-default: var(--post-core-dimension-2),
172
+ post-device-border-width-focus: var(--post-core-dimension-2),
173
+ post-device-border-width-alternative2: var(--post-core-dimension-3),
174
+ post-device-border-width-alternative1: var(--post-core-dimension-1),
175
+ post-device-border-width-quote: var(--post-core-dimension-8),
176
+ post-device-grid-sizing-gutter: var(--post-core-dimension-24),
177
+ post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
178
+ post-device-grid-padding-inline-container: var(--post-core-dimension-40),
179
+ post-device-position-1: var(--post-core-dimension-32),
180
+ post-device-position-2: var(--post-core-dimension-18),
181
+ );
182
+
183
+ $post-tablet: (
184
+ post-device-font-size-1: var(--post-core-font-size-36),
185
+ post-device-font-size-2: var(--post-core-font-size-32),
186
+ post-device-font-size-3: var(--post-core-font-size-28),
187
+ post-device-font-size-4: var(--post-core-font-size-24),
188
+ post-device-font-size-5: var(--post-core-font-size-20),
189
+ post-device-font-size-6: var(--post-core-font-size-16),
190
+ post-device-font-size-7: var(--post-core-font-size-16),
191
+ post-device-font-size-8: var(--post-core-font-size-16),
192
+ post-device-font-size-9: var(--post-core-font-size-14),
193
+ post-device-font-size-10: var(--post-core-font-size-12),
194
+ post-device-font-size-11: var(--post-core-font-size-12),
195
+ post-device-font-size-heading-xs: var(--post-core-font-size-16),
196
+ post-device-font-size-heading-s: var(--post-core-font-size-20),
197
+ post-device-font-size-heading-m: var(--post-core-font-size-24),
198
+ post-device-font-size-heading-l: var(--post-core-font-size-28),
199
+ post-device-font-size-heading-xl: var(--post-core-font-size-32),
200
+ post-device-font-size-heading-xxl: var(--post-core-font-size-36),
201
+ post-device-font-size-text-xs: var(--post-core-font-size-12),
202
+ post-device-font-size-text-s: var(--post-core-font-size-14),
203
+ post-device-font-size-text-m: var(--post-core-font-size-16),
204
+ post-device-font-size-text-l: var(--post-core-font-size-18),
205
+ post-device-font-size-text-xl: var(--post-core-font-size-20),
206
+ post-device-font-size-text-xxs: var(--post-core-font-size-10),
207
+ post-device-elevation-100: var(--post-core-elevation-1),
208
+ post-device-elevation-200: var(--post-core-elevation-2),
209
+ post-device-elevation-300: var(--post-core-elevation-3),
210
+ post-device-elevation-400: var(--post-core-elevation-4),
211
+ post-device-elevation-500: var(--post-core-elevation-5),
212
+ post-device-font-family-default: var(--post-core-font-family-swiss-post),
213
+ post-device-spacing-gap-1: var(--post-core-dimension-8),
214
+ post-device-spacing-gap-2: var(--post-core-dimension-2),
215
+ post-device-spacing-gap-3: var(--post-core-dimension-12),
216
+ post-device-spacing-gap-4: var(--post-core-dimension-16),
217
+ post-device-spacing-gap-5: var(--post-core-dimension-24),
218
+ post-device-spacing-gap-6: var(--post-core-dimension-0),
219
+ post-device-spacing-gap-7: var(--post-core-dimension-16),
220
+ post-device-spacing-gap-block-1: var(--post-core-dimension-4),
221
+ post-device-spacing-gap-block-2: var(--post-core-dimension-16),
222
+ post-device-spacing-gap-block-3: var(--post-core-dimension-8),
223
+ post-device-spacing-gap-inline-1: var(--post-core-dimension-8),
224
+ post-device-spacing-gap-inline-2: var(--post-core-dimension-12),
225
+ post-device-spacing-gap-inline-3: var(--post-core-dimension-12),
226
+ post-device-spacing-gap-inline-4: var(--post-core-dimension-4),
227
+ post-device-spacing-gap-inline-5: var(--post-core-dimension-2),
228
+ post-device-spacing-gap-inline-6: var(--post-core-dimension-16),
229
+ post-device-spacing-gap-inline-7: var(--post-core-dimension-16),
230
+ post-device-spacing-gap-inline-8: var(--post-core-dimension-10),
231
+ post-device-spacing-gap-inline-9: var(--post-core-dimension-8),
232
+ post-device-spacing-gap-inline-10: var(--post-core-dimension-6),
233
+ post-device-spacing-gap-inline-11: var(--post-core-dimension-6),
234
+ post-device-spacing-gap-inline-12: var(--post-core-dimension-6),
235
+ post-device-spacing-gap-inline-13: var(--post-core-dimension-1),
236
+ post-device-spacing-padding-1: var(--post-core-dimension-1),
237
+ post-device-spacing-padding-2: var(--post-core-dimension-2),
238
+ post-device-spacing-padding-3: var(--post-core-dimension-10),
239
+ post-device-spacing-padding-4: var(--post-core-dimension-0),
240
+ post-device-spacing-padding-5: var(--post-core-dimension-16),
241
+ post-device-spacing-padding-6: var(--post-core-dimension-32),
242
+ post-device-spacing-padding-7: var(--post-core-dimension-8-5),
243
+ post-device-spacing-padding-8: var(--post-core-dimension-5),
244
+ post-device-spacing-padding-9: var(--post-core-dimension-15),
245
+ post-device-spacing-padding-10: var(--post-core-dimension-22),
246
+ post-device-spacing-padding-11: var(--post-core-dimension-14),
247
+ post-device-spacing-padding-12: var(--post-core-dimension-1),
248
+ post-device-spacing-padding-13: var(--post-core-dimension-14),
249
+ post-device-spacing-padding-14: var(--post-core-dimension-12),
250
+ post-device-spacing-padding-15: var(--post-core-dimension-8),
251
+ post-device-spacing-padding-16: var(--post-core-dimension-4),
252
+ post-device-spacing-padding-17: var(--post-core-dimension-16),
253
+ post-device-spacing-padding-18: var(--post-core-dimension-0),
254
+ post-device-spacing-padding-19: var(--post-core-dimension-16),
255
+ post-device-spacing-padding-20: var(--post-core-dimension-14),
256
+ post-device-spacing-padding-21: var(--post-core-dimension-16),
257
+ post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
258
+ post-device-spacing-padding-inline-3: var(--post-core-dimension-12),
259
+ post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
260
+ post-device-spacing-padding-inline-5: var(--post-core-dimension-18),
261
+ post-device-spacing-padding-inline-6: var(--post-core-dimension-14),
262
+ post-device-spacing-padding-inline-7: var(--post-core-dimension-10),
263
+ post-device-spacing-padding-inline-8: var(--post-core-dimension-2),
264
+ post-device-spacing-padding-inline-9: var(--post-core-dimension-2),
265
+ post-device-spacing-padding-block-1: var(--post-core-dimension-10),
266
+ post-device-spacing-padding-block-2: var(--post-core-dimension-4),
267
+ post-device-spacing-padding-block-3: var(--post-core-dimension-5),
268
+ post-device-spacing-padding-block-4: var(--post-core-dimension-5),
269
+ post-device-spacing-padding-block-5: var(--post-core-dimension-6),
270
+ post-device-spacing-padding-block-6: var(--post-core-dimension-0),
271
+ post-device-spacing-padding-block-7: var(--post-core-dimension-0),
272
+ post-device-spacing-padding-block-8: var(--post-core-dimension-8),
273
+ post-device-spacing-padding-block-9: var(--post-core-dimension-0),
274
+ post-device-spacing-padding-block-10: var(--post-core-dimension-16),
275
+ post-device-spacing-padding-block-11: var(--post-core-dimension-0),
276
+ post-device-spacing-padding-block-12: var(--post-core-dimension-6),
277
+ post-device-spacing-padding-block-13: var(--post-core-dimension-8),
278
+ post-device-spacing-padding-block-14: var(--post-core-dimension-8-5),
279
+ post-device-spacing-padding-block-15: var(--post-core-dimension-3-5),
280
+ post-device-spacing-padding-block-16: var(--post-core-dimension-12),
281
+ post-device-spacing-padding-block-17: var(--post-core-dimension-9),
282
+ post-device-spacing-padding-block-18: var(--post-core-dimension-0),
283
+ post-device-spacing-padding-block-19: var(--post-core-dimension-0),
284
+ post-device-spacing-padding-block-20: var(--post-core-dimension-0),
285
+ post-device-spacing-padding-block-21: var(--post-core-dimension-32),
286
+ post-device-spacing-padding-block-22: var(--post-core-dimension-16),
287
+ post-device-spacing-padding-block-23: var(--post-core-dimension-15),
288
+ post-device-spacing-padding-block-24: var(--post-core-dimension-0),
289
+ post-device-spacing-padding-block-25: var(--post-core-dimension-24),
290
+ post-device-spacing-padding-block-26: var(--post-core-dimension-23),
291
+ post-device-spacing-padding-block-27: var(--post-core-dimension-12),
292
+ post-device-spacing-padding-block-28: var(--post-core-dimension-16),
293
+ post-device-spacing-padding-block-29: var(--post-core-dimension-23),
294
+ post-device-spacing-padding-block-30: var(--post-core-dimension-7),
295
+ post-device-spacing-margin-1: var(--post-core-dimension-40),
296
+ post-device-spacing-margin-2: var(--post-core-dimension-24),
297
+ post-device-spacing-margin-3: var(--post-core-dimension-16),
298
+ post-device-spacing-margin-4: var(--post-core-dimension-16),
299
+ post-device-spacing-margin-5: var(--post-core-dimension-32),
300
+ post-device-spacing-margin-6: var(--post-core-dimension-32),
301
+ post-device-sizing-interactive-icon-height: var(--post-core-dimension-22),
302
+ post-device-sizing-interactive-icon-width: var(--post-core-dimension-22),
303
+ post-device-sizing-interactive-icon-size: var(--post-core-dimension-22),
304
+ post-device-sizing-interactive-icon-size2: var(--post-core-dimension-24),
305
+ post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
306
+ post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
307
+ post-device-sizing-interactive-textfields-icon: var(--post-core-dimension-32),
308
+ post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-32),
309
+ post-device-sizing-interactive-button-height-1: var(--post-core-dimension-40),
310
+ post-device-sizing-interactive-button-height-2: var(--post-core-dimension-48),
311
+ post-device-sizing-interactive-button-height-3: var(--post-core-dimension-32),
312
+ post-device-sizing-interactive-button-height-4: var(--post-core-dimension-34),
313
+ post-device-sizing-interactive-button-height-5: var(--post-core-dimension-40),
314
+ post-device-sizing-interactive-button-height-6: var(--post-core-dimension-56),
315
+ post-device-sizing-interactive-button-appstore-width-google: 135px,
316
+ post-device-sizing-interactive-button-appstore-width-apple: 119.66px,
317
+ post-device-sizing-interactive-button-icon-1: var(--post-core-dimension-20),
318
+ post-device-sizing-interactive-button-icon-2: var(--post-core-dimension-16),
319
+ post-device-sizing-interactive-button-icon-3: var(--post-core-dimension-20),
320
+ post-device-sizing-interactive-button-icon-4: var(--post-core-dimension-16),
321
+ post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-14),
322
+ post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-6),
323
+ post-device-sizing-interactive-footer-socialmedia: var(--post-core-dimension-32),
324
+ post-device-sizing-notification-1: var(--post-core-dimension-24),
325
+ post-device-sizing-notification-2: var(--post-core-dimension-16),
326
+ post-device-sizing-notification-3: var(--post-core-dimension-8),
327
+ post-device-sizing-notification-icon-1: var(--post-core-dimension-28),
328
+ post-device-sizing-notification-icon-2: var(--post-core-dimension-48),
329
+ post-device-sizing-notification-icon-3: var(--post-core-dimension-24),
330
+ post-device-sizing-notification-icon-4: var(--post-core-dimension-40),
331
+ post-device-sizing-icon-1: var(--post-core-dimension-16),
332
+ post-device-sizing-icon-2: var(--post-core-dimension-24),
333
+ post-device-sizing-icon-3: var(--post-core-dimension-14),
334
+ post-device-sizing-logo-1: var(--post-core-dimension-64),
335
+ post-device-border-radius-1: var(--post-core-dimension-4),
336
+ post-device-border-radius-2: var(--post-core-dimension-8),
337
+ post-device-border-radius-round: var(--post-core-dimension-100),
338
+ post-device-border-radius-focus: var(--post-core-dimension-4),
339
+ post-device-font-weight-bold: var(--post-core-font-weight-700),
340
+ post-device-font-weight-regular: var(--post-core-font-weight-400),
341
+ post-device-font-weight-medium: var(--post-core-font-weight-500),
342
+ post-device-font-weight-black: var(--post-core-font-weight-900),
343
+ post-device-line-height-heading: var(--post-core-line-height-120),
344
+ post-device-line-height-content: var(--post-core-line-height-150),
345
+ post-device-line-height-legend: var(--post-core-line-height-120),
346
+ post-device-line-height-label: var(--post-core-line-height-150),
347
+ post-device-line-height-link: var(--post-core-line-height-150),
348
+ post-device-border-width-default: var(--post-core-dimension-2),
349
+ post-device-border-width-focus: var(--post-core-dimension-2),
350
+ post-device-border-width-alternative2: var(--post-core-dimension-3),
351
+ post-device-border-width-alternative1: var(--post-core-dimension-1),
352
+ post-device-border-width-quote: var(--post-core-dimension-6),
353
+ post-device-grid-sizing-gutter: var(--post-core-dimension-16),
354
+ post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
355
+ post-device-grid-padding-inline-container: var(--post-core-dimension-24),
356
+ post-device-position-1: var(--post-core-dimension-24),
357
+ post-device-position-2: var(--post-core-dimension-18),
358
+ );
359
+
360
+ $post-mobile: (
361
+ post-device-font-size-1: var(--post-core-font-size-32),
362
+ post-device-font-size-2: var(--post-core-font-size-28),
363
+ post-device-font-size-3: var(--post-core-font-size-24),
364
+ post-device-font-size-4: var(--post-core-font-size-20),
365
+ post-device-font-size-5: var(--post-core-font-size-18),
366
+ post-device-font-size-6: var(--post-core-font-size-14),
367
+ post-device-font-size-7: var(--post-core-font-size-14),
368
+ post-device-font-size-8: var(--post-core-font-size-16),
369
+ post-device-font-size-9: var(--post-core-font-size-14),
370
+ post-device-font-size-10: var(--post-core-font-size-12),
371
+ post-device-font-size-11: var(--post-core-font-size-12),
372
+ post-device-font-size-heading-xs: var(--post-core-font-size-14),
373
+ post-device-font-size-heading-s: var(--post-core-font-size-18),
374
+ post-device-font-size-heading-m: var(--post-core-font-size-20),
375
+ post-device-font-size-heading-l: var(--post-core-font-size-24),
376
+ post-device-font-size-heading-xl: var(--post-core-font-size-28),
377
+ post-device-font-size-heading-xxl: var(--post-core-font-size-32),
378
+ post-device-font-size-text-xs: var(--post-core-font-size-12),
379
+ post-device-font-size-text-s: var(--post-core-font-size-14),
380
+ post-device-font-size-text-m: var(--post-core-font-size-16),
381
+ post-device-font-size-text-l: var(--post-core-font-size-18),
382
+ post-device-font-size-text-xl: var(--post-core-font-size-20),
383
+ post-device-font-size-text-xxs: var(--post-core-font-size-10),
384
+ post-device-elevation-100: var(--post-core-elevation-1),
385
+ post-device-elevation-200: var(--post-core-elevation-2),
386
+ post-device-elevation-300: var(--post-core-elevation-3),
387
+ post-device-elevation-400: var(--post-core-elevation-4),
388
+ post-device-elevation-500: var(--post-core-elevation-5),
389
+ post-device-font-family-default: var(--post-core-font-family-swiss-post),
390
+ post-device-spacing-gap-1: var(--post-core-dimension-8),
391
+ post-device-spacing-gap-2: var(--post-core-dimension-2),
392
+ post-device-spacing-gap-3: var(--post-core-dimension-12),
393
+ post-device-spacing-gap-4: var(--post-core-dimension-8),
394
+ post-device-spacing-gap-5: var(--post-core-dimension-8),
395
+ post-device-spacing-gap-6: var(--post-core-dimension-n2),
396
+ post-device-spacing-gap-7: var(--post-core-dimension-16),
397
+ post-device-spacing-gap-block-1: var(--post-core-dimension-4),
398
+ post-device-spacing-gap-block-2: var(--post-core-dimension-16),
399
+ post-device-spacing-gap-block-3: var(--post-core-dimension-8),
400
+ post-device-spacing-gap-inline-1: var(--post-core-dimension-6),
401
+ post-device-spacing-gap-inline-2: var(--post-core-dimension-8),
402
+ post-device-spacing-gap-inline-3: var(--post-core-dimension-12),
403
+ post-device-spacing-gap-inline-4: var(--post-core-dimension-4),
404
+ post-device-spacing-gap-inline-5: var(--post-core-dimension-2),
405
+ post-device-spacing-gap-inline-6: var(--post-core-dimension-16),
406
+ post-device-spacing-gap-inline-7: var(--post-core-dimension-12),
407
+ post-device-spacing-gap-inline-8: var(--post-core-dimension-8),
408
+ post-device-spacing-gap-inline-9: var(--post-core-dimension-6),
409
+ post-device-spacing-gap-inline-10: var(--post-core-dimension-4),
410
+ post-device-spacing-gap-inline-11: var(--post-core-dimension-4),
411
+ post-device-spacing-gap-inline-12: var(--post-core-dimension-4),
412
+ post-device-spacing-gap-inline-13: var(--post-core-dimension-0),
413
+ post-device-spacing-padding-1: var(--post-core-dimension-2),
414
+ post-device-spacing-padding-2: var(--post-core-dimension-2),
415
+ post-device-spacing-padding-3: var(--post-core-dimension-10),
416
+ post-device-spacing-padding-4: var(--post-core-dimension-2),
417
+ post-device-spacing-padding-5: var(--post-core-dimension-16),
418
+ post-device-spacing-padding-6: var(--post-core-dimension-32),
419
+ post-device-spacing-padding-7: var(--post-core-dimension-8-5),
420
+ post-device-spacing-padding-8: var(--post-core-dimension-5),
421
+ post-device-spacing-padding-9: var(--post-core-dimension-15),
422
+ post-device-spacing-padding-10: var(--post-core-dimension-14),
423
+ post-device-spacing-padding-11: var(--post-core-dimension-14),
424
+ post-device-spacing-padding-12: var(--post-core-dimension-1),
425
+ post-device-spacing-padding-13: var(--post-core-dimension-12),
426
+ post-device-spacing-padding-14: var(--post-core-dimension-10),
427
+ post-device-spacing-padding-15: var(--post-core-dimension-8),
428
+ post-device-spacing-padding-16: var(--post-core-dimension-2),
429
+ post-device-spacing-padding-17: var(--post-core-dimension-8),
430
+ post-device-spacing-padding-18: var(--post-core-dimension-4),
431
+ post-device-spacing-padding-19: var(--post-core-dimension-12),
432
+ post-device-spacing-padding-20: var(--post-core-dimension-10),
433
+ post-device-spacing-padding-21: var(--post-core-dimension-16),
434
+ post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
435
+ post-device-spacing-padding-inline-3: var(--post-core-dimension-12),
436
+ post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
437
+ post-device-spacing-padding-inline-5: var(--post-core-dimension-14),
438
+ post-device-spacing-padding-inline-6: var(--post-core-dimension-12),
439
+ post-device-spacing-padding-inline-7: var(--post-core-dimension-8),
440
+ post-device-spacing-padding-inline-8: var(--post-core-dimension-0),
441
+ post-device-spacing-padding-inline-9: var(--post-core-dimension-0),
442
+ post-device-spacing-padding-block-1: var(--post-core-dimension-10),
443
+ post-device-spacing-padding-block-2: var(--post-core-dimension-5-5),
444
+ post-device-spacing-padding-block-3: var(--post-core-dimension-6-5),
445
+ post-device-spacing-padding-block-4: var(--post-core-dimension-5),
446
+ post-device-spacing-padding-block-5: var(--post-core-dimension-6),
447
+ post-device-spacing-padding-block-6: var(--post-core-dimension-1-5),
448
+ post-device-spacing-padding-block-7: var(--post-core-dimension-0),
449
+ post-device-spacing-padding-block-8: var(--post-core-dimension-4),
450
+ post-device-spacing-padding-block-9: var(--post-core-dimension-1-5),
451
+ post-device-spacing-padding-block-10: var(--post-core-dimension-16),
452
+ post-device-spacing-padding-block-11: var(--post-core-dimension-3),
453
+ post-device-spacing-padding-block-12: var(--post-core-dimension-6),
454
+ post-device-spacing-padding-block-13: var(--post-core-dimension-8),
455
+ post-device-spacing-padding-block-14: var(--post-core-dimension-6),
456
+ post-device-spacing-padding-block-15: var(--post-core-dimension-3-5),
457
+ post-device-spacing-padding-block-16: var(--post-core-dimension-8),
458
+ post-device-spacing-padding-block-17: var(--post-core-dimension-5),
459
+ post-device-spacing-padding-block-18: var(--post-core-dimension-0),
460
+ post-device-spacing-padding-block-19: var(--post-core-dimension-0),
461
+ post-device-spacing-padding-block-20: var(--post-core-dimension-1-5),
462
+ post-device-spacing-padding-block-21: var(--post-core-dimension-24),
463
+ post-device-spacing-padding-block-22: var(--post-core-dimension-12),
464
+ post-device-spacing-padding-block-23: var(--post-core-dimension-11),
465
+ post-device-spacing-padding-block-24: var(--post-core-dimension-2),
466
+ post-device-spacing-padding-block-25: var(--post-core-dimension-16),
467
+ post-device-spacing-padding-block-26: var(--post-core-dimension-26-5),
468
+ post-device-spacing-padding-block-27: var(--post-core-dimension-17-5),
469
+ post-device-spacing-padding-block-28: var(--post-core-dimension-17-5),
470
+ post-device-spacing-padding-block-29: var(--post-core-dimension-24-5),
471
+ post-device-spacing-padding-block-30: var(--post-core-dimension-8-5),
472
+ post-device-spacing-margin-1: var(--post-core-dimension-24),
473
+ post-device-spacing-margin-2: var(--post-core-dimension-16),
474
+ post-device-spacing-margin-3: var(--post-core-dimension-8),
475
+ post-device-spacing-margin-4: var(--post-core-dimension-8),
476
+ post-device-spacing-margin-5: var(--post-core-dimension-24),
477
+ post-device-spacing-margin-6: var(--post-core-dimension-0),
478
+ post-device-sizing-interactive-icon-height: var(--post-core-dimension-20),
479
+ post-device-sizing-interactive-icon-width: var(--post-core-dimension-20),
480
+ post-device-sizing-interactive-icon-size: var(--post-core-dimension-20),
481
+ post-device-sizing-interactive-icon-size2: var(--post-core-dimension-20),
482
+ post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
483
+ post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
484
+ post-device-sizing-interactive-textfields-icon: var(--post-core-dimension-32),
485
+ post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-32),
486
+ post-device-sizing-interactive-button-height-1: var(--post-core-dimension-32),
487
+ post-device-sizing-interactive-button-height-2: var(--post-core-dimension-40),
488
+ post-device-sizing-interactive-button-height-3: var(--post-core-dimension-24),
489
+ post-device-sizing-interactive-button-height-4: var(--post-core-dimension-28),
490
+ post-device-sizing-interactive-button-height-5: var(--post-core-dimension-40),
491
+ post-device-sizing-interactive-button-height-6: var(--post-core-dimension-56),
492
+ post-device-sizing-interactive-button-appstore-width-google: 135px,
493
+ post-device-sizing-interactive-button-appstore-width-apple: 119.66px,
494
+ post-device-sizing-interactive-button-icon-1: var(--post-core-dimension-16),
495
+ post-device-sizing-interactive-button-icon-2: var(--post-core-dimension-12),
496
+ post-device-sizing-interactive-button-icon-3: var(--post-core-dimension-18),
497
+ post-device-sizing-interactive-button-icon-4: var(--post-core-dimension-16),
498
+ post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-14),
499
+ post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-6),
500
+ post-device-sizing-interactive-footer-socialmedia: var(--post-core-dimension-24),
501
+ post-device-sizing-notification-1: var(--post-core-dimension-24),
502
+ post-device-sizing-notification-2: var(--post-core-dimension-16),
503
+ post-device-sizing-notification-3: var(--post-core-dimension-16),
504
+ post-device-sizing-notification-icon-1: var(--post-core-dimension-28),
505
+ post-device-sizing-notification-icon-2: var(--post-core-dimension-40),
506
+ post-device-sizing-notification-icon-3: var(--post-core-dimension-24),
507
+ post-device-sizing-notification-icon-4: var(--post-core-dimension-32),
508
+ post-device-sizing-icon-1: var(--post-core-dimension-12),
509
+ post-device-sizing-icon-2: var(--post-core-dimension-24),
510
+ post-device-sizing-icon-3: var(--post-core-dimension-12),
511
+ post-device-sizing-logo-1: var(--post-core-dimension-56),
512
+ post-device-border-radius-1: var(--post-core-dimension-4),
513
+ post-device-border-radius-2: var(--post-core-dimension-8),
514
+ post-device-border-radius-round: var(--post-core-dimension-100),
515
+ post-device-border-radius-focus: var(--post-core-dimension-4),
516
+ post-device-font-weight-bold: var(--post-core-font-weight-700),
517
+ post-device-font-weight-regular: var(--post-core-font-weight-400),
518
+ post-device-font-weight-medium: var(--post-core-font-weight-500),
519
+ post-device-font-weight-black: var(--post-core-font-weight-900),
520
+ post-device-line-height-heading: var(--post-core-line-height-120),
521
+ post-device-line-height-content: var(--post-core-line-height-150),
522
+ post-device-line-height-legend: var(--post-core-line-height-120),
523
+ post-device-line-height-label: var(--post-core-line-height-150),
524
+ post-device-line-height-link: var(--post-core-line-height-150),
525
+ post-device-border-width-default: var(--post-core-dimension-2),
526
+ post-device-border-width-focus: var(--post-core-dimension-2),
527
+ post-device-border-width-alternative2: var(--post-core-dimension-3),
528
+ post-device-border-width-alternative1: var(--post-core-dimension-1),
529
+ post-device-border-width-quote: var(--post-core-dimension-4),
530
+ post-device-grid-sizing-gutter: var(--post-core-dimension-16),
531
+ post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
532
+ post-device-grid-padding-inline-container: var(--post-core-dimension-16),
533
+ post-device-position-1: var(--post-core-dimension-16),
534
+ post-device-position-2: var(--post-core-dimension-18),
535
+ );
package/_elements.scss ADDED
@@ -0,0 +1,77 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 11 Nov 2024 15:43:49 GMT
5
+
6
+ $post-body: (
7
+ post-body-font-family: var(--post-device-font-family-default),
8
+ post-body-font-size: var(--post-device-font-size-6),
9
+ post-body-font-weight: var(--post-device-font-weight-regular),
10
+ post-body-line-height: var(--post-device-line-height-content),
11
+ post-body-letter-spacing: var(--post-core-letter-spacing-default),
12
+ post-body-color: var(--post-scheme-color-surface-default-fg),
13
+ );
14
+
15
+ $post-heading: (
16
+ post-h1-font-size: var(--post-device-font-size-1),
17
+ post-h1-margin-block-start: var(--post-device-spacing-margin-1),
18
+ post-h1-margin-block-end: var(--post-device-spacing-margin-2),
19
+ post-h2-font-size: var(--post-device-font-size-2),
20
+ post-h2-margin-block-start: var(--post-device-spacing-margin-1),
21
+ post-h2-margin-block-end: var(--post-device-spacing-margin-2),
22
+ post-h3-font-size: var(--post-device-font-size-3),
23
+ post-h3-margin-block-start: var(--post-device-spacing-margin-1),
24
+ post-h3-margin-block-end: var(--post-device-spacing-margin-3),
25
+ post-h4-font-size: var(--post-device-font-size-4),
26
+ post-h4-margin-block-start: var(--post-device-spacing-margin-1),
27
+ post-h4-margin-block-end: var(--post-device-spacing-margin-3),
28
+ post-h5-font-size: var(--post-device-font-size-5),
29
+ post-h5-margin-block-start: var(--post-device-spacing-margin-1),
30
+ post-h5-margin-block-end: var(--post-device-spacing-margin-3),
31
+ post-h6-font-size: var(--post-device-font-size-6),
32
+ post-h6-margin-block-start: var(--post-device-spacing-margin-1),
33
+ post-h6-margin-block-end: var(--post-device-spacing-margin-3),
34
+ post-heading-line-height: var(--post-device-line-height-heading),
35
+ post-heading-font-weight: var(--post-device-font-weight-black),
36
+ );
37
+
38
+ $post-paragraph: (
39
+ post-paragraph-margin-block-start: var(--post-device-spacing-margin-3),
40
+ );
41
+
42
+ $post-link: (
43
+ post-link-decoration: var(--post-core-text-decoration-underline),
44
+ post-link-hover-fg: var(--post-scheme-color-interactive-primary-hover-fg1),
45
+ post-link-border-radius: var(--post-device-border-radius-focus),
46
+ );
47
+
48
+ $post-listbullet: (
49
+ post-list-bullet-item-text-padding-block: var(--post-device-spacing-padding-block-6),
50
+ post-list-bullet-item-icon-gap-inline: var(--post-device-spacing-gap-inline-10),
51
+ post-list-bullet-item-icon-size: var(--post-device-sizing-notification-icon-3),
52
+ post-list-bullet-item-icon-bullet-size: var(--post-device-sizing-interactive-button-icon-6),
53
+ post-list-bullet-item-gap-block: var(--post-device-spacing-gap-1),
54
+ post-list-bullet-margin-block: var(--post-device-spacing-padding-block-8),
55
+ );
56
+
57
+ $post-listnumber: (
58
+ post-list-number-margin-block: var(--post-device-spacing-padding-block-8),
59
+ post-list-number-item-gap-block: var(--post-device-spacing-gap-1),
60
+ post-list-number-item-icon-gap-inline: var(--post-device-spacing-gap-inline-10),
61
+ post-list-number-item-icon-font-weight: var(--post-device-font-weight-bold),
62
+ post-list-number-item-icon-size: var(--post-device-sizing-notification-icon-3),
63
+ post-list-number-item-icon-padding-start: var(--post-device-spacing-padding-inline-8),
64
+ post-list-number-item-icon-padding-end: var(--post-device-spacing-padding-inline-9),
65
+ post-list-number-item-text-padding-block: var(--post-device-spacing-padding-block-6),
66
+ );
67
+
68
+ $post-legend: (
69
+ post-legend-font-weight: var(--post-device-font-weight-bold),
70
+ post-legend-line-height: var(--post-device-line-height-legend),
71
+ post-legend-large-font-size: var(--post-device-font-size-3),
72
+ post-legend-large-margin-block-start: var(--post-device-spacing-margin-1),
73
+ post-legend-large-padding-block-end: var(--post-device-spacing-padding-17),
74
+ post-legend-large-margin-block-end: var(--post-device-spacing-margin-4),
75
+ post-legend-large-border-bottom: var(--post-core-color-sandgrey-100) var(--post-device-border-width-default) var(--post-core-border-style-solid),
76
+ post-legend-large-border-color: var(--post-scheme-color-surface-default-stroke),
77
+ );
package/_helpers.scss ADDED
@@ -0,0 +1,13 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 11 Nov 2024 15:43:49 GMT
5
+
6
+ $post-focus: (
7
+ post-focus-outline-offset: var(--post-device-spacing-padding-2),
8
+ post-focus-outline-color: var(--post-scheme-color-interactive-focus-stroke),
9
+ post-focus-outline-color-inverted: var(--post-scheme-color-interactive-focus-stroke-inverted),
10
+ post-focus-outline-width: var(--post-device-border-width-focus),
11
+ post-focus-border-style: var(--post-core-border-style-solid),
12
+ post-focus-border-radius: var(--post-device-border-radius-focus),
13
+ );
package/_index.scss ADDED
@@ -0,0 +1,14 @@
1
+ // Do not edit manually
2
+ // This file was generated by the swisspost/design-system-tokens package
3
+ // Mon, 11 Nov 2024 15:43:49 GMT
4
+
5
+ @use './core';
6
+ @forward './scheme';
7
+ @forward './device';
8
+ @forward './channel';
9
+ @forward './theme';
10
+ @forward './elements';
11
+ @forward './components';
12
+ @forward './utilities';
13
+ @forward './palettes';
14
+ @forward './helpers';