@frontify/fondue 12.10.2 → 13.0.0-beta.0

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 (15) hide show
  1. package/{tailwind.config.ts → dist/legacyTokens.tailwind.config.js} +10 -15
  2. package/dist/packages/charts/style.css +1 -1
  3. package/dist/packages/components/style.css +1 -1
  4. package/dist/packages/tokens/base.css +313 -0
  5. package/dist/packages/tokens/deprecatedBaseTokens.css +321 -0
  6. package/dist/packages/tokens/fondue-tokens.js +1 -1
  7. package/dist/packages/tokens/fondue-tokens.umd.cjs +1 -1
  8. package/dist/packages/tokens/tailwind.config.js +7 -25
  9. package/dist/packages/tokens/tools/tools/replaceLegacyTokens.ts +176 -0
  10. package/dist/packages/tokens/tools/tools/replacements.ts +422 -0
  11. package/dist/style.css +1 -1
  12. package/package.json +11 -10
  13. package/dist/packages/tokens/style.css +0 -1
  14. package/dist/packages/tokens/theme/themes.module.css +0 -468
  15. package/dist/packages/tokens/theme/themes.module.css.d.ts +0 -13
package/dist/packages/tokens/base.css ADDED
@@ -0,0 +1,313 @@
1
+ :root {
2
+ --border-radius-large: 0.5rem;
3
+ --border-radius-medium: 0.25rem;
4
+ --border-radius-small: 0.125rem;
5
+ --border-radius-x-large: 0.75rem;
6
+ --border-width-default: 1px;
7
+ --border-width-large: 2px;
8
+ --color-container-disabled-default: var(--color-neutral-10);
9
+ --color-container-disabled-on-disabled-container: var(--color-neutral-50);
10
+ --color-container-error-active: var(--color-error-30);
11
+ --color-container-error-default: var(--color-error-20);
12
+ --color-container-error-hover: var(--color-error-25);
13
+ --color-container-error-on-error-container: var(--color-error-75);
14
+ --color-container-highlight-active: var(--color-marker-30);
15
+ --color-container-highlight-default: var(--color-marker-20);
16
+ --color-container-highlight-hover: var(--color-marker-25);
17
+ --color-container-highlight-on-highlight-container: var(--color-marker-80);
18
+ --color-container-secondary-active: var(--color-neutral-40);
19
+ --color-container-secondary-default: var(--color-neutral-25);
20
+ --color-container-secondary-hover: var(--color-neutral-30);
21
+ --color-container-secondary-on-secondary-container: var(--color-neutral-95);
22
+ --color-container-secondary-on-secondary-container-variant: var(--color-neutral-75);
23
+ --color-container-success-active: var(--color-success-05);
24
+ --color-container-success-default: var(--color-success-30);
25
+ --color-container-success-hover: var(--color-success-10);
26
+ --color-container-success-on-success-container: var(--color-success-80);
27
+ --color-container-warning-active: var(--color-warning-10);
28
+ --color-container-warning-default: var(--color-warning-30);
29
+ --color-container-warning-hover: var(--color-warning-20);
30
+ --color-container-warning-on-warning-container: var(--color-warning-90);
31
+ --color-disabled-default: var(--color-neutral-40);
32
+ --color-disabled-on-disabled: var(--color-neutral-10);
33
+ --color-error-00: rgba(255, 255, 255, 1);
34
+ --color-error-05: rgba(254, 236, 235, 1);
35
+ --color-error-10: rgba(253, 219, 218, 1);
36
+ --color-error-100: rgba(0, 0, 0, 1);
37
+ --color-error-20: rgba(252, 209, 208, 1);
38
+ --color-error-25: rgba(251, 193, 191, 1);
39
+ --color-error-30: rgba(249, 177, 174, 1);
40
+ --color-error-40: rgba(241, 123, 96, 1);
41
+ --color-error-50: rgba(236, 96, 62, 1);
42
+ --color-error-60: rgba(222, 36, 23, 1);
43
+ --color-error-70: rgba(182, 31, 21, 1);
44
+ --color-error-75: rgba(150, 27, 18, 1);
45
+ --color-error-80: rgba(119, 22, 15, 1);
46
+ --color-error-90: rgba(70, 10, 0, 1);
47
+ --color-error-95: rgba(35, 5, 0, 1);
48
+ --color-error-active: var(--color-error-80);
49
+ --color-error-default: var(--color-error-60);
50
+ --color-error-hover: var(--color-error-70);
51
+ --color-error-on-error: var(--color-error-00);
52
+ --color-focus-contrast: var(--color-neutral-00);
53
+ --color-focus-default: rgba(65, 150, 251, 1);
54
+ --color-highlight-active: var(--color-marker-80);
55
+ --color-highlight-default: var(--color-marker-60);
56
+ --color-highlight-hover: var(--color-marker-70);
57
+ --color-highlight-on-highlight: var(--color-marker-00);
58
+ --color-line-mid: rgba(135, 135, 129, 0.5);
59
+ --color-line-strong: var(--color-neutral-95);
60
+ --color-line-subtle: rgba(135, 135, 129, 0.2);
61
+ --color-marker-00: rgba(255, 255, 255, 1);
62
+ --color-marker-05: rgba(253, 246, 255, 1);
63
+ --color-marker-10: rgba(252, 242, 255, 1);
64
+ --color-marker-100: rgba(0, 0, 0, 1);
65
+ --color-marker-15: rgba(250, 232, 255, 1);
66
+ --color-marker-20: rgba(245, 204, 255, 1);
67
+ --color-marker-25: rgba(241, 183, 255, 1);
68
+ --color-marker-30: rgba(236, 161, 254, 1);
69
+ --color-marker-40: rgba(224, 107, 253, 1);
70
+ --color-marker-50: rgba(210, 48, 250, 1);
71
+ --color-marker-60: rgba(182, 10, 227, 1);
72
+ --color-marker-70: rgba(136, 10, 171, 1);
73
+ --color-marker-75: rgba(119, 10, 149, 1);
74
+ --color-marker-80: rgba(101, 10, 127, 1);
75
+ --color-marker-85: rgba(86, 7, 109, 1);
76
+ --color-marker-90: rgba(71, 4, 92, 1);
77
+ --color-marker-95: rgba(30, 0, 42, 1);
78
+ --color-neutral-00: rgba(255, 255, 255, 1);
79
+ --color-neutral-05: rgba(248, 248, 245, 1);
80
+ --color-neutral-10: rgba(245, 245, 241, 1);
81
+ --color-neutral-100: rgba(0, 0, 0, 1);
82
+ --color-neutral-15: rgba(240, 240, 235, 1);
83
+ --color-neutral-20: rgba(234, 234, 228, 1);
84
+ --color-neutral-25: rgba(225, 225, 219, 1);
85
+ --color-neutral-30: rgba(215, 215, 208, 1);
86
+ --color-neutral-35: rgba(203, 203, 197, 1);
87
+ --color-neutral-40: rgba(191, 191, 184, 1);
88
+ --color-neutral-45: rgba(178, 178, 172, 1);
89
+ --color-neutral-50: rgba(164, 164, 158, 1);
90
+ --color-neutral-55: rgba(150, 150, 144, 1);
91
+ --color-neutral-60: rgba(135, 135, 129, 1);
92
+ --color-neutral-65: rgba(119, 119, 114, 1);
93
+ --color-neutral-70: rgba(103, 103, 99, 1);
94
+ --color-neutral-75: rgba(87, 87, 83, 1);
95
+ --color-neutral-80: rgba(70, 70, 67, 1);
96
+ --color-neutral-85: rgba(53, 53, 51, 1);
97
+ --color-neutral-90: rgba(36, 36, 34, 1);
98
+ --color-neutral-95: rgba(17, 17, 16, 1);
99
+ --color-overlay-overlay: rgba(17, 17, 16, 0.5);
100
+ --color-primary-active: var(--color-neutral-80);
101
+ --color-primary-default: var(--color-neutral-95);
102
+ --color-primary-hover: var(--color-neutral-85);
103
+ --color-primary-on-primary: var(--color-neutral-00);
104
+ --color-primary-on-primary-variant: var(--color-neutral-20);
105
+ --color-secondary-active: var(--color-neutral-85);
106
+ --color-secondary-default: var(--color-neutral-70);
107
+ --color-secondary-hover: var(--color-neutral-80);
108
+ --color-secondary-on-secondary: var(--color-neutral-00);
109
+ --color-shadow-default: rgba(17, 17, 16, 0.2);
110
+ --color-success-00: rgba(255, 255, 255, 1);
111
+ --color-success-05: rgba(224, 247, 223, 1);
112
+ --color-success-10: rgba(197, 242, 193, 1);
113
+ --color-success-100: rgba(0, 0, 0, 1);
114
+ --color-success-20: rgba(180, 238, 173, 1);
115
+ --color-success-30: rgba(165, 235, 153, 1);
116
+ --color-success-40: rgba(118, 221, 100, 1);
117
+ --color-success-50: rgba(30, 171, 0, 1);
118
+ --color-success-60: rgba(22, 133, 0, 1);
119
+ --color-success-70: rgba(19, 107, 0, 1);
120
+ --color-success-80: rgba(15, 82, 0, 1);
121
+ --color-success-90: rgba(3, 44, 16, 1);
122
+ --color-success-95: rgba(2, 22, 8, 1);
123
+ --color-success-active: var(--color-success-80);
124
+ --color-success-default: var(--color-success-60);
125
+ --color-success-hover: var(--color-success-70);
126
+ --color-success-on-success: var(--color-success-00);
127
+ --color-surface-active: var(--color-neutral-20);
128
+ --color-surface-default: var(--color-neutral-00);
129
+ --color-surface-dim: var(--color-neutral-05);
130
+ --color-surface-hover: var(--color-neutral-15);
131
+ --color-surface-on-surface: var(--color-neutral-95);
132
+ --color-surface-on-surface-variant: var(--color-neutral-75);
133
+ --color-warning-00: rgba(255, 255, 255, 1);
134
+ --color-warning-05: rgba(255, 245, 209, 1);
135
+ --color-warning-10: rgba(255, 239, 188, 1);
136
+ --color-warning-100: rgba(0, 0, 0, 1);
137
+ --color-warning-20: rgba(255, 233, 163, 1);
138
+ --color-warning-30: rgba(253, 215, 114, 1);
139
+ --color-warning-40: rgba(250, 184, 21, 1);
140
+ --color-warning-50: rgba(232, 148, 13, 1);
141
+ --color-warning-60: rgba(180, 83, 9, 1);
142
+ --color-warning-70: rgba(146, 64, 14, 1);
143
+ --color-warning-80: rgba(120, 53, 15, 1);
144
+ --color-warning-90: rgba(72, 41, 9, 1);
145
+ --color-warning-95: rgba(36, 21, 5, 1);
146
+ --color-warning-active: var(--color-warning-80);
147
+ --color-warning-default: var(--color-warning-60);
148
+ --color-warning-hover: var(--color-warning-70);
149
+ --color-warning-on-warning: var(--color-warning-00);
150
+ --shadow-big: 0px 25px 80px 0px var(--color-shadow-default);
151
+ --shadow-default: 0px 3px 10px 0px var(--color-shadow-default);
152
+ --shadow-mid: 0px 4px 24px 0px var(--color-shadow-default);
153
+ --spacing-large: 1.5rem;
154
+ --spacing-medium: 1rem;
155
+ --spacing-small: 0.75rem;
156
+ --spacing-x-large: 2rem;
157
+ --spacing-x-small: 0.5rem;
158
+ --spacing-xx-large: 2.5rem;
159
+ --spacing-xx-small: 0.25rem;
160
+ --text-body-large-default-font-family: var(--typography-font-family-primary);
161
+ --text-body-large-default-font-size: var(--typography-font-size-large);
162
+ --text-body-large-default-font-weight: var(--typography-font-weight-regular);
163
+ --text-body-large-default-letter-casing: var(--typography-text-transform-default);
164
+ --text-body-large-default-letter-spacing: var(--typography-letter-spacing-default);
165
+ --text-body-large-default-line-height: var(--typography-line-height-wide);
166
+ --text-body-large-strong-font-family: var(--typography-font-family-primary);
167
+ --text-body-large-strong-font-size: var(--typography-font-size-large);
168
+ --text-body-large-strong-font-weight: var(--typography-font-weight-medium);
169
+ --text-body-large-strong-letter-casing: var(--typography-text-transform-default);
170
+ --text-body-large-strong-letter-spacing: var(--typography-letter-spacing-default);
171
+ --text-body-large-strong-line-height: var(--typography-line-height-wide);
172
+ --text-body-large-x-strong-font-family: var(--typography-font-family-primary);
173
+ --text-body-large-x-strong-font-size: var(--typography-font-size-large);
174
+ --text-body-large-x-strong-font-weight: var(--typography-font-weight-bold);
175
+ --text-body-large-x-strong-letter-casing: var(--typography-text-transform-default);
176
+ --text-body-large-x-strong-letter-spacing: var(--typography-letter-spacing-default);
177
+ --text-body-large-x-strong-line-height: var(--typography-line-height-wide);
178
+ --text-body-medium-default-font-family: var(--typography-font-family-primary);
179
+ --text-body-medium-default-font-size: var(--typography-font-size-medium);
180
+ --text-body-medium-default-font-weight: var(--typography-font-weight-regular);
181
+ --text-body-medium-default-letter-casing: var(--typography-text-transform-default);
182
+ --text-body-medium-default-letter-spacing: var(--typography-letter-spacing-default);
183
+ --text-body-medium-default-line-height: var(--typography-line-height-medium);
184
+ --text-body-medium-strong-font-family: var(--typography-font-family-primary);
185
+ --text-body-medium-strong-font-size: var(--typography-font-size-medium);
186
+ --text-body-medium-strong-font-weight: var(--typography-font-weight-medium);
187
+ --text-body-medium-strong-letter-casing: var(--typography-text-transform-default);
188
+ --text-body-medium-strong-letter-spacing: var(--typography-letter-spacing-default);
189
+ --text-body-medium-strong-line-height: var(--typography-line-height-medium);
190
+ --text-body-medium-x-strong-font-family: var(--typography-font-family-primary);
191
+ --text-body-medium-x-strong-font-size: var(--typography-font-size-medium);
192
+ --text-body-medium-x-strong-font-weight: var(--typography-font-weight-bold);
193
+ --text-body-medium-x-strong-letter-casing: var(--typography-text-transform-default);
194
+ --text-body-medium-x-strong-letter-spacing: var(--typography-letter-spacing-default);
195
+ --text-body-medium-x-strong-line-height: var(--typography-line-height-medium);
196
+ --text-body-small-default-font-family: var(--typography-font-family-primary);
197
+ --text-body-small-default-font-size: var(--typography-font-size-small);
198
+ --text-body-small-default-font-weight: var(--typography-font-weight-regular);
199
+ --text-body-small-default-letter-casing: var(--typography-text-transform-default);
200
+ --text-body-small-default-letter-spacing: var(--typography-letter-spacing-default);
201
+ --text-body-small-default-line-height: var(--typography-line-height-tight);
202
+ --text-body-small-strong-font-family: var(--typography-font-family-primary);
203
+ --text-body-small-strong-font-size: var(--typography-font-size-small);
204
+ --text-body-small-strong-font-weight: var(--typography-font-weight-medium);
205
+ --text-body-small-strong-letter-casing: var(--typography-text-transform-default);
206
+ --text-body-small-strong-letter-spacing: var(--typography-letter-spacing-default);
207
+ --text-body-small-strong-line-height: var(--typography-line-height-tight);
208
+ --text-body-small-x-strong-font-family: var(--typography-font-family-primary);
209
+ --text-body-small-x-strong-font-size: var(--typography-font-size-small);
210
+ --text-body-small-x-strong-font-weight: var(--typography-font-weight-bold);
211
+ --text-body-small-x-strong-letter-casing: var(--typography-text-transform-default);
212
+ --text-body-small-x-strong-letter-spacing: var(--typography-letter-spacing-default);
213
+ --text-body-small-x-strong-line-height: var(--typography-line-height-tight);
214
+ --text-body-x-small-default-font-family: var(--typography-font-family-primary);
215
+ --text-body-x-small-default-font-size: var(--typography-font-size-x-small);
216
+ --text-body-x-small-default-font-weight: var(--typography-font-weight-regular);
217
+ --text-body-x-small-default-letter-casing: var(--typography-text-transform-default);
218
+ --text-body-x-small-default-letter-spacing: var(--typography-letter-spacing-default);
219
+ --text-body-x-small-default-line-height: var(--typography-line-height-tight);
220
+ --text-body-x-small-strong-font-family: var(--typography-font-family-primary);
221
+ --text-body-x-small-strong-font-size: var(--typography-font-size-x-small);
222
+ --text-body-x-small-strong-font-weight: var(--typography-font-weight-medium);
223
+ --text-body-x-small-strong-letter-casing: var(--typography-text-transform-default);
224
+ --text-body-x-small-strong-letter-spacing: var(--typography-letter-spacing-default);
225
+ --text-body-x-small-strong-line-height: var(--typography-line-height-tight);
226
+ --text-body-x-small-x-strong-font-family: var(--typography-font-family-primary);
227
+ --text-body-x-small-x-strong-font-size: var(--typography-font-size-x-small);
228
+ --text-body-x-small-x-strong-font-weight: var(--typography-font-weight-bold);
229
+ --text-body-x-small-x-strong-letter-casing: var(--typography-text-transform-default);
230
+ --text-body-x-small-x-strong-letter-spacing: var(--typography-letter-spacing-default);
231
+ --text-body-x-small-x-strong-line-height: var(--typography-line-height-tight);
232
+ --text-heading-category-default-font-family: var(--typography-font-family-primary);
233
+ --text-heading-category-default-font-size: var(--typography-font-size-xx-small);
234
+ --text-heading-category-default-font-weight: var(--typography-font-weight-medium);
235
+ --text-heading-category-default-letter-casing: var(--typography-text-transform-uppercase);
236
+ --text-heading-category-default-letter-spacing: var(--typography-letter-spacing-wide);
237
+ --text-heading-category-default-line-height: var(--typography-line-height-tight);
238
+ --text-heading-category-strong-font-family: var(--typography-font-family-primary);
239
+ --text-heading-category-strong-font-size: var(--typography-font-size-xx-small);
240
+ --text-heading-category-strong-font-weight: var(--typography-font-weight-bold);
241
+ --text-heading-category-strong-letter-casing: var(--typography-text-transform-uppercase);
242
+ --text-heading-category-strong-letter-spacing: var(--typography-letter-spacing-wide);
243
+ --text-heading-category-strong-line-height: var(--typography-line-height-tight);
244
+ --text-heading-large-default-font-family: var(--typography-font-family-primary);
245
+ --text-heading-large-default-font-size: var(--typography-font-size-large);
246
+ --text-heading-large-default-font-weight: var(--typography-font-weight-medium);
247
+ --text-heading-large-default-letter-casing: var(--typography-text-transform-default);
248
+ --text-heading-large-default-letter-spacing: var(--typography-letter-spacing-default);
249
+ --text-heading-large-default-line-height: var(--typography-line-height-wide);
250
+ --text-heading-large-strong-font-family: var(--typography-font-family-primary);
251
+ --text-heading-large-strong-font-size: var(--typography-font-size-large);
252
+ --text-heading-large-strong-font-weight: var(--typography-font-weight-bold);
253
+ --text-heading-large-strong-letter-casing: var(--typography-text-transform-default);
254
+ --text-heading-large-strong-letter-spacing: var(--typography-letter-spacing-default);
255
+ --text-heading-large-strong-line-height: var(--typography-line-height-wide);
256
+ --text-heading-medium-default-font-family: var(--typography-font-family-primary);
257
+ --text-heading-medium-default-font-size: var(--typography-font-size-medium);
258
+ --text-heading-medium-default-font-weight: var(--typography-font-weight-medium);
259
+ --text-heading-medium-default-letter-casing: var(--typography-text-transform-default);
260
+ --text-heading-medium-default-letter-spacing: var(--typography-letter-spacing-default);
261
+ --text-heading-medium-default-line-height: var(--typography-line-height-tight);
262
+ --text-heading-medium-strong-font-family: var(--typography-font-family-primary);
263
+ --text-heading-medium-strong-font-size: var(--typography-font-size-medium);
264
+ --text-heading-medium-strong-font-weight: var(--typography-font-weight-bold);
265
+ --text-heading-medium-strong-letter-casing: var(--typography-text-transform-default);
266
+ --text-heading-medium-strong-letter-spacing: var(--typography-letter-spacing-default);
267
+ --text-heading-medium-strong-line-height: var(--typography-line-height-tight);
268
+ --text-heading-x-large-default-font-family: var(--typography-font-family-primary);
269
+ --text-heading-x-large-default-font-size: var(--typography-font-size-x-large);
270
+ --text-heading-x-large-default-font-weight: var(--typography-font-weight-medium);
271
+ --text-heading-x-large-default-letter-casing: var(--typography-text-transform-default);
272
+ --text-heading-x-large-default-letter-spacing: var(--typography-letter-spacing-default);
273
+ --text-heading-x-large-default-line-height: var(--typography-line-height-loose);
274
+ --text-heading-x-large-strong-font-family: var(--typography-font-family-primary);
275
+ --text-heading-x-large-strong-font-size: var(--typography-font-size-x-large);
276
+ --text-heading-x-large-strong-font-weight: var(--typography-font-weight-bold);
277
+ --text-heading-x-large-strong-letter-casing: var(--typography-text-transform-default);
278
+ --text-heading-x-large-strong-letter-spacing: var(--typography-letter-spacing-default);
279
+ --text-heading-x-large-strong-line-height: var(--typography-line-height-loose);
280
+ --text-heading-xx-large-default-font-family: var(--typography-font-family-primary);
281
+ --text-heading-xx-large-default-font-size: var(--typography-font-size-xx-large);
282
+ --text-heading-xx-large-default-font-weight: var(--typography-font-weight-medium);
283
+ --text-heading-xx-large-default-letter-casing: var(--typography-text-transform-default);
284
+ --text-heading-xx-large-default-letter-spacing: var(--typography-letter-spacing-default);
285
+ --text-heading-xx-large-default-line-height: var(--typography-line-height-extra-loose);
286
+ --text-heading-xx-large-strong-font-family: var(--typography-font-family-primary);
287
+ --text-heading-xx-large-strong-font-size: var(--typography-font-size-xx-large);
288
+ --text-heading-xx-large-strong-font-weight: var(--typography-font-weight-bold);
289
+ --text-heading-xx-large-strong-letter-casing: var(--typography-text-transform-default);
290
+ --text-heading-xx-large-strong-letter-spacing: var(--typography-letter-spacing-default);
291
+ --text-heading-xx-large-strong-line-height: var(--typography-line-height-extra-loose);
292
+ --typography-font-family-monospace: Menlo, Courier, monospace;
293
+ --typography-font-family-primary: Diatype,Space Grotesk Frontify,Arial,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
294
+ --typography-font-size-large: 1rem;
295
+ --typography-font-size-medium: 0.875rem;
296
+ --typography-font-size-small: 0.8125rem;
297
+ --typography-font-size-x-large: 1.25rem;
298
+ --typography-font-size-x-small: 0.75rem;
299
+ --typography-font-size-xx-large: 1.5rem;
300
+ --typography-font-size-xx-small: 0.6875rem;
301
+ --typography-font-weight-bold: 700;
302
+ --typography-font-weight-medium: 500;
303
+ --typography-font-weight-regular: 400;
304
+ --typography-letter-spacing-default: 0px;
305
+ --typography-letter-spacing-wide: 0.88px;
306
+ --typography-line-height-extra-loose: 1.75rem;
307
+ --typography-line-height-loose: 1.5rem;
308
+ --typography-line-height-medium: 1.125rem;
309
+ --typography-line-height-tight: 1rem;
310
+ --typography-line-height-wide: 1.25rem;
311
+ --typography-text-transform-default: none;
312
+ --typography-text-transform-uppercase: uppercase;
313
+ }
package/dist/packages/tokens/deprecatedBaseTokens.css ADDED
@@ -0,0 +1,321 @@
1
+ /* (c) Copyright Frontify Ltd., all rights reserved. */
2
+
3
+ :root {
4
+ --base-color: /** @deprecated use updated token instead **/ var(--color-surface-default);
5
+ --base-color-alt: /** @deprecated use updated token instead **/ var(--color-surface-dim);
6
+ --body-family: /** @deprecated use updated token instead **/ var(--typography-font-family-primary);
7
+ --body-family-stack: /** @deprecated use updated token instead **/ var(--body-family);
8
+ --body-weight-name: /** @deprecated use updated token instead **/ var(--typography-font-weight-regular);
9
+ --body-weight-number: /** @deprecated use updated token instead **/ var(--typography-font-weight-regular);
10
+ --body-weight-strong-name: /** @deprecated use updated token instead **/ var(--typography-font-weight-medium);
11
+ --body-weight-strong-number: /** @deprecated use updated token instead **/ var(--typography-font-weight-medium);
12
+ --body-weight-x-strong-name: /** @deprecated use updated token instead **/ var(--typography-font-weight-bold);
13
+ --body-weight-x-strong-number: /** @deprecated use updated token instead **/ var(--typography-font-weight-bold);
14
+ --body-size-x-small: /** @deprecated use updated token instead **/ var(--typography-font-size-x-small);
15
+ --body-size-x-small-line-height: /** @deprecated use updated token instead **/ var(--typography-line-height-tight);
16
+ --body-size-small: /** @deprecated use updated token instead **/ var(--typography-font-size-small);
17
+ --body-size-small-line-height: /** @deprecated use updated token instead **/ var(--typography-line-height-tight);
18
+ --body-size-medium: /** @deprecated use updated token instead **/ var(--typography-font-size-medium);
19
+ --body-size-medium-line-height: /** @deprecated use updated token instead **/ var(--typography-line-height-medium);
20
+ --body-size-large: /** @deprecated use updated token instead **/ var(--typography-font-size-large);
21
+ --body-size-large-line-height: /** @deprecated use updated token instead **/ var(--typography-line-height-wide);
22
+ --box-neutral-color: /** @deprecated use updated token instead **/ var(--color-container-secondary-default);
23
+ --box-neutral-color-hover: /** @deprecated use updated token instead **/ var(--color-container-secondary-hover);
24
+ --box-neutral-color-pressed: /** @deprecated use updated token instead **/ var(--color-container-secondary-active);
25
+ --box-neutral-inverse-color: /** @deprecated use updated token instead **/ var(
26
+ --color-container-secondary-on-secondary-container
27
+ );
28
+ --box-neutral-inverse-color-hover: /** @deprecated use updated token instead **/ var(
29
+ --color-container-secondary-on-secondary-container
30
+ );
31
+ --box-neutral-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
32
+ --color-container-secondary-on-secondary-container
33
+ );
34
+ --box-neutral-strong-color: /** @deprecated use updated token instead **/ var(--color-primary-default);
35
+ --box-neutral-strong-color-hover: /** @deprecated use updated token instead **/ var(--color-primary-hover);
36
+ --box-neutral-strong-color-pressed: /** @deprecated use updated token instead **/ var(--color-primary-active);
37
+ --box-neutral-strong-inverse-color: /** @deprecated use updated token instead **/ var(--color-primary-on-primary);
38
+ --box-neutral-strong-inverse-color-hover: /** @deprecated use updated token instead **/ var(
39
+ --color-primary-on-primary
40
+ );
41
+ --box-neutral-strong-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
42
+ --color-primary-on-primary
43
+ );
44
+ --box-neutral-mighty-color: /** @deprecated use updated token instead **/ var(--color-primary-default);
45
+ --box-neutral-mighty-color-hover: /** @deprecated use updated token instead **/ var(--color-primary-hover);
46
+ --box-neutral-mighty-color-pressed: /** @deprecated use updated token instead **/ var(--color-primary-active);
47
+ --box-neutral-mighty-inverse-color: /** @deprecated use updated token instead **/ var(--color-primary-on-primary);
48
+ --box-neutral-mighty-inverse-color-hover: /** @deprecated use updated token instead **/ var(
49
+ --color-primary-on-primary
50
+ );
51
+ --box-neutral-mighty-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
52
+ --color-primary-on-primary
53
+ );
54
+ --box-selected-color: /** @deprecated use updated token instead **/ var(--color-container-highlight-default);
55
+ --box-selected-color-hover: /** @deprecated use updated token instead **/ var(--color-container-highlight-hover);
56
+ --box-selected-color-pressed: /** @deprecated use updated token instead **/ var(--color-container-highlight-active);
57
+ --box-selected-inverse-color: /** @deprecated use updated token instead **/ var(
58
+ --color-container-highlight-on-highlight-container
59
+ );
60
+ --box-selected-inverse-color-hover: /** @deprecated use updated token instead **/ var(
61
+ --color-container-highlight-on-highlight-container
62
+ );
63
+ --box-selected-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
64
+ --color-container-highlight-on-highlight-container
65
+ );
66
+ --box-selected-strong-color: /** @deprecated use updated token instead **/ var(--color-highlight-default);
67
+ --box-selected-strong-color-hover: /** @deprecated use updated token instead **/ var(--color-highlight-hover);
68
+ --box-selected-strong-color-pressed: /** @deprecated use updated token instead **/ var(--color-highlight-active);
69
+ --box-selected-strong-inverse-color: /** @deprecated use updated token instead **/ var(
70
+ --color-highlight-on-highlight
71
+ );
72
+ --box-selected-strong-inverse-color-hover: /** @deprecated use updated token instead **/ var(
73
+ --color-highlight-on-highlight
74
+ );
75
+ --box-selected-strong-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
76
+ --color-highlight-on-highlight
77
+ );
78
+ --box-disabled-color: /** @deprecated use updated token instead **/ var(--color-container-disabled-default);
79
+ --box-disabled-color-inverse: /** @deprecated use updated token instead **/ var(
80
+ --color-container-disabled-on-disabled
81
+ );
82
+ --box-disabled-strong-color: /** @deprecated use updated token instead **/ var(--color-disabled-default);
83
+ --box-disabled-strong-color-inverse: /** @deprecated use updated token instead **/ var(
84
+ --color-disabled-on-disabled
85
+ );
86
+ --box-positive-color: /** @deprecated use updated token instead **/ var(--color-container-success-default);
87
+ --box-positive-color-hover: /** @deprecated use updated token instead **/ var(--color-container-success-hover);
88
+ --box-positive-color-pressed: /** @deprecated use updated token instead **/ var(--color-container-success-active);
89
+ --box-positive-inverse-color: /** @deprecated use updated token instead **/ var(
90
+ --color-container-success-on-success-container
91
+ );
92
+ --box-positive-inverse-color-hover: /** @deprecated use updated token instead **/ var(
93
+ --color-container-success-on-success-container
94
+ );
95
+ --box-positive-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
96
+ --color-container-success-on-success-container
97
+ );
98
+ --box-positive-strong-color: /** @deprecated use updated token instead **/ var(--color-success-default);
99
+ --box-positive-strong-color-hover: /** @deprecated use updated token instead **/ var(--color-success-hover);
100
+ --box-positive-strong-color-pressed: /** @deprecated use updated token instead **/ var(--color-success-active);
101
+ --box-positive-strong-inverse-color: /** @deprecated use updated token instead **/ var(--color-success-on-success);
102
+ --box-positive-strong-inverse-color-hover: /** @deprecated use updated token instead **/ var(
103
+ --color-success-on-success
104
+ );
105
+ --box-positive-strong-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
106
+ --color-success-on-success
107
+ );
108
+ --box-negative-color: /** @deprecated use updated token instead **/ var(--color-container-error-default);
109
+ --box-negative-color-hover: /** @deprecated use updated token instead **/ var(--color-container-error-hover);
110
+ --box-negative-color-pressed: /** @deprecated use updated token instead **/ var(--color-container-error-active);
111
+ --box-negative-inverse-color: /** @deprecated use updated token instead **/ var(
112
+ --color-container-error-on-error-container
113
+ );
114
+ --box-negative-inverse-color-hover: /** @deprecated use updated token instead **/ var(
115
+ --color-container-error-on-error-container
116
+ );
117
+ --box-negative-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
118
+ --color-container-error-on-error-container
119
+ );
120
+ --box-negative-strong-color: /** @deprecated use updated token instead **/ var(--color-error-default);
121
+ --box-negative-strong-color-hover: /** @deprecated use updated token instead **/ var(--color-error-hover);
122
+ --box-negative-strong-color-pressed: /** @deprecated use updated token instead **/ var(--color-error-active);
123
+ --box-negative-strong-inverse-color: /** @deprecated use updated token instead **/ var(--color-error-on-error);
124
+ --box-negative-strong-inverse-color-hover: /** @deprecated use updated token instead **/ var(
125
+ --color-error-on-error
126
+ );
127
+ --box-negative-strong-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
128
+ --color-error-on-error
129
+ );
130
+ --box-warning-color: /** @deprecated use updated token instead **/ var(--color-container-warning-default);
131
+ --box-warning-color-hover: /** @deprecated use updated token instead **/ var(--color-container-warning-hover);
132
+ --box-warning-color-pressed: /** @deprecated use updated token instead **/ var(--color-container-warning-active);
133
+ --box-warning-inverse-color: /** @deprecated use updated token instead **/ var(
134
+ --color-container-warning-on-warning-container
135
+ );
136
+ --box-warning-inverse-color-hover: /** @deprecated use updated token instead **/ var(
137
+ --color-container-warning-on-warning-container
138
+ );
139
+ --box-warning-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
140
+ --color-container-warning-on-warning-container
141
+ );
142
+ --box-warning-strong-color: /** @deprecated use updated token instead **/ var(--color-warning-default);
143
+ --box-warning-strong-color-hover: /** @deprecated use updated token instead **/ var(--color-warning-hover);
144
+ --box-warning-strong-color-pressed: /** @deprecated use updated token instead **/ var(--color-warning-active);
145
+ --box-warning-strong-inverse-color: /** @deprecated use updated token instead **/ var(--color-warning-on-warning);
146
+ --box-warning-strong-inverse-color-hover: /** @deprecated use updated token instead **/ var(
147
+ --color-warning-on-warning
148
+ );
149
+ --box-warning-strong-inverse-color-pressed: /** @deprecated use updated token instead **/ var(
150
+ --color-warning-on-warning
151
+ );
152
+ --code-family: /** @deprecated use updated token instead **/ var(--typography-font-family-monoe);
153
+ --code-family-stack: /** @deprecated use updated token instead **/ var(--typography-font-family-monospace);
154
+ --code-weight-name: /** @deprecated use updated token instead **/ var(--typography-font-weight-regular);
155
+ --code-weight-number: /** @deprecated use updated token instead **/ var(--typography-font-weight-regular);
156
+ --code-weight-strong-name: /** @deprecated use updated token instead **/ var(--typography-font-weight-bold);
157
+ --code-weight-strong-number: /** @deprecated use updated token instead **/ var(--typography-font-weight-bold);
158
+ --code-size-small: /** @deprecated use updated token instead **/ var(--typography-font-size-small);
159
+ --code-size-small-line-height: /** @deprecated use updated token instead **/ var(--typography-line-height-tight);
160
+ --code-size-medium: /** @deprecated use updated token instead **/ var(--typography-font-size-medium);
161
+ --code-size-medium-line-height: /** @deprecated use updated token instead **/ var(--typography-line-height-tight);
162
+ --code-size-large: /** @deprecated use updated token instead **/ var(--typography-font-size-large);
163
+ --code-size-large-line-height: /** @deprecated use updated token instead **/ var(--typography-line-height-wide);
164
+ --focus-ring-color: /** @deprecated use updated token instead **/ var(--color-focus-default);
165
+ --heading-family: /** @deprecated use updated token instead **/ var(--typography-font-family-primary);
166
+ --heading-family-stack: /** @deprecated use updated token instead **/ var(--typography-font-family-primary);
167
+ --heading-weight-name: /** @deprecated use updated token instead **/ var(--typography-font-weight-medium);
168
+ --heading-weight-number: /** @deprecated use updated token instead **/ var(--typography-font-weight-medium);
169
+ --heading-weight-strong-name: /** @deprecated use updated token instead **/ var(--typography-font-weight-bold);
170
+ --heading-weight-strong-number: /** @deprecated use updated token instead **/ var(--typography-font-weight-bold);
171
+ --heading-size-medium: /** @deprecated use updated token instead **/ var(--typography-font-size-medium);
172
+ --heading-size-medium-line-height: /** @deprecated use updated token instead **/ var(
173
+ --typography-line-height-tight
174
+ );
175
+ --heading-size-large: /** @deprecated use updated token instead **/ var(--typography-font-size-large);
176
+ --heading-size-large-line-height: /** @deprecated use updated token instead **/ var(--typography-line-height-wide);
177
+ --heading-size-x-large: /** @deprecated use updated token instead **/ var(--typography-font-size-x-large);
178
+ --heading-size-x-large-line-height: /** @deprecated use updated token instead **/ var(
179
+ --typography-line-height-loose
180
+ );
181
+ --heading-size-xx-large: /** @deprecated use updated token instead **/ var(--typography-font-size-xx-large);
182
+ --heading-size-xx-large-line-height: /** @deprecated use updated token instead **/ var(
183
+ --typography-line-height-extra-loose
184
+ );
185
+ --line-color: /** @deprecated use updated token instead **/ var(--color-line-mid);
186
+ --line-color-weak: /** @deprecated use updated token instead **/ var(--color-line-subtle);
187
+ --line-color-strong: /** @deprecated use updated token instead **/ var(--color-line-strong);
188
+ --line-color-x-strong: /** @deprecated use updated token instead **/ var(--color-line-strong);
189
+ --line-color-xx-strong: /** @deprecated use updated token instead **/ var(--color-line-strong);
190
+ --line-color-mighty: /** @deprecated use updated token instead **/ var(--color-line-mid);
191
+ --line-width: /** @deprecated use updated token instead **/ var(--border-width-default);
192
+ --line-width-large: /** @deprecated use updated token instead **/ var(--border-width-large);
193
+ --overlay-color: /** @deprecated use updated token instead **/ var(--color-overlay);
194
+ --radius: /** @deprecated use updated token instead **/ var(--border-radius-medium);
195
+ --radius-small: /** @deprecated use updated token instead **/ var(--border-radius-small);
196
+ --radius-large: /** @deprecated use updated token instead **/ var(--border-radius-large);
197
+ --radius-x-large: /** @deprecated use updated token instead **/ var(--border-radius-x-large);
198
+ --shadow-matrix: /** @deprecated use updated token instead **/ var(--shadow-default);
199
+ --shadow-offset-x: /** @deprecated use updated token instead **/;
200
+ --shadow-offset-y: /** @deprecated use updated token instead **/;
201
+ --shadow-spread: /** @deprecated use updated token instead **/;
202
+ --shadow-blur: /** @deprecated use updated token instead **/;
203
+ --shadow-color: /** @deprecated use updated token instead **/;
204
+ --shadow-top-matrix: /** @deprecated use updated token instead **/ var(--shadow-default);
205
+ --shadow-top-offset-x: /** @deprecated use updated token instead **/;
206
+ --shadow-top-offset-y: /** @deprecated use updated token instead **/;
207
+ --shadow-top-spread: /** @deprecated use updated token instead **/;
208
+ --shadow-bottom-matrix: /** @deprecated use updated token instead **/ var(--shadow-default);
209
+ --shadow-bottom-offset-x: /** @deprecated use updated token instead **/;
210
+ --shadow-bottom-offset-y: /** @deprecated use updated token instead **/;
211
+ --shadow-bottom-spread: /** @deprecated use updated token instead **/;
212
+ --shadow-large-matrix: /** @deprecated use updated token instead **/ var(--shadow-default);
213
+ --shadow-large-offset-x: /** @deprecated use updated token instead **/;
214
+ --shadow-large-offset-y: /** @deprecated use updated token instead **/;
215
+ --shadow-large-spread: /** @deprecated use updated token instead **/;
216
+ --shadow-large-blur: /** @deprecated use updated token instead **/;
217
+ --shadow-large-color: /** @deprecated use updated token instead **/ var(--color-shadow-default);
218
+ --space-xxs: /** @deprecated use updated token instead **/ var(--spacing-xx-small);
219
+ --space-xs: /** @deprecated use updated token instead **/ var(--spacing-x-small);
220
+ --space-s: /** @deprecated use updated token instead **/ var(--spacing-small);
221
+ --space-m: /** @deprecated use updated token instead **/ var(--spacing-medium);
222
+ --space-l: /** @deprecated use updated token instead **/ var(--spacing-large);
223
+ --space-xl: /** @deprecated use updated token instead **/ var(--spacing-x-large);
224
+ --space-xxl: /** @deprecated use updated token instead **/ var(--spacing-xx-large);
225
+ --text-color: /** @deprecated use updated token instead **/ var(--color-primary-default);
226
+ --text-color-hover: /** @deprecated use updated token instead **/ var(--color-primary-hover);
227
+ --text-color-pressed: /** @deprecated use updated token instead **/ var(--color-primary-active);
228
+ --text-color-weak: /** @deprecated use updated token instead **/ var(--color-secondary-default);
229
+ --text-color-weak-hover: /** @deprecated use updated token instead **/ var(--color-secondary-hover);
230
+ --text-color-weak-pressed: /** @deprecated use updated token instead **/ var(--color-secondary-active);
231
+ --text-color-x-weak: /** @deprecated use updated token instead **/ var(--color-secondary-default);
232
+ --text-color-disabled: /** @deprecated use updated token instead **/ var(--color-disabled-default);
233
+ --text-color-negative: /** @deprecated use updated token instead **/ var(--color-error-default);
234
+ --text-color-negative-hover: /** @deprecated use updated token instead **/ var(--color-error-hover);
235
+ --text-color-negative-pressed: /** @deprecated use updated token instead **/ var(--color-error-active);
236
+ --text-color-positive: /** @deprecated use updated token instead **/ var(--color-success-default);
237
+ --text-color-positive-hover: /** @deprecated use updated token instead **/ var(--color-success-hover);
238
+ --text-color-positive-pressed: /** @deprecated use updated token instead **/ var(--color-success-active);
239
+ --text-color-warning: /** @deprecated use updated token instead **/ var(--color-warning-default);
240
+ --text-color-warning-hover: /** @deprecated use updated token instead **/ var(--color-warning-hover);
241
+ --text-color-warning-pressed: /** @deprecated use updated token instead **/ var(--color-warning-active);
242
+ --text-color-interactive: /** @deprecated use updated token instead **/ var(--color-highlight-default);
243
+ --text-color-interactive-hover: /** @deprecated use updated token instead **/ var(--color-highlight-hover);
244
+ --text-color-interactive-pressed: /** @deprecated use updated token instead **/ var(--color-highlight-active);
245
+ --button-background-color: /** @deprecated use updated token instead **/ var(--color-container-secondary-default);
246
+ --button-background-color-hover: /** @deprecated use updated token instead **/ var(
247
+ --color-container-secondary-hover
248
+ );
249
+ --button-background-color-pressed: /** @deprecated use updated token instead **/ var(
250
+ --color-container-secondary-active
251
+ );
252
+ --button-text-color: /** @deprecated use updated token instead **/ var(--color-primary-default);
253
+ --button-icon-color: /** @deprecated use updated token instead **/ var(--color-primary-default);
254
+ --button-border-color: /** @deprecated use updated token instead **/ var(--color-primary-default);
255
+ --button-negative-background-color: /** @deprecated use updated token instead **/ var(
256
+ --color-container-error-default
257
+ );
258
+ --button-negative-background-color-hover: /** @deprecated use updated token instead **/ var(
259
+ --color-container-error-hover
260
+ );
261
+ --button-negative-background-color-pressed: /** @deprecated use updated token instead **/ var(
262
+ --color-container-error-active
263
+ );
264
+ --button-negative-text-color: /** @deprecated use updated token instead **/ var(
265
+ --color-container-error-on-error-container
266
+ );
267
+ --button-negative-icon-color: /** @deprecated use updated token instead **/ var(
268
+ --color-container-error-on-error-container
269
+ );
270
+ --button-negative-border-color: /** @deprecated use updated token instead **/;
271
+ --button-positive-background-color: /** @deprecated use updated token instead **/ var(
272
+ --color-container-success-default
273
+ );
274
+ --button-positive-background-color-hover: /** @deprecated use updated token instead **/ var(
275
+ --color-container-success-hover
276
+ );
277
+ --button-positive-background-color-pressed: /** @deprecated use updated token instead **/ var(
278
+ --color-container-success-active
279
+ );
280
+ --button-positive-text-color: /** @deprecated use updated token instead **/ var(
281
+ --color-container-success-on-success-container
282
+ );
283
+ --button-positive-icon-color: /** @deprecated use updated token instead **/ var(
284
+ --color-container-success-on-success-container
285
+ );
286
+ --button-positive-border-color: /** @deprecated use updated token instead */;
287
+ --button-strong-background-color: /** @deprecated use updated token instead **/ var(--color-primary-default);
288
+ --button-strong-background-color-hover: /** @deprecated use updated token instead **/ var(--color-primary-hover);
289
+ --button-strong-background-color-pressed: /** @deprecated use updated token instead **/ var(--color-primary-active);
290
+ --button-strong-text-color: /** @deprecated use updated token instead **/ var(--color-primary-on-primary);
291
+ --button-strong-icon-color: /** @deprecated use updated token instead **/ var(--color-primary-on-primary);
292
+ --button-strong-border-color: /** @deprecated use updated token instead **/ var(--color-line-mid);
293
+ --button-strong-negative-background-color: /** @deprecated use updated token instead **/ var(--color-error-default);
294
+ --button-strong-negative-background-color-hover: /** @deprecated use updated token instead **/ var(
295
+ --color-error-hover
296
+ );
297
+ --button-strong-negative-background-color-pressed: /** @deprecated use updated token instead **/ var(
298
+ --color-error-active
299
+ );
300
+ --button-strong-negative-text-color: /** @deprecated use updated token instead **/ var(--color-error-on-error);
301
+ --button-strong-negative-icon-color: /** @deprecated use updated token instead **/ var(--color-error-on-error);
302
+ --button-strong-negative-border-color: /** @deprecated use updated token instead **/;
303
+ --button-strong-positive-background-color: /** @deprecated use updated token instead **/ var(
304
+ --color-success-default
305
+ );
306
+ --button-strong-positive-background-color-hover: /** @deprecated use updated token instead **/ var(
307
+ --color-success-hover
308
+ );
309
+ --button-strong-positive-background-color-pressed: /** @deprecated use updated token instead **/ var(
310
+ --color-success-active
311
+ );
312
+ --button-strong-positive-text-color: /** @deprecated use updated token instead **/ var(--color-success-on-success);
313
+ --button-strong-positive-icon-color: /** @deprecated use updated token instead **/ var(--color-success-on-success);
314
+ --button-strong-positive-border-color: /** @deprecated use updated token instead **/;
315
+ --button-danger-background-color: /** @deprecated use updated token instead **/ var(--color-error-default);
316
+ --button-danger-background-color-hover: /** @deprecated use updated token instead **/ var(--color-error-hover);
317
+ --button-danger-background-color-pressed: /** @deprecated use updated token instead **/ var(--color-error-active);
318
+ --button-danger-text-color: /** @deprecated use updated token instead **/ var(--color-error-on-error);
319
+ --button-danger-icon-color: /** @deprecated use updated token instead **/ var(--color-error-on-error);
320
+ --button-danger-border-color: /** @deprecated use updated token instead **/;
321
+ }
package/dist/packages/tokens/fondue-tokens.js CHANGED
@@ -1 +1 @@
1
- export * from "@frontify/fondue-tokens";
1
+
package/dist/packages/tokens/fondue-tokens.umd.cjs CHANGED
@@ -1 +1 @@
1
- (function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("@frontify/fondue-tokens")):typeof define=="function"&&define.amd?define(["exports","@frontify/fondue-tokens"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.FondueTokens={},e.fondueTokens))})(this,function(e,t){"use strict";Object.keys(t).forEach(n=>{n!=="default"&&!Object.prototype.hasOwnProperty.call(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:()=>t[n]})}),Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
1
+ (function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict"});