@rowkit/tokens 0.1.1 → 0.3.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 (12) hide show
  1. package/README.md +6 -4
  2. package/dist/blur.d.ts +18 -0
  3. package/dist/color.d.ts +295 -51
  4. package/dist/index.d.ts +134 -35
  5. package/dist/index.js +284 -194
  6. package/dist/index.js.map +1 -1
  7. package/dist/radius.d.ts +67 -15
  8. package/dist/reference.html +301 -254
  9. package/dist/shadow.d.ts +12 -1
  10. package/dist/tokens.css +158 -108
  11. package/dist/typography.d.ts +11 -4
  12. package/package.json +1 -1
package/dist/reference.html CHANGED
@@ -8,6 +8,47 @@
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-260: oklch(0.32 0.045 25);
29
+ --color-red-350: oklch(0.38 0.055 25);
30
+ --color-red-520: oklch(0.52 0.212 27.325);
31
+ --color-red-577: oklch(0.577 0.235 27.325);
32
+ --color-red-850: oklch(0.85 0.08 25);
33
+ --color-green-260: oklch(0.26 0.068 152);
34
+ --color-green-350: oklch(0.35 0.092 152);
35
+ --color-green-400: oklch(0.4 0.105 152);
36
+ --color-green-520: oklch(0.52 0.136 152);
37
+ --color-green-550: oklch(0.55 0.144 152);
38
+ --color-green-850: oklch(0.85 0.12 152);
39
+ --color-green-880: oklch(0.88 0.05 152);
40
+ --color-green-950: oklch(0.95 0.05 152);
41
+ --color-amber-260: oklch(0.26 0.055 75);
42
+ --color-amber-350: oklch(0.35 0.074 75);
43
+ --color-amber-400: oklch(0.4 0.084 75);
44
+ --color-amber-520: oklch(0.52 0.109 75);
45
+ --color-amber-550: oklch(0.55 0.116 75);
46
+ --color-amber-850: oklch(0.85 0.12 75);
47
+ --color-amber-880: oklch(0.88 0.05 75);
48
+ --color-amber-950: oklch(0.95 0.04 75);
49
+ --color-white-alpha-8: oklch(1 0 0 / 8%);
50
+ --color-white-alpha-10: oklch(1 0 0 / 10%);
51
+ --color-white-alpha-15: oklch(1 0 0 / 15%);
11
52
  --color-neutral-50: oklch(0.984 0.003 264);
12
53
  --color-neutral-100: oklch(0.968 0.004 264);
13
54
  --color-neutral-200: oklch(0.928 0.006 264);
@@ -19,17 +60,17 @@
19
60
  --color-neutral-800: oklch(0.279 0.03 264);
20
61
  --color-neutral-900: oklch(0.21 0.033 264);
21
62
  --color-neutral-950: oklch(0.13 0.036 264);
22
- --color-primary-50: oklch(0.97 0.014 259);
23
- --color-primary-100: oklch(0.936 0.03 259);
24
- --color-primary-200: oklch(0.885 0.055 259);
25
- --color-primary-300: oklch(0.809 0.095 259);
26
- --color-primary-400: oklch(0.715 0.147 259);
27
- --color-primary-500: oklch(0.623 0.201 259);
28
- --color-primary-600: oklch(0.546 0.209 259);
29
- --color-primary-700: oklch(0.488 0.187 259);
30
- --color-primary-800: oklch(0.442 0.165 259);
31
- --color-primary-900: oklch(0.396 0.135 259);
32
- --color-primary-950: oklch(0.282 0.086 259);
63
+ --color-primary-50: oklch(0.975 0.01 48);
64
+ --color-primary-100: oklch(0.95 0.014 48);
65
+ --color-primary-200: oklch(0.90 0.02 48);
66
+ --color-primary-300: oklch(0.80 0.026 48);
67
+ --color-primary-400: oklch(0.68 0.032 48);
68
+ --color-primary-500: oklch(0.50 0.036 48);
69
+ --color-primary-600: oklch(0.40 0.037 48);
70
+ --color-primary-700: oklch(0.35 0.037 48);
71
+ --color-primary-800: oklch(0.31 0.038 48);
72
+ --color-primary-900: oklch(0.26 0.032 48);
73
+ --color-primary-950: oklch(0.18 0.024 48);
33
74
  --color-success-50: oklch(0.97 0.014 152);
34
75
  --color-success-100: oklch(0.936 0.036 152);
35
76
  --color-success-200: oklch(0.885 0.064 152);
@@ -63,52 +104,52 @@
63
104
  --color-danger-800: oklch(0.442 0.165 25);
64
105
  --color-danger-900: oklch(0.396 0.135 25);
65
106
  --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);
107
+ --color-background: var(--color-gray-988);
108
+ --color-card: var(--color-white);
109
+ --color-muted: var(--color-gray-972);
110
+ --color-accent: var(--color-gray-972);
111
+ --color-surface-active: var(--color-gray-940);
71
112
  --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);
