@parto-system-design/ui 1.1.1 → 1.1.3

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@parto-system-design/ui",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "description": "Parto Design System UI components with RTL support",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -27,13 +27,6 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@hookform/resolvers": "^5.2.2",
30
- "@nivo/bar": "^0.99.0",
31
- "@nivo/bump": "^0.99.0",
32
- "@nivo/core": "^0.99.0",
33
- "@nivo/heatmap": "^0.99.0",
34
- "@nivo/line": "^0.99.0",
35
- "@nivo/pie": "^0.99.0",
36
- "@nivo/stream": "^0.99.0",
37
30
  "@radix-ui/react-accordion": "^1.2.12",
38
31
  "@radix-ui/react-alert-dialog": "^1.1.15",
39
32
  "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -60,6 +53,7 @@
60
53
  "@radix-ui/react-toggle": "^1.1.10",
61
54
  "@radix-ui/react-toggle-group": "^1.1.11",
62
55
  "@radix-ui/react-tooltip": "^1.2.8",
56
+ "@visx/responsive": "^3.12.0",
63
57
  "@visx/scale": "^3.12.0",
64
58
  "@visx/text": "^3.12.0",
65
59
  "@visx/wordcloud": "^3.12.0",
@@ -67,44 +61,68 @@
67
61
  "clsx": "^2.1.1",
68
62
  "cmdk": "^1.1.1",
69
63
  "date-fns": "^4.1.0",
64
+ "date-fns-jalali": "4.1.0-0",
70
65
  "embla-carousel-react": "^8.6.0",
71
66
  "input-otp": "^1.4.2",
72
- "lucide-react": "^0.554.0",
73
- "moment-jalaali": "^0.10.4",
74
- "next-themes": "^0.4.6",
67
+ "lucide-react": "^1.7.0",
75
68
  "react-day-picker": "^9.13.0",
76
- "react-hook-form": "^7.66.1",
77
- "react-player": "^2.16.0",
69
+ "react-hook-form": "^7.72.1",
78
70
  "react-resizable-panels": "^3.0.6",
71
+ "recharts": "^3.8.1",
79
72
  "sonner": "^2.0.7",
80
73
  "tailwind-merge": "^3.4.0",
81
74
  "vaul": "^1.1.2",
82
- "zod": "^4.1.12"
75
+ "zod": "^4.3.6"
83
76
  },
84
77
  "peerDependencies": {
78
+ "next-themes": ">=0.4",
85
79
  "react": ">=18",
86
80
  "react-dom": ">=18"
87
81
  },
82
+ "peerDependenciesMeta": {
83
+ "next-themes": {
84
+ "optional": true
85
+ }
86
+ },
88
87
  "devDependencies": {
89
- "@tailwindcss/cli": "^4.1.18",
90
- "@types/moment-jalaali": "^0.7.9",
88
+ "@eslint/js": "^9.39.3",
89
+ "@size-limit/esbuild": "^12.0.0",
90
+ "@size-limit/file": "^12.0.0",
91
+ "@tailwindcss/cli": "^4.2.2",
92
+ "@testing-library/jest-dom": "^6.9.1",
93
+ "@testing-library/react": "^16.3.2",
91
94
  "@types/node": "^20.11.5",
92
95
  "@types/react": "^19.2.6",
93
96
  "@types/react-dom": "^19.2.3",
97
+ "@vitest/coverage-v8": "^4.0.18",
98
+ "@vitest/ui": "^4.0.18",
94
99
  "autoprefixer": "^10.4.17",
95
100
  "copyfiles": "^2.4.1",
101
+ "eslint": "^9.39.3",
102
+ "eslint-plugin-jsx-a11y": "^6.10.2",
103
+ "eslint-plugin-react": "^7.37.5",
104
+ "eslint-plugin-react-hooks": "^7.0.1",
105
+ "globals": "^17.3.0",
106
+ "jsdom": "^28.1.0",
96
107
  "postcss": "^8.4.33",
97
- "tailwindcss": "^4.1.17",
108
+ "size-limit": "^12.0.0",
109
+ "tailwindcss": "^4.2.2",
98
110
  "tailwindcss-animate": "^1.0.7",
99
111
  "tsup": "^8.5.1",
100
- "typescript": "^5.9.3",
101
- "vite-plugin-dts": "^3.7.2"
112
+ "typescript": "^6.0.2",
113
+ "typescript-eslint": "^8.58.0",
114
+ "vitest": "^4.0.18"
102
115
  },
