@clasing/ui 0.0.58 → 0.0.60

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 (5) hide show
  1. package/dist/index.es.js +6 -6
  2. package/dist/index.umd.js +1 -1
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/tailwind.config.js +263 -248
package/tailwind.config.js CHANGED
@@ -68,16 +68,16 @@ module.exports = {
68
68
  disabled: 'transparent',
69
69
  },
70
70
  background: {
71
- enabled: 'var(--color-brand-500)',
72
- hover: 'var(--color-brand-700)',
73
- pressed: 'var(--color-brand-900)',
74
- disabled: 'var(--color-neutral-300)',
71
+ enabled: 'hsl(var(--color-brand-500) / <alpha-value>)',
72
+ hover: 'hsl(var(--color-brand-700) / <alpha-value>)',
73
+ pressed: 'hsl(var(--color-brand-900) / <alpha-value>)',
74
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
75
75
  },
76
76
  content: {
77
- enabled: 'var(--color-neutral-000)',
78
- hover: 'var(--color-neutral-000)',
79
- pressed: 'var(--color-neutral-000)',
80
- disabled: 'var(--color-neutral-500)',
77
+ enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
78
+ hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
79
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
80
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
81
81
  },
82
82
  },
83
83
  secondary: {
@@ -88,16 +88,16 @@ module.exports = {
88
88
  disabled: 'transparent',
89
89
  },
90
90
  background: {
91
- enabled: 'var(--color-blue-500)',
92
- hover: 'var(--color-blue-700)',
93
- pressed: 'var(--color-blue-900)',
94
- disabled: 'var(--color-neutral-300)',
91
+ enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
92
+ hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
93
+ pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
94
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
95
95
  },
96
96
  content: {
97
- enabled: 'var(--color-neutral-000)',
98
- hover: 'var(--color-neutral-000)',
99
- pressed: 'var(--color-neutral-000)',
100
- disabled: 'var(--color-neutral-500)',
97
+ enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
98
+ hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
99
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
100
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
101
101
  },
102
102
  },
103
103
  tertiary: {
@@ -108,16 +108,16 @@ module.exports = {
108
108
  disabled: 'transparent',
109
109
  },
110
110
  background: {
111
- enabled: 'var(--color-neutral-900)',
112
- hover: 'var(--color-neutral-700)',
113
- pressed: 'var(--color-neutral-900)',
114
- disabled: 'var(--color-neutral-300)',
111
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
112
+ hover: 'hsl(var(--color-neutral-700) / <alpha-value>)',
113
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
114
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
115
115
  },
116
116
  content: {
117
- enabled: 'var(--color-blue-000)',
118
- hover: 'var(--color-blue-000)',
119
- pressed: 'var(--color-blue-000)',
120
- disabled: 'var(--color-neutral-500)',
117
+ enabled: 'hsl(var(--color-blue-000) / <alpha-value>)',
118
+ hover: 'hsl(var(--color-blue-000) / <alpha-value>)',
119
+ pressed: 'hsl(var(--color-blue-000) / <alpha-value>)',
120
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
121
121
  },
122
122
  },
123
123
  ghost: {
@@ -129,35 +129,35 @@ module.exports = {
129
129
  },
130
130
  background: {
131
131
  enabled: 'transparent',
132
- hover: 'var(--color-neutral-300)',
133
- pressed: 'var(--color-neutral-900)',
132
+ hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
133
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
134
134
  disabled: 'transparent',
135
135
  },
136
136
  content: {
137
- enabled: 'var(--color-neutral-900)',
138
- hover: 'var(--color-neutral-900)',
139
- pressed: 'var(--color-neutral-000)',
140
- disabled: 'var(--color-neutral-500)',
137
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
138
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
139
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
140
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
141
141
  },
142
142
  },
143
143
  outline: {
144
144
  background: {
145
145
  enabled: 'transparent',
146
- hover: 'var(--color-neutral-300)',
147
- pressed: 'var(--color-neutral-900)',
146
+ hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
147
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
148
148
  disabled: 'transparent',
149
149
  },
150
150
  content: {
151
- enabled: 'var(--color-neutral-900)',
152
- hover: 'var(--color-neutral-900)',
153
- pressed: 'var(--color-neutral-000)',
154
- disabled: 'var(--color-neutral-500)',
151
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
152
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
153
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
154
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
155
155
  },
156
156
  border: {
157
- enabled: 'var(--color-neutral-500)',
157
+ enabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
158
158
  hover: 'transparent',
159
159
  pressed: 'transparent',
160
- disabled: 'var(--color-neutral-500)',
160
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
161
161
  },
162
162
  },
