@sublimee/tokens 0.1.1

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 (10) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +370 -0
  3. package/dist/index.d.mts +25 -0
  4. package/dist/index.d.ts +25 -0
  5. package/dist/index.js +18 -0
  6. package/dist/index.mjs +0 -0
  7. package/dist/tokens.css +449 -0
  8. package/package.json +49 -0
  9. package/src/index.ts +202 -0
  10. package/src/tokens.css +449 -0
package/src/tokens.css ADDED
@@ -0,0 +1,449 @@
1
+ /**
2
+ * @sublimee/tokens
3
+ * Semantic Design Token System
4
+ *
5
+ * Import this file once in your application's global CSS:
6
+ * @import "@sublimee/tokens/tokens.css";
7
+ *
8
+ * Then override specific tokens for your brand:
9
+ * :root {
10
+ * --sublime-color-interactive-accent: #ec4899;
11
+ * }
12
+ */
13
+
14
+ /* ============================================================================
15
+ LIGHT MODE (DEFAULT)
16
+ ============================================================================ */
17
+
18
+ :root {
19
+ /* ==========================================================================
20
+ COLOR TOKENS - SURFACES
21
+ Background colors for containers, cards, pages
22
+ ========================================================================== */
23
+
24
+ /* Base surface (page background) */
25
+ --sublime-color-surface-0: #ffffff;
26
+ --sublime-color-surface-0-hover: #fafafa;
27
+ --sublime-color-surface-0-active: #f5f5f5;
28
+
29
+ /* Elevated surface (cards, modals, popovers) */
30
+ --sublime-color-surface-1: #ffffff;
31
+ --sublime-color-surface-1-hover: #fafafa;
32
+ --sublime-color-surface-1-active: #f5f5f5;
33
+
34
+ /* Higher elevation (menus, tooltips) */
35
+ --sublime-color-surface-2: #f9fafb;
36
+ --sublime-color-surface-2-hover: #f3f4f6;
37
+ --sublime-color-surface-2-active: #e5e7eb;
38
+
39
+ /* Inset/depressed surface (inputs, wells) */
40
+ --sublime-color-surface-inset: #f3f4f6;
41
+ --sublime-color-surface-inset-hover: #e5e7eb;
42
+ --sublime-color-surface-inset-active: #d1d5db;
43
+
44
+ /* ==========================================================================
45
+ COLOR TOKENS - TEXT
46
+ Content colors by emphasis level
47
+ ========================================================================== */
48
+
49
+ /* Primary text (headings, important body) */
50
+ --sublime-color-text-primary: #111827;
51
+ --sublime-color-text-primary-inverse: #ffffff;
52
+
53
+ /* Secondary text (body, descriptions) */
54
+ --sublime-color-text-secondary: #4b5563;
55
+ --sublime-color-text-secondary-inverse: #e5e7eb;
56
+
57
+ /* Tertiary/muted text (captions, placeholders, helper text) */
58
+ --sublime-color-text-muted: #9ca3af;
59
+ --sublime-color-text-muted-inverse: #6b7280;
60
+
61
+ /* Disabled text (unavailable actions) */
62
+ --sublime-color-text-disabled: #d1d5db;
63
+ --sublime-color-text-disabled-inverse: #4b5563;
64
+
65
+ /* Accent text (links, highlights) */
66
+ --sublime-color-text-accent: #3b82f6;
67
+ --sublime-color-text-accent-hover: #2563eb;
68
+
69
+ /* ==========================================================================
70
+ COLOR TOKENS - BORDERS
71
+ Dividers, outlines, input borders
72
+ ========================================================================== */
73
+
74
+ --sublime-color-border-primary: #e5e7eb;
75
+ --sublime-color-border-primary-hover: #d1d5db;
76
+ --sublime-color-border-primary-active: #9ca3af;
77
+
78
+ --sublime-color-border-secondary: #f3f4f6;
79
+ --sublime-color-border-accent: #3b82f6;
80
+ --sublime-color-border-error: #ef4444;
81
+ --sublime-color-border-success: #22c55e;
82
+
83
+ /* ==========================================================================
84
+ COLOR TOKENS - INTERACTIVE
85
+ Buttons, links, controls
86
+ ========================================================================== */
87
+
88
+ /* Primary interactive (high emphasis) */
89
+ --sublime-color-interactive-primary: #111827;
90
+ --sublime-color-interactive-primary-hover: #374151;
91
+ --sublime-color-interactive-primary-active: #1f2937;
92
+ --sublime-color-interactive-primary-text: #ffffff;
93
+
94
+ /* Secondary interactive (medium emphasis) */
95
+ --sublime-color-interactive-secondary: #f3f4f6;
96
+ --sublime-color-interactive-secondary-hover: #e5e7eb;
97
+ --sublime-color-interactive-secondary-active: #d1d5db;
98
+ --sublime-color-interactive-secondary-text: #111827;
99
+
100
+ /* Tertiary/Ghost interactive (low emphasis) */
101
+ --sublime-color-interactive-ghost: transparent;
102
+ --sublime-color-interactive-ghost-hover: #f3f4f6;
103
+ --sublime-color-interactive-ghost-active: #e5e7eb;
104
+ --sublime-color-interactive-ghost-text: #4b5563;
105
+
106
+ /* Accent interactive (brand color) */
107
+ --sublime-color-interactive-accent: #3b82f6;
108
+ --sublime-color-interactive-accent-hover: #2563eb;
109
+ --sublime-color-interactive-accent-active: #1d4ed8;
110
+ --sublime-color-interactive-accent-text: #ffffff;
111
+
112
+ /* ==========================================================================
113
+ COLOR TOKENS - STATUS
114
+ Error, warning, success, info states
115
+ ========================================================================== */
116
+
117
+ /* Error (destructive actions, validation errors) */
118
+ --sublime-color-status-error: #ef4444;
119
+ --sublime-color-status-error-hover: #dc2626;
120
+ --sublime-color-status-error-bg: #fef2f2;
121
+
122
+ /* Warning (cautions, notices) */
123
+ --sublime-color-status-warning: #f59e0b;
124
+ --sublime-color-status-warning-hover: #d97706;
125
+ --sublime-color-status-warning-bg: #fffbeb;
126
+
127
+ /* Success (confirmations, completions) */
128
+ --sublime-color-status-success: #22c55e;
129
+ --sublime-color-status-success-hover: #16a34a;
130
+ --sublime-color-status-success-bg: #f0fdf4;
131
+
132
+ /* Info (tips, neutral alerts) */
133
+ --sublime-color-status-info: #3b82f6;
134
+ --sublime-color-status-info-hover: #2563eb;
135
+ --sublime-color-status-info-bg: #eff6ff;
136
+
137
+ /* ==========================================================================
138
+ COLOR TOKENS - FOCUS & SELECTION
139
+ Keyboard navigation, text selection
140
+ ========================================================================== */
141
+
142
+ --sublime-color-focus-ring: #3b82f6;
143
+ --sublime-color-focus-ring-offset: #ffffff;
144
+ --sublime-color-selection-bg: #dbeafe;
145
+ --sublime-color-selection-text: #1e40af;
146
+
147
+ /* ==========================================================================
148
+ COLOR TOKENS - OVERLAYS
149
+ Backdrops, scrims, loading states
150
+ ========================================================================== */
151
+
152
+ --sublime-color-overlay-light: rgb(255 255 255 / 0.8);
153
+ --sublime-color-overlay-dark: rgb(0 0 0 / 0.5);
154
+ --sublime-color-overlay-scrim: rgb(0 0 0 / 0.6);
155
+
156
+ /* ==========================================================================
157
+ SPACING TOKENS
158
+ Base-4 spacing scale
159
+ ========================================================================== */
160
+
161
+ --sublime-space-0: 0;
162
+ --sublime-space-1: 0.25rem; /* 4px */
163
+ --sublime-space-2: 0.5rem; /* 8px */
164
+ --sublime-space-3: 0.75rem; /* 12px */
165
+ --sublime-space-4: 1rem; /* 16px */
166
+ --sublime-space-5: 1.25rem; /* 20px */
167
+ --sublime-space-6: 1.5rem; /* 24px */
168
+ --sublime-space-8: 2rem; /* 32px */
169
+ --sublime-space-10: 2.5rem; /* 40px */
170
+ --sublime-space-12: 3rem; /* 48px */
171
+ --sublime-space-16: 4rem; /* 64px */
172
+ --sublime-space-20: 5rem; /* 80px */
173
+ --sublime-space-24: 6rem; /* 96px */
174
+
175
+ /* Component-specific spacing */
176
+ --sublime-space-button-x: var(--sublime-space-6);
177
+ --sublime-space-button-y: var(--sublime-space-3);
178
+ --sublime-space-input-x: var(--sublime-space-4);
179
+ --sublime-space-input-y: var(--sublime-space-3);
180
+ --sublime-space-card-padding: var(--sublime-space-6);
181
+
182
+ /* Sizing */
183
+ --sublime-size-icon-sm: 1rem; /* 16px */
184
+ --sublime-size-icon-md: 1.5rem; /* 24px */
185
+ --sublime-size-icon-lg: 2rem; /* 32px */
186
+
187
+ --sublime-size-button-height-sm: 2rem; /* 32px */
188
+ --sublime-size-button-height-md: 2.5rem; /* 40px */
189
+ --sublime-size-button-height-lg: 3rem; /* 48px */
190
+
191
+ --sublime-size-touch-target: 2.75rem; /* 44px - WCAG minimum */
192
+
193
+ /* ==========================================================================
194
+ SHADOW TOKENS (ELEVATION)
195
+ Depth and elevation system
196
+ ========================================================================== */
197
+
198
+ --sublime-shadow-none: 0 0 #0000;
199
+
200
+ --sublime-shadow-xs:
201
+ 0 1px 2px 0 rgb(0 0 0 / 0.05);
202
+
203
+ --sublime-shadow-sm:
204
+ 0 1px 3px 0 rgb(0 0 0 / 0.1),
205
+ 0 1px 2px -1px rgb(0 0 0 / 0.1);
206
+
207
+ --sublime-shadow-md:
208
+ 0 4px 6px -1px rgb(0 0 0 / 0.1),
209
+ 0 2px 4px -2px rgb(0 0 0 / 0.1);
210
+
211
+ --sublime-shadow-lg:
212
+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
213
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
214
+
215
+ --sublime-shadow-xl:
216
+ 0 20px 25px -5px rgb(0 0 0 / 0.1),
217
+ 0 8px 10px -6px rgb(0 0 0 / 0.1);
218
+
219
+ /* Interactive element shadows */
220
+ --sublime-shadow-button: var(--sublime-shadow-sm);
221
+ --sublime-shadow-button-hover: var(--sublime-shadow-md);
222
+ --sublime-shadow-button-active: var(--sublime-shadow-xs);
223
+
224
+ --sublime-shadow-card: var(--sublime-shadow-sm);
225
+ --sublime-shadow-card-hover: var(--sublime-shadow-md);
226
+
227
+ /* Focus ring shadow */
228
+ --sublime-shadow-focus-ring:
229
+ 0 0 0 2px var(--sublime-color-surface-0),
230
+ 0 0 0 4px var(--sublime-color-focus-ring);
231
+
232
+ /* ==========================================================================
233
+ RADIUS TOKENS
234
+ Border radius scale
235
+ ========================================================================== */
236
+
237
+ --sublime-radius-none: 0;
238
+ --sublime-radius-sm: 0.25rem; /* 4px */
239
+ --sublime-radius-md: 0.375rem; /* 6px */
240
+ --sublime-radius-lg: 0.5rem; /* 8px */
241
+ --sublime-radius-xl: 0.75rem; /* 12px */
242
+ --sublime-radius-2xl: 1rem; /* 16px */
243
+ --sublime-radius-full: 9999px;
244
+
245
+ /* Component-specific radius */
246
+ --sublime-radius-button: var(--sublime-radius-lg);
247
+ --sublime-radius-input: var(--sublime-radius-md);
248
+ --sublime-radius-card: var(--sublime-radius-xl);
249
+
250
+ /* ==========================================================================
251
+ TYPOGRAPHY TOKENS
252
+ Font families, sizes, weights
253
+ ========================================================================== */
254
+
255
+ --sublime-font-family-sans:
256
+ system-ui, -apple-system, BlinkMacSystemFont,
257
+ "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
258
+
259
+ --sublime-font-family-mono:
260
+ ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
261
+
262
+ /* Font sizes */
263
+ --sublime-font-size-xs: 0.75rem; /* 12px */
264
+ --sublime-font-size-sm: 0.875rem; /* 14px */
265
+ --sublime-font-size-md: 1rem; /* 16px */
266
+ --sublime-font-size-lg: 1.125rem; /* 18px */
267
+ --sublime-font-size-xl: 1.25rem; /* 20px */
268
+
269
+ /* Font weights */
270
+ --sublime-font-weight-normal: 400;
271
+ --sublime-font-weight-medium: 500;
272
+ --sublime-font-weight-semibold: 600;
273
+ --sublime-font-weight-bold: 700;
274
+
275
+ /* Line heights */
276
+ --sublime-line-height-tight: 1.25;
277
+ --sublime-line-height-normal: 1.5;
278
+ --sublime-line-height-relaxed: 1.75;
279
+
280
+ /* ==========================================================================
281
+ ANIMATION TOKENS
282
+ Durations, easings, transitions
283
+ ========================================================================== */
284
+
285
+ /* Durations */
286
+ --sublime-duration-instant: 0ms;
287
+ --sublime-duration-fast: 100ms;
288
+ --sublime-duration-normal: 150ms;
289
+ --sublime-duration-slow: 200ms;
290
+ --sublime-duration-slower: 300ms;
291
+
292
+ /* Easings */
293
+ --sublime-ease-linear: linear;
294
+ --sublime-ease-in: cubic-bezier(0.4, 0, 1, 1);
295
+ --sublime-ease-out: cubic-bezier(0, 0, 0.2, 1);
296
+ --sublime-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
297
+ --sublime-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
298
+
299
+ /* Component transitions */
300
+ --sublime-transition-button:
301
+ all var(--sublime-duration-fast) var(--sublime-ease-out);
302
+
303
+ --sublime-transition-color:
304
+ color var(--sublime-duration-fast) var(--sublime-ease-out),
305
+ background-color var(--sublime-duration-fast) var(--sublime-ease-out),
306
+ border-color var(--sublime-duration-fast) var(--sublime-ease-out);
307
+
308
+ --sublime-transition-transform:
309
+ transform var(--sublime-duration-fast) var(--sublime-ease-spring);
310
+
311
+ --sublime-transition-shadow:
312
+ box-shadow var(--sublime-duration-fast) var(--sublime-ease-out);
313
+ }
314
+
315
+ /* ============================================================================
316
+ DARK MODE
317
+ Activated by .dark class, data-theme="dark", or prefers-color-scheme
318
+ ============================================================================ */
319
+
320
+ .dark,
321
+ [data-theme="dark"] {
322
+ /* Surfaces - inverted hierarchy for dark mode */
323
+ --sublime-color-surface-0: #0f0f0f;
324
+ --sublime-color-surface-0-hover: #1a1a1a;
325
+ --sublime-color-surface-0-active: #262626;
326
+
327
+ --sublime-color-surface-1: #171717;
328
+ --sublime-color-surface-1-hover: #262626;
329
+ --sublime-color-surface-1-active: #404040;
330
+
331
+ --sublime-color-surface-2: #262626;
332
+ --sublime-color-surface-2-hover: #404040;
333
+ --sublime-color-surface-2-active: #525252;
334
+
335
+ --sublime-color-surface-inset: #0a0a0a;
336
+ --sublime-color-surface-inset-hover: #171717;
337
+ --sublime-color-surface-inset-active: #262626;
338
+
339
+ /* Text colors - inverted for dark backgrounds */
340
+ --sublime-color-text-primary: #fafafa;
341
+ --sublime-color-text-primary-inverse: #0f0f0f;
342
+
343
+ --sublime-color-text-secondary: #a3a3a3;
344
+ --sublime-color-text-secondary-inverse: #404040;
345
+
346
+ --sublime-color-text-muted: #737373;
347
+ --sublime-color-text-muted-inverse: #525252;
348
+
349
+ --sublime-color-text-disabled: #525252;
350
+ --sublime-color-text-disabled-inverse: #a3a3a3;
351
+
352
+ /* Borders - lighter in dark mode for visibility */
353
+ --sublime-color-border-primary: #404040;
354
+ --sublime-color-border-primary-hover: #525252;
355
+ --sublime-color-border-primary-active: #737373;
356
+
357
+ --sublime-color-border-secondary: #262626;
358
+
359
+ /* Interactive elements */
360
+ --sublime-color-interactive-primary: #fafafa;
361
+ --sublime-color-interactive-primary-hover: #e5e5e5;
362
+ --sublime-color-interactive-primary-active: #d4d4d4;
363
+ --sublime-color-interactive-primary-text: #0f0f0f;
364
+
365
+ --sublime-color-interactive-secondary: #262626;
366
+ --sublime-color-interactive-secondary-hover: #404040;
367
+ --sublime-color-interactive-secondary-active: #525252;
368
+ --sublime-color-interactive-secondary-text: #fafafa;
369
+
370
+ --sublime-color-interactive-ghost-hover: #262626;
371
+ --sublime-color-interactive-ghost-active: #404040;
372
+ --sublime-color-interactive-ghost-text: #a3a3a3;
373
+
374
+ /* Focus ring offset adapts to dark background */
375
+ --sublime-color-focus-ring-offset: #0f0f0f;
376
+
377
+ /* Selection colors adjusted for dark */
378
+ --sublime-color-selection-bg: #1e3a8a;
379
+ --sublime-color-selection-text: #dbeafe;
380
+
381
+ /* Status backgrounds adjusted for dark */
382
+ --sublime-color-status-error-bg: #450a0a;
383
+ --sublime-color-status-warning-bg: #451a03;
384
+ --sublime-color-status-success-bg: #052e16;
385
+ --sublime-color-status-info-bg: #172554;
386
+ }
387
+
388
+ /* System preference fallback */
389
+ @media (prefers-color-scheme: dark) {
390
+ :root:not([data-theme="light"]):not(.light) {
391
+ /* Duplicate all dark mode values here */
392
+ --sublime-color-surface-0: #0f0f0f;
393
+ --sublime-color-surface-0-hover: #1a1a1a;
394
+ --sublime-color-surface-0-active: #262626;
395
+
396
+ --sublime-color-surface-1: #171717;
397
+ --sublime-color-surface-1-hover: #262626;
398
+ --sublime-color-surface-1-active: #404040;
399
+
400
+ --sublime-color-surface-2: #262626;
401
+ --sublime-color-surface-2-hover: #404040;
402
+ --sublime-color-surface-2-active: #525252;
403
+
404
+ --sublime-color-surface-inset: #0a0a0a;
405
+ --sublime-color-surface-inset-hover: #171717;
406
+ --sublime-color-surface-inset-active: #262626;
407
+
408
+ --sublime-color-text-primary: #fafafa;
409
+ --sublime-color-text-primary-inverse: #0f0f0f;
410
+
411
+ --sublime-color-text-secondary: #a3a3a3;
412
+ --sublime-color-text-secondary-inverse: #404040;
413
+
414
+ --sublime-color-text-muted: #737373;
415
+ --sublime-color-text-muted-inverse: #525252;
416
+
417
+ --sublime-color-text-disabled: #525252;
418
+ --sublime-color-text-disabled-inverse: #a3a3a3;
419
+
420
+ --sublime-color-border-primary: #404040;
421
+ --sublime-color-border-primary-hover: #525252;
422
+ --sublime-color-border-primary-active: #737373;
423
+
424
+ --sublime-color-border-secondary: #262626;
425
+
426
+ --sublime-color-interactive-primary: #fafafa;
427
+ --sublime-color-interactive-primary-hover: #e5e5e5;
428
+ --sublime-color-interactive-primary-active: #d4d4d4;
429
+ --sublime-color-interactive-primary-text: #0f0f0f;
430
+
431
+ --sublime-color-interactive-secondary: #262626;
432
+ --sublime-color-interactive-secondary-hover: #404040;
433
+ --sublime-color-interactive-secondary-active: #525252;
434
+ --sublime-color-interactive-secondary-text: #fafafa;
435
+
436
+ --sublime-color-interactive-ghost-hover: #262626;
437
+ --sublime-color-interactive-ghost-active: #404040;
438
+ --sublime-color-interactive-ghost-text: #a3a3a3;
439
+
440
+ --sublime-color-focus-ring-offset: #0f0f0f;
441
+ --sublime-color-selection-bg: #1e3a8a;
442
+ --sublime-color-selection-text: #dbeafe;
443
+
444
+ --sublime-color-status-error-bg: #450a0a;
445
+ --sublime-color-status-warning-bg: #451a03;
446
+ --sublime-color-status-success-bg: #052e16;
447
+ --sublime-color-status-info-bg: #172554;
448
+ }
449
+ }