@novie/ui 0.1.36 → 1.0.0
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/dist/index.css +2 -1
- package/dist/index.js +37 -37
- package/dist/index.js.map +1 -1
- package/package.json +7 -11
- package/src/index.css +244 -3
- package/tailwind.config.ts +0 -14
- package/tailwind.preset.ts +0 -198
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@novie/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Novie design system component library built on shadcn/ui conventions",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -21,14 +21,10 @@
|
|
|
21
21
|
"default": "./dist/index.js"
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
|
-
"./styles.css": "./dist/index.css"
|
|
25
|
-
"./tailwind-preset": "./tailwind.preset.ts",
|
|
26
|
-
"./tailwind.config": "./tailwind.config.ts"
|
|
24
|
+
"./styles.css": "./dist/index.css"
|
|
27
25
|
},
|
|
28
26
|
"files": [
|
|
29
27
|
"dist",
|
|
30
|
-
"tailwind.preset.ts",
|
|
31
|
-
"tailwind.config.ts",
|
|
32
28
|
"src/index.css"
|
|
33
29
|
],
|
|
34
30
|
"sideEffects": [
|
|
@@ -43,7 +39,7 @@
|
|
|
43
39
|
"peerDependencies": {
|
|
44
40
|
"react": "^18.0.0 || ^19.0.0",
|
|
45
41
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
46
|
-
"tailwindcss": "^
|
|
42
|
+
"tailwindcss": "^4.0.0"
|
|
47
43
|
},
|
|
48
44
|
"dependencies": {
|
|
49
45
|
"@fontsource-variable/google-sans-flex": "^5.2.1",
|
|
@@ -57,7 +53,8 @@
|
|
|
57
53
|
"clsx": "^2.1.1",
|
|
58
54
|
"lucide-react": "^0.577.0",
|
|
59
55
|
"radix-ui": "^1.4.3",
|
|
60
|
-
"tailwind-merge": "^3.5.0"
|
|
56
|
+
"tailwind-merge": "^3.5.0",
|
|
57
|
+
"tw-animate-css": "^1.4.0"
|
|
61
58
|
},
|
|
62
59
|
"devDependencies": {
|
|
63
60
|
"@chromatic-com/storybook": "^5.0.2",
|
|
@@ -70,14 +67,13 @@
|
|
|
70
67
|
"@storybook/react-vite": "^10.3.1",
|
|
71
68
|
"@types/react": "^19.2.14",
|
|
72
69
|
"@types/react-dom": "^19.2.3",
|
|
70
|
+
"@tailwindcss/vite": "^4.3.0",
|
|
73
71
|
"@vitejs/plugin-react": "^4.7.0",
|
|
74
72
|
"@vitest/browser-playwright": "^4.1.0",
|
|
75
73
|
"@vitest/coverage-v8": "^4.1.0",
|
|
76
|
-
"autoprefixer": "^10.4.27",
|
|
77
74
|
"playwright": "^1.58.2",
|
|
78
|
-
"postcss": "^8.5.8",
|
|
79
75
|
"storybook": "^10.3.1",
|
|
80
|
-
"tailwindcss": "^3.
|
|
76
|
+
"tailwindcss": "^4.3.0",
|
|
81
77
|
"typescript": "^5.9.3",
|
|
82
78
|
"vite": "^8.0.1",
|
|
83
79
|
"vitest": "^4.1.0"
|
package/src/index.css
CHANGED
|
@@ -1,8 +1,249 @@
|
|
|
1
1
|
@import "@fontsource-variable/google-sans-flex";
|
|
2
|
+
/* source(none) disables project-wide auto-detection (which would scan root docs like
|
|
3
|
+
* CLAUDE.md); the explicit @source below scans only src (incl. stories for Storybook). */
|
|
4
|
+
@import "tailwindcss" source(none);
|
|
5
|
+
@import "tw-animate-css";
|
|
2
6
|
|
|
3
|
-
@
|
|
4
|
-
|
|
5
|
-
|
|
7
|
+
@source "./**/*.{ts,tsx}";
|
|
8
|
+
|
|
9
|
+
/* Class-based dark mode (v4 defaults to prefers-color-scheme; this keeps the .dark class working) */
|
|
10
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
11
|
+
|
|
12
|
+
/*
|
|
13
|
+
* Tailwind theme — maps the Novie design tokens (defined in :root / .dark below)
|
|
14
|
+
* onto Tailwind's v4 @theme namespaces so the utility classes are generated.
|
|
15
|
+
* Values reference the raw HSL channel variables, so .dark overrides cascade through.
|
|
16
|
+
*/
|
|
17
|
+
@theme {
|
|
18
|
+
/* --- Colors → --color-* (annotations mirror the :root source token; dark values live in .dark below) --- */
|
|
19
|
+
--color-border: hsl(var(--border)); /* semantic: border/default/default ← palette: neutral-200 hex: #c7c7c7 */
|
|
20
|
+
--color-border-strong: hsl(var(--border-strong)); /* semantic: border/default/strong ← palette: neutral-400 hex: #a3a3a3 */
|
|
21
|
+
--color-border-block: hsl(var(--border-block)); /* semantic: border/default/block ← palette: gray-200 hex: #e5e5e5 */
|
|
22
|
+
--color-input: hsl(var(--input)); /* semantic: border/default/secondary ← palette: neutral-100 hex: #d9d9d9 */
|
|
23
|
+
--color-ring: hsl(var(--ring)); /* semantic: border/focus/default ← palette: gray-900 hex: #000000 */
|
|
24
|
+
--color-background: hsl(var(--background)); /* semantic: surface/default ← palette: white hex: #ffffff */
|
|
25
|
+
--color-foreground: hsl(var(--foreground)); /* semantic: text/primary/default ← palette: neutral-900 hex: #333333 */
|
|
26
|
+
|
|
27
|
+
--color-primary: hsl(var(--primary)); /* semantic: bg/primary/default ← palette: gray-900 hex: #000000 */
|
|
28
|
+
--color-primary-foreground: hsl(var(--primary-foreground)); /* semantic: button/primary/text ← palette: white hex: #ffffff */
|
|
29
|
+
|
|
30
|
+
--color-secondary: hsl(var(--secondary)); /* semantic: bg/primary/secondary ← palette: gray-100 hex: #f1f3f4 */
|
|
31
|
+
--color-secondary-foreground: hsl(var(--secondary-foreground)); /* semantic: text/primary/default ← palette: neutral-900 hex: #333333 */
|
|
32
|
+
|
|
33
|
+
--color-destructive: hsl(var(--destructive)); /* semantic: bg/error/default ← palette: red-600 hex: #a82e12 */
|
|
34
|
+
--color-destructive-foreground: hsl(var(--destructive-foreground)); /* semantic: text/inverse/default ← palette: white hex: #ffffff */
|
|
35
|
+
|
|
36
|
+
--color-muted: hsl(var(--muted)); /* semantic: bg/primary/tertiary ← palette: gray-200 hex: #e5e5e5 */
|
|
37
|
+
--color-muted-foreground: hsl(var(--muted-foreground)); /* semantic: text/primary/secondary ← palette: neutral-700 hex: #656565 */
|
|
38
|
+
|
|
39
|
+
--color-accent: hsl(var(--accent)); /* semantic: bg/interactive/secondary ← palette: sand-400 hex: #f3f1eb */
|
|
40
|
+
--color-accent-foreground: hsl(var(--accent-foreground)); /* semantic: text/primary/default ← palette: neutral-900 hex: #333333 */
|
|
41
|
+
|
|
42
|
+
--color-popover: hsl(var(--popover)); /* semantic: surface/default ← palette: white hex: #ffffff */
|
|
43
|
+
--color-popover-foreground: hsl(var(--popover-foreground)); /* semantic: text/primary/default ← palette: neutral-900 hex: #333333 */
|
|
44
|
+
|
|
45
|
+
--color-card: hsl(var(--card)); /* semantic: surface/default ← palette: white hex: #ffffff */
|
|
46
|
+
--color-card-foreground: hsl(var(--card-foreground)); /* semantic: text/primary/default ← palette: neutral-900 hex: #333333 */
|
|
47
|
+
|
|
48
|
+
--color-success: hsl(var(--success)); /* semantic: bg/success/default ← palette: green-600 hex: #567828 */
|
|
49
|
+
--color-success-foreground: hsl(var(--success-foreground)); /* semantic: text/inverse/default ← palette: white hex: #ffffff */
|
|
50
|
+
--color-success-secondary: hsl(var(--success-secondary)); /* semantic: bg/success/secondary ← palette: green-400 hex: #88b24e */
|
|
51
|
+
--color-success-tertiary: hsl(var(--success-tertiary)); /* semantic: bg/success/tertiary ← palette: green-100 hex: #e6edd6 */
|
|
52
|
+
|
|
53
|
+
--color-warning: hsl(var(--warning)); /* semantic: bg/warning/default ← palette: orange-500 hex: #ff9d3a */
|
|
54
|
+
--color-warning-foreground: hsl(var(--warning-foreground)); /* semantic: text/primary/on-dark ← palette: sand-300 hex: #fcfaf6 */
|
|
55
|
+
--color-warning-secondary: hsl(var(--warning-secondary)); /* semantic: bg/warning/secondary ← palette: orange-300 hex: #ffbe7d */
|
|
56
|
+
--color-warning-tertiary: hsl(var(--warning-tertiary)); /* semantic: bg/warning/tertiary ← palette: orange-100 hex: #ffdebd */
|
|
57
|
+
|
|
58
|
+
--color-info: hsl(var(--info)); /* semantic: bg/info/default ← palette: slate-700 hex: #596571 */
|
|
59
|
+
--color-info-foreground: hsl(var(--info-foreground)); /* semantic: text/inverse/default ← palette: white hex: #ffffff */
|
|
60
|
+
--color-info-secondary: hsl(var(--info-secondary)); /* semantic: bg/info/secondary ← palette: slate-200 hex: #c0c7ce */
|
|
61
|
+
--color-info-tertiary: hsl(var(--info-tertiary)); /* semantic: bg/info/tertiary ← palette: slate-50 hex: #eaecee */
|
|
62
|
+
|
|
63
|
+
--color-error: hsl(var(--error)); /* semantic: bg/error/default ← palette: red-500 hex: #c8391a */
|
|
64
|
+
--color-error-foreground: hsl(var(--error-foreground)); /* semantic: text/inverse/default ← palette: white hex: #ffffff */
|
|
65
|
+
--color-error-secondary: hsl(var(--error-secondary)); /* semantic: bg/error/secondary ← palette: red-200 hex: #f5b5a0 */
|
|
66
|
+
--color-error-tertiary: hsl(var(--error-tertiary)); /* semantic: bg/error/tertiary ← palette: red-50 hex: #fdf1ec */
|
|
67
|
+
|
|
68
|
+
--color-page: hsl(var(--page)); /* semantic: bg/page/default ← palette: sand-400 hex: #f3f1eb */
|
|
69
|
+
--color-page-secondary: hsl(var(--page-secondary)); /* semantic: bg/page/secondary ← palette: sand-300 hex: #fcfaf6 */
|
|
70
|
+
--color-page-tertiary: hsl(var(--page-tertiary)); /* semantic: bg/page/tertiary ← palette: sand-500 hex: #eceae7 */
|
|
71
|
+
|
|
72
|
+
--color-surface-inset: hsl(var(--surface-inset)); /* semantic: bg/surface/inset ← palette: sand-500 hex: #eceae7 */
|
|
73
|
+
--color-surface-elevated: hsl(var(--surface-elevated)); /* semantic: bg/surface/elevated ← palette: gray-50 hex: #f8f9fa */
|
|
74
|
+
|
|
75
|
+
--color-interactive: hsl(var(--interactive)); /* semantic: bg/interactive/default ← palette: white hex: #ffffff */
|
|
76
|
+
--color-interactive-disabled: hsl(var(--interactive-disabled)); /* semantic: bg/interactive/disabled ← palette: neutral-200 hex: #c7c7c7 */
|
|
77
|
+
--color-interactive-secondary: hsl(var(--interactive-secondary)); /* semantic: bg/interactive/secondary ← palette: sand-400 hex: #f3f1eb */
|
|
78
|
+
--color-interactive-tertiary: hsl(var(--interactive-tertiary)); /* semantic: bg/interactive/tertiary ← palette: sand-300 hex: #fcfaf6 */
|
|
79
|
+
--color-interactive-active: hsl(var(--interactive-active)); /* semantic: bg/interactive/active ← palette: sand-550 hex: #e0ded9 */
|
|
80
|
+
|
|
81
|
+
--color-scenario-fern: hsl(var(--scenario-fern)); /* semantic: bg/scenario/fern ← palette: forrest-100 hex: #c7e5d2 */
|
|
82
|
+
--color-scenario-orange: hsl(var(--scenario-orange)); /* semantic: bg/scenario/orange ← palette: orange-100 hex: #ffdebd */
|
|
83
|
+
--color-scenario-red: hsl(var(--scenario-red)); /* semantic: bg/scenario/red ← palette: red-100 hex: #fad8cc */
|
|
84
|
+
--color-scenario-slate: hsl(var(--scenario-slate)); /* semantic: bg/scenario/slate ← palette: slate-100 hex: #d4d9de */
|
|
85
|
+
--color-scenario-teal: hsl(var(--scenario-teal)); /* semantic: bg/scenario/teal ← palette: teal-100 hex: #d3ebf2 */
|
|
86
|
+
--color-scenario-teal-text: hsl(var(--scenario-teal-text)); /* semantic: text/scenario/teal ← palette: teal-600 hex: #4a8292 */
|
|
87
|
+
|
|
88
|
+
/* --- Font family → --font-* (consumers may override --font-sans in their own :root) --- */
|
|
89
|
+
--font-sans: 'Google Sans Flex Variable', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
90
|
+
|
|
91
|
+
/* --- Border radius → --radius-* (driven by runtime --radius) --- */
|
|
92
|
+
--radius-lg: var(--radius);
|
|
93
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
94
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
95
|
+
|
|
96
|
+
/* --- Spacing extensions → --spacing-* --- */
|
|
97
|
+
--spacing-13: 3.25rem;
|
|
98
|
+
--spacing-15: 3.75rem;
|
|
99
|
+
--spacing-17: 4.25rem;
|
|
100
|
+
--spacing-18: 4.5rem;
|
|
101
|
+
--spacing-19: 4.75rem;
|
|
102
|
+
|
|
103
|
+
/* --- Max width → --container-* (keeps the max-w-container-* class names) --- */
|
|
104
|
+
--container-container-full: 1136px;
|
|
105
|
+
--container-container-chat: 800px;
|
|
106
|
+
--container-container-narrow: 640px;
|
|
107
|
+
|
|
108
|
+
/* --- Font sizes → --text-* (+ line-height / font-weight / letter-spacing modifiers) --- */
|
|
109
|
+
/* Headings */
|
|
110
|
+
--text-display: 80px;
|
|
111
|
+
--text-display--line-height: 100%;
|
|
112
|
+
--text-display--font-weight: 700;
|
|
113
|
+
--text-oversized: 48px;
|
|
114
|
+
--text-oversized--line-height: 100%;
|
|
115
|
+
--text-oversized--font-weight: 700;
|
|
116
|
+
--text-h1: 36px;
|
|
117
|
+
--text-h1--line-height: 44px;
|
|
118
|
+
--text-h1--font-weight: 700;
|
|
119
|
+
--text-h1--letter-spacing: -0.5px;
|
|
120
|
+
--text-h2: 32px;
|
|
121
|
+
--text-h2--line-height: 36px;
|
|
122
|
+
--text-h2--font-weight: 600;
|
|
123
|
+
--text-h2--letter-spacing: -0.3px;
|
|
124
|
+
--text-h3: 28px;
|
|
125
|
+
--text-h3--line-height: 32px;
|
|
126
|
+
--text-h3--font-weight: 600;
|
|
127
|
+
--text-h4: 22px;
|
|
128
|
+
--text-h4--line-height: 26px;
|
|
129
|
+
--text-h4--font-weight: 600;
|
|
130
|
+
/* Body */
|
|
131
|
+
--text-body-lg: 18px;
|
|
132
|
+
--text-body-lg--line-height: 28px;
|
|
133
|
+
--text-body-lg--font-weight: 400;
|
|
134
|
+
--text-body-lg-light: 18px;
|
|
135
|
+
--text-body-lg-light--line-height: 28px;
|
|
136
|
+
--text-body-lg-light--font-weight: 300;
|
|
137
|
+
--text-body: 16px;
|
|
138
|
+
--text-body--line-height: 24px;
|
|
139
|
+
--text-body--font-weight: 400;
|
|
140
|
+
--text-body-sm: 14px;
|
|
141
|
+
--text-body-sm--line-height: 20px;
|
|
142
|
+
--text-body-sm--font-weight: 400;
|
|
143
|
+
--text-caption: 12px;
|
|
144
|
+
--text-caption--line-height: 16px;
|
|
145
|
+
--text-caption--font-weight: 400;
|
|
146
|
+
--text-overline: 12px;
|
|
147
|
+
--text-overline--line-height: 16px;
|
|
148
|
+
--text-overline--font-weight: 500;
|
|
149
|
+
/* UI — Navigation & Links */
|
|
150
|
+
--text-main-nav: 14px;
|
|
151
|
+
--text-main-nav--line-height: 100%;
|
|
152
|
+
--text-main-nav--font-weight: 700;
|
|
153
|
+
--text-link-paragraph: 14px;
|
|
154
|
+
--text-link-paragraph--line-height: 100%;
|
|
155
|
+
--text-link-paragraph--font-weight: 400;
|
|
156
|
+
--text-link-sm: 12px;
|
|
157
|
+
--text-link-sm--line-height: 100%;
|
|
158
|
+
--text-link-sm--font-weight: 400;
|
|
159
|
+
/* UI — Buttons */
|
|
160
|
+
--text-button-lg: 16px;
|
|
161
|
+
--text-button-lg--line-height: 100%;
|
|
162
|
+
--text-button-lg--font-weight: 500;
|
|
163
|
+
--text-button: 14px;
|
|
164
|
+
--text-button--line-height: 100%;
|
|
165
|
+
--text-button--font-weight: 500;
|
|
166
|
+
--text-button-sm: 12px;
|
|
167
|
+
--text-button-sm--line-height: 100%;
|
|
168
|
+
--text-button-sm--font-weight: 500;
|
|
169
|
+
/* UI — Form & Data */
|
|
170
|
+
--text-select-item: 13px;
|
|
171
|
+
--text-select-item--line-height: 100%;
|
|
172
|
+
--text-select-item--font-weight: 400;
|
|
173
|
+
--text-search-filter-item: 13px;
|
|
174
|
+
--text-search-filter-item--line-height: 100%;
|
|
175
|
+
--text-search-filter-item--font-weight: 600;
|
|
176
|
+
--text-notification-message: 13px;
|
|
177
|
+
--text-notification-message--line-height: 100%;
|
|
178
|
+
--text-notification-message--font-weight: 500;
|
|
179
|
+
--text-report-code: 11px;
|
|
180
|
+
--text-report-code--line-height: 100%;
|
|
181
|
+
--text-report-code--font-weight: 700;
|
|
182
|
+
--text-label: 16px;
|
|
183
|
+
--text-label--line-height: 24px;
|
|
184
|
+
--text-label--font-weight: 500;
|
|
185
|
+
--text-label-sm: 14px;
|
|
186
|
+
--text-label-sm--line-height: 100%;
|
|
187
|
+
--text-label-sm--font-weight: 500;
|
|
188
|
+
--text-input-text-bold: 14px;
|
|
189
|
+
--text-input-text-bold--line-height: 20px;
|
|
190
|
+
--text-input-text-bold--font-weight: 600;
|
|
191
|
+
--text-input-text: 14px;
|
|
192
|
+
--text-input-text--line-height: 20px;
|
|
193
|
+
--text-input-text--font-weight: 400;
|
|
194
|
+
--text-help-text: 10px;
|
|
195
|
+
--text-help-text--line-height: 16px;
|
|
196
|
+
--text-help-text--font-weight: 400;
|
|
197
|
+
--text-tab: 14px;
|
|
198
|
+
--text-tab--line-height: 100%;
|
|
199
|
+
--text-tab--font-weight: 600;
|
|
200
|
+
--text-table-header: 14px;
|
|
201
|
+
--text-table-header--line-height: 20px;
|
|
202
|
+
--text-table-header--font-weight: 500;
|
|
203
|
+
|
|
204
|
+
/* --- Animations → --animate-* + @keyframes --- */
|
|
205
|
+
--animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
|
|
206
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
207
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
208
|
+
--animate-skeleton-shimmer: skeleton-shimmer 1.5s ease-in-out infinite;
|
|
209
|
+
|
|
210
|
+
@keyframes progress-indeterminate {
|
|
211
|
+
0% { transform: translateX(-100%); }
|
|
212
|
+
100% { transform: translateX(200%); }
|
|
213
|
+
}
|
|
214
|
+
@keyframes accordion-down {
|
|
215
|
+
from { height: 0; }
|
|
216
|
+
to { height: var(--radix-accordion-content-height); }
|
|
217
|
+
}
|
|
218
|
+
@keyframes accordion-up {
|
|
219
|
+
from { height: var(--radix-accordion-content-height); }
|
|
220
|
+
to { height: 0; }
|
|
221
|
+
}
|
|
222
|
+
@keyframes skeleton-shimmer {
|
|
223
|
+
0% { transform: translateX(-100%); }
|
|
224
|
+
100% { transform: translateX(100%); }
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/*
|
|
229
|
+
* Layout utilities bound to consumer-overridable CSS variables.
|
|
230
|
+
* Kept as @utility (not --spacing-*) because gap-card and p-card map to
|
|
231
|
+
* DIFFERENT vars (--card-gap vs --card-padding) and would collide in the
|
|
232
|
+
* unified spacing namespace.
|
|
233
|
+
*/
|
|
234
|
+
@utility gap-panel { gap: var(--panel-gap); }
|
|
235
|
+
@utility gap-card { gap: var(--card-gap); }
|
|
236
|
+
@utility p-card { padding: var(--card-padding); }
|
|
237
|
+
@utility p-content-gutter { padding: var(--content-gutter); }
|
|
238
|
+
@utility w-sidebar-mini { width: var(--sidebar-width-mini); }
|
|
239
|
+
@utility w-sidebar-full { width: var(--sidebar-width-full); }
|
|
240
|
+
|
|
241
|
+
/* Safelist dynamically-constructed status classes (replaces v3 config safelist) */
|
|
242
|
+
@source inline("bg-{success,warning,error,info,foreground,destructive}");
|
|
243
|
+
@source inline("bg-{success,warning,error,info}-{foreground,secondary,tertiary}");
|
|
244
|
+
@source inline("bg-destructive-foreground");
|
|
245
|
+
@source inline("text-{success,warning,error,info}-foreground");
|
|
246
|
+
@source inline("border-{success,warning,error,info}");
|
|
6
247
|
|
|
7
248
|
*,
|
|
8
249
|
::before,
|
package/tailwind.config.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import type { Config } from "tailwindcss"
|
|
2
|
-
import noviePreset from "./tailwind.preset"
|
|
3
|
-
|
|
4
|
-
const config: Config = {
|
|
5
|
-
presets: [noviePreset],
|
|
6
|
-
content: ["./src/**/*.{ts,tsx}"],
|
|
7
|
-
safelist: [
|
|
8
|
-
{ pattern: /^bg-(success|warning|error|info|foreground|destructive)/ },
|
|
9
|
-
{ pattern: /^text-(success|warning|error|info)-foreground/ },
|
|
10
|
-
{ pattern: /^border-(success|warning|error|info)/ },
|
|
11
|
-
],
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export default config
|
package/tailwind.preset.ts
DELETED
|
@@ -1,198 +0,0 @@
|
|
|
1
|
-
import type { Config } from "tailwindcss"
|
|
2
|
-
|
|
3
|
-
const noviePreset: Config = {
|
|
4
|
-
darkMode: "class",
|
|
5
|
-
content: [],
|
|
6
|
-
theme: {
|
|
7
|
-
extend: {
|
|
8
|
-
colors: {
|
|
9
|
-
border: {
|
|
10
|
-
DEFAULT: "hsl(var(--border))",
|
|
11
|
-
strong: "hsl(var(--border-strong))",
|
|
12
|
-
block: "hsl(var(--border-block))",
|
|
13
|
-
},
|
|
14
|
-
input: "hsl(var(--input))",
|
|
15
|
-
ring: "hsl(var(--ring))",
|
|
16
|
-
background: "hsl(var(--background))",
|
|
17
|
-
foreground: "hsl(var(--foreground))",
|
|
18
|
-
primary: {
|
|
19
|
-
DEFAULT: "hsl(var(--primary))",
|
|
20
|
-
foreground: "hsl(var(--primary-foreground))",
|
|
21
|
-
},
|
|
22
|
-
secondary: {
|
|
23
|
-
DEFAULT: "hsl(var(--secondary))",
|
|
24
|
-
foreground: "hsl(var(--secondary-foreground))",
|
|
25
|
-
},
|
|
26
|
-
destructive: {
|
|
27
|
-
DEFAULT: "hsl(var(--destructive))",
|
|
28
|
-
foreground: "hsl(var(--destructive-foreground))",
|
|
29
|
-
},
|
|
30
|
-
muted: {
|
|
31
|
-
DEFAULT: "hsl(var(--muted))",
|
|
32
|
-
foreground: "hsl(var(--muted-foreground))",
|
|
33
|
-
},
|
|
34
|
-
accent: {
|
|
35
|
-
DEFAULT: "hsl(var(--accent))",
|
|
36
|
-
foreground: "hsl(var(--accent-foreground))",
|
|
37
|
-
},
|
|
38
|
-
popover: {
|
|
39
|
-
DEFAULT: "hsl(var(--popover))",
|
|
40
|
-
foreground: "hsl(var(--popover-foreground))",
|
|
41
|
-
},
|
|
42
|
-
card: {
|
|
43
|
-
DEFAULT: "hsl(var(--card))",
|
|
44
|
-
foreground: "hsl(var(--card-foreground))",
|
|
45
|
-
},
|
|
46
|
-
success: {
|
|
47
|
-
DEFAULT: "hsl(var(--success))",
|
|
48
|
-
foreground: "hsl(var(--success-foreground))",
|
|
49
|
-
secondary: "hsl(var(--success-secondary))",
|
|
50
|
-
tertiary: "hsl(var(--success-tertiary))",
|
|
51
|
-
},
|
|
52
|
-
warning: {
|
|
53
|
-
DEFAULT: "hsl(var(--warning))",
|
|
54
|
-
foreground: "hsl(var(--warning-foreground))",
|
|
55
|
-
secondary: "hsl(var(--warning-secondary))",
|
|
56
|
-
tertiary: "hsl(var(--warning-tertiary))",
|
|
57
|
-
},
|
|
58
|
-
info: {
|
|
59
|
-
DEFAULT: "hsl(var(--info))",
|
|
60
|
-
foreground: "hsl(var(--info-foreground))",
|
|
61
|
-
secondary: "hsl(var(--info-secondary))",
|
|
62
|
-
tertiary: "hsl(var(--info-tertiary))",
|
|
63
|
-
},
|
|
64
|
-
error: {
|
|
65
|
-
DEFAULT: "hsl(var(--error))",
|
|
66
|
-
foreground: "hsl(var(--error-foreground))",
|
|
67
|
-
secondary: "hsl(var(--error-secondary))",
|
|
68
|
-
tertiary: "hsl(var(--error-tertiary))",
|
|
69
|
-
},
|
|
70
|
-
page: {
|
|
71
|
-
DEFAULT: "hsl(var(--page))",
|
|
72
|
-
secondary: "hsl(var(--page-secondary))",
|
|
73
|
-
tertiary: "hsl(var(--page-tertiary))",
|
|
74
|
-
},
|
|
75
|
-
"surface-inset": "hsl(var(--surface-inset))",
|
|
76
|
-
"surface-elevated": "hsl(var(--surface-elevated))",
|
|
77
|
-
interactive: {
|
|
78
|
-
DEFAULT: "hsl(var(--interactive))",
|
|
79
|
-
disabled: "hsl(var(--interactive-disabled))",
|
|
80
|
-
secondary: "hsl(var(--interactive-secondary))",
|
|
81
|
-
tertiary: "hsl(var(--interactive-tertiary))",
|
|
82
|
-
active: "hsl(var(--interactive-active))",
|
|
83
|
-
},
|
|
84
|
-
scenario: {
|
|
85
|
-
fern: "hsl(var(--scenario-fern))",
|
|
86
|
-
orange: "hsl(var(--scenario-orange))",
|
|
87
|
-
red: "hsl(var(--scenario-red))",
|
|
88
|
-
slate: "hsl(var(--scenario-slate))",
|
|
89
|
-
teal: "hsl(var(--scenario-teal))",
|
|
90
|
-
"teal-text": "hsl(var(--scenario-teal-text))",
|
|
91
|
-
},
|
|
92
|
-
},
|
|
93
|
-
spacing: {
|
|
94
|
-
"13": "3.25rem",
|
|
95
|
-
"15": "3.75rem",
|
|
96
|
-
"17": "4.25rem",
|
|
97
|
-
"18": "4.5rem",
|
|
98
|
-
"19": "4.75rem",
|
|
99
|
-
},
|
|
100
|
-
fontFamily: {
|
|
101
|
-
sans: [
|
|
102
|
-
"var(--font-sans, 'Google Sans Flex Variable')",
|
|
103
|
-
"ui-sans-serif",
|
|
104
|
-
"system-ui",
|
|
105
|
-
"-apple-system",
|
|
106
|
-
"sans-serif",
|
|
107
|
-
],
|
|
108
|
-
},
|
|
109
|
-
fontSize: {
|
|
110
|
-
/* Headings */
|
|
111
|
-
display: ["80px", { lineHeight: "100%", fontWeight: "700" }],
|
|
112
|
-
oversized: ["48px", { lineHeight: "100%", fontWeight: "700" }],
|
|
113
|
-
h1: ["36px", { lineHeight: "44px", fontWeight: "700", letterSpacing: "-0.5px" }],
|
|
114
|
-
h2: ["32px", { lineHeight: "36px", fontWeight: "600", letterSpacing: "-0.3px" }],
|
|
115
|
-
h3: ["28px", { lineHeight: "32px", fontWeight: "600" }],
|
|
116
|
-
h4: ["22px", { lineHeight: "26px", fontWeight: "600" }],
|
|
117
|
-
/* Body */
|
|
118
|
-
"body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
|
|
119
|
-
"body-lg-light": ["18px", { lineHeight: "28px", fontWeight: "300" }],
|
|
120
|
-
body: ["16px", { lineHeight: "24px", fontWeight: "400" }],
|
|
121
|
-
"body-sm": ["14px", { lineHeight: "20px", fontWeight: "400" }],
|
|
122
|
-
caption: ["12px", { lineHeight: "16px", fontWeight: "400" }],
|
|
123
|
-
overline: ["12px", { lineHeight: "16px", fontWeight: "500" }],
|
|
124
|
-
/* UI — Navigation & Links */
|
|
125
|
-
"main-nav": ["14px", { lineHeight: "100%", fontWeight: "700" }],
|
|
126
|
-
"link-paragraph": ["14px", { lineHeight: "100%", fontWeight: "400" }],
|
|
127
|
-
"link-sm": ["12px", { lineHeight: "100%", fontWeight: "400" }],
|
|
128
|
-
/* UI — Buttons */
|
|
129
|
-
"button-lg": ["16px", { lineHeight: "100%", fontWeight: "500" }],
|
|
130
|
-
button: ["14px", { lineHeight: "100%", fontWeight: "500" }],
|
|
131
|
-
"button-sm": ["12px", { lineHeight: "100%", fontWeight: "500" }],
|
|
132
|
-
/* UI — Form & Data */
|
|
133
|
-
"select-item": ["13px", { lineHeight: "100%", fontWeight: "400" }],
|
|
134
|
-
"search-filter-item": ["13px", { lineHeight: "100%", fontWeight: "600" }],
|
|
135
|
-
"notification-message": ["13px", { lineHeight: "100%", fontWeight: "500" }],
|
|
136
|
-
"report-code": ["11px", { lineHeight: "100%", fontWeight: "700" }],
|
|
137
|
-
label: ["16px", { lineHeight: "24px", fontWeight: "500" }],
|
|
138
|
-
"label-sm": ["14px", { lineHeight: "100%", fontWeight: "500" }],
|
|
139
|
-
"input-text-bold": ["14px", { lineHeight: "20px", fontWeight: "600" }],
|
|
140
|
-
"input-text": ["14px", { lineHeight: "20px", fontWeight: "400" }],
|
|
141
|
-
"help-text": ["10px", { lineHeight: "16px", fontWeight: "400" }],
|
|
142
|
-
tab: ["14px", { lineHeight: "100%", fontWeight: "600" }],
|
|
143
|
-
"table-header": ["14px", { lineHeight: "20px", fontWeight: "500" }],
|
|
144
|
-
},
|
|
145
|
-
borderRadius: {
|
|
146
|
-
lg: "var(--radius)",
|
|
147
|
-
md: "calc(var(--radius) - 2px)",
|
|
148
|
-
sm: "calc(var(--radius) - 4px)",
|
|
149
|
-
},
|
|
150
|
-
width: {
|
|
151
|
-
"sidebar-mini": "var(--sidebar-width-mini)",
|
|
152
|
-
"sidebar-full": "var(--sidebar-width-full)",
|
|
153
|
-
},
|
|
154
|
-
maxWidth: {
|
|
155
|
-
"container-full": "1136px",
|
|
156
|
-
"container-chat": "800px",
|
|
157
|
-
"container-narrow": "640px",
|
|
158
|
-
},
|
|
159
|
-
gap: {
|
|
160
|
-
"panel": "var(--panel-gap)",
|
|
161
|
-
"card": "var(--card-gap)",
|
|
162
|
-
},
|
|
163
|
-
padding: {
|
|
164
|
-
"card": "var(--card-padding)",
|
|
165
|
-
"content-gutter": "var(--content-gutter)",
|
|
166
|
-
},
|
|
167
|
-
keyframes: {
|
|
168
|
-
"progress-indeterminate": {
|
|
169
|
-
"0%": { transform: "translateX(-100%)" },
|
|
170
|
-
"100%": { transform: "translateX(200%)" },
|
|
171
|
-
},
|
|
172
|
-
"accordion-down": {
|
|
173
|
-
from: { height: "0" },
|
|
174
|
-
to: { height: "var(--radix-accordion-content-height)" },
|
|
175
|
-
},
|
|
176
|
-
"accordion-up": {
|
|
177
|
-
from: { height: "var(--radix-accordion-content-height)" },
|
|
178
|
-
to: { height: "0" },
|
|
179
|
-
},
|
|
180
|
-
"skeleton-shimmer": {
|
|
181
|
-
"0%": { transform: "translateX(-100%)" },
|
|
182
|
-
"100%": { transform: "translateX(100%)" },
|
|
183
|
-
},
|
|
184
|
-
},
|
|
185
|
-
animation: {
|
|
186
|
-
"progress-indeterminate":
|
|
187
|
-
"progress-indeterminate 1.5s ease-in-out infinite",
|
|
188
|
-
"accordion-down": "accordion-down 0.2s ease-out",
|
|
189
|
-
"accordion-up": "accordion-up 0.2s ease-out",
|
|
190
|
-
"skeleton-shimmer":
|
|
191
|
-
"skeleton-shimmer 1.5s ease-in-out infinite",
|
|
192
|
-
},
|
|
193
|
-
},
|
|
194
|
-
},
|
|
195
|
-
plugins: [],
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
export default noviePreset
|