90
- --color-primary-solid: var(--color-primary-600);
91
- --color-primary-solid-hover: var(--color-primary-700);
92
- --color-primary-on-solid: var(--color-white);
113
+ --color-surface-disabled: var(--color-gray-972);
114
+ --color-skeleton: var(--color-gray-972);
115
+ --color-foreground: var(--color-gray-145);
116
+ --color-muted-foreground: var(--color-gray-535);
117
+ --color-text-subtle: var(--color-gray-635);
118
+ --color-text-disabled: var(--color-gray-708);
119
+ --color-border: var(--color-gray-940);
120
+ --color-border-strong: var(--color-gray-905);
121
+ --color-border-subtle: var(--color-gray-972);
122
+ --color-input: var(--color-gray-870);
123
+ --color-ring: var(--color-gray-708);
124
+ --color-shadow: var(--color-black);
125
+ --color-neutral-solid: var(--color-gray-972);
126
+ --color-neutral-solid-hover: var(--color-gray-940);
127
+ --color-neutral-on-solid: var(--color-gray-205);
128
+ --color-neutral-subtle: var(--color-gray-972);
129
+ --color-neutral-on-subtle: var(--color-gray-205);
130
+ --color-neutral-border: var(--color-gray-940);
131
+ --color-primary-solid: var(--color-primary-800);
132
+ --color-primary-solid-hover: var(--color-primary-900);
133
+ --color-primary-on-solid: var(--color-gray-985);
93
134
  --color-primary-subtle: var(--color-primary-50);
94
- --color-primary-on-subtle: var(--color-primary-700);
135
+ --color-primary-on-subtle: var(--color-primary-900);
95
136
  --color-primary-border: var(--color-primary-200);
96
- --color-success-solid: var(--color-success-600);
97
- --color-success-solid-hover: var(--color-success-700);
137
+ --color-success-solid: var(--color-green-550);
138
+ --color-success-solid-hover: var(--color-green-520);
98
139
  --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);
140
+ --color-success-subtle: var(--color-green-950);
141
+ --color-success-on-subtle: var(--color-green-400);
142
+ --color-success-border: var(--color-green-880);
143
+ --color-warning-solid: var(--color-amber-550);
144
+ --color-warning-solid-hover: var(--color-amber-520);
145
+ --color-warning-on-solid: var(--color-white);
146
+ --color-warning-subtle: var(--color-amber-950);
147
+ --color-warning-on-subtle: var(--color-amber-400);
148
+ --color-warning-border: var(--color-amber-880);
149
+ --color-danger-solid: var(--color-red-577);
150
+ --color-danger-solid-hover: var(--color-red-520);
110
151
  --color-danger-on-solid: var(--color-white);
111
- --color-danger-subtle: var(--color-danger-50);
152
+ --color-danger-subtle: var(--color-danger-100);
112
153
  --color-danger-on-subtle: var(--color-danger-700);
113
154
  --color-danger-border: var(--color-danger-200);
114
155
  --spacing-0: 0rem;
@@ -126,11 +167,11 @@
126
167
  --spacing-24: 6rem;
127
168
  --spacing-px: 1px;
128
169
  --radius-none: 0rem;
129
- --radius-xs: 0.125rem;
130
- --radius-sm: 0.25rem;
131
- --radius-md: 0.375rem;
170
+ --radius-xs: 0.2rem;
171
+ --radius-sm: 0.3rem;
172
+ --radius-md: 0.4rem;
132
173
  --radius-lg: 0.5rem;
133
- --radius-xl: 0.75rem;
174
+ --radius-xl: 0.7rem;
134
175
  --radius-full: 9999px;
135
176
  --shadow-none: none;
136
177
  --shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent);
@@ -138,7 +179,8 @@
138
179
  --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
180
  --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
181
  --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);
182
+ --shadow-scroll-x: 12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent);
183
+ --shadow-sticky-header: inset 0 -1px 0 var(--color-border);
142
184
  --transition-duration-instant: 0ms;
143
185
  --transition-duration-fast: 120ms;
144
186
  --transition-duration-normal: 200ms;
@@ -155,8 +197,8 @@
155
197
  --z-index-popover: 500;
156
198
  --z-index-toast: 600;
157
199
  --z-index-tooltip: 700;
158
- --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
159
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
200
+ --font-sans: "Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
201
+ --font-mono: "Geist Mono Variable", Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
160
202
  --text-xs: 0.75rem;
161
203
  --text-xs--line-height: 1rem;
162
204
  --text-sm: 0.875rem;
@@ -185,54 +227,54 @@
185
227
  --leading-relaxed: 1.625;
186
228
  }
187
229
  .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);