103
116
  "scripts": {
104
117
  "dev": "tsup --watch",
105
118
  "build": "tsup && tailwindcss -i ./src/globals.css -o ./dist/index.css && copyfiles -u 1 \"src/assets/fonts/*.woff2\" dist",
106
- "lint": "eslint src --ext .ts,.tsx",
107
- "lint:fix": "eslint src --ext .ts,.tsx --fix",
108
- "typecheck": "tsc --noEmit --skipLibCheck"
119
+ "test": "vitest run",
120
+ "test:watch": "vitest",
121
+ "test:ui": "vitest --ui",
122
+ "lint": "eslint src/",
123
+ "lint:fix": "eslint src/ --fix",
124
+ "typecheck": "tsc --noEmit --skipLibCheck",
125
+ "size": "size-limit",
126
+ "size:check": "size-limit --limit"
109
127
  }
110
128
  }
@@ -43,8 +43,8 @@ const config: Config = {
43
43
  DEFAULT: 'hsl(var(--background-dialog-default))',
44
44
  },
45
45
  dash: {
46
- sidebar: 'hsl(var(--background-dash-sidebar))',
47
- canvas: 'hsl(var(--background-dash-canvas))',
46
+ sidebar: 'hsl(var(--background-sidebar))',
47
+ canvas: 'hsl(var(--background-canvas))',
48
48
  },
49
49
  },
50
50
  // Shorthand background colors for Supabase compatibility
@@ -132,6 +132,29 @@ const config: Config = {
132
132
  5: 'hsl(var(--code-block-5))',
133
133
  },
134
134
 
135
+ // Engagement Rate Tier Colors (social listening domain)
136
+ engagement: {
137
+ excellent: 'hsl(var(--engagement-excellent))',
138
+ 'excellent-hover': 'hsl(var(--engagement-excellent-hover))',
139
+ 'very-good': 'hsl(var(--engagement-very-good))',
140
+ 'very-good-hover': 'hsl(var(--engagement-very-good-hover))',
141
+ good: 'hsl(var(--engagement-good))',
142
+ 'good-hover': 'hsl(var(--engagement-good-hover))',
143
+ average: 'hsl(var(--engagement-average))',
144
+ 'average-hover': 'hsl(var(--engagement-average-hover))',
145
+ low: 'hsl(var(--engagement-low))',
146
+ 'low-hover': 'hsl(var(--engagement-low-hover))',
147
+ poor: 'hsl(var(--engagement-poor))',
148
+ 'poor-hover': 'hsl(var(--engagement-poor-hover))',
149
+ inactive: 'hsl(var(--engagement-inactive))',
150
+ },
151
+ // Sentiment Colors (social listening domain)
152
+ sentiment: {
153
+ positive: 'hsl(var(--sentiment-positive))',
154
+ negative: 'hsl(var(--sentiment-negative))',
155
+ neutral: 'hsl(var(--sentiment-neutral))',
156
+ },
157
+
135
158
  // Legacy Shadcn compatibility aliases
136
159
  input: 'hsl(var(--background-control))',
137
160
  ring: 'hsl(var(--border-strong))',
@@ -157,7 +180,7 @@ const config: Config = {
157
180
  },
158
181
  // Sidebar colors - mapped to Supabase Design System tokens
