@rowkit/tokens 0.1.1 → 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.
Files changed (11) hide show
  1. package/README.md +5 -3
  2. package/dist/blur.d.ts +18 -0
  3. package/dist/color.d.ts +252 -33
  4. package/dist/index.d.ts +116 -23
  5. package/dist/index.js +267 -184
  6. package/dist/index.js.map +1 -1
  7. package/dist/radius.d.ts +61 -15
  8. package/dist/reference.html +231 -187
  9. package/dist/shadow.d.ts +12 -1
  10. package/dist/tokens.css +128 -81
  11. package/package.json +1 -1
package/dist/reference.html CHANGED
@@ -8,6 +8,44 @@
8
8
  :root {
9
9
  --color-white: oklch(1 0 0);
10
10
  --color-black: oklch(0 0 0);
11
+ --color-gray-145: oklch(0.145 0 0);
12
+ --color-gray-205: oklch(0.205 0 0);
13
+ --color-gray-269: oklch(0.269 0 0);
14
+ --color-gray-371: oklch(0.371 0 0);
15
+ --color-gray-535: oklch(0.535 0 0);
16
+ --color-gray-556: oklch(0.556 0 0);
17
+ --color-gray-635: oklch(0.635 0 0);
18
+ --color-gray-642: oklch(0.642 0.012 264);
19
+ --color-gray-708: oklch(0.708 0 0);
20
+ --color-gray-870: oklch(0.87 0 0);
21
+ --color-gray-905: oklch(0.905 0.006 264);
22
+ --color-gray-922: oklch(0.922 0 0);
23
+ --color-gray-940: oklch(0.940 0.004 264);
24
+ --color-gray-970: oklch(0.97 0 0);
25
+ --color-gray-972: oklch(0.972 0.003 264);
26
+ --color-gray-985: oklch(0.985 0 0);
27
+ --color-gray-988: oklch(0.988 0.002 264);
28
+ --color-red-520: oklch(0.52 0.212 27.325);
29
+ --color-red-577: oklch(0.577 0.235 27.325);
30
+ --color-green-260: oklch(0.26 0.068 152);
31
+ --color-green-350: oklch(0.35 0.092 152);
32
+ --color-green-400: oklch(0.4 0.105 152);
33
+ --color-green-520: oklch(0.52 0.136 152);
34
+ --color-green-550: oklch(0.55 0.144 152);
35
+ --color-green-850: oklch(0.85 0.12 152);
36
+ --color-green-880: oklch(0.88 0.05 152);
37
+ --color-green-950: oklch(0.95 0.05 152);
38
+ --color-amber-260: oklch(0.26 0.055 75);
39
+ --color-amber-350: oklch(0.35 0.074 75);
40
+ --color-amber-400: oklch(0.4 0.084 75);
41
+ --color-amber-520: oklch(0.52 0.109 75);
42
+ --color-amber-550: oklch(0.55 0.116 75);
43
+ --color-amber-850: oklch(0.85 0.12 75);
44
+ --color-amber-880: oklch(0.88 0.05 75);
45
+ --color-amber-950: oklch(0.95 0.04 75);
46
+ --color-white-alpha-8: oklch(1 0 0 / 8%);
47
+ --color-white-alpha-10: oklch(1 0 0 / 10%);
48
+ --color-white-alpha-15: oklch(1 0 0 / 15%);
11
49
  --color-neutral-50: oklch(0.984 0.003 264);
12
50
  --color-neutral-100: oklch(0.968 0.004 264);
13
51
  --color-neutral-200: oklch(0.928 0.006 264);
@@ -63,50 +101,50 @@
63
101
  --color-danger-800: oklch(0.442 0.165 25);
64
102
  --color-danger-900: oklch(0.396 0.135 25);
65
103
  --color-danger-950: oklch(0.282 0.086 25);
66
- --color-background: var(--color-neutral-50);
67
- --color-surface: var(--color-white);
68
- --color-surface-subtle: var(--color-neutral-100);
69
- --color-surface-hover: var(--color-neutral-100);
70
- --color-surface-active: var(--color-neutral-200);
104
+ --color-background: var(--color-gray-988);
105
+ --color-card: var(--color-white);
106
+ --color-muted: var(--color-gray-972);
107
+ --color-accent: var(--color-gray-972);
108
+ --color-surface-active: var(--color-gray-940);
71
109
  --color-surface-selected: var(--color-primary-50);
72
- --color-surface-disabled: var(--color-neutral-100);
73
- --color-skeleton: var(--color-neutral-200);
74
- --color-text: var(--color-neutral-900);
75
- --color-text-muted: var(--color-neutral-600);
76
- --color-text-subtle: var(--color-neutral-400);
77
- --color-text-disabled: var(--color-neutral-400);
78
- --color-border: var(--color-neutral-200);
79
- --color-border-strong: var(--color-neutral-300);
80
- --color-border-subtle: var(--color-neutral-100);
81
- --color-border-control: var(--color-neutral-500);
82
- --color-focus-ring: var(--color-primary-600);
83
- --color-shadow: var(--color-neutral-950);
84
- --color-neutral-solid: var(--color-neutral-700);
85
- --color-neutral-solid-hover: var(--color-neutral-800);
86
- --color-neutral-on-solid: var(--color-white);
87
- --color-neutral-subtle: var(--color-neutral-100);
88
- --color-neutral-on-subtle: var(--color-neutral-700);
89
- --color-neutral-border: var(--color-neutral-200);
110
+ --color-surface-disabled: var(--color-gray-972);
111
+ --color-skeleton: var(--color-gray-972);
112
+ --color-foreground: var(--color-gray-145);
113
+ --color-muted-foreground: var(--color-gray-535);
114
+ --color-text-subtle: var(--color-gray-635);
115
+ --color-text-disabled: var(--color-gray-708);
116
+ --color-border: var(--color-gray-940);
117
+ --color-border-strong: var(--color-gray-905);
118
+ --color-border-subtle: var(--color-gray-972);
119
+ --color-input: var(--color-gray-642);
120
+ --color-ring: var(--color-primary-600);
121
+ --color-shadow: var(--color-black);
122
+ --color-neutral-solid: var(--color-gray-972);
123
+ --color-neutral-solid-hover: var(--color-gray-940);
124
+ --color-neutral-on-solid: var(--color-gray-205);
125
+ --color-neutral-subtle: var(--color-gray-972);
126
+ --color-neutral-on-subtle: var(--color-gray-205);
127
+ --color-neutral-border: var(--color-gray-940);
90
128
  --color-primary-solid: var(--color-primary-600);
91
129
  --color-primary-solid-hover: var(--color-primary-700);
92
130
  --color-primary-on-solid: var(--color-white);
93
131
  --color-primary-subtle: var(--color-primary-50);
94
132
  --color-primary-on-subtle: var(--color-primary-700);
95
133
  --color-primary-border: var(--color-primary-200);
96
- --color-success-solid: var(--color-success-600);
97
- --color-success-solid-hover: var(--color-success-700);
134
+ --color-success-solid: var(--color-green-550);
135
+ --color-success-solid-hover: var(--color-green-520);
98
136
  --color-success-on-solid: var(--color-white);
99
- --color-success-subtle: var(--color-success-50);
100
- --color-success-on-subtle: var(--color-success-700);
101
- --color-success-border: var(--color-success-200);
102
- --color-warning-solid: var(--color-warning-600);
103
- --color-warning-solid-hover: var(--color-warning-500);
104
- --color-warning-on-solid: var(--color-neutral-900);
105
- --color-warning-subtle: var(--color-warning-50);
106
- --color-warning-on-subtle: var(--color-warning-700);
107
- --color-warning-border: var(--color-warning-200);
108
- --color-danger-solid: var(--color-danger-600);
109
- --color-danger-solid-hover: var(--color-danger-700);
137
+ --color-success-subtle: var(--color-green-950);
138
+ --color-success-on-subtle: var(--color-green-400);
139
+ --color-success-border: var(--color-green-880);
140
+ --color-warning-solid: var(--color-amber-550);
141
+ --color-warning-solid-hover: var(--color-amber-520);
142
+ --color-warning-on-solid: var(--color-white);
143
+ --color-warning-subtle: var(--color-amber-950);
144
+ --color-warning-on-subtle: var(--color-amber-400);
145
+ --color-warning-border: var(--color-amber-880);
146
+ --color-danger-solid: var(--color-red-577);
147
+ --color-danger-solid-hover: var(--color-red-520);
110
148
  --color-danger-on-solid: var(--color-white);
111
149
  --color-danger-subtle: var(--color-danger-50);
112
150
  --color-danger-on-subtle: var(--color-danger-700);
@@ -126,11 +164,11 @@
126
164
  --spacing-24: 6rem;
127
165
  --spacing-px: 1px;
128
166
  --radius-none: 0rem;
129
- --radius-xs: 0.125rem;
130
- --radius-sm: 0.25rem;
131
- --radius-md: 0.375rem;
132
- --radius-lg: 0.5rem;
133
- --radius-xl: 0.75rem;
167
+ --radius-xs: 0.25rem;
168
+ --radius-sm: 0.375rem;
169
+ --radius-md: 0.5rem;
170
+ --radius-lg: 0.625rem;
171
+ --radius-xl: 0.875rem;
134
172
  --radius-full: 9999px;
135
173
  --shadow-none: none;
136
174
  --shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent);