193
- --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);
230
+ --color-background: var(--color-gray-145);
231
+ --color-card: var(--color-gray-205);
232
+ --color-muted: var(--color-gray-269);
233
+ --color-accent: var(--color-gray-269);
234
+ --color-surface-active: var(--color-gray-371);
235
+ --color-surface-selected: var(--color-gray-269);
236
+ --color-surface-disabled: var(--color-gray-269);
237
+ --color-skeleton: var(--color-gray-269);
238
+ --color-foreground: var(--color-gray-985);
239
+ --color-muted-foreground: var(--color-gray-708);
240
+ --color-text-subtle: var(--color-gray-556);
241
+ --color-text-disabled: var(--color-gray-556);
242
+ --color-border: var(--color-white-alpha-8);
243
+ --color-border-strong: var(--color-white-alpha-15);
244
+ --color-border-subtle: var(--color-white-alpha-8);
245
+ --color-input: var(--color-white-alpha-15);
246
+ --color-ring: var(--color-white-alpha-15);
205
247
  --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);
212
- --color-primary-solid: var(--color-primary-400);
213
- --color-primary-solid-hover: var(--color-primary-300);
214
- --color-primary-on-solid: var(--color-neutral-950);
215
- --color-primary-subtle: var(--color-primary-950);
216
- --color-primary-on-subtle: var(--color-primary-300);
217
- --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);
233
- --color-danger-subtle: var(--color-danger-950);
234
- --color-danger-on-subtle: var(--color-danger-300);
235
- --color-danger-border: var(--color-danger-800);
248
+ --color-neutral-solid: var(--color-gray-269);
249
+ --color-neutral-solid-hover: var(--color-gray-371);
250
+ --color-neutral-on-solid: var(--color-gray-985);
251
+ --color-neutral-subtle: var(--color-gray-269);
252
+ --color-neutral-on-subtle: var(--color-gray-985);
253
+ --color-neutral-border: var(--color-gray-371);
254
+ --color-primary-solid: var(--color-primary-100);
255
+ --color-primary-solid-hover: var(--color-primary-50);
256
+ --color-primary-on-solid: var(--color-primary-900);
257
+ --color-primary-subtle: var(--color-primary-900);
258
+ --color-primary-on-subtle: var(--color-primary-200);
259
+ --color-primary-border: var(--color-primary-700);
260
+ --color-success-solid: var(--color-green-550);
261
+ --color-success-solid-hover: var(--color-green-520);
262
+ --color-success-on-solid: var(--color-white);
263
+ --color-success-subtle: var(--color-green-260);
264
+ --color-success-on-subtle: var(--color-green-850);
265
+ --color-success-border: var(--color-green-350);
266
+ --color-warning-solid: var(--color-amber-550);
267
+ --color-warning-solid-hover: var(--color-amber-520);
268
+ --color-warning-on-solid: var(--color-white);
269
+ --color-warning-subtle: var(--color-amber-260);
270
+ --color-warning-on-subtle: var(--color-amber-850);
271
+ --color-warning-border: var(--color-amber-350);
272
+ --color-danger-solid: var(--color-red-577);
273
+ --color-danger-solid-hover: var(--color-red-520);
274
+ --color-danger-on-solid: var(--color-white);
275
+ --color-danger-subtle: var(--color-red-260);
276
+ --color-danger-on-subtle: var(--color-red-850);
277
+ --color-danger-border: var(--color-red-350);
236
278
  }
237
279
  * { box-sizing: border-box; }
238
280
  body {
@@ -241,33 +283,33 @@
241
283
  font-family: var(--font-sans);
242
284
  font-size: var(--text-sm, 0.875rem);
243
285
  background: var(--color-background);
244
- color: var(--color-text);
286
+ color: var(--color-foreground);
245
287
  transition: background var(--transition-duration-normal) var(--ease-standard);
246
288
  }
247
289
  header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-8); }
248
290
  h1 { font-size: 1.5rem; font-weight: var(--font-weight-bold); margin: 0; }
249
291
  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); }
292
+ 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
293
  code { font-family: var(--font-mono); font-size: 0.75rem; }
252
294
  button {
253
295
  font: inherit; font-weight: var(--font-weight-medium); cursor: pointer;
254
296
  padding: var(--spacing-2) var(--spacing-4);
255
297
  border-radius: var(--radius-sm);
256
- border: 1px solid var(--color-border-control);
257
- background: var(--color-surface); color: var(--color-text);
298
+ border: 1px solid var(--color-input);
299
+ background: var(--color-card); color: var(--color-foreground);
258
300
  }
259
- button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
301
+ button:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
260
302
  .scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--spacing-2); }
261
303
  .swatch { display: flex; flex-direction: column; gap: var(--spacing-1); }
262
304
  .chip { height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
263
305
  .step { font-weight: var(--font-weight-medium); }
264
- .val, .ref { color: var(--color-text-muted); }
306
+ .val, .ref { color: var(--color-muted-foreground); }
265
307
  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); }
308
+ 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
309
  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); }
310
+ tbody tr:hover { background: var(--color-accent); }
269
311
  .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); }
312
+ .demo-box { background: var(--color-card); border: 1px solid var(--color-border); }
271
313
  .status-row { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
272
314
  .solid { padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-sm); font-weight: var(--font-weight-medium); }
273
315
  .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 +319,7 @@
277
319
  <header>
278
320
  <div>
279
321
  <h1>rowkit design tokens</h1>
