@dreadkn1ght123/ui 0.1.3 → 0.2.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/README.md +7 -5
- package/package.json +4 -2
- package/theme.css +328 -0
package/README.md
CHANGED
|
@@ -39,20 +39,22 @@ you actually import (your package manager will warn you which are missing):
|
|
|
39
39
|
This library ships class names only — Tailwind must be configured in the consuming
|
|
40
40
|
project to generate the styles, and the design-system theme tokens must be present.
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
The theme tokens (the `@theme` mapping, `:root` / `.dark` CSS variables for colors,
|
|
43
|
+
radius, shadows, fonts, plus the hover/active `elevate` utilities) are published with
|
|
44
|
+
the package as `@dreadkn1ght123/ui/theme.css`. Import it in your CSS entry file —
|
|
45
|
+
no manual copying required:
|
|
43
46
|
|
|
44
47
|
```css
|
|
45
48
|
/* app.css */
|
|
46
49
|
@import "tailwindcss";
|
|
50
|
+
@import "@dreadkn1ght123/ui/theme.css";
|
|
47
51
|
|
|
48
52
|
/* Scan the library so Tailwind picks up the class names it uses */
|
|
49
53
|
@source "../node_modules/@dreadkn1ght123/ui/dist";
|
|
50
54
|
```
|
|
51
55
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
`artifacts/design-system/src/index.css` into your app's CSS so the components render
|
|
55
|
-
with the correct brand colors in light and dark mode.
|
|
56
|
+
Order matters: `@import "tailwindcss"` must come first, then the theme. Dark mode is
|
|
57
|
+
class-based — toggle the `dark` class on `<html>` (e.g. via `next-themes`).
|
|
56
58
|
|
|
57
59
|
## Usage
|
|
58
60
|
|
package/package.json
CHANGED
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dreadkn1ght123/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"import": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts"
|
|
9
9
|
},
|
|
10
|
+
"./theme.css": "./theme.css",
|
|
10
11
|
"./assets/*": "./assets/*"
|
|
11
12
|
},
|
|
12
13
|
"main": "./dist/index.js",
|
|
13
14
|
"types": "./dist/index.d.ts",
|
|
14
15
|
"files": [
|
|
15
16
|
"dist",
|
|
16
|
-
"assets"
|
|
17
|
+
"assets",
|
|
18
|
+
"theme.css"
|
|
17
19
|
],
|
|
18
20
|
"publishConfig": {
|
|
19
21
|
"access": "public",
|
package/theme.css
ADDED
|
@@ -0,0 +1,328 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @dreadkn1ght123/ui — design-system theme tokens
|
|
3
|
+
*
|
|
4
|
+
* Import this once in your app's CSS entry, AFTER `@import "tailwindcss"`:
|
|
5
|
+
*
|
|
6
|
+
* @import "tailwindcss";
|
|
7
|
+
* @import "@dreadkn1ght123/ui/theme.css";
|
|
8
|
+
* @source "../node_modules/@dreadkn1ght123/ui/dist";
|
|
9
|
+
*
|
|
10
|
+
* Ships the brand color tokens (light + dark), fonts, radius, shadows, and the
|
|
11
|
+
* hover/active "elevate" utilities the components rely on.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');
|
|
15
|
+
|
|
16
|
+
@custom-variant dark (&:is(.dark *));
|
|
17
|
+
|
|
18
|
+
@theme inline {
|
|
19
|
+
--color-background: var(--background);
|
|
20
|
+
--color-foreground: var(--foreground);
|
|
21
|
+
--color-border: var(--border);
|
|
22
|
+
--color-input: var(--input);
|
|
23
|
+
--color-ring: var(--ring);
|
|
24
|
+
|
|
25
|
+
--color-card: var(--card);
|
|
26
|
+
--color-card-foreground: var(--card-foreground);
|
|
27
|
+
--color-card-border: var(--card-border);
|
|
28
|
+
|
|
29
|
+
--color-popover: var(--popover);
|
|
30
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
31
|
+
--color-popover-border: var(--popover-border);
|
|
32
|
+
|
|
33
|
+
--color-primary: var(--primary);
|
|
34
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
35
|
+
--color-primary-border: var(--primary-border);
|
|
36
|
+
|
|
37
|
+
--color-secondary: var(--secondary);
|
|
38
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
39
|
+
--color-secondary-border: var(--secondary-border);
|
|
40
|
+
|
|
41
|
+
--color-muted: var(--muted);
|
|
42
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
43
|
+
--color-muted-border: var(--muted-border);
|
|
44
|
+
|
|
45
|
+
--color-accent: var(--accent);
|
|
46
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
47
|
+
--color-accent-border: var(--accent-border);
|
|
48
|
+
|
|
49
|
+
--color-destructive: var(--destructive);
|
|
50
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
51
|
+
--color-destructive-border: var(--destructive-border);
|
|
52
|
+
|
|
53
|
+
--color-chart-1: var(--chart-1);
|
|
54
|
+
--color-chart-2: var(--chart-2);
|
|
55
|
+
--color-chart-3: var(--chart-3);
|
|
56
|
+
--color-chart-4: var(--chart-4);
|
|
57
|
+
--color-chart-5: var(--chart-5);
|
|
58
|
+
|
|
59
|
+
--color-sidebar: var(--sidebar);
|
|
60
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
61
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
62
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
63
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
64
|
+
--color-sidebar-primary-border: var(--sidebar-primary-border);
|
|
65
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
66
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
67
|
+
--color-sidebar-accent-border: var(--sidebar-accent-border);
|
|
68
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
69
|
+
|
|
70
|
+
--font-sans: var(--app-font-sans);
|
|
71
|
+
--font-serif: var(--app-font-serif);
|
|
72
|
+
--font-mono: var(--app-font-mono);
|
|
73
|
+
|
|
74
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
75
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
76
|
+
--radius-lg: var(--radius);
|
|
77
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* LIGHT MODE — Vega preset: zinc base (gray accent) + blue primary + lime chart palette + Inter font + default radius */
|
|
81
|
+
:root {
|
|
82
|
+
--button-outline: rgba(0,0,0, .10);
|
|
83
|
+
--badge-outline: rgba(0,0,0, .05);
|
|
84
|
+
|
|
85
|
+
--opaque-button-border-intensity: -8;
|
|
86
|
+
|
|
87
|
+
--elevate-1: rgba(0,0,0, .03);
|
|
88
|
+
--elevate-2: rgba(0,0,0, .08);
|
|
89
|
+
|
|
90
|
+
/* zinc base */
|
|
91
|
+
--background: oklch(1 0 0);
|
|
92
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
93
|
+
|
|
94
|
+
--border: oklch(0.92 0.004 286.32);
|
|
95
|
+
|
|
96
|
+
--card: oklch(1 0 0);
|
|
97
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
98
|
+
--card-border: var(--border);
|
|
99
|
+
|
|
100
|
+
--sidebar: oklch(0.985 0 0);
|
|
101
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
102
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
103
|
+
/* lime theme overrides sidebar-primary */
|
|
104
|
+
--sidebar-primary: oklch(0.648 0.2 131.684);
|
|
105
|
+
--sidebar-primary-foreground: oklch(0.986 0.031 120.757);
|
|
106
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
107
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
108
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
109
|
+
|
|
110
|
+
--popover: oklch(1 0 0);
|
|
111
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
112
|
+
--popover-border: var(--border);
|
|
113
|
+
|
|
114
|
+
/* primary: #0F2EFD blue */
|
|
115
|
+
--primary: oklch(0.479 0.291 265.078);
|
|
116
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
117
|
+
|
|
118
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
119
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
120
|
+
|
|
121
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
122
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
123
|
+
|
|
124
|
+
/* accent: zinc/gray (shadcn default) */
|
|
125
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
126
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
127
|
+
|
|
128
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
129
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
130
|
+
|
|
131
|
+
--input: oklch(0.92 0.004 286.32);
|
|
132
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
133
|
+
|
|
134
|
+
/* lime chart palette */
|
|
135
|
+
--chart-1: oklch(0.871 0.155 130);
|
|
136
|
+
--chart-2: oklch(0.789 0.205 130);
|
|
137
|
+
--chart-3: oklch(0.685 0.2 131);
|
|
138
|
+
--chart-4: oklch(0.575 0.16 131);
|
|
139
|
+
--chart-5: oklch(0.475 0.125 131);
|
|
140
|
+
|
|
141
|
+
--app-font-sans: 'Inter', system-ui, sans-serif;
|
|
142
|
+
--app-font-serif: Georgia, serif;
|
|
143
|
+
--app-font-mono: 'Geist Mono', monospace;
|
|
144
|
+
--radius: 0.625rem;
|
|
145
|
+
|
|
146
|
+
--shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
147
|
+
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
|
148
|
+
--shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10);
|
|
149
|
+
--shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10);
|
|
150
|
+
--shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.10);
|
|
151
|
+
--shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10);
|
|
152
|
+
--shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px 10px -6px rgba(0, 0, 0, 0.10);
|
|
153
|
+
--shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
154
|
+
--tracking-normal: 0em;
|
|
155
|
+
--spacing: 0.25rem;
|
|
156
|
+
|
|
157
|
+
--sidebar-primary-border: var(--sidebar-primary);
|
|
158
|
+
--sidebar-primary-border: oklch(from var(--sidebar-primary) calc(l + var(--opaque-button-border-intensity) * 0.01) c h / alpha);
|
|
159
|
+
|
|
160
|
+
--sidebar-accent-border: var(--sidebar-accent);
|
|
161
|
+
--sidebar-accent-border: oklch(from var(--sidebar-accent) calc(l + var(--opaque-button-border-intensity) * 0.01) c h / alpha);
|
|
162
|
+
|
|
163
|
+
--primary-border: var(--primary);
|
|
164
|
+
--primary-border: oklch(from var(--primary) calc(l + var(--opaque-button-border-intensity) * 0.01) c h / alpha);
|
|
165
|
+
|
|
166
|
+
--secondary-border: var(--secondary);
|
|
167
|
+
--secondary-border: oklch(from var(--secondary) calc(l + var(--opaque-button-border-intensity) * 0.01) c h / alpha);
|
|
168
|
+
|
|
169
|
+
--muted-border: var(--muted);
|
|
170
|
+
--muted-border: oklch(from var(--muted) calc(l + var(--opaque-button-border-intensity) * 0.01) c h / alpha);
|
|
171
|
+
|
|
172
|
+
--accent-border: var(--accent);
|
|
173
|
+
--accent-border: oklch(from var(--accent) calc(l + var(--opaque-button-border-intensity) * 0.01) c h / alpha);
|
|
174
|
+
|
|
175
|
+
--destructive-border: var(--destructive);
|
|
176
|
+
--destructive-border: oklch(from var(--destructive) calc(l + var(--opaque-button-border-intensity) * 0.01) c h / alpha);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.dark {
|
|
180
|
+
--button-outline: rgba(255,255,255, .10);
|
|
181
|
+
--badge-outline: rgba(255,255,255, .05);
|
|
182
|
+
|
|
183
|
+
--opaque-button-border-intensity: 9;
|
|
184
|
+
|
|
185
|
+
--elevate-1: rgba(255,255,255, .04);
|
|
186
|
+
--elevate-2: rgba(255,255,255, .09);
|
|
187
|
+
|
|
188
|
+
/* zinc base */
|
|
189
|
+
--background: oklch(0.141 0.005 285.823);
|
|
190
|
+
--foreground: oklch(0.985 0 0);
|
|
191
|
+
|
|
192
|
+
--border: oklch(1 0 0 / 10%);
|
|
193
|
+
|
|
194
|
+
--card: oklch(0.21 0.006 285.885);
|
|
195
|
+
--card-foreground: oklch(0.985 0 0);
|
|
196
|
+
--card-border: var(--border);
|
|
197
|
+
|
|
198
|
+
--sidebar: oklch(0.21 0.006 285.885);
|
|
199
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
200
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
201
|
+
/* lime theme overrides sidebar-primary */
|
|
202
|
+
--sidebar-primary: oklch(0.768 0.233 130.85);
|
|
203
|
+
--sidebar-primary-foreground: oklch(0.274 0.072 132.109);
|
|
204
|
+
--sidebar-accent: oklch(0.274 0.006 286.033);
|
|
205
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
206
|
+
--sidebar-ring: oklch(0.552 0.016 285.938);
|
|
207
|
+
|
|
208
|
+
--popover: oklch(0.21 0.006 285.885);
|
|
209
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
210
|
+
--popover-border: var(--border);
|
|
211
|
+
|
|
212
|
+
/* primary: #0F2EFD blue */
|
|
213
|
+
--primary: oklch(0.479 0.291 265.078);
|
|
214
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
215
|
+
|
|
216
|
+
--secondary: oklch(0.274 0.006 286.033);
|
|
217
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
218
|
+
|
|
219
|
+
--muted: oklch(0.274 0.006 286.033);
|
|
220
|
+
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
221
|
+
|
|
222
|
+
/* accent: zinc/gray (shadcn default) */
|
|
223
|
+
--accent: oklch(0.274 0.006 286.033);
|
|
224
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
225
|
+
|
|
226
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
227
|
+
--destructive-foreground: oklch(0.985 0 0);
|
|
228
|
+
|
|
229
|
+
--input: oklch(1 0 0 / 15%);
|
|
230
|
+
--ring: oklch(0.552 0.016 285.938);
|
|
231
|
+
|
|
232
|
+
/* lime chart palette */
|
|
233
|
+
--chart-1: oklch(0.871 0.155 130);
|
|
234
|
+
--chart-2: oklch(0.789 0.205 130);
|
|
235
|
+
--chart-3: oklch(0.685 0.2 131);
|
|
236
|
+
--chart-4: oklch(0.575 0.16 131);
|
|
237
|
+
--chart-5: oklch(0.475 0.125 131);
|
|
238
|
+
|
|
239
|
+
--shadow-2xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
|
|
240
|
+
--shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
|
|
241
|
+
--shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.40), 0px 1px 2px -1px rgba(0, 0, 0, 0.40);
|
|
242
|
+
--shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.40), 0px 1px 2px -1px rgba(0, 0, 0, 0.40);
|
|
243
|
+
--shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.40), 0px 2px 4px -2px rgba(0, 0, 0, 0.40);
|
|
244
|
+
--shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.40), 0px 4px 6px -4px rgba(0, 0, 0, 0.40);
|
|
245
|
+
--shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.40), 0px 8px 10px -6px rgba(0, 0, 0, 0.40);
|
|
246
|
+
--shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.60);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
@layer base {
|
|
250
|
+
* {
|
|
251
|
+
@apply border-border;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
body {
|
|
255
|
+
@apply font-sans antialiased bg-background text-foreground;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
@layer utilities {
|
|
260
|
+
input[type="search"]::-webkit-search-cancel-button {
|
|
261
|
+
@apply hidden;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
[contenteditable][data-placeholder]:empty::before {
|
|
265
|
+
content: attr(data-placeholder);
|
|
266
|
+
color: var(--muted-foreground);
|
|
267
|
+
pointer-events: none;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.no-default-hover-elevate {}
|
|
271
|
+
.no-default-active-elevate {}
|
|
272
|
+
|
|
273
|
+
.toggle-elevate::before,
|
|
274
|
+
.toggle-elevate-2::before {
|
|
275
|
+
content: "";
|
|
276
|
+
pointer-events: none;
|
|
277
|
+
position: absolute;
|
|
278
|
+
inset: 0px;
|
|
279
|
+
border-radius: inherit;
|
|
280
|
+
z-index: -1;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.toggle-elevate.toggle-elevated::before {
|
|
284
|
+
background-color: var(--elevate-2);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.border.toggle-elevate::before {
|
|
288
|
+
inset: -1px;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.hover-elevate:not(.no-default-hover-elevate),
|
|
292
|
+
.active-elevate:not(.no-default-active-elevate),
|
|
293
|
+
.hover-elevate-2:not(.no-default-hover-elevate),
|
|
294
|
+
.active-elevate-2:not(.no-default-active-elevate) {
|
|
295
|
+
position: relative;
|
|
296
|
+
z-index: 0;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.hover-elevate:not(.no-default-hover-elevate)::after,
|
|
300
|
+
.active-elevate:not(.no-default-active-elevate)::after,
|
|
301
|
+
.hover-elevate-2:not(.no-default-hover-elevate)::after,
|
|
302
|
+
.active-elevate-2:not(.no-default-active-elevate)::after {
|
|
303
|
+
content: "";
|
|
304
|
+
pointer-events: none;
|
|
305
|
+
position: absolute;
|
|
306
|
+
inset: 0px;
|
|
307
|
+
border-radius: inherit;
|
|
308
|
+
z-index: 999;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.hover-elevate:hover:not(.no-default-hover-elevate)::after,
|
|
312
|
+
.active-elevate:active:not(.no-default-active-elevate)::after {
|
|
313
|
+
background-color: var(--elevate-1);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
|
|
317
|
+
.active-elevate-2:active:not(.no-default-active-elevate)::after {
|
|
318
|
+
background-color: var(--elevate-2);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.border.hover-elevate:not(.no-hover-interaction-elevate)::after,
|
|
322
|
+
.border.active-elevate:not(.no-active-interaction-elevate)::after,
|
|
323
|
+
.border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
|
|
324
|
+
.border.active-elevate-2:not(.no-active-interaction-elevate)::after,
|
|
325
|
+
.border.hover-elevate:not(.no-hover-interaction-elevate)::after {
|
|
326
|
+
inset: -1px;
|
|
327
|
+
}
|
|
328
|
+
}
|