@@ -138,7 +176,8 @@
138
176
  --shadow-md: 0 4px 6px -1px color-mix(in oklab, var(--color-shadow) 9%, transparent), 0 2px 4px -2px color-mix(in oklab, var(--color-shadow) 9%, transparent);
139
177
  --shadow-lg: 0 10px 15px -3px color-mix(in oklab, var(--color-shadow) 10%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--color-shadow) 10%, transparent);
140
178
  --shadow-xl: 0 20px 25px -5px color-mix(in oklab, var(--color-shadow) 12%, transparent), 0 8px 10px -6px color-mix(in oklab, var(--color-shadow) 12%, transparent);
141
- --shadow-scroll-x: 8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent);
179
+ --shadow-scroll-x: 12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent);
180
+ --shadow-sticky-header: inset 0 -1px 0 var(--color-border);
142
181
  --transition-duration-instant: 0ms;
143
182
  --transition-duration-fast: 120ms;
144
183
  --transition-duration-normal: 200ms;
@@ -185,51 +224,51 @@
185
224
  --leading-relaxed: 1.625;
186
225
  }
187
226
  .dark {
188
- --color-background: var(--color-neutral-950);
189
- --color-surface: var(--color-neutral-900);
190
- --color-surface-subtle: var(--color-neutral-800);
191
- --color-surface-hover: var(--color-neutral-800);
192
- --color-surface-active: var(--color-neutral-700);
227
+ --color-background: var(--color-gray-145);
228
+ --color-card: var(--color-gray-205);
229
+ --color-muted: var(--color-gray-269);
230
+ --color-accent: var(--color-gray-269);
231
+ --color-surface-active: var(--color-gray-371);
193
232
  --color-surface-selected: var(--color-primary-950);
194
- --color-surface-disabled: var(--color-neutral-800);
195
- --color-skeleton: var(--color-neutral-800);
196
- --color-text: var(--color-neutral-50);
197
- --color-text-muted: var(--color-neutral-400);
198
- --color-text-subtle: var(--color-neutral-500);
199
- --color-text-disabled: var(--color-neutral-600);
200
- --color-border: var(--color-neutral-800);
201
- --color-border-strong: var(--color-neutral-700);
202
- --color-border-subtle: var(--color-neutral-900);
203
- --color-border-control: var(--color-neutral-500);
204
- --color-focus-ring: var(--color-primary-400);
233
+ --color-surface-disabled: var(--color-gray-269);
234
+ --color-skeleton: var(--color-gray-269);
235
+ --color-foreground: var(--color-gray-985);
236
+ --color-muted-foreground: var(--color-gray-708);
237
+ --color-text-subtle: var(--color-gray-556);
238
+ --color-text-disabled: var(--color-gray-556);
239
+ --color-border: var(--color-white-alpha-8);
240
+ --color-border-strong: var(--color-white-alpha-15);
241
+ --color-border-subtle: var(--color-white-alpha-8);
242
+ --color-input: var(--color-white-alpha-15);
243
+ --color-ring: var(--color-primary-400);
205
244
  --color-shadow: var(--color-black);
206
- --color-neutral-solid: var(--color-neutral-400);
207
- --color-neutral-solid-hover: var(--color-neutral-300);
208
- --color-neutral-on-solid: var(--color-neutral-950);
209
- --color-neutral-subtle: var(--color-neutral-800);
210
- --color-neutral-on-subtle: var(--color-neutral-200);
211
- --color-neutral-border: var(--color-neutral-700);
245
+ --color-neutral-solid: var(--color-gray-269);
246
+ --color-neutral-solid-hover: var(--color-gray-371);
247
+ --color-neutral-on-solid: var(--color-gray-985);
248
+ --color-neutral-subtle: var(--color-gray-269);
249
+ --color-neutral-on-subtle: var(--color-gray-985);
250
+ --color-neutral-border: var(--color-gray-371);
212
251
  --color-primary-solid: var(--color-primary-400);
213
252
  --color-primary-solid-hover: var(--color-primary-300);
214
- --color-primary-on-solid: var(--color-neutral-950);
253
+ --color-primary-on-solid: var(--color-gray-145);
215
254
  --color-primary-subtle: var(--color-primary-950);
216
255
  --color-primary-on-subtle: var(--color-primary-300);
217
256
  --color-primary-border: var(--color-primary-800);
218
- --color-success-solid: var(--color-success-400);
219
- --color-success-solid-hover: var(--color-success-300);
220
- --color-success-on-solid: var(--color-neutral-950);
221
- --color-success-subtle: var(--color-success-950);
222
- --color-success-on-subtle: var(--color-success-300);
223
- --color-success-border: var(--color-success-800);
224
- --color-warning-solid: var(--color-warning-400);
225
- --color-warning-solid-hover: var(--color-warning-300);
226
- --color-warning-on-solid: var(--color-neutral-950);
227
- --color-warning-subtle: var(--color-warning-950);
228
- --color-warning-on-subtle: var(--color-warning-300);
229
- --color-warning-border: var(--color-warning-800);
230
- --color-danger-solid: var(--color-danger-400);
231
- --color-danger-solid-hover: var(--color-danger-300);
232
- --color-danger-on-solid: var(--color-neutral-950);
257
+ --color-success-solid: var(--color-green-550);
258
+ --color-success-solid-hover: var(--color-green-520);
259
+ --color-success-on-solid: var(--color-white);
260
+ --color-success-subtle: var(--color-green-260);
261
+ --color-success-on-subtle: var(--color-green-850);
262
+ --color-success-border: var(--color-green-350);
263
+ --color-warning-solid: var(--color-amber-550);
264
+ --color-warning-solid-hover: var(--color-amber-520);
265
+ --color-warning-on-solid: var(--color-white);
266
+ --color-warning-subtle: var(--color-amber-260);
267
+ --color-warning-on-subtle: var(--color-amber-850);
268
+ --color-warning-border: var(--color-amber-350);
269
+ --color-danger-solid: var(--color-red-577);
270
+ --color-danger-solid-hover: var(--color-red-520);
271
+ --color-danger-on-solid: var(--color-white);
233
272
  --color-danger-subtle: var(--color-danger-950);
234
273
  --color-danger-on-subtle: var(--color-danger-300);
235
274
  --color-danger-border: var(--color-danger-800);
@@ -241,33 +280,33 @@
241
280
  font-family: var(--font-sans);
242
281
  font-size: var(--text-sm, 0.875rem);
243
282
  background: var(--color-background);
244
- color: var(--color-text);
283
+ color: var(--color-foreground);
245
284
  transition: background var(--transition-duration-normal) var(--ease-standard);
246
285
  }