163
163
  destructive: {
@@ -168,29 +168,29 @@ module.exports = {
168
168
  disabled: 'transparent',
169
169
  },
170
170
  background: {
171
- enabled: 'var(--color-brand-200)',
172
- hover: 'var(--color-brand-300)',
173
- pressed: 'var(--color-brand-400)',
174
- disabled: 'var(--color-neutral-300)',
171
+ enabled: 'hsl(var(--color-brand-200) / <alpha-value>)',
172
+ hover: 'hsl(var(--color-brand-300) / <alpha-value>)',
173
+ pressed: 'hsl(var(--color-brand-400) / <alpha-value>)',
174
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
175
175
  },
176
176
  content: {
177
- enabled: 'var(--color-neutral-900)',
178
- hover: 'var(--color-neutral-900)',
179
- pressed: 'var(--color-neutral-900)',
180
- disabled: 'var(--color-neutral-500)',
177
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
178
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
179
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
180
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
181
181
  },
182
182
  },
183
183
  link: {
184
184
  content: {
185
- enabled: 'var(--color-blue-500)',
186
- hover: 'var(--color-blue-700)',
187
- pressed: 'var(--color-blue-900)',
188
- disabled: 'var(--color-neutral-500)',
185
+ enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
186
+ hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
187
+ pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
188
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
189
189
  },
190
190
  border: {
191
191
  enabled: 'transparent',
192
- hover: 'var(--color-blue-700)',
193
- pressed: 'var(--color-blue-900)',
192
+ hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
193
+ pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
194
194
  disabled: 'transparent',
195
195
  },
196
196
  },
@@ -203,36 +203,36 @@ module.exports = {
203
203
  disabled: 'transparent',
204
204
  },
205
205
  bg: {
206
- enabled: 'var(--color-brand-500)',
207
- hover: 'var(--color-brand-700)',
208
- pressed: 'var(--color-brand-900)',
209
- disabled: 'var(--color-neutral-300)',
206
+ enabled: 'hsl(var(--color-brand-500) / <alpha-value>)',
207
+ hover: 'hsl(var(--color-brand-700) / <alpha-value>)',
208
+ pressed: 'hsl(var(--color-brand-900) / <alpha-value>)',
209
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
210
210
  },
211
211
  content: {
212
- enabled: 'var(--color-neutral-000)',
213
- hover: 'var(--color-neutral-000)',
214
- pressed: 'var(--color-neutral-000)',
215
- disabled: 'var(--color-neutral-000)',
212
+ enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
213
+ hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
214
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
215
+ disabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
216
216
  },
217
217
  },
218
218
  outline: {
219
219
  border: {
220
- enabled: 'var(--color-neutral-500)',
220
+ enabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
221
221
  hover: 'transparent',
222
222
  pressed: 'transparent',
223
- disabled: 'var(--color-neutral-300)',
223
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
224
224
  },
225
225
  bg: {
226
226
  enabled: 'transparent',
227
- hover: 'var(--color-neutral-300)',
228
- pressed: 'var(--color-neutral-900)',
227
+ hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
228
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
229
229
  disabled: 'transparent',
230
230
  },
231
231
  content: {
232
- enabled: 'var(--color-neutral-900)',
233
- hover: 'var(--color-neutral-900)',
234
- pressed: 'var(--color-neutral-000)',
235
- disabled: 'var(--color-neutral-500)',
232
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
233
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
234
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
235
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
236
236
  },
237
237
  },
238
238
  ghost: {
@@ -244,220 +244,235 @@ module.exports = {
244
244
  },
245
245
  bg: {
246
246
  enabled: 'transparent',
247
- hover: 'var(--color-neutral-300)',
248
- pressed: 'var(--color-neutral-900)',
247
+ hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
248
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
249
249
  disabled: 'transparent',
250
250
  },
251
251
  content: {
252
- enabled: 'var(--color-neutral-900)',
253
- hover: 'var(--color-neutral-900)',
254
- pressed: 'var(--color-neutral-000)',
255
- disabled: 'var(--color-neutral-500)',
252
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
253
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
254
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
255
+ disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
256
256
  },
257
257
  },
258
258
  },
259
259
  },
