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

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 (23) hide show
  1. package/CHANGELOG.md +43 -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 +793 -0
  7. package/_core.scss +147 -0
  8. package/_device.scss +433 -0
  9. package/_elements.scss +79 -0
  10. package/_helpers.scss +13 -0
  11. package/_index.scss +14 -0
  12. package/_palettes.scss +19 -0
  13. package/_scheme.scss +326 -0
  14. package/_theme.scss +34 -0
  15. package/_utilities.scss +132 -0
  16. package/package.json +41 -0
  17. package/palettes/_cargo-dark.scss +19 -0
  18. package/palettes/_cargo-light.scss +19 -0
  19. package/palettes/_post-dark.scss +19 -0
  20. package/palettes/_post-light.scss +19 -0
  21. package/tailwind/helpers.tailwind.js +17 -0
  22. package/tailwind/utilities.tailwind.js +144 -0
  23. package/tokens.json +10864 -0
package/_core.scss ADDED
@@ -0,0 +1,147 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 13 Jan 2025 11:05:26 GMT
5
+
6
+ :root {
7
+ --post-core-color-brand-postyellow: #ffcc00;
8
+ --post-core-color-brand-black: #000000;
9
+ --post-core-color-brand-white: #ffffff;
10
+ --post-core-color-notification-green: #107800;
11
+ --post-core-color-notification-red: #b20000;
12
+ --post-core-color-notification-orange: #d93d00;
13
+ --post-core-color-notification-blue: #0050a1;
14
+ --post-core-color-notification-green-light: #c3ddbf;
15
+ --post-core-color-notification-red-light: #ebbfbf;
16
+ --post-core-color-notification-orange-light: #f5cebf;
17
+ --post-core-color-notification-blue-light: #bfd3e7;
18
+ --post-core-color-notification-green-night: #55e543;
19
+ --post-core-color-notification-red-night: #ffc2c2;
20
+ --post-core-color-sandgrey-100: #050400;
21
+ --post-core-color-sandgrey-000: #fcfcfc;
22
+ --post-core-color-sandgrey-002: #fafafa;
23
+ --post-core-color-sandgrey-006: #f0efed;
24
+ --post-core-color-sandgrey-012: #e1e0dc;
25
+ --post-core-color-sandgrey-020: #cdccc8;
26
+ --post-core-color-sandgrey-030: #b4b3af;
27
+ --post-core-color-sandgrey-040: #9b9a96;
28
+ --post-core-color-sandgrey-050: #82817d;
29
+ --post-core-color-sandgrey-060: #696864;
30
+ --post-core-color-sandgrey-070: #504f4b;
31
+ --post-core-color-sandgrey-080: #373632;
32
+ --post-core-color-sandgrey-090: #1e1d19;
33
+ --post-core-color-sandgrey-alpha-darksand-10: rgba(5, 4, 0, 0.1);
34
+ --post-core-color-sandgrey-alpha-darksand-20: rgba(5, 4, 0, 0.2);
35
+ --post-core-color-sandgrey-alpha-darksand-30: rgba(5, 4, 0, 0.3);
36
+ --post-core-color-sandgrey-alpha-darksand-40: rgba(5, 4, 0, 0.4);
37
+ --post-core-color-sandgrey-alpha-darksand-50: rgba(5, 4, 0, 0.5);
38
+ --post-core-color-sandgrey-alpha-darksand-60: rgba(5, 4, 0, 0.6);
39
+ --post-core-color-sandgrey-alpha-darksand-70: rgba(5, 4, 0, 0.7);
40
+ --post-core-color-sandgrey-alpha-darksand-80: rgba(5, 4, 0, 0.8);
41
+ --post-core-color-sandgrey-alpha-darksand-90: rgba(5, 4, 0, 0.9);
42
+ --post-core-color-sandgrey-alpha-lightsand-10: rgba(252, 252, 252, 0.1);
43
+ --post-core-color-sandgrey-alpha-lightsand-20: rgba(252, 252, 252, 0.2);
44
+ --post-core-color-sandgrey-alpha-lightsand-30: rgba(252, 252, 252, 0.3);
45
+ --post-core-color-sandgrey-alpha-lightsand-40: rgba(252, 252, 252, 0.4);
46
+ --post-core-color-sandgrey-alpha-lightsand-50: rgba(252, 252, 252, 0.5);
47
+ --post-core-color-sandgrey-alpha-lightsand-60: rgba(252, 252, 252, 0.6);
48
+ --post-core-color-sandgrey-alpha-lightsand-70: rgba(252, 252, 252, 0.7);
49
+ --post-core-color-sandgrey-alpha-lightsand-80: rgba(252, 252, 252, 0.8);
50
+ --post-core-color-sandgrey-alpha-lightsand-90: rgba(252, 252, 252, 0.9);
51
+ --post-core-color-colorless: rgba(255, 255, 255, 0);
52
+ --post-core-color-cargo-green: #00411c;
53
+ --post-core-color-cargo-blue: #aadcff;
54
+ --post-core-dimension-0: 0rem;
55
+ --post-core-dimension-1: 1px;
56
+ --post-core-dimension-2: 2px;
57
+ --post-core-dimension-3: 3px;
58
+ --post-core-dimension-4: 4px;
59
+ --post-core-dimension-5: 5px;
60
+ --post-core-dimension-6: 6px;
61
+ --post-core-dimension-7: 7px;
62
+ --post-core-dimension-8: 8px;
63
+ --post-core-dimension-9: 9px;
64
+ --post-core-dimension-10: 10px;
65
+ --post-core-dimension-11: 11px;
66
+ --post-core-dimension-12: 12px;
67
+ --post-core-dimension-13: 13px;
68
+ --post-core-dimension-14: 14px;
69
+ --post-core-dimension-15: 15px;
70
+ --post-core-dimension-16: 16px;
71
+ --post-core-dimension-17: 17px;
72
+ --post-core-dimension-18: 18px;
73
+ --post-core-dimension-19: 19px;
74
+ --post-core-dimension-20: 20px;
75
+ --post-core-dimension-22: 22px;
76
+ --post-core-dimension-23: 23px;
77
+ --post-core-dimension-24: 24px;
78
+ --post-core-dimension-26: 26px;
79
+ --post-core-dimension-28: 28px;
80
+ --post-core-dimension-30: 30px;
81
+ --post-core-dimension-32: 32px;
82
+ --post-core-dimension-34: 34px;
83
+ --post-core-dimension-36: 36px;
84
+ --post-core-dimension-40: 40px;
85
+ --post-core-dimension-48: 48px;
86
+ --post-core-dimension-50: 50px;
87
+ --post-core-dimension-56: 56px;
88
+ --post-core-dimension-58: 58px;
89
+ --post-core-dimension-64: 64px;
90
+ --post-core-dimension-72: 72px;
91
+ --post-core-dimension-78: 78px;
92
+ --post-core-dimension-80: 80px;
93
+ --post-core-dimension-82: 82px;
94
+ --post-core-dimension-88: 88px;
95
+ --post-core-dimension-96: 96px;
96
+ --post-core-dimension-100: 100px;
97
+ --post-core-dimension-112: 112px;
98
+ --post-core-dimension-1280: 1280px;
99
+ --post-core-dimension-5-5: 5.5px;
100
+ --post-core-dimension-6-5: 6.5px;
101
+ --post-core-dimension-4-5: 4.5px;
102
+ --post-core-dimension-7-5: 7.5px;
103
+ --post-core-dimension-1-5: 1.5px;
104
+ --post-core-dimension-8-5: 8.5px;
105
+ --post-core-dimension-3-5: 3.5px;
106
+ --post-core-dimension-n2: -2px;
107
+ --post-core-dimension-15-5: 15.5px;
108
+ --post-core-dimension-16-5: 16.5px;
109
+ --post-core-dimension-17-5: 17.5px;
110
+ --post-core-dimension-26-5: 26.5px;
111
+ --post-core-dimension-25-5: 25.5px;
112
+ --post-core-dimension-24-5: 24.5px;
113
+ --post-core-font-weight-400: 400;
114
+ --post-core-font-weight-500: 500;
115
+ --post-core-font-weight-700: 700;
116
+ --post-core-font-weight-900: 900;
117
+ --post-core-font-size-10: 10px;
118
+ --post-core-font-size-12: 12px;
119
+ --post-core-font-size-14: 14px;
120
+ --post-core-font-size-16: 16px;
121
+ --post-core-font-size-18: 18px;
122
+ --post-core-font-size-20: 20px;
123
+ --post-core-font-size-24: 24px;
124
+ --post-core-font-size-28: 28px;
125
+ --post-core-font-size-32: 32px;
126
+ --post-core-font-size-36: 36px;
127
+ --post-core-font-size-40: 40px;
128
+ --post-core-line-height-100: 1;
129
+ --post-core-line-height-120: 1.2;
130
+ --post-core-line-height-150: 1.5;
131
+ --post-core-letter-spacing-default: 0.0012em;
132
+ --post-core-letter-spacing-none: 0rem;
133
+ --post-core-font-family-frutiger: 'Frutiger Neue for Post';
134
+ --post-core-font-family-swiss-post: 'Swiss Post Sans v005';
135
+ --post-core-font-family-caveat: Caveat;
136
+ --post-core-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
137
+ --post-core-elevation-2: 0 2px 4px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
138
+ --post-core-elevation-3: 0 4px 8px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
139
+ --post-core-elevation-4: 0 8px 16px 0 rgba(0,0,0,0.16), 0 0 2px 0 rgba(0,0,0,0.16);
140
+ --post-core-elevation-5: 0 14px 28px 0 rgba(0,0,0,0.24), 0 0 8px 0 rgba(0,0,0,0.24);
141
+ --post-core-border-style-solid: solid;
142
+ --post-core-border-style-dash: dashed;
143
+ --post-core-text-decoration-underline: underline;
144
+ --post-core-text-decoration-none: none;
145
+ --post-core-bg-scheme-light: light;
146
+ --post-core-bg-scheme-dark: dark;
147
+ }
package/_device.scss ADDED
@@ -0,0 +1,433 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 13 Jan 2025 11:05:26 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-elevation-100: var(--post-core-elevation-1),
19
+ post-device-elevation-200: var(--post-core-elevation-2),
20
+ post-device-elevation-300: var(--post-core-elevation-3),
21
+ post-device-elevation-400: var(--post-core-elevation-4),
22
+ post-device-elevation-500: var(--post-core-elevation-5),
23
+ post-device-font-family-default: var(--post-core-font-family-swiss-post),
24
+ post-device-spacing-gap-1: var(--post-core-dimension-8),
25
+ post-device-spacing-gap-2: var(--post-core-dimension-2),
26
+ post-device-spacing-gap-4: var(--post-core-dimension-16),
27
+ post-device-spacing-gap-6: var(--post-core-dimension-0),
28
+ post-device-spacing-gap-7: var(--post-core-dimension-16),
29
+ post-device-spacing-gap-block-1: var(--post-core-dimension-8),
30
+ post-device-spacing-gap-block-2: var(--post-core-dimension-16),
31
+ post-device-spacing-gap-block-3: var(--post-core-dimension-16),
32
+ post-device-spacing-gap-inline-1: var(--post-core-dimension-8),
33
+ post-device-spacing-gap-inline-2: var(--post-core-dimension-16),
34
+ post-device-spacing-gap-inline-3: var(--post-core-dimension-12),
35
+ post-device-spacing-gap-inline-4: var(--post-core-dimension-4),
36
+ post-device-spacing-gap-inline-5: var(--post-core-dimension-2),
37
+ post-device-spacing-gap-inline-6: var(--post-core-dimension-24),
38
+ post-device-spacing-gap-inline-7: var(--post-core-dimension-18),
39
+ post-device-spacing-gap-inline-10: var(--post-core-dimension-8),
40
+ post-device-spacing-gap-inline-11: var(--post-core-dimension-6),
41
+ post-device-spacing-gap-inline-12: var(--post-core-dimension-8),
42
+ post-device-spacing-gap-inline-13: var(--post-core-dimension-1),
43
+ post-device-spacing-padding-1: var(--post-core-dimension-0),
44
+ post-device-spacing-padding-2: var(--post-core-dimension-2),
45
+ post-device-spacing-padding-3: var(--post-core-dimension-10),
46
+ post-device-spacing-padding-4: var(--post-core-dimension-0),
47
+ post-device-spacing-padding-5: var(--post-core-dimension-16),
48
+ post-device-spacing-padding-6: var(--post-core-dimension-32),
49
+ post-device-spacing-padding-7: var(--post-core-dimension-8-5),
50
+ post-device-spacing-padding-8: var(--post-core-dimension-5),
51
+ post-device-spacing-padding-9: var(--post-core-dimension-19),
52
+ post-device-spacing-padding-10: var(--post-core-dimension-22),
53
+ post-device-spacing-padding-11: var(--post-core-dimension-14),
54
+ post-device-spacing-padding-12: var(--post-core-dimension-1),
55
+ post-device-spacing-padding-15: var(--post-core-dimension-8),
56
+ post-device-spacing-padding-16: var(--post-core-dimension-4),
57
+ post-device-spacing-padding-17: var(--post-core-dimension-16),
58
+ post-device-spacing-padding-18: var(--post-core-dimension-0),
59
+ post-device-spacing-padding-19: var(--post-core-dimension-16-5),
60
+ post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
61
+ post-device-spacing-padding-inline-3: var(--post-core-dimension-16),
62
+ post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
63
+ post-device-spacing-padding-inline-5: var(--post-core-dimension-22),
64
+ post-device-spacing-padding-inline-6: var(--post-core-dimension-18),
65
+ post-device-spacing-padding-inline-7: var(--post-core-dimension-14),
66
+ post-device-spacing-padding-inline-8: var(--post-core-dimension-2),
67
+ post-device-spacing-padding-inline-9: var(--post-core-dimension-0),
68
+ post-device-spacing-padding-block-1: var(--post-core-dimension-11),
69
+ post-device-spacing-padding-block-3: var(--post-core-dimension-4-5),
70
+ post-device-spacing-padding-block-5: var(--post-core-dimension-6),
71
+ post-device-spacing-padding-block-6: var(--post-core-dimension-1),
72
+ post-device-spacing-padding-block-7: var(--post-core-dimension-1),
73
+ post-device-spacing-padding-block-8: var(--post-core-dimension-8),
74
+ post-device-spacing-padding-block-9: var(--post-core-dimension-0),
75
+ post-device-spacing-padding-block-10: var(--post-core-dimension-24),
76
+ post-device-spacing-padding-block-12: var(--post-core-dimension-10),
77
+ post-device-spacing-padding-block-14: var(--post-core-dimension-8),
78
+ post-device-spacing-padding-block-15: var(--post-core-dimension-5),
79
+ post-device-spacing-padding-block-16: var(--post-core-dimension-13),
80
+ post-device-spacing-padding-block-17: var(--post-core-dimension-10),
81
+ post-device-spacing-padding-block-18: var(--post-core-dimension-3),
82
+ post-device-spacing-padding-block-19: var(--post-core-dimension-1),
83
+ post-device-spacing-padding-block-20: var(--post-core-dimension-0),
84
+ post-device-spacing-padding-block-21: var(--post-core-dimension-32),
85
+ post-device-spacing-padding-block-22: var(--post-core-dimension-17),
86
+ post-device-spacing-padding-block-23: var(--post-core-dimension-16),
87
+ post-device-spacing-padding-block-24: var(--post-core-dimension-3),
88
+ post-device-spacing-padding-block-25: var(--post-core-dimension-24),
89
+ post-device-spacing-padding-block-27: var(--post-core-dimension-17),
90
+ post-device-spacing-padding-block-28: var(--post-core-dimension-17),
91
+ post-device-spacing-padding-block-29: var(--post-core-dimension-25-5),
92
+ post-device-spacing-padding-block-30: var(--post-core-dimension-6-5),
93
+ post-device-spacing-margin-1: var(--post-core-dimension-40),
94
+ post-device-spacing-margin-2: var(--post-core-dimension-24),
95
+ post-device-spacing-margin-3: var(--post-core-dimension-16),
96
+ post-device-spacing-margin-4: var(--post-core-dimension-24),
97
+ post-device-spacing-margin-5: var(--post-core-dimension-40),
98
+ post-device-spacing-margin-6: var(--post-core-dimension-32),
99
+ post-device-sizing-interactive-icon-size: var(--post-core-dimension-24),
100
+ post-device-sizing-interactive-icon-size2: var(--post-core-dimension-24),
101
+ post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
102
+ post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
103
+ post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-40),
104
+ post-device-sizing-interactive-button-height-1: var(--post-core-dimension-48),
105
+ post-device-sizing-interactive-button-height-2: var(--post-core-dimension-56),
106
+ post-device-sizing-interactive-button-height-4: var(--post-core-dimension-40),
107
+ post-device-sizing-interactive-button-height-5: var(--post-core-dimension-48),
108
+ post-device-sizing-interactive-button-height-6: var(--post-core-dimension-64),
109
+ post-device-sizing-interactive-button-appstore-width-google: 162px,
110
+ post-device-sizing-interactive-button-appstore-width-apple: 143.6px,
111
+ post-device-sizing-interactive-button-icon-3: var(--post-core-dimension-24),
112
+ post-device-sizing-interactive-button-icon-4: var(--post-core-dimension-20),
113
+ post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-16),
114
+ post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-8),
115
+ post-device-sizing-notification-1: var(--post-core-dimension-24),
116
+ post-device-sizing-notification-2: var(--post-core-dimension-16),
117
+ post-device-sizing-notification-3: var(--post-core-dimension-8),
118
+ post-device-sizing-notification-icon-2: var(--post-core-dimension-64),
119
+ post-device-sizing-notification-icon-3: var(--post-core-dimension-32),
120
+ post-device-sizing-notification-icon-4: var(--post-core-dimension-48),
121
+ post-device-sizing-icon-1: var(--post-core-dimension-24),
122
+ post-device-sizing-icon-2: var(--post-core-dimension-30),
123
+ post-device-sizing-icon-3: var(--post-core-dimension-16),
124
+ post-device-sizing-logo-1: var(--post-core-dimension-72),
125
+ post-device-border-radius-1: var(--post-core-dimension-4),
126
+ post-device-border-radius-2: var(--post-core-dimension-8),
127
+ post-device-border-radius-round: var(--post-core-dimension-100),
128
+ post-device-border-radius-focus: var(--post-core-dimension-4),
129
+ post-device-font-weight-bold: var(--post-core-font-weight-700),
130
+ post-device-font-weight-regular: var(--post-core-font-weight-400),
131
+ post-device-font-weight-black: var(--post-core-font-weight-900),
132
+ post-device-line-height-heading: var(--post-core-line-height-120),
133
+ post-device-line-height-content: var(--post-core-line-height-150),
134
+ post-device-line-height-legend: var(--post-core-line-height-120),
135
+ post-device-line-height-label: var(--post-core-line-height-150),
136
+ post-device-border-width-default: var(--post-core-dimension-2),
137
+ post-device-border-width-focus: var(--post-core-dimension-2),
138
+ post-device-border-width-alternative2: var(--post-core-dimension-3),
139
+ post-device-border-width-alternative1: var(--post-core-dimension-1),
140
+ post-device-border-width-quote: var(--post-core-dimension-8),
141
+ post-device-grid-sizing-gutter: var(--post-core-dimension-24),
142
+ post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
143
+ post-device-grid-padding-inline-container: var(--post-core-dimension-40),
144
+ post-device-position-1: var(--post-core-dimension-40),
145
+ post-device-position-2: var(--post-core-dimension-16),
146
+ post-device-position-3: var(--post-core-dimension-48),
147
+ );
148
+
149
+ $post-tablet: (
150
+ post-device-font-size-1: var(--post-core-font-size-36),
151
+ post-device-font-size-2: var(--post-core-font-size-32),
152
+ post-device-font-size-3: var(--post-core-font-size-28),
153
+ post-device-font-size-4: var(--post-core-font-size-24),
154
+ post-device-font-size-5: var(--post-core-font-size-20),
155
+ post-device-font-size-6: var(--post-core-font-size-16),
156
+ post-device-font-size-7: var(--post-core-font-size-16),
157
+ post-device-font-size-8: var(--post-core-font-size-16),
158
+ post-device-font-size-9: var(--post-core-font-size-14),
159
+ post-device-font-size-10: var(--post-core-font-size-12),
160
+ post-device-font-size-11: var(--post-core-font-size-12),
161
+ post-device-elevation-100: var(--post-core-elevation-1),
162
+ post-device-elevation-200: var(--post-core-elevation-2),
163
+ post-device-elevation-300: var(--post-core-elevation-3),
164
+ post-device-elevation-400: var(--post-core-elevation-4),
165
+ post-device-elevation-500: var(--post-core-elevation-5),
166
+ post-device-font-family-default: var(--post-core-font-family-swiss-post),
167
+ post-device-spacing-gap-1: var(--post-core-dimension-8),
168
+ post-device-spacing-gap-2: var(--post-core-dimension-2),
169
+ post-device-spacing-gap-4: var(--post-core-dimension-16),
170
+ post-device-spacing-gap-6: var(--post-core-dimension-0),
171
+ post-device-spacing-gap-7: var(--post-core-dimension-16),
172
+ post-device-spacing-gap-block-1: var(--post-core-dimension-4),
173
+ post-device-spacing-gap-block-2: var(--post-core-dimension-16),
174
+ post-device-spacing-gap-block-3: var(--post-core-dimension-8),
175
+ post-device-spacing-gap-inline-1: var(--post-core-dimension-8),
176
+ post-device-spacing-gap-inline-2: var(--post-core-dimension-12),
177
+ post-device-spacing-gap-inline-3: var(--post-core-dimension-12),
178
+ post-device-spacing-gap-inline-4: var(--post-core-dimension-4),
179
+ post-device-spacing-gap-inline-5: var(--post-core-dimension-2),
180
+ post-device-spacing-gap-inline-6: var(--post-core-dimension-16),
181
+ post-device-spacing-gap-inline-7: var(--post-core-dimension-16),
182
+ post-device-spacing-gap-inline-10: var(--post-core-dimension-6),
183
+ post-device-spacing-gap-inline-11: var(--post-core-dimension-6),
184
+ post-device-spacing-gap-inline-12: var(--post-core-dimension-6),
185
+ post-device-spacing-gap-inline-13: var(--post-core-dimension-1),
186
+ post-device-spacing-padding-1: var(--post-core-dimension-1),
187
+ post-device-spacing-padding-2: var(--post-core-dimension-2),
188
+ post-device-spacing-padding-3: var(--post-core-dimension-10),
189
+ post-device-spacing-padding-4: var(--post-core-dimension-0),
190
+ post-device-spacing-padding-5: var(--post-core-dimension-16),
191
+ post-device-spacing-padding-6: var(--post-core-dimension-32),
192
+ post-device-spacing-padding-7: var(--post-core-dimension-8-5),
193
+ post-device-spacing-padding-8: var(--post-core-dimension-5),
194
+ post-device-spacing-padding-9: var(--post-core-dimension-15),
195
+ post-device-spacing-padding-10: var(--post-core-dimension-22),
196
+ post-device-spacing-padding-11: var(--post-core-dimension-14),
197
+ post-device-spacing-padding-12: var(--post-core-dimension-1),
198
+ post-device-spacing-padding-15: var(--post-core-dimension-8),
199
+ post-device-spacing-padding-16: var(--post-core-dimension-4),
200
+ post-device-spacing-padding-17: var(--post-core-dimension-16),
201
+ post-device-spacing-padding-18: var(--post-core-dimension-0),
202
+ post-device-spacing-padding-19: var(--post-core-dimension-15),
203
+ post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
204
+ post-device-spacing-padding-inline-3: var(--post-core-dimension-12),
205
+ post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
206
+ post-device-spacing-padding-inline-5: var(--post-core-dimension-18),
207
+ post-device-spacing-padding-inline-6: var(--post-core-dimension-14),
208
+ post-device-spacing-padding-inline-7: var(--post-core-dimension-10),
209
+ post-device-spacing-padding-inline-8: var(--post-core-dimension-2),
210
+ post-device-spacing-padding-inline-9: var(--post-core-dimension-2),
211
+ post-device-spacing-padding-block-1: var(--post-core-dimension-10),
212
+ post-device-spacing-padding-block-3: var(--post-core-dimension-5),
213
+ post-device-spacing-padding-block-5: var(--post-core-dimension-6),
214
+ post-device-spacing-padding-block-6: var(--post-core-dimension-0),
215
+ post-device-spacing-padding-block-7: var(--post-core-dimension-0),
216
+ post-device-spacing-padding-block-8: var(--post-core-dimension-8),
217
+ post-device-spacing-padding-block-9: var(--post-core-dimension-0),
218
+ post-device-spacing-padding-block-10: var(--post-core-dimension-16),
219
+ post-device-spacing-padding-block-12: var(--post-core-dimension-6),
220
+ post-device-spacing-padding-block-14: var(--post-core-dimension-8-5),
221
+ post-device-spacing-padding-block-15: var(--post-core-dimension-3-5),
222
+ post-device-spacing-padding-block-16: var(--post-core-dimension-12),
223
+ post-device-spacing-padding-block-17: var(--post-core-dimension-9),
224
+ post-device-spacing-padding-block-18: var(--post-core-dimension-0),
225
+ post-device-spacing-padding-block-19: var(--post-core-dimension-0),
226
+ post-device-spacing-padding-block-20: var(--post-core-dimension-0),
227
+ post-device-spacing-padding-block-21: var(--post-core-dimension-32),
228
+ post-device-spacing-padding-block-22: var(--post-core-dimension-16),
229
+ post-device-spacing-padding-block-23: var(--post-core-dimension-15),
230
+ post-device-spacing-padding-block-24: var(--post-core-dimension-0),
231
+ post-device-spacing-padding-block-25: var(--post-core-dimension-24),
232
+ post-device-spacing-padding-block-27: var(--post-core-dimension-12),
233
+ post-device-spacing-padding-block-28: var(--post-core-dimension-16),
234
+ post-device-spacing-padding-block-29: var(--post-core-dimension-23),
235
+ post-device-spacing-padding-block-30: var(--post-core-dimension-7),
236
+ post-device-spacing-margin-1: var(--post-core-dimension-40),
237
+ post-device-spacing-margin-2: var(--post-core-dimension-24),
238
+ post-device-spacing-margin-3: var(--post-core-dimension-16),
239
+ post-device-spacing-margin-4: var(--post-core-dimension-16),
240
+ post-device-spacing-margin-5: var(--post-core-dimension-32),
241
+ post-device-spacing-margin-6: var(--post-core-dimension-32),
242
+ post-device-sizing-interactive-icon-size: var(--post-core-dimension-22),
243
+ post-device-sizing-interactive-icon-size2: var(--post-core-dimension-24),
244
+ post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
245
+ post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
246
+ post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-32),
247
+ post-device-sizing-interactive-button-height-1: var(--post-core-dimension-40),
248
+ post-device-sizing-interactive-button-height-2: var(--post-core-dimension-48),
249
+ post-device-sizing-interactive-button-height-4: var(--post-core-dimension-34),
250
+ post-device-sizing-interactive-button-height-5: var(--post-core-dimension-40),
251
+ post-device-sizing-interactive-button-height-6: var(--post-core-dimension-56),
252
+ post-device-sizing-interactive-button-appstore-width-google: 135px,
253
+ post-device-sizing-interactive-button-appstore-width-apple: 119.66px,
254
+ post-device-sizing-interactive-button-icon-3: var(--post-core-dimension-20),
255
+ post-device-sizing-interactive-button-icon-4: var(--post-core-dimension-16),
256
+ post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-14),
257
+ post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-6),
258
+ post-device-sizing-notification-1: var(--post-core-dimension-24),
259
+ post-device-sizing-notification-2: var(--post-core-dimension-16),
260
+ post-device-sizing-notification-3: var(--post-core-dimension-8),
261
+ post-device-sizing-notification-icon-2: var(--post-core-dimension-48),
262
+ post-device-sizing-notification-icon-3: var(--post-core-dimension-24),
263
+ post-device-sizing-notification-icon-4: var(--post-core-dimension-40),
264
+ post-device-sizing-icon-1: var(--post-core-dimension-16),
265
+ post-device-sizing-icon-2: var(--post-core-dimension-24),
266
+ post-device-sizing-icon-3: var(--post-core-dimension-14),
267
+ post-device-sizing-logo-1: var(--post-core-dimension-64),
268
+ post-device-border-radius-1: var(--post-core-dimension-4),
269
+ post-device-border-radius-2: var(--post-core-dimension-8),
270
+ post-device-border-radius-round: var(--post-core-dimension-100),
271
+ post-device-border-radius-focus: var(--post-core-dimension-4),
272
+ post-device-font-weight-bold: var(--post-core-font-weight-700),
273
+ post-device-font-weight-regular: var(--post-core-font-weight-400),
274
+ post-device-font-weight-black: var(--post-core-font-weight-900),
275
+ post-device-line-height-heading: var(--post-core-line-height-120),
276
+ post-device-line-height-content: var(--post-core-line-height-150),
277
+ post-device-line-height-legend: var(--post-core-line-height-120),
278
+ post-device-line-height-label: var(--post-core-line-height-150),
279
+ post-device-border-width-default: var(--post-core-dimension-2),
280
+ post-device-border-width-focus: var(--post-core-dimension-2),
281
+ post-device-border-width-alternative2: var(--post-core-dimension-3),
282
+ post-device-border-width-alternative1: var(--post-core-dimension-1),
283
+ post-device-border-width-quote: var(--post-core-dimension-6),
284
+ post-device-grid-sizing-gutter: var(--post-core-dimension-16),
285
+ post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
286
+ post-device-grid-padding-inline-container: var(--post-core-dimension-24),
287
+ post-device-position-1: var(--post-core-dimension-40),
288
+ post-device-position-2: var(--post-core-dimension-16),
289
+ post-device-position-3: var(--post-core-dimension-48),
290
+ );
291
+
292
+ $post-mobile: (
293
+ post-device-font-size-1: var(--post-core-font-size-32),
294
+ post-device-font-size-2: var(--post-core-font-size-28),
295
+ post-device-font-size-3: var(--post-core-font-size-24),
296
+ post-device-font-size-4: var(--post-core-font-size-20),
297
+ post-device-font-size-5: var(--post-core-font-size-18),
298
+ post-device-font-size-6: var(--post-core-font-size-14),
299
+ post-device-font-size-7: var(--post-core-font-size-14),
300
+ post-device-font-size-8: var(--post-core-font-size-16),
301
+ post-device-font-size-9: var(--post-core-font-size-14),
302
+ post-device-font-size-10: var(--post-core-font-size-12),
303
+ post-device-font-size-11: var(--post-core-font-size-12),
304
+ post-device-elevation-100: var(--post-core-elevation-1),
305
+ post-device-elevation-200: var(--post-core-elevation-2),
306
+ post-device-elevation-300: var(--post-core-elevation-3),
307
+ post-device-elevation-400: var(--post-core-elevation-4),
308
+ post-device-elevation-500: var(--post-core-elevation-5),
309
+ post-device-font-family-default: var(--post-core-font-family-swiss-post),
310
+ post-device-spacing-gap-1: var(--post-core-dimension-8),
311
+ post-device-spacing-gap-2: var(--post-core-dimension-2),
312
+ post-device-spacing-gap-4: var(--post-core-dimension-8),
313
+ post-device-spacing-gap-6: var(--post-core-dimension-n2),
314
+ post-device-spacing-gap-7: var(--post-core-dimension-16),
315
+ post-device-spacing-gap-block-1: var(--post-core-dimension-4),
316
+ post-device-spacing-gap-block-2: var(--post-core-dimension-16),
317
+ post-device-spacing-gap-block-3: var(--post-core-dimension-8),
318
+ post-device-spacing-gap-inline-1: var(--post-core-dimension-6),
319
+ post-device-spacing-gap-inline-2: var(--post-core-dimension-8),
320
+ post-device-spacing-gap-inline-3: var(--post-core-dimension-12),
321
+ post-device-spacing-gap-inline-4: var(--post-core-dimension-4),
322
+ post-device-spacing-gap-inline-5: var(--post-core-dimension-2),
323
+ post-device-spacing-gap-inline-6: var(--post-core-dimension-16),
324
+ post-device-spacing-gap-inline-7: var(--post-core-dimension-12),
325
+ post-device-spacing-gap-inline-10: var(--post-core-dimension-4),
326
+ post-device-spacing-gap-inline-11: var(--post-core-dimension-4),
327
+ post-device-spacing-gap-inline-12: var(--post-core-dimension-4),
328
+ post-device-spacing-gap-inline-13: var(--post-core-dimension-0),
329
+ post-device-spacing-padding-1: var(--post-core-dimension-2),
330
+ post-device-spacing-padding-2: var(--post-core-dimension-2),
331
+ post-device-spacing-padding-3: var(--post-core-dimension-10),
332
+ post-device-spacing-padding-4: var(--post-core-dimension-2),
333
+ post-device-spacing-padding-5: var(--post-core-dimension-16),
334
+ post-device-spacing-padding-6: var(--post-core-dimension-32),
335
+ post-device-spacing-padding-7: var(--post-core-dimension-8-5),
336
+ post-device-spacing-padding-8: var(--post-core-dimension-5),
337
+ post-device-spacing-padding-9: var(--post-core-dimension-15),
338
+ post-device-spacing-padding-10: var(--post-core-dimension-14),
339
+ post-device-spacing-padding-11: var(--post-core-dimension-14),
340
+ post-device-spacing-padding-12: var(--post-core-dimension-1),
341
+ post-device-spacing-padding-15: var(--post-core-dimension-8),
342
+ post-device-spacing-padding-16: var(--post-core-dimension-2),
343
+ post-device-spacing-padding-17: var(--post-core-dimension-8),
344
+ post-device-spacing-padding-18: var(--post-core-dimension-4),
345
+ post-device-spacing-padding-19: var(--post-core-dimension-11),
346
+ post-device-spacing-padding-inline-1: var(--post-core-dimension-14),
347
+ post-device-spacing-padding-inline-3: var(--post-core-dimension-12),
348
+ post-device-spacing-padding-inline-4: var(--post-core-dimension-12),
349
+ post-device-spacing-padding-inline-5: var(--post-core-dimension-14),
350
+ post-device-spacing-padding-inline-6: var(--post-core-dimension-12),
351
+ post-device-spacing-padding-inline-7: var(--post-core-dimension-8),
352
+ post-device-spacing-padding-inline-8: var(--post-core-dimension-0),
353
+ post-device-spacing-padding-inline-9: var(--post-core-dimension-0),
354
+ post-device-spacing-padding-block-1: var(--post-core-dimension-10),
355
+ post-device-spacing-padding-block-3: var(--post-core-dimension-6-5),
356
+ post-device-spacing-padding-block-5: var(--post-core-dimension-6),
357
+ post-device-spacing-padding-block-6: var(--post-core-dimension-1-5),
358
+ post-device-spacing-padding-block-7: var(--post-core-dimension-0),
359
+ post-device-spacing-padding-block-8: var(--post-core-dimension-4),
360
+ post-device-spacing-padding-block-9: var(--post-core-dimension-1-5),
361
+ post-device-spacing-padding-block-10: var(--post-core-dimension-16),
362
+ post-device-spacing-padding-block-12: var(--post-core-dimension-6),
363
+ post-device-spacing-padding-block-14: var(--post-core-dimension-6),
364
+ post-device-spacing-padding-block-15: var(--post-core-dimension-3-5),
365
+ post-device-spacing-padding-block-16: var(--post-core-dimension-8),
366
+ post-device-spacing-padding-block-17: var(--post-core-dimension-5),
367
+ post-device-spacing-padding-block-18: var(--post-core-dimension-0),
368
+ post-device-spacing-padding-block-19: var(--post-core-dimension-0),
369
+ post-device-spacing-padding-block-20: var(--post-core-dimension-1-5),
370
+ post-device-spacing-padding-block-21: var(--post-core-dimension-24),
371
+ post-device-spacing-padding-block-22: var(--post-core-dimension-12),
372
+ post-device-spacing-padding-block-23: var(--post-core-dimension-11),
373
+ post-device-spacing-padding-block-24: var(--post-core-dimension-2),
374
+ post-device-spacing-padding-block-25: var(--post-core-dimension-16),
375
+ post-device-spacing-padding-block-27: var(--post-core-dimension-17-5),
376
+ post-device-spacing-padding-block-28: var(--post-core-dimension-17-5),
377
+ post-device-spacing-padding-block-29: var(--post-core-dimension-24-5),
378
+ post-device-spacing-padding-block-30: var(--post-core-dimension-8-5),
379
+ post-device-spacing-margin-1: var(--post-core-dimension-24),
380
+ post-device-spacing-margin-2: var(--post-core-dimension-16),
381
+ post-device-spacing-margin-3: var(--post-core-dimension-8),
382
+ post-device-spacing-margin-4: var(--post-core-dimension-8),
383
+ post-device-spacing-margin-5: var(--post-core-dimension-24),
384
+ post-device-spacing-margin-6: var(--post-core-dimension-0),
385
+ post-device-sizing-interactive-icon-size: var(--post-core-dimension-20),
386
+ post-device-sizing-interactive-icon-size2: var(--post-core-dimension-20),
387
+ post-device-sizing-interactive-icon-size3: var(--post-core-dimension-40),
388
+ post-device-sizing-interactive-icon-size4: var(--post-core-dimension-16),
389
+ post-device-sizing-interactive-stepper-indicator: var(--post-core-dimension-32),
390
+ post-device-sizing-interactive-button-height-1: var(--post-core-dimension-32),
391
+ post-device-sizing-interactive-button-height-2: var(--post-core-dimension-40),
392
+ post-device-sizing-interactive-button-height-4: var(--post-core-dimension-28),
393
+ post-device-sizing-interactive-button-height-5: var(--post-core-dimension-40),
394
+ post-device-sizing-interactive-button-height-6: var(--post-core-dimension-56),
395
+ post-device-sizing-interactive-button-appstore-width-google: 135px,
396
+ post-device-sizing-interactive-button-appstore-width-apple: 119.66px,
397
+ post-device-sizing-interactive-button-icon-3: var(--post-core-dimension-18),
398
+ post-device-sizing-interactive-button-icon-4: var(--post-core-dimension-16),
399
+ post-device-sizing-interactive-button-icon-5: var(--post-core-dimension-14),
400
+ post-device-sizing-interactive-button-icon-6: var(--post-core-dimension-6),
401
+ post-device-sizing-notification-1: var(--post-core-dimension-24),
402
+ post-device-sizing-notification-2: var(--post-core-dimension-16),
403
+ post-device-sizing-notification-3: var(--post-core-dimension-16),
404
+ post-device-sizing-notification-icon-2: var(--post-core-dimension-40),
405
+ post-device-sizing-notification-icon-3: var(--post-core-dimension-24),
406
+ post-device-sizing-notification-icon-4: var(--post-core-dimension-32),
407
+ post-device-sizing-icon-1: var(--post-core-dimension-12),
408
+ post-device-sizing-icon-2: var(--post-core-dimension-24),
409
+ post-device-sizing-icon-3: var(--post-core-dimension-12),
410
+ post-device-sizing-logo-1: var(--post-core-dimension-56),
411
+ post-device-border-radius-1: var(--post-core-dimension-4),
412
+ post-device-border-radius-2: var(--post-core-dimension-8),
413
+ post-device-border-radius-round: var(--post-core-dimension-100),
414
+ post-device-border-radius-focus: var(--post-core-dimension-4),
415
+ post-device-font-weight-bold: var(--post-core-font-weight-700),
416
+ post-device-font-weight-regular: var(--post-core-font-weight-400),
417
+ post-device-font-weight-black: var(--post-core-font-weight-900),
418
+ post-device-line-height-heading: var(--post-core-line-height-120),
419
+ post-device-line-height-content: var(--post-core-line-height-150),
420
+ post-device-line-height-legend: var(--post-core-line-height-120),
421
+ post-device-line-height-label: var(--post-core-line-height-150),
422
+ post-device-border-width-default: var(--post-core-dimension-2),
423
+ post-device-border-width-focus: var(--post-core-dimension-2),
424
+ post-device-border-width-alternative2: var(--post-core-dimension-3),
425
+ post-device-border-width-alternative1: var(--post-core-dimension-1),
426
+ post-device-border-width-quote: var(--post-core-dimension-4),
427
+ post-device-grid-sizing-gutter: var(--post-core-dimension-16),
428
+ post-device-grid-sizing-container-max-width: var(--post-core-dimension-1280),
429
+ post-device-grid-padding-inline-container: var(--post-core-dimension-16),
430
+ post-device-position-1: var(--post-core-dimension-16),
431
+ post-device-position-2: var(--post-core-dimension-16),
432
+ post-device-position-3: var(--post-core-dimension-48),
433
+ );
package/_elements.scss ADDED
@@ -0,0 +1,79 @@
1
+
2
+ // Do not edit manually
3
+ // This file was generated by the swisspost/design-system-tokens package
4
+ // Mon, 13 Jan 2025 11:05:26 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-padding-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-color: var(--post-scheme-color-surface-default-stroke),
76
+ post-legend-large-border-style: var(--post-core-border-style-solid),
77
+ post-legend-large-border-width: var(--post-device-border-width-default),
78
+ post-legend-margin-block-end: var(--post-core-dimension-16),
79
+ );