247
286
  header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-8); }
248
287
  h1 { font-size: 1.5rem; font-weight: var(--font-weight-bold); margin: 0; }
249
288
  h2 { font-size: 1.125rem; font-weight: var(--font-weight-semibold); margin: var(--spacing-12) 0 var(--spacing-4); padding-bottom: var(--spacing-2); border-bottom: 1px solid var(--color-border); }
250
- h3 { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-text-muted); margin: var(--spacing-6) 0 var(--spacing-3); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
289
+ h3 { font-size: 0.875rem; font-weight: var(--font-weight-medium); color: var(--color-muted-foreground); margin: var(--spacing-6) 0 var(--spacing-3); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
251
290
  code { font-family: var(--font-mono); font-size: 0.75rem; }
252
291
  button {
253
292
  font: inherit; font-weight: var(--font-weight-medium); cursor: pointer;
254
293
  padding: var(--spacing-2) var(--spacing-4);
255
294
  border-radius: var(--radius-sm);
256
- border: 1px solid var(--color-border-control);
257
- background: var(--color-surface); color: var(--color-text);
295
+ border: 1px solid var(--color-input);
296
+ background: var(--color-card); color: var(--color-foreground);
258
297
  }
259
- button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
298
+ button:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
260
299
  .scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--spacing-2); }