280
- <p style="color: var(--color-text-muted); margin: var(--spacing-1) 0 0">
322
+ <p style="color: var(--color-muted-foreground); margin: var(--spacing-1) 0 0">
281
323
  Generated from <code>@rowkit/tokens</code>. Every value below comes from the same
282
324
  source the components consume.
283
325
  </p>
@@ -294,7 +336,7 @@
294
336
  </div>
295
337
 
296
338
  <h2>Semantic colours</h2>
297
- <p style="color: var(--color-text-muted)">
339
+ <p style="color: var(--color-muted-foreground)">
298
340
  Semantic tokens never hold a literal colour — each points at a primitive, which is what
299
341
  lets the theme flip without any value being redefined.
300
342
  </p>
@@ -304,290 +346,290 @@
304
346
  <tr>
305
347
  <td><code>--color-background</code></td>
306
348
  <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>
349
+ <td><code class="ref">var(--color-gray-988)</code></td>
350
+ <td><code class="ref">var(--color-gray-145)</code></td>
309
351
  </tr>
310
352
  <tr>
311
- <td><code>--color-surface</code></td>
312
- <td><span class="dot" style="background: var(--color-surface)"></span></td>
353
+ <td><code>--color-card</code></td>
354
+ <td><span class="dot" style="background: var(--color-card)"></span></td>
313
355
  <td><code class="ref">var(--color-white)</code></td>
314
- <td><code class="ref">var(--color-neutral-900)</code></td>
356
+ <td><code class="ref">var(--color-gray-205)</code></td>
315
357
  </tr>
316
358
  <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>
359
+ <td><code>--color-muted</code></td>
360
+ <td><span class="dot" style="background: var(--color-muted)"></span></td>
361
+ <td><code class="ref">var(--color-gray-972)</code></td>
362
+ <td><code class="ref">var(--color-gray-269)</code></td>
321
363
  </tr>
322
364
  <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>
365
+ <td><code>--color-accent</code></td>
366
+ <td><span class="dot" style="background: var(--color-accent)"></span></td>
367
+ <td><code class="ref">var(--color-gray-972)</code></td>
368
+ <td><code class="ref">var(--color-gray-269)</code></td>
327
369
  </tr>
328
370
  <tr>
329
371
  <td><code>--color-surface-active</code></td>
330
372
  <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>
373
+ <td><code class="ref">var(--color-gray-940)</code></td>
374
+ <td><code class="ref">var(--color-gray-371)</code></td>
333
375
  </tr>
334
376
  <tr>
335
377
  <td><code>--color-surface-selected</code></td>
336
378
  <td><span class="dot" style="background: var(--color-surface-selected)"></span></td>
337
379
  <td><code class="ref">var(--color-primary-50)</code></td>
338
- <td><code class="ref">var(--color-primary-950)</code></td>
380
+ <td><code class="ref">var(--color-gray-269)</code></td>
339
381
  </tr>
340
382
  <tr>
341
383
  <td><code>--color-surface-disabled</code></td>
342
384
  <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>
385
+ <td><code class="ref">var(--color-gray-972)</code></td>
386
+ <td><code class="ref">var(--color-gray-269)</code></td>
345
387
  </tr>
346
388
  <tr>
347
389
  <td><code>--color-skeleton</code></td>
348
390
  <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>
391
+ <td><code class="ref">var(--color-gray-972)</code></td>
392
+ <td><code class="ref">var(--color-gray-269)</code></td>
351
393
  </tr>
352
394
  <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>
395
+ <td><code>--color-foreground</code></td>
396
+ <td><span class="dot" style="background: var(--color-foreground)"></span></td>
397
+ <td><code class="ref">var(--color-gray-145)</code></td>
398
+ <td><code class="ref">var(--color-gray-985)</code></td>
357
399
  </tr>
358
400
  <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>
401
+ <td><code>--color-muted-foreground</code></td>
402
+ <td><span class="dot" style="background: var(--color-muted-foreground)"></span></td>
403
+ <td><code class="ref">var(--color-gray-535)</code></td>
404
+ <td><code class="ref">var(--color-gray-708)</code></td>
363
405
  </tr>
364
406
  <tr>
365
407
  <td><code>--color-text-subtle</code></td>
366
408
  <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>
409
+ <td><code class="ref">var(--color-gray-635)</code></td>
410
+ <td><code class="ref">var(--color-gray-556)</code></td>
369
411
  </tr>
370
412
  <tr>
371
413
  <td><code>--color-text-disabled</code></td>
372
414
  <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>
415
+ <td><code class="ref">var(--color-gray-708)</code></td>
416
+ <td><code class="ref">var(--color-gray-556)</code></td>
375
417
  </tr>
376
418
  <tr>
377
419
  <td><code>--color-border</code></td>
378
420
  <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>
421
+ <td><code class="ref">var(--color-gray-940)</code></td>
422
+ <td><code class="ref">var(--color-white-alpha-8)</code></td>
381
423
  </tr>
382
424
  <tr>