260
260
  content: {
261
261
  text: {
262
- default: 'var(--color-neutral-900)',
263
- subtle: 'var(--color-neutral-700)',
264
- subtlest: 'var(--color-neutral-500)',
265
- inverse: 'var(--color-neutral-000)',
266
- 'subtle-inverse': 'var(--color-neutral-300)',
267
- 'subtlest-inverse': 'var(--color-neutral-500)',
268
- disabled: 'var(--color-neutral-200)',
269
- 'disabled-bolder': 'var(--color-neutral-400)',
262
+ default: 'hsl(var(--color-neutral-900) / <alpha-value>)',
263
+ subtle: 'hsl(var(--color-neutral-700) / <alpha-value>)',
264
+ subtlest: 'hsl(var(--color-neutral-500) / <alpha-value>)',
265
+ inverse: 'hsl(var(--color-neutral-000) / <alpha-value>)',
266
+ 'subtle-inverse': 'hsl(var(--color-neutral-300) / <alpha-value>)',
267
+ 'subtlest-inverse': 'hsl(var(--color-neutral-500) / <alpha-value>)',
268
+ disabled: 'hsl(var(--color-neutral-200) / <alpha-value>)',
269
+ 'disabled-bolder': 'hsl(var(--color-neutral-400) / <alpha-value>)',
270
270
  },
271
271
  utility: {
272
- warning: 'var(--color-mustard-500)',
273
- 'warning-bolder': 'var(--color-mustard-900)',
274
- danger: 'var(--color-fuchsia-500)',
275
- 'danger-bolder': 'var(--color-fuchsia-900)',
276
- success: 'var(--color-lime-500)',
277
- 'success-bolder': 'var(--color-lime-900)',
278
- discovery: 'var(--color-violet-500)',
279
- informative: 'var(--color-marine-500)',
272
+ warning: 'hsl(var(--color-mustard-500) / <alpha-value>)',
273
+ 'warning-bolder': 'hsl(var(--color-mustard-900) / <alpha-value>)',
274
+ danger: 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
275
+ 'danger-bolder': 'hsl(var(--color-fuchsia-900) / <alpha-value>)',
276
+ success: 'hsl(var(--color-lime-500) / <alpha-value>)',
277
+ 'success-bolder': 'hsl(var(--color-lime-900) / <alpha-value>)',
278
+ discovery: 'hsl(var(--color-violet-500) / <alpha-value>)',
279
+ informative: 'hsl(var(--color-marine-500) / <alpha-value>)',
280
280
  },
281
281
  accent: {
282
- 'brand-subtle': 'var(--color-brand-200)',
283
- brand: 'var(--color-brand-500)',
284
- 'brand-bolder': 'var(--color-brand-800)',
285
- blue: 'var(--color-blue-500)',
286
- 'blue-bolder': 'var(--color-blue-800)',
287
- mustard: 'var(--color-mustard-500)',
288
- 'mustard-bolder': 'var(--color-mustard-800)',
289
- green: 'var(--color-green-500)',
290
- 'green-bolder': 'var(--color-green-800)',
291
- lime: 'var(--color-lime-500)',
292
- 'lime-bolder': 'var(--color-lime-800)',
293
- fuchsia: 'var(--color-fuchsia-500)',
294
- 'fuchsia-bolder': 'var(--color-fuchsia-800)',
295
- marine: 'var(--color-marine-500)',
296
- 'marine-bolder': 'var(--color-marine-800)',
297
- violet: 'var(--color-violet-500)',
298
- 'violet-bolder': 'var(--color-violet-800)',
299
- gray: 'var(--color-gray-500)',
300
- 'gray-bolder': 'var(--color-gray-800)',
301
- 'ice-subtlest': 'var(--color-ice-100)',
302
- 'ice-subtle': 'var(--color-ice-300)',
303
- ice: 'var(--color-ice-500)',
304
- 'ice-bolder': 'var(--color-ice-800)',
282
+ 'brand-subtle': 'hsl(var(--color-brand-200) / <alpha-value>)',
283
+ brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
284
+ 'brand-bolder': 'hsl(var(--color-brand-800) / <alpha-value>)',
285
+ blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
286
+ 'blue-bolder': 'hsl(var(--color-blue-800) / <alpha-value>)',
287
+ mustard: 'hsl(var(--color-mustard-500) / <alpha-value>)',
288
+ 'mustard-bolder': 'hsl(var(--color-mustard-800) / <alpha-value>)',
289
+ green: 'hsl(var(--color-green-500) / <alpha-value>)',
290
+ 'green-bolder': 'hsl(var(--color-green-800) / <alpha-value>)',
291
+ lime: 'hsl(var(--color-lime-500) / <alpha-value>)',
292
+ 'lime-bolder': 'hsl(var(--color-lime-800) / <alpha-value>)',
293
+ fuchsia: 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
294
+ 'fuchsia-bolder': 'hsl(var(--color-fuchsia-800) / <alpha-value>)',
295
+ marine: 'hsl(var(--color-marine-500) / <alpha-value>)',
296
+ 'marine-bolder': 'hsl(var(--color-marine-800) / <alpha-value>)',
297
+ violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
298
+ 'violet-bolder': 'hsl(var(--color-violet-800) / <alpha-value>)',
299
+ gray: 'hsl(var(--color-gray-500) / <alpha-value>)',
300
+ 'gray-bolder': 'hsl(var(--color-gray-800) / <alpha-value>)',
301
+ 'ice-subtlest': 'hsl(var(--color-ice-100) / <alpha-value>)',
302
+ 'ice-subtle': 'hsl(var(--color-ice-300) / <alpha-value>)',
303
+ ice: 'hsl(var(--color-ice-500) / <alpha-value>)',
304
+ 'ice-bolder': 'hsl(var(--color-ice-800) / <alpha-value>)',
305
305
  },
306
306
  link: {
307
- enabled: 'var(--color-blue-500)',
308
- hover: 'var(--color-blue-700)',
309
- pressed: 'var(--color-blue-900)',
307
+ enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
308
+ hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
309
+ pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
310
310
  },
311
311
  },