261
300
  .swatch { display: flex; flex-direction: column; gap: var(--spacing-1); }
262
301
  .chip { height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
263
302
  .step { font-weight: var(--font-weight-medium); }
264
- .val, .ref { color: var(--color-text-muted); }
303
+ .val, .ref { color: var(--color-muted-foreground); }
265
304
  table { width: 100%; border-collapse: collapse; }
266
- th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); font-weight: var(--font-weight-medium); padding: var(--spacing-2); border-bottom: 1px solid var(--color-border); }
305
+ th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-muted-foreground); font-weight: var(--font-weight-medium); padding: var(--spacing-2); border-bottom: 1px solid var(--color-border); }
267
306
  td { padding: var(--spacing-2); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; }
268
- tbody tr:hover { background: var(--color-surface-hover); }
307
+ tbody tr:hover { background: var(--color-accent); }
269
308
  .dot { display: inline-block; width: 28px; height: 20px; border-radius: var(--radius-xs); border: 1px solid var(--color-border); }
270
- .demo-box { background: var(--color-surface); border: 1px solid var(--color-border); }
309
+ .demo-box { background: var(--color-card); border: 1px solid var(--color-border); }
271
310
  .status-row { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
272
311
  .solid { padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-sm); font-weight: var(--font-weight-medium); }
273
312
  .subtle { padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: var(--font-weight-medium); border: 1px solid; }
@@ -277,7 +316,7 @@
277
316
  <header>
278
317
  <div>
279
318
  <h1>rowkit design tokens</h1>
280
- <p style="color: var(--color-text-muted); margin: var(--spacing-1) 0 0">
319
+ <p style="color: var(--color-muted-foreground); margin: var(--spacing-1) 0 0">
281
320
  Generated from <code>@rowkit/tokens</code>. Every value below comes from the same
282
321
  source the components consume.
283
322
  </p>
@@ -294,7 +333,7 @@
294
333
  </div>
295
334
 
296
335
  <h2>Semantic colours</h2>
297
- <p style="color: var(--color-text-muted)">
336
+ <p style="color: var(--color-muted-foreground)">
298
337
  Semantic tokens never hold a literal colour — each points at a primitive, which is what
299
338
  lets the theme flip without any value being redefined.
300
339
  </p>
@@ -304,32 +343,32 @@
304
343
  <tr>
305
344
  <td><code>--color-background</code></td>
306
345
  <td><span class="dot" style="background: var(--color-background)"></span></td>
307
- <td><code class="ref">var(--color-neutral-50)</code></td>
308
- <td><code class="ref">var(--color-neutral-950)</code></td>
346
+ <td><code class="ref">var(--color-gray-988)</code></td>
347
+ <td><code class="ref">var(--color-gray-145)</code></td>
309
348
  </tr>
310
349
  <tr>
311
- <td><code>--color-surface</code></td>
312
- <td><span class="dot" style="background: var(--color-surface)"></span></td>
350
+ <td><code>--color-card</code></td>
351
+ <td><span class="dot" style="background: var(--color-card)"></span></td>
313
352
  <td><code class="ref">var(--color-white)</code></td>
314
- <td><code class="ref">var(--color-neutral-900)</code></td>
353
+ <td><code class="ref">var(--color-gray-205)</code></td>
315
354
  </tr>
316
355
  <tr>
