@ds-gn/tokens 0.0.0-stage → 0.5.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.
Files changed (11) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +244 -2
  3. package/THIRD_PARTY_NOTICES +4 -0
  4. package/dist/index.d.ts +178 -0
  5. package/dist/index.mjs +178 -0
  6. package/dist/theme.tailwind.css +549 -0
  7. package/dist/tokens.overrides.template.css +201 -0
  8. package/dist/tokens.properties.css +358 -0
  9. package/dist/tokens.public.css +358 -0
  10. package/dist/tokens.theme.css +225 -0
  11. package/package.json +75 -4
package/dist/tokens.public.css ADDED
@@ -0,0 +1,358 @@
1
+ /* ==========================================================================
2
+ * tokens.public.css
3
+ *
4
+ * Loaded as a document stylesheet (<link> in <head>).
5
+ * Sets the suffixed source-of-truth values on :root.
6
+ * This is what consumers override to rebrand.
7
+ * ========================================================================== */
8
+
9
+ :root {
10
+ /* Color primitives */
11
+ --color-orange-100: oklch(95.4% 0.038 75.164);
12
+ --color-orange-200: oklch(90.1% 0.076 70.697);
13
+ --color-orange-300: oklch(83.7% 0.128 66.29);
14
+ --color-orange-400: oklch(75% 0.183 55.934);
15
+ --color-orange-500: oklch(70.5% 0.213 47.604);
16
+ --color-orange-600: oklch(64.6% 0.222 41.116);
17
+ --color-orange-700: oklch(55.3% 0.195 38.402);
18
+ --color-orange-900: oklch(40.8% 0.123 38.172);
19
+ --color-blue-50: oklch(97% 0.014 254.604);
20
+ --color-blue-100: oklch(93.2% 0.032 255.585);
21
+ --color-blue-300: oklch(80.9% 0.105 251.813);
22
+ --color-blue-400: oklch(70.7% 0.165 254.624);
23
+ --color-blue-500: oklch(62.3% 0.214 259.815);
24
+ --color-blue-600: oklch(54.6% 0.245 262.881);
25
+ --color-blue-700: oklch(48.8% 0.243 264.376);
26
+ --color-blue-800: oklch(42.4% 0.199 265.638);
27
+ --color-blue-850: oklch(40.2% 0.172 265.58);
28
+ --color-blue-900: oklch(37.9% 0.146 265.522);
29
+ --color-indigo-400: oklch(67.3% 0.182 276.935);
30
+ --color-indigo-500: oklch(58.5% 0.233 277.117);
31
+ --color-indigo-600: oklch(51.1% 0.262 276.966);
32
+ --color-gray-50: oklch(98.5% 0.002 247.839);
33
+ --color-gray-300: oklch(87.2% 0.01 258.338);
34
+ --color-neutral-50: oklch(98.5% 0 0);
35
+ --color-neutral-100: oklch(97% 0 0);
36
+ --color-neutral-200: oklch(92.2% 0 0);
37
+ --color-neutral-300: oklch(87% 0 0);
38
+ --color-neutral-400: oklch(70.8% 0 0);
39
+ --color-neutral-500: oklch(55.6% 0 0);
40
+ --color-neutral-600: oklch(43.9% 0 0);
41
+ --color-neutral-700: oklch(37.1% 0 0);
42
+ --color-neutral-900: oklch(20.5% 0 0);
43
+ --color-white: #fff;
44
+ --color-transparent: transparent;
45
+
46
+ /* Semantic tokens — the override targets */
47
+ --accent-on-light: var(--color-orange-600);
48
+ --accent-on-dark: var(--color-orange-500);
49
+ --accent-text-on-light: var(--color-orange-700);
50
+ --accent-text-on-dark: var(--color-orange-500);
51
+
52
+ --badge-bg-on-light: var(--color-neutral-100);
53
+ --badge-bg-on-dark: var(--color-blue-700);
54
+ --badge-border-on-light: var(--color-neutral-200);
55
+ --badge-border-on-dark: var(--color-blue-600);
56
+ --badge-brand-text-on-light: var(--color-blue-700);
57
+ --badge-brand-text-on-dark: var(--color-blue-100);
58
+ --badge-error-text-on-light: #b91c1c;
59
+ --badge-error-text-on-dark: #fecaca;
60
+ --badge-text-on-light: var(--color-neutral-700);
61
+ --badge-text-on-dark: var(--color-neutral-100);
62
+ --badge-warning-text-on-light: var(--color-orange-900);
63
+ --badge-warning-text-on-dark: var(--color-orange-100);
64
+
65
+ --brand-on-light: var(--color-blue-500);
66
+ --brand-on-dark: var(--color-blue-400);
67
+ --brand-subtle-on-light: var(--color-blue-100);
68
+ --brand-subtle-on-dark: var(--color-blue-800);
69
+
70
+ --button-ghost-bg-on-light: transparent;
71
+ --button-ghost-bg-on-dark: transparent;
72
+ --button-ghost-bg-hover-on-light: var(--color-neutral-200);
73
+ --button-ghost-bg-hover-on-dark: var(--color-neutral-300);
74
+ --button-ghost-text-on-light: var(--color-neutral-900);
75
+ --button-ghost-text-on-dark: var(--color-white);
76
+ --button-ghost-text-hover-on-light: var(--color-neutral-900);
77
+ --button-ghost-text-hover-on-dark: var(--color-neutral-900);
78
+ --button-gradient-text-on-light: var(--color-white);
79
+ --button-gradient-text-on-dark: var(--color-neutral-900);
80
+ --button-inline-text-on-light: var(--color-neutral-900);
81
+ --button-inline-text-on-dark: var(--color-white);
82
+ --button-inline-text-hover-on-light: var(--color-orange-500);
83
+ --button-inline-text-hover-on-dark: var(--color-orange-500);
84
+ --button-link-text-on-light: var(--color-blue-700);
85
+ --button-link-text-on-dark: var(--color-blue-400);
86
+ --button-link-text-hover-on-light: var(--color-blue-800);
87
+ --button-link-text-hover-on-dark: var(--color-blue-300);
88
+ --button-mono-outline-bg-on-light: var(--color-transparent);
89
+ --button-mono-outline-bg-on-dark: var(--color-transparent);
90
+ --button-mono-outline-bg-hover-on-light: var(--color-neutral-900);
91
+ --button-mono-outline-bg-hover-on-dark: var(--color-white);
92
+ --button-mono-outline-outline-on-light: var(--color-neutral-900);
93
+ --button-mono-outline-outline-on-dark: var(--color-neutral-100);
94
+ --button-mono-outline-outline-hover-on-light: var(--color-neutral-700);
95
+ --button-mono-outline-outline-hover-on-dark: var(--color-white);
96
+ --button-mono-outline-text-on-light: var(--color-neutral-900);
97
+ --button-mono-outline-text-on-dark: var(--color-neutral-100);
98
+ --button-mono-outline-text-hover-on-light: var(--color-white);
99
+ --button-mono-outline-text-hover-on-dark: var(--color-neutral-900);
100
+ --button-mono-solid-bg-on-light: var(--color-neutral-900);
101
+ --button-mono-solid-bg-on-dark: var(--color-white);
102
+ --button-mono-solid-bg-hover-on-light: var(--color-neutral-700);
103
+ --button-mono-solid-bg-hover-on-dark: var(--color-neutral-200);
104
+ --button-mono-solid-text-on-light: var(--color-white);
105
+ --button-mono-solid-text-on-dark: var(--color-neutral-900);
106
+ --button-outline-bg-on-light: var(--color-transparent);
107
+ --button-outline-bg-on-dark: var(--color-transparent);
108
+ --button-outline-bg-hover-on-light: var(--color-orange-600);
109
+ --button-outline-bg-hover-on-dark: var(--color-orange-500);
110
+ --button-outline-outline-on-light: var(--color-orange-500);
111
+ --button-outline-outline-on-dark: var(--color-orange-600);
112
+ --button-outline-outline-hover-on-light: var(--color-orange-600);
113
+ --button-outline-outline-hover-on-dark: var(--color-orange-500);
114
+ --button-outline-text-on-light: var(--color-neutral-900);
115
+ --button-outline-text-on-dark: var(--color-neutral-100);
116
+ --button-outline-text-hover-on-light: var(--color-orange-600);
117
+ --button-outline-text-hover-on-dark: var(--color-orange-500);
118
+ --button-solid-bg-on-light: var(--color-orange-500);
119
+ --button-solid-bg-on-dark: var(--color-orange-600);
120
+ --button-solid-bg-hover-on-light: var(--color-orange-400);
121
+ --button-solid-bg-hover-on-dark: var(--color-orange-500);
122
+ --button-solid-text-on-light: var(--color-neutral-900);
123
+ --button-solid-text-on-dark: var(--color-neutral-900);
124
+
125
+ --card-bg-on-light: var(--color-white);
126
+ --card-bg-on-dark: var(--color-blue-800);
127
+ --card-border-on-light: var(--color-neutral-200);
128
+ --card-border-on-dark: rgb(255 255 255 / 0.08);
129
+
130
+ --disabled-on-light: var(--color-neutral-400);
131
+ --disabled-on-dark: var(--color-neutral-600);
132
+
133
+ --error-on-light: #ef4444;
134
+ --error-on-dark: #f87171;
135
+ --error-subtle-on-light: #fee2e2;
136
+ --error-subtle-on-dark: #7f1d1d;
137
+
138
+ --eyebrow-on-light: var(--color-orange-700);
139
+ --eyebrow-on-dark: var(--color-orange-500);
140
+
141
+ --focus-on-light: var(--color-blue-500);
142
+ --focus-on-dark: var(--color-blue-400);
143
+
144
+ --gradient-accent-bg-on-light: linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400));
145
+ --gradient-accent-bg-on-dark: linear-gradient(90deg, var(--color-orange-600), var(--color-orange-400));
146
+ --gradient-accent-bg-hover-on-light: linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300));
147
+ --gradient-accent-bg-hover-on-dark: linear-gradient(90deg, var(--color-orange-500), var(--color-orange-300));
148
+
149
+ --info-on-light: var(--color-blue-500);
150
+ --info-on-dark: var(--color-blue-400);
151
+ --info-subtle-on-light: var(--color-blue-100);
152
+ --info-subtle-on-dark: var(--color-blue-900);
153
+
154
+ --input-bg-on-light: var(--surface-default-on-light);
155
+ --input-bg-on-dark: var(--surface-default-on-dark);
156
+ --input-border-on-light: var(--color-neutral-300);
157
+ --input-border-on-dark: var(--color-blue-600);
158
+ --input-error-text-on-light: #b91c1c;
159
+ --input-error-text-on-dark: #f87171;
160
+ --input-focus-on-light: var(--color-blue-500);
161
+ --input-focus-on-dark: var(--color-blue-400);
162
+ --input-placeholder-on-light: var(--color-neutral-600);
163
+ --input-placeholder-on-dark: var(--color-neutral-500);
164
+ --input-text-on-light: var(--color-neutral-900);
165
+ --input-text-on-dark: var(--color-neutral-100);
166
+
167
+ --interactive-on-light: var(--color-blue-500);
168
+ --interactive-on-dark: var(--color-blue-400);
169
+ --interactive-active-on-light: var(--color-blue-700);
170
+ --interactive-active-on-dark: var(--color-blue-500);
171
+ --interactive-disabled-on-light: var(--color-neutral-300);
172
+ --interactive-disabled-on-dark: var(--color-neutral-700);
173
+ --interactive-hover-on-light: var(--color-blue-600);
174
+ --interactive-hover-on-dark: var(--color-blue-300);
175
+
176
+ --inverse-on-light: var(--color-white);
177
+ --inverse-on-dark: var(--color-neutral-900);
178
+
179
+ --nav-link-dropdown-text-hover-on-light: var(--color-orange-700);
180
+ --nav-link-dropdown-text-hover-on-dark: var(--color-orange-200);
181
+
182
+ --outline-on-light: var(--color-neutral-200);
183
+ --outline-on-dark: oklch(24% 0.05 255);
184
+ --outline-strong-on-light: var(--color-neutral-300);
185
+ --outline-strong-on-dark: var(--color-blue-600);
186
+ --outline-subtle-on-light: var(--color-neutral-100);
187
+ --outline-subtle-on-dark: var(--color-blue-800);
188
+
189
+ --page-on-light: oklch(97% 0.01 255);
190
+ --page-on-dark: oklch(12% 0.05 255);
191
+
192
+ --pattern-dot-on-light: oklch(70% 0.03 255);
193
+ --pattern-dot-on-dark: oklch(40% 0.05 255);
194
+
195
+ --success-on-light: #047857;
196
+ --success-on-dark: #34d399;
197
+ --success-subtle-on-light: #d1fae5;
198
+ --success-subtle-on-dark: #064e3b;
199
+
200
+ --surface-default-on-light: oklch(100% 0 0);
201
+ --surface-default-on-dark: oklch(18% 0.06 255);
202
+ --surface-elevated-on-light: oklch(96% 0.02 255);
203
+ --surface-elevated-on-dark: oklch(0.22 0.08 255);
204
+ --surface-subtle-on-light: oklch(94% 0.04 255);
205
+ --surface-subtle-on-dark: oklch(30% 0.12 255);
206
+
207
+ --terminal-bg: #09090b;
208
+ --terminal-border: #1a1a1a;
209
+ --terminal-dot-red: #ea580c;
210
+ --terminal-dot-yellow: #fbbf24;
211
+ --terminal-muted: #a1a1aa;
212
+ --terminal-success: #34d399;
213
+ --terminal-text: #e4e4e7;
214
+ --terminal-titlebar: #0d0d0f;
215
+
216
+ --text-primary-on-light: var(--color-neutral-900);
217
+ --text-primary-on-dark: var(--color-neutral-50);
218
+ --text-secondary-on-light: var(--color-neutral-600);
219
+ --text-secondary-on-dark: var(--color-neutral-400);
220
+ --text-tertiary-on-light: var(--color-neutral-600);
221
+ --text-tertiary-on-dark: var(--color-neutral-400);
222
+
223
+ --warning-on-light: var(--color-orange-500);
224
+ --warning-on-dark: var(--color-orange-400);
225
+ --warning-subtle-on-light: var(--color-orange-100);
226
+ --warning-subtle-on-dark: var(--color-orange-900);
227
+
228
+ --duration-moderate: 240ms;
229
+ --dsgn-src-duration-moderate: var(--duration-moderate);
230
+ --duration-quick: 180ms;
231
+ --dsgn-src-duration-quick: var(--duration-quick);
232
+
233
+ --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
234
+ --dsgn-src-ease-emphasized: var(--ease-emphasized);
235
+
236
+ --radius-button: calc(infinity * 1px);
237
+ --dsgn-src-radius-button: var(--radius-button);
238
+ --radius-card: 1rem;
239
+ --dsgn-src-radius-card: var(--radius-card);
240
+ --radius-input: 0.5rem;
241
+ --dsgn-src-radius-input: var(--radius-input);
242
+ --radius-surface: 1rem;
243
+ --dsgn-src-radius-surface: var(--radius-surface);
244
+
245
+ --shadow-card-on-light: 0 10px 30px rgb(15 23 42 / 0.08);
246
+ --shadow-card-on-dark: 0 12px 32px rgb(2 6 23 / 0.35);
247
+ --dsgn-src-shadow-card-on-light: var(--shadow-card-on-light);
248
+ --dsgn-src-shadow-card-on-dark: var(--shadow-card-on-dark);
249
+
250
+ /* Unsuffixed aliases (compat fallback, default: dark) */
251
+ --color-accent: var(--accent-on-dark);
252
+ --color-accent-text: var(--accent-text-on-dark);
253
+
254
+ --color-badge-bg: var(--badge-bg-on-dark);
255
+ --color-badge-border: var(--badge-border-on-dark);
256
+ --color-badge-brand-text: var(--badge-brand-text-on-dark);
257
+ --color-badge-error-text: var(--badge-error-text-on-dark);
258
+ --color-badge-text: var(--badge-text-on-dark);
259
+ --color-badge-warning-text: var(--badge-warning-text-on-dark);
260
+
261
+ --color-brand: var(--brand-on-dark);
262
+ --color-brand-subtle: var(--brand-subtle-on-dark);
263
+
264
+ --color-button-ghost-bg: var(--button-ghost-bg-on-dark);
265
+ --color-button-ghost-bg-hover: var(--button-ghost-bg-hover-on-dark);
266
+ --color-button-ghost-text: var(--button-ghost-text-on-dark);
267
+ --color-button-ghost-text-hover: var(--button-ghost-text-hover-on-dark);
268
+ --color-button-gradient-text: var(--button-gradient-text-on-dark);
269
+ --color-button-inline-text: var(--button-inline-text-on-dark);
270
+ --color-button-inline-text-hover: var(--button-inline-text-hover-on-dark);
271
+ --color-button-link-text: var(--button-link-text-on-dark);
272
+ --color-button-link-text-hover: var(--button-link-text-hover-on-dark);
273
+ --color-button-mono-outline-bg: var(--button-mono-outline-bg-on-dark);
274
+ --color-button-mono-outline-bg-hover: var(--button-mono-outline-bg-hover-on-dark);
275
+ --color-button-mono-outline-outline: var(--button-mono-outline-outline-on-dark);
276
+ --color-button-mono-outline-outline-hover: var(--button-mono-outline-outline-hover-on-dark);
277
+ --color-button-mono-outline-text: var(--button-mono-outline-text-on-dark);
278
+ --color-button-mono-outline-text-hover: var(--button-mono-outline-text-hover-on-dark);
279
+ --color-button-mono-solid-bg: var(--button-mono-solid-bg-on-dark);
280
+ --color-button-mono-solid-bg-hover: var(--button-mono-solid-bg-hover-on-dark);
281
+ --color-button-mono-solid-text: var(--button-mono-solid-text-on-dark);
282
+ --color-button-outline-bg: var(--button-outline-bg-on-dark);
283
+ --color-button-outline-bg-hover: var(--button-outline-bg-hover-on-dark);
284
+ --color-button-outline-outline: var(--button-outline-outline-on-dark);
285
+ --color-button-outline-outline-hover: var(--button-outline-outline-hover-on-dark);
286
+ --color-button-outline-text: var(--button-outline-text-on-dark);
287
+ --color-button-outline-text-hover: var(--button-outline-text-hover-on-dark);
288
+ --color-button-solid-bg: var(--button-solid-bg-on-dark);
289
+ --color-button-solid-bg-hover: var(--button-solid-bg-hover-on-dark);
290
+ --color-button-solid-text: var(--button-solid-text-on-dark);
291
+
292
+ --color-card-bg: var(--card-bg-on-dark);
293
+ --color-card-border: var(--card-border-on-dark);
294
+
295
+ --color-disabled: var(--disabled-on-dark);
296
+
297
+ --color-error: var(--error-on-dark);
298
+ --color-error-subtle: var(--error-subtle-on-dark);
299
+
300
+ --color-eyebrow: var(--eyebrow-on-dark);
301
+
302
+ --color-focus: var(--focus-on-dark);
303
+
304
+ --color-gradient-accent-bg: var(--gradient-accent-bg-on-dark);
305
+ --color-gradient-accent-bg-hover: var(--gradient-accent-bg-hover-on-dark);
306
+
307
+ --color-info: var(--info-on-dark);
308
+ --color-info-subtle: var(--info-subtle-on-dark);
309
+
310
+ --color-input-bg: var(--input-bg-on-dark);
311
+ --color-input-border: var(--input-border-on-dark);
312
+ --color-input-error-text: var(--input-error-text-on-dark);
313
+ --color-input-focus: var(--input-focus-on-dark);
314
+ --color-input-placeholder: var(--input-placeholder-on-dark);
315
+ --color-input-text: var(--input-text-on-dark);
316
+
317
+ --color-interactive: var(--interactive-on-dark);
318
+ --color-interactive-active: var(--interactive-active-on-dark);
319
+ --color-interactive-disabled: var(--interactive-disabled-on-dark);
320
+ --color-interactive-hover: var(--interactive-hover-on-dark);
321
+
322
+ --color-inverse: var(--inverse-on-dark);
323
+
324
+ --color-nav-link-dropdown-text-hover: var(--nav-link-dropdown-text-hover-on-dark);
325
+
326
+ --color-outline: var(--outline-on-dark);
327
+ --color-outline-strong: var(--outline-strong-on-dark);
328
+ --color-outline-subtle: var(--outline-subtle-on-dark);
329
+
330
+ --color-page: var(--page-on-dark);
331
+
332
+ --color-pattern-dot: var(--pattern-dot-on-dark);
333
+
334
+ --color-success: var(--success-on-dark);
335
+ --color-success-subtle: var(--success-subtle-on-dark);
336
+
337
+ --color-surface-default: var(--surface-default-on-dark);
338
+ --color-surface-elevated: var(--surface-elevated-on-dark);
339
+ --color-surface-subtle: var(--surface-subtle-on-dark);
340
+
341
+ --color-terminal-bg: var(--terminal-bg);
342
+ --color-terminal-border: var(--terminal-border);
343
+ --color-terminal-dot-red: var(--terminal-dot-red);
344
+ --color-terminal-dot-yellow: var(--terminal-dot-yellow);
345
+ --color-terminal-muted: var(--terminal-muted);
346
+ --color-terminal-success: var(--terminal-success);
347
+ --color-terminal-text: var(--terminal-text);
348
+ --color-terminal-titlebar: var(--terminal-titlebar);
349
+
350
+ --color-text-primary: var(--text-primary-on-dark);
351
+ --color-text-secondary: var(--text-secondary-on-dark);
352
+ --color-text-tertiary: var(--text-tertiary-on-dark);
353
+
354
+ --color-warning: var(--warning-on-dark);
355
+ --color-warning-subtle: var(--warning-subtle-on-dark);
356
+
357
+ --shadow-card: var(--shadow-card-on-dark);
358
+ }
package/dist/tokens.theme.css ADDED
@@ -0,0 +1,225 @@
1
+ /* ==========================================================================
2
+ * tokens.theme.css
3
+ *
4
+ * Loaded as a document stylesheet AFTER public.css.
5
+ * Switches unsuffixed tokens based on [data-theme].
6
+ *
7
+ * Default: Dark mode (via [data-theme="dark"] or .dark class)
8
+ * Override: Light mode (via [data-theme="light"] or .light class)
9
+ *
10
+ * Color aliases use the --color- prefix because that's what Tailwind's
11
+ * generated utilities reference at runtime:
12
+ * .text-text-primary { color: var(--color-text-primary); }
13
+ *
14
+ * Non-color aliases use their own namespace prefix:
15
+ * .shadow-card { box-shadow: var(--shadow-card); }
16
+ *
17
+ * These vars are set on :root / [data-theme] in the light DOM.
18
+ * They inherit across shadow boundaries — that's the only mechanism
19
+ * that crosses into shadow roots.
20
+ * ========================================================================== */
21
+
22
+ :root,
23
+ [data-theme="dark"],
24
+ .dark {
25
+ --color-accent: var(--accent-on-dark);
26
+ --color-accent-text: var(--accent-text-on-dark);
27
+
28
+ --color-badge-bg: var(--badge-bg-on-dark);
29
+ --color-badge-border: var(--badge-border-on-dark);
30
+ --color-badge-brand-text: var(--badge-brand-text-on-dark);
31
+ --color-badge-error-text: var(--badge-error-text-on-dark);
32
+ --color-badge-text: var(--badge-text-on-dark);
33
+ --color-badge-warning-text: var(--badge-warning-text-on-dark);
34
+
35
+ --color-brand: var(--brand-on-dark);
36
+ --color-brand-subtle: var(--brand-subtle-on-dark);
37
+
38
+ --color-button-ghost-bg: var(--button-ghost-bg-on-dark);
39
+ --color-button-ghost-bg-hover: var(--button-ghost-bg-hover-on-dark);
40
+ --color-button-ghost-text: var(--button-ghost-text-on-dark);
41
+ --color-button-ghost-text-hover: var(--button-ghost-text-hover-on-dark);
42
+ --color-button-gradient-text: var(--button-gradient-text-on-dark);
43
+ --color-button-inline-text: var(--button-inline-text-on-dark);
44
+ --color-button-inline-text-hover: var(--button-inline-text-hover-on-dark);
45
+ --color-button-link-text: var(--button-link-text-on-dark);
46
+ --color-button-link-text-hover: var(--button-link-text-hover-on-dark);
47
+ --color-button-mono-outline-bg: var(--button-mono-outline-bg-on-dark);
48
+ --color-button-mono-outline-bg-hover: var(--button-mono-outline-bg-hover-on-dark);
49
+ --color-button-mono-outline-outline: var(--button-mono-outline-outline-on-dark);
50
+ --color-button-mono-outline-outline-hover: var(--button-mono-outline-outline-hover-on-dark);
51
+ --color-button-mono-outline-text: var(--button-mono-outline-text-on-dark);
52
+ --color-button-mono-outline-text-hover: var(--button-mono-outline-text-hover-on-dark);
53
+ --color-button-mono-solid-bg: var(--button-mono-solid-bg-on-dark);
54
+ --color-button-mono-solid-bg-hover: var(--button-mono-solid-bg-hover-on-dark);
55
+ --color-button-mono-solid-text: var(--button-mono-solid-text-on-dark);
56
+ --color-button-outline-bg: var(--button-outline-bg-on-dark);
57
+ --color-button-outline-bg-hover: var(--button-outline-bg-hover-on-dark);
58
+ --color-button-outline-outline: var(--button-outline-outline-on-dark);
59
+ --color-button-outline-outline-hover: var(--button-outline-outline-hover-on-dark);
60
+ --color-button-outline-text: var(--button-outline-text-on-dark);
61
+ --color-button-outline-text-hover: var(--button-outline-text-hover-on-dark);
62
+ --color-button-solid-bg: var(--button-solid-bg-on-dark);
63
+ --color-button-solid-bg-hover: var(--button-solid-bg-hover-on-dark);
64
+ --color-button-solid-text: var(--button-solid-text-on-dark);
65
+
66
+ --color-card-bg: var(--card-bg-on-dark);
67
+ --color-card-border: var(--card-border-on-dark);
68
+
69
+ --color-disabled: var(--disabled-on-dark);
70
+
71
+ --color-error: var(--error-on-dark);
72
+ --color-error-subtle: var(--error-subtle-on-dark);
73
+
74
+ --color-eyebrow: var(--eyebrow-on-dark);
75
+
76
+ --color-focus: var(--focus-on-dark);
77
+
78
+ --color-gradient-accent-bg: var(--gradient-accent-bg-on-dark);
79
+ --color-gradient-accent-bg-hover: var(--gradient-accent-bg-hover-on-dark);
80
+
81
+ --color-info: var(--info-on-dark);
82
+ --color-info-subtle: var(--info-subtle-on-dark);
83
+
84
+ --color-input-bg: var(--input-bg-on-dark);
85
+ --color-input-border: var(--input-border-on-dark);
86
+ --color-input-error-text: var(--input-error-text-on-dark);
87
+ --color-input-focus: var(--input-focus-on-dark);
88
+ --color-input-placeholder: var(--input-placeholder-on-dark);
89
+ --color-input-text: var(--input-text-on-dark);
90
+
91
+ --color-interactive: var(--interactive-on-dark);
92
+ --color-interactive-active: var(--interactive-active-on-dark);
93
+ --color-interactive-disabled: var(--interactive-disabled-on-dark);
94
+ --color-interactive-hover: var(--interactive-hover-on-dark);
95
+
96
+ --color-inverse: var(--inverse-on-dark);
97
+
98
+ --color-nav-link-dropdown-text-hover: var(--nav-link-dropdown-text-hover-on-dark);
99
+
100
+ --color-outline: var(--outline-on-dark);
101
+ --color-outline-strong: var(--outline-strong-on-dark);
102
+ --color-outline-subtle: var(--outline-subtle-on-dark);
103
+
104
+ --color-page: var(--page-on-dark);
105
+
106
+ --color-pattern-dot: var(--pattern-dot-on-dark);
107
+
108
+ --color-success: var(--success-on-dark);
109
+ --color-success-subtle: var(--success-subtle-on-dark);
110
+
111
+ --color-surface-default: var(--surface-default-on-dark);
112
+ --color-surface-elevated: var(--surface-elevated-on-dark);
113
+ --color-surface-subtle: var(--surface-subtle-on-dark);
114
+
115
+ --color-text-primary: var(--text-primary-on-dark);
116
+ --color-text-secondary: var(--text-secondary-on-dark);
117
+ --color-text-tertiary: var(--text-tertiary-on-dark);
118
+
119
+ --color-warning: var(--warning-on-dark);
120
+ --color-warning-subtle: var(--warning-subtle-on-dark);
121
+
122
+ --shadow-card: var(--shadow-card-on-dark);
123
+ }
124
+
125
+ [data-theme="light"],
126
+ .light {
127
+ --color-accent: var(--accent-on-light);
128
+ --color-accent-text: var(--accent-text-on-light);
129
+
130
+ --color-badge-bg: var(--badge-bg-on-light);
131
+ --color-badge-border: var(--badge-border-on-light);
132
+ --color-badge-brand-text: var(--badge-brand-text-on-light);
133
+ --color-badge-error-text: var(--badge-error-text-on-light);
134
+ --color-badge-text: var(--badge-text-on-light);
135
+ --color-badge-warning-text: var(--badge-warning-text-on-light);
136
+
137
+ --color-brand: var(--brand-on-light);
138
+ --color-brand-subtle: var(--brand-subtle-on-light);
139
+
140
+ --color-button-ghost-bg: var(--button-ghost-bg-on-light);
141
+ --color-button-ghost-bg-hover: var(--button-ghost-bg-hover-on-light);
142
+ --color-button-ghost-text: var(--button-ghost-text-on-light);
143
+ --color-button-ghost-text-hover: var(--button-ghost-text-hover-on-light);
144
+ --color-button-gradient-text: var(--button-gradient-text-on-light);
145
+ --color-button-inline-text: var(--button-inline-text-on-light);
146
+ --color-button-inline-text-hover: var(--button-inline-text-hover-on-light);
147
+ --color-button-link-text: var(--button-link-text-on-light);
148
+ --color-button-link-text-hover: var(--button-link-text-hover-on-light);
149
+ --color-button-mono-outline-bg: var(--button-mono-outline-bg-on-light);
150
+ --color-button-mono-outline-bg-hover: var(--button-mono-outline-bg-hover-on-light);
151
+ --color-button-mono-outline-outline: var(--button-mono-outline-outline-on-light);
152
+ --color-button-mono-outline-outline-hover: var(--button-mono-outline-outline-hover-on-light);
153
+ --color-button-mono-outline-text: var(--button-mono-outline-text-on-light);
154
+ --color-button-mono-outline-text-hover: var(--button-mono-outline-text-hover-on-light);
155
+ --color-button-mono-solid-bg: var(--button-mono-solid-bg-on-light);
156
+ --color-button-mono-solid-bg-hover: var(--button-mono-solid-bg-hover-on-light);
157
+ --color-button-mono-solid-text: var(--button-mono-solid-text-on-light);
158
+ --color-button-outline-bg: var(--button-outline-bg-on-light);
159
+ --color-button-outline-bg-hover: var(--button-outline-bg-hover-on-light);
160
+ --color-button-outline-outline: var(--button-outline-outline-on-light);
161
+ --color-button-outline-outline-hover: var(--button-outline-outline-hover-on-light);
162
+ --color-button-outline-text: var(--button-outline-text-on-light);
163
+ --color-button-outline-text-hover: var(--button-outline-text-hover-on-light);
164
+ --color-button-solid-bg: var(--button-solid-bg-on-light);
165
+ --color-button-solid-bg-hover: var(--button-solid-bg-hover-on-light);
166
+ --color-button-solid-text: var(--button-solid-text-on-light);
167
+
168
+ --color-card-bg: var(--card-bg-on-light);
169
+ --color-card-border: var(--card-border-on-light);
170
+
171
+ --color-disabled: var(--disabled-on-light);
172
+
173
+ --color-error: var(--error-on-light);
174
+ --color-error-subtle: var(--error-subtle-on-light);
175
+
176
+ --color-eyebrow: var(--eyebrow-on-light);
177
+
178
+ --color-focus: var(--focus-on-light);
179
+
180
+ --color-gradient-accent-bg: var(--gradient-accent-bg-on-light);
181
+ --color-gradient-accent-bg-hover: var(--gradient-accent-bg-hover-on-light);
182
+
183
+ --color-info: var(--info-on-light);
184
+ --color-info-subtle: var(--info-subtle-on-light);
185
+
186
+ --color-input-bg: var(--input-bg-on-light);
187
+ --color-input-border: var(--input-border-on-light);
188
+ --color-input-error-text: var(--input-error-text-on-light);
189
+ --color-input-focus: var(--input-focus-on-light);
190
+ --color-input-placeholder: var(--input-placeholder-on-light);
191
+ --color-input-text: var(--input-text-on-light);
192
+
193
+ --color-interactive: var(--interactive-on-light);
194
+ --color-interactive-active: var(--interactive-active-on-light);
195
+ --color-interactive-disabled: var(--interactive-disabled-on-light);
196
+ --color-interactive-hover: var(--interactive-hover-on-light);
197
+
198
+ --color-inverse: var(--inverse-on-light);
199
+
200
+ --color-nav-link-dropdown-text-hover: var(--nav-link-dropdown-text-hover-on-light);
201
+
202
+ --color-outline: var(--outline-on-light);
203
+ --color-outline-strong: var(--outline-strong-on-light);
204
+ --color-outline-subtle: var(--outline-subtle-on-light);
205
+
206
+ --color-page: var(--page-on-light);
207
+
208
+ --color-pattern-dot: var(--pattern-dot-on-light);
209
+
210
+ --color-success: var(--success-on-light);
211
+ --color-success-subtle: var(--success-subtle-on-light);
212
+
213
+ --color-surface-default: var(--surface-default-on-light);
214
+ --color-surface-elevated: var(--surface-elevated-on-light);
215
+ --color-surface-subtle: var(--surface-subtle-on-light);
216
+
217
+ --color-text-primary: var(--text-primary-on-light);
218
+ --color-text-secondary: var(--text-secondary-on-light);
219
+ --color-text-tertiary: var(--text-tertiary-on-light);
220
+
221
+ --color-warning: var(--warning-on-light);
222
+ --color-warning-subtle: var(--warning-subtle-on-light);
223
+
224
+ --shadow-card: var(--shadow-card-on-light);
225
+ }
package/package.json CHANGED
@@ -1,6 +1,77 @@
1
1
  {
2
2
  "name": "@ds-gn/tokens",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "0.5.0",
4
+ "description": "Design tokens for the DS-GN Design System",
5
+ "type": "module",
6
+ "main": "./dist/index.mjs",
7
+ "types": "./dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.mjs",
12
+ "default": "./dist/index.mjs"
13
+ },
14
+ "./tailwind": {
15
+ "default": "./dist/theme.tailwind.css"
16
+ },
17
+ "./public": {
18
+ "default": "./dist/tokens.public.css"
19
+ },
20
+ "./theme": {
21
+ "default": "./dist/tokens.theme.css"
22
+ },
23
+ "./template": {
24
+ "default": "./dist/tokens.overrides.template.css"
25
+ },
26
+ "./properties": {
27
+ "default": "./dist/tokens.properties.css"
28
+ },
29
+ "./package.json": "./package.json"
30
+ },
31
+ "files": [
32
+ "dist/**/*",
33
+ "!dist/cli.js",
34
+ "!dist/tokens.docs.json",
35
+ "!dist/**/*.map",
36
+ "README.md",
37
+ "LICENSE",
38
+ "THIRD_PARTY_NOTICES"
39
+ ],
40
+ "scripts": {
41
+ "build": "bun ./build.ts",
42
+ "watch": "bun --watch ./build.ts",
43
+ "test": "bun test",
44
+ "prepublishOnly": "bun run build"
45
+ },
46
+ "keywords": [
47
+ "design-tokens",
48
+ "design-system",
49
+ "css-variables",
50
+ "tailwind",
51
+ "tokens",
52
+ "dsgn"
53
+ ],
54
+ "author": "LightLeap Labs LLC",
55
+ "license": "MIT",
56
+ "bugs": {
57
+ "email": "support@ds-gn.com",
58
+ "url": "https://github.com/lightleaplabs/design-system/issues"
59
+ },
60
+ "homepage": "https://ds-gn.com/?utm_source=npm&utm_medium=package_page&utm_campaign=tokens",
61
+ "publishConfig": {
62
+ "access": "public",
63
+ "registry": "https://registry.npmjs.org"
64
+ },
65
+ "devDependencies": {
66
+ "@clack/prompts": "^0.9.1"
67
+ },
68
+ "engines": {
69
+ "node": ">=18.0.0",
70
+ "bun": ">=1.4.0"
71
+ },
72
+ "repository": {
73
+ "type": "git",
74
+ "url": "git+https://github.com/LightLeapLabs/lightleap.git",
75
+ "directory": "packages/tokens"
76
+ }
77
+ }