@terpjs/contract 0.6.1 → 0.8.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 (16) hide show
  1. package/package.json +3 -2
  2. package/scripts/build-tokens.mjs +160 -25
  3. package/src/css-rules.js +107 -0
  4. package/src/css-rules.test.js +110 -0
  5. package/src/tokens.contrast.test.js +395 -0
  6. package/src/tokens.css +293 -14
  7. package/src/tokens.manifest.json +1416 -0
  8. package/src/tokens.manifest.test.js +166 -0
  9. package/src/tokens.themes.test.js +177 -0
  10. package/themes.json +43 -0
  11. package/token-pairs.json +252 -0
  12. package/tokens.contrast.json +70 -0
  13. package/tokens.dark.json +40 -4
  14. package/tokens.json +115 -7
  15. package/tokens.midnight.json +70 -0
  16. package/tokens.twilight.json +70 -0
package/src/tokens.css CHANGED
@@ -5,7 +5,7 @@
5
5
  :root {
6
6
  /* Opts native chrome (scrollbars, the <select> option popup, form controls,
7
7
  text-field carets) into the light palette so it never renders as foreign
8
- OS-light chrome. The dark blocks below flip it to dark. */
8
+ OS-dark chrome. Each theme block below sets its own. */
9
9
  color-scheme: light;
10
10
  --color-brand-primary: #2563eb;
11
11
  --color-brand-primary-contrast: #ffffff;
@@ -22,15 +22,39 @@
22
22
  --color-neutral-700: #334155;
23
23
  --color-neutral-800: #1e293b;
24
24
  --color-neutral-900: #0f172a;
25
- --color-status-success: #16a34a;
25
+ --color-status-success: #15803d;
26
26
  --color-status-success-soft: #f0fdf4;
27
- --color-status-warning: #d97706;
27
+ --color-status-warning: #b45309;
28
28
  --color-status-warning-soft: #fffbeb;
29
- --color-status-danger: #dc2626;
29
+ --color-status-danger: #b91c1c;
30
30
  --color-status-danger-soft: #fef2f2;
31
- --color-status-info: #0284c7;
31
+ --color-status-info: #0369a1;
32
32
  --color-status-info-soft: #f0f9ff;
33
33
  --color-focus-ring: rgba(37,99,235,0.35);
34
+ --color-bg-canvas: #f8fafc;
35
+ --color-bg-surface: #ffffff;
36
+ --color-bg-raised: #ffffff;
37
+ --color-bg-inset: #f1f5f9;
38
+ --color-fg-default: #0f172a;
39
+ --color-fg-muted: #475569;
40
+ --color-fg-subtle: #64748b;
41
+ --color-fg-accent: #1d4ed8;
42
+ --color-border-default: #e2e8f0;
43
+ --color-border-strong: #cbd5e1;
44
+ --color-border-subtle: #f1f5f9;
45
+ --color-interactive-hover: #f1f5f9;
46
+ --color-interactive-active: #e2e8f0;
47
+ --color-interactive-selected: #eff6ff;
48
+ --color-sidebar-bg: #f8fafc;
49
+ --color-sidebar-fg: #0f172a;
50
+ --color-sidebar-muted: #475569;
51
+ --color-sidebar-accent: #f1f5f9;
52
+ --color-sidebar-border: #e2e8f0;
53
+ --color-chart-1: #2563eb;
54
+ --color-chart-2: #0d9488;
55
+ --color-chart-3: #d97706;
56
+ --color-chart-4: #7c3aed;
57
+ --color-chart-5: #db2777;
34
58
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
35
59
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.10);
36
60
  --shadow-lg: 0 12px 32px rgb(15 23 42 / 0.18);
@@ -39,12 +63,46 @@
39
63
  --space-2: 0.5rem;
40
64
  --space-3: 0.75rem;
41
65
  --space-4: 1rem;
66
+ --space-5: 1.25rem;
42
67
  --space-6: 1.5rem;
68
+ --space-7: 1.75rem;
43
69
  --space-8: 2rem;