317
- <td><code>--color-surface-subtle</code></td>
318
- <td><span class="dot" style="background: var(--color-surface-subtle)"></span></td>
319
- <td><code class="ref">var(--color-neutral-100)</code></td>
320
- <td><code class="ref">var(--color-neutral-800)</code></td>
356
+ <td><code>--color-muted</code></td>
357
+ <td><span class="dot" style="background: var(--color-muted)"></span></td>
358
+ <td><code class="ref">var(--color-gray-972)</code></td>
359
+ <td><code class="ref">var(--color-gray-269)</code></td>
321
360
  </tr>
322
361
  <tr>
323
- <td><code>--color-surface-hover</code></td>
324
- <td><span class="dot" style="background: var(--color-surface-hover)"></span></td>
325
- <td><code class="ref">var(--color-neutral-100)</code></td>
326
- <td><code class="ref">var(--color-neutral-800)</code></td>
362
+ <td><code>--color-accent</code></td>
363
+ <td><span class="dot" style="background: var(--color-accent)"></span></td>
364
+ <td><code class="ref">var(--color-gray-972)</code></td>
365
+ <td><code class="ref">var(--color-gray-269)</code></td>
327
366
  </tr>
328
367
  <tr>
329
368
  <td><code>--color-surface-active</code></td>
330
369
  <td><span class="dot" style="background: var(--color-surface-active)"></span></td>
331
- <td><code class="ref">var(--color-neutral-200)</code></td>
332
- <td><code class="ref">var(--color-neutral-700)</code></td>
370
+ <td><code class="ref">var(--color-gray-940)</code></td>
371
+ <td><code class="ref">var(--color-gray-371)</code></td>
333
372
  </tr>
334
373
  <tr>
335
374
  <td><code>--color-surface-selected</code></td>
@@ -340,110 +379,110 @@
340
379
  <tr>
341
380
  <td><code>--color-surface-disabled</code></td>
342
381
  <td><span class="dot" style="background: var(--color-surface-disabled)"></span></td>
343
- <td><code class="ref">var(--color-neutral-100)</code></td>
344
- <td><code class="ref">var(--color-neutral-800)</code></td>
382
+ <td><code class="ref">var(--color-gray-972)</code></td>
383
+ <td><code class="ref">var(--color-gray-269)</code></td>
345
384
  </tr>
346
385
  <tr>
347
386
  <td><code>--color-skeleton</code></td>
348
387
  <td><span class="dot" style="background: var(--color-skeleton)"></span></td>
349
- <td><code class="ref">var(--color-neutral-200)</code></td>
350
- <td><code class="ref">var(--color-neutral-800)</code></td>
388
+ <td><code class="ref">var(--color-gray-972)</code></td>
389
+ <td><code class="ref">var(--color-gray-269)</code></td>
351
390
  </tr>
352
391
  <tr>
353
- <td><code>--color-text</code></td>
354
- <td><span class="dot" style="background: var(--color-text)"></span></td>
355
- <td><code class="ref">var(--color-neutral-900)</code></td>
356
- <td><code class="ref">var(--color-neutral-50)</code></td>
392
+ <td><code>--color-foreground</code></td>
393
+ <td><span class="dot" style="background: var(--color-foreground)"></span></td>
394
+ <td><code class="ref">var(--color-gray-145)</code></td>
395
+ <td><code class="ref">var(--color-gray-985)</code></td>
357
396
  </tr>
358
397
  <tr>
359
- <td><code>--color-text-muted</code></td>
360
- <td><span class="dot" style="background: var(--color-text-muted)"></span></td>
361
- <td><code class="ref">var(--color-neutral-600)</code></td>
362
- <td><code class="ref">var(--color-neutral-400)</code></td>
398
+ <td><code>--color-muted-foreground</code></td>
399
+ <td><span class="dot" style="background: var(--color-muted-foreground)"></span></td>
400
+ <td><code class="ref">var(--color-gray-535)</code></td>
401
+ <td><code class="ref">var(--color-gray-708)</code></td>
363
402
  </tr>
364
403
  <tr>
365
404
  <td><code>--color-text-subtle</code></td>
366
405
  <td><span class="dot" style="background: var(--color-text-subtle)"></span></td>
367
- <td><code class="ref">var(--color-neutral-400)</code></td>
368
- <td><code class="ref">var(--color-neutral-500)</code></td>
406
+ <td><code class="ref">var(--color-gray-635)</code></td>
407
+ <td><code class="ref">var(--color-gray-556)</code></td>
369
408
  </tr>
370
409
  <tr>
371
410
  <td><code>--color-text-disabled</code></td>
372
411
  <td><span class="dot" style="background: var(--color-text-disabled)"></span></td>
373
- <td><code class="ref">var(--color-neutral-400)</code></td>
374
- <td><code class="ref">var(--color-neutral-600)</code></td>
412
+ <td><code class="ref">var(--color-gray-708)</code></td>
413
+ <td><code class="ref">var(--color-gray-556)</code></td>
375
414
  </tr>
376
415
  <tr>
377
416
  <td><code>--color-border</code></td>
378
417
  <td><span class="dot" style="background: var(--color-border)"></span></td>
379
- <td><code class="ref">var(--color-neutral-200)</code></td>
380
- <td><code class="ref">var(--color-neutral-800)</code></td>
418
+ <td><code class="ref">var(--color-gray-940)</code></td>
419
+ <td><code class="ref">var(--color-white-alpha-8)</code></td>
381
420
  </tr>
382
421
  <tr>
383
422
  <td><code>--color-border-strong</code></td>
