@oxymormon/chg-unified-ds 0.2.1 → 0.2.2
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 +7 -3
- package/tailwind.config.cjs +332 -0
- package/tailwind.config.storybook.cjs +56 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oxymormon/chg-unified-ds",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -21,13 +21,17 @@
|
|
|
21
21
|
"./themes/modio": "./dist/themes/modio.css",
|
|
22
22
|
"./themes/modio-dark": "./dist/themes/modio-dark.css",
|
|
23
23
|
"./themes/wireframe": "./dist/themes/wireframe.css",
|
|
24
|
-
"./themes/wireframe-dark": "./dist/themes/wireframe-dark.css"
|
|
24
|
+
"./themes/wireframe-dark": "./dist/themes/wireframe-dark.css",
|
|
25
|
+
"./tailwind.config": "./tailwind.config.cjs",
|
|
26
|
+
"./tailwind.config.storybook": "./tailwind.config.storybook.cjs"
|
|
25
27
|
},
|
|
26
28
|
"main": "./dist/index.cjs.js",
|
|
27
29
|
"module": "./dist/index.es.js",
|
|
28
30
|
"types": "./dist/index.d.ts",
|
|
29
31
|
"files": [
|
|
30
|
-
"dist"
|
|
32
|
+
"dist",
|
|
33
|
+
"tailwind.config.cjs",
|
|
34
|
+
"tailwind.config.storybook.cjs"
|
|
31
35
|
],
|
|
32
36
|
"engines": {
|
|
33
37
|
"node": ">=20.0.0"
|
|
@@ -0,0 +1,332 @@
|
|
|
1
|
+
/** @type {import('tailwindcss').Config} */
|
|
2
|
+
module.exports = {
|
|
3
|
+
content: [
|
|
4
|
+
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
|
5
|
+
'./.storybook/**/*.{js,ts,jsx,tsx}',
|
|
6
|
+
],
|
|
7
|
+
theme: {
|
|
8
|
+
colors: {
|
|
9
|
+
base: {
|
|
10
|
+
white: "#ffffff",
|
|
11
|
+
black: "#000000",
|
|
12
|
+
transparent: "transparent"
|
|
13
|
+
},
|
|
14
|
+
gray: {
|
|
15
|
+
25: "#fafbfc",
|
|
16
|
+
50: "#f9fafc",
|
|
17
|
+
100: "#f3f4f6",
|
|
18
|
+
200: "#e6e7eb",
|
|
19
|
+
300: "#d2d5dc",
|
|
20
|
+
400: "#9ca2ae",
|
|
21
|
+
500: "#6b7380",
|
|
22
|
+
600: "#4c5564",
|
|
23
|
+
700: "#384152",
|
|
24
|
+
800: "#202938",
|
|
25
|
+
900: "#111828",
|
|
26
|
+
1000: "#0d1320"
|
|
27
|
+
},
|
|
28
|
+
red: {
|
|
29
|
+
25: "#fef4f4",
|
|
30
|
+
50: "#fef2f2",
|
|
31
|
+
100: "#fee2e1",
|
|
32
|
+
200: "#fecbca",
|
|
33
|
+
300: "#fda5a4",
|
|
34
|
+
400: "#f87070",
|
|
35
|
+
500: "#f04444",
|
|
36
|
+
600: "#dc2625",
|
|
37
|
+
700: "#ba1c1d",
|
|
38
|
+
800: "#991b1c",
|
|
39
|
+
900: "#7f1d1e",
|
|
40
|
+
1000: "#651718"
|
|
41
|
+
},
|
|
42
|
+
orange: {
|
|
43
|
+
25: "#fffbf7",
|
|
44
|
+
50: "#fffaf5",
|
|
45
|
+
100: "#fff6ed",
|
|
46
|
+
200: "#ffead5",
|
|
47
|
+
300: "#fddcab",
|
|
48
|
+
400: "#feb273",
|
|
49
|
+
500: "#fd853a",
|
|
50
|
+
600: "#fb6514",
|
|
51
|
+
700: "#ec4a0a",
|
|
52
|
+
800: "#9c2a10",
|
|
53
|
+
900: "#7e2410",
|
|
54
|
+
1000: "#641c0c"
|
|
55
|
+
},
|
|
56
|
+
yellow: {
|
|
57
|
+
25: "#fefcec",
|
|
58
|
+
50: "#fefce8",
|
|
59
|
+
100: "#fef9c3",
|
|
60
|
+
200: "#fef08a",
|
|
61
|
+
300: "#fde047",
|
|
62
|
+
400: "#facc15",
|
|
63
|
+
500: "#e9b308",
|
|
64
|
+
600: "#ca8a04",
|
|
65
|
+
700: "#a26208",
|
|
66
|
+
800: "#854e0e",
|
|
67
|
+
900: "#723f12",
|
|
68
|
+
1000: "#5b320e"
|
|
69
|
+
},
|
|
70
|
+
lime: {
|
|
71
|
+
25: "#f7feeb",
|
|
72
|
+
50: "#f6fee7",
|
|
73
|
+
100: "#ecfccb",
|
|
74
|
+
200: "#daf99c",
|
|
75
|
+
300: "#bef164",
|
|
76
|
+
400: "#a3e636",
|
|
77
|
+
500: "#83cc16",
|
|
78
|
+
600: "#64a30e",
|
|
79
|
+
700: "#5a8720",
|
|
80
|
+
800: "#3f6212",
|
|
81
|
+
900: "#365313",
|
|
82
|
+
1000: "#2b420f"
|
|
83
|
+
},
|
|
84
|
+
green: {
|
|
85
|
+
25: "#f3fdf6",
|
|
86
|
+
50: "#f0fdf4",
|
|
87
|
+
100: "#dcfce7",
|
|
88
|
+
200: "#bbf7d1",
|
|
89
|
+
300: "#86efac",
|
|
90
|
+
400: "#4ade80",
|
|
91
|
+
500: "#23c55e",
|
|
92
|
+
600: "#17a34a",
|
|
93
|
+
700: "#157f3d",
|
|
94
|
+
800: "#176535",
|
|
95
|
+
900: "#15532e",
|
|
96
|
+
1000: "#104224"
|
|
97
|
+
},
|
|
98
|
+
sky: {
|
|
99
|
+
25: "#f3faff",
|
|
100
|
+
50: "#f0f9ff",
|
|
101
|
+
100: "#e0f2fe",
|
|
102
|
+
200: "#bae7fe",
|
|
103
|
+
300: "#7ed3fc",
|
|
104
|
+
400: "#38bdf8",
|
|
105
|
+
500: "#0ea5ea",
|
|
106
|
+
600: "#0384c6",
|
|
107
|
+
700: "#0469a1",
|
|
108
|
+
800: "#075a86",
|
|
109
|
+
900: "#0c4a6f",
|
|
110
|
+
1000: "#0c4a6f"
|
|
111
|
+
},
|
|
112
|
+
cyan: {
|
|
113
|
+
25: "#effeff",
|
|
114
|
+
50: "#ecfeff",
|
|
115
|
+
100: "#cffbfe",
|
|
116
|
+
200: "#a5f3fd",
|
|
117
|
+
300: "#66e8f8",
|
|
118
|
+
400: "#21d3ed",
|
|
119
|
+
500: "#07b6d5",
|
|
120
|
+
600: "#0891b3",
|
|
121
|
+
700: "#0f7490",
|
|
122
|
+
800: "#165e76",
|
|
123
|
+
900: "#164f63",
|
|
124
|
+
1000: "#113f4f"
|
|
125
|
+
},
|
|
126
|
+
blue: {
|
|
127
|
+
25: "#f2f7ff",
|
|
128
|
+
50: "#eff6ff",
|
|
129
|
+
100: "#dbeaff",
|
|
130
|
+
200: "#bfdcfe",
|
|
131
|
+
300: "#93c4fc",
|
|
132
|
+
400: "#61a5fa",
|
|
133
|
+
500: "#3b82f6",
|
|
134
|
+
600: "#2563ec",
|
|
135
|
+
700: "#1d4ed7",
|
|
136
|
+
800: "#1f41af",
|
|
137
|
+
900: "#1f3a8b",
|
|
138
|
+
1000: "#182e6f"
|
|
139
|
+
},
|
|
140
|
+
indigo: {
|
|
141
|
+
25: "#f1f4fe",
|
|
142
|
+
50: "#eef2fe",
|
|
143
|
+
100: "#e1e7ff",
|
|
144
|
+
200: "#c7d2ff",
|
|
145
|
+
300: "#a6b4fd",
|
|
146
|
+
400: "#818cf8",
|
|
147
|
+
500: "#6366f1",
|
|
148
|
+
600: "#5046e5",
|
|
149
|
+
700: "#4438ca",
|
|
150
|
+
800: "#3730a2",
|
|
151
|
+
900: "#312d81",
|
|
152
|
+
1000: "#272467"
|
|
153
|
+
},
|
|
154
|
+
purple: {
|
|
155
|
+
25: "#fbf7ff",
|
|
156
|
+
50: "#fbf5ff",
|
|
157
|
+
100: "#f4e8fe",
|
|
158
|
+
200: "#ead5fe",
|
|
159
|
+
300: "#d8b4fe",
|
|
160
|
+
400: "#c085fd",
|
|
161
|
+
500: "#a755f7",
|
|
162
|
+
600: "#9334ea",
|
|
163
|
+
700: "#7e22cf",
|
|
164
|
+
800: "#6b22a8",
|
|
165
|
+
900: "#571c86",
|
|
166
|
+
1000: "#45166b"
|
|
167
|
+
},
|
|
168
|
+
magenta: {
|
|
169
|
+
25: "#fff5fb",
|
|
170
|
+
50: "#fdf2f8",
|
|
171
|
+
100: "#fce7f3",
|
|
172
|
+
200: "#fbcfe8",
|
|
173
|
+
300: "#f9a8d4",
|
|
174
|
+
400: "#f472b6",
|
|
175
|
+
500: "#ec4899",
|
|
176
|
+
600: "#db2777",
|
|
177
|
+
700: "#be185d",
|
|
178
|
+
800: "#9d174d",
|
|
179
|
+
900: "#831843",
|
|
180
|
+
1000: "#6b1235"
|
|
181
|
+
},
|
|
182
|
+
rose: {
|
|
183
|
+
25: "#fff3f3",
|
|
184
|
+
50: "#fff1f1",
|
|
185
|
+
100: "#fee4e7",
|
|
186
|
+
200: "#fecdd3",
|
|
187
|
+
300: "#fea4b0",
|
|
188
|
+
400: "#fb7286",
|
|
189
|
+
500: "#f43f5e",
|
|
190
|
+
600: "#e21d48",
|
|
191
|
+
700: "#be113c",
|
|
192
|
+
800: "#9f133a",
|
|
193
|
+
900: "#891336",
|
|
194
|
+
1000: "#6d0f2b"
|
|
195
|
+
},
|
|
196
|
+
amber: {
|
|
197
|
+
25: "#fffbeb",
|
|
198
|
+
50: "#fef3c7",
|
|
199
|
+
100: "#fde68a",
|
|
200
|
+
200: "#fcd34d",
|
|
201
|
+
300: "#fbc02d",
|
|
202
|
+
400: "#fbbf24",
|
|
203
|
+
500: "#f59e0b",
|
|
204
|
+
600: "#d97706",
|
|
205
|
+
700: "#b45309",
|
|
206
|
+
800: "#92400e",
|
|
207
|
+
900: "#78350f",
|
|
208
|
+
1000: "#5f2a09"
|
|
209
|
+
},
|
|
210
|
+
error: {
|
|
211
|
+
25: "#fef4f4",
|
|
212
|
+
50: "#fef2f2",
|
|
213
|
+
100: "#fee2e1",
|
|
214
|
+
200: "#fecbca",
|
|
215
|
+
300: "#fda5a4",
|
|
216
|
+
400: "#f87070",
|
|
217
|
+
500: "#f04444",
|
|
218
|
+
600: "#dc2625",
|
|
219
|
+
700: "#ba1c1d",
|
|
220
|
+
800: "#991b1c",
|
|
221
|
+
900: "#7f1d1e",
|
|
222
|
+
1000: "#651718"
|
|
223
|
+
},
|
|
224
|
+
destructive: {
|
|
225
|
+
25: "#fef4f4",
|
|
226
|
+
50: "#fef2f2",
|
|
227
|
+
100: "#fee2e1",
|
|
228
|
+
200: "#fecbca",
|
|
229
|
+
300: "#fda5a4",
|
|
230
|
+
400: "#f87070",
|
|
231
|
+
500: "#f04444",
|
|
232
|
+
600: "#dc2625",
|
|
233
|
+
700: "#ba1c1d",
|
|
234
|
+
800: "#991b1c",
|
|
235
|
+
900: "#7f1d1e",
|
|
236
|
+
1000: "#651718"
|
|
237
|
+
},
|
|
238
|
+
warning: {
|
|
239
|
+
25: "#fefcec",
|
|
240
|
+
50: "#fefce8",
|
|
241
|
+
100: "#fef9c3",
|
|
242
|
+
200: "#fef08a",
|
|
243
|
+
300: "#fde047",
|
|
244
|
+
400: "#facc15",
|
|
245
|
+
500: "#e9b308",
|
|
246
|
+
600: "#ca8a04",
|
|
247
|
+
700: "#a26208",
|
|
248
|
+
800: "#854e0e",
|
|
249
|
+
900: "#723f12",
|
|
250
|
+
1000: "#5b320e"
|
|
251
|
+
},
|
|
252
|
+
success: {
|
|
253
|
+
25: "#f3fdf6",
|
|
254
|
+
50: "#f0fdf4",
|
|
255
|
+
100: "#dcfce7",
|
|
256
|
+
200: "#bbf7d1",
|
|
257
|
+
300: "#86efac",
|
|
258
|
+
400: "#4ade80",
|
|
259
|
+
500: "#23c55e",
|
|
260
|
+
600: "#17a34a",
|
|
261
|
+
700: "#157f3d",
|
|
262
|
+
800: "#176535",
|
|
263
|
+
900: "#15532e",
|
|
264
|
+
1000: "#104224"
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
spacing: {
|
|
268
|
+
0: "0px",
|
|
269
|
+
2: "2px",
|
|
270
|
+
4: "4px",
|
|
271
|
+
6: "6px",
|
|
272
|
+
8: "8px",
|
|
273
|
+
10: "10px",
|
|
274
|
+
12: "12px",
|
|
275
|
+
14: "14px",
|
|
276
|
+
16: "16px",
|
|
277
|
+
18: "18px",
|
|
278
|
+
24: "24px",
|
|
279
|
+
32: "32px",
|
|
280
|
+
48: "48px",
|
|
281
|
+
64: "64px",
|
|
282
|
+
80: "80px"
|
|
283
|
+
},
|
|
284
|
+
borderRadius: {
|
|
285
|
+
0: "0px",
|
|
286
|
+
2: "2px",
|
|
287
|
+
4: "4px",
|
|
288
|
+
6: "6px",
|
|
289
|
+
8: "8px",
|
|
290
|
+
12: "12px",
|
|
291
|
+
16: "16px",
|
|
292
|
+
20: "20px",
|
|
293
|
+
24: "24px",
|
|
294
|
+
9999: "9999px"
|
|
295
|
+
},
|
|
296
|
+
fontSize: {
|
|
297
|
+
xs: ['12px', { lineHeight: '18px' }],
|
|
298
|
+
sm: ['14px', { lineHeight: '20px' }],
|
|
299
|
+
md: ['16px', { lineHeight: '24px' }],
|
|
300
|
+
lg: ['18px', { lineHeight: '28px' }],
|
|
301
|
+
xl: ['20px', { lineHeight: '30px' }],
|
|
302
|
+
'2xl': ['24px', { lineHeight: '32px' }],
|
|
303
|
+
'3xl': ['30px', { lineHeight: '38px' }],
|
|
304
|
+
'4xl': ['36px', { lineHeight: '44px' }],
|
|
305
|
+
'5xl': ['48px', { lineHeight: '60px' }],
|
|
306
|
+
'6xl': ['60px', { lineHeight: '72px' }],
|
|
307
|
+
'7xl': ['72px', { lineHeight: '90px' }],
|
|
308
|
+
},
|
|
309
|
+
fontFamily: {
|
|
310
|
+
display: ['Inter', 'system-ui', 'sans-serif'],
|
|
311
|
+
body: ['Inter', 'system-ui', 'sans-serif'],
|
|
312
|
+
},
|
|
313
|
+
fontWeight: {
|
|
314
|
+
regular: '400',
|
|
315
|
+
medium: '500',
|
|
316
|
+
semibold: '600',
|
|
317
|
+
bold: '700',
|
|
318
|
+
},
|
|
319
|
+
extend: {
|
|
320
|
+
boxShadow: {
|
|
321
|
+
xs: '0px 1px 2px 0px rgba(10, 13, 18, 0.05)',
|
|
322
|
+
sm: '0px 1px 2px 0px rgba(10, 13, 18, 0.06), 0px 1px 3px 0px rgba(10, 13, 18, 0.10)',
|
|
323
|
+
md: '0px 2px 4px -2px rgba(10, 13, 18, 0.06), 0px 4px 8px -2px rgba(10, 13, 18, 0.10)',
|
|
324
|
+
lg: '0px 4px 6px -2px rgba(10, 13, 18, 0.05), 0px 12px 16px -4px rgba(10, 13, 18, 0.10)',
|
|
325
|
+
xl: '0px 8px 8px -4px rgba(10, 13, 18, 0.04), 0px 20px 24px -4px rgba(10, 13, 18, 0.10)',
|
|
326
|
+
'2xl': '0px 24px 48px -12px rgba(10, 13, 18, 0.25)',
|
|
327
|
+
'3xl': '0px 32px 64px -12px rgba(10, 13, 18, 0.20)',
|
|
328
|
+
},
|
|
329
|
+
},
|
|
330
|
+
},
|
|
331
|
+
plugins: [],
|
|
332
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/** @type {import('tailwindcss').Config} */
|
|
2
|
+
const baseConfig = require('./tailwind.config.cjs');
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Storybook-specific Tailwind config
|
|
6
|
+
* Uses CSS variables for brand colors to enable runtime theme switching
|
|
7
|
+
*/
|
|
8
|
+
module.exports = {
|
|
9
|
+
...baseConfig,
|
|
10
|
+
theme: {
|
|
11
|
+
...baseConfig.theme,
|
|
12
|
+
colors: {
|
|
13
|
+
...baseConfig.theme.colors,
|
|
14
|
+
// Brand colors use CSS variables for runtime switching
|
|
15
|
+
brand: {
|
|
16
|
+
25: 'var(--color-brand-25)',
|
|
17
|
+
50: 'var(--color-brand-50)',
|
|
18
|
+
100: 'var(--color-brand-100)',
|
|
19
|
+
200: 'var(--color-brand-200)',
|
|
20
|
+
300: 'var(--color-brand-300)',
|
|
21
|
+
400: 'var(--color-brand-400)',
|
|
22
|
+
500: 'var(--color-brand-500)',
|
|
23
|
+
600: 'var(--color-brand-600)',
|
|
24
|
+
700: 'var(--color-brand-700)',
|
|
25
|
+
800: 'var(--color-brand-800)',
|
|
26
|
+
900: 'var(--color-brand-900)',
|
|
27
|
+
},
|
|
28
|
+
primary: {
|
|
29
|
+
25: 'var(--color-primary-25)',
|
|
30
|
+
50: 'var(--color-primary-50)',
|
|
31
|
+
100: 'var(--color-primary-100)',
|
|
32
|
+
200: 'var(--color-primary-200)',
|
|
33
|
+
300: 'var(--color-primary-300)',
|
|
34
|
+
400: 'var(--color-primary-400)',
|
|
35
|
+
500: 'var(--color-primary-500)',
|
|
36
|
+
600: 'var(--color-primary-600)',
|
|
37
|
+
700: 'var(--color-primary-700)',
|
|
38
|
+
800: 'var(--color-primary-800)',
|
|
39
|
+
900: 'var(--color-primary-900)',
|
|
40
|
+
},
|
|
41
|
+
secondary: {
|
|
42
|
+
25: 'var(--color-secondary-25)',
|
|
43
|
+
50: 'var(--color-secondary-50)',
|
|
44
|
+
100: 'var(--color-secondary-100)',
|
|
45
|
+
200: 'var(--color-secondary-200)',
|
|
46
|
+
300: 'var(--color-secondary-300)',
|
|
47
|
+
400: 'var(--color-secondary-400)',
|
|
48
|
+
500: 'var(--color-secondary-500)',
|
|
49
|
+
600: 'var(--color-secondary-600)',
|
|
50
|
+
700: 'var(--color-secondary-700)',
|
|
51
|
+
800: 'var(--color-secondary-800)',
|
|
52
|
+
900: 'var(--color-secondary-900)',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
};
|