312
312
  surface: {
313
313
  neutral: {
314
- primary: 'var(--color-neutral-000)',
315
- secondary: 'var(--color-neutral-100)',
316
- tertiary: 'var(--color-neutral-200)',
317
- 'primary-inverse': 'var(--color-neutral-900)',
318
- 'secondary-inverse': 'var(--color-neutral-800)',
319
- 'tertiary-inverse': 'var(--color-neutral-700)',
314
+ primary: 'hsl(var(--color-neutral-000) / <alpha-value>)',
315
+ secondary: 'hsl(var(--color-neutral-100) / <alpha-value>)',
316
+ tertiary: 'hsl(var(--color-neutral-200) / <alpha-value>)',
317
+ 'primary-inverse': 'hsl(var(--color-neutral-900) / <alpha-value>)',
318
+ 'secondary-inverse': 'hsl(var(--color-neutral-800) / <alpha-value>)',
319
+ 'tertiary-inverse': 'hsl(var(--color-neutral-700) / <alpha-value>)',
320
320
  },
321
321
  accent: {
322
- 'brand-subtlest': 'var(--color-brand-000)',
323
- 'brand-subtle': 'var(--color-brand-100)',
322
+ 'brand-subtlest': 'hsl(var(--color-brand-000) / <alpha-value>)',
323
+ 'brand-subtle': 'hsl(var(--color-brand-100) / <alpha-value>)',
324
324
  },
325
325
  },
