@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/_palettes.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
+ // Mon, 11 Nov 2024 15:43:49 GMT
5
+
6
+ $post-palettes: (
7
+ post-palettes-color-default-bg: var(--post-theme-color-palettes-default-bg),
8
+ post-palettes-color-default-fg: var(--post-theme-color-palettes-default-fg),
9
+ post-palettes-color-alternate-bg: var(--post-theme-color-palettes-alternate-bg),
10
+ post-palettes-color-alternate-fg: var(--post-theme-color-palettes-alternate-fg),
11
+ post-palettes-color-brand-bg: var(--post-theme-color-palettes-brand-bg),
12
+ post-palettes-color-brand-fg: var(--post-theme-color-palettes-brand-fg),
13
+ post-palettes-color-accent-bg: var(--post-theme-color-palettes-accent-bg),
14
+ post-palettes-color-accent-fg: var(--post-theme-color-palettes-accent-fg),
15
+ post-helper-color-default-bg-scheme: var(--post-theme-palettes-bg-scheme-default),
16
+ post-helper-color-alternate-bg-scheme: var(--post-theme-palettes-bg-scheme-alternate),
17
+ post-helper-color-brand-bg-scheme: var(--post-theme-palettes-bg-scheme-brand),
18
+ post-helper-color-accent-bg-scheme: var(--post-theme-palettes-bg-scheme-emphasis),
19
+ );
package/_scheme.scss ADDED
@@ -0,0 +1,340 @@
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-light: (
7
+ post-scheme-color-signal-success-dark: var(--post-core-color-notification-green),
8
+ post-scheme-color-signal-success-light: var(--post-core-color-notification-green-light),
9
+ post-scheme-color-signal-error-dark: var(--post-core-color-notification-red),
10
+ post-scheme-color-signal-error-light: var(--post-core-color-notification-red-light),
11
+ post-scheme-color-signal-warning-dark: var(--post-core-color-notification-orange),
12
+ post-scheme-color-signal-warning-light: var(--post-core-color-notification-orange-light),
13
+ post-scheme-color-signal-information-dark: var(--post-core-color-notification-blue),
14
+ post-scheme-color-signal-information-light: var(--post-core-color-notification-blue-light),
15
+ post-scheme-color-signal-neutral-dark: var(--post-core-color-sandgrey-100),
16
+ post-scheme-color-signal-neutral: var(--post-core-color-sandgrey-006),
17
+ post-scheme-color-signal-success-solo: var(--post-core-color-notification-green),
18
+ post-scheme-color-signal-error-solo: var(--post-core-color-notification-red),
19
+ post-scheme-color-interactive-button-primary-enabled-fg: var(--post-core-color-brand-white),
20
+ post-scheme-color-interactive-button-primary-enabled-bg: var(--post-core-color-sandgrey-100),
21
+ post-scheme-color-interactive-button-primary-enabled-stroke: var(--post-scheme-color-interactive-button-primary-enabled-bg),
22
+ post-scheme-color-interactive-button-primary-enabled-fg-inverted: var(--post-core-color-sandgrey-100),
23
+ post-scheme-color-interactive-button-primary-enabled-bg-inverted: var(--post-core-color-brand-white),
24
+ post-scheme-color-interactive-button-primary-enabled-stroke-inverted: var(--post-core-color-brand-white),
25
+ post-scheme-color-interactive-button-primary-hover-fg: var(--post-core-color-brand-white),
26
+ post-scheme-color-interactive-button-primary-hover-bg: var(--post-core-color-sandgrey-070),
27
+ post-scheme-color-interactive-button-primary-hover-stroke: var(--post-scheme-color-interactive-button-primary-hover-bg),
28
+ post-scheme-color-interactive-button-primary-hover-fg-inverted: var(--post-core-color-sandgrey-070),
29
+ post-scheme-color-interactive-button-primary-hover-bg-inverted: var(--post-core-color-brand-white),
30
+ post-scheme-color-interactive-button-primary-hover-stroke-inverted: var(--post-core-color-brand-white),
31
+ post-scheme-color-interactive-button-primary-disabled-fg: var(--post-core-color-sandgrey-060),
32
+ post-scheme-color-interactive-button-primary-disabled-bg: var(--post-core-color-brand-white),
33
+ post-scheme-color-interactive-button-primary-disabled-stroke: var(--post-core-color-sandgrey-060),
34
+ post-scheme-color-interactive-button-primary-disabled-fg-inverted: var(--post-core-color-brand-white),
35
+ post-scheme-color-interactive-button-primary-disabled-bg-inverted: var(--post-core-color-sandgrey-060),
36
+ post-scheme-color-interactive-button-primary-disabled-stroke-inverted: var(--post-core-color-brand-white),
37
+ post-scheme-color-interactive-button-secondary-enabled-fg: var(--post-core-color-sandgrey-100),
38
+ post-scheme-color-interactive-button-secondary-enabled-bg: var(--post-core-color-brand-white),
39
+ post-scheme-color-interactive-button-secondary-enabled-stroke: var(--post-core-color-sandgrey-100),
40
+ post-scheme-color-interactive-button-secondary-enabled-fg-inverted: var(--post-core-color-brand-white),
41
+ post-scheme-color-interactive-button-secondary-enabled-bg-inverted: var(--post-core-color-colorless),
42
+ post-scheme-color-interactive-button-secondary-enabled-stroke-inverted: var(--post-core-color-brand-white),
43
+ post-scheme-color-interactive-button-secondary-hover-fg: var(--post-core-color-sandgrey-070),
44
+ post-scheme-color-interactive-button-secondary-hover-bg: var(--post-core-color-brand-white),
45
+ post-scheme-color-interactive-button-secondary-hover-stroke: var(--post-core-color-sandgrey-070),
46
+ post-scheme-color-interactive-button-secondary-hover-fg-inverted: var(--post-core-color-brand-white),
47
+ post-scheme-color-interactive-button-secondary-hover-bg-inverted: var(--post-core-color-sandgrey-alpha-lightsand-10),
48
+ post-scheme-color-interactive-button-secondary-hover-stroke-inverted: var(--post-core-color-brand-white),
49
+ post-scheme-color-interactive-button-secondary-disabled-fg: var(--post-core-color-sandgrey-060),
50
+ post-scheme-color-interactive-button-secondary-disabled-bg: var(--post-core-color-brand-white),
51
+ post-scheme-color-interactive-button-secondary-disabled-stroke: var(--post-core-color-sandgrey-060),
52
+ post-scheme-color-interactive-button-secondary-disabled-fg-inverted: var(--post-core-color-brand-white),
53
+ post-scheme-color-interactive-button-secondary-disabled-bg-inverted: var(--post-core-color-sandgrey-alpha-lightsand-30),
54
+ post-scheme-color-interactive-button-secondary-disabled-stroke-inverted: var(--post-core-color-brand-white),
55
+ post-scheme-color-interactive-button-tertiary-enabled-fg: var(--post-core-color-sandgrey-100),
56
+ post-scheme-color-interactive-button-tertiary-enabled-bg: var(--post-core-color-colorless),
57
+ post-scheme-color-interactive-button-tertiary-enabled-stroke: var(--post-scheme-color-interactive-button-tertiary-enabled-bg),
58
+ post-scheme-color-interactive-button-tertiary-enabled-fg-inverted: var(--post-core-color-brand-white),
59
+ post-scheme-color-interactive-button-tertiary-enabled-bg-inverted: var(--post-core-color-colorless),
60
+ post-scheme-color-interactive-button-tertiary-enabled-stroke-inverted: var(--post-core-color-colorless),
61
+ post-scheme-color-interactive-button-tertiary-hover-fg: var(--post-core-color-sandgrey-070),
62
+ post-scheme-color-interactive-button-tertiary-hover-bg: var(--post-core-color-colorless),
63
+ post-scheme-color-interactive-button-tertiary-hover-stroke: var(--post-scheme-color-interactive-button-tertiary-hover-bg),
64
+ post-scheme-color-interactive-button-tertiary-hover-fg-inverted: var(--post-core-color-brand-white),
65
+ post-scheme-color-interactive-button-tertiary-hover-bg-inverted: var(--post-core-color-sandgrey-alpha-lightsand-10),
66
+ post-scheme-color-interactive-button-tertiary-hover-stroke-inverted: var(--post-core-color-colorless),
67
+ post-scheme-color-interactive-button-tertiary-disabled-fg: var(--post-core-color-sandgrey-060),
68
+ post-scheme-color-interactive-button-tertiary-disabled-bg: var(--post-core-color-colorless),
69
+ post-scheme-color-interactive-button-tertiary-disabled-stroke: var(--post-core-color-sandgrey-060),
70
+ post-scheme-color-interactive-button-tertiary-disabled-fg-inverted: var(--post-core-color-brand-white),
71
+ post-scheme-color-interactive-button-tertiary-disabled-bg-inverted: var(--post-core-color-sandgrey-alpha-lightsand-30),
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
+ post-scheme-color-interactive-focus-stroke: var(--post-core-color-sandgrey-100),
83
+ 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
+ post-scheme-color-interactive-primary-enabled-bg1: var(--post-core-color-brand-white),
92
+ post-scheme-color-interactive-primary-enabled-fg1: var(--post-core-color-sandgrey-100),
93
+ post-scheme-color-interactive-primary-enabled-fg2: var(--post-core-color-sandgrey-060),
94
+ post-scheme-color-interactive-primary-enabled-stroke: var(--post-core-color-sandgrey-100),
95
+ post-scheme-color-interactive-primary-enabled-fg3: var(--post-core-color-brand-white),
96
+ post-scheme-color-interactive-primary-enabled-bg2: var(--post-core-color-sandgrey-100),
97
+ post-scheme-color-interactive-primary-enabled-stroke3: var(--post-core-color-brand-white),
98
+ post-scheme-color-interactive-primary-hover-bg: var(--post-core-color-brand-white),
99
+ 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
+ post-scheme-color-interactive-primary-hover-stroke: var(--post-core-color-sandgrey-070),
102
+ post-scheme-color-interactive-primary-hover-fg3: var(--post-core-color-brand-white),
103
+ post-scheme-color-interactive-primary-hover-bg2: var(--post-core-color-sandgrey-070),
104
+ post-scheme-color-interactive-primary-hover-stroke3: var(--post-core-color-brand-white),
105
+ post-scheme-color-interactive-primary-disabled-bg: var(--post-core-color-brand-white),
106
+ 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
+ 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
+ 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
+ post-scheme-color-interactive-primary-disabled-stroke2: var(--post-core-color-sandgrey-060),
113
+ post-scheme-color-interactive-primary-disabled-bg4: var(--post-core-color-sandgrey-060),
114
+ post-scheme-color-interactive-primary-disabled-stroke3: var(--post-core-color-brand-white),
115
+ post-scheme-color-interactive-primary-selected-bg1: var(--post-core-color-brand-white),
116
+ 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
+ post-scheme-color-interactive-primary-selected-stroke1: var(--post-core-color-sandgrey-100),
119
+ post-scheme-color-interactive-primary-selected-fg3: var(--post-core-color-brand-white),
120
+ post-scheme-color-interactive-primary-selected-bg2: var(--post-core-color-notification-green),
121
+ 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
+ post-scheme-color-interactive-primary-selected-stroke3: var(--post-core-color-brand-white),
124
+ post-scheme-color-interactive-primary-selected-bg4: var(--post-core-color-sandgrey-100),
125
+ post-scheme-color-interactive-notification-info-fg: var(--post-core-color-sandgrey-100),
126
+ post-scheme-color-interactive-notification-info-bg: var(--post-scheme-color-signal-information-light),
127
+ post-scheme-color-interactive-notification-info-icon: var(--post-scheme-color-signal-information-dark),
128
+ post-scheme-color-interactive-notification-info-stroke: var(--post-scheme-color-signal-information-dark),
129
+ post-scheme-color-interactive-notification-success-fg: var(--post-core-color-sandgrey-100),
130
+ post-scheme-color-interactive-notification-success-bg: var(--post-scheme-color-signal-success-light),
131
+ post-scheme-color-interactive-notification-success-icon: var(--post-scheme-color-signal-success-dark),
132
+ post-scheme-color-interactive-notification-success-stroke: var(--post-scheme-color-signal-success-dark),
133
+ post-scheme-color-interactive-notification-warning-fg: var(--post-core-color-sandgrey-100),
134
+ post-scheme-color-interactive-notification-warning-bg: var(--post-scheme-color-signal-warning-light),
135
+ post-scheme-color-interactive-notification-warning-icon: var(--post-scheme-color-signal-warning-dark),
136
+ post-scheme-color-interactive-notification-warning-stroke: var(--post-scheme-color-signal-warning-dark),
137
+ post-scheme-color-interactive-notification-error-fg: var(--post-core-color-sandgrey-100),
138
+ post-scheme-color-interactive-notification-error-bg: var(--post-scheme-color-signal-error-light),
139
+ post-scheme-color-interactive-notification-error-icon: var(--post-scheme-color-signal-error-dark),
140
+ post-scheme-color-interactive-notification-error-stroke: var(--post-scheme-color-signal-error-dark),
141
+ post-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-002),
142
+ post-scheme-color-surface-default-fg: var(--post-core-color-sandgrey-100),
143
+ post-scheme-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
144
+ post-scheme-color-surface-accent1-bg: var(--post-core-color-brand-white),
145
+ post-scheme-color-surface-accent1-fg: var(--post-core-color-sandgrey-100),
146
+ post-scheme-color-surface-alternate-bg: var(--post-core-color-sandgrey-006),
147
+ post-scheme-color-surface-alternate-fg: var(--post-core-color-sandgrey-100),
148
+ post-scheme-color-surface-brand-bg: var(--post-core-color-brand-postyellow),
149
+ post-scheme-color-surface-brand-fg: var(--post-core-color-sandgrey-100),
150
+ post-scheme-color-surface-accent-bg: var(--post-core-color-sandgrey-080),
151
+ post-scheme-color-surface-accent-fg: var(--post-core-color-brand-white),
152
+ post-scheme-color-surface-accent-fg-accent: var(--post-core-color-brand-postyellow),
153
+ post-scheme-color-notification-badge-bg: var(--post-core-color-notification-red),
154
+ post-scheme-color-notification-badge-fg: var(--post-core-color-brand-white),
155
+ post-scheme-color-notification-badge-stroke: var(--post-core-color-brand-white),
156
+ post-scheme-color-notification-popover-hover: var(--post-core-color-sandgrey-020),
157
+ post-scheme-accent-bg-scheme-1: var(--post-core-bg-scheme-light),
158
+ post-scheme-accent-bg-scheme-2: var(--post-core-bg-scheme-dark),
159
+ post-cargo-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-002),
160
+ post-cargo-scheme-color-surface-default-fg: var(--post-core-color-sandgrey-100),
161
+ post-cargo-scheme-color-surface-default-stroke: var(--post-core-color-sandgrey-100),
162
+ post-cargo-scheme-color-surface-accent1-bg: var(--post-core-color-brand-white),
163
+ post-cargo-scheme-color-surface-accent1-fg: var(--post-core-color-sandgrey-100),
164
+ post-cargo-scheme-color-surface-alternate-bg: var(--post-core-color-sandgrey-006),
165
+ post-cargo-scheme-color-surface-alternate-fg: var(--post-core-color-sandgrey-100),
166
+ post-cargo-scheme-color-surface-brand-bg: var(--post-core-color-cargo-green),
167
+ post-cargo-scheme-color-surface-brand-fg: var(--post-core-color-brand-white),
168
+ post-cargo-scheme-color-surface-brand-fg-accent: var(--post-core-color-cargo-blue),
169
+ post-cargo-scheme-color-surface-accent-bg: var(--post-core-color-cargo-blue),
170
+ post-cargo-scheme-color-surface-accent-fg: var(--post-core-color-sandgrey-100),
171
+ post-cargo-scheme-color-surface-accent-fg-accent: var(--post-core-color-cargo-green),
172
+ );
173
+
174
+ $post-dark: (
175
+ post-scheme-color-signal-success-dark: var(--post-core-color-notification-green),
176
+ post-scheme-color-signal-success-light: var(--post-core-color-notification-green-light),
177
+ post-scheme-color-signal-error-dark: var(--post-core-color-notification-red),
178
+ post-scheme-color-signal-error-light: var(--post-core-color-notification-red-light),
179
+ post-scheme-color-signal-warning-dark: var(--post-core-color-notification-orange),
180
+ post-scheme-color-signal-warning-light: var(--post-core-color-notification-orange-light),
181
+ post-scheme-color-signal-information-dark: var(--post-core-color-notification-blue),
182
+ post-scheme-color-signal-information-light: var(--post-core-color-notification-blue-light),
183
+ post-scheme-color-signal-neutral-dark: var(--post-core-color-sandgrey-100),
184
+ post-scheme-color-signal-neutral: var(--post-core-color-sandgrey-006),
185
+ post-scheme-color-signal-success-solo: var(--post-core-color-notification-green-night),
186
+ post-scheme-color-signal-error-solo: var(--post-core-color-notification-red-night),
187
+ post-scheme-color-interactive-button-primary-enabled-fg: var(--post-core-color-sandgrey-100),
188
+ post-scheme-color-interactive-button-primary-enabled-bg: var(--post-core-color-brand-white),
189
+ post-scheme-color-interactive-button-primary-enabled-stroke: var(--post-scheme-color-interactive-button-primary-enabled-bg),
190
+ post-scheme-color-interactive-button-primary-enabled-fg-inverted: var(--post-core-color-brand-white),
191
+ post-scheme-color-interactive-button-primary-enabled-bg-inverted: var(--post-core-color-sandgrey-100),
192
+ post-scheme-color-interactive-button-primary-enabled-stroke-inverted: var(--post-core-color-sandgrey-100),
193
+ post-scheme-color-interactive-button-primary-hover-fg: var(--post-core-color-sandgrey-070),
194
+ post-scheme-color-interactive-button-primary-hover-bg: var(--post-core-color-brand-white),
195
+ post-scheme-color-interactive-button-primary-hover-stroke: var(--post-scheme-color-interactive-button-primary-hover-bg),
196
+ post-scheme-color-interactive-button-primary-hover-fg-inverted: var(--post-core-color-brand-white),
197
+ post-scheme-color-interactive-button-primary-hover-bg-inverted: var(--post-core-color-sandgrey-070),
198
+ post-scheme-color-interactive-button-primary-hover-stroke-inverted: var(--post-core-color-sandgrey-070),
199
+ post-scheme-color-interactive-button-primary-disabled-fg: var(--post-core-color-brand-white),
200
+ post-scheme-color-interactive-button-primary-disabled-bg: var(--post-core-color-sandgrey-060),
201
+ post-scheme-color-interactive-button-primary-disabled-stroke: var(--post-core-color-brand-white),
202
+ post-scheme-color-interactive-button-primary-disabled-fg-inverted: var(--post-core-color-sandgrey-060),
203
+ post-scheme-color-interactive-button-primary-disabled-bg-inverted: var(--post-core-color-brand-white),
204
+ post-scheme-color-interactive-button-primary-disabled-stroke-inverted: var(--post-core-color-sandgrey-060),
205
+ post-scheme-color-interactive-button-secondary-enabled-fg: var(--post-core-color-brand-white),
206
+ post-scheme-color-interactive-button-secondary-enabled-bg: var(--post-core-color-colorless),
207
+ post-scheme-color-interactive-button-secondary-enabled-stroke: var(--post-core-color-brand-white),
208
+ post-scheme-color-interactive-button-secondary-enabled-fg-inverted: var(--post-core-color-sandgrey-100),
209
+ post-scheme-color-interactive-button-secondary-enabled-bg-inverted: var(--post-core-color-brand-white),
210
+ post-scheme-color-interactive-button-secondary-enabled-stroke-inverted: var(--post-core-color-sandgrey-100),
211
+ post-scheme-color-interactive-button-secondary-hover-fg: var(--post-core-color-brand-white),
212
+ post-scheme-color-interactive-button-secondary-hover-bg: var(--post-core-color-sandgrey-alpha-lightsand-10),
213
+ post-scheme-color-interactive-button-secondary-hover-stroke: var(--post-core-color-brand-white),
214
+ post-scheme-color-interactive-button-secondary-hover-fg-inverted: var(--post-core-color-sandgrey-070),
215
+ post-scheme-color-interactive-button-secondary-hover-bg-inverted: var(--post-core-color-brand-white),
216
+ post-scheme-color-interactive-button-secondary-hover-stroke-inverted: var(--post-core-color-sandgrey-070),
217
+ post-scheme-color-interactive-button-secondary-disabled-fg: var(--post-core-color-brand-white),
218
+ post-scheme-color-interactive-button-secondary-disabled-bg: var(--post-core-color-sandgrey-alpha-lightsand-30),
219
+ post-scheme-color-interactive-button-secondary-disabled-stroke: var(--post-core-color-brand-white),
220
+ post-scheme-color-interactive-button-secondary-disabled-fg-inverted: var(--post-core-color-sandgrey-060),
221
+ post-scheme-color-interactive-button-secondary-disabled-bg-inverted: var(--post-core-color-brand-white),
222
+ post-scheme-color-interactive-button-secondary-disabled-stroke-inverted: var(--post-core-color-sandgrey-060),
223
+ post-scheme-color-interactive-button-tertiary-enabled-fg: var(--post-core-color-brand-white),
224
+ post-scheme-color-interactive-button-tertiary-enabled-bg: var(--post-core-color-colorless),
225
+ post-scheme-color-interactive-button-tertiary-enabled-stroke: var(--post-scheme-color-interactive-button-tertiary-enabled-bg),
226
+ post-scheme-color-interactive-button-tertiary-enabled-fg-inverted: var(--post-core-color-sandgrey-100),
227
+ post-scheme-color-interactive-button-tertiary-enabled-bg-inverted: var(--post-core-color-colorless),
228
+ post-scheme-color-interactive-button-tertiary-enabled-stroke-inverted: var(--post-core-color-colorless),
229
+ post-scheme-color-interactive-button-tertiary-hover-fg: var(--post-core-color-brand-white),
230
+ post-scheme-color-interactive-button-tertiary-hover-bg: var(--post-core-color-sandgrey-alpha-lightsand-10),
231
+ post-scheme-color-interactive-button-tertiary-hover-stroke: var(--post-core-color-colorless),
232
+ post-scheme-color-interactive-button-tertiary-hover-fg-inverted: var(--post-core-color-sandgrey-070),
233
+ post-scheme-color-interactive-button-tertiary-hover-bg-inverted: var(--post-core-color-colorless),
234
+ post-scheme-color-interactive-button-tertiary-hover-stroke-inverted: var(--post-core-color-colorless),
235
+ post-scheme-color-interactive-button-tertiary-disabled-fg: var(--post-core-color-brand-white),
236
+ post-scheme-color-interactive-button-tertiary-disabled-bg: var(--post-core-color-sandgrey-alpha-lightsand-30),
237
+ post-scheme-color-interactive-button-tertiary-disabled-stroke: var(--post-core-color-brand-white),
238
+ post-scheme-color-interactive-button-tertiary-disabled-fg-inverted: var(--post-core-color-sandgrey-060),
239
+ post-scheme-color-interactive-button-tertiary-disabled-bg-inverted: var(--post-core-color-colorless),
240
+ 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
+ post-scheme-color-interactive-focus-stroke: var(--post-core-color-brand-white),
251
+ 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
+ post-scheme-color-interactive-primary-enabled-bg1: var(--post-core-color-sandgrey-100),
260
+ post-scheme-color-interactive-primary-enabled-fg1: var(--post-core-color-brand-white),
261
+ post-scheme-color-interactive-primary-enabled-fg2: var(--post-core-color-sandgrey-060),
262
+ post-scheme-color-interactive-primary-enabled-stroke: var(--post-core-color-brand-white),
263
+ post-scheme-color-interactive-primary-enabled-fg3: var(--post-core-color-sandgrey-100),
264
+ post-scheme-color-interactive-primary-enabled-bg2: var(--post-core-color-brand-white),
265
+ post-scheme-color-interactive-primary-enabled-stroke3: var(--post-core-color-sandgrey-100),
266
+ post-scheme-color-interactive-primary-hover-bg: var(--post-core-color-sandgrey-070),
267
+ 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
+ post-scheme-color-interactive-primary-hover-stroke: var(--post-core-color-brand-white),
270
+ post-scheme-color-interactive-primary-hover-fg3: var(--post-core-color-sandgrey-070),
271
+ post-scheme-color-interactive-primary-hover-bg2: var(--post-core-color-brand-white),
272
+ post-scheme-color-interactive-primary-hover-stroke3: var(--post-core-color-sandgrey-070),
273
+ post-scheme-color-interactive-primary-disabled-bg: var(--post-core-color-sandgrey-060),
274
+ 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
+ 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
+ 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
+ post-scheme-color-interactive-primary-disabled-stroke2: var(--post-core-color-brand-white),
281
+ post-scheme-color-interactive-primary-disabled-bg4: var(--post-core-color-brand-white),
282
+ post-scheme-color-interactive-primary-disabled-stroke3: var(--post-core-color-sandgrey-060),
283
+ post-scheme-color-interactive-primary-selected-bg1: var(--post-core-color-sandgrey-100),
284
+ 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
+ post-scheme-color-interactive-primary-selected-stroke1: var(--post-core-color-brand-white),
287
+ 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),
291
+ post-scheme-color-interactive-primary-selected-stroke3: var(--post-core-color-sandgrey-100),
292
+ post-scheme-color-interactive-primary-selected-bg4: var(--post-core-color-brand-white),
293
+ post-scheme-color-interactive-notification-info-fg: var(--post-core-color-sandgrey-100),
294
+ post-scheme-color-interactive-notification-info-bg: var(--post-scheme-color-signal-information-light),
295
+ post-scheme-color-interactive-notification-info-icon: var(--post-scheme-color-signal-information-dark),
296
+ post-scheme-color-interactive-notification-info-stroke: var(--post-scheme-color-signal-information-dark),
297
+ post-scheme-color-interactive-notification-success-fg: var(--post-core-color-sandgrey-100),
298
+ post-scheme-color-interactive-notification-success-bg: var(--post-scheme-color-signal-success-light),
299
+ post-scheme-color-interactive-notification-success-icon: var(--post-scheme-color-signal-success-dark),
300
+ post-scheme-color-interactive-notification-success-stroke: var(--post-scheme-color-signal-success-dark),
301
+ post-scheme-color-interactive-notification-warning-fg: var(--post-core-color-sandgrey-100),
302
+ post-scheme-color-interactive-notification-warning-bg: var(--post-scheme-color-signal-warning-light),
303
+ post-scheme-color-interactive-notification-warning-icon: var(--post-scheme-color-signal-warning-dark),
304
+ post-scheme-color-interactive-notification-warning-stroke: var(--post-scheme-color-signal-warning-dark),
305
+ post-scheme-color-interactive-notification-error-fg: var(--post-core-color-sandgrey-100),
306
+ post-scheme-color-interactive-notification-error-bg: var(--post-scheme-color-signal-error-light),
307
+ post-scheme-color-interactive-notification-error-icon: var(--post-scheme-color-signal-error-dark),
308
+ post-scheme-color-interactive-notification-error-stroke: var(--post-scheme-color-signal-error-dark),
309
+ post-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-080),
310
+ post-scheme-color-surface-default-fg: var(--post-core-color-brand-white),
311
+ post-scheme-color-surface-default-stroke: var(--post-core-color-brand-white),
312
+ post-scheme-color-surface-accent1-bg: var(--post-core-color-sandgrey-100),
313
+ post-scheme-color-surface-accent1-fg: var(--post-core-color-brand-white),
314
+ post-scheme-color-surface-alternate-bg: var(--post-core-color-sandgrey-100),
315
+ post-scheme-color-surface-alternate-fg: var(--post-core-color-brand-white),
316
+ post-scheme-color-surface-brand-bg: var(--post-core-color-brand-postyellow),
317
+ post-scheme-color-surface-brand-fg: var(--post-core-color-sandgrey-100),
318
+ post-scheme-color-surface-accent-bg: var(--post-core-color-sandgrey-002),
319
+ post-scheme-color-surface-accent-fg: var(--post-core-color-sandgrey-100),
320
+ post-scheme-color-surface-accent-fg-accent: var(--post-core-color-brand-postyellow),
321
+ post-scheme-color-notification-badge-bg: var(--post-core-color-notification-red),
322
+ post-scheme-color-notification-badge-fg: var(--post-core-color-brand-white),
323
+ post-scheme-color-notification-badge-stroke: var(--post-core-color-brand-white),
324
+ post-scheme-color-notification-popover-hover: var(--post-core-color-sandgrey-020),
325
+ post-scheme-accent-bg-scheme-1: var(--post-core-bg-scheme-dark),
326
+ post-scheme-accent-bg-scheme-2: var(--post-core-bg-scheme-light),
327
+ post-cargo-scheme-color-surface-default-bg: var(--post-core-color-sandgrey-080),
328
+ post-cargo-scheme-color-surface-default-fg: var(--post-core-color-brand-white),
329
+ post-cargo-scheme-color-surface-default-stroke: var(--post-core-color-brand-white),
330
+ post-cargo-scheme-color-surface-accent1-bg: var(--post-core-color-sandgrey-100),
331
+ post-cargo-scheme-color-surface-accent1-fg: var(--post-core-color-brand-white),
332
+ post-cargo-scheme-color-surface-alternate-bg: var(--post-core-color-sandgrey-100),
333
+ post-cargo-scheme-color-surface-alternate-fg: var(--post-core-color-brand-white),
334
+ post-cargo-scheme-color-surface-brand-bg: var(--post-core-color-cargo-green),
335
+ post-cargo-scheme-color-surface-brand-fg: var(--post-core-color-brand-white),
336
+ post-cargo-scheme-color-surface-brand-fg-accent: var(--post-core-color-cargo-blue),
337
+ post-cargo-scheme-color-surface-accent-bg: var(--post-core-color-cargo-blue),
338
+ post-cargo-scheme-color-surface-accent-fg: var(--post-core-color-sandgrey-100),
339
+ post-cargo-scheme-color-surface-accent-fg-accent: var(--post-core-color-cargo-green),
340
+ );
package/_theme.scss ADDED
@@ -0,0 +1,34 @@
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-post: (
7
+ post-theme-palettes-bg-scheme-brand: var(--post-core-bg-scheme-light),
8
+ post-theme-palettes-bg-scheme-emphasis: var(--post-scheme-accent-bg-scheme-2),
9
+ post-theme-palettes-bg-scheme-default: var(--post-scheme-accent-bg-scheme-1),
10
+ post-theme-palettes-bg-scheme-alternate: var(--post-scheme-accent-bg-scheme-1),
11
+ post-theme-color-palettes-default-bg: var(--post-scheme-color-surface-default-bg),
12
+ post-theme-color-palettes-default-fg: var(--post-scheme-color-surface-default-fg),
13
+ post-theme-color-palettes-brand-bg: var(--post-scheme-color-surface-brand-bg),
14
+ post-theme-color-palettes-brand-fg: var(--post-scheme-color-surface-brand-fg),
15
+ post-theme-color-palettes-accent-bg: var(--post-scheme-color-surface-accent-bg),
16
+ post-theme-color-palettes-accent-fg: var(--post-scheme-color-surface-accent-fg),
17
+ post-theme-color-palettes-alternate-bg: var(--post-scheme-color-surface-alternate-bg),
18
+ post-theme-color-palettes-alternate-fg: var(--post-scheme-color-surface-alternate-fg),
19
+ );
20
+
21
+ $post-cargo: (
22
+ post-theme-palettes-bg-scheme-brand: var(--post-core-bg-scheme-dark),
23
+ post-theme-palettes-bg-scheme-emphasis: var(--post-core-bg-scheme-light),
24
+ post-theme-palettes-bg-scheme-default: var(--post-scheme-accent-bg-scheme-1),
25
+ post-theme-palettes-bg-scheme-alternate: var(--post-scheme-accent-bg-scheme-1),
26
+ post-theme-color-palettes-default-bg: var(--post-cargo-scheme-color-surface-default-bg),
27
+ post-theme-color-palettes-default-fg: var(--post-cargo-scheme-color-surface-default-fg),
28
+ post-theme-color-palettes-brand-bg: var(--post-cargo-scheme-color-surface-brand-bg),
29
+ post-theme-color-palettes-brand-fg: var(--post-cargo-scheme-color-surface-brand-fg-accent),
30
+ post-theme-color-palettes-accent-bg: var(--post-cargo-scheme-color-surface-accent-bg),
31
+ post-theme-color-palettes-accent-fg: var(--post-cargo-scheme-color-surface-accent-fg-accent),
32
+ post-theme-color-palettes-alternate-bg: var(--post-cargo-scheme-color-surface-alternate-bg),
33
+ post-theme-color-palettes-alternate-fg: var(--post-cargo-scheme-color-surface-alternate-fg),
34
+ );
package/_utilities.scss ADDED
@@ -0,0 +1,132 @@
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-spacing: (
7
+ post-utility-margin-0: var(--post-core-dimension-0),
8
+ post-utility-margin-1: var(--post-core-dimension-1),
9
+ post-utility-margin-2: var(--post-core-dimension-2),
10
+ post-utility-margin-3: var(--post-core-dimension-3),
11
+ post-utility-margin-4: var(--post-core-dimension-4),
12
+ post-utility-margin-5: var(--post-core-dimension-5),
13
+ post-utility-margin-6: var(--post-core-dimension-6),
14
+ post-utility-margin-8: var(--post-core-dimension-8),
15
+ post-utility-margin-10: var(--post-core-dimension-10),
16
+ post-utility-margin-11: var(--post-core-dimension-11),
17
+ post-utility-margin-12: var(--post-core-dimension-12),
18
+ post-utility-margin-14: var(--post-core-dimension-14),
19
+ post-utility-margin-15: var(--post-core-dimension-15),
20
+ post-utility-margin-16: var(--post-core-dimension-16),
21
+ post-utility-margin-18: var(--post-core-dimension-18),
22
+ post-utility-margin-19: var(--post-core-dimension-19),
23
+ post-utility-margin-20: var(--post-core-dimension-20),
24
+ post-utility-margin-22: var(--post-core-dimension-22),
25
+ post-utility-margin-24: var(--post-core-dimension-24),
26
+ post-utility-margin-26: var(--post-core-dimension-26),
27
+ post-utility-margin-28: var(--post-core-dimension-28),
28
+ post-utility-margin-30: var(--post-core-dimension-30),
29
+ post-utility-margin-32: var(--post-core-dimension-32),
30
+ post-utility-margin-34: var(--post-core-dimension-34),
31
+ post-utility-margin-36: var(--post-core-dimension-36),
32
+ post-utility-margin-40: var(--post-core-dimension-40),
33
+ post-utility-margin-48: var(--post-core-dimension-48),
34
+ post-utility-margin-56: var(--post-core-dimension-56),
35
+ post-utility-margin-64: var(--post-core-dimension-64),
36
+ post-utility-margin-78: var(--post-core-dimension-78),
37
+ post-utility-margin-80: var(--post-core-dimension-80),
38
+ post-utility-margin-96: var(--post-core-dimension-96),
39
+ post-utility-margin-100: var(--post-core-dimension-100),
40
+ post-utility-margin-112: var(--post-core-dimension-112),
41
+ post-utility-margin-auto: auto,
42
+ post-utility-padding-0: var(--post-core-dimension-0),
43
+ post-utility-padding-1: var(--post-core-dimension-1),
44
+ post-utility-padding-2: var(--post-core-dimension-2),
45
+ post-utility-padding-3: var(--post-core-dimension-3),
46
+ post-utility-padding-4: var(--post-core-dimension-4),
47
+ post-utility-padding-5: var(--post-core-dimension-5),
48
+ post-utility-padding-6: var(--post-core-dimension-6),
49
+ post-utility-padding-8: var(--post-core-dimension-8),
50
+ post-utility-padding-10: var(--post-core-dimension-10),
51
+ post-utility-padding-11: var(--post-core-dimension-11),
52
+ post-utility-padding-12: var(--post-core-dimension-12),
53
+ post-utility-padding-14: var(--post-core-dimension-14),
54
+ post-utility-padding-15: var(--post-core-dimension-15),
55
+ post-utility-padding-16: var(--post-core-dimension-16),
56
+ post-utility-padding-18: var(--post-core-dimension-18),
57
+ post-utility-padding-19: var(--post-core-dimension-19),
58
+ post-utility-padding-20: var(--post-core-dimension-20),
59
+ post-utility-padding-22: var(--post-core-dimension-22),
60
+ post-utility-padding-24: var(--post-core-dimension-24),
61
+ post-utility-padding-26: var(--post-core-dimension-26),
62
+ post-utility-padding-28: var(--post-core-dimension-28),
63
+ post-utility-padding-30: var(--post-core-dimension-30),
64
+ post-utility-padding-32: var(--post-core-dimension-32),
65
+ post-utility-padding-34: var(--post-core-dimension-34),
66
+ post-utility-padding-36: var(--post-core-dimension-36),
67
+ post-utility-padding-40: var(--post-core-dimension-40),
68
+ post-utility-padding-48: var(--post-core-dimension-48),
69
+ post-utility-padding-56: var(--post-core-dimension-56),
70
+ post-utility-padding-64: var(--post-core-dimension-64),
71
+ post-utility-padding-78: var(--post-core-dimension-78),
72
+ post-utility-padding-80: var(--post-core-dimension-80),
73
+ post-utility-padding-96: var(--post-core-dimension-96),
74
+ post-utility-padding-100: var(--post-core-dimension-100),
75
+ post-utility-padding-112: var(--post-core-dimension-112),
76
+ post-utility-gap-0: var(--post-core-dimension-0),
77
+ post-utility-gap-1: var(--post-core-dimension-1),
78
+ post-utility-gap-2: var(--post-core-dimension-2),
79
+ post-utility-gap-3: var(--post-core-dimension-3),
80
+ post-utility-gap-4: var(--post-core-dimension-4),
81
+ post-utility-gap-5: var(--post-core-dimension-5),
82
+ post-utility-gap-6: var(--post-core-dimension-6),
83
+ post-utility-gap-8: var(--post-core-dimension-8),
84
+ post-utility-gap-10: var(--post-core-dimension-10),
85
+ post-utility-gap-11: var(--post-core-dimension-11),
86
+ post-utility-gap-12: var(--post-core-dimension-12),
87
+ post-utility-gap-14: var(--post-core-dimension-14),
88
+ post-utility-gap-15: var(--post-core-dimension-15),
89
+ post-utility-gap-16: var(--post-core-dimension-16),
90
+ post-utility-gap-18: var(--post-core-dimension-18),
91
+ post-utility-gap-19: var(--post-core-dimension-19),
92
+ post-utility-gap-20: var(--post-core-dimension-20),
93
+ post-utility-gap-22: var(--post-core-dimension-22),
94
+ post-utility-gap-24: var(--post-core-dimension-24),
95
+ post-utility-gap-26: var(--post-core-dimension-26),
96
+ post-utility-gap-28: var(--post-core-dimension-28),
97
+ post-utility-gap-30: var(--post-core-dimension-30),
98
+ post-utility-gap-32: var(--post-core-dimension-32),
99
+ post-utility-gap-34: var(--post-core-dimension-34),
100
+ post-utility-gap-36: var(--post-core-dimension-36),
101
+ post-utility-gap-40: var(--post-core-dimension-40),
102
+ post-utility-gap-48: var(--post-core-dimension-48),
103
+ post-utility-gap-56: var(--post-core-dimension-56),
104
+ post-utility-gap-64: var(--post-core-dimension-64),
105
+ post-utility-gap-78: var(--post-core-dimension-78),
106
+ post-utility-gap-80: var(--post-core-dimension-80),
107
+ post-utility-gap-96: var(--post-core-dimension-96),
108
+ post-utility-gap-100: var(--post-core-dimension-100),
109
+ post-utility-gap-112: var(--post-core-dimension-112),
110
+ );
111
+
112
+ $post-color: (
113
+ post-utility-surface-default: var(--post-core-color-sandgrey-002),
114
+ post-utility-surface-accent1: var(--post-core-color-brand-white),
115
+ post-utility-surface-accent2: var(--post-core-color-sandgrey-006),
116
+ post-utility-surface-accent3: var(--post-core-color-brand-postyellow),
117
+ post-utility-surface-accent4: var(--post-core-color-sandgrey-080),
118
+ );
119
+
120
+ $post-typo: (
121
+ post-utility-font-size-sm: var(--post-device-font-size-7),
122
+ post-utility-font-size-md: var(--post-device-font-size-6),
123
+ post-utility-font-size-lg: var(--post-device-font-size-5),
124
+ post-utility-font-weight-regular: var(--post-core-font-weight-400),
125
+ post-utility-font-weight-bold: var(--post-core-font-weight-700),
126
+ post-utility-font-weight-black: var(--post-core-font-weight-900),
127
+ post-utility-line-height-1: var(--post-core-line-height-100),
128
+ post-utility-line-height-sm: var(--post-core-line-height-120),
129
+ post-utility-line-height-lg: var(--post-core-line-height-150),
130
+ post-utility-letter-spacing-none: var(--post-core-letter-spacing-none),
131
+ post-utility-letter-spacing-default: var(--post-core-letter-spacing-default),
132
+ );
package/package.json ADDED
@@ -0,0 +1,41 @@
1
+ {
2
+ "name": "@swisspost/design-system-tokens",
3
+ "version": "9.0.0-next.4",
4
+ "description": "Design Tokens for the Swiss Post Design System.",
5
+ "author": "Swiss Post <design-system@post.ch>",
6
+ "license": "Apache-2.0",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/swisspost/design-system.git"
10
+ },
11
+ "homepage": "https://design-system.post.ch",
12
+ "bugs": {
13
+ "url": "https://github.com/swisspost/design-system/issues"
14
+ },
15
+ "type": "module",
16
+ "keywords": [
17
+ "tokens",
18
+ "tokens studio",
19
+ "scss",
20
+ "design-system",
21
+ "ui",
22
+ "frontend"
23
+ ],
24
+ "publishConfig": {
25
+ "directory": "./dist",
26
+ "access": "public",
27
+ "linkDirectory": true
28
+ },
29
+ "devDependencies": {
30
+ "@tokens-studio/sd-transforms": "1.2.2",
31
+ "copyfiles": "2.4.1",
32
+ "rimraf": "6.0.1",
33
+ "style-dictionary": "4.0.1"
34
+ },
35
+ "scripts": {
36
+ "copy-files": "copyfiles -f package.json README.md CONTRIBUTING.md CHANGELOG.md LICENSE dist",
37
+ "build": "pnpm clean && node ./build.js && pnpm copy-files",
38
+ "clean": "rimraf dist",
39
+ "build:verbose": "node ./build.js --verbosity=verbose"
40
+ }
41
+ }
package/tailwind/helpers.tailwind.js ADDED
@@ -0,0 +1,17 @@
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
+ export default {
7
+ focus: {
8
+ 'outline': {
9
+ 'offset': 'var(--post-device-spacing-padding-2)',
10
+ 'color': 'var(--post-scheme-color-interactive-focus-stroke)',
11
+ 'color-inverted': 'var(--post-scheme-color-interactive-focus-stroke-inverted)',
12
+ },
13
+ 'outline-width': 'var(--post-device-border-width-focus)',
14
+ 'border-style': 'var(--post-core-border-style-solid)',
15
+ 'border-radius': 'var(--post-device-border-radius-focus)',
16
+ },
17
+ };