@clasing/ui 0.1.49 → 0.1.51

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 (6) hide show
  1. package/dist/index.d.ts +22 -11
  2. package/dist/index.es.js +2214 -2157
  3. package/dist/index.umd.js +10 -10
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
  6. package/tailwind.config.js +370 -365
package/tailwind.config.js CHANGED
@@ -1,66 +1,202 @@
1
1
  /* eslint-disable no-undef */
2
2
 
3
+ import plugin from 'tailwindcss/plugin'
4
+
3
5
  /** @type {import('tailwindcss').Config} */
4
- module.exports = {
5
- content: [
6
- './src/**/*.{js,ts,jsx,tsx,mdx}',
7
- // Storybook integration
8
- './stories/**/*.{js,ts,jsx,tsx}',
9
- ],
10
- theme: {
11
- fontSize: {
12
- '2xs': '10px',
13
- xs: '12px',
14
- sm: '14px',
15
- base: '16px',
16
- lg: '18px',
17
- xl: '20px',
18
- '2xl': '24px',
19
- '3xl': '28px',
20
- '4xl': '32px',
21
- '5xl': '36px',
22
- '6xl': '40px',
23
- '7xl': '44px',
24
- '8xl': '48px',
25
- '9xl': '52px',
26
- },
27
- lineHeight: {
28
- xs: '16px',
29
- sm: '18px',
30
- md: '20px',
31
- lg: '24px',
32
- xl: '28px',
33
- '2xl': '32px',
34
- '3xl': '36px',
35
- '4xl': '40px',
36
- '5xl': '44px',
37
- '6xl': '48px',
38
- '7xl': '56px',
39
- },
40
- letterSpacing: {
41
- tighter: '-4px',
42
- tight: '-2px',
43
- normal: '0',
44
- wide: '2px',
45
- wider: '5px',
46
- widest: '10px',
47
- },
48
- fontFamily: {
49
- display: ['Open Sans', 'sans-serif'],
50
- title: ['Open Sans', 'sans-serif'],
51
- text: ['Open Sans', 'sans-serif'],
52
- label: ['Open Sans', 'sans-serif'],
53
- overline: ['Open Sans', 'sans-serif'],
54
- },
55
- fontWeight: {
56
- light: 300,
57
- regular: 400,
58
- semibold: 600,
59
- bold: 700,
60
- },
61
- colors: {
62
- button: {
63
- primary: {
6
+ export const content = [
7
+ './src/**/*.{js,ts,jsx,tsx,mdx}',
8
+ // Storybook integration
9
+ './stories/**/*.{js,ts,jsx,tsx}',
10
+ ]
11
+ export const theme = {
12
+ fontSize: {
13
+ '2xs': '10px',
14
+ xs: '12px',
15
+ sm: '14px',
16
+ base: '16px',
17
+ lg: '18px',
18
+ xl: '20px',
19
+ '2xl': '24px',
20
+ '3xl': '28px',
21
+ '4xl': '32px',
22
+ '5xl': '36px',
23
+ '6xl': '40px',
24
+ '7xl': '44px',
25
+ '8xl': '48px',
26
+ '9xl': '52px',
27
+ },
28
+ lineHeight: {
29
+ xs: '16px',
30
+ sm: '18px',
31
+ md: '20px',
32
+ lg: '24px',
33
+ xl: '28px',
34
+ '2xl': '32px',
35
+ '3xl': '36px',
36
+ '4xl': '40px',
37
+ '5xl': '44px',
38
+ '6xl': '48px',
39
+ '7xl': '56px',
40
+ },
41
+ letterSpacing: {
42
+ tighter: '-4px',
43
+ tight: '-2px',
44
+ normal: '0',
45
+ wide: '2px',
46
+ wider: '5px',
47
+ widest: '10px',
48
+ },
49
+ fontFamily: {
50
+ display: ['Open Sans', 'sans-serif'],
51
+ title: ['Open Sans', 'sans-serif'],
52
+ text: ['Open Sans', 'sans-serif'],
53
+ label: ['Open Sans', 'sans-serif'],
54
+ overline: ['Open Sans', 'sans-serif'],
55
+ },
56
+ fontWeight: {
57
+ light: 300,
58
+ regular: 400,
59
+ semibold: 600,
60
+ bold: 700,
61
+ },
62
+ colors: {
63
+ button: {
64
+ 'primary-red': {
65
+ border: {
66
+ enabled: 'transparent',
67
+ hover: 'transparent',
68
+ pressed: 'transparent',
69
+ disabled: 'transparent',
70
+ },
71
+ background: {
72
+ enabled: 'hsl(var(--color-brand-500) / <alpha-value>)',
73
+ hover: 'hsl(var(--color-brand-700) / <alpha-value>)',
74
+ pressed: 'hsl(var(--color-brand-900) / <alpha-value>)',
75
+ disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
76
+ },
77
+ content: {
78
+ enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
79
+ hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
80
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
81
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
82
+ },
83
+ },
84
+ 'primary-blue': {
85
+ border: {
86
+ enabled: 'transparent',
87
+ hover: 'transparent',
88
+ pressed: 'transparent',
89
+ disabled: 'transparent',
90
+ },
91
+ background: {
92
+ enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
93
+ hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
94
+ pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
95
+ disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
96
+ },
97
+ content: {
98
+ enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
99
+ hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
100
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
101
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
102
+ },
103
+ },
104
+ secondary: {
105
+ border: {
106
+ enabled: 'transparent',
107
+ hover: 'transparent',
108
+ pressed: 'transparent',
109
+ disabled: 'transparent',
110
+ },
111
+ background: {
112
+ enabled: 'hsl(var(--color-neutral-600) / <alpha-value>)',
113
+ hover: 'hsl(var(--color-neutral-700) / <alpha-value>)',
114
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
115
+ disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
116
+ },
117
+ content: {
118
+ enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
119
+ hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
120
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
121
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
122
+ },
123
+ },
124
+ ghost: {
125
+ border: {
126
+ enabled: 'transparent',
127
+ hover: 'transparent',
128
+ pressed: 'transparent',
129
+ disabled: 'transparent',
130
+ },
131
+ background: {
132
+ enabled: 'hsl(var(--color-blue-050) / <alpha-value>)',
133
+ hover: 'hsl(var(--color-blue-200) / <alpha-value>)',
134
+ pressed: 'hsl(var(--color-blue-500) / <alpha-value>)',
135
+ disabled: 'hs(var(--color-neutral-100) / <alpha-value>)',
136
+ },
137
+ content: {
138
+ enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
139
+ hover: 'hsl(var(--color-blue-500) / <alpha-value>)',
140
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
141
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
142
+ },
143
+ },
144
+ outline: {
145
+ background: {
146
+ enabled: 'transparent',
147
+ hover: 'hsl(var(--color-neutral-200) / <alpha-value>)',
148
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
149
+ disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
150
+ },
151
+ content: {
152
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
153
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
154
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
155
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
156
+ },
157
+ border: {
158
+ enabled: 'hsl(var(--color-neutral-700) / <alpha-value>)',
159
+ hover: 'hsl(var(--color-neutral-700) / <alpha-value>)',
160
+ pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
161
+ disabled: 'transparent',
162
+ },
163
+ },
164
+ destructive: {
165
+ border: {
166
+ enabled: 'transparent',
167
+ hover: 'transparent',
168
+ pressed: 'transparent',
169
+ disabled: 'transparent',
170
+ },
171
+ background: {
172
+ enabled: 'hsl(var(--color-error-light) / <alpha-value>)',
173
+ hover: 'hsl(var(--color-error-light) / <alpha-value>)',
174
+ pressed: 'hsl(var(--color-error-light) / <alpha-value>)',
175
+ disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
176
+ },
177
+ content: {
178
+ enabled: 'hsl(var(--color-error-main) / <alpha-value>)',
179
+ hover: 'hsl(var(--color-error-main) / <alpha-value>)',
180
+ pressed: 'hsl(var(--color-error-main) / <alpha-value>)',
181
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
182
+ },
183
+ },
184
+ link: {
185
+ content: {
186
+ enabled: 'hsl(var(--color-blue-500) / <alpha-value>)',
187
+ hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
188
+ pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
189
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
190
+ },
191
+ border: {
192
+ enabled: 'transparent',
193
+ hover: 'transparent',
194
+ pressed: 'transparent',
195
+ disabled: 'transparent',
196
+ },
197
+ },
198
+ icon: {
199
+ fill: {
64
200
  border: {
65
201
  enabled: 'transparent',
66
202
  hover: 'transparent',
@@ -77,46 +213,26 @@ module.exports = {
77
213
  enabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
78
214
  hover: 'hsl(var(--color-neutral-000) / <alpha-value>)',
79
215
  pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
80
- disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
216
+ disabled: 'hsl(var(--color-neutral-000) / <alpha-value>)',
81
217
  },
82
218
  },
83
- secondary: {
219
+ outline: {
84
220
  border: {
85
- enabled: 'transparent',
221
+ enabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
86
222
  hover: 'transparent',
87
223
  pressed: 'transparent',
88
- disabled: 'transparent',
89
- },
90
- background: {
91
- enabled: 'hsl(var(--color-blue-700) / <alpha-value>)',
92
- hover: 'hsl(var(--color-blue-800) / <alpha-value>)',
93
- pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
94
224
  disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
95
225
  },
96
- content: {
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
- },
102
- },
103
- tertiary: {
104
- border: {
105
- enabled: 'transparent',
106
- hover: 'transparent',
107
- pressed: 'transparent',
108
- disabled: 'transparent',
109
- },
110
226
  background: {
111
- enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
112
- hover: 'hsl(var(--color-neutral-700) / <alpha-value>)',
227
+ enabled: 'transparent',
228
+ hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
113
229
  pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
114
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
230
+ disabled: 'transparent',
115
231
  },
116
232
  content: {
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>)',
233
+ enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
234
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
235
+ pressed: 'hsl(var(--color-neutral-000) / <alpha-value>)',
120
236
  disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
121
237
  },
122
238
  },
@@ -140,24 +256,24 @@ module.exports = {
140
256
  disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
141
257
  },
142
258
  },
143
- outline: {
259
+ 'blue-subtle': {
260
+ border: {
261
+ enabled: 'transparent',
262
+ hover: 'transparent',
263
+ pressed: 'transparent',
264
+ disabled: 'transparent',
265
+ },
144
266
  background: {
145
267
  enabled: 'transparent',
146
- hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
147
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
268
+ hover: 'hsl(var(--color-neutral-050) / <alpha-value>)',
269
+ pressed: 'hsl(var(--color-blue-000) / <alpha-value>)',
148
270
  disabled: 'transparent',
149
271
  },
150
272
  content: {
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
- },
156
- border: {
157
273
  enabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
158
- hover: 'transparent',
159
- pressed: 'transparent',
160
- disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
274
+ hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
275
+ pressed: 'hsl(var(--color-blue-500) / <alpha-value>)',
276
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
161
277
  },
162
278
  },
163
279
  destructive: {
@@ -180,286 +296,175 @@ module.exports = {
180
296
  disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
181
297
  },
182
298
  },
183
- link: {
184
- content: {
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
- },
190
- border: {
191
- enabled: 'transparent',
192
- hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
193
- pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
194
- disabled: 'transparent',
195
- },
196
- },
197
- icon: {
198
- fill: {
199
- border: {
200
- enabled: 'transparent',
201
- hover: 'transparent',
202
- pressed: 'transparent',
203
- disabled: 'transparent',
204
- },
205
- background: {
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
- },
211
- content: {
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
- },
217
- },
218
- outline: {
219
- border: {
220
- enabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
221
- hover: 'transparent',
222
- pressed: 'transparent',
223
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
224
- },
225
- background: {
226
- enabled: 'transparent',
227
- hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
228
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
229
- disabled: 'transparent',
230
- },
231
- content: {
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
- },
237
- },
238
- ghost: {
239
- border: {
240
- enabled: 'transparent',
241
- hover: 'transparent',
242
- pressed: 'transparent',
243
- disabled: 'transparent',
244
- },
245
- background: {
246
- enabled: 'transparent',
247
- hover: 'hsl(var(--color-neutral-300) / <alpha-value>)',
248
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
249
- disabled: 'transparent',
250
- },
251
- content: {
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
- },
257
- },
258
- 'blue-subtle': {
259
- border: {
260
- enabled: 'transparent',
261
- hover: 'transparent',
262
- pressed: 'transparent',
263
- disabled: 'transparent',
264
- },
265
- background: {
266
- enabled: 'transparent',
267
- hover: 'hsl(var(--color-neutral-050) / <alpha-value>)',
268
- pressed: 'hsl(var(--color-blue-000) / <alpha-value>)',
269
- disabled: 'transparent',
270
- },
271
- content: {
272
- enabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
273
- hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
274
- pressed: 'hsl(var(--color-blue-500) / <alpha-value>)',
275
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
276
- },
277
- },
278
- destructive: {
279
- border: {
280
- enabled: 'transparent',
281
- hover: 'transparent',
282
- pressed: 'transparent',
283
- disabled: 'transparent',
284
- },
285
- background: {
286
- enabled: 'hsl(var(--color-brand-200) / <alpha-value>)',
287
- hover: 'hsl(var(--color-brand-300) / <alpha-value>)',
288
- pressed: 'hsl(var(--color-brand-400) / <alpha-value>)',
289
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
290
- },
291
- content: {
292
- enabled: 'hsl(var(--color-neutral-900) / <alpha-value>)',
293
- hover: 'hsl(var(--color-neutral-900) / <alpha-value>)',
294
- pressed: 'hsl(var(--color-neutral-900) / <alpha-value>)',
295
- disabled: 'hsl(var(--color-neutral-500) / <alpha-value>)',
296
- },
297
- },
298
- },
299
299
  },
300
- content: {
301
- text: {
302
- default: 'hsl(var(--color-neutral-900) / <alpha-value>)',
303
- subtle: 'hsl(var(--color-neutral-700) / <alpha-value>)',
304
- subtlest: 'hsl(var(--color-neutral-500) / <alpha-value>)',
305
- inverse: 'hsl(var(--color-neutral-000) / <alpha-value>)',
306
- 'inverse-subtle': 'hsl(var(--color-neutral-300) / <alpha-value>)',
307
- 'inverse-subtlest': 'hsl(var(--color-neutral-400) / <alpha-value>)',
308
- disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
309
- 'disabled-bolder': 'hsl(var(--color-neutral-400) / <alpha-value>)',
310
- },
311
- utility: {
312
- warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
313
- error: 'hsl(var(--color-error-main) / <alpha-value>)',
314
- success: 'hsl(var(--color-success-main) / <alpha-value>)',
315
- info: 'hsl(var(--color-info-main) / <alpha-value>)',
316
- },
317
- accent: {
318
- 'brand-subtle': 'hsl(var(--color-brand-300) / <alpha-value>)',
319
- brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
320
- 'brand-bolder': 'hsl(var(--color-brand-800) / <alpha-value>)',
321
- 'blue-subtle': 'hsl(var(--color-blue-300) / <alpha-value>)',
322
- blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
323
- 'blue-bolder': 'hsl(var(--color-blue-800) / <alpha-value>)',
324
- 'yellow-subtle': 'hsl(var(--color-yellow-200) / <alpha-value>)',
325
- yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
326
- 'yellow-bolder': 'hsl(var(--color-yellow-800) / <alpha-value>)',
327
- },
328
- link: {
329
- default: 'hsl(var(--color-blue-500) / <alpha-value>)',
330
- hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
331
- pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
332
- },
300
+ },
301
+ content: {
302
+ text: {
303
+ default: 'hsl(var(--color-neutral-900) / <alpha-value>)',
304
+ subtle: 'hsl(var(--color-neutral-700) / <alpha-value>)',
305
+ subtlest: 'hsl(var(--color-neutral-500) / <alpha-value>)',
306
+ inverse: 'hsl(var(--color-neutral-000) / <alpha-value>)',
307
+ 'inverse-subtle': 'hsl(var(--color-neutral-300) / <alpha-value>)',
308
+ 'inverse-subtlest': 'hsl(var(--color-neutral-400) / <alpha-value>)',
309
+ disabled: 'hsl(var(--color-neutral-300) / <alpha-value>)',
310
+ 'disabled-bolder': 'hsl(var(--color-neutral-400) / <alpha-value>)',
333
311
  },
334
- surface: {
335
- primary: 'hsl(var(--color-white) / <alpha-value>)',
336
- secondary: 'hsl(var(--color-neutral-100) / <alpha-value>)',
337
- overlay: 'hsl(var(--color-black) / 50%)',
312
+ utility: {
313
+ warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
314
+ error: 'hsl(var(--color-error-main) / <alpha-value>)',
315
+ success: 'hsl(var(--color-success-main) / <alpha-value>)',
316
+ info: 'hsl(var(--color-info-main) / <alpha-value>)',
338
317
  },
339
- background: {
340
- transparent: 'transparent',
341
- white: 'hsl(var(--color-white) / <alpha-value>)',
342
- black: 'hsl(var(--color-black) / <alpha-value>)',
343
- neutral: 'hsl(var(--color-neutral-050) / <alpha-value>)',
344
- disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
345
- 'brand-subtle': 'hsl(var(--color-brand-000) / <alpha-value>)',
318
+ accent: {
319
+ 'brand-subtle': 'hsl(var(--color-brand-300) / <alpha-value>)',
346
320
  brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
347
- 'brand-hover': 'hsl(var(--color-brand-600) / <alpha-value>)',
348
- 'brand-pressed': 'hsl(var(--color-brand-800) / <alpha-value>)',
349
- 'brand-bolder': 'hsl(var(--color-brand-900) / <alpha-value>)',
350
- 'blue-subtle': 'hsl(var(--color-blue-000) / <alpha-value>)',
321
+ 'brand-bolder': 'hsl(var(--color-brand-800) / <alpha-value>)',
322
+ 'blue-subtle': 'hsl(var(--color-blue-300) / <alpha-value>)',
351
323
  blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
352
- 'blue-hover': 'hsl(var(--color-blue-600) / <alpha-value>)',
353
- 'blue-pressed': 'hsl(var(--color-blue-800) / <alpha-value>)',
354
- 'blue-bolder': 'hsl(var(--color-blue-900) / <alpha-value>)',
355
- 'yellow-subtle': 'hsl(var(--color-yellow-000) / <alpha-value>)',
324
+ 'blue-bolder': 'hsl(var(--color-blue-800) / <alpha-value>)',
325
+ 'yellow-subtle': 'hsl(var(--color-yellow-200) / <alpha-value>)',
356
326
  yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
357
- 'yellow-hover': 'hsl(var(--color-yellow-600) / <alpha-value>)',
358
- 'yellow-pressed': 'hsl(var(--color-yellow-800) / <alpha-value>)',
359
- 'yellow-bolder': 'hsl(var(--color-yellow-900) / <alpha-value>)',
360
- utility: {
361
- 'error-light': 'hsl(var(--color-error-light) / <alpha-value>)',
362
- error: 'hsl(var(--color-error-main) / <alpha-value>)',
363
- 'warning-light': 'hsl(var(--color-warning-light) / <alpha-value>)',
364
- warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
365
- 'info-light': 'hsl(var(--color-info-light) / <alpha-value>)',
366
- info: 'hsl(var(--color-info-main) / <alpha-value>)',
367
- 'success-light': 'hsl(var(--color-success-light) / <alpha-value>)',
368
- success: 'hsl(var(--color-success-main) / <alpha-value>)',
369
- },
327
+ 'yellow-bolder': 'hsl(var(--color-yellow-800) / <alpha-value>)',
370
328
  },
371
- border: {
372
- transparent: 'transparent',
373
- subtle: 'hsl(var(--color-neutral-100) / <alpha-value>)',
374
- default: 'hsl(var(--color-neutral-300) / <alpha-value>)',
375
- bolder: 'hsl(var(--color-neutral-500) / <alpha-value>)',
376
- 'brand-subtle': 'hsl(var(--color-brand-100) / <alpha-value>)',
377
- brand: 'hsl(var(--color-brand-300) / <alpha-value>)',
378
- 'brand-bolder': 'hsl(var(--color-brand-500) / <alpha-value>)',
379
- 'blue-subtle': 'hsl(var(--color-blue-100) / <alpha-value>)',
380
- blue: 'hsl(var(--color-blue-300) / <alpha-value>)',
381
- 'blue-bolder': 'hsl(var(--color-blue-500) / <alpha-value>)',
382
- 'yellow-subtle': 'hsl(var(--color-yellow-100) / <alpha-value>)',
383
- yellow: 'hsl(var(--color-yellow-300) / <alpha-value>)',
384
- 'yellow-bolder': 'hsl(var(--color-yellow-500) / <alpha-value>)',
385
- utility: {
386
- warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
387
- error: 'hsl(var(--color-error-main) / <alpha-value>)',
388
- success: 'hsl(var(--color-success-main) / <alpha-value>)',
389
- info: 'hsl(var(--color-info-main) / <alpha-value>)',
390
- },
329
+ link: {
330
+ default: 'hsl(var(--color-blue-500) / <alpha-value>)',
331
+ hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
332
+ pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
391
333
  },
392
334
  },
393
- borderRadius: {
394
- none: '0',
395
- xs: '2px',
396
- sm: '4px',
397
- md: '6px',
398
- lg: '8px',
399
- xl: '12px',
400
- '2xl': '16px',
401
- '3xl': '24px',
402
- '4xl': '32px',
403
- full: '9999px',
335
+ surface: {
336
+ primary: 'hsl(var(--color-white) / <alpha-value>)',
337
+ secondary: 'hsl(var(--color-neutral-100) / <alpha-value>)',
338
+ overlay: 'hsl(var(--color-black) / 50%)',
404
339
  },
405
- borderWidth: {
406
- none: '0',
407
- xs: '0.5px',
408
- sm: '1px',
409
- md: '2px',
410
- lg: '4px',
340
+ background: {
341
+ transparent: 'transparent',
342
+ white: 'hsl(var(--color-white) / <alpha-value>)',
343
+ black: 'hsl(var(--color-black) / <alpha-value>)',
344
+ neutral: 'hsl(var(--color-neutral-050) / <alpha-value>)',
345
+ disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
346
+ 'brand-subtle': 'hsl(var(--color-brand-000) / <alpha-value>)',
347
+ brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
348
+ 'brand-hover': 'hsl(var(--color-brand-600) / <alpha-value>)',
349
+ 'brand-pressed': 'hsl(var(--color-brand-800) / <alpha-value>)',
350
+ 'brand-bolder': 'hsl(var(--color-brand-900) / <alpha-value>)',
351
+ 'blue-subtle': 'hsl(var(--color-blue-000) / <alpha-value>)',
352
+ blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
353
+ 'blue-hover': 'hsl(var(--color-blue-600) / <alpha-value>)',
354
+ 'blue-pressed': 'hsl(var(--color-blue-800) / <alpha-value>)',
355
+ 'blue-bolder': 'hsl(var(--color-blue-900) / <alpha-value>)',
356
+ 'yellow-subtle': 'hsl(var(--color-yellow-000) / <alpha-value>)',
357
+ yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
358
+ 'yellow-hover': 'hsl(var(--color-yellow-600) / <alpha-value>)',
359
+ 'yellow-pressed': 'hsl(var(--color-yellow-800) / <alpha-value>)',
360
+ 'yellow-bolder': 'hsl(var(--color-yellow-900) / <alpha-value>)',
361
+ utility: {
362
+ 'error-light': 'hsl(var(--color-error-light) / <alpha-value>)',
363
+ error: 'hsl(var(--color-error-main) / <alpha-value>)',
364
+ 'warning-light': 'hsl(var(--color-warning-light) / <alpha-value>)',
365
+ warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
366
+ 'info-light': 'hsl(var(--color-info-light) / <alpha-value>)',
367
+ info: 'hsl(var(--color-info-main) / <alpha-value>)',
368
+ 'success-light': 'hsl(var(--color-success-light) / <alpha-value>)',
369
+ success: 'hsl(var(--color-success-main) / <alpha-value>)',
370
+ },
411
371
  },
412
- boxShadow: {
413
- xs: '0px 2px 4px 0px rgba(25, 25, 25, 0.08), 0px 0px 2px 0px rgba(25, 25, 25, 0.08)',
414
- sm: '0px 4px 8px 0px rgba(25, 25, 25, 0.10), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
415
- md: '0px 8px 16px 0px rgba(25, 25, 25, 0.10), 0px 0px 6px 0px rgba(25, 25, 25, 0.08)',
416
- lg: '0px 10px 20px 0px rgba(0, 0, 0, 0.19), 0px 0px 8px 0px rgba(25, 25, 25, 0.08)',
417
- xl: '0px 12px 24px 0px rgba(25, 25, 25, 0.10), 0px 0px 10px 0px rgba(25, 25, 25, 0.08)',
418
- '2xl':
419
- '0px 16px 32px 0px rgba(25, 25, 25, 0.10), 0px 0px 12px 0px rgba(25, 25, 25, 0.08)',
372
+ border: {
373
+ transparent: 'transparent',
374
+ subtle: 'hsl(var(--color-neutral-100) / <alpha-value>)',
375
+ default: 'hsl(var(--color-neutral-300) / <alpha-value>)',
376
+ bolder: 'hsl(var(--color-neutral-500) / <alpha-value>)',
377
+ 'brand-subtle': 'hsl(var(--color-brand-100) / <alpha-value>)',
378
+ brand: 'hsl(var(--color-brand-300) / <alpha-value>)',
379
+ 'brand-bolder': 'hsl(var(--color-brand-500) / <alpha-value>)',
380
+ 'blue-subtle': 'hsl(var(--color-blue-100) / <alpha-value>)',
381
+ blue: 'hsl(var(--color-blue-300) / <alpha-value>)',
382
+ 'blue-bolder': 'hsl(var(--color-blue-500) / <alpha-value>)',
383
+ 'yellow-subtle': 'hsl(var(--color-yellow-100) / <alpha-value>)',
384
+ yellow: 'hsl(var(--color-yellow-300) / <alpha-value>)',
385
+ 'yellow-bolder': 'hsl(var(--color-yellow-500) / <alpha-value>)',
386
+ utility: {
387
+ warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
388
+ error: 'hsl(var(--color-error-main) / <alpha-value>)',
389
+ success: 'hsl(var(--color-success-main) / <alpha-value>)',
390
+ info: 'hsl(var(--color-info-main) / <alpha-value>)',
391
+ },
420
392
  },
421
- extend: {
422
- padding: {
423
- 'button-sm': '10px 24px',
424
- 'button-md': '12px 24px',
425
- 'button-lg': '12px 24px',
393
+ },
394
+ borderRadius: {
395
+ none: '0',
396
+ xs: '2px',
397
+ sm: '4px',
398
+ md: '6px',
399
+ lg: '8px',
400
+ xl: '12px',
401
+ '2xl': '16px',
402
+ '3xl': '24px',
403
+ '4xl': '32px',
404
+ full: '9999px',
405
+ },
406
+ borderWidth: {
407
+ none: '0',
408
+ xs: '0.5px',
409
+ sm: '1px',
410
+ md: '2px',
411
+ lg: '4px',
412
+ },
413
+ boxShadow: {
414
+ xs: '0px 2px 4px 0px rgba(25, 25, 25, 0.08), 0px 0px 2px 0px rgba(25, 25, 25, 0.08)',
415
+ sm: '0px 4px 8px 0px rgba(25, 25, 25, 0.10), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
416
+ md: '0px 8px 16px 0px rgba(25, 25, 25, 0.10), 0px 0px 6px 0px rgba(25, 25, 25, 0.08)',
417
+ lg: '0px 10px 20px 0px rgba(0, 0, 0, 0.19), 0px 0px 8px 0px rgba(25, 25, 25, 0.08)',
418
+ xl: '0px 12px 24px 0px rgba(25, 25, 25, 0.10), 0px 0px 10px 0px rgba(25, 25, 25, 0.08)',
419
+ '2xl':
420
+ '0px 16px 32px 0px rgba(25, 25, 25, 0.10), 0px 0px 12px 0px rgba(25, 25, 25, 0.08)',
421
+ },
422
+ extend: {
423
+ padding: {
424
+ 'button-sm': '10px 20px',
425
+ 'button-md': '12px 24px',
426
+ 'button-lg': '16px 28px',
427
+ },
428
+ animation: {
429
+ 'fade-in-top-to-bottom': 'fadeInTopToBottom 0.25s ease-out',
430
+ 'fade-out-bottom-to-top': 'fadeOutBottomToTop 0.25s ease-out',
431
+ 'fade-in-bottom-to-top': 'fadeInBottomToTop 0.25s ease-out',
432
+ 'fade-out-top-to-bottom': 'fadeOutTopToBottom 0.25s ease-out',
433
+ shimmer: 'shimmer-x 2s infinite',
434
+ },
435
+ keyframes: {
436
+ 'shimmer-x': {
437
+ '100%': {
438
+ transform: 'translateX(100%)',
439
+ },
426
440
  },
427
- animation: {
428
- 'fade-in-top-to-bottom': 'fadeInTopToBottom 0.25s ease-out',
429
- 'fade-out-bottom-to-top': 'fadeOutBottomToTop 0.25s ease-out',
430
- 'fade-in-bottom-to-top': 'fadeInBottomToTop 0.25s ease-out',
431
- 'fade-out-top-to-bottom': 'fadeOutTopToBottom 0.25s ease-out',
432
- shimmer: 'shimmer-x 2s infinite',
441
+ fadeInTopToBottom: {
442
+ '0%': { transform: 'translateY(-100%)', opacity: 0 },
443
+ '100%': { transform: 'translateY(0)', opacity: 1 },
433
444
  },
434
- keyframes: {
435
- 'shimmer-x': {
436
- '100%': {
437
- transform: 'translateX(100%)',
438
- },
439
- },
440
- fadeInTopToBottom: {
441
- '0%': { transform: 'translateY(-100%)', opacity: 0 },
442
- '100%': { transform: 'translateY(0)', opacity: 1 },
443
- },
444
- fadeOutBottomToTop: {
445
- '0%': { transform: 'translateY(0)', opacity: 1 },
446
- '100%': { transform: 'translateY(-100%)', opacity: 0 },
447
- },
448
- fadeInBottomToTop: {
449
- '0%': { transform: 'translateY(100%)', opacity: 0 },
450
- '100%': { transform: 'translateY(0)', opacity: 1 },
451
- },
452
- fadeOutTopToBottom: {
453
- '0%': { transform: 'translateY(0)', opacity: 1 },
454
- '100%': { transform: 'translateY(100%)', opacity: 0 },
455
- },
445
+ fadeOutBottomToTop: {
446
+ '0%': { transform: 'translateY(0)', opacity: 1 },
447
+ '100%': { transform: 'translateY(-100%)', opacity: 0 },
456
448
  },
457
- transitionTimingFunction: {
458
- 'circ-in': 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
459
- 'circ-out': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
460
- 'circ-in-out': 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
449
+ fadeInBottomToTop: {
450
+ '0%': { transform: 'translateY(100%)', opacity: 0 },
451
+ '100%': { transform: 'translateY(0)', opacity: 1 },
461
452
  },
453
+ fadeOutTopToBottom: {
454
+ '0%': { transform: 'translateY(0)', opacity: 1 },
455
+ '100%': { transform: 'translateY(100%)', opacity: 0 },
456
+ },
457
+ },
458
+ transitionTimingFunction: {
459
+ 'circ-in': 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
460
+ 'circ-out': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
461
+ 'circ-in-out': 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
462
462
  },
463
463
  },
464
- plugins: [require('@tailwindcss/forms')],
465
464
  }
465
+ export const plugins = [
466
+ require('@tailwindcss/forms'),
467
+ plugin(function ({ addVariant }) {
468
+ addVariant('loading', '&.loading')
469
+ }),
470
+ ]