70
+ --space-10: 2.5rem;
71
+ --space-12: 3rem;
72
+ --space-16: 4rem;
73
+ --space-20: 5rem;
74
+ --density-control-min-height: 2.25rem;
75
+ --density-cell-pad-y: 0.75rem;
76
+ --density-cell-pad-x: 0.75rem;
77
+ --density-compact-control-min-height: 2rem;
78
+ --density-compact-cell-pad-y: 0.5rem;
79
+ --density-compact-cell-pad-x: 0.5rem;
44
80
  --radius-sm: 0.25rem;
45
81
  --radius-md: 0.5rem;
46
82
  --radius-lg: 0.75rem;
83
+ --radius-xl: 1rem;
47
84
  --radius-full: 9999px;
85
+ --border-width-thin: 1px;
86
+ --border-width-base: 2px;
87
+ --border-width-thick: 3px;
88
+ --z-index-base: 0;
89
+ --z-index-sticky: 30;
90
+ --z-index-backdrop: 40;
91
+ --z-index-drawer: 50;
92
+ --z-index-popover: 60;
93
+ --z-index-tooltip: 70;
94
+ --z-index-toast: 100;
95
+ --breakpoint-sm: 480px;
96
+ --breakpoint-md: 768px;
97
+ --breakpoint-lg: 1024px;
98
+ --breakpoint-xl: 1280px;
99
+ --motion-duration-instant: 100ms;
100
+ --motion-duration-fast: 150ms;
101
+ --motion-duration-base: 250ms;
102
+ --motion-duration-slow: 400ms;
103
+ --motion-easing-standard: ease;
104
+ --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1);
105
+ --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
48
106
  --font-family-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
49
107
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
50
108
  --font-size-xs: 0.75rem;
@@ -52,19 +110,30 @@
52
110
  --font-size-base: 1rem;
53
111
  --font-size-lg: 1.125rem;
54
112
  --font-size-xl: 1.5rem;
113
+ --font-size-2xl: 1.875rem;
114
+ --font-size-3xl: 2.25rem;
115
+ --font-size-display: 3rem;
55
116
  --font-weight-normal: 400;
56
117
  --font-weight-medium: 500;
57
118
  --font-weight-semibold: 600;
58
119
  --font-weight-bold: 700;
120
+ --font-line-height-tight: 1.2;
121
+ --font-line-height-snug: 1.35;
122
+ --font-line-height-base: 1.5;
123
+ --font-line-height-relaxed: 1.7;
124
+ --font-letter-spacing-tight: -0.02em;
125
+ --font-letter-spacing-base: 0;
126
+ --font-letter-spacing-wide: 0.08em;
59
127
  }
60
128
 
61
- /* Dark theme: an explicit user/app choice via <html data-theme="dark">. */
129
+ /* Dark: an explicit choice via <html data-theme="dark">.
130
+ The slate-neutral dark counterpart to light, and the theme the OS dark preference selects. */
62
131
  [data-theme='dark'] {
63
132
  color-scheme: dark;
64
- --color-brand-primary: #3b82f6;
133
+ --color-brand-primary: #1d4ed8;
65
134
  --color-brand-primary-contrast: #ffffff;
66
- --color-brand-primary-hover: #60a5fa;
67
- --color-brand-primary-soft: #1e3a5f;
135
+ --color-brand-primary-hover: #2563eb;
136
+ --color-brand-primary-soft: #15304e;
68
137
  --color-neutral-0: #1e293b;
69
138
  --color-neutral-50: #0f172a;
70
139
  --color-neutral-100: #263449;
@@ -85,16 +154,202 @@
85
154
  --color-status-info: #38bdf8;
86
155
  --color-status-info-soft: #12303f;
87
156
  --color-focus-ring: rgba(96,165,250,0.45);
157
+ --color-bg-canvas: #0f172a;
158
+ --color-bg-surface: #1e293b;
159
+ --color-bg-raised: #263449;
160
+ --color-bg-inset: #0f172a;
161
+ --color-fg-default: #f1f5f9;
162
+ --color-fg-muted: #b4c0d0;
163
+ --color-fg-subtle: #94a3b8;
164
+ --color-fg-accent: #60a5fa;
165
+ --color-border-default: #334155;
166
+ --color-border-strong: #475569;
167
+ --color-border-subtle: #263449;
168
+ --color-interactive-hover: #263449;
169
+ --color-interactive-active: #334155;
170
+ --color-interactive-selected: #15304e;
171
+ --color-sidebar-bg: #1e293b;
172
+ --color-sidebar-fg: #f1f5f9;
173
+ --color-sidebar-muted: #b4c0d0;
174
+ --color-sidebar-accent: #334155;
175
+ --color-sidebar-border: #334155;
176
+ --color-chart-1: #60a5fa;
177
+ --color-chart-2: #2dd4bf;
178
+ --color-chart-3: #fbbf24;
179
+ --color-chart-4: #a78bfa;
180
+ --color-chart-5: #f472b6;
88
181
  }
