@frontify/fondue 13.0.0-rc.2 → 13.0.0-rc.3

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 (12) hide show
  1. package/dist/components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/EditLinkModal/EditModal.es.js +8 -8
  2. package/dist/components/RichTextEditor/components/EditorPositioningWrapper/index.es.js +12 -12
  3. package/dist/components/RichTextEditor/components/EditorPositioningWrapper/index.es.js.map +1 -1
  4. package/dist/index.cjs.js +1 -1
  5. package/dist/index.cjs.js.map +1 -1
  6. package/dist/index.umd.js +1 -1
  7. package/dist/index.umd.js.map +1 -1
  8. package/dist/legacyTokens.tailwind.config.js +3 -0
  9. package/dist/packages/tokens/legacy/deprecatedTailwindConfig.ts +7 -1
  10. package/dist/packages/tokens/tailwind/tailwind.config.js +8 -356
  11. package/dist/style.css +1 -1
  12. package/package.json +5 -6
package/dist/legacyTokens.tailwind.config.js CHANGED
@@ -25,6 +25,9 @@ export default {
25
25
  big: '0px 25px 80px 0px rgba(80, 80, 80, 0.20)',
26
26
  none: 'none',
27
27
  },
28
+ ringColor: {
29
+ blue: 'var(--focus-ring-color)',
30
+ },
28
31
  colors: {
29
32
  transparent: 'transparent',
30
33
  current: 'currentColor',
package/dist/packages/tokens/legacy/deprecatedTailwindConfig.ts CHANGED
@@ -3,12 +3,18 @@
3
3
  import defaultColors from 'tailwindcss/colors';
4
4
  import defaultTheme from 'tailwindcss/defaultTheme';
5
5
 
6
+ const entries = Object.entries(Object.getOwnPropertyDescriptors(defaultColors)).filter(([_, descriptor]) => {
7
+ return typeof descriptor.get !== 'function'; // Exclude getters
8
+ });
9
+
10
+ const nonDeprecatedColors = Object.fromEntries(entries.map(([key, descriptor]) => [key, descriptor.value]));
11
+
6
12
  export default {
7
13
  presets: [],
8
14
  theme: {
9
15
  extend: {
10
16
  colors: {
11
- ...defaultColors,
17
+ ...nonDeprecatedColors,
12
18
  base: { DEFAULT: 'var(--color-surface-default)', alt: 'var(--color-surface-dim)' },
13
19
  box: {
14
20
  neutral: 'var(--color-container-secondary-default)',
package/dist/packages/tokens/tailwind/tailwind.config.js CHANGED
@@ -1,359 +1,11 @@
1
1
  import plugin from 'tailwindcss/plugin';
2
2
 
3
3
  export default {
4
- theme: {
5
- colors: {
6
- charts: {
7
- dim: { DEFAULT: 'var(--color-charts-dim-default)' },
8
- missing: { DEFAULT: 'var(--color-charts-missing-default)' },
9
- negative: {
10
- DEFAULT: 'var(--color-charts-negative-default)',
11
- hover: 'var(--color-charts-negative-hover)',
12
- subtle: 'var(--color-charts-negative-subtle)',
13
- },
14
- primary: {
15
- DEFAULT: 'var(--color-charts-primary-default)',
16
- hover: 'var(--color-charts-primary-hover)',
17
- subtle: 'var(--color-charts-primary-subtle)',
18
- },
19
- secondary: {
20
- DEFAULT: 'var(--color-charts-secondary-default)',
21
- hover: 'var(--color-charts-secondary-hover)',
22
- subtle: 'var(--color-charts-secondary-subtle)',
23
- },
24
- tertiary: {
25
- DEFAULT: 'var(--color-charts-tertiary-default)',
26
- hover: 'var(--color-charts-tertiary-hover)',
27
- subtle: 'var(--color-charts-tertiary-subtle)',
28
- },
29
- },
30
- container: {
31
- disabled: {
32
- DEFAULT: 'var(--color-container-disabled-default)',
33
- 'on-disabled-container': 'var(--color-container-disabled-on-disabled-container)',
34
- },
35
- error: {
36
- active: 'var(--color-container-error-active)',
37
- DEFAULT: 'var(--color-container-error-default)',
38
- hover: 'var(--color-container-error-hover)',
39
- 'on-error-container': 'var(--color-container-error-on-error-container)',
40
- },
41
- highlight: {
42
- active: 'var(--color-container-highlight-active)',
43
- DEFAULT: 'var(--color-container-highlight-default)',
44
- hover: 'var(--color-container-highlight-hover)',
45
- 'on-highlight-container': 'var(--color-container-highlight-on-highlight-container)',
46
- },
47
- secondary: {
48
- active: 'var(--color-container-secondary-active)',
49
- DEFAULT: 'var(--color-container-secondary-default)',
50
- hover: 'var(--color-container-secondary-hover)',
51
- 'on-secondary-container': 'var(--color-container-secondary-on-secondary-container)',
52
- 'on-secondary-container-variant': 'var(--color-container-secondary-on-secondary-container-variant)',
53
- },
54
- success: {
55
- active: 'var(--color-container-success-active)',
56
- DEFAULT: 'var(--color-container-success-default)',
57
- hover: 'var(--color-container-success-hover)',
58
- 'on-success-container': 'var(--color-container-success-on-success-container)',
59
- },
60
- warning: {
61
- active: 'var(--color-container-warning-active)',
62
- DEFAULT: 'var(--color-container-warning-default)',
63
- hover: 'var(--color-container-warning-hover)',
64
- 'on-warning-container': 'var(--color-container-warning-on-warning-container)',
65
- },
66
- },
67
- disabled: { DEFAULT: 'var(--color-disabled-default)', 'on-disabled': 'var(--color-disabled-on-disabled)' },
68
- error: {
69
- active: 'var(--color-error-active)',
70
- DEFAULT: 'var(--color-error-default)',
71
- hover: 'var(--color-error-hover)',
72
- 'on-error': 'var(--color-error-on-error)',
73
- },
74
- focus: { contrast: 'var(--color-focus-contrast)', DEFAULT: 'var(--color-focus-default)' },
75
- highlight: {
76
- active: 'var(--color-highlight-active)',
77
- DEFAULT: 'var(--color-highlight-default)',
78
- hover: 'var(--color-highlight-hover)',
79
- 'on-highlight': 'var(--color-highlight-on-highlight)',
80
- },
81
- line: {
82
- mid: 'var(--color-line-mid)',
83
- strong: 'var(--color-line-strong)',
84
- subtle: 'var(--color-line-subtle)',
85
- },
86
- overlay: { DEFAULT: 'var(--color-overlay-default)' },
87
- primary: {
88
- active: 'var(--color-primary-active)',
89
- DEFAULT: 'var(--color-primary-default)',
90
- hover: 'var(--color-primary-hover)',
91
- 'on-primary': 'var(--color-primary-on-primary)',
92
- 'on-primary-variant': 'var(--color-primary-on-primary-variant)',
93
- },
94
- secondary: {
95
- active: 'var(--color-secondary-active)',
96
- DEFAULT: 'var(--color-secondary-default)',
97
- hover: 'var(--color-secondary-hover)',
98
- 'on-secondary': 'var(--color-secondary-on-secondary)',
99
- },
100
- shadow: { DEFAULT: 'var(--color-shadow-default)' },
101
- success: {
102
- active: 'var(--color-success-active)',
103
- DEFAULT: 'var(--color-success-default)',
104
- hover: 'var(--color-success-hover)',
105
- 'on-success': 'var(--color-success-on-success)',
106
- },
107
- surface: {
108
- active: 'var(--color-surface-active)',
109
- DEFAULT: 'var(--color-surface-default)',
110
- dim: 'var(--color-surface-dim)',
111
- hover: 'var(--color-surface-hover)',
112
- },
113
- warning: {
114
- active: 'var(--color-warning-active)',
115
- DEFAULT: 'var(--color-warning-default)',
116
- hover: 'var(--color-warning-hover)',
117
- 'on-warning': 'var(--color-warning-on-warning)',
118
- },
119
- },
120
- fontSize: {
121
- large: 'var(--typography-font-size-large)',
122
- medium: 'var(--typography-font-size-medium)',
123
- small: 'var(--typography-font-size-small)',
124
- 'x-large': 'var(--typography-font-size-x-large)',
125
- 'x-small': 'var(--typography-font-size-x-small)',
126
- 'xx-large': 'var(--typography-font-size-xx-large)',
127
- 'xx-small': 'var(--typography-font-size-xx-small)',
128
- },
129
- fontWeight: {
130
- bold: 'var(--typography-font-weight-bold)',
131
- medium: 'var(--typography-font-weight-medium)',
132
- regular: 'var(--typography-font-weight-regular)',
133
- },
134
- fontFamily: {
135
- monospace: 'var(--typography-font-family-monospace)',
136
- primary: 'var(--typography-font-family-primary)',
137
- },
138
- letterSpacing: {
139
- DEFAULT: 'var(--typography-letter-spacing-default)',
140
- wide: 'var(--typography-letter-spacing-wide)',
141
- },
142
- lineHeight: {
143
- 'extra-loose': 'var(--typography-line-height-extra-loose)',
144
- loose: 'var(--typography-line-height-loose)',
145
- medium: 'var(--typography-line-height-medium)',
146
- tight: 'var(--typography-line-height-tight)',
147
- wide: 'var(--typography-line-height-wide)',
148
- },
149
- borderRadius: {
150
- large: 'var(--border-radius-large)',
151
- medium: 'var(--border-radius-medium)',
152
- small: 'var(--border-radius-small)',
153
- 'x-large': 'var(--border-radius-x-large)',
154
- full: '9999px',
155
- },
156
- borderWidth: { DEFAULT: 'var(--border-width-default)', large: 'var(--border-width-large)' },
157
- outlineColor: { DEFAULT: 'var(--color-focus-default)' },
158
- outlineWidth: { DEFAULT: '4px' },
159
- outlineOffset: { DEFAULT: '2px' },
160
- boxShadow: { big: 'var(--shadow-big)', DEFAULT: 'var(--shadow-default)', mid: 'var(--shadow-mid)' },
161
- extend: {
162
- spacing: {
163
- large: 'var(--spacing-large)',
164
- medium: 'var(--spacing-medium)',
165
- small: 'var(--spacing-small)',
166
- 'x-large': 'var(--spacing-x-large)',
167
- 'x-small': 'var(--spacing-x-small)',
168
- 'xx-large': 'var(--spacing-xx-large)',
169
- 'xx-small': 'var(--spacing-xx-small)',
170
- },
171
- },
172
- },
173
- plugins: [
174
- plugin(function ({ addUtilities }) {
175
- addUtilities({
176
- '.body-large': {
177
- fontFamily: 'var(--typography-font-family-primary)',
178
- fontSize: 'var(--typography-font-size-large)',
179
- fontWeight: 'var(--typography-font-weight-regular)',
180
- textTransform: 'var(--typography-text-transform-default)',
181
- letterSpacing: 'var(--typography-letter-spacing-default)',
182
- lineHeight: 'var(--typography-line-height-wide)',
183
- },
184
- '.body-large-strong': {
185
- fontFamily: 'var(--typography-font-family-primary)',
186
- fontSize: 'var(--typography-font-size-large)',
187
- fontWeight: 'var(--typography-font-weight-medium)',
188
- textTransform: 'var(--typography-text-transform-default)',
189
- letterSpacing: 'var(--typography-letter-spacing-default)',
190
- lineHeight: 'var(--typography-line-height-wide)',
191
- },
192
- '.body-large-x-strong': {
193
- fontFamily: 'var(--typography-font-family-primary)',
194
- fontSize: 'var(--typography-font-size-large)',
195
- fontWeight: 'var(--typography-font-weight-bold)',
196
- textTransform: 'var(--typography-text-transform-default)',
197
- letterSpacing: 'var(--typography-letter-spacing-default)',
198
- lineHeight: 'var(--typography-line-height-wide)',
199
- },
200
- '.body-medium': {
201
- fontFamily: 'var(--typography-font-family-primary)',
202
- fontSize: 'var(--typography-font-size-medium)',
203
- fontWeight: 'var(--typography-font-weight-regular)',
204
- textTransform: 'var(--typography-text-transform-default)',
205
- letterSpacing: 'var(--typography-letter-spacing-default)',
206
- lineHeight: 'var(--typography-line-height-medium)',
207
- },
208
- '.body-medium-strong': {
209
- fontFamily: 'var(--typography-font-family-primary)',
210
- fontSize: 'var(--typography-font-size-medium)',
211
- fontWeight: 'var(--typography-font-weight-medium)',
212
- textTransform: 'var(--typography-text-transform-default)',
213
- letterSpacing: 'var(--typography-letter-spacing-default)',
214
- lineHeight: 'var(--typography-line-height-medium)',
215
- },
216
- '.body-medium-x-strong': {
217
- fontFamily: 'var(--typography-font-family-primary)',
218
- fontSize: 'var(--typography-font-size-medium)',
219
- fontWeight: 'var(--typography-font-weight-bold)',
220
- textTransform: 'var(--typography-text-transform-default)',
221
- letterSpacing: 'var(--typography-letter-spacing-default)',
222
- lineHeight: 'var(--typography-line-height-medium)',
223
- },
224
- '.body-small': {
225
- fontFamily: 'var(--typography-font-family-primary)',
226
- fontSize: 'var(--typography-font-size-small)',
227
- fontWeight: 'var(--typography-font-weight-regular)',
228
- textTransform: 'var(--typography-text-transform-default)',
229
- letterSpacing: 'var(--typography-letter-spacing-default)',
230
- lineHeight: 'var(--typography-line-height-tight)',
231
- },
232
- '.body-small-strong': {
233
- fontFamily: 'var(--typography-font-family-primary)',
234
- fontSize: 'var(--typography-font-size-small)',
235
- fontWeight: 'var(--typography-font-weight-medium)',
236
- textTransform: 'var(--typography-text-transform-default)',
237
- letterSpacing: 'var(--typography-letter-spacing-default)',
238
- lineHeight: 'var(--typography-line-height-tight)',
239
- },
240
- '.body-small-x-strong': {
241
- fontFamily: 'var(--typography-font-family-primary)',
242
- fontSize: 'var(--typography-font-size-small)',
243
- fontWeight: 'var(--typography-font-weight-bold)',
244
- textTransform: 'var(--typography-text-transform-default)',
245
- letterSpacing: 'var(--typography-letter-spacing-default)',
246
- lineHeight: 'var(--typography-line-height-tight)',
247
- },
248
- '.body-x-small': {
249
- fontFamily: 'var(--typography-font-family-primary)',
250
- fontSize: 'var(--typography-font-size-x-small)',
251
- fontWeight: 'var(--typography-font-weight-regular)',
252
- textTransform: 'var(--typography-text-transform-default)',
253
- letterSpacing: 'var(--typography-letter-spacing-default)',
254
- lineHeight: 'var(--typography-line-height-tight)',
255
- },
256
- '.body-x-small-strong': {
257
- fontFamily: 'var(--typography-font-family-primary)',
258
- fontSize: 'var(--typography-font-size-x-small)',
259
- fontWeight: 'var(--typography-font-weight-medium)',
260
- textTransform: 'var(--typography-text-transform-default)',
261
- letterSpacing: 'var(--typography-letter-spacing-default)',
262
- lineHeight: 'var(--typography-line-height-tight)',
263
- },
264
- '.body-x-small-x-strong': {
265
- fontFamily: 'var(--typography-font-family-primary)',
266
- fontSize: 'var(--typography-font-size-x-small)',
267
- fontWeight: 'var(--typography-font-weight-bold)',
268
- textTransform: 'var(--typography-text-transform-default)',
269
- letterSpacing: 'var(--typography-letter-spacing-default)',
270
- lineHeight: 'var(--typography-line-height-tight)',
271
- },
272
- '.heading-category': {
273
- fontFamily: 'var(--typography-font-family-primary)',
274
- fontSize: 'var(--typography-font-size-xx-small)',
275
- fontWeight: 'var(--typography-font-weight-medium)',
276
- textTransform: 'var(--typography-text-transform-uppercase)',
277
- letterSpacing: 'var(--typography-letter-spacing-wide)',
278
- lineHeight: 'var(--typography-line-height-tight)',
279
- },
280
- '.heading-category-strong': {
281
- fontFamily: 'var(--typography-font-family-primary)',
282
- fontSize: 'var(--typography-font-size-xx-small)',
283
- fontWeight: 'var(--typography-font-weight-bold)',
284
- textTransform: 'var(--typography-text-transform-uppercase)',
285
- letterSpacing: 'var(--typography-letter-spacing-wide)',
286
- lineHeight: 'var(--typography-line-height-tight)',
287
- },
288
- '.heading-large': {
289
- fontFamily: 'var(--typography-font-family-primary)',
290
- fontSize: 'var(--typography-font-size-large)',
291
- fontWeight: 'var(--typography-font-weight-medium)',
292
- textTransform: 'var(--typography-text-transform-default)',
293
- letterSpacing: 'var(--typography-letter-spacing-default)',
294
- lineHeight: 'var(--typography-line-height-wide)',
295
- },
296
- '.heading-large-strong': {
297
- fontFamily: 'var(--typography-font-family-primary)',
298
- fontSize: 'var(--typography-font-size-large)',
299
- fontWeight: 'var(--typography-font-weight-bold)',
300
- textTransform: 'var(--typography-text-transform-default)',
301
- letterSpacing: 'var(--typography-letter-spacing-default)',
302
- lineHeight: 'var(--typography-line-height-wide)',
303
- },
304
- '.heading-medium': {
305
- fontFamily: 'var(--typography-font-family-primary)',
306
- fontSize: 'var(--typography-font-size-medium)',
307
- fontWeight: 'var(--typography-font-weight-medium)',
308
- textTransform: 'var(--typography-text-transform-default)',
309
- letterSpacing: 'var(--typography-letter-spacing-default)',
310
- lineHeight: 'var(--typography-line-height-tight)',
311
- },
312
- '.heading-medium-strong': {
313
- fontFamily: 'var(--typography-font-family-primary)',
314
- fontSize: 'var(--typography-font-size-medium)',
315
- fontWeight: 'var(--typography-font-weight-bold)',
316
- textTransform: 'var(--typography-text-transform-default)',
317
- letterSpacing: 'var(--typography-letter-spacing-default)',
318
- lineHeight: 'var(--typography-line-height-tight)',
319
- },
320
- '.heading-x-large': {
321
- fontFamily: 'var(--typography-font-family-primary)',
322
- fontSize: 'var(--typography-font-size-x-large)',
323
- fontWeight: 'var(--typography-font-weight-medium)',
324
- textTransform: 'var(--typography-text-transform-default)',
325
- letterSpacing: 'var(--typography-letter-spacing-default)',
326
- lineHeight: 'var(--typography-line-height-loose)',
327
- },
328
- '.heading-x-large-strong': {
329
- fontFamily: 'var(--typography-font-family-primary)',
330
- fontSize: 'var(--typography-font-size-x-large)',
331
- fontWeight: 'var(--typography-font-weight-bold)',
332
- textTransform: 'var(--typography-text-transform-default)',
333
- letterSpacing: 'var(--typography-letter-spacing-default)',
334
- lineHeight: 'var(--typography-line-height-loose)',
335
- },
336
- '.heading-xx-large': {
337
- fontFamily: 'var(--typography-font-family-primary)',
338
- fontSize: 'var(--typography-font-size-xx-large)',
339
- fontWeight: 'var(--typography-font-weight-medium)',
340
- textTransform: 'var(--typography-text-transform-default)',
341
- letterSpacing: 'var(--typography-letter-spacing-default)',
342
- lineHeight: 'var(--typography-line-height-extra-loose)',
343
- },
344
- '.heading-xx-large-strong': {
345
- fontFamily: 'var(--typography-font-family-primary)',
346
- fontSize: 'var(--typography-font-size-xx-large)',
347
- fontWeight: 'var(--typography-font-weight-bold)',
348
- textTransform: 'var(--typography-text-transform-default)',
349
- letterSpacing: 'var(--typography-letter-spacing-default)',
350
- lineHeight: 'var(--typography-line-height-extra-loose)',
351
- },
352
- '.ring-focus': {
353
- boxShadow: '0 0 0 2px var(--color-surface-default), 0 0 0 6px var(--color-focus-default)',
354
- outline: 'none',
355
- },
356
- });
357
- }),
358
- ],
359
- };
4
+ theme: {"colors":{"charts":{"dim":{"DEFAULT":"var(--color-charts-dim-default)"},"missing":{"DEFAULT":"var(--color-charts-missing-default)"},"negative":{"DEFAULT":"var(--color-charts-negative-default)","hover":"var(--color-charts-negative-hover)","subtle":"var(--color-charts-negative-subtle)"},"primary":{"DEFAULT":"var(--color-charts-primary-default)","hover":"var(--color-charts-primary-hover)","subtle":"var(--color-charts-primary-subtle)"},"secondary":{"DEFAULT":"var(--color-charts-secondary-default)","hover":"var(--color-charts-secondary-hover)","subtle":"var(--color-charts-secondary-subtle)"},"tertiary":{"DEFAULT":"var(--color-charts-tertiary-default)","hover":"var(--color-charts-tertiary-hover)","subtle":"var(--color-charts-tertiary-subtle)"}},"container":{"disabled":{"DEFAULT":"var(--color-container-disabled-default)","on-disabled-container":"var(--color-container-disabled-on-disabled-container)"},"error":{"active":"var(--color-container-error-active)","DEFAULT":"var(--color-container-error-default)","hover":"var(--color-container-error-hover)","on-error-container":"var(--color-container-error-on-error-container)"},"highlight":{"active":"var(--color-container-highlight-active)","DEFAULT":"var(--color-container-highlight-default)","hover":"var(--color-container-highlight-hover)","on-highlight-container":"var(--color-container-highlight-on-highlight-container)"},"secondary":{"active":"var(--color-container-secondary-active)","DEFAULT":"var(--color-container-secondary-default)","hover":"var(--color-container-secondary-hover)","on-secondary-container":"var(--color-container-secondary-on-secondary-container)","on-secondary-container-variant":"var(--color-container-secondary-on-secondary-container-variant)"},"success":{"active":"var(--color-container-success-active)","DEFAULT":"var(--color-container-success-default)","hover":"var(--color-container-success-hover)","on-success-container":"var(--color-container-success-on-success-container)"},"warning":{"active":"var(--color-container-warning-active)","DEFAULT":"var(--color-container-warning-default)","hover":"var(--color-container-warning-hover)","on-warning-container":"var(--color-container-warning-on-warning-container)"}},"disabled":{"DEFAULT":"var(--color-disabled-default)","on-disabled":"var(--color-disabled-on-disabled)"},"error":{"active":"var(--color-error-active)","DEFAULT":"var(--color-error-default)","hover":"var(--color-error-hover)","on-error":"var(--color-error-on-error)"},"focus":{"contrast":"var(--color-focus-contrast)","DEFAULT":"var(--color-focus-default)"},"highlight":{"active":"var(--color-highlight-active)","DEFAULT":"var(--color-highlight-default)","hover":"var(--color-highlight-hover)","on-highlight":"var(--color-highlight-on-highlight)"},"line":{"mid":"var(--color-line-mid)","strong":"var(--color-line-strong)","subtle":"var(--color-line-subtle)"},"overlay":{"DEFAULT":"var(--color-overlay-default)"},"primary":{"active":"var(--color-primary-active)","DEFAULT":"var(--color-primary-default)","hover":"var(--color-primary-hover)","on-primary":"var(--color-primary-on-primary)","on-primary-variant":"var(--color-primary-on-primary-variant)"},"secondary":{"active":"var(--color-secondary-active)","DEFAULT":"var(--color-secondary-default)","hover":"var(--color-secondary-hover)","on-secondary":"var(--color-secondary-on-secondary)"},"shadow":{"DEFAULT":"var(--color-shadow-default)"},"success":{"active":"var(--color-success-active)","DEFAULT":"var(--color-success-default)","hover":"var(--color-success-hover)","on-success":"var(--color-success-on-success)"},"surface":{"active":"var(--color-surface-active)","DEFAULT":"var(--color-surface-default)","dim":"var(--color-surface-dim)","hover":"var(--color-surface-hover)"},"warning":{"active":"var(--color-warning-active)","DEFAULT":"var(--color-warning-default)","hover":"var(--color-warning-hover)","on-warning":"var(--color-warning-on-warning)"}},"fontSize":{"large":"var(--typography-font-size-large)","medium":"var(--typography-font-size-medium)","small":"var(--typography-font-size-small)","x-large":"var(--typography-font-size-x-large)","x-small":"var(--typography-font-size-x-small)","xx-large":"var(--typography-font-size-xx-large)","xx-small":"var(--typography-font-size-xx-small)"},"fontWeight":{"bold":"var(--typography-font-weight-bold)","medium":"var(--typography-font-weight-medium)","regular":"var(--typography-font-weight-regular)"},"fontFamily":{"monospace":"var(--typography-font-family-monospace)","primary":"var(--typography-font-family-primary)"},"letterSpacing":{"DEFAULT":"var(--typography-letter-spacing-default)","wide":"var(--typography-letter-spacing-wide)"},"lineHeight":{"extra-loose":"var(--typography-line-height-extra-loose)","loose":"var(--typography-line-height-loose)","medium":"var(--typography-line-height-medium)","tight":"var(--typography-line-height-tight)","wide":"var(--typography-line-height-wide)"},"borderRadius":{"large":"var(--border-radius-large)","medium":"var(--border-radius-medium)","small":"var(--border-radius-small)","x-large":"var(--border-radius-x-large)","DEFAULT":"var(--border-radius-medium)","full":"9999px"},"borderWidth":{"DEFAULT":"var(--border-width-default)","large":"var(--border-width-large)"},"outlineColor":{"DEFAULT":"var(--color-focus-default)"},"outlineWidth":{"DEFAULT":"4px"},"outlineOffset":{"DEFAULT":"2px"},"boxShadow":{"big":"var(--shadow-big)","DEFAULT":"var(--shadow-default)","mid":"var(--shadow-mid)"},"extend":{"spacing":{"large":"var(--spacing-large)","medium":"var(--spacing-medium)","small":"var(--spacing-small)","x-large":"var(--spacing-x-large)","x-small":"var(--spacing-x-small)","xx-large":"var(--spacing-xx-large)","xx-small":"var(--spacing-xx-small)"}}},
5
+ plugins: [plugin(function({ addUtilities }) {
6
+ addUtilities({
7
+ '.body-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-large-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.body-medium': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-medium-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-medium-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-medium)" }, '.body-small': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-small-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-small-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-regular)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.body-x-small-x-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-category': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-small)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-uppercase)", letterSpacing: "var(--typography-letter-spacing-wide)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-category-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-small)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-uppercase)", letterSpacing: "var(--typography-letter-spacing-wide)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.heading-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-wide)" }, '.heading-medium': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-medium-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-medium)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-tight)" }, '.heading-x-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-loose)" }, '.heading-x-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-x-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-loose)" }, '.heading-xx-large': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-large)", fontWeight: "var(--typography-font-weight-medium)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-extra-loose)" }, '.heading-xx-large-strong': { fontFamily: "var(--typography-font-family-primary)", fontSize: "var(--typography-font-size-xx-large)", fontWeight: "var(--typography-font-weight-bold)", textTransform: "var(--typography-text-transform-default)", letterSpacing: "var(--typography-letter-spacing-default)", lineHeight: "var(--typography-line-height-extra-loose)" },
8
+ '.ring-focus': {boxShadow: '0 0 0 2px var(--color-surface-default), 0 0 0 6px var(--color-focus-default)',outline: 'none',}
9
+ })
10
+ })],
11
+ };