326
326
  bg: {
327
- white: 'var(--color-neutral-000)',
328
- disabled: 'var(--color-neutral-400)',
329
- default: 'var(--color-neutral-200)',
330
- 'default-hover': 'var(--color-neutral-400)',
331
- 'default-pressed': 'var(--color-neutral-600)',
332
- subtle: 'var(--color-neutral-100)',
333
- 'subtle-hover': 'var(--color-neutral-200)',
334
- 'subtle-pressed': 'var(--color-neutral-400)',
335
- bolder: 'var(--color-neutral-800)',
336
- 'bolder-hover': 'var(--color-neutral-900)',
337
- 'bolder-pressed': 'var(--color-neutral-900)',
338
- 'brand-subtle': 'var(--color-brand-000)',
339
- 'brand-subtle-hover': 'var(--color-brand-200)',
340
- 'brand-subtle-pressed': 'var(--color-brand-400)',
341
- brand: 'var(--color-brand-500)',
342
- 'brand-hover': 'var(--color-brand-700)',
343
- 'brand-pressed': 'var(--color-brand-900)',
327
+ white: 'hsl(var(--color-neutral-000) / <alpha-value>)',
328
+ disabled: 'hsl(var(--color-neutral-400) / <alpha-value>)',
329
+ default: 'hsl(var(--color-neutral-200) / <alpha-value>)',
330
+ 'default-hover': 'hsl(var(--color-neutral-400) / <alpha-value>)',
331
+ 'default-pressed': 'hsl(var(--color-neutral-600) / <alpha-value>)',
332
+ subtle: 'hsl(var(--color-neutral-100) / <alpha-value>)',
333
+ 'subtle-hover': 'hsl(var(--color-neutral-200) / <alpha-value>)',
334
+ 'subtle-pressed': 'hsl(var(--color-neutral-400) / <alpha-value>)',
335
+ bolder: 'hsl(var(--color-neutral-800) / <alpha-value>)',
336
+ 'bolder-hover': 'hsl(var(--color-neutral-900) / <alpha-value>)',
337
+ 'bolder-pressed': 'hsl(var(--color-neutral-900) / <alpha-value>)',
338
+ 'brand-subtle': 'hsl(var(--color-brand-000) / <alpha-value>)',
339
+ 'brand-subtle-hover': 'hsl(var(--color-brand-200) / <alpha-value>)',
340
+ 'brand-subtle-pressed': 'hsl(var(--color-brand-400) / <alpha-value>)',
341
+ brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
342
+ 'brand-hover': 'hsl(var(--color-brand-700) / <alpha-value>)',
343
+ 'brand-pressed': 'hsl(var(--color-brand-900) / <alpha-value>)',
344
344
  accent: {
345
- 'blue-subtle': 'var(--color-blue-000)',
346
- 'blue-subtle-hover': 'var(--color-blue-200)',
347
- 'blue-subtle-pressed': 'var(--color-blue-400)',
348
- blue: 'var(--color-blue-500)',
349
- 'blue-hover': 'var(--color-blue-700)',
350
- 'blue-pressed': 'var(--color-blue-900)',
351
- 'mustard-subtle': 'var(--color-mustard-000)',
352
- 'mustard-subtle-hover': 'var(--color-mustard-200)',
353
- 'mustard-subtle-pressed': 'var(--color-mustard-500)',
354
- mustard: 'var(--color-mustard-500)',
355
- 'mustard-hover': 'var(--color-mustard-700)',
356
- 'mustard-pressed': 'var(--color-mustard-900)',
357
- 'green-subtle': 'var(--color-green-000)',
358
- 'green-subtle-hover': 'var(--color-green-200)',
359
- 'green-subtle-pressed': 'var(--color-green-500)',
360
- green: 'var(--color-green-500)',
361
- 'green-hover': 'var(--color-green-700)',
362
- 'green-pressed': 'var(--color-green-900)',
363
- 'lime-subtle': 'var(--color-lime-000)',
364
- 'lime-subtle-hover': 'var(--color-lime-200)',
365
- 'lime-subtle-pressed': 'var(--color-lime-500)',
366
- lime: 'var(--color-lime-500)',
367
- 'lime-hover': 'var(--color-lime-700)',
368
- 'lime-pressed': 'var(--color-lime-900)',
369
- 'fuchsia-subtle': 'var(--color-fuchsia-000)',
370
- 'fuchsia-subtle-hover': 'var(--color-fuchsia-200)',
371
- 'fuchsia-subtle-pressed': 'var(--color-fuchsia-500)',
372
- fuchsia: 'var(--color-fuchsia-500)',
373
- 'fuchsia-hover': 'var(--color-fuchsia-700)',
374
- 'fuchsia-pressed': 'var(--color-fuchsia-900)',
375
- 'marine-subtle': 'var(--color-marine-000)',
376
- 'marine-subtle-hover': 'var(--color-marine-200)',
377
- 'marine-subtle-pressed': 'var(--color-marine-500)',
378
- marine: 'var(--color-marine-500)',
379
- 'marine-hover': 'var(--color-marine-700)',
380
- 'marine-pressed': 'var(--color-marine-500)',
381
- 'violet-subtle': 'var(--color-violet-000)',
382
- 'violet-subtle-hover': 'var(--color-violet-200)',
383
- 'violet-subtle-pressed': 'var(--color-violet-500)',
384
- violet: 'var(--color-violet-500)',
385
- 'violet-hover': 'var(--color-violet-700)',
386
- 'violet-pressed': 'var(--color-violet-900)',
387
- 'gray-subtle': 'var(--color-gray-000)',
388
- 'gray-subtle-hover': 'var(--color-gray-200)',
389
- 'gray-subtle-pressed': 'var(--color-gray-500)',
390
- gray: 'var(--color-gray-500)',
391
- 'gray-hover': 'var(--color-gray-700)',
392
- 'gray-pressed': 'var(--color-gray-900)',
393
- 'ice-subtle': 'var(--color-ice-000)',
394
- 'ice-subtle-hover': 'var(--color-ice-200)',
395
- 'ice-subtle-pressed': 'var(--color-ice-500)',
396
- ice: 'var(--color-ice-500)',
397
- 'ice-hover': 'var(--color-ice-700)',
398
- 'ice-pressed': 'var(--color-ice-900)',
345
+ 'blue-subtle': 'hsl(var(--color-blue-000) / <alpha-value>)',
346
+ 'blue-subtle-hover': 'hsl(var(--color-blue-200) / <alpha-value>)',
347
+ 'blue-subtle-pressed': 'hsl(var(--color-blue-400) / <alpha-value>)',
348
+ blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
349
+ 'blue-hover': 'hsl(var(--color-blue-700) / <alpha-value>)',
350
+ 'blue-pressed': 'hsl(var(--color-blue-900) / <alpha-value>)',
351
+ 'mustard-subtle': 'hsl(var(--color-mustard-000) / <alpha-value>)',
352
+ 'mustard-subtle-hover':
353
+ 'hsl(var(--color-mustard-200) / <alpha-value>)',
354
+ 'mustard-subtle-pressed':
355
+ 'hsl(var(--color-mustard-500) / <alpha-value>)',
356
+ mustard: 'hsl(var(--color-mustard-500) / <alpha-value>)',
357
+ 'mustard-hover': 'hsl(var(--color-mustard-700) / <alpha-value>)',
358
+ 'mustard-pressed': 'hsl(var(--color-mustard-900) / <alpha-value>)',
359
+ 'green-subtle': 'hsl(var(--color-green-000) / <alpha-value>)',
360
+ 'green-subtle-hover': 'hsl(var(--color-green-200) / <alpha-value>)',
361
+ 'green-subtle-pressed': 'hsl(var(--color-green-500) / <alpha-value>)',
362
+ green: 'hsl(var(--color-green-500) / <alpha-value>)',
363
+ 'green-hover': 'hsl(var(--color-green-700) / <alpha-value>)',
364
+ 'green-pressed': 'hsl(var(--color-green-900) / <alpha-value>)',
365
+ 'lime-subtle': 'hsl(var(--color-lime-000) / <alpha-value>)',
366
+ 'lime-subtle-hover': 'hsl(var(--color-lime-200) / <alpha-value>)',
367
+ 'lime-subtle-pressed': 'hsl(var(--color-lime-500) / <alpha-value>)',
368
+ lime: 'hsl(var(--color-lime-500) / <alpha-value>)',
369
+ 'lime-hover': 'hsl(var(--color-lime-700) / <alpha-value>)',
370
+ 'lime-pressed': 'hsl(var(--color-lime-900) / <alpha-value>)',
371
+ 'fuchsia-subtle': 'hsl(var(--color-fuchsia-000) / <alpha-value>)',
372
+ 'fuchsia-subtle-hover':
373
+ 'hsl(var(--color-fuchsia-200) / <alpha-value>)',
374
+ 'fuchsia-subtle-pressed':
375
+ 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
376
+ fuchsia: 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
377
+ 'fuchsia-hover': 'hsl(var(--color-fuchsia-700) / <alpha-value>)',
378
+ 'fuchsia-pressed': 'hsl(var(--color-fuchsia-900) / <alpha-value>)',
379
+ 'marine-subtle': 'hsl(var(--color-marine-000) / <alpha-value>)',
380
+ 'marine-subtle-hover': 'hsl(var(--color-marine-200) / <alpha-value>)',
381
+ 'marine-subtle-pressed':
382
+ 'hsl(var(--color-marine-500) / <alpha-value>)',
383
+ marine: 'hsl(var(--color-marine-500) / <alpha-value>)',
384
+ 'marine-hover': 'hsl(var(--color-marine-700) / <alpha-value>)',
385
+ 'marine-pressed': 'hsl(var(--color-marine-500) / <alpha-value>)',
386
+ 'violet-subtle': 'hsl(var(--color-violet-000) / <alpha-value>)',
387
+ 'violet-subtle-hover': 'hsl(var(--color-violet-200) / <alpha-value>)',
388
+ 'violet-subtle-pressed':
389
+ 'hsl(var(--color-violet-500) / <alpha-value>)',
390
+ violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
391
+ 'violet-hover': 'hsl(var(--color-violet-700) / <alpha-value>)',
392
+ 'violet-pressed': 'hsl(var(--color-violet-900) / <alpha-value>)',
393
+ 'gray-subtle': 'hsl(var(--color-gray-000) / <alpha-value>)',
394
+ 'gray-subtle-hover': 'hsl(var(--color-gray-200) / <alpha-value>)',
395
+ 'gray-subtle-pressed': 'hsl(var(--color-gray-500) / <alpha-value>)',
396
+ gray: 'hsl(var(--color-gray-500) / <alpha-value>)',
397
+ 'gray-hover': 'hsl(var(--color-gray-700) / <alpha-value>)',
398
+ 'gray-pressed': 'hsl(var(--color-gray-900) / <alpha-value>)',
399
+ 'ice-subtle': 'hsl(var(--color-ice-000) / <alpha-value>)',
400
+ 'ice-subtle-hover': 'hsl(var(--color-ice-200) / <alpha-value>)',
401
+ 'ice-subtle-pressed': 'hsl(var(--color-ice-500) / <alpha-value>)',
402
+ ice: 'hsl(var(--color-ice-500) / <alpha-value>)',
403
+ 'ice-hover': 'hsl(var(--color-ice-700) / <alpha-value>)',
404
+ 'ice-pressed': 'hsl(var(--color-ice-900) / <alpha-value>)',
399
405
  },
400
406
  utility: {
401
- danger: 'var(--color-fuchsia-000)',
402
- 'danger-hover': 'var(--color-fuchsia-300)',
403
- 'danger-pressed': 'var(--color-fuchsia-500)',
404
- 'danger-bolder': 'var(--color-fuchsia-500)',
405
- 'danger-bolder-hover': 'var(--color-fuchsia-700)',
406
- 'danger-bolder-pressed': 'var(--color-fuchsia-900)',
407
- warning: 'var(--color-mustard-000)',
408
- 'warning-hover': 'var(--color-mustard-300)',
409
- 'warning-pressed': 'var(--color-mustard-500)',
410
- 'warning-bolder': 'var(--color-mustard-500)',
411
- 'warning-bolder-hover': 'var(--color-mustard-700)',
412
- 'warning-bolder-pressed': 'var(--color-mustard-900)',
413
- success: 'var(--color-lime-000)',
414
- 'success-hover': 'var(--color-lime-200)',
415
- 'success-pressed': 'var(--color-lime-500)',
416
- 'success-bolder': 'var(--color-lime-500)',
417
- 'success-bolder-hover': 'var(--color-lime-700)',
418
- 'success-bolder-pressed': 'var(--color-lime-900)',
419
- discovery: 'var(--color-violet-000)',
420
- 'discovery-hover': 'var(--color-violet-300)',
421
- 'discovery-pressed': 'var(--color-violet-500)',
422
- 'discovery-bolder': 'var(--color-violet-500)',
423
- 'discovery-bolder-hover': 'var(--color-violet-700)',
424
- 'discovery-bolder-pressed': 'var(--color-violet-900)',
425
- informative: 'var(--color-marine-000)',
426
- 'informative-hover': 'var(--color-marine-300)',
427
- 'informative-pressed': 'var(--color-marine-500)',
428
- 'informative-bolder': 'var(--color-marine-500)',
429
- 'informative-bolder-hover': 'var(--color-marine-700)',
430
- 'informative-bolder-pressed': 'var(--color-marine-900)',
407
+ danger: 'hsl(var(--color-fuchsia-000) / <alpha-value>)',
408
+ 'danger-hover': 'hsl(var(--color-fuchsia-300) / <alpha-value>)',
409
+ 'danger-pressed': 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
410
+ 'danger-bolder': 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
411
+ 'danger-bolder-hover':
412
+ 'hsl(var(--color-fuchsia-700) / <alpha-value>)',
413
+ 'danger-bolder-pressed':
414
+ 'hsl(var(--color-fuchsia-900) / <alpha-value>)',
415
+ warning: 'hsl(var(--color-mustard-000) / <alpha-value>)',
416
+ 'warning-hover': 'hsl(var(--color-mustard-300) / <alpha-value>)',
417
+ 'warning-pressed': 'hsl(var(--color-mustard-500) / <alpha-value>)',
418
+ 'warning-bolder': 'hsl(var(--color-mustard-500) / <alpha-value>)',
419
+ 'warning-bolder-hover':
420
+ 'hsl(var(--color-mustard-700) / <alpha-value>)',
421
+ 'warning-bolder-pressed':
422
+ 'hsl(var(--color-mustard-900) / <alpha-value>)',
423
+ success: 'hsl(var(--color-lime-000) / <alpha-value>)',
424
+ 'success-hover': 'hsl(var(--color-lime-200) / <alpha-value>)',
425
+ 'success-pressed': 'hsl(var(--color-lime-500) / <alpha-value>)',
426
+ 'success-bolder': 'hsl(var(--color-lime-500) / <alpha-value>)',
427
+ 'success-bolder-hover': 'hsl(var(--color-lime-700) / <alpha-value>)',
428
+ 'success-bolder-pressed':
429
+ 'hsl(var(--color-lime-900) / <alpha-value>)',
430
+ discovery: 'hsl(var(--color-violet-000) / <alpha-value>)',
431
+ 'discovery-hover': 'hsl(var(--color-violet-300) / <alpha-value>)',
432
+ 'discovery-pressed': 'hsl(var(--color-violet-500) / <alpha-value>)',
433
+ 'discovery-bolder': 'hsl(var(--color-violet-500) / <alpha-value>)',
434
+ 'discovery-bolder-hover':
435
+ 'hsl(var(--color-violet-700) / <alpha-value>)',
436
+ 'discovery-bolder-pressed':
437
+ 'hsl(var(--color-violet-900) / <alpha-value>)',
438
+ informative: 'hsl(var(--color-marine-000) / <alpha-value>)',
439
+ 'informative-hover': 'hsl(var(--color-marine-300) / <alpha-value>)',
440
+ 'informative-pressed': 'hsl(var(--color-marine-500) / <alpha-value>)',
441
+ 'informative-bolder': 'hsl(var(--color-marine-500) / <alpha-value>)',
442
+ 'informative-bolder-hover':
443
+ 'hsl(var(--color-marine-700) / <alpha-value>)',
444
+ 'informative-bolder-pressed':
445
+ 'hsl(var(--color-marine-900) / <alpha-value>)',
431
446
  },
432
447
  },
