@clasing/ui 0.1.2 → 0.1.9-beta.1

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 (7) hide show
  1. package/README.md +33 -0
  2. package/dist/index.d.ts +345 -38
  3. package/dist/index.es.js +4122 -1815
  4. package/dist/index.umd.js +16 -18
  5. package/dist/style.css +1 -1
  6. package/package.json +89 -85
  7. package/tailwind.config.js +386 -421
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-500) / <alpha-value>)',
92
- hover: 'hsl(var(--color-blue-700) / <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,337 +296,186 @@ 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
- bg: {
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
- bg: {
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
- bg: {
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
- },
259
299
  },
260
- content: {
261
- text: {
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
- },
271
- utility: {
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
- },
281
- accent: {
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
- },
306
- link: {
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
- },
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>)',
311
311
  },
312
- surface: {
313
- neutral: {
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
- },
321
- accent: {
322
- 'brand-subtlest': 'hsl(var(--color-brand-000) / <alpha-value>)',
323
- 'brand-subtle': 'hsl(var(--color-brand-100) / <alpha-value>)',
324
- },
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>)',
325
317
  },
326
- bg: {
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>)',
318
+ accent: {
319
+ 'brand-subtle': 'hsl(var(--color-brand-300) / <alpha-value>)',
341
320
  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
- accent: {
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>)',
405
- },
406
- utility: {
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>)',
446
- },
321
+ 'brand-bolder': 'hsl(var(--color-brand-800) / <alpha-value>)',
322
+ 'blue-subtle': 'hsl(var(--color-blue-300) / <alpha-value>)',
323
+ blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
324
+ 'blue-bolder': 'hsl(var(--color-blue-800) / <alpha-value>)',
325
+ 'yellow-subtle': 'hsl(var(--color-yellow-200) / <alpha-value>)',
326
+ yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
327
+ 'yellow-bolder': 'hsl(var(--color-yellow-800) / <alpha-value>)',
328
+ 'violet-subtle': 'hsl(var(--color-violet-200) / <alpha-value>)',
329
+ violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
330
+ 'violet-bolder': 'hsl(var(--color-violet-800) / <alpha-value>)',
447
331
  },
448
- border: {
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>)',
458
- transparent: 'transparent',
459
- accent: {
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>)',
469
- },
470
- utility: {
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>)',
476
- },
332
+ link: {
333
+ default: 'hsl(var(--color-blue-500) / <alpha-value>)',
334
+ hover: 'hsl(var(--color-blue-700) / <alpha-value>)',
335
+ pressed: 'hsl(var(--color-blue-900) / <alpha-value>)',
477
336
  },
478
337
  },
