@frontify/fondue 12.10.3 → 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/tools/tools/replacements.ts ADDED
@@ -0,0 +1,422 @@
1
+ /* (c) Copyright Frontify Ltd., all rights reserved. */
2
+
3
+ export const cssVariableReplacements = {
4
+ 'var(--base-color)': 'var(--color-surface-default)',
5
+ 'var(--base-color-alt)': 'var(--color-surface-dim)',
6
+ 'var(--body-family)': 'var(--typography-font-family-primary)',
7
+ 'var(--body-family-stack)': 'var(--body-family)',
8
+ 'var(--body-weight-name)': 'var(--typography-font-weight-regular)',
9
+ 'var(--body-weight-number)': 'var(--typography-font-weight-regular)',
10
+ 'var(--body-weight-strong-name)': 'var(--typography-font-weight-medium)',
11
+ 'var(--body-weight-strong-number)': 'var(--typography-font-weight-medium)',
12
+ 'var(--body-weight-x-strong-name)': 'var(--typography-font-weight-bold)',
13
+ 'var(--body-weight-x-strong-number)': 'var(--typography-font-weight-bold)',
14
+ 'var(--body-size-x-small)': 'var(--typography-font-size-x-small)',
15
+ 'var(--body-size-x-small-line-height)': 'var(--typography-line-height-tight)',
16
+ 'var(--body-size-small)': 'var(--typography-font-size-small)',
17
+ 'var(--body-size-small-line-height)': 'var(--typography-line-height-tight)',
18
+ 'var(--body-size-medium)': 'var(--typography-font-size-medium)',
19
+ 'var(--body-size-medium-line-height)': 'var(--typography-line-height-medium)',
20
+ 'var(--body-size-large)': 'var(--typography-font-size-large)',
21
+ 'var(--body-size-large-line-height)': 'var(--typography-line-height-wide)',
22
+ 'var(--box-neutral-color)': 'var(--color-container-secondary-default)',
23
+ 'var(--box-neutral-color-hover)': 'var(--color-container-secondary-hover)',
24
+ 'var(--box-neutral-color-pressed)': 'var(--color-container-secondary-active)',
25
+ 'var(--box-neutral-inverse-color)': 'var(--color-container-secondary-on-secondary-container)',
26
+ 'var(--box-neutral-inverse-color-hover)': 'var(--color-container-secondary-on-secondary-container)',
27
+ 'var(--box-neutral-inverse-color-pressed)': 'var(--color-container-secondary-on-secondary-container)',
28
+ 'var(--box-neutral-strong-color)': 'var(--color-primary-default)',
29
+ 'var(--box-neutral-strong-color-hover)': 'var(--color-primary-hover)',
30
+ 'var(--box-neutral-strong-color-pressed)': 'var(--color-primary-active)',
31
+ 'var(--box-neutral-strong-inverse-color)': 'var(--color-primary-on-primary)',
32
+ 'var(--box-neutral-strong-inverse-color-hover)': 'var(--color-primary-on-primary)',
33
+ 'var(--box-neutral-strong-inverse-color-pressed)': 'var(--color-primary-on-primary)',
34
+ 'var(--box-neutral-mighty-color)': 'var(--color-primary-default)',
35
+ 'var(--box-neutral-mighty-color-hover)': 'var(--color-primary-hover)',
36
+ 'var(--box-neutral-mighty-color-pressed)': 'var(--color-primary-active)',
37
+ 'var(--box-neutral-mighty-inverse-color)': 'var(--color-primary-on-primary)',
38
+ 'var(--box-neutral-mighty-inverse-color-hover)': 'var(--color-primary-on-primary)',
39
+ 'var(--box-neutral-mighty-inverse-color-pressed)': 'var(--color-primary-on-primary)',
40
+ 'var(--box-selected-color)': 'var(--color-container-highlight-default)',
41
+ 'var(--box-selected-color-hover)': 'var(--color-container-highlight-hover)',
42
+ 'var(--box-selected-color-pressed)': 'var(--color-container-highlight-active)',
43
+ 'var(--box-selected-inverse-color)': 'var(--color-container-highlight-on-highlight-container)',
44
+ 'var(--box-selected-inverse-color-hover)': 'var(--color-container-highlight-on-highlight-container)',
45
+ 'var(--box-selected-inverse-color-pressed)': 'var(--color-container-highlight-on-highlight-container)',
46
+ 'var(--box-selected-strong-color)': 'var(--color-highlight-default)',
47
+ 'var(--box-selected-strong-color-hover)': 'var(--color-highlight-hover)',
48
+ 'var(--box-selected-strong-color-pressed)': 'var(--color-highlight-active)',
49
+ 'var(--box-selected-strong-inverse-color)': 'var(--color-highlight-on-highlight)',
50
+ 'var(--box-selected-strong-inverse-color-hover)': 'var(--color-highlight-on-highlight)',
51
+ 'var(--box-selected-strong-inverse-color-pressed)': 'var(--color-highlight-on-highlight)',
52
+ 'var(--box-disabled-color)': 'var(--color-container-disabled-default)',
53
+ 'var(--box-disabled-color-inverse)': 'var(--color-container-disabled-on-disabled)',
54
+ 'var(--box-disabled-strong-color)': 'var(--color-disabled-default)',
55
+ 'var(--box-disabled-strong-color-inverse)': 'var(--color-disabled-on-disabled)',
56
+ 'var(--box-positive-color)': 'var(--color-container-success-default)',
57
+ 'var(--box-positive-color-hover)': 'var(--color-container-success-hover)',
58
+ 'var(--box-positive-color-pressed)': 'var(--color-container-success-active)',
59
+ 'var(--box-positive-inverse-color)': 'var(--color-container-success-on-success-container)',
60
+ 'var(--box-positive-inverse-color-hover)': 'var(--color-container-success-on-success-container)',
61
+ 'var(--box-positive-inverse-color-pressed)': 'var(--color-container-success-on-success-container)',
62
+ 'var(--box-positive-strong-color)': 'var(--color-success-default)',
63
+ 'var(--box-positive-strong-color-hover)': 'var(--color-success-hover)',
64
+ 'var(--box-positive-strong-color-pressed)': 'var(--color-success-active)',
65
+ 'var(--box-positive-strong-inverse-color)': 'var(--color-success-on-success)',
66
+ 'var(--box-positive-strong-inverse-color-hover)': 'var(--color-success-on-success)',
67
+ 'var(--box-positive-strong-inverse-color-pressed)': 'var(--color-success-on-success)',
68
+ 'var(--box-negative-color)': 'var(--color-container-error-default)',
69
+ 'var(--box-negative-color-hover)': 'var(--color-container-error-hover)',
70
+ 'var(--box-negative-color-pressed)': 'var(--color-container-error-active)',
71
+ 'var(--box-negative-inverse-color)': 'var(--color-container-error-on-error-container)',
72
+ 'var(--box-negative-inverse-color-hover)': 'var(--color-container-error-on-error-container)',
73
+ 'var(--box-negative-inverse-color-pressed)': 'var(--color-container-error-on-error-container)',
74
+ 'var(--box-negative-strong-color)': 'var(--color-error-default)',
75
+ 'var(--box-negative-strong-color-hover)': 'var(--color-error-hover)',
76
+ 'var(--box-negative-strong-color-pressed)': 'var(--color-error-active)',
77
+ 'var(--box-negative-strong-inverse-color)': 'var(--color-error-on-error)',
78
+ 'var(--box-negative-strong-inverse-color-hover)': 'var(--color-error-on-error)',
79
+ 'var(--box-negative-strong-inverse-color-pressed)': 'var(--color-error-on-error)',
80
+ 'var(--box-warning-color)': 'var(--color-container-warning-default)',
81
+ 'var(--box-warning-color-hover)': 'var(--color-container-warning-hover)',
82
+ 'var(--box-warning-color-pressed)': 'var(--color-container-warning-active)',
83
+ 'var(--box-warning-inverse-color)': 'var(--color-container-warning-on-warning-container)',
84
+ 'var(--box-warning-inverse-color-hover)': 'var(--color-container-warning-on-warning-container)',
85
+ 'var(--box-warning-inverse-color-pressed)': 'var(--color-container-warning-on-warning-container)',
86
+ 'var(--box-warning-strong-color)': 'var(--color-warning-default)',
87
+ 'var(--box-warning-strong-color-hover)': 'var(--color-warning-hover)',
88
+ 'var(--box-warning-strong-color-pressed)': 'var(--color-warning-active)',
89
+ 'var(--box-warning-strong-inverse-color)': 'var(--color-warning-on-warning)',
90
+ 'var(--box-warning-strong-inverse-color-hover)': 'var(--color-warning-on-warning)',
91
+ 'var(--box-warning-strong-inverse-color-pressed)': 'var(--color-warning-on-warning)',
92
+ 'var(--code-family)': 'var(--typography-font-family-monoe)',
93
+ 'var(--code-family-stack)': 'var(--typography-font-family-monospace)',
94
+ 'var(--code-weight-name)': 'var(--typography-font-weight-regular)',
95
+ 'var(--code-weight-number)': 'var(--typography-font-weight-regular)',
96
+ 'var(--code-weight-strong-name)': 'var(--typography-font-weight-bold)',
97
+ 'var(--code-weight-strong-number)': 'var(--typography-font-weight-bold)',
98
+ 'var(--focus-ring-color)': 'var(--color-focus-default)',
99
+ 'var(--heading-family)': 'var(--typography-font-family-primary)',
100
+ 'var(--heading-family-stack)': 'var(--typography-font-family-primary)',
101
+ 'var(--heading-weight-name)': 'var(--typography-font-weight-medium)',
102
+ 'var(--heading-weight-number)': 'var(--typography-font-weight-medium)',
103
+ 'var(--heading-weight-strong-name)': 'var(--typography-font-weight-bold)',
104
+ 'var(--heading-weight-strong-number)': 'var(--typography-font-weight-bold)',
105
+ 'var(--heading-size-medium)': 'var(--typography-font-size-medium)',
106
+ 'var(--heading-size-medium-line-height)': 'var(--typography-line-height-tight)',
107
+ 'var(--heading-size-large)': 'var(--typography-font-size-large)',
108
+ 'var(--heading-size-large-line-height)': 'var(--typography-line-height-wide)',
109
+ 'var(--heading-size-x-large)': 'var(--typography-font-size-x-large)',
110
+ 'var(--heading-size-x-large-line-height)': 'var(--typography-line-height-loose)',
111
+ 'var(--heading-size-xx-large)': 'var(--typography-font-size-xx-large)',
112
+ 'var(--heading-size-xx-large-line-height)': 'var(--typography-line-height-extra-loose)',
113
+ 'var(--line-color)': 'var(--color-line-mid)',
114
+ 'var(--line-color-weak)': 'var(--color-line-subtle)',
115
+ 'var(--line-color-strong)': 'var(--color-line-strong)',
116
+ 'var(--line-color-x-strong)': 'var(--color-line-strong)',
117
+ 'var(--line-color-xx-strong)': 'var(--color-line-strong)',
118
+ 'var(--line-color-mighty)': 'var(--color-line-mid)',
119
+ 'var(--line-width)': 'var(--border-width-default)',
120
+ 'var(--line-width-large)': 'var(--border-width-large)',
121
+ 'var(--overlay-color)': 'var(--color-overlay)',
122
+ 'var(--radius)': 'var(--border-radius-medium)',
123
+ 'var(--radius-small)': 'var(--border-radius-small)',
124
+ 'var(--radius-large)': 'var(--border-radius-large)',
125
+ 'var(--radius-x-large)': 'var(--border-radius-x-large)',
126
+ 'var(--shadow-matrix)': 'var(--shadow-default)',
127
+ 'var(--shadow-top-matrix)': 'var(--shadow-default)',
128
+ 'var(--shadow-bottom-matrix)': 'var(--shadow-default)',
129
+ 'var(--shadow-large-matrix)': 'var(--shadow-default)',
130
+ 'var(--shadow-large-color)': 'var(--color-shadow-default)',
131
+ 'var(--space-xxs)': 'var(--spacing-xx-small)',
132
+ 'var(--space-xs)': 'var(--spacing-x-small)',
133
+ 'var(--space-s)': 'var(--spacing-small)',
134
+ 'var(--space-m)': 'var(--spacing-medium)',
135
+ 'var(--space-l)': 'var(--spacing-large)',
136
+ 'var(--space-xl)': 'var(--spacing-x-large)',
137
+ 'var(--space-xxl)': 'var(--spacing-xx-large)',
138
+ 'var(--text-color)': 'var(--color-primary-default)',
139
+ 'var(--text-color-hover)': 'var(--color-primary-hover)',
140
+ 'var(--text-color-pressed)': 'var(--color-primary-active)',
141
+ 'var(--text-color-weak)': 'var(--color-secondary-default)',
142
+ 'var(--text-color-weak-hover)': 'var(--color-secondary-hover)',
143
+ 'var(--text-color-weak-pressed)': 'var(--color-secondary-active)',
144
+ 'var(--text-color-x-weak)': 'var(--color-secondary-default)',
145
+ 'var(--text-color-disabled)': 'var(--color-disabled-default)',
146
+ 'var(--text-color-negative)': 'var(--color-error-default)',
147
+ 'var(--text-color-negative-hover)': 'var(--color-error-hover)',
148
+ 'var(--text-color-negative-pressed)': 'var(--color-error-active)',
149
+ 'var(--text-color-positive)': 'var(--color-success-default)',
150
+ 'var(--text-color-positive-hover)': 'var(--color-success-hover)',
151
+ 'var(--text-color-positive-pressed)': 'var(--color-success-active)',
152
+ 'var(--text-color-warning)': 'var(--color-warning-default)',
153
+ 'var(--text-color-warning-hover)': 'var(--color-warning-hover)',
154
+ 'var(--text-color-warning-pressed)': 'var(--color-warning-active)',
155
+ 'var(--text-color-interactive)': 'var(--color-highlight-default)',
156
+ 'var(--text-color-interactive-hover)': 'var(--color-highlight-hover)',
157
+ 'var(--text-color-interactive-pressed)': 'var(--color-highlight-active)',
158
+ 'var(--button-background-color)': 'var(--color-container-secondary-default)',
159
+ 'var(--button-background-color-hover)': 'var(--color-container-secondary-hover)',
160
+ 'var(--button-background-color-pressed)': 'var(--color-container-secondary-active)',
161
+ 'var(--button-text-color)': 'var(--color-primary-default)',
162
+ 'var(--button-icon-color)': 'var(--color-primary-default)',
163
+ 'var(--button-border-color)': 'var(--color-primary-default)',
164
+ 'var(--button-negative-background-color)': 'var(--color-container-error-default)',
165
+ 'var(--button-negative-background-color-hover)': 'var(--color-container-error-hover)',
166
+ 'var(--button-negative-background-color-pressed)': 'var(--color-container-error-active)',
167
+ 'var(--button-negative-text-color)': 'var(--color-container-error-on-error-container)',
168
+ 'var(--button-negative-icon-color)': 'var(--color-container-error-on-error-container)',
169
+ 'var(--button-positive-background-color)': 'var(--color-container-success-default)',
170
+ 'var(--button-positive-background-color-hover)': 'var(--color-container-success-hover)',
171
+ 'var(--button-positive-background-color-pressed)': 'var(--color-container-success-active)',
172
+ 'var(--button-positive-text-color)': 'var(--color-container-success-on-success-container)',
173
+ 'var(--button-positive-icon-color)': 'var(--color-container-success-on-success-container)',
174
+ 'var(--button-strong-background-color)': 'var(--color-primary-default)',
175
+ 'var(--button-strong-background-color-hover)': 'var(--color-primary-hover)',
176
+ 'var(--button-strong-background-color-pressed)': 'var(--color-primary-active)',
177
+ 'var(--button-strong-text-color)': 'var(--color-primary-on-primary)',
178
+ 'var(--button-strong-icon-color)': 'var(--color-primary-on-primary)',
179
+ 'var(--button-strong-negative-background-color)': 'var(--color-error-default)',
180
+ 'var(--button-strong-negative-background-color-hover)': 'var(--color-error-hover)',
181
+ 'var(--button-strong-negative-background-color-pressed)': 'var(--color-error-active)',
182
+ 'var(--button-strong-negative-text-color)': 'var(--color-error-on-error)',
183
+ 'var(--button-strong-negative-icon-color)': 'var(--color-error-on-error)',
184
+ 'var(--button-strong-positive-background-color)': 'var(--color-success-default)',
185
+ 'var(--button-strong-positive-background-color-hover)': 'var(--color-success-hover)',
186
+ 'var(--button-strong-positive-background-color-pressed)': 'var(--color-success-active)',
187
+ 'var(--button-strong-positive-text-color)': 'var(--color-success-on-success)',
188
+ 'var(--button-strong-positive-icon-color)': 'var(--color-success-on-success)',
189
+ 'var(--button-danger-background-color)': 'var(--color-error-default)',
190
+ 'var(--button-danger-background-color-hover)': 'var(--color-error-hover)',
191
+ 'var(--button-danger-background-color-pressed)': 'var(--color-error-active)',
192
+ 'var(--button-danger-text-color)': 'var(--color-error-on-error)',
193
+ 'var(--button-danger-icon-color)': 'var(--color-error-on-error)',
194
+ 'var(--code-size-small)': 'var(--typography-font-size-small)',
195
+ 'var(--code-size-small-line-height)': 'var(--typography-line-height-tight)',
196
+ 'var(--code-size-medium)': 'var(--typography-font-size-medium)',
197
+ 'var(--code-size-medium-line-height)': 'var(--typography-line-height-medium)',
198
+ 'var(--code-size-large)': 'var(--typography-font-size-large)',
199
+ 'var(--code-size-large-line-height)': 'var(--typography-line-height-wide)',
200
+ 'var(--button-danger-border-color)': 'var(--color-line-mid)',
201
+ 'var(--button-strong-positive-border-color)': 'var(--color-line-mid)',
202
+ 'var(--button-strong-negative-border-color)': 'var(--color-line-mid)',
203
+ 'var(--button-strong-border-color)': 'var(--color-line-mid)',
204
+ 'var(--button-positive-border-color)': 'var(--color-line-mid)',
205
+ 'var(--button-negative-border-color)': 'var(--color-line-mid)',
206
+ };
207
+
208
+ export const deprecatedCssVariables = {
209
+ 'var(--shadow-large-offset-x)': '/** @deprecated use updated token instead **/',
210
+ 'var(--shadow-large-offset-y)': '/** @deprecated use updated token instead **/',
211
+ 'var(--shadow-large-spread)': '/** @deprecated use updated token instead **/',
212
+ 'var(--shadow-large-blur)': '/** @deprecated use updated token instead **/',
213
+ 'var(--shadow-bottom-offset-x)': '/** @deprecated use updated token instead **/',
214
+ 'var(--shadow-bottom-offset-y)': '/** @deprecated use updated token instead **/',
215
+ 'var(--shadow-bottom-spread)': '/** @deprecated use updated token instead **/',
216
+ 'var(--shadow-top-offset-x)': '/** @deprecated use updated token instead **/',
217
+ 'var(--shadow-top-offset-y)': '/** @deprecated use updated token instead **/',
218
+ 'var(--shadow-top-spread)': '/** @deprecated use updated token instead **/',
219
+ 'var(--shadow-offset-x)': '/** @deprecated use updated token instead **/',
220
+ 'var(--shadow-offset-y)': '/** @deprecated use updated token instead **/',
221
+ 'var(--shadow-spread)': '/** @deprecated use updated token instead **/',
222
+ 'var(--shadow-blur)': '/** @deprecated use updated token instead **/',
223
+ 'var(--shadow-color)': '/** @deprecated use updated token instead **/',
224
+ };
225
+
226
+ const tailwindColorReplacements = {
227
+ 'tw-([^-]+)-base(?![a-zA-Z0-9-])': 'tw-$1-surface',
228
+ 'tw-([^-]+)-base-alt(?![a-zA-Z0-9-])': 'tw-$1-surface-dim',
229
+ 'tw-([^-]+)-box-neutral(?![a-zA-Z0-9-])': 'tw-$1-container-secondary',
230
+ 'tw-([^-]+)-box-neutral-hover(?![a-zA-Z0-9-])': 'tw-$1-container-secondary-hover',
231
+ 'tw-([^-]+)-box-neutral-pressed(?![a-zA-Z0-9-])': 'tw-$1-container-secondary-active',
232
+ 'tw-([^-]+)-box-neutral-inverse(?![a-zA-Z0-9-])': 'tw-$1-container-secondary-on-secondary-container',
233
+ 'tw-([^-]+)-box-neutral-inverse-hover(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-secondary-on-secondary-container',
234
+ 'tw-([^-]+)-box-neutral-inverse-pressed(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-secondary-on-secondary-container',
235
+ 'tw-([^-]+)-box-neutral-strong(?![a-zA-Z0-9-])': 'tw-$1-primary',
236
+ 'tw-([^-]+)-box-neutral-strong-hover(?![a-zA-Z0-9-])': 'tw-$1-primary-hover',
237
+ 'tw-([^-]+)-box-neutral-strong-pressed(?![a-zA-Z0-9-])': 'tw-$1-primary-active',
238
+ 'tw-([^-]+)-box-neutral-strong-inverse(?![a-zA-Z0-9-])': 'tw-$1-primary-on-primary',
239
+ 'tw-([^-]+)-box-neutral-strong-inverse-hover(?![a-zA-Z0-9-])': 'tw-$1-primary-on-primary',
240
+ 'tw-([^-]+)-box-neutral-strong-inverse-pressed(?![a-zA-Z0-9-])': 'tw-$1-primary-on-primary',
241
+ 'tw-([^-]+)-box-neutral-mighty(?![a-zA-Z0-9-])': 'tw-$1-primary',
242
+ 'tw-([^-]+)-box-neutral-mighty-hover(?![a-zA-Z0-9-])': 'tw-$1-primary-hover',
243
+ 'tw-([^-]+)-box-neutral-mighty-pressed(?![a-zA-Z0-9-])': 'tw-$1-primary-active',
244
+ 'tw-([^-]+)-box-neutral-mighty-inverse(?![a-zA-Z0-9-])': 'tw-$1-primary-on-primary',
245
+ 'tw-([^-]+)-box-neutral-mighty-inverse-hover(?![a-zA-Z0-9-])': 'tw-$1-primary-on-primary',
246
+ 'tw-([^-]+)-box-neutral-mighty-inverse-pressed(?![a-zA-Z0-9-])': 'tw-$1-primary-on-primary',
247
+ 'tw-([^-]+)-box-selected(?![a-zA-Z0-9-])': 'tw-$1-container-highlight',
248
+ 'tw-([^-]+)-box-selected-hover(?![a-zA-Z0-9-])': 'tw-$1-container-highlight-hover',
249
+ 'tw-([^-]+)-box-selected-pressed(?![a-zA-Z0-9-])': 'tw-$1-container-highlight-active',
250
+ 'tw-([^-]+)-box-selected-inverse(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-highlight-on-highlight-container',
251
+ 'tw-([^-]+)-box-selected-inverse-hover(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-highlight-on-highlight-container',
252
+ 'tw-([^-]+)-box-selected-inverse-pressed(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-highlight-on-highlight-container',
253
+ 'tw-([^-]+)-box-selected-strong(?![a-zA-Z0-9-])': 'tw-$1-highlight',
254
+ 'tw-([^-]+)-box-selected-strong-hover(?![a-zA-Z0-9-])': 'tw-$1-highlight-hover',
255
+ 'tw-([^-]+)-box-selected-strong-pressed(?![a-zA-Z0-9-])': 'tw-$1-highlight-active',
256
+ 'tw-([^-]+)-box-selected-strong-inverse(?![a-zA-Z0-9-])': 'tw-$1-highlight-on-highlight',
257
+ 'tw-([^-]+)-box-selected-strong-inverse-hover(?![a-zA-Z0-9-])': 'tw-$1-highlight-on-highlight',
258
+ 'tw-([^-]+)-box-selected-strong-inverse-pressed(?![a-zA-Z0-9-])': 'tw-$1-highlight-on-highlight',
259
+ 'tw-([^-]+)-box-disabled(?![a-zA-Z0-9-])': 'tw-$1-container-disabled',
260
+ 'tw-([^-]+)-box-disabled-inverse(?![a-zA-Z0-9-])': 'tw-$1-container-disabled-on-disabled-container',
261
+ 'tw-([^-]+)-box-disabled-strong(?![a-zA-Z0-9-])': 'tw-$1-disabled',
262
+ 'tw-([^-]+)-box-disabled-strong-inverse(?![a-zA-Z0-9-])': 'tw-$1-disabled-on-disabled',
263
+ 'tw-([^-]+)-box-positive(?![a-zA-Z0-9-])': 'tw-$1-container-success',
264
+ 'tw-([^-]+)-box-positive-hover(?![a-zA-Z0-9-])': 'tw-$1-container-success-hover',
265
+ 'tw-([^-]+)-box-positive-pressed(?![a-zA-Z0-9-])': 'tw-$1-container-success-active',
266
+ 'tw-([^-]+)-box-positive-inverse(?![a-zA-Z0-9-])': 'tw-$1-container-success-on-success-container',
267
+ 'tw-([^-]+)-box-positive-inverse-hover(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-success-on-success-container',
268
+ 'tw-([^-]+)-box-positive-inverse-pressed(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-success-on-success-container',
269
+ 'tw-([^-]+)-box-positive-strong(?![a-zA-Z0-9-])': 'tw-$1-success',
270
+ 'tw-([^-]+)-box-positive-strong-hover(?![a-zA-Z0-9-])': 'tw-$1-success-hover',
271
+ 'tw-([^-]+)-box-positive-strong-pressed(?![a-zA-Z0-9-])': 'tw-$1-success-active',
272
+ 'tw-([^-]+)-box-positive-strong-inverse(?![a-zA-Z0-9-])': 'tw-$1-success-on-success',
273
+ 'tw-([^-]+)-box-positive-strong-inverse-hover(?![a-zA-Z0-9-])': 'tw-$1-success-on-success',
274
+ 'tw-([^-]+)-box-positive-strong-inverse-pressed(?![a-zA-Z0-9-])': 'tw-$1-success-on-success',
275
+ 'tw-([^-]+)-box-negative(?![a-zA-Z0-9-])': 'tw-$1-container-error',
276
+ 'tw-([^-]+)-box-negative-hover(?![a-zA-Z0-9-])': 'tw-$1-container-error-hover',
277
+ 'tw-([^-]+)-box-negative-pressed(?![a-zA-Z0-9-])': 'tw-$1-container-error-active',
278
+ 'tw-([^-]+)-box-negative-inverse(?![a-zA-Z0-9-])': 'tw-$1-container-error-on-error-container',
279
+ 'tw-([^-]+)-box-negative-inverse-hover(?![a-zA-Z0-9-])': 'tw-$1-container-error-on-error-container',
280
+ 'tw-([^-]+)-box-negative-inverse-pressed(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-error-on-error-container',
281
+ 'tw-([^-]+)-box-negative-strong(?![a-zA-Z0-9-])': 'tw-$1-error',
282
+ 'tw-([^-]+)-box-negative-strong-hover(?![a-zA-Z0-9-])': 'tw-$1-error-hover',
283
+ 'tw-([^-]+)-box-negative-strong-pressed(?![a-zA-Z0-9-])': 'tw-$1-error-active',
284
+ 'tw-([^-]+)-box-negative-strong-inverse(?![a-zA-Z0-9-])': 'tw-$1-error-on-error',
285
+ 'tw-([^-]+)-box-negative-strong-inverse-hover(?![a-zA-Z0-9-])': 'tw-$1-error-on-error',
286
+ 'tw-([^-]+)-box-negative-strong-inverse-pressed(?![a-zA-Z0-9-])': 'tw-$1-error-on-error',
287
+ 'tw-([^-]+)-box-warning(?![a-zA-Z0-9-])': 'tw-$1-container-warning',
288
+ 'tw-([^-]+)-box-warning-hover(?![a-zA-Z0-9-])': 'tw-$1-container-warning-hover',
289
+ 'tw-([^-]+)-box-warning-pressed(?![a-zA-Z0-9-])': 'tw-$1-container-warning-active',
290
+ 'tw-([^-]+)-box-warning-inverse(?![a-zA-Z0-9-])': 'tw-$1-container-warning-on-warning-container',
291
+ 'tw-([^-]+)-box-warning-inverse-hover(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-warning-on-warning-container',
292
+ 'tw-([^-]+)-box-warning-inverse-pressed(?![a-zA-Z0-9-])': 'tw-([^-]+)-container-warning-on-warning-container',
293
+ 'tw-([^-]+)-box-warning-strong(?![a-zA-Z0-9-])': 'tw-$1-warning',
294
+ 'tw-([^-]+)-box-warning-strong-hover(?![a-zA-Z0-9-])': 'tw-$1-warning-hover',
295
+ 'tw-([^-]+)-box-warning-strong-pressed(?![a-zA-Z0-9-])': 'tw-$1-warning-active',
296
+ 'tw-([^-]+)-box-warning-strong-inverse(?![a-zA-Z0-9-])': 'tw-$1-warning-on-warning',
297
+ 'tw-([^-]+)-box-warning-strong-inverse-hover(?![a-zA-Z0-9-])': 'tw-$1-warning-on-warning',
298
+ 'tw-([^-]+)-box-warning-strong-inverse-pressed(?![a-zA-Z0-9-])': 'tw-$1-warning-on-warning',
299
+ 'tw-([^-]+)-focus-shadow(?![a-zA-Z0-9-])': 'tw-$1-focus',
300
+ 'tw-([^-]+)-line(?![a-zA-Z0-9-])': 'tw-$1-line-mid',
301
+ 'tw-([^-]+)-line-weak(?![a-zA-Z0-9-])': 'tw-$1-line-subtle',
302
+ 'tw-([^-]+)-line-strong(?![a-zA-Z0-9-])': 'tw-$1-line-strong',
303
+ 'tw-([^-]+)-line-x-strong(?![a-zA-Z0-9-])': 'tw-$1-line-strong',
304
+ 'tw-([^-]+)-line-xx-strong(?![a-zA-Z0-9-])': 'tw-$1-line-strong',
305
+ 'tw-([^-]+)-line-mighty(?![a-zA-Z0-9-])': 'tw-$1-line-mid',
306
+ 'tw-([^-]+)-overlay-shadow(?![a-zA-Z0-9-])': 'tw-$1-overlay',
307
+ 'tw-([^-]+)-shadow-shadow(?![a-zA-Z0-9-])': 'tw-$1-shadow',
308
+ 'tw-([^-]+)-text(?![a-zA-Z0-9-])': 'tw-$1-primary',
309
+ 'tw-([^-]+)-text-hover(?![a-zA-Z0-9-])': 'tw-$1-primary-hover',
310
+ 'tw-([^-]+)-text-pressed(?![a-zA-Z0-9-])': 'tw-$1-primary-active',
311
+ 'tw-([^-]+)-text-weak(?![a-zA-Z0-9-])': 'tw-$1-secondary',
312
+ 'tw-([^-]+)-text-weak-hover(?![a-zA-Z0-9-])': 'tw-$1-secondary-hover',
313
+ 'tw-([^-]+)-text-weak-pressed(?![a-zA-Z0-9-])': 'tw-$1-secondary-active',
314
+ 'tw-([^-]+)-text-x-weak(?![a-zA-Z0-9-])': 'tw-$1-secondary',
315
+ 'tw-([^-]+)-text-disabled(?![a-zA-Z0-9-])': 'tw-$1-disabled',
316
+ 'tw-([^-]+)-text-negative(?![a-zA-Z0-9-])': 'tw-$1-error',
317
+ 'tw-([^-]+)-text-negative-hover(?![a-zA-Z0-9-])': 'tw-$1-error-hover',
318
+ 'tw-([^-]+)-text-negative-pressed(?![a-zA-Z0-9-])': 'tw-$1-error-active',
319
+ 'tw-([^-]+)-text-positive(?![a-zA-Z0-9-])': 'tw-$1-success',
320
+ 'tw-([^-]+)-text-positive-hover(?![a-zA-Z0-9-])': 'tw-$1-success-hover',
321
+ 'tw-([^-]+)-text-positive-pressed(?![a-zA-Z0-9-])': 'tw-$1-success-active',
322
+ 'tw-([^-]+)-text-warning(?![a-zA-Z0-9-])': 'tw-$1-warning',
323
+ 'tw-([^-]+)-text-warning-hover(?![a-zA-Z0-9-])': 'tw-$1-warning-hover',
324
+ 'tw-([^-]+)-text-warning-pressed(?![a-zA-Z0-9-])': 'tw-$1-warning-active',
325
+ 'tw-([^-]+)-text-interactive(?![a-zA-Z0-9-])': 'tw-$1-highlight',
326
+ 'tw-([^-]+)-text-interactive-hover(?![a-zA-Z0-9-])': 'tw-$1-highlight-hover',
327
+ 'tw-([^-]+)-text-interactive-pressed(?![a-zA-Z0-9-])': 'tw-$1-highlight-active',
328
+ 'tw-([^-]+)-button-background(?![a-zA-Z0-9-])': 'tw-$1-container-secondary',
329
+ 'tw-([^-]+)-button-background-hover(?![a-zA-Z0-9-])': 'tw-$1-container-secondary-hover',
330
+ 'tw-([^-]+)-button-background-pressed(?![a-zA-Z0-9-])': 'tw-$1-container-secondary-active',
331
+ 'tw-([^-]+)-button-text(?![a-zA-Z0-9-])': 'tw-$1-primary',
332
+ 'tw-([^-]+)-button-icon(?![a-zA-Z0-9-])': 'tw-$1-primary',
333
+ 'tw-([^-]+)-button-border(?![a-zA-Z0-9-])': 'tw-$1-primary',
334
+ 'tw-([^-]+)-button-negative-background(?![a-zA-Z0-9-])': 'tw-$1-container-error',
335
+ 'tw-([^-]+)-button-negative-background-hover(?![a-zA-Z0-9-])': 'tw-$1-container-error-hover',
336
+ 'tw-([^-]+)-button-negative-background-pressed(?![a-zA-Z0-9-])': 'tw-$1-container-error-active',
337
+ 'tw-([^-]+)-button-negative-text(?![a-zA-Z0-9-])': 'tw-$1-container-error-on-error-container',
338
+ 'tw-([^-]+)-button-negative-icon(?![a-zA-Z0-9-])': 'tw-$1-container-error-on-error-container',
339
+ 'tw-([^-]+)-button-positive-background(?![a-zA-Z0-9-])': 'tw-$1-container-success',
340
+ 'tw-([^-]+)-button-positive-background-hover(?![a-zA-Z0-9-])': 'tw-$1-container-success-hover',
341
+ 'tw-([^-]+)-button-positive-background-pressed(?![a-zA-Z0-9-])': 'tw-$1-container-success-active',
342
+ 'tw-([^-]+)-button-positive-text(?![a-zA-Z0-9-])': 'tw-$1-container-success-on-success-container',
343
+ 'tw-([^-]+)-button-positive-icon(?![a-zA-Z0-9-])': 'tw-$1-container-success-on-success-container',
344
+ 'tw-([^-]+)-button-strong-background(?![a-zA-Z0-9-])': 'tw-$1-primary',
345
+ 'tw-([^-]+)-button-strong-background-hover(?![a-zA-Z0-9-])': 'tw-$1-primary-hover',
346
+ 'tw-([^-]+)-button-strong-background-pressed(?![a-zA-Z0-9-])': 'tw-$1-primary-active',
347
+ 'tw-([^-]+)-button-strong-text(?![a-zA-Z0-9-])': 'tw-$1-primary-on-primary',
348
+ 'tw-([^-]+)-button-strong-icon(?![a-zA-Z0-9-])': 'tw-$1-primary-on-primary',
349
+ 'tw-([^-]+)-button-strong-negative-background(?![a-zA-Z0-9-])': 'tw-$1-error',
350
+ 'tw-([^-]+)-button-strong-negative-background-hover(?![a-zA-Z0-9-])': 'tw-$1-error-hover',
351
+ 'tw-([^-]+)-button-strong-negative-background-pressed(?![a-zA-Z0-9-])': 'tw-$1-error-active',
352
+ 'tw-([^-]+)-button-strong-negative-text(?![a-zA-Z0-9-])': 'tw-$1-error-on-error',
353
+ 'tw-([^-]+)-button-strong-negative-icon(?![a-zA-Z0-9-])': 'tw-$1-error-on-error',
354
+ 'tw-([^-]+)-button-strong-positive-background(?![a-zA-Z0-9-])': 'tw-$1-success',
355
+ 'tw-([^-]+)-button-strong-positive-background-hover(?![a-zA-Z0-9-])': 'tw-$1-success-hover',
356
+ 'tw-([^-]+)-button-strong-positive-background-pressed(?![a-zA-Z0-9-])': 'tw-$1-success-active',
357
+ 'tw-([^-]+)-button-strong-positive-text(?![a-zA-Z0-9-])': 'tw-$1-success-on-success',
358
+ 'tw-([^-]+)-button-strong-positive-icon(?![a-zA-Z0-9-])': 'tw-$1-success-on-success',
359
+ 'tw-([^-]+)-button-danger-background(?![a-zA-Z0-9-])': 'tw-$1-error',
360
+ 'tw-([^-]+)-button-danger-background-hover(?![a-zA-Z0-9-])': 'tw-$1-error-hover',
361
+ 'tw-([^-]+)-button-danger-background-pressed(?![a-zA-Z0-9-])': 'tw-$1-error-active',
362
+ 'tw-([^-]+)-button-danger-text(?![a-zA-Z0-9-])': 'tw-$1-error-on-error',
363
+ 'tw-([^-]+)-button-danger-icon(?![a-zA-Z0-9-])': 'tw-$1-error-on-error',
364
+ };
365
+
366
+ const tailwindTokenReplacements = {
367
+ // fontSize
368
+ 'tw-text-body-x-small(?![a-zA-Z0-9-])': 'tw-text-x-small',
369
+ 'tw-text-body-small(?![a-zA-Z0-9-])': 'tw-text-small',
370
+ 'tw-text-body-medium(?![a-zA-Z0-9-])': 'tw-text-medium',
371
+ 'tw-text-body-large(?![a-zA-Z0-9-])': 'tw-text-large',
372
+ 'tw-text-code-small(?![a-zA-Z0-9-])': 'tw-text-small',
373
+ 'tw-text-code-medium(?![a-zA-Z0-9-])': 'tw-text-medium',
374
+ 'tw-text-code-large(?![a-zA-Z0-9-])': 'tw-text-large',
375
+
376
+ // new named token key in the new `fontSize` config using the variable lookup method.
377
+ 'tw-text-heading-medium(?![a-zA-Z0-9-])': 'tw-$1-medium', // Note: new 'medium' fontSize is used for old 'heading-medium'
378
+ 'tw-text-heading-large(?![a-zA-Z0-9-])': 'tw-$1-large', // Note: new 'large' fontSize is used for old 'heading-large'
379
+ 'tw-text-heading-x-large(?![a-zA-Z0-9-])': 'tw-$1-x-large',
380
+ 'tw-text-heading-xx-large(?![a-zA-Z0-9-])': 'tw-$1-xx-large',
381
+
382
+ // fontFamily
383
+ 'tw-font-body(?![a-zA-Z0-9-])': 'tw-font-primary',
384
+ 'tw-font-body--stack(?![a-zA-Z0-9-])': 'tw-font-primary', // (via --body-family-stack -> --body-family -> new primary)
385
+ 'tw-font-code(?![a-zA-Z0-9-])': 'tw-font-monospace', // Assuming --typography-font-family-monoe in CSS map meant --typography-font-family-monospace
386
+ 'tw-font-code--stack(?![a-zA-Z0-9-])': 'tw-font-monospace',
387
+ 'tw-font-heading(?![a-zA-Z0-9-])': 'tw-font-primary',
388
+ 'tw-font-heading--stack(?![a-zA-Z0-9-])': 'tw-font-primary',
389
+
390
+ // boxShadow (Only for direct var-to-var mappings)
391
+ 'tw-shadow-matrix(?![a-zA-Z0-9-])': 'tw-shadow',
392
+ 'tw-shadow-top-matrix(?![a-zA-Z0-9-])': 'tw-shadow',
393
+ 'tw-shadow-bottom-matrix(?![a-zA-Z0-9-])': 'tw-shadow',
394
+ 'tw-shadow-large-matrix(?![a-zA-Z0-9-])': 'tw-shadow-large',
395
+
396
+ // borderWidth
397
+ 'tw-border-width(?![a-zA-Z0-9-])': 'tw-border-width-medium',
398
+ 'tw-border-width-large(?![a-zA-Z0-9-])': 'tw-border-width-large',
399
+
400
+ // outline
401
+ 'tw-outline-violet(?![a-zA-Z0-9-])': 'tw-outline',
402
+
403
+ // borderRadius
404
+ 'tw-rounded(?![a-zA-Z0-9-])': 'tw-rounded-medium', // Old DEFAULT (var(--radius)) maps to new borderRadius.medium (var(--border-radius-medium))
405
+ 'tw-rounded-small(?![a-zA-Z0-9-])': 'tw-rounded-small',
406
+ 'tw-rounded-large(?![a-zA-Z0-9-])': 'tw-rounded-large',
407
+ 'tw-rounded-x-large(?![a-zA-Z0-9-])': 'tw-rounded-x-large',
408
+
409
+ // spacing
410
+ 'tw-([^-]+)-xxs(?![a-zA-Z0-9-])': 'tw-$1-xx-small',
411
+ 'tw-([^-]+)-xs(?![a-zA-Z0-9-])': 'tw-$1-x-small',
412
+ 'tw-([^-]+)-s(?![a-zA-Z0-9-])': 'tw-$1-small',
413
+ 'tw-([^-]+)-m(?![a-zA-Z0-9-])': 'tw-$1-medium',
414
+ 'tw-([^-]+)-l(?![a-zA-Z0-9-])': 'tw-$1-large',
415
+ 'tw-([^-]+)-xl(?![a-zA-Z0-9-])': 'tw-$1-x-large',
416
+ 'tw-([^-]+)-xxl(?![a-zA-Z0-9-])': 'tw-$1-xx-large',
417
+ };
418
+
419
+ export const tailwindClassReplacements = {
420
+ ...tailwindColorReplacements,
421
+ ...tailwindTokenReplacements,
422
+ };