384
423
  <td><span class="dot" style="background: var(--color-border-strong)"></span></td>
385
- <td><code class="ref">var(--color-neutral-300)</code></td>
386
- <td><code class="ref">var(--color-neutral-700)</code></td>
424
+ <td><code class="ref">var(--color-gray-905)</code></td>
425
+ <td><code class="ref">var(--color-white-alpha-15)</code></td>
387
426
  </tr>
388
427
  <tr>
389
428
  <td><code>--color-border-subtle</code></td>
390
429
  <td><span class="dot" style="background: var(--color-border-subtle)"></span></td>
391
- <td><code class="ref">var(--color-neutral-100)</code></td>
392
- <td><code class="ref">var(--color-neutral-900)</code></td>
430
+ <td><code class="ref">var(--color-gray-972)</code></td>
431
+ <td><code class="ref">var(--color-white-alpha-8)</code></td>
393
432
  </tr>
394
433
  <tr>
395
- <td><code>--color-border-control</code></td>
396
- <td><span class="dot" style="background: var(--color-border-control)"></span></td>
397
- <td><code class="ref">var(--color-neutral-500)</code></td>
398
- <td><code class="ref">var(--color-neutral-500)</code></td>
434
+ <td><code>--color-input</code></td>
435
+ <td><span class="dot" style="background: var(--color-input)"></span></td>
436
+ <td><code class="ref">var(--color-gray-642)</code></td>
437
+ <td><code class="ref">var(--color-white-alpha-15)</code></td>
399
438
  </tr>
400
439
  <tr>
401
- <td><code>--color-focus-ring</code></td>
402
- <td><span class="dot" style="background: var(--color-focus-ring)"></span></td>
440
+ <td><code>--color-ring</code></td>
441
+ <td><span class="dot" style="background: var(--color-ring)"></span></td>
403
442
  <td><code class="ref">var(--color-primary-600)</code></td>
404
443
  <td><code class="ref">var(--color-primary-400)</code></td>
405
444
  </tr>
406
445
  <tr>
407
446
  <td><code>--color-shadow</code></td>
408
447
  <td><span class="dot" style="background: var(--color-shadow)"></span></td>
409
- <td><code class="ref">var(--color-neutral-950)</code></td>
448
+ <td><code class="ref">var(--color-black)</code></td>
410
449
  <td><code class="ref">var(--color-black)</code></td>
411
450
  </tr>
412
451
  <tr>
413
452
  <td><code>--color-neutral-solid</code></td>
414
453
  <td><span class="dot" style="background: var(--color-neutral-solid)"></span></td>
415
- <td><code class="ref">var(--color-neutral-700)</code></td>
416
- <td><code class="ref">var(--color-neutral-400)</code></td>
454
+ <td><code class="ref">var(--color-gray-972)</code></td>
455
+ <td><code class="ref">var(--color-gray-269)</code></td>
417
456
  </tr>
418
457
  <tr>
419
458
  <td><code>--color-neutral-solid-hover</code></td>
420
459
  <td><span class="dot" style="background: var(--color-neutral-solid-hover)"></span></td>
421
- <td><code class="ref">var(--color-neutral-800)</code></td>
422
- <td><code class="ref">var(--color-neutral-300)</code></td>
460
+ <td><code class="ref">var(--color-gray-940)</code></td>
461
+ <td><code class="ref">var(--color-gray-371)</code></td>
423
462
  </tr>
424
463
  <tr>
425
464
  <td><code>--color-neutral-on-solid</code></td>
426
465
  <td><span class="dot" style="background: var(--color-neutral-on-solid)"></span></td>
427
- <td><code class="ref">var(--color-white)</code></td>
428
- <td><code class="ref">var(--color-neutral-950)</code></td>
466
+ <td><code class="ref">var(--color-gray-205)</code></td>
467
+ <td><code class="ref">var(--color-gray-985)</code></td>
429
468
  </tr>
430
469
  <tr>
431
470
  <td><code>--color-neutral-subtle</code></td>
432
471
  <td><span class="dot" style="background: var(--color-neutral-subtle)"></span></td>
433
- <td><code class="ref">var(--color-neutral-100)</code></td>
434
- <td><code class="ref">var(--color-neutral-800)</code></td>
472
+ <td><code class="ref">var(--color-gray-972)</code></td>
473
+ <td><code class="ref">var(--color-gray-269)</code></td>
435
474
  </tr>
436
475
  <tr>
437
476
  <td><code>--color-neutral-on-subtle</code></td>
438
477
  <td><span class="dot" style="background: var(--color-neutral-on-subtle)"></span></td>
439
- <td><code class="ref">var(--color-neutral-700)</code></td>
440
- <td><code class="ref">var(--color-neutral-200)</code></td>
478
+ <td><code class="ref">var(--color-gray-205)</code></td>
479
+ <td><code class="ref">var(--color-gray-985)</code></td>
441
480
  </tr>
442
481
  <tr>
443
482
  <td><code>--color-neutral-border</code></td>
444
483
  <td><span class="dot" style="background: var(--color-neutral-border)"></span></td>
445
- <td><code class="ref">var(--color-neutral-200)</code></td>
446
- <td><code class="ref">var(--color-neutral-700)</code></td>
484
+ <td><code class="ref">var(--color-gray-940)</code></td>
485
+ <td><code class="ref">var(--color-gray-371)</code></td>
447
486
  </tr>