159
182
  sidebar: {
160
- DEFAULT: 'hsl(var(--background-dash-sidebar))',
183
+ DEFAULT: 'hsl(var(--background-sidebar))',
161
184
  foreground: 'hsl(var(--foreground-default))',
162
185
  border: 'hsl(var(--border-muted))',
163
186
  ring: 'hsl(var(--brand-default))',
@@ -172,300 +195,63 @@ const config: Config = {
172
195
  '3': 'hsl(var(--chart-3))',
173
196
  '4': 'hsl(var(--chart-4))',
174
197
  '5': 'hsl(var(--chart-5))',
175
- },
176
-
177
- // Tailwind Standard Palettes
178
- slate: {
179
- 50: '#f8fafc',
180
- 100: '#f1f5f9',
181
- 200: '#e2e8f0',
182
- 300: '#cbd5e1',
183
- 400: '#94a3b8',
184
- 500: '#64748b',
185
- 600: '#475569',
186
- 700: '#334155',
187
- 800: '#1e293b',
188
- 900: '#0f172a',
189
- 950: '#020617',
190
- },
191
- gray: {
192
- 50: '#f9fafb',
193
- 100: '#f3f4f6',
194
- 200: '#e5e7eb',
195
- 300: '#d1d5db',
196
- 400: '#9ca3af',
197
- 500: '#6b7280',
198
- 600: '#4b5563',
199
- 700: '#374151',
200
- 800: '#1f2937',
201
- 900: '#111827',
202
- 950: '#030712',
203
- },
204
- zinc: {
205
- 50: '#fafafa',
206
- 100: '#f4f4f5',
207
- 200: '#e4e4e7',
208
- 300: '#d4d4d8',
209
- 400: '#a1a1aa',
210
- 500: '#71717a',
211
- 600: '#52525b',
212
- 700: '#3f3f46',
213
- 800: '#27272a',
214
- 900: '#18181b',
215
- 950: '#09090b',
216
- },
217
- neutral: {
218
- 50: '#fafafa',
219
- 100: '#f5f5f5',
220
- 200: '#e5e5e5',
221
- 300: '#d4d4d4',
222
- 400: '#a3a3a3',
223
- 500: '#737373',
224
- 600: '#525252',
225
- 700: '#404040',
226
- 800: '#262626',
227
- 900: '#171717',
228
- 950: '#0a0a0a',
229
- },
230
- stone: {
231
- 50: '#fafaf9',
232
- 100: '#f5f5f4',
233
- 200: '#e7e5e4',
234
- 300: '#d6d3d1',
235
- 400: '#a8a29e',
236
- 500: '#78716c',
237
- 600: '#57534e',
238
- 700: '#44403c',
239
- 800: '#292524',
240
- 900: '#1c1917',
241
- 950: '#0c0a09',
242
- },
243
- red: {
244
- 50: '#fef2f2',
245
- 100: '#fee2e2',
246
- 200: '#fecaca',
247
- 300: '#fca5a5',
248
- 400: '#f87171',
249
- 500: '#ef4444',
250
- 600: '#dc2626',
251
- 700: '#b91c1c',
252
- 800: '#991b1b',
253
- 900: '#7f1d1d',
254
- 950: '#450a0a',
255
- },
256
- orange: {
257
- 50: '#fff7ed',
258
- 100: '#ffedd5',
259
- 200: '#fed7aa',
260
- 300: '#fdba74',
261
- 400: '#fb923c',
262
- 500: '#f97316',
263
- 600: '#ea580c',
264
- 700: '#c2410c',
265
- 800: '#9a3412',
266
- 900: '#7c2d12',
267
- 950: '#431407',
268
- },
269
- amber: {
270
- 50: '#fffbeb',
271
- 100: '#fef3c7',
272
- 200: '#fde68a',
273
- 300: '#fcd34d',
274
- 400: '#fbbf24',
275
- 500: '#f59e0b',
276
- 600: '#d97706',
277
- 700: '#b45309',
278
- 800: '#92400e',
279
- 900: '#78350f',
280
- 950: '#451a03',
281
- },
282
- yellow: {
283
- 50: '#fefce8',
284
- 100: '#fef9c3',
285
- 200: '#fef08a',
286
- 300: '#fde047',
287
- 400: '#facc15',
288
- 500: '#eab308',
289
- 600: '#ca8a04',
290
- 700: '#a16207',
291
- 800: '#854d0e',
292
- 900: '#713f12',
293
- 950: '#422006',
294
- },
295
- lime: {
296
- 50: '#f7fee7',
297
- 100: '#ecfccb',
298
- 200: '#d9f99d',
299
- 300: '#bef264',
300
- 400: '#a3e635',
301
- 500: '#84cc16',
302
- 600: '#65a30d',
303
- 700: '#4d7c0f',
304
- 800: '#3f6212',
305
- 900: '#365314',
306
- 950: '#1a2e05',
307
- },
308
- green: {
309
- 50: '#f0fdf4',
310
- 100: '#dcfce7',
311
- 200: '#bbf7d0',
312
- 300: '#86efac',
313
- 400: '#4ade80',
314
- 500: '#22c55e',
315
- 600: '#16a34a',
316
- 700: '#15803d',
317
- 800: '#166534',
318
- 900: '#14532d',
319
- 950: '#052e16',
320
- },
321
- emerald: {
322
- 50: '#ecfdf5',
323
- 100: '#d1fae5',
324
- 200: '#a7f3d0',
325
- 300: '#6ee7b7',
326
- 400: '#34d399',
327
- 500: '#10b981',
328
- 600: '#059669',
329
- 700: '#047857',
330
- 800: '#065f46',
331
- 900: '#064e3b',
332
- 950: '#022c22',
333
- },
334
- teal: {
335
- 50: '#f0fdfa',
336
- 100: '#ccfbf1',
337
- 200: '#99f6e4',
338
- 300: '#5eead4',
339
- 400: '#2dd4bf',
340
- 500: '#14b8a6',
341
- 600: '#0d9488',
342
- 700: '#0f766e',
343
- 800: '#115e59',
344
- 900: '#134e4a',
345
- 950: '#042f2e',
346
- },
347
- cyan: {
348
- 50: '#ecfeff',
349
- 100: '#cffafe',
350
- 200: '#a5f3fc',
351
- 300: '#67e8f9',
352
- 400: '#22d3ee',
353
- 500: '#06b6d4',
354
- 600: '#0891b2',
355
- 700: '#0e7490',
356
- 800: '#155e75',
357
- 900: '#164e63',
358
- 950: '#083344',
359
- },
360
- sky: {
361
- 50: '#f0f9ff',
362
- 100: '#e0f2fe',
363
- 200: '#bae6fd',
364
- 300: '#7dd3fc',
365
- 400: '#38bdf8',
366
- 500: '#0ea5e9',
367
- 600: '#0284c7',
368
- 700: '#0369a1',
369
- 800: '#075985',
370
- 900: '#0c4a6e',
371
- 950: '#082f49',
372
- },
373
- blue: {
374
- 50: '#eff6ff',
375
- 100: '#dbeafe',
376
- 200: '#bfdbfe',
377
- 300: '#93c5fd',
378
- 400: '#60a5fa',
379
- 500: '#3b82f6',
380
- 600: '#2563eb',
381
- 700: '#1d4ed8',
382
- 800: '#1e40af',
383
- 900: '#1e3a8a',
384
- 950: '#172554',
385
- },
386
- indigo: {
387
- 50: '#eef2ff',
388
- 100: '#e0e7ff',
389
- 200: '#c7d2fe',
390
- 300: '#a5b4fc',
391
- 400: '#818cf8',
392
- 500: '#6366f1',
393
- 600: '#4f46e5',
394
- 700: '#4338ca',
395
- 800: '#3730a3',
396
- 900: '#312e81',
397
- 950: '#1e1b4b',
398
- },
399
- violet: {
400
- 50: '#f5f3ff',
401
- 100: '#ede9fe',
402
- 200: '#ddd6fe',
403
- 300: '#c4b5fd',
404
- 400: '#a78bfa',
405
- 500: '#8b5cf6',
406
- 600: '#7c3aed',
407
- 700: '#6d28d9',
408
- 800: '#5b21b6',
409
- 900: '#4c1d95',
410
- 950: '#2e1065',
411
- },
412
- purple: {
413
- 50: '#faf5ff',
414
- 100: '#f3e8ff',
415
- 200: '#e9d5ff',
416
- 300: '#d8b4fe',
417
- 400: '#c084fc',
418
- 500: '#a855f7',
419
- 600: '#9333ea',
420
- 700: '#7e22ce',
421
- 800: '#6b21a8',
422
- 900: '#581c87',
423
- 950: '#3b0764',
424
- },
425
- fuchsia: {
426
- 50: '#fdf4ff',
427
- 100: '#fae8ff',
428
- 200: '#f5d0fe',
429
- 300: '#f0abfc',
430
- 400: '#e879f9',
431
- 500: '#d946ef',
432
- 600: '#c026d3',
433
- 700: '#a21caf',
434
- 800: '#86198f',
435
- 900: '#701a75',
436
- 950: '#4a044e',
437
- },
438
- pink: {
439
- 50: '#fdf2f8',
440
- 100: '#fce7f3',
441
- 200: '#fbcfe8',
442
- 300: '#f9a8d4',
443
- 400: '#f472b6',
444
- 500: '#ec4899',
445
- 600: '#db2777',
446
- 700: '#be185d',
447
- 800: '#9d174d',
448
- 900: '#831843',
449
- 950: '#500724',
450
- },
451
- rose: {
452
- 50: '#fff1f2',
453
- 100: '#ffe4e6',
454
- 200: '#fecdd3',
455
- 300: '#fda4af',
456
- 400: '#fb7185',
457
- 500: '#f43f5e',
458
- 600: '#e11d48',
459
- 700: '#be123c',
460
- 800: '#9f1239',
461
- 900: '#881337',
462
- 950: '#4c0519',
198
+ '6': 'hsl(var(--chart-6))',
199
+ '7': 'hsl(var(--chart-7))',
200
+ '8': 'hsl(var(--chart-8))',
201
+ },
202
+ // Generic score/quality tier colors (not domain-specific)
203
+ score: {
204
+ excellent: 'hsl(var(--score-excellent))',
205
+ 'excellent-bg': 'hsl(var(--score-excellent-bg))',
206
+ good: 'hsl(var(--score-good))',
207
+ 'good-bg': 'hsl(var(--score-good-bg))',
208
+ moderate: 'hsl(var(--score-moderate))',
209
+ 'moderate-bg': 'hsl(var(--score-moderate-bg))',
210
+ poor: 'hsl(var(--score-poor))',
211
+ 'poor-bg': 'hsl(var(--score-poor-bg))',
212
+ critical: 'hsl(var(--score-critical))',
213
+ 'critical-bg': 'hsl(var(--score-critical-bg))',
463
214
  },
464
215
  },
