@clasing/ui 0.0.4 → 0.0.42

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 (2) hide show
  1. package/package.json +5 -3
  2. package/tailwind.config.js +421 -0
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "@clasing/ui",
3
- "version": "0.0.4",
3
+ "version": "0.0.42",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.js",
6
6
  "module": "./dist/index.es.js",
7
7
  "types": "./dist/index.d.ts",
8
8
  "files": [
9
- "dist"
9
+ "dist",
10
+ "tailwind.config.js"
10
11
  ],
11
12
  "exports": {
12
13
  ".": {
@@ -14,7 +15,8 @@
14
15
  "require": "./dist/index.umd.js",
15
16
  "types": "./dist/index.d.ts"
16
17
  },
17
- "./styles": "./dist/style.css"
18
+ "./styles": "./dist/style.css",
19
+ "./tailwind.config.js": "./tailwind.config.js"
18
20
  },
19
21
  "scripts": {
20
22
  "dev": "vite",
@@ -0,0 +1,421 @@
1
+ /* eslint-disable no-undef */
2
+
3
+ /** @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: {
64
+ background: {
65
+ enabled: 'var(--color-brand-500)',
66
+ hover: 'var(--color-brand-700)',
67
+ pressed: 'var(--color-brand-900)',
68
+ disabled: 'var(--color-neutral-300)',
69
+ },
70
+ content: {
71
+ enabled: 'var(--color-neutral-000)',
72
+ hover: 'var(--color-neutral-000)',
73
+ pressed: 'var(--color-neutral-000)',
74
+ disabled: 'var(--color-neutral-500)',
75
+ },
76
+ },
77
+ secondary: {
78
+ background: {
79
+ enabled: 'var(--color-blue-500)',
80
+ hover: 'var(--color-blue-700)',
81
+ pressed: 'var(--color-blue-900)',
82
+ disabled: 'var(--color-neutral-300)',
83
+ },
84
+ content: {
85
+ enabled: 'var(--color-neutral-000)',
86
+ hover: 'var(--color-neutral-000)',
87
+ pressed: 'var(--color-neutral-000)',
88
+ disabled: 'var(--color-neutral-500)',
89
+ },
90
+ },
91
+ tertiary: {
92
+ background: {
93
+ enabled: 'var(--color-neutral-900)',
94
+ hover: 'var(--color-neutral-700)',
95
+ pressed: 'var(--color-neutral-900)',
96
+ disabled: 'var(--color-neutral-300)',
97
+ },
98
+ content: {
99
+ enabled: 'var(--color-blue-000)',
100
+ hover: 'var(--color-blue-000)',
101
+ pressed: 'var(--color-blue-000)',
102
+ disabled: 'var(--color-neutral-500)',
103
+ },
104
+ },
105
+ ghost: {
106
+ background: {
107
+ enabled: 'transparent',
108
+ hover: 'var(--color-neutral-300)',
109
+ pressed: 'var(--color-neutral-900)',
110
+ disabled: 'transparent',
111
+ },
112
+ content: {
113
+ enabled: 'var(--color-neutral-900)',
114
+ hover: 'var(--color-neutral-900)',
115
+ pressed: 'var(--color-neutral-000)',
116
+ disabled: 'var(--color-neutral-500)',
117
+ },
118
+ },
119
+ outline: {
120
+ background: {
121
+ enabled: 'transparent',
122
+ hover: 'var(--color-neutral-300)',
123
+ pressed: 'var(--color-neutral-900)',
124
+ disabled: 'transparent',
125
+ },
126
+ content: {
127
+ enabled: 'var(--color-neutral-900)',
128
+ hover: 'var(--color-neutral-900)',
129
+ pressed: 'var(--color-neutral-000)',
130
+ disabled: 'var(--color-neutral-500)',
131
+ },
132
+ outline: {
133
+ enabled: 'var(--color-neutral-500)',
134
+ hover: 'transparent',
135
+ pressed: 'transparent',
136
+ disabled: 'var(--color-neutral-500)',
137
+ },
138
+ },
139
+ destructive: {
140
+ background: {
141
+ enabled: 'var(--color-brand-200)',
142
+ hover: 'var(--color-brand-300)',
143
+ pressed: 'var(--color-brand-400)',
144
+ disabled: 'var(--color-neutral-300)',
145
+ },
146
+ content: {
147
+ enabled: 'var(--color-neutral-900)',
148
+ hover: 'var(--color-neutral-900)',
149
+ pressed: 'var(--color-neutral-900)',
150
+ disabled: 'var(--color-neutral-500)',
151
+ },
152
+ },
153
+ icon: {
154
+ fill: {
155
+ bg: {
156
+ enabled: 'var(--color-brand-500)',
157
+ hover: 'var(--color-brand-700)',
158
+ pressed: 'var(--color-brand-900)',
159
+ disabled: 'var(--color-neutral-300)',
160
+ },
161
+ content: {
162
+ enabled: 'var(--color-neutral-000)',
163
+ hover: 'var(--color-neutral-000)',
164
+ pressed: 'var(--color-neutral-000)',
165
+ disabled: 'var(--color-neutral-000)',
166
+ },
167
+ },
168
+ outline: {
169
+ outline: {
170
+ enabled: 'var(--color-neutral-500)',
171
+ hover: 'transparent',
172
+ pressed: 'transparent',
173
+ disabled: 'var(--color-neutral-300)',
174
+ },
175
+ bg: {
176
+ enabled: 'transparent',
177
+ hover: 'var(--color-neutral-300)',
178
+ pressed: 'var(--color-neutral-900)',
179
+ disabled: 'transparent',
180
+ },
181
+ content: {
182
+ enabled: 'var(--color-neutral-900)',
183
+ hover: 'var(--color-neutral-900)',
184
+ pressed: 'var(--color-neutral-000)',
185
+ disabled: 'var(--color-neutral-500)',
186
+ },
187
+ },
188
+ },
189
+ },
190
+ content: {
191
+ text: {
192
+ default: 'var(--color-neutral-900)',
193
+ subtle: 'var(--color-neutral-700)',
194
+ subtlest: 'var(--color-neutral-500)',
195
+ inverse: 'var(--color-neutral-000)',
196
+ 'subtle-inverse': 'var(--color-neutral-300)',
197
+ 'subtlest-inverse': 'var(--color-neutral-500)',
198
+ disabled: 'var(--color-neutral-200)',
199
+ 'disabled-bolder': 'var(--color-neutral-400)',
200
+ },
201
+ utility: {
202
+ warning: 'var(--color-mustard-500)',
203
+ 'warning-bolder': 'var(--color-mustard-900)',
204
+ danger: 'var(--color-fuchsia-500)',
205
+ 'danger-bolder': 'var(--color-fuchsia-900)',
206
+ success: 'var(--color-lime-500)',
207
+ 'success-bolder': 'var(--color-lime-900)',
208
+ discovery: 'var(--color-violet-500)',
209
+ informative: 'var(--color-marine-500)',
210
+ },
211
+ accent: {
212
+ 'brand-subtle': 'var(--color-brand-200)',
213
+ brand: 'var(--color-brand-500)',
214
+ 'brand-bolder': 'var(--color-brand-800)',
215
+ blue: 'var(--color-blue-500)',
216
+ 'blue-bolder': 'var(--color-blue-800)',
217
+ mustard: 'var(--color-mustard-500)',
218
+ 'mustard-bolder': 'var(--color-mustard-800)',
219
+ green: 'var(--color-green-500)',
220
+ 'green-bolder': 'var(--color-green-800)',
221
+ lime: 'var(--color-lime-500)',
222
+ 'lime-bolder': 'var(--color-lime-800)',
223
+ fuchsia: 'var(--color-fuchsia-500)',
224
+ 'fuchsia-bolder': 'var(--color-fuchsia-800)',
225
+ marine: 'var(--color-marine-500)',
226
+ 'marine-bolder': 'var(--color-marine-800)',
227
+ violet: 'var(--color-violet-500)',
228
+ 'violet-bolder': 'var(--color-violet-800)',
229
+ gray: 'var(--color-gray-500)',
230
+ 'gray-bolder': 'var(--color-gray-800)',
231
+ 'ice-subtlest': 'var(--color-ice-100)',
232
+ 'ice-subtle': 'var(--color-ice-300)',
233
+ ice: 'var(--color-ice-500)',
234
+ 'ice-bolder': 'var(--color-ice-800)',
235
+ },
236
+ link: {
237
+ enabled: 'var(--color-blue-500)',
238
+ hover: 'var(--color-blue-700)',
239
+ pressed: 'var(--color-blue-900)',
240
+ },
241
+ },
242
+ surface: {
243
+ neutral: {
244
+ primary: 'var(--color-neutral-000)',
245
+ secondary: 'var(--color-neutral-100)',
246
+ tertiary: 'var(--color-neutral-200)',
247
+ 'primary-inverse': 'var(--color-neutral-900)',
248
+ 'secondary-inverse': 'var(--color-neutral-800)',
249
+ 'tertiary-inverse': 'var(--color-neutral-700)',
250
+ },
251
+ accent: {
252
+ 'brand-subtlest': 'var(--color-brand-000)',
253
+ 'brand-subtle': 'var(--color-brand-100)',
254
+ },
255
+ },
256
+ bg: {
257
+ white: 'var(--color-neutral-000)',
258
+ disabled: 'var(--color-neutral-400)',
259
+ default: 'var(--color-neutral-200)',
260
+ 'default-hover': 'var(--color-neutral-400)',
261
+ 'default-pressed': 'var(--color-neutral-600)',
262
+ subtle: 'var(--color-neutral-100)',
263
+ 'subtle-hover': 'var(--color-neutral-200)',
264
+ 'subtle-pressed': 'var(--color-neutral-400)',
265
+ bolder: 'var(--color-neutral-800)',
266
+ 'bolder-hover': 'var(--color-neutral-900)',
267
+ 'bolder-pressed': 'var(--color-neutral-900)',
268
+ 'brand-subtle': 'var(--color-brand-000)',
269
+ 'brand-subtle-hover': 'var(--color-brand-200)',
270
+ 'brand-subtle-pressed': 'var(--color-brand-400)',
271
+ brand: 'var(--color-brand-500)',
272
+ 'brand-hover': 'var(--color-brand-700)',
273
+ 'brand-pressed': 'var(--color-brand-900)',
274
+ accent: {
275
+ 'blue-subtle': 'var(--color-blue-000)',
276
+ 'blue-subtle-hover': 'var(--color-blue-200)',
277
+ 'blue-subtle-pressed': 'var(--color-blue-400)',
278
+ blue: 'var(--color-blue-500)',
279
+ 'blue-hover': 'var(--color-blue-700)',
280
+ 'blue-pressed': 'var(--color-blue-900)',
281
+ 'mustard-subtle': 'var(--color-mustard-000)',
282
+ 'mustard-subtle-hover': 'var(--color-mustard-200)',
283
+ 'mustard-subtle-pressed': 'var(--color-mustard-500)',
284
+ mustard: 'var(--color-mustard-500)',
285
+ 'mustard-hover': 'var(--color-mustard-700)',
286
+ 'mustard-pressed': 'var(--color-mustard-900)',
287
+ 'green-subtle': 'var(--color-green-000)',
288
+ 'green-subtle-hover': 'var(--color-green-200)',
289
+ 'green-subtle-pressed': 'var(--color-green-500)',
290
+ green: 'var(--color-green-500)',
291
+ 'green-hover': 'var(--color-green-700)',
292
+ 'green-pressed': 'var(--color-green-900)',
293
+ 'lime-subtle': 'var(--color-lime-000)',
294
+ 'lime-subtle-hover': 'var(--color-lime-200)',
295
+ 'lime-subtle-pressed': 'var(--color-lime-500)',
296
+ lime: 'var(--color-lime-500)',
297
+ 'lime-hover': 'var(--color-lime-700)',
298
+ 'lime-pressed': 'var(--color-lime-900)',
299
+ 'fuchsia-subtle': 'var(--color-fuchsia-000)',
300
+ 'fuchsia-subtle-hover': 'var(--color-fuchsia-200)',
301
+ 'fuchsia-subtle-pressed': 'var(--color-fuchsia-500)',
302
+ fuchsia: 'var(--color-fuchsia-500)',
303
+ 'fuchsia-hover': 'var(--color-fuchsia-700)',
304
+ 'fuchsia-pressed': 'var(--color-fuchsia-900)',
305
+ 'marine-subtle': 'var(--color-marine-000)',
306
+ 'marine-subtle-hover': 'var(--color-marine-200)',
307
+ 'marine-subtle-pressed': 'var(--color-marine-500)',
308
+ marine: 'var(--color-marine-500)',
309
+ 'marine-hover': 'var(--color-marine-700)',
310
+ 'marine-pressed': 'var(--color-marine-500)',
311
+ 'violet-subtle': 'var(--color-violet-000)',
312
+ 'violet-subtle-hover': 'var(--color-violet-200)',
313
+ 'violet-subtle-pressed': 'var(--color-violet-500)',
314
+ violet: 'var(--color-violet-500)',
315
+ 'violet-hover': 'var(--color-violet-700)',
316
+ 'violet-pressed': 'var(--color-violet-900)',
317
+ 'gray-subtle': 'var(--color-gray-000)',
318
+ 'gray-subtle-hover': 'var(--color-gray-200)',
319
+ 'gray-subtle-pressed': 'var(--color-gray-500)',
320
+ gray: 'var(--color-gray-500)',
321
+ 'gray-hover': 'var(--color-gray-700)',
322
+ 'gray-pressed': 'var(--color-gray-900)',
323
+ 'ice-subtle': 'var(--color-ice-000)',
324
+ 'ice-subtle-hover': 'var(--color-ice-200)',
325
+ 'ice-subtle-pressed': 'var(--color-ice-500)',
326
+ ice: 'var(--color-ice-500)',
327
+ 'ice-hover': 'var(--color-ice-700)',
328
+ 'ice-pressed': 'var(--color-ice-900)',
329
+ },
330
+ utility: {
331
+ danger: 'var(--color-fuchsia-000)',
332
+ 'danger-hover': 'var(--color-fuchsia-300)',
333
+ 'danger-pressed': 'var(--color-fuchsia-500)',
334
+ 'danger-bolder': 'var(--color-fuchsia-500)',
335
+ 'danger-bolder-hover': 'var(--color-fuchsia-700)',
336
+ 'danger-bolder-pressed': 'var(--color-fuchsia-900)',
337
+ warning: 'var(--color-mustard-000)',
338
+ 'warning-hover': 'var(--color-mustard-300)',
339
+ 'warning-pressed': 'var(--color-mustard-500)',
340
+ 'warning-bolder': 'var(--color-mustard-500)',
341
+ 'warning-bolder-hover': 'var(--color-mustard-700)',
342
+ 'warning-bolder-pressed': 'var(--color-mustard-900)',
343
+ success: 'var(--color-lime-000)',
344
+ 'success-hover': 'var(--color-lime-200)',
345
+ 'success-pressed': 'var(--color-lime-500)',
346
+ 'success-bolder': 'var(--color-lime-500)',
347
+ 'success-bolder-hover': 'var(--color-lime-700)',
348
+ 'success-bolder-pressed': 'var(--color-lime-900)',
349
+ discovery: 'var(--color-violet-000)',
350
+ 'discovery-hover': 'var(--color-violet-300)',
351
+ 'discovery-pressed': 'var(--color-violet-500)',
352
+ 'discovery-bolder': 'var(--color-violet-500)',
353
+ 'discovery-bolder-hover': 'var(--color-violet-700)',
354
+ 'discovery-bolder-pressed': 'var(--color-violet-900)',
355
+ informative: 'var(--color-marine-000)',
356
+ 'informative-hover': 'var(--color-marine-300)',
357
+ 'informative-pressed': 'var(--color-marine-500)',
358
+ 'informative-bolder': 'var(--color-marine-500)',
359
+ 'informative-bolder-hover': 'var(--color-marine-700)',
360
+ 'informative-bolder-pressed': 'var(--color-marine-900)',
361
+ },
362
+ },
363
+ border: {
364
+ subtlest: 'var(--color-neutral-500)',
365
+ subtle: 'var(--color-neutral-700)',
366
+ bolder: 'var(--color-neutral-900)',
367
+ brand: 'var(--color-brand-500)',
368
+ disabled: 'var(--color-neutral-400)',
369
+ focused: 'var(--color-blue-900)',
370
+ 'inversed-subtlest': 'var(--color-neutral-400)',
371
+ 'inversed-subtle': 'var(--color-neutral-200)',
372
+ 'inversed-bolder': 'var(--color-neutral-000)',
373
+ accent: {
374
+ blue: 'var(--color-blue-500)',
375
+ mustard: 'var(--color-mustard-500)',
376
+ green: 'var(--color-green-500)',
377
+ lime: 'var(--color-lime-500)',
378
+ fuchsia: 'var(--color-fuchsia-500)',
379
+ marine: 'var(--color-marine-500)',
380
+ violet: 'var(--color-violet-500)',
381
+ gray: 'var(--color-gray-500)',
382
+ ice: 'var(--color-ice-500)',
383
+ },
384
+ utility: {
385
+ danger: 'var(--color-fuchsia-900)',
386
+ success: 'var(--color-lime-500)',
387
+ discovery: 'var(--color-violet-500)',
388
+ informative: 'var(--color-marine-500)',
389
+ warning: 'var(--color-mustard-500)',
390
+ },
391
+ },
392
+ },
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',
404
+ },
405
+ outlineWidth: {
406
+ none: '0',
407
+ xs: '0.5px',
408
+ sm: '1px',
409
+ md: '2px',
410
+ lg: '4px',
411
+ },
412
+ extend: {
413
+ padding: {
414
+ 'button-sm': '10px 24px',
415
+ 'button-md': '12px 24px',
416
+ 'button-lg': '12px 24px',
417
+ },
418
+ },
419
+ },
420
+ plugins: [],
421
+ }