433
448
  border: {
434
- subtlest: 'var(--color-neutral-500)',
435
- subtle: 'var(--color-neutral-700)',
436
- bolder: 'var(--color-neutral-900)',
437
- brand: 'var(--color-brand-500)',
438
- disabled: 'var(--color-neutral-400)',
439
- focused: 'var(--color-blue-900)',
440
- 'inversed-subtlest': 'var(--color-neutral-400)',
441
- 'inversed-subtle': 'var(--color-neutral-200)',
442
- 'inversed-bolder': 'var(--color-neutral-000)',
449
+ subtlest: 'hsl(var(--color-neutral-500) / <alpha-value>)',
450
+ subtle: 'hsl(var(--color-neutral-700) / <alpha-value>)',
451
+ bolder: 'hsl(var(--color-neutral-900) / <alpha-value>)',
452
+ brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
453
+ disabled: 'hsl(var(--color-neutral-400) / <alpha-value>)',
454
+ focused: 'hsl(var(--color-blue-900) / <alpha-value>)',
455
+ 'inversed-subtlest': 'hsl(var(--color-neutral-400) / <alpha-value>)',
456
+ 'inversed-subtle': 'hsl(var(--color-neutral-200) / <alpha-value>)',
457
+ 'inversed-bolder': 'hsl(var(--color-neutral-000) / <alpha-value>)',
443
458
  transparent: 'transparent',
444
459
  accent: {
445
- blue: 'var(--color-blue-500)',
446
- mustard: 'var(--color-mustard-500)',
447
- green: 'var(--color-green-500)',
448
- lime: 'var(--color-lime-500)',
449
- fuchsia: 'var(--color-fuchsia-500)',
450
- marine: 'var(--color-marine-500)',
451
- violet: 'var(--color-violet-500)',
452
- gray: 'var(--color-gray-500)',
453
- ice: 'var(--color-ice-500)',
460
+ blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
461
+ mustard: 'hsl(var(--color-mustard-500) / <alpha-value>)',
462
+ green: 'hsl(var(--color-green-500) / <alpha-value>)',
463
+ lime: 'hsl(var(--color-lime-500) / <alpha-value>)',
464
+ fuchsia: 'hsl(var(--color-fuchsia-500) / <alpha-value>)',
465
+ marine: 'hsl(var(--color-marine-500) / <alpha-value>)',
466
+ violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
467
+ gray: 'hsl(var(--color-gray-500) / <alpha-value>)',
468
+ ice: 'hsl(var(--color-ice-500) / <alpha-value>)',
454
469
  },
455
470
  utility: {
456
- danger: 'var(--color-fuchsia-900)',
457
- success: 'var(--color-lime-500)',
458
- discovery: 'var(--color-violet-500)',
459
- informative: 'var(--color-marine-500)',
460
- warning: 'var(--color-mustard-500)',
471
+ danger: 'hsl(var(--color-fuchsia-900) / <alpha-value>)',
472
+ success: 'hsl(var(--color-lime-500) / <alpha-value>)',
473
+ discovery: 'hsl(var(--color-violet-500) / <alpha-value>)',
474
+ informative: 'hsl(var(--color-marine-500) / <alpha-value>)',
475
+ warning: 'hsl(var(--color-mustard-500) / <alpha-value>)',
461
476
  },
462
477
  },
463
478
  },