383
425
  <td><code>--color-border-strong</code></td>
384
426
  <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>
427
+ <td><code class="ref">var(--color-gray-905)</code></td>
428
+ <td><code class="ref">var(--color-white-alpha-15)</code></td>
387
429
  </tr>
388
430
  <tr>
389
431
  <td><code>--color-border-subtle</code></td>
390
432
  <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>
433
+ <td><code class="ref">var(--color-gray-972)</code></td>
434
+ <td><code class="ref">var(--color-white-alpha-8)</code></td>
393
435
  </tr>
394
436
  <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>
437
+ <td><code>--color-input</code></td>
438
+ <td><span class="dot" style="background: var(--color-input)"></span></td>
439
+ <td><code class="ref">var(--color-gray-870)</code></td>
440
+ <td><code class="ref">var(--color-white-alpha-15)</code></td>
399
441
  </tr>
400
442
  <tr>
401
- <td><code>--color-focus-ring</code></td>
402
- <td><span class="dot" style="background: var(--color-focus-ring)"></span></td>
403
- <td><code class="ref">var(--color-primary-600)</code></td>
404
- <td><code class="ref">var(--color-primary-400)</code></td>
443
+ <td><code>--color-ring</code></td>
444
+ <td><span class="dot" style="background: var(--color-ring)"></span></td>
445
+ <td><code class="ref">var(--color-gray-708)</code></td>
446
+ <td><code class="ref">var(--color-white-alpha-15)</code></td>
405
447
  </tr>
406
448
  <tr>
407
449
  <td><code>--color-shadow</code></td>
408
450
  <td><span class="dot" style="background: var(--color-shadow)"></span></td>
409
- <td><code class="ref">var(--color-neutral-950)</code></td>
451
+ <td><code class="ref">var(--color-black)</code></td>
410
452
  <td><code class="ref">var(--color-black)</code></td>
411
453
  </tr>
412
454
  <tr>
413
455
  <td><code>--color-neutral-solid</code></td>
414
456
  <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>
457
+ <td><code class="ref">var(--color-gray-972)</code></td>
458
+ <td><code class="ref">var(--color-gray-269)</code></td>
417
459
  </tr>
418
460
  <tr>
419
461
  <td><code>--color-neutral-solid-hover</code></td>
420
462
  <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>
463
+ <td><code class="ref">var(--color-gray-940)</code></td>
464
+ <td><code class="ref">var(--color-gray-371)</code></td>
423
465
  </tr>
424
466
  <tr>
425
467
  <td><code>--color-neutral-on-solid</code></td>
426
468
  <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>
469
+ <td><code class="ref">var(--color-gray-205)</code></td>
470
+ <td><code class="ref">var(--color-gray-985)</code></td>
429
471
  </tr>
430
472
  <tr>
431
473
  <td><code>--color-neutral-subtle</code></td>
432
474
  <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>
475
+ <td><code class="ref">var(--color-gray-972)</code></td>
476
+ <td><code class="ref">var(--color-gray-269)</code></td>
435
477
  </tr>
436
478
  <tr>
437
479
  <td><code>--color-neutral-on-subtle</code></td>
438
480
  <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>
481
+ <td><code class="ref">var(--color-gray-205)</code></td>
482
+ <td><code class="ref">var(--color-gray-985)</code></td>
441
483
  </tr>
442
484
  <tr>
443
485
  <td><code>--color-neutral-border</code></td>
444
486
  <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>
487
+ <td><code class="ref">var(--color-gray-940)</code></td>
488
+ <td><code class="ref">var(--color-gray-371)</code></td>
447
489
  </tr>
448
490
  <tr>
449
491
  <td><code>--color-primary-solid</code></td>
450
492
  <td><span class="dot" style="background: var(--color-primary-solid)"></span></td>
451
- <td><code class="ref">var(--color-primary-600)</code></td>
452
- <td><code class="ref">var(--color-primary-400)</code></td>
493
+ <td><code class="ref">var(--color-primary-800)</code></td>
494
+ <td><code class="ref">var(--color-primary-100)</code></td>
453
495
  </tr>
454
496
  <tr>
455
497
  <td><code>--color-primary-solid-hover</code></td>
456
498
  <td><span class="dot" style="background: var(--color-primary-solid-hover)"></span></td>
457
- <td><code class="ref">var(--color-primary-700)</code></td>
458
- <td><code class="ref">var(--color-primary-300)</code></td>
499
+ <td><code class="ref">var(--color-primary-900)</code></td>
500
+ <td><code class="ref">var(--color-primary-50)</code></td>
459
501
  </tr>
460
502
  <tr>
461
503
  <td><code>--color-primary-on-solid</code></td>
462
504
  <td><span class="dot" style="background: var(--color-primary-on-solid)"></span></td>
463
- <td><code class="ref">var(--color-white)</code></td>
464
- <td><code class="ref">var(--color-neutral-950)</code></td>
505
+ <td><code class="ref">var(--color-gray-985)</code></td>
506
+ <td><code class="ref">var(--color-primary-900)</code></td>
465
507
  </tr>
