@dito-uai/components 5.0.0-alpha20 → 5.0.0-alpha22
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.
- package/package.json +17 -5
- package/tailwind.config.ts +180 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dito-uai/components",
|
|
3
|
-
"version": "5.0.0-
|
|
3
|
+
"version": "5.0.0-alpha22",
|
|
4
4
|
"descriptin": "Dito's design system component library, made in TSX",
|
|
5
5
|
"repository": "git+https://github.com/ditointernet/dito-uai.git",
|
|
6
6
|
"publishConfig": {
|
|
@@ -12,7 +12,9 @@
|
|
|
12
12
|
"types": "./dist/index.d.ts",
|
|
13
13
|
"sideEffects": false,
|
|
14
14
|
"files": [
|
|
15
|
-
"dist/"
|
|
15
|
+
"dist/",
|
|
16
|
+
"./tailwind.config.ts",
|
|
17
|
+
"./lib/colors-utils.ts"
|
|
16
18
|
],
|
|
17
19
|
"exports": {
|
|
18
20
|
".": {
|
|
@@ -26,8 +28,18 @@
|
|
|
26
28
|
}
|
|
27
29
|
},
|
|
28
30
|
"./global.css": "./dist/global.css",
|
|
29
|
-
"./tailwind
|
|
30
|
-
|
|
31
|
+
"./tailwind": {
|
|
32
|
+
"import": {
|
|
33
|
+
"types": "./tailwind.config.ts",
|
|
34
|
+
"default": "./tailwind.config.ts"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"./colors": {
|
|
38
|
+
"import": {
|
|
39
|
+
"types": "./lib/colors-utils.ts",
|
|
40
|
+
"default": "./lib/colors-utils.ts"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
31
43
|
},
|
|
32
44
|
"scripts": {
|
|
33
45
|
"dev": "yarn build",
|
|
@@ -91,4 +103,4 @@
|
|
|
91
103
|
"react-hook-form": "^7.52.1",
|
|
92
104
|
"zod": "^3.23.8"
|
|
93
105
|
}
|
|
94
|
-
}
|
|
106
|
+
}
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import TailwindsForms from '@tailwindcss/forms';
|
|
2
|
+
import TailwindsTypography from '@tailwindcss/typography';
|
|
3
|
+
import TailwindsAnimate from 'tailwindcss-animate';
|
|
4
|
+
import { COLORS } from './src/lib/colors-utils';
|
|
5
|
+
|
|
6
|
+
/** @type {import('tailwindcss').Config} */
|
|
7
|
+
export default {
|
|
8
|
+
mode: 'jit',
|
|
9
|
+
content: ['./src/**/*.{ts,tsx}'],
|
|
10
|
+
theme: {
|
|
11
|
+
screens: {
|
|
12
|
+
sm: '480px',
|
|
13
|
+
md: '768px',
|
|
14
|
+
lg: '976px',
|
|
15
|
+
xl: '1440px',
|
|
16
|
+
},
|
|
17
|
+
fontFamily: {
|
|
18
|
+
sans: ['Poppins', 'sans-serif'],
|
|
19
|
+
},
|
|
20
|
+
extend: {
|
|
21
|
+
backgroundImage: {
|
|
22
|
+
'gradient-radial': 'radial-gradient(var(--gradient-color-stops))',
|
|
23
|
+
},
|
|
24
|
+
colors: () => ({
|
|
25
|
+
primary: COLORS.brand.green_600,
|
|
26
|
+
'primary-foreground': '#ffffff',
|
|
27
|
+
accent: COLORS.brand.navy_600,
|
|
28
|
+
'accent-foreground': '#ffffff',
|
|
29
|
+
'neutral-100': COLORS.neutral.neutral_100,
|
|
30
|
+
'neutral-200': COLORS.neutral.neutral_200,
|
|
31
|
+
'neutral-300': COLORS.neutral.neutral_300,
|
|
32
|
+
'neutral-400': COLORS.neutral.neutral_400,
|
|
33
|
+
'neutral-500': COLORS.neutral.neutral_500,
|
|
34
|
+
'neutral-600': COLORS.neutral.neutral_600,
|
|
35
|
+
'neutral-700': COLORS.neutral.neutral_700,
|
|
36
|
+
'neutral-900': COLORS.neutral.neutral_900,
|
|
37
|
+
'midnight-blue-900': COLORS.chart.midnight_blue_900,
|
|
38
|
+
'midnight-blue-600': COLORS.chart.midnight_blue_600,
|
|
39
|
+
'midnight-blue-100': COLORS.chart.midnight_blue_100,
|
|
40
|
+
'red-100': COLORS.chart.red_100,
|
|
41
|
+
'red-600': COLORS.chart.red_600,
|
|
42
|
+
'red-900': COLORS.chart.red_900,
|
|
43
|
+
'orange-100': COLORS.chart.orange_100,
|
|
44
|
+
'orange-600': COLORS.chart.orange_600,
|
|
45
|
+
'orange-900': COLORS.chart.orange_900,
|
|
46
|
+
'yellow-100': COLORS.chart.yellow_100,
|
|
47
|
+
'yellow-600': COLORS.chart.yellow_600,
|
|
48
|
+
'yellow-900': COLORS.chart.yellow_900,
|
|
49
|
+
'green-100': COLORS.brand.green_100,
|
|
50
|
+
'green-600': COLORS.brand.green_600,
|
|
51
|
+
'green-900': COLORS.brand.green_900,
|
|
52
|
+
'blue-100': COLORS.secondary.blue_100,
|
|
53
|
+
'blue-600': COLORS.secondary.blue_600,
|
|
54
|
+
'blue-900': COLORS.secondary.blue_900,
|
|
55
|
+
'light-blue-100': COLORS.chart.light_blue_100,
|
|
56
|
+
'light-blue-600': COLORS.chart.light_blue_600,
|
|
57
|
+
'light-blue-900': COLORS.chart.light_blue_900,
|
|
58
|
+
'indigo-100': COLORS.brand.navy_100,
|
|
59
|
+
'indigo-600': COLORS.brand.navy_600,
|
|
60
|
+
'indigo-900': COLORS.brand.navy_900,
|
|
61
|
+
'navy-100': COLORS.brand.navy_100,
|
|
62
|
+
'navy-600': COLORS.brand.navy_600,
|
|
63
|
+
'navy-900': COLORS.brand.navy_900,
|
|
64
|
+
'purple-100': COLORS.chart.purple_100,
|
|
65
|
+
'purple-600': COLORS.chart.purple_600,
|
|
66
|
+
'purple-900': COLORS.chart.purple_900,
|
|
67
|
+
'pink-100': COLORS.chart.pink_100,
|
|
68
|
+
'pink-600': COLORS.chart.pink_600,
|
|
69
|
+
'pink-900': COLORS.chart.pink_900,
|
|
70
|
+
notification: {
|
|
71
|
+
'critical-100': COLORS.notification.critical_100,
|
|
72
|
+
'critical-300': COLORS.notification.critical_300,
|
|
73
|
+
'critical-600': COLORS.notification.critical_600,
|
|
74
|
+
'critical-900': COLORS.notification.critical_900,
|
|
75
|
+
'warning-100': COLORS.notification.warning_100,
|
|
76
|
+
'warning-300': COLORS.notification.warning_300,
|
|
77
|
+
'warning-600': COLORS.notification.warning_600,
|
|
78
|
+
'warning-900': COLORS.notification.warning_900,
|
|
79
|
+
'success-100': COLORS.notification.success_100,
|
|
80
|
+
'success-300': COLORS.notification.success_300,
|
|
81
|
+
'success-600': COLORS.notification.success_600,
|
|
82
|
+
'success-900': COLORS.notification.success_900,
|
|
83
|
+
'information-100': COLORS.notification.information_100,
|
|
84
|
+
'information-300': COLORS.notification.information_300,
|
|
85
|
+
'information-600': COLORS.notification.information_600,
|
|
86
|
+
'information-900': COLORS.notification.information_900,
|
|
87
|
+
},
|
|
88
|
+
secondary: {
|
|
89
|
+
'indigo-100': COLORS.secondary.indigo_100,
|
|
90
|
+
'indigo-600': COLORS.secondary.indigo_600,
|
|
91
|
+
'indigo-900': COLORS.secondary.indigo_900,
|
|
92
|
+
},
|
|
93
|
+
}),
|
|
94
|
+
height: {
|
|
95
|
+
1: '8px',
|
|
96
|
+
2: '16px',
|
|
97
|
+
3: '24px',
|
|
98
|
+
4: '32px',
|
|
99
|
+
5: '40px',
|
|
100
|
+
6: '48px',
|
|
101
|
+
7: '56px',
|
|
102
|
+
},
|
|
103
|
+
gap: {
|
|
104
|
+
1: '8px',
|
|
105
|
+
2: '16px',
|
|
106
|
+
3: '32px',
|
|
107
|
+
4: '48px',
|
|
108
|
+
},
|
|
109
|
+
spacing: {
|
|
110
|
+
0.25: '2px',
|
|
111
|
+
0.5: '4px',
|
|
112
|
+
0.75: '6px',
|
|
113
|
+
1: '8px',
|
|
114
|
+
2: '16px',
|
|
115
|
+
3: '24px',
|
|
116
|
+
4: '32px',
|
|
117
|
+
5: '40px',
|
|
118
|
+
6: '48px',
|
|
119
|
+
7: '56px',
|
|
120
|
+
8: '64px',
|
|
121
|
+
9: '72px',
|
|
122
|
+
10: '128px',
|
|
123
|
+
},
|
|
124
|
+
maxWidth: {
|
|
125
|
+
'1/4': '25%',
|
|
126
|
+
'1/2': '50%',
|
|
127
|
+
'3/4': '75%',
|
|
128
|
+
},
|
|
129
|
+
borderRadius: {
|
|
130
|
+
sm: '4px',
|
|
131
|
+
m: '8px',
|
|
132
|
+
x: '16px',
|
|
133
|
+
xl: '32px',
|
|
134
|
+
},
|
|
135
|
+
boxShadow: {
|
|
136
|
+
down: '0px 4px 8px 0px #00000014',
|
|
137
|
+
},
|
|
138
|
+
fontSize: {
|
|
139
|
+
xs: ['10px', { lineHeight: '16px' }],
|
|
140
|
+
sm: ['12px', { lineHeight: '18px' }],
|
|
141
|
+
base: ['14px', { lineHeight: '20px' }],
|
|
142
|
+
lg: ['16px', { lineHeight: '24px' }],
|
|
143
|
+
xl: ['22px', { lineHeight: '32px' }],
|
|
144
|
+
'2xl': ['28px', { lineHeight: '40px' }],
|
|
145
|
+
'3xl': ['30px', { lineHeight: '44px' }],
|
|
146
|
+
},
|
|
147
|
+
keyframes: {
|
|
148
|
+
'accordion-down': {
|
|
149
|
+
from: { height: '0' },
|
|
150
|
+
to: { height: 'var(--radix-accordion-content-height)' },
|
|
151
|
+
},
|
|
152
|
+
'accordion-up': {
|
|
153
|
+
from: { height: 'var(--radix-accordion-content-height)' },
|
|
154
|
+
to: { height: '0' },
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
animation: {
|
|
158
|
+
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
159
|
+
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
160
|
+
},
|
|
161
|
+
},
|
|
162
|
+
},
|
|
163
|
+
plugins: [
|
|
164
|
+
TailwindsAnimate,
|
|
165
|
+
TailwindsTypography,
|
|
166
|
+
TailwindsForms({ strategy: 'class' }),
|
|
167
|
+
],
|
|
168
|
+
safelist: [
|
|
169
|
+
{
|
|
170
|
+
pattern: /bg-/,
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
pattern: /text-/,
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
pattern:
|
|
177
|
+
/m-|mx-|my-|mr-|mt-|mb-|ml–|p-|px–|py-|pr-|pt-|pb-|pl-|rounded|gap|w|h/,
|
|
178
|
+
},
|
|
179
|
+
],
|
|
180
|
+
};
|