465
216
  borderRadius: {
466
217
  lg: 'var(--radius)',
467
218
  md: 'calc(var(--radius) - 2px)',
468
219
  sm: 'calc(var(--radius) - 4px)',
220
+ xs: 'var(--borderradius-xs)', // 2px
221
+ 'token-sm': 'var(--borderradius-sm)', // 4px
222
+ 'token-lg': 'var(--borderradius-lg)', // 8px
223
+ xl: 'var(--borderradius-xl)', // 16px
224
+ },
225
+ borderWidth: {
226
+ DEFAULT: 'var(--borderwidth-xs)', // 1px
227
+ 0: 'var(--borderwidth-none)', // 0
228
+ 2: 'var(--borderwidth-sm)', // 2px
229
+ 4: 'var(--borderwidth-md)', // 4px
230
+ 8: 'var(--borderwidth-lg)', // 8px
231
+ },
232
+ zIndex: {
233
+ dropdown: 'var(--z-dropdown)', // 50
234
+ sticky: 'var(--z-sticky)', // 100
235
+ overlay: 'var(--z-overlay)', // 200
236
+ modal: 'var(--z-modal)', // 300
237
+ popover: 'var(--z-popover)', // 400
238
+ tooltip: 'var(--z-tooltip)', // 500
239
+ },
240
+ transitionDuration: {
241
+ fast: 'var(--duration-fast)', // 150ms
242
+ normal: 'var(--duration-normal)', // 200ms
243
+ slow: 'var(--duration-slow)', // 300ms
244
+ },
245
+ padding: {
246
+ density: 'var(--density-padding-y) var(--density-padding-x)',
247
+ 'density-x': 'var(--density-padding-x)',
248
+ 'density-y': 'var(--density-padding-y)',
249
+ },
250
+ gap: {
251
+ density: 'var(--density-gap)',
252
+ },
253
+ fontSize: {
254
+ density: 'var(--density-text)',
469
255
  },