89
182
 
90
- /* Dark theme: the OS preference, unless the app pinned light explicitly. */
183
+ /* Midnight: an explicit choice via <html data-theme="midnight">.
184
+ A near-black dark for low light and OLED displays: cooler neutrals, a deeper canvas than dark, and a deeper accent that holds a white label at AA. */
185
+ [data-theme='midnight'] {
186
+ color-scheme: dark;
187
+ --color-brand-primary: #0b4ea8;
188
+ --color-brand-primary-contrast: #ffffff;
189
+ --color-brand-primary-hover: #1158c7;
190
+ --color-brand-primary-soft: #0c2d6b;
191
+ --color-neutral-0: #0d1117;
192
+ --color-neutral-50: #010409;
193
+ --color-neutral-100: #161b22;
194
+ --color-neutral-200: #21262d;
195
+ --color-neutral-300: #30363d;
196
+ --color-neutral-400: #484f58;
197
+ --color-neutral-500: #7d8590;
198
+ --color-neutral-600: #9aa4b2;
199
+ --color-neutral-700: #c9d1d9;
200
+ --color-neutral-800: #e6edf3;
201
+ --color-neutral-900: #f0f6fc;
202
+ --color-status-success: #3fb950;
203
+ --color-status-success-soft: #0c2417;
204
+ --color-status-warning: #d29922;
205
+ --color-status-warning-soft: #271a06;
206
+ --color-status-danger: #f85149;
207
+ --color-status-danger-soft: #2b0d0d;
208
+ --color-status-info: #58a6ff;
209
+ --color-status-info-soft: #0b2545;
210
+ --color-focus-ring: rgba(88,166,255,0.5);
211
+ --color-bg-canvas: #010409;
212
+ --color-bg-surface: #0d1117;
213
+ --color-bg-raised: #161b22;
214
+ --color-bg-inset: #010409;
215
+ --color-fg-default: #f0f6fc;
216
+ --color-fg-muted: #9aa4b2;
217
+ --color-fg-subtle: #8b949e;
218
+ --color-fg-accent: #58a6ff;
219
+ --color-border-default: #30363d;
220
+ --color-border-strong: #484f58;
221
+ --color-border-subtle: #21262d;
222
+ --color-interactive-hover: #161b22;
223
+ --color-interactive-active: #21262d;
224
+ --color-interactive-selected: #0c2d6b;
225
+ --color-sidebar-bg: #0d1117;
226
+ --color-sidebar-fg: #f0f6fc;
227
+ --color-sidebar-muted: #9aa4b2;
228
+ --color-sidebar-accent: #21262d;
229
+ --color-sidebar-border: #21262d;
230
+ --color-chart-1: #58a6ff;
231
+ --color-chart-2: #3fb950;
232
+ --color-chart-3: #d29922;
233
+ --color-chart-4: #bc8cff;
234
+ --color-chart-5: #f778ba;
235
+ }
236
+
237
+ /* Twilight: an explicit choice via <html data-theme="twilight">.
238
+ A warm violet-tinted dark. Its neutrals sit in a different hue family from dark and midnight, which is what proves a theme is a palette rather than a lightness setting. */
239
+ [data-theme='twilight'] {
240
+ color-scheme: dark;
241
+ --color-brand-primary: #5b21b6;
242
+ --color-brand-primary-contrast: #ffffff;
243
+ --color-brand-primary-hover: #6d28d9;
244
+ --color-brand-primary-soft: #2b2350;
245
+ --color-neutral-0: #241f31;
246
+ --color-neutral-50: #1a1622;
247
+ --color-neutral-100: #2d2740;
248
+ --color-neutral-200: #3a3350;
249
+ --color-neutral-300: #4d4468;
250
+ --color-neutral-400: #6b5f8a;
251
+ --color-neutral-500: #9d90b8;
252
+ --color-neutral-600: #b9aecd;
253
+ --color-neutral-700: #d8d0e6;
254
+ --color-neutral-800: #ece7f3;
255
+ --color-neutral-900: #f6f3fa;
256
+ --color-status-success: #5ed49a;
257
+ --color-status-success-soft: #14322a;
258
+ --color-status-warning: #e8b04b;
259
+ --color-status-warning-soft: #332612;
260
+ --color-status-danger: #f58a92;
261
+ --color-status-danger-soft: #3a1a25;
262
+ --color-status-info: #7cb8f0;
263
+ --color-status-info-soft: #1a2c44;
264
+ --color-focus-ring: rgba(167,139,250,0.5);
265
+ --color-bg-canvas: #1a1622;
266
+ --color-bg-surface: #241f31;
267
+ --color-bg-raised: #2d2740;
268
+ --color-bg-inset: #1a1622;
269
+ --color-fg-default: #f6f3fa;
270
+ --color-fg-muted: #b9aecd;
271
+ --color-fg-subtle: #a294bd;
272
+ --color-fg-accent: #a78bfa;
273
+ --color-border-default: #3a3350;
274
+ --color-border-strong: #4d4468;
275
+ --color-border-subtle: #2d2740;
276
+ --color-interactive-hover: #2d2740;
277
+ --color-interactive-active: #3a3350;
278
+ --color-interactive-selected: #2b2350;
279
+ --color-sidebar-bg: #241f31;
280
+ --color-sidebar-fg: #f6f3fa;
281
+ --color-sidebar-muted: #b9aecd;
282
+ --color-sidebar-accent: #3a3350;
283
+ --color-sidebar-border: #3a3350;
284
+ --color-chart-1: #a78bfa;
285
+ --color-chart-2: #5ed49a;
286
+ --color-chart-3: #e8b04b;
287
+ --color-chart-4: #7cb8f0;
288
+ --color-chart-5: #f58ac8;
289
+ }
290
+
291
+ /* High contrast: an explicit choice via <html data-theme="contrast">.
292
+ A high-contrast light theme: white surfaces, near-black text, darkened accents and visible borders. Every declared text pairing reaches AAA, not just AA. Not wired to `prefers-contrast: more` — that needs a dark high-contrast counterpart first, or a user who asked for both more contrast and dark would be handed a light theme. */
293
+ [data-theme='contrast'] {
294
+ color-scheme: light;
295
+ --color-brand-primary: #0842a0;
296
+ --color-brand-primary-contrast: #ffffff;
297
+ --color-brand-primary-hover: #05275a;
298
+ --color-brand-primary-soft: #e8f0fe;
299
+ --color-neutral-0: #ffffff;
300
+ --color-neutral-50: #ffffff;
301
+ --color-neutral-100: #f2f2f2;
302
+ --color-neutral-200: #595959;
303
+ --color-neutral-300: #404040;
304
+ --color-neutral-400: #303030;
305
+ --color-neutral-500: #1f1f1f;
306
+ --color-neutral-600: #141414;
307
+ --color-neutral-700: #0a0a0a;
308
+ --color-neutral-800: #000000;
309
+ --color-neutral-900: #000000;
310
+ --color-status-success: #0a5c2b;
311
+ --color-status-success-soft: #e6f4ea;
312
+ --color-status-warning: #6b3800;
313
+ --color-status-warning-soft: #fdf1e0;
314
+ --color-status-danger: #96000c;
315
+ --color-status-danger-soft: #fce8e8;
316
+ --color-status-info: #0b4a8f;
317
+ --color-status-info-soft: #e5f0fb;
318
+ --color-focus-ring: rgba(8,66,160,0.7);
319
+ --color-bg-canvas: #ffffff;
320
+ --color-bg-surface: #ffffff;
321
+ --color-bg-raised: #ffffff;
322
+ --color-bg-inset: #f2f2f2;
323
+ --color-fg-default: #000000;
324
+ --color-fg-muted: #141414;
325
+ --color-fg-subtle: #1f1f1f;
326
+ --color-fg-accent: #0842a0;
327
+ --color-border-default: #595959;
328
+ --color-border-strong: #000000;
329
+ --color-border-subtle: #767676;
330
+ --color-interactive-hover: #f2f2f2;
331
+ --color-interactive-active: #e0e0e0;
332
+ --color-interactive-selected: #e8f0fe;
333
+ --color-sidebar-bg: #ffffff;
334
+ --color-sidebar-fg: #000000;
335
+ --color-sidebar-muted: #141414;
336
+ --color-sidebar-accent: #e8f0fe;
337
+ --color-sidebar-border: #595959;
338
+ --color-chart-1: #0842a0;
339
+ --color-chart-2: #00564a;
340
+ --color-chart-3: #6b3800;
341
+ --color-chart-4: #4b1f79;
342
+ --color-chart-5: #8c0a4d;
343
+ }
344
+
345
+ /* Dark: the OS preference, unless the app pinned any theme explicitly. */
91
346
  @media (prefers-color-scheme: dark) {
92
- :root:not([data-theme='light']) {
347
+ :root:not([data-theme]) {
93
348
  color-scheme: dark;
94
- --color-brand-primary: #3b82f6;
349
+ --color-brand-primary: #1d4ed8;
95
350
  --color-brand-primary-contrast: #ffffff;
96
- --color-brand-primary-hover: #60a5fa;
97
- --color-brand-primary-soft: #1e3a5f;
351
+ --color-brand-primary-hover: #2563eb;
352
+ --color-brand-primary-soft: #15304e;
98
353
  --color-neutral-0: #1e293b;
99
354
  --color-neutral-50: #0f172a;
100
355
  --color-neutral-100: #263449;
@@ -115,5 +370,29 @@
115
370
  --color-status-info: #38bdf8;
116
371
  --color-status-info-soft: #12303f;
117
372
  --color-focus-ring: rgba(96,165,250,0.45);
373
+ --color-bg-canvas: #0f172a;
374
+ --color-bg-surface: #1e293b;
375
+ --color-bg-raised: #263449;
376
+ --color-bg-inset: #0f172a;
377
+ --color-fg-default: #f1f5f9;
378
+ --color-fg-muted: #b4c0d0;
379
+ --color-fg-subtle: #94a3b8;
380
+ --color-fg-accent: #60a5fa;
381
+ --color-border-default: #334155;
382
+ --color-border-strong: #475569;
383
+ --color-border-subtle: #263449;
384
+ --color-interactive-hover: #263449;
385
+ --color-interactive-active: #334155;
386
+ --color-interactive-selected: #15304e;
387
+ --color-sidebar-bg: #1e293b;
388
+ --color-sidebar-fg: #f1f5f9;
389
+ --color-sidebar-muted: #b4c0d0;
390
+ --color-sidebar-accent: #334155;
391
+ --color-sidebar-border: #334155;
392
+ --color-chart-1: #60a5fa;
393
+ --color-chart-2: #2dd4bf;
394
+ --color-chart-3: #fbbf24;
395
+ --color-chart-4: #a78bfa;
396
+ --color-chart-5: #f472b6;
118
397
  }
119
398
  }