466
508
  <tr>
467
509
  <td><code>--color-primary-subtle</code></td>
468
510
  <td><span class="dot" style="background: var(--color-primary-subtle)"></span></td>
469
511
  <td><code class="ref">var(--color-primary-50)</code></td>
470
- <td><code class="ref">var(--color-primary-950)</code></td>
512
+ <td><code class="ref">var(--color-primary-900)</code></td>
471
513
  </tr>
472
514
  <tr>
473
515
  <td><code>--color-primary-on-subtle</code></td>
474
516
  <td><span class="dot" style="background: var(--color-primary-on-subtle)"></span></td>
475
- <td><code class="ref">var(--color-primary-700)</code></td>
476
- <td><code class="ref">var(--color-primary-300)</code></td>
517
+ <td><code class="ref">var(--color-primary-900)</code></td>
518
+ <td><code class="ref">var(--color-primary-200)</code></td>
477
519
  </tr>
478
520
  <tr>
479
521
  <td><code>--color-primary-border</code></td>
480
522
  <td><span class="dot" style="background: var(--color-primary-border)"></span></td>
481
523
  <td><code class="ref">var(--color-primary-200)</code></td>
482
- <td><code class="ref">var(--color-primary-800)</code></td>
524
+ <td><code class="ref">var(--color-primary-700)</code></td>
483
525
  </tr>
484
526
  <tr>
485
527
  <td><code>--color-success-solid</code></td>
486
528
  <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>
529
+ <td><code class="ref">var(--color-green-550)</code></td>
530
+ <td><code class="ref">var(--color-green-550)</code></td>
489
531
  </tr>
490
532
  <tr>
491
533
  <td><code>--color-success-solid-hover</code></td>
492
534
  <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>
535
+ <td><code class="ref">var(--color-green-520)</code></td>
536
+ <td><code class="ref">var(--color-green-520)</code></td>
495
537
  </tr>
496
538
  <tr>
497
539
  <td><code>--color-success-on-solid</code></td>
498
540
  <td><span class="dot" style="background: var(--color-success-on-solid)"></span></td>
499
541
  <td><code class="ref">var(--color-white)</code></td>
500
- <td><code class="ref">var(--color-neutral-950)</code></td>
542
+ <td><code class="ref">var(--color-white)</code></td>
501
543
  </tr>
502
544
  <tr>
503
545
  <td><code>--color-success-subtle</code></td>
504
546
  <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>
547
+ <td><code class="ref">var(--color-green-950)</code></td>
548
+ <td><code class="ref">var(--color-green-260)</code></td>
507
549
  </tr>
508
550
  <tr>
509
551
  <td><code>--color-success-on-subtle</code></td>
510
552
  <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>
553
+ <td><code class="ref">var(--color-green-400)</code></td>
554
+ <td><code class="ref">var(--color-green-850)</code></td>
513
555
  </tr>
514
556
  <tr>
515
557
  <td><code>--color-success-border</code></td>
516
558
  <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>
559
+ <td><code class="ref">var(--color-green-880)</code></td>
560
+ <td><code class="ref">var(--color-green-350)</code></td>
519
561
  </tr>
520
562
  <tr>
521
563
  <td><code>--color-warning-solid</code></td>
522
564
  <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>
565
+ <td><code class="ref">var(--color-amber-550)</code></td>
566
+ <td><code class="ref">var(--color-amber-550)</code></td>
525
567
  </tr>
526
568
  <tr>
527
569
  <td><code>--color-warning-solid-hover</code></td>
528
570
  <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>
571
+ <td><code class="ref">var(--color-amber-520)</code></td>
572
+ <td><code class="ref">var(--color-amber-520)</code></td>
531
573
  </tr>
532
574
  <tr>
533
575
  <td><code>--color-warning-on-solid</code></td>
534
576
  <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>
577
+ <td><code class="ref">var(--color-white)</code></td>
578
+ <td><code class="ref">var(--color-white)</code></td>
537
579
  </tr>
538
580
  <tr>
539
581
  <td><code>--color-warning-subtle</code></td>
540
582
  <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>
583
+ <td><code class="ref">var(--color-amber-950)</code></td>
584
+ <td><code class="ref">var(--color-amber-260)</code></td>
543
585
  </tr>
544
586
  <tr>
545
587
  <td><code>--color-warning-on-subtle</code></td>
546
588
  <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>
589
+ <td><code class="ref">var(--color-amber-400)</code></td>
590
+ <td><code class="ref">var(--color-amber-850)</code></td>
549
591
  </tr>
550
592
  <tr>
551
593
  <td><code>--color-warning-border</code></td>
552
594
  <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>
595
+ <td><code class="ref">var(--color-amber-880)</code></td>
596
+ <td><code class="ref">var(--color-amber-350)</code></td>
555
597
  </tr>
556
598
  <tr>
557
599
  <td><code>--color-danger-solid</code></td>
558
600
  <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>