448
487
  <tr>
449
488
  <td><code>--color-primary-solid</code></td>
@@ -461,7 +500,7 @@
461
500
  <td><code>--color-primary-on-solid</code></td>
462
501
  <td><span class="dot" style="background: var(--color-primary-on-solid)"></span></td>
463
502
  <td><code class="ref">var(--color-white)</code></td>
464
- <td><code class="ref">var(--color-neutral-950)</code></td>
503
+ <td><code class="ref">var(--color-gray-145)</code></td>
465
504
  </tr>
466
505
  <tr>
467
506
  <td><code>--color-primary-subtle</code></td>
@@ -484,92 +523,92 @@
484
523
  <tr>
485
524
  <td><code>--color-success-solid</code></td>
486
525
  <td><span class="dot" style="background: var(--color-success-solid)"></span></td>
487
- <td><code class="ref">var(--color-success-600)</code></td>
488
- <td><code class="ref">var(--color-success-400)</code></td>
526
+ <td><code class="ref">var(--color-green-550)</code></td>
527
+ <td><code class="ref">var(--color-green-550)</code></td>
489
528
  </tr>
490
529
  <tr>
491
530
  <td><code>--color-success-solid-hover</code></td>
492
531
  <td><span class="dot" style="background: var(--color-success-solid-hover)"></span></td>
493
- <td><code class="ref">var(--color-success-700)</code></td>
494
- <td><code class="ref">var(--color-success-300)</code></td>
532
+ <td><code class="ref">var(--color-green-520)</code></td>
533
+ <td><code class="ref">var(--color-green-520)</code></td>
495
534
  </tr>
496
535
  <tr>
497
536
  <td><code>--color-success-on-solid</code></td>
498
537
  <td><span class="dot" style="background: var(--color-success-on-solid)"></span></td>
499
538
  <td><code class="ref">var(--color-white)</code></td>
500
- <td><code class="ref">var(--color-neutral-950)</code></td>
539
+ <td><code class="ref">var(--color-white)</code></td>
501
540
  </tr>
502
541
  <tr>
503
542
  <td><code>--color-success-subtle</code></td>
504
543
  <td><span class="dot" style="background: var(--color-success-subtle)"></span></td>
505
- <td><code class="ref">var(--color-success-50)</code></td>
506
- <td><code class="ref">var(--color-success-950)</code></td>
544
+ <td><code class="ref">var(--color-green-950)</code></td>
545
+ <td><code class="ref">var(--color-green-260)</code></td>
507
546
  </tr>
508
547
  <tr>
509
548
  <td><code>--color-success-on-subtle</code></td>
510
549
  <td><span class="dot" style="background: var(--color-success-on-subtle)"></span></td>
511
- <td><code class="ref">var(--color-success-700)</code></td>
512
- <td><code class="ref">var(--color-success-300)</code></td>
550
+ <td><code class="ref">var(--color-green-400)</code></td>
551
+ <td><code class="ref">var(--color-green-850)</code></td>
513
552
  </tr>
514
553
  <tr>
515
554
  <td><code>--color-success-border</code></td>
516
555
  <td><span class="dot" style="background: var(--color-success-border)"></span></td>
517
- <td><code class="ref">var(--color-success-200)</code></td>
518
- <td><code class="ref">var(--color-success-800)</code></td>
556
+ <td><code class="ref">var(--color-green-880)</code></td>
557
+ <td><code class="ref">var(--color-green-350)</code></td>
519
558
  </tr>
520
559
  <tr>
521
560
  <td><code>--color-warning-solid</code></td>
522
561
  <td><span class="dot" style="background: var(--color-warning-solid)"></span></td>
523
- <td><code class="ref">var(--color-warning-600)</code></td>
524
- <td><code class="ref">var(--color-warning-400)</code></td>
562
+ <td><code class="ref">var(--color-amber-550)</code></td>
563
+ <td><code class="ref">var(--color-amber-550)</code></td>
525
564
  </tr>
526
565
  <tr>
527
566
  <td><code>--color-warning-solid-hover</code></td>
528
567
  <td><span class="dot" style="background: var(--color-warning-solid-hover)"></span></td>
529
- <td><code class="ref">var(--color-warning-500)</code></td>
530
- <td><code class="ref">var(--color-warning-300)</code></td>
568
+ <td><code class="ref">var(--color-amber-520)</code></td>
569
+ <td><code class="ref">var(--color-amber-520)</code></td>
531
570
  </tr>
532
571
  <tr>
533
572
  <td><code>--color-warning-on-solid</code></td>
534
573
  <td><span class="dot" style="background: var(--color-warning-on-solid)"></span></td>
535
- <td><code class="ref">var(--color-neutral-900)</code></td>
536
- <td><code class="ref">var(--color-neutral-950)</code></td>
574
+ <td><code class="ref">var(--color-white)</code></td>
575
+ <td><code class="ref">var(--color-white)</code></td>
537
576
  </tr>
538
577
  <tr>
539
578
  <td><code>--color-warning-subtle</code></td>
540
579
  <td><span class="dot" style="background: var(--color-warning-subtle)"></span></td>
