@voila.dev/ui-tokens 0.0.8

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.
Files changed (2) hide show
  1. package/package.json +38 -0
  2. package/src/design-tokens.css +394 -0
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "@voila.dev/ui-tokens",
3
+ "version": "0.0.8",
4
+ "type": "module",
5
+ "description": "Your whole brand in one CSS file. Change it, everything follows.",
6
+ "license": "MIT",
7
+ "homepage": "https://ui.voila.dev/start/theming",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/voila-voila-dev/ui.git",
11
+ "directory": "packages/ui-tokens"
12
+ },
13
+ "keywords": [
14
+ "design-tokens",
15
+ "tailwindcss",
16
+ "oklch",
17
+ "theme"
18
+ ],
19
+ "publishConfig": {
20
+ "access": "public"
21
+ },
22
+ "files": [
23
+ "src",
24
+ "!src/**/*.test.ts",
25
+ "!src/**/*.test.tsx",
26
+ "!src/**/*.stories.ts",
27
+ "!src/**/*.stories.tsx"
28
+ ],
29
+ "sideEffects": [
30
+ "**/*.css"
31
+ ],
32
+ "exports": {
33
+ "./design-tokens.css": "./src/design-tokens.css"
34
+ },
35
+ "peerDependencies": {
36
+ "tailwindcss": "^4.0.0"
37
+ }
38
+ }
package/src/design-tokens.css ADDED
@@ -0,0 +1,394 @@
1
+ /*
2
+ * @voila.dev/ui-tokens - the single source of truth for design tokens.
3
+ *
4
+ * One color space (OKLch), one semantic palette. Import it AFTER
5
+ * `@import "tailwindcss"` in your app's `globals.css`; `@voila.dev/ui` already
6
+ * pulls it in through its own `styles/globals.css`.
7
+ *
8
+ * Everything here is a plain CSS custom property, so rebranding the whole
9
+ * system is a matter of redefining the handful you care about in your own
10
+ * stylesheet - see https://ui.voila.dev/start/theming.
11
+ *
12
+ * Roles (shadcn convention - each is a `color` + `-foreground` pair):
13
+ * --primary indigo - the neutral brand identity; admin UI + default CTAs.
14
+ * --provider blue - a first product surface.
15
+ * --organization orange - a second product surface.
16
+ * --secondary neutral gray (the standard shadcn role; not a brand color).
17
+ * `--provider` and `--organization` exist for products that need two distinct
18
+ * workspace identities; drop or rename them if yours does not. Lighter/tinted
19
+ * use is an opacity modifier (`bg-provider/10 text-provider`), never an extra
20
+ * token. Remaining neutrals (`muted`, `accent`) follow the shadcn OKLch system,
21
+ * with a full `.dark` palette.
22
+ */
23
+
24
+ @custom-variant dark (&:is(.dark *));
25
+
26
+ :root {
27
+ color-scheme: light;
28
+
29
+ /* Surfaces & text */
30
+ --background: oklch(1 0 0);
31
+ --foreground: oklch(0.145 0 0);
32
+ --card: oklch(1 0 0);
33
+ --card-foreground: oklch(0.145 0 0);
34
+ --popover: oklch(1 0 0);
35
+ --popover-foreground: oklch(0.145 0 0);
36
+
37
+ /* Primary - deep indigo #151B77 (neutral brand identity; admin UI + default
38
+ * CTAs). Replaces a flat black so primary buttons, progress fills and active
39
+ * states read as branded rather than "default shadcn black"; sits between the
40
+ * provider blue and the deep-navy brand feel. Foreground stays white (AA: white
41
+ * on #151B77 ~= 11:1). */
42
+ --primary: oklch(0.3 0.13 269);
43
+ --primary-foreground: oklch(0.985 0 0);
44
+ --secondary: oklch(0.97 0 0);
45
+ --secondary-foreground: oklch(0.205 0 0);
46
+
47
+ /* Brand surfaces - provider (blue) & organization (orange) */
48
+ --provider: oklch(0.5547 0.2451 266.71);
49
+ --provider-foreground: oklch(1 0 0);
50
+ --organization: oklch(0.705 0.186 47);
51
+ --organization-foreground: oklch(1 0 0);
52
+
53
+ /* Neutral roles */
54
+ --muted: oklch(0.97 0 0);
55
+ /* Secondary text (metadata, placeholders, "Back", helper copy). Darkened from
56
+ * 0.556 (~4.8:1 on white, AA but borderline) to 0.49 (~5.8:1) so dates,
57
+ * helper strings and disabled-looking labels clear WCAG AA comfortably. */
58
+ --muted-foreground: oklch(0.49 0 0);
59
+ --accent: oklch(0.97 0 0);
60
+ --accent-foreground: oklch(0.205 0 0);
61
+
62
+ /* Status */
63
+ --destructive: oklch(0.577 0.245 27.325);
64
+ --destructive-foreground: oklch(0.985 0 0);
65
+ --success: oklch(0.623 0.1688 149.18);
66
+ --success-foreground: oklch(1 0 0);
67
+ --warning: oklch(0.7697 0.1645 70.61);
68
+ --warning-foreground: oklch(1 0 0);
69
+
70
+ /* Badge palette - an intentional, closed multi-color set for catalog badges
71
+ * (skills, activities). Documented exception to the "no ad-hoc tokens" rule
72
+ * above: the names are enumerated once in `BadgeColorEnum` (domain) and
73
+ * `badgeColors` (badge.tsx). Each has a `.dark` override so chips stay legible
74
+ * in both themes; bright hues (amber/yellow/lime/cyan) take a dark foreground. */
75
+ --badge-slate: oklch(0.554 0.041 257);
76
+ --badge-slate-foreground: oklch(1 0 0);
77
+ --badge-gray: oklch(0.551 0.027 264);
78
+ --badge-gray-foreground: oklch(1 0 0);
79
+ --badge-zinc: oklch(0.552 0.016 286);
80
+ --badge-zinc-foreground: oklch(1 0 0);
81
+ --badge-red: oklch(0.637 0.237 25.3);
82
+ --badge-red-foreground: oklch(1 0 0);
83
+ --badge-orange: oklch(0.705 0.186 47);
84
+ --badge-orange-foreground: oklch(1 0 0);
85
+ --badge-amber: oklch(0.79 0.155 75);
86
+ --badge-amber-foreground: oklch(0.27 0.02 75);
87
+ --badge-yellow: oklch(0.852 0.16 95);
88
+ --badge-yellow-foreground: oklch(0.27 0.02 95);
89
+ --badge-lime: oklch(0.83 0.2 128);
90
+ --badge-lime-foreground: oklch(0.27 0.03 128);
91
+ --badge-green: oklch(0.723 0.19 149);
92
+ --badge-green-foreground: oklch(1 0 0);
93
+ --badge-emerald: oklch(0.696 0.149 162);
94
+ --badge-emerald-foreground: oklch(1 0 0);
95
+ --badge-teal: oklch(0.704 0.12 183);
96
+ --badge-teal-foreground: oklch(1 0 0);
97
+ --badge-cyan: oklch(0.715 0.123 215);
98
+ --badge-cyan-foreground: oklch(0.27 0.02 215);
99
+ --badge-sky: oklch(0.685 0.149 237);
100
+ --badge-sky-foreground: oklch(1 0 0);
101
+ --badge-blue: oklch(0.623 0.214 259);
102
+ --badge-blue-foreground: oklch(1 0 0);
103
+ --badge-indigo: oklch(0.585 0.233 277);
104
+ --badge-indigo-foreground: oklch(1 0 0);
105
+ --badge-violet: oklch(0.606 0.25 292);
106
+ --badge-violet-foreground: oklch(1 0 0);
107
+ --badge-purple: oklch(0.627 0.265 304);
108
+ --badge-purple-foreground: oklch(1 0 0);
109
+ --badge-fuchsia: oklch(0.667 0.295 322);
110
+ --badge-fuchsia-foreground: oklch(1 0 0);
111
+ --badge-pink: oklch(0.656 0.241 354);
112
+ --badge-pink-foreground: oklch(1 0 0);
113
+ --badge-rose: oklch(0.645 0.246 16.4);
114
+ --badge-rose-foreground: oklch(1 0 0);
115
+
116
+ /* Lines & focus */
117
+ --border: oklch(0.922 0 0);
118
+ --input: oklch(0.922 0 0);
119
+ --ring: oklch(0.708 0 0);
120
+
121
+ /* Charts */
122
+ --chart-1: oklch(0.646 0.222 41.116);
123
+ --chart-2: oklch(0.6 0.118 184.704);
124
+ --chart-3: oklch(0.398 0.07 227.392);
125
+ --chart-4: oklch(0.828 0.189 84.429);
126
+ --chart-5: oklch(0.769 0.188 70.08);
127
+
128
+ /* Sidebar */
129
+ --sidebar: oklch(0.985 0 0);
130
+ --sidebar-foreground: oklch(0.145 0 0);
131
+ --sidebar-primary: oklch(0.205 0 0);
132
+ --sidebar-primary-foreground: oklch(0.985 0 0);
133
+ --sidebar-accent: oklch(0.97 0 0);
134
+ --sidebar-accent-foreground: oklch(0.205 0 0);
135
+ --sidebar-border: oklch(0.922 0 0);
136
+ --sidebar-ring: oklch(0.708 0 0);
137
+
138
+ /* Radius */
139
+ --radius: 0.625rem;
140
+ }
141
+
142
+ .dark {
143
+ color-scheme: dark;
144
+
145
+ --background: oklch(0.145 0 0);
146
+ --foreground: oklch(0.985 0 0);
147
+ --card: oklch(0.205 0 0);
148
+ --card-foreground: oklch(0.985 0 0);
149
+ --popover: oklch(0.205 0 0);
150
+ --popover-foreground: oklch(0.985 0 0);
151
+
152
+ --primary: oklch(0.922 0 0);
153
+ --primary-foreground: oklch(0.205 0 0);
154
+ --secondary: oklch(0.269 0 0);
155
+ --secondary-foreground: oklch(0.985 0 0);
156
+ --provider: oklch(0.65 0.2 266.71);
157
+ --provider-foreground: oklch(1 0 0);
158
+ --organization: oklch(0.74 0.17 50);
159
+ --organization-foreground: oklch(1 0 0);
160
+ --muted: oklch(0.269 0 0);
161
+ --muted-foreground: oklch(0.708 0 0);
162
+ --accent: oklch(0.269 0 0);
163
+ --accent-foreground: oklch(0.985 0 0);
164
+
165
+ --destructive: oklch(0.704 0.191 22.216);
166
+ --destructive-foreground: oklch(0.985 0 0);
167
+ --success: oklch(0.696 0.17 162.48);
168
+ --success-foreground: oklch(0.145 0 0);
169
+ --warning: oklch(0.828 0.189 84.429);
170
+ --warning-foreground: oklch(0.145 0 0);
171
+
172
+ /* Badge palette - dark overrides (lighter bases; same foreground policy). */
173
+ --badge-slate: oklch(0.64 0.04 257);
174
+ --badge-slate-foreground: oklch(1 0 0);
175
+ --badge-gray: oklch(0.64 0.025 264);
176
+ --badge-gray-foreground: oklch(1 0 0);
177
+ --badge-zinc: oklch(0.64 0.015 286);
178
+ --badge-zinc-foreground: oklch(1 0 0);
179
+ --badge-red: oklch(0.704 0.191 22.2);
180
+ --badge-red-foreground: oklch(1 0 0);
181
+ --badge-orange: oklch(0.74 0.17 50);
182
+ --badge-orange-foreground: oklch(1 0 0);
183
+ --badge-amber: oklch(0.83 0.15 78);
184
+ --badge-amber-foreground: oklch(0.27 0.02 78);
185
+ --badge-yellow: oklch(0.86 0.16 95);
186
+ --badge-yellow-foreground: oklch(0.27 0.02 95);
187
+ --badge-lime: oklch(0.86 0.2 128);
188
+ --badge-lime-foreground: oklch(0.27 0.03 128);
189
+ --badge-green: oklch(0.76 0.18 150);
190
+ --badge-green-foreground: oklch(1 0 0);
191
+ --badge-emerald: oklch(0.74 0.15 162);
192
+ --badge-emerald-foreground: oklch(1 0 0);
193
+ --badge-teal: oklch(0.75 0.12 183);
194
+ --badge-teal-foreground: oklch(1 0 0);
195
+ --badge-cyan: oklch(0.78 0.12 215);
196
+ --badge-cyan-foreground: oklch(0.27 0.02 215);
197
+ --badge-sky: oklch(0.74 0.14 237);
198
+ --badge-sky-foreground: oklch(1 0 0);
199
+ --badge-blue: oklch(0.68 0.19 259);
200
+ --badge-blue-foreground: oklch(1 0 0);
201
+ --badge-indigo: oklch(0.66 0.2 277);
202
+ --badge-indigo-foreground: oklch(1 0 0);
203
+ --badge-violet: oklch(0.68 0.22 292);
204
+ --badge-violet-foreground: oklch(1 0 0);
205
+ --badge-purple: oklch(0.7 0.23 304);
206
+ --badge-purple-foreground: oklch(1 0 0);
207
+ --badge-fuchsia: oklch(0.73 0.26 322);
208
+ --badge-fuchsia-foreground: oklch(1 0 0);
209
+ --badge-pink: oklch(0.72 0.22 354);
210
+ --badge-pink-foreground: oklch(1 0 0);
211
+ --badge-rose: oklch(0.71 0.22 16.4);
212
+ --badge-rose-foreground: oklch(1 0 0);
213
+
214
+ --border: oklch(1 0 0 / 10%);
215
+ --input: oklch(1 0 0 / 15%);
216
+ --ring: oklch(0.556 0 0);
217
+
218
+ --chart-1: oklch(0.488 0.243 264.376);
219
+ --chart-2: oklch(0.696 0.17 162.48);
220
+ --chart-3: oklch(0.769 0.188 70.08);
221
+ --chart-4: oklch(0.627 0.265 303.9);
222
+ --chart-5: oklch(0.645 0.246 16.439);
223
+
224
+ --sidebar: oklch(0.205 0 0);
225
+ --sidebar-foreground: oklch(0.985 0 0);
226
+ --sidebar-primary: oklch(0.922 0 0);
227
+ --sidebar-primary-foreground: oklch(0.205 0 0);
228
+ --sidebar-accent: oklch(0.269 0 0);
229
+ --sidebar-accent-foreground: oklch(0.985 0 0);
230
+ --sidebar-border: oklch(1 0 0 / 10%);
231
+ --sidebar-ring: oklch(0.556 0 0);
232
+ }
233
+
234
+ /* Map raw tokens onto Tailwind's `--color-*` namespace. `inline` keeps the
235
+ * `var(--token)` reference in generated utilities so `.dark` overrides apply. */
236
+ @theme inline {
237
+ --color-background: var(--background);
238
+ --color-foreground: var(--foreground);
239
+ --color-card: var(--card);
240
+ --color-card-foreground: var(--card-foreground);
241
+ --color-popover: var(--popover);
242
+ --color-popover-foreground: var(--popover-foreground);
243
+ --color-primary: var(--primary);
244
+ --color-primary-foreground: var(--primary-foreground);
245
+ --color-secondary: var(--secondary);
246
+ --color-secondary-foreground: var(--secondary-foreground);
247
+ --color-provider: var(--provider);
248
+ --color-provider-foreground: var(--provider-foreground);
249
+ --color-organization: var(--organization);
250
+ --color-organization-foreground: var(--organization-foreground);
251
+ --color-muted: var(--muted);
252
+ --color-muted-foreground: var(--muted-foreground);
253
+ --color-accent: var(--accent);
254
+ --color-accent-foreground: var(--accent-foreground);
255
+ --color-destructive: var(--destructive);
256
+ --color-destructive-foreground: var(--destructive-foreground);
257
+ --color-success: var(--success);
258
+ --color-success-foreground: var(--success-foreground);
259
+ --color-warning: var(--warning);
260
+ --color-warning-foreground: var(--warning-foreground);
261
+
262
+ /* Badge palette - keep in sync with `badgeColors` in badge.tsx. */
263
+ --color-badge-slate: var(--badge-slate);
264
+ --color-badge-slate-foreground: var(--badge-slate-foreground);
265
+ --color-badge-gray: var(--badge-gray);
266
+ --color-badge-gray-foreground: var(--badge-gray-foreground);
267
+ --color-badge-zinc: var(--badge-zinc);
268
+ --color-badge-zinc-foreground: var(--badge-zinc-foreground);
269
+ --color-badge-red: var(--badge-red);
270
+ --color-badge-red-foreground: var(--badge-red-foreground);
271
+ --color-badge-orange: var(--badge-orange);
272
+ --color-badge-orange-foreground: var(--badge-orange-foreground);
273
+ --color-badge-amber: var(--badge-amber);
274
+ --color-badge-amber-foreground: var(--badge-amber-foreground);
275
+ --color-badge-yellow: var(--badge-yellow);
276
+ --color-badge-yellow-foreground: var(--badge-yellow-foreground);
277
+ --color-badge-lime: var(--badge-lime);
278
+ --color-badge-lime-foreground: var(--badge-lime-foreground);
279
+ --color-badge-green: var(--badge-green);
280
+ --color-badge-green-foreground: var(--badge-green-foreground);
281
+ --color-badge-emerald: var(--badge-emerald);
282
+ --color-badge-emerald-foreground: var(--badge-emerald-foreground);
283
+ --color-badge-teal: var(--badge-teal);
284
+ --color-badge-teal-foreground: var(--badge-teal-foreground);
285
+ --color-badge-cyan: var(--badge-cyan);
286
+ --color-badge-cyan-foreground: var(--badge-cyan-foreground);
287
+ --color-badge-sky: var(--badge-sky);
288
+ --color-badge-sky-foreground: var(--badge-sky-foreground);
289
+ --color-badge-blue: var(--badge-blue);
290
+ --color-badge-blue-foreground: var(--badge-blue-foreground);
291
+ --color-badge-indigo: var(--badge-indigo);
292
+ --color-badge-indigo-foreground: var(--badge-indigo-foreground);
293
+ --color-badge-violet: var(--badge-violet);
294
+ --color-badge-violet-foreground: var(--badge-violet-foreground);
295
+ --color-badge-purple: var(--badge-purple);
296
+ --color-badge-purple-foreground: var(--badge-purple-foreground);
297
+ --color-badge-fuchsia: var(--badge-fuchsia);
298
+ --color-badge-fuchsia-foreground: var(--badge-fuchsia-foreground);
299
+ --color-badge-pink: var(--badge-pink);
300
+ --color-badge-pink-foreground: var(--badge-pink-foreground);
301
+ --color-badge-rose: var(--badge-rose);
302
+ --color-badge-rose-foreground: var(--badge-rose-foreground);
303
+
304
+ --color-border: var(--border);
305
+ --color-input: var(--input);
306
+ --color-ring: var(--ring);
307
+ --color-chart-1: var(--chart-1);
308
+ --color-chart-2: var(--chart-2);
309
+ --color-chart-3: var(--chart-3);
310
+ --color-chart-4: var(--chart-4);
311
+ --color-chart-5: var(--chart-5);
312
+ --color-sidebar: var(--sidebar);
313
+ --color-sidebar-foreground: var(--sidebar-foreground);
314
+ --color-sidebar-primary: var(--sidebar-primary);
315
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
316
+ --color-sidebar-accent: var(--sidebar-accent);
317
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
318
+ --color-sidebar-border: var(--sidebar-border);
319
+ --color-sidebar-ring: var(--sidebar-ring);
320
+
321
+ --radius-sm: calc(var(--radius) - 4px);
322
+ --radius-md: calc(var(--radius) - 2px);
323
+ --radius-lg: var(--radius);
324
+ --radius-xl: calc(var(--radius) + 4px);
325
+ }
326
+
327
+ /* Typography & motion - static values, shared across both sites. */
328
+ @theme {
329
+ --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
330
+ --font-heading: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
331
+
332
+ /* Fluid overshoot-free easing for panel/positioner motion (navigation menu;
333
+ * reuse instead of copying the cubic-bezier literal). */
334
+ --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
335
+
336
+ --animate-fade-in: fade-in 0.5s ease-out forwards;
337
+ --animate-fade-up: fade-up 0.5s ease-out forwards;
338
+ --animate-slide-in-left: slide-in-left 0.5s ease-out forwards;
339
+ --animate-slide-in-right: slide-in-right 0.5s ease-out forwards;
340
+ --animate-scale-in: scale-in 0.3s ease-out forwards;
341
+
342
+ @keyframes fade-in {
343
+ from {
344
+ opacity: 0;
345
+ }
346
+ to {
347
+ opacity: 1;
348
+ }
349
+ }
350
+
351
+ @keyframes fade-up {
352
+ from {
353
+ opacity: 0;
354
+ transform: translateY(20px);
355
+ }
356
+ to {
357
+ opacity: 1;
358
+ transform: translateY(0);
359
+ }
360
+ }
361
+
362
+ @keyframes slide-in-left {
363
+ from {
364
+ opacity: 0;
365
+ transform: translateX(-20px);
366
+ }
367
+ to {
368
+ opacity: 1;
369
+ transform: translateX(0);
370
+ }
371
+ }
372
+
373
+ @keyframes slide-in-right {
374
+ from {
375
+ opacity: 0;
376
+ transform: translateX(20px);
377
+ }
378
+ to {
379
+ opacity: 1;
380
+ transform: translateX(0);
381
+ }
382
+ }
383
+
384
+ @keyframes scale-in {
385
+ from {
386
+ opacity: 0;
387
+ transform: scale(0.95);
388
+ }
389
+ to {
390
+ opacity: 1;
391
+ transform: scale(1);
392
+ }
393
+ }
394
+ }