601
+ <td><code class="ref">var(--color-red-577)</code></td>
602
+ <td><code class="ref">var(--color-red-577)</code></td>
561
603
  </tr>
562
604
  <tr>
563
605
  <td><code>--color-danger-solid-hover</code></td>
564
606
  <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>
607
+ <td><code class="ref">var(--color-red-520)</code></td>
608
+ <td><code class="ref">var(--color-red-520)</code></td>
567
609
  </tr>
568
610
  <tr>
569
611
  <td><code>--color-danger-on-solid</code></td>
570
612
  <td><span class="dot" style="background: var(--color-danger-on-solid)"></span></td>
571
613
  <td><code class="ref">var(--color-white)</code></td>
572
- <td><code class="ref">var(--color-neutral-950)</code></td>
614
+ <td><code class="ref">var(--color-white)</code></td>
573
615
  </tr>
574
616
  <tr>
575
617
  <td><code>--color-danger-subtle</code></td>
576
618
  <td><span class="dot" style="background: var(--color-danger-subtle)"></span></td>
577
- <td><code class="ref">var(--color-danger-50)</code></td>
578
- <td><code class="ref">var(--color-danger-950)</code></td>
619
+ <td><code class="ref">var(--color-danger-100)</code></td>
620
+ <td><code class="ref">var(--color-red-260)</code></td>
579
621
  </tr>
580
622
  <tr>
581
623
  <td><code>--color-danger-on-subtle</code></td>
582
624
  <td><span class="dot" style="background: var(--color-danger-on-subtle)"></span></td>
583
625
  <td><code class="ref">var(--color-danger-700)</code></td>
584
- <td><code class="ref">var(--color-danger-300)</code></td>
626
+ <td><code class="ref">var(--color-red-850)</code></td>
585
627
  </tr>
586
628
  <tr>
587
629
  <td><code>--color-danger-border</code></td>
588
630
  <td><span class="dot" style="background: var(--color-danger-border)"></span></td>
589
631
  <td><code class="ref">var(--color-danger-200)</code></td>
590
- <td><code class="ref">var(--color-danger-800)</code></td>
632
+ <td><code class="ref">var(--color-red-350)</code></td>
591
633
  </tr></tbody>
592
634
  </table>
593
635
 
@@ -649,59 +691,59 @@
649
691
  <code class="val">oklch(0.13 0.036 264)</code>
650
692
  </div></div></section><section><h3>primary</h3><div class="scale">
651
693
  <div class="swatch">
652
- <div class="chip" style="background: oklch(0.97 0.014 259)"></div>
694
+ <div class="chip" style="background: oklch(0.975 0.01 48)"></div>
653
695
  <code class="step">primary-50</code>
654
- <code class="val">oklch(0.97 0.014 259)</code>
696
+ <code class="val">oklch(0.975 0.01 48)</code>
655
697
  </div>
656
698
  <div class="swatch">
657
- <div class="chip" style="background: oklch(0.936 0.03 259)"></div>
699
+ <div class="chip" style="background: oklch(0.95 0.014 48)"></div>
658
700
  <code class="step">primary-100</code>
659
- <code class="val">oklch(0.936 0.03 259)</code>
701
+ <code class="val">oklch(0.95 0.014 48)</code>
660
702
  </div>
661
703
  <div class="swatch">
662
- <div class="chip" style="background: oklch(0.885 0.055 259)"></div>
704
+ <div class="chip" style="background: oklch(0.90 0.02 48)"></div>
663
705
  <code class="step">primary-200</code>
664
- <code class="val">oklch(0.885 0.055 259)</code>
706
+ <code class="val">oklch(0.90 0.02 48)</code>
665
707
  </div>
666
708
  <div class="swatch">
667
- <div class="chip" style="background: oklch(0.809 0.095 259)"></div>
709
+ <div class="chip" style="background: oklch(0.80 0.026 48)"></div>
668
710
  <code class="step">primary-300</code>
669
- <code class="val">oklch(0.809 0.095 259)</code>
711
+ <code class="val">oklch(0.80 0.026 48)</code>
670
712
  </div>
671
713
  <div class="swatch">
672
- <div class="chip" style="background: oklch(0.715 0.147 259)"></div>
714
+ <div class="chip" style="background: oklch(0.68 0.032 48)"></div>
673
715
  <code class="step">primary-400</code>
674
- <code class="val">oklch(0.715 0.147 259)</code>
716
+ <code class="val">oklch(0.68 0.032 48)</code>
675
717
  </div>
676
718
  <div class="swatch">
677
- <div class="chip" style="background: oklch(0.623 0.201 259)"></div>
719
+ <div class="chip" style="background: oklch(0.50 0.036 48)"></div>
678
720
  <code class="step">primary-500</code>
679
- <code class="val">oklch(0.623 0.201 259)</code>
721
+ <code class="val">oklch(0.50 0.036 48)</code>
680
722
  </div>
681
723
  <div class="swatch">
682
- <div class="chip" style="background: oklch(0.546 0.209 259)"></div>
724
+ <div class="chip" style="background: oklch(0.40 0.037 48)"></div>
683
725
  <code class="step">primary-600</code>