541
- <td><code class="ref">var(--color-warning-50)</code></td>
542
- <td><code class="ref">var(--color-warning-950)</code></td>
580
+ <td><code class="ref">var(--color-amber-950)</code></td>
581
+ <td><code class="ref">var(--color-amber-260)</code></td>
543
582
  </tr>
544
583
  <tr>
545
584
  <td><code>--color-warning-on-subtle</code></td>
546
585
  <td><span class="dot" style="background: var(--color-warning-on-subtle)"></span></td>
547
- <td><code class="ref">var(--color-warning-700)</code></td>
548
- <td><code class="ref">var(--color-warning-300)</code></td>
586
+ <td><code class="ref">var(--color-amber-400)</code></td>
587
+ <td><code class="ref">var(--color-amber-850)</code></td>
549
588
  </tr>
550
589
  <tr>
551
590
  <td><code>--color-warning-border</code></td>
552
591
  <td><span class="dot" style="background: var(--color-warning-border)"></span></td>
553
- <td><code class="ref">var(--color-warning-200)</code></td>
554
- <td><code class="ref">var(--color-warning-800)</code></td>
592
+ <td><code class="ref">var(--color-amber-880)</code></td>
593
+ <td><code class="ref">var(--color-amber-350)</code></td>
555
594
  </tr>
556
595
  <tr>
557
596
  <td><code>--color-danger-solid</code></td>
558
597
  <td><span class="dot" style="background: var(--color-danger-solid)"></span></td>
559
- <td><code class="ref">var(--color-danger-600)</code></td>
560
- <td><code class="ref">var(--color-danger-400)</code></td>
598
+ <td><code class="ref">var(--color-red-577)</code></td>
599
+ <td><code class="ref">var(--color-red-577)</code></td>
561
600
  </tr>
562
601
  <tr>
563
602
  <td><code>--color-danger-solid-hover</code></td>
564
603
  <td><span class="dot" style="background: var(--color-danger-solid-hover)"></span></td>
565
- <td><code class="ref">var(--color-danger-700)</code></td>
566
- <td><code class="ref">var(--color-danger-300)</code></td>
604
+ <td><code class="ref">var(--color-red-520)</code></td>
605
+ <td><code class="ref">var(--color-red-520)</code></td>
567
606
  </tr>
568
607
  <tr>
569
608
  <td><code>--color-danger-on-solid</code></td>
570
609
  <td><span class="dot" style="background: var(--color-danger-on-solid)"></span></td>
571
610
  <td><code class="ref">var(--color-white)</code></td>
572
- <td><code class="ref">var(--color-neutral-950)</code></td>
611
+ <td><code class="ref">var(--color-white)</code></td>
573
612
  </tr>
574
613
  <tr>
575
614
  <td><code>--color-danger-subtle</code></td>
@@ -1063,28 +1102,28 @@
1063
1102
  </tr>
1064
1103
  <tr>
1065
1104
  <td><code>--radius-xs</code></td>
1066
- <td><code class="ref">0.125rem</code></td>
1067
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.125rem"></div></td>
1068
- </tr>
1069
- <tr>
1070
- <td><code>--radius-sm</code></td>
1071
1105
  <td><code class="ref">0.25rem</code></td>
1072
1106
  <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.25rem"></div></td>
1073
1107
  </tr>
1074
1108
  <tr>
1075
- <td><code>--radius-md</code></td>
1109
+ <td><code>--radius-sm</code></td>
1076
1110
  <td><code class="ref">0.375rem</code></td>
1077
1111
  <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.375rem"></div></td>
1078
1112
  </tr>
1079
1113
  <tr>
1080
- <td><code>--radius-lg</code></td>
1114
+ <td><code>--radius-md</code></td>
1081
1115
  <td><code class="ref">0.5rem</code></td>
1082
1116
  <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.5rem"></div></td>
1083
1117
  </tr>
1118
+ <tr>
1119
+ <td><code>--radius-lg</code></td>
1120
+ <td><code class="ref">0.625rem</code></td>
1121
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.625rem"></div></td>
1122
+ </tr>
1084
1123
  <tr>
1085
1124
  <td><code>--radius-xl</code></td>
1086
- <td><code class="ref">0.75rem</code></td>
1087
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.75rem"></div></td>
1125
+ <td><code class="ref">0.875rem</code></td>
1126
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.875rem"></div></td>
1088
1127
  </tr>
1089
1128
  <tr>
1090
1129
  <td><code>--radius-full</code></td>
@@ -1126,8 +1165,13 @@
1126
1165
  </tr>
1127
1166
  <tr>
1128
1167
  <td><code>--shadow-scroll-x</code></td>
1129
- <td><code class="ref">8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent)</code></td>
1130
- <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: 8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent)"></div></td>
1168
+ <td><code class="ref">12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)</code></td>
1169
+ <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: 12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)"></div></td>
1170
+ </tr>
1171
+ <tr>
1172
+ <td><code>--shadow-sticky-header</code></td>
1173
+ <td><code class="ref">inset 0 -1px 0 var(--color-border)</code></td>
1174
+ <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: inset 0 -1px 0 var(--color-border)"></div></td>
1131
1175
  </tr></tbody></table></section>
1132
1176
 
1133
1177
  <h2>Motion</h2>