479
- borderRadius: {
480
- none: '0',
481
- xs: '2px',
482
- sm: '4px',
483
- md: '6px',
484
- lg: '8px',
485
- xl: '12px',
486
- '2xl': '16px',
487
- '3xl': '24px',
488
- '4xl': '32px',
489
- full: '9999px',
338
+ surface: {
339
+ primary: 'hsl(var(--color-white) / <alpha-value>)',
340
+ secondary: 'hsl(var(--color-neutral-100) / <alpha-value>)',
341
+ overlay: 'hsl(var(--color-black) / 50%)',
490
342
  },
491
- borderWidth: {
492
- none: '0',
493
- xs: '0.5px',
494
- sm: '1px',
495
- md: '2px',
496
- lg: '4px',
343
+ background: {
344
+ transparent: 'transparent',
345
+ white: 'hsl(var(--color-white) / <alpha-value>)',
346
+ black: 'hsl(var(--color-black) / <alpha-value>)',
347
+ neutral: 'hsl(var(--color-neutral-050) / <alpha-value>)',
348
+ disabled: 'hsl(var(--color-neutral-100) / <alpha-value>)',
349
+ 'brand-subtle': 'hsl(var(--color-brand-000) / <alpha-value>)',
350
+ brand: 'hsl(var(--color-brand-500) / <alpha-value>)',
351
+ 'brand-hover': 'hsl(var(--color-brand-600) / <alpha-value>)',
352
+ 'brand-pressed': 'hsl(var(--color-brand-800) / <alpha-value>)',
353
+ 'brand-bolder': 'hsl(var(--color-brand-900) / <alpha-value>)',
354
+ 'blue-subtle': 'hsl(var(--color-blue-000) / <alpha-value>)',
355
+ blue: 'hsl(var(--color-blue-500) / <alpha-value>)',
356
+ 'blue-hover': 'hsl(var(--color-blue-600) / <alpha-value>)',
357
+ 'blue-pressed': 'hsl(var(--color-blue-800) / <alpha-value>)',
358
+ 'blue-bolder': 'hsl(var(--color-blue-900) / <alpha-value>)',
359
+ 'yellow-subtle': 'hsl(var(--color-yellow-000) / <alpha-value>)',
360
+ yellow: 'hsl(var(--color-yellow-500) / <alpha-value>)',
361
+ 'yellow-hover': 'hsl(var(--color-yellow-600) / <alpha-value>)',
362
+ 'yellow-pressed': 'hsl(var(--color-yellow-800) / <alpha-value>)',
363
+ 'yellow-bolder': 'hsl(var(--color-yellow-900) / <alpha-value>)',
364
+ 'violet-subtle': 'hsl(var(--color-violet-000) / <alpha-value>)',
365
+ violet: 'hsl(var(--color-violet-500) / <alpha-value>)',
366
+ 'violet-hover': 'hsl(var(--color-violet-600) / <alpha-value>)',
367
+ 'violet-pressed': 'hsl(var(--color-violet-800) / <alpha-value>)',
368
+ 'violet-bolder': 'hsl(var(--color-violet-900) / <alpha-value>)',
369
+ utility: {
370
+ 'error-light': 'hsl(var(--color-error-light) / <alpha-value>)',
371
+ error: 'hsl(var(--color-error-main) / <alpha-value>)',
372
+ 'warning-light': 'hsl(var(--color-warning-light) / <alpha-value>)',
373
+ warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
374
+ 'info-light': 'hsl(var(--color-info-light) / <alpha-value>)',
375
+ info: 'hsl(var(--color-info-main) / <alpha-value>)',
376
+ 'success-light': 'hsl(var(--color-success-light) / <alpha-value>)',
377
+ success: 'hsl(var(--color-success-main) / <alpha-value>)',
378
+ },
497
379
  },
498
- boxShadow: {
499
- xs: '0px 1px 2px 0px rgba(16, 24, 40, 0.04), 0px 1px 2px 0px rgba(16, 24, 40, 0.04)',
500
- sm: '0px 2px 6px 0px rgba(16, 24, 40, 0.06)',
501
- md: '0px 6px 15px -2px rgba(16, 24, 40, 0.08), 0px 6px 15px -2px rgba(16, 24, 40, 0.08)',
502
- lg: '0px 8px 24px -3px rgba(16, 24, 40, 0.05), 0px 8px 24px -3px rgba(16, 24, 40, 0.10)',
503
- xl: '0px 20px 40px -8px rgba(16, 24, 40, 0.05), 0px 20px 40px -8px rgba(16, 24, 40, 0.10)',
504
- '2xl':
505
- '0px 25px 60px -15px rgba(16, 24, 40, 0.12), 0px 25px 60px -15px rgba(16, 24, 40, 0.20)',
380
+ border: {
381
+ transparent: 'transparent',
382
+ subtle: 'hsl(var(--color-neutral-100) / <alpha-value>)',
383
+ default: 'hsl(var(--color-neutral-300) / <alpha-value>)',
384
+ bolder: 'hsl(var(--color-neutral-500) / <alpha-value>)',
385
+ 'brand-subtle': 'hsl(var(--color-brand-100) / <alpha-value>)',
386
+ brand: 'hsl(var(--color-brand-300) / <alpha-value>)',
387
+ 'brand-bolder': 'hsl(var(--color-brand-500) / <alpha-value>)',
388
+ 'blue-subtle': 'hsl(var(--color-blue-100) / <alpha-value>)',
389
+ blue: 'hsl(var(--color-blue-300) / <alpha-value>)',
390
+ 'blue-bolder': 'hsl(var(--color-blue-500) / <alpha-value>)',
391
+ 'yellow-subtle': 'hsl(var(--color-yellow-100) / <alpha-value>)',
392
+ yellow: 'hsl(var(--color-yellow-300) / <alpha-value>)',
393
+ 'yellow-bolder': 'hsl(var(--color-yellow-500) / <alpha-value>)',
394
+ 'violet-subtle': 'hsl(var(--color-violet-100) / <alpha-value>)',
395
+ violet: 'hsl(var(--color-violet-300) / <alpha-value>)',
396
+ 'violet-bolder': 'hsl(var(--color-violet-500) / <alpha-value>)',
397
+ utility: {
398
+ warning: 'hsl(var(--color-warning-main) / <alpha-value>)',
399
+ error: 'hsl(var(--color-error-main) / <alpha-value>)',
400
+ success: 'hsl(var(--color-success-main) / <alpha-value>)',
401
+ info: 'hsl(var(--color-info-main) / <alpha-value>)',
402
+ },
506
403
  },
507
- extend: {
508
- padding: {
509
- 'button-sm': '10px 24px',
510
- 'button-md': '12px 24px',
511
- 'button-lg': '12px 24px',
404
+ },
405
+ borderRadius: {
406
+ none: '0',
407
+ xs: '2px',
408
+ sm: '4px',
409
+ md: '6px',
410
+ lg: '8px',
411
+ xl: '12px',
412
+ '2xl': '16px',
413
+ '3xl': '24px',
414
+ '4xl': '32px',
415
+ full: '9999px',
416
+ },
417
+ borderWidth: {
418
+ none: '0',
419
+ xs: '0.5px',
420
+ sm: '1px',
421
+ md: '2px',
422
+ lg: '4px',
423
+ },
424
+ boxShadow: {
425
+ none: 'none',
426
+ xs: '0px 2px 4px 0px rgba(25, 25, 25, 0.08), 0px 0px 2px 0px rgba(25, 25, 25, 0.08)',
427
+ sm: '0px 4px 8px 0px rgba(25, 25, 25, 0.10), 0px 0px 4px 0px rgba(0, 0, 0, 0.08)',
428
+ md: '0px 8px 16px 0px rgba(25, 25, 25, 0.10), 0px 0px 6px 0px rgba(25, 25, 25, 0.08)',
429
+ lg: '0px 10px 20px 0px rgba(0, 0, 0, 0.19), 0px 0px 8px 0px rgba(25, 25, 25, 0.08)',
430
+ xl: '0px 12px 24px 0px rgba(25, 25, 25, 0.10), 0px 0px 10px 0px rgba(25, 25, 25, 0.08)',
431
+ '2xl':
432
+ '0px 16px 32px 0px rgba(25, 25, 25, 0.10), 0px 0px 12px 0px rgba(25, 25, 25, 0.08)',
433
+ },
434
+ extend: {
435
+ padding: {
436
+ 'button-sm': '10px 20px',
437
+ 'button-md': '12px 24px',
438
+ 'button-lg': '16px 28px',
439
+ },
440
+ animation: {
441
+ 'fade-in-top-to-bottom': 'fadeInTopToBottom 0.25s ease-out',
442
+ 'fade-out-bottom-to-top': 'fadeOutBottomToTop 0.25s ease-out',
443
+ 'fade-in-bottom-to-top': 'fadeInBottomToTop 0.25s ease-out',
444
+ 'fade-out-top-to-bottom': 'fadeOutTopToBottom 0.25s ease-out',
445
+ shimmer: 'shimmer-x 2s infinite',
446
+ },
447
+ keyframes: {
448
+ 'shimmer-x': {
449
+ '0%': { transform: 'translateX(-100%)' }, // Añadir keyframe inicial
450
+ '100%': { transform: 'translateX(100%)' },
451
+ },
452
+ fadeInTopToBottom: {
453
+ '0%': { transform: 'translateY(-100%)', opacity: 0 },
454
+ '100%': { transform: 'translateY(0)', opacity: 1 },
512
455
  },
456
+ fadeOutBottomToTop: {
457
+ '0%': { transform: 'translateY(0)', opacity: 1 },
458
+ '100%': { transform: 'translateY(-100%)', opacity: 0 },
459
+ },
460
+ fadeInBottomToTop: {
461
+ '0%': { transform: 'translateY(100%)', opacity: 0 },
462
+ '100%': { transform: 'translateY(0)', opacity: 1 },
463
+ },
464
+ fadeOutTopToBottom: {
465
+ '0%': { transform: 'translateY(0)', opacity: 1 },
466
+ '100%': { transform: 'translateY(100%)', opacity: 0 },
467
+ },
468
+ },
469
+ transitionTimingFunction: {
470
+ 'circ-in': 'cubic-bezier(0.600, 0.040, 0.980, 0.335)',
471
+ 'circ-out': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
472
+ 'circ-in-out': 'cubic-bezier(0.785, 0.135, 0.150, 0.860)',
513
473
  },
514
474
  },
515
- plugins: [],
516
475
  }
476
+ export const plugins = [
477
+ require('@tailwindcss/forms'),
478
+ plugin(function ({ addVariant }) {
479
+ addVariant('loading', '&.loading')
480
+ }),
481
+ ]