684
- <code class="val">oklch(0.546 0.209 259)</code>
726
+ <code class="val">oklch(0.40 0.037 48)</code>
685
727
  </div>
686
728
  <div class="swatch">
687
- <div class="chip" style="background: oklch(0.488 0.187 259)"></div>
729
+ <div class="chip" style="background: oklch(0.35 0.037 48)"></div>
688
730
  <code class="step">primary-700</code>
689
- <code class="val">oklch(0.488 0.187 259)</code>
731
+ <code class="val">oklch(0.35 0.037 48)</code>
690
732
  </div>
691
733
  <div class="swatch">
692
- <div class="chip" style="background: oklch(0.442 0.165 259)"></div>
734
+ <div class="chip" style="background: oklch(0.31 0.038 48)"></div>
693
735
  <code class="step">primary-800</code>
694
- <code class="val">oklch(0.442 0.165 259)</code>
736
+ <code class="val">oklch(0.31 0.038 48)</code>
695
737
  </div>
696
738
  <div class="swatch">
697
- <div class="chip" style="background: oklch(0.396 0.135 259)"></div>
739
+ <div class="chip" style="background: oklch(0.26 0.032 48)"></div>
698
740
  <code class="step">primary-900</code>
699
- <code class="val">oklch(0.396 0.135 259)</code>
741
+ <code class="val">oklch(0.26 0.032 48)</code>
700
742
  </div>
701
743
  <div class="swatch">
702
- <div class="chip" style="background: oklch(0.282 0.086 259)"></div>
744
+ <div class="chip" style="background: oklch(0.18 0.024 48)"></div>
703
745
  <code class="step">primary-950</code>
704
- <code class="val">oklch(0.282 0.086 259)</code>
746
+ <code class="val">oklch(0.18 0.024 48)</code>
705
747
  </div></div></section><section><h3>success</h3><div class="scale">
706
748
  <div class="swatch">
707
749
  <div class="chip" style="background: oklch(0.97 0.014 152)"></div>
@@ -1045,13 +1087,13 @@
1045
1087
  <section><h3>font family</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1046
1088
  <tr>
1047
1089
  <td><code>--font-sans</code></td>
1048
- <td><code class="ref">ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif</code></td>
1049
- <td><span style="font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif">Rows 1&ndash;50</span></td>
1090
+ <td><code class="ref">"Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif</code></td>
1091
+ <td><span style="font-family: "Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif">Rows 1&ndash;50</span></td>
1050
1092
  </tr>
1051
1093
  <tr>
1052
1094
  <td><code>--font-mono</code></td>
1053
- <td><code class="ref">ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace</code></td>
1054
- <td><span style="font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace">Rows 1&ndash;50</span></td>
1095
+ <td><code class="ref">"Geist Mono Variable", Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace</code></td>
1096
+ <td><span style="font-family: "Geist Mono Variable", Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace">Rows 1&ndash;50</span></td>
1055
1097
  </tr></tbody></table></section>
1056
1098
 
1057
1099
  <h2>Radii</h2>
@@ -1063,18 +1105,18 @@
1063
1105
  </tr>
1064
1106
  <tr>
1065
1107
  <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>
1108
+ <td><code class="ref">0.2rem</code></td>
1109
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.2rem"></div></td>
1068
1110
  </tr>
1069
1111
  <tr>
1070
1112
  <td><code>--radius-sm</code></td>
1071
- <td><code class="ref">0.25rem</code></td>
1072
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.25rem"></div></td>
1113
+ <td><code class="ref">0.3rem</code></td>
1114
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.3rem"></div></td>
1073
1115
  </tr>
1074
1116
  <tr>
1075
1117
  <td><code>--radius-md</code></td>
1076
- <td><code class="ref">0.375rem</code></td>
1077
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.375rem"></div></td>
1118
+ <td><code class="ref">0.4rem</code></td>
1119
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.4rem"></div></td>
1078
1120
  </tr>
1079
1121
  <tr>
1080
1122
  <td><code>--radius-lg</code></td>
@@ -1083,8 +1125,8 @@
1083
1125
  </tr>
1084
1126
  <tr>
1085
1127
  <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>
1128
+ <td><code class="ref">0.7rem</code></td>
1129
+ <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.7rem"></div></td>
1088
1130
  </tr>
1089
1131
  <tr>
1090
1132
  <td><code>--radius-full</code></td>
@@ -1126,8 +1168,13 @@
1126
1168
  </tr>
1127
1169
  <tr>
1128
1170
  <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>
1171
+ <td><code class="ref">12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)</code></td>
1172
+ <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>
1173
+ </tr>
1174
+ <tr>
1175
+ <td><code>--shadow-sticky-header</code></td>
1176
+ <td><code class="ref">inset 0 -1px 0 var(--color-border)</code></td>
1177
+ <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
1178
  </tr></tbody></table></section>
1132
1179
 
1133
1180
  <h2>Motion</h2>