470
256
  keyframes: {
471
257
  'accordion-down': {
@@ -476,13 +262,114 @@ const config: Config = {
476
262
  from: { height: 'var(--radix-accordion-content-height)' },
477
263
  to: { height: '0' },
478
264
  },
265
+ 'fade-in': {
266
+ '0%': { opacity: '0' },
267
+ '100%': { opacity: '1' },
268
+ },
269
+ 'fade-out': {
270
+ '0%': { opacity: '1' },
271
+ '100%': { opacity: '0' },
272
+ },
273
+ 'slide-up': {
274
+ '0%': { transform: 'translateY(4px)', opacity: '0' },
275
+ '100%': { transform: 'translateY(0)', opacity: '1' },
276
+ },
277
+ 'slide-down': {
278
+ '0%': { transform: 'translateY(-4px)', opacity: '0' },
279
+ '100%': { transform: 'translateY(0)', opacity: '1' },
280
+ },
281
+ 'scale-in': {
282
+ '0%': { transform: 'scale(0.95)', opacity: '0' },
283
+ '100%': { transform: 'scale(1)', opacity: '1' },
284
+ },
285
+ shimmer: {
286
+ '0%': { backgroundPosition: '-200% 0' },
287
+ '100%': { backgroundPosition: '200% 0' },
288
+ },
289
+ 'slide-in-right': {
290
+ '0%': { transform: 'translateX(4px)', opacity: '0' },
291
+ '100%': { transform: 'translateX(0)', opacity: '1' },
292
+ },
293
+ 'slide-in-left': {
294
+ '0%': { transform: 'translateX(-4px)', opacity: '0' },
295
+ '100%': { transform: 'translateX(0)', opacity: '1' },
296
+ },
297
+ 'pulse-subtle': {
298
+ '0%, 100%': { opacity: '1' },
299
+ '50%': { opacity: '0.7' },
300
+ },
301
+ shake: {
302
+ '0%, 100%': { transform: 'translateX(0)' },
303
+ '10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-2px)' },
304
+ '20%, 40%, 60%, 80%': { transform: 'translateX(2px)' },
305
+ },
306
+ 'spin-slow': {
307
+ '0%': { transform: 'rotate(0deg)' },
308
+ '100%': { transform: 'rotate(360deg)' },
309
+ },
479
310
  },
480
311
  animation: {
481
- 'accordion-down': 'accordion-down 0.2s ease-out',
482
- 'accordion-up': 'accordion-up 0.2s ease-out',
312
+ 'accordion-down': 'accordion-down 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
313
+ 'accordion-up': 'accordion-up 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
314
+ 'fade-in': 'fade-in 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
315
+ 'fade-out': 'fade-out 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
316
+ 'slide-up': 'slide-up 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
317
+ 'slide-down': 'slide-down 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
318
+ 'slide-in-right': 'slide-in-right 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
319
+ 'slide-in-left': 'slide-in-left 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
320
+ 'scale-in': 'scale-in 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
321
+ shimmer: 'shimmer 2s linear infinite',
322
+ 'pulse-subtle': 'pulse-subtle 2s ease-in-out infinite',
323
+ shake: 'shake 0.5s ease-in-out',
324
+ 'spin-slow': 'spin-slow 3s linear infinite',
483
325
  },
484
326
  fontWeight: {
327
+ thin: '100',
328
+ extralight: '200',
329
+ light: '300',
485
330
  regular: '400',
331
+ medium: '500',
332
+ semibold: '600',
333
+ bold: '700',
334
+ extrabold: '800',
335
+ black: '900',
336
+ },
337
+ fontSize: {
338
+ '2xs': ['0.625rem', { lineHeight: '1rem' }],
339
+ xs: ['0.75rem', { lineHeight: '1.125rem' }],
340
+ sm: ['0.875rem', { lineHeight: '1.375rem' }],
341
+ base: ['1rem', { lineHeight: '1.625rem' }],
342
+ lg: ['1.125rem', { lineHeight: '1.75rem' }],
343
+ xl: ['1.25rem', { lineHeight: '1.875rem' }],
344
+ '2xl': ['1.5rem', { lineHeight: '2rem' }],
345
+ '3xl': ['1.875rem', { lineHeight: '2.375rem' }],
346
+ '4xl': ['2.25rem', { lineHeight: '2.75rem' }],
347
+ '5xl': ['3rem', { lineHeight: '3.5rem' }],
348
+ },
349
+ boxShadow: {
350
+ sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
351
+ DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07)',
352
+ md: '0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05)',
353
+ lg: '0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04)',
354
+ xl: '0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04)',
355
+ card: '0 2px 8px 0 rgb(0 0 0 / 0.04)',
356
+ dropdown: '0 4px 16px 0 rgb(0 0 0 / 0.12)',
357
+ dialog: '0 16px 48px 0 rgb(0 0 0 / 0.16)',
358
+ // Semantic elevation scale (theme-aware via CSS vars)
359
+ 'elevation-0': 'var(--elevation-0)',
360
+ 'elevation-1': 'var(--elevation-1)',
361
+ 'elevation-2': 'var(--elevation-2)',
362
+ 'elevation-3': 'var(--elevation-3)',
363
+ 'elevation-4': 'var(--elevation-4)',
364
+ },
365
+ // Icon sizing tokens — maps CSS vars --icon-xs/sm/md to Tailwind utilities
366
+ // Enables: size-icon-xs, h-icon-sm, w-icon-md, etc.
367
+ spacing: {
368
+ 'icon-xs': 'var(--icon-xs)', // 12px
369
+ 'icon-sm': 'var(--icon-sm)', // 16px
370
+ 'icon-md': 'var(--icon-md)', // 18px
371
+ 'icon-lg': 'var(--icon-lg)', // 24px
372
+ 'icon-xl': 'var(--icon-xl)', // 32px
486
373
  },
487
374
  },
488
375
  },