@rowkit/tokens 0.3.0 → 1.0.0-beta.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.
@@ -1,1275 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>rowkit design tokens</title>
7
- <style>
8
- :root {
9
- --color-white: oklch(1 0 0);
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%);
52
- --color-neutral-50: oklch(0.984 0.003 264);
53
- --color-neutral-100: oklch(0.968 0.004 264);
54
- --color-neutral-200: oklch(0.928 0.006 264);
55
- --color-neutral-300: oklch(0.869 0.01 264);
56
- --color-neutral-400: oklch(0.704 0.018 264);
57
- --color-neutral-500: oklch(0.551 0.024 264);
58
- --color-neutral-600: oklch(0.446 0.027 264);
59
- --color-neutral-700: oklch(0.373 0.028 264);
60
- --color-neutral-800: oklch(0.279 0.03 264);
61
- --color-neutral-900: oklch(0.21 0.033 264);
62
- --color-neutral-950: oklch(0.13 0.036 264);
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);
74
- --color-success-50: oklch(0.97 0.014 152);
75
- --color-success-100: oklch(0.936 0.036 152);
76
- --color-success-200: oklch(0.885 0.064 152);
77
- --color-success-300: oklch(0.809 0.097 152);
78
- --color-success-400: oklch(0.715 0.145 152);
79
- --color-success-500: oklch(0.623 0.162 152);
80
- --color-success-600: oklch(0.546 0.142 152);
81
- --color-success-700: oklch(0.488 0.127 152);
82
- --color-success-800: oklch(0.442 0.115 152);
83
- --color-success-900: oklch(0.396 0.103 152);
84
- --color-success-950: oklch(0.282 0.073 152);
85
- --color-warning-50: oklch(0.97 0.016 75);
86
- --color-warning-100: oklch(0.936 0.04 75);
87
- --color-warning-200: oklch(0.885 0.071 75);
88
- --color-warning-300: oklch(0.849 0.108 75);
89
- --color-warning-400: oklch(0.785 0.162 75);
90
- --color-warning-500: oklch(0.723 0.15 75);
91
- --color-warning-600: oklch(0.616 0.128 75);
92
- --color-warning-700: oklch(0.528 0.11 75);
93
- --color-warning-800: oklch(0.442 0.092 75);
94
- --color-warning-900: oklch(0.396 0.082 75);
95
- --color-warning-950: oklch(0.282 0.059 75);
96
- --color-danger-50: oklch(0.97 0.014 25);
97
- --color-danger-100: oklch(0.936 0.032 25);
98
- --color-danger-200: oklch(0.885 0.06 25);
99
- --color-danger-300: oklch(0.809 0.107 25);
100
- --color-danger-400: oklch(0.715 0.17 25);
101
- --color-danger-500: oklch(0.623 0.214 25);
102
- --color-danger-600: oklch(0.546 0.218 25);
103
- --color-danger-700: oklch(0.488 0.195 25);
104
- --color-danger-800: oklch(0.442 0.165 25);
105
- --color-danger-900: oklch(0.396 0.135 25);
106
- --color-danger-950: oklch(0.282 0.086 25);
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);
112
- --color-surface-selected: var(--color-primary-50);
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);
134
- --color-primary-subtle: var(--color-primary-50);
135
- --color-primary-on-subtle: var(--color-primary-900);
136
- --color-primary-border: var(--color-primary-200);
137
- --color-success-solid: var(--color-green-550);
138
- --color-success-solid-hover: var(--color-green-520);
139
- --color-success-on-solid: var(--color-white);
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);
151
- --color-danger-on-solid: var(--color-white);
152
- --color-danger-subtle: var(--color-danger-100);
153
- --color-danger-on-subtle: var(--color-danger-700);
154
- --color-danger-border: var(--color-danger-200);
155
- --spacing-0: 0rem;
156
- --spacing-1: 0.25rem;
157
- --spacing-2: 0.5rem;
158
- --spacing-3: 0.75rem;
159
- --spacing-4: 1rem;
160
- --spacing-5: 1.25rem;
161
- --spacing-6: 1.5rem;
162
- --spacing-8: 2rem;
163
- --spacing-10: 2.5rem;
164
- --spacing-12: 3rem;
165
- --spacing-16: 4rem;
166
- --spacing-20: 5rem;
167
- --spacing-24: 6rem;
168
- --spacing-px: 1px;
169
- --radius-none: 0rem;
170
- --radius-xs: 0.2rem;
171
- --radius-sm: 0.3rem;
172
- --radius-md: 0.4rem;
173
- --radius-lg: 0.5rem;
174
- --radius-xl: 0.7rem;
175
- --radius-full: 9999px;
176
- --shadow-none: none;
177
- --shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent);
178
- --shadow-sm: 0 1px 3px 0 color-mix(in oklab, var(--color-shadow) 8%, transparent), 0 1px 2px -1px color-mix(in oklab, var(--color-shadow) 8%, transparent);
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);
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);
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);
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);
184
- --transition-duration-instant: 0ms;
185
- --transition-duration-fast: 120ms;
186
- --transition-duration-normal: 200ms;
187
- --transition-duration-slow: 320ms;
188
- --ease-linear: linear;
189
- --ease-standard: cubic-bezier(0.2, 0, 0, 1);
190
- --ease-enter: cubic-bezier(0, 0, 0.2, 1);
191
- --ease-exit: cubic-bezier(0.4, 0, 1, 1);
192
- --z-index-base: 0;
193
- --z-index-sticky: 100;
194
- --z-index-dropdown: 200;
195
- --z-index-overlay: 300;
196
- --z-index-modal: 400;
197
- --z-index-popover: 500;
198
- --z-index-toast: 600;
199
- --z-index-tooltip: 700;
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;
202
- --text-xs: 0.75rem;
203
- --text-xs--line-height: 1rem;
204
- --text-sm: 0.875rem;
205
- --text-sm--line-height: 1.25rem;
206
- --text-base: 1rem;
207
- --text-base--line-height: 1.5rem;
208
- --text-lg: 1.125rem;
209
- --text-lg--line-height: 1.75rem;
210
- --text-xl: 1.25rem;
211
- --text-xl--line-height: 1.75rem;
212
- --text-2xl: 1.5rem;
213
- --text-2xl--line-height: 2rem;
214
- --text-3xl: 1.875rem;
215
- --text-3xl--line-height: 2.25rem;
216
- --font-weight-normal: 400;
217
- --font-weight-medium: 500;
218
- --font-weight-semibold: 600;
219
- --font-weight-bold: 700;
220
- --tracking-tight: -0.015em;
221
- --tracking-normal: 0em;
222
- --tracking-wide: 0.04em;
223
- --leading-none: 1;
224
- --leading-tight: 1.25;
225
- --leading-snug: 1.375;
226
- --leading-normal: 1.5;
227
- --leading-relaxed: 1.625;
228
- }
229
- .dark {
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);
247
- --color-shadow: var(--color-black);
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);
278
- }
279
- * { box-sizing: border-box; }
280
- body {
281
- margin: 0;
282
- padding: var(--spacing-8);
283
- font-family: var(--font-sans);
284
- font-size: var(--text-sm, 0.875rem);
285
- background: var(--color-background);
286
- color: var(--color-foreground);
287
- transition: background var(--transition-duration-normal) var(--ease-standard);
288
- }
289
- header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-8); }
290
- h1 { font-size: 1.5rem; font-weight: var(--font-weight-bold); margin: 0; }
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); }
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); }
293
- code { font-family: var(--font-mono); font-size: 0.75rem; }
294
- button {
295
- font: inherit; font-weight: var(--font-weight-medium); cursor: pointer;
296
- padding: var(--spacing-2) var(--spacing-4);
297
- border-radius: var(--radius-sm);
298
- border: 1px solid var(--color-input);
299
- background: var(--color-card); color: var(--color-foreground);
300
- }
301
- button:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
302
- .scale { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--spacing-2); }
303
- .swatch { display: flex; flex-direction: column; gap: var(--spacing-1); }
304
- .chip { height: 56px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
305
- .step { font-weight: var(--font-weight-medium); }
306
- .val, .ref { color: var(--color-muted-foreground); }
307
- table { width: 100%; border-collapse: collapse; }
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); }
309
- td { padding: var(--spacing-2); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; }
310
- tbody tr:hover { background: var(--color-accent); }
311
- .dot { display: inline-block; width: 28px; height: 20px; border-radius: var(--radius-xs); border: 1px solid var(--color-border); }
312
- .demo-box { background: var(--color-card); border: 1px solid var(--color-border); }
313
- .status-row { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
314
- .solid { padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-sm); font-weight: var(--font-weight-medium); }
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; }
316
- </style>
317
- </head>
318
- <body>
319
- <header>
320
- <div>
321
- <h1>rowkit design tokens</h1>
322
- <p style="color: var(--color-muted-foreground); margin: var(--spacing-1) 0 0">
323
- Generated from <code>@rowkit/tokens</code>. Every value below comes from the same
324
- source the components consume.
325
- </p>
326
- </div>
327
- <button id="toggle" type="button" aria-pressed="false">Toggle dark mode</button>
328
- </header>
329
-
330
- <h2>Status colours in context</h2>
331
- <div class="status-row">
332
- <span class="solid" style="background: var(--color-primary-solid); color: var(--color-primary-on-solid)">primary solid</span><span class="solid" style="background: var(--color-success-solid); color: var(--color-success-on-solid)">success solid</span><span class="solid" style="background: var(--color-warning-solid); color: var(--color-warning-on-solid)">warning solid</span><span class="solid" style="background: var(--color-danger-solid); color: var(--color-danger-on-solid)">danger solid</span>
333
- </div>
334
- <div class="status-row" style="margin-top: var(--spacing-3)">
335
- <span class="subtle" style="background: var(--color-primary-subtle); color: var(--color-primary-on-subtle); border-color: var(--color-primary-border)">primary subtle</span><span class="subtle" style="background: var(--color-success-subtle); color: var(--color-success-on-subtle); border-color: var(--color-success-border)">success subtle</span><span class="subtle" style="background: var(--color-warning-subtle); color: var(--color-warning-on-subtle); border-color: var(--color-warning-border)">warning subtle</span><span class="subtle" style="background: var(--color-danger-subtle); color: var(--color-danger-on-subtle); border-color: var(--color-danger-border)">danger subtle</span>
336
- </div>
337
-
338
- <h2>Semantic colours</h2>
339
- <p style="color: var(--color-muted-foreground)">
340
- Semantic tokens never hold a literal colour — each points at a primitive, which is what
341
- lets the theme flip without any value being redefined.
342
- </p>
343
- <table>
344
- <thead><tr><th>token</th><th>current</th><th>light &rarr;</th><th>dark &rarr;</th></tr></thead>
345
- <tbody>
346
- <tr>
347
- <td><code>--color-background</code></td>
348
- <td><span class="dot" style="background: var(--color-background)"></span></td>
349
- <td><code class="ref">var(--color-gray-988)</code></td>
350
- <td><code class="ref">var(--color-gray-145)</code></td>
351
- </tr>
352
- <tr>
353
- <td><code>--color-card</code></td>
354
- <td><span class="dot" style="background: var(--color-card)"></span></td>
355
- <td><code class="ref">var(--color-white)</code></td>
356
- <td><code class="ref">var(--color-gray-205)</code></td>
357
- </tr>
358
- <tr>
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>
363
- </tr>
364
- <tr>
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>
369
- </tr>
370
- <tr>
371
- <td><code>--color-surface-active</code></td>
372
- <td><span class="dot" style="background: var(--color-surface-active)"></span></td>
373
- <td><code class="ref">var(--color-gray-940)</code></td>
374
- <td><code class="ref">var(--color-gray-371)</code></td>
375
- </tr>
376
- <tr>
377
- <td><code>--color-surface-selected</code></td>
378
- <td><span class="dot" style="background: var(--color-surface-selected)"></span></td>
379
- <td><code class="ref">var(--color-primary-50)</code></td>
380
- <td><code class="ref">var(--color-gray-269)</code></td>
381
- </tr>
382
- <tr>
383
- <td><code>--color-surface-disabled</code></td>
384
- <td><span class="dot" style="background: var(--color-surface-disabled)"></span></td>
385
- <td><code class="ref">var(--color-gray-972)</code></td>
386
- <td><code class="ref">var(--color-gray-269)</code></td>
387
- </tr>
388
- <tr>
389
- <td><code>--color-skeleton</code></td>
390
- <td><span class="dot" style="background: var(--color-skeleton)"></span></td>
391
- <td><code class="ref">var(--color-gray-972)</code></td>
392
- <td><code class="ref">var(--color-gray-269)</code></td>
393
- </tr>
394
- <tr>
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>
399
- </tr>
400
- <tr>
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>
405
- </tr>
406
- <tr>
407
- <td><code>--color-text-subtle</code></td>
408
- <td><span class="dot" style="background: var(--color-text-subtle)"></span></td>
409
- <td><code class="ref">var(--color-gray-635)</code></td>
410
- <td><code class="ref">var(--color-gray-556)</code></td>
411
- </tr>
412
- <tr>
413
- <td><code>--color-text-disabled</code></td>
414
- <td><span class="dot" style="background: var(--color-text-disabled)"></span></td>
415
- <td><code class="ref">var(--color-gray-708)</code></td>
416
- <td><code class="ref">var(--color-gray-556)</code></td>
417
- </tr>
418
- <tr>
419
- <td><code>--color-border</code></td>
420
- <td><span class="dot" style="background: var(--color-border)"></span></td>
421
- <td><code class="ref">var(--color-gray-940)</code></td>
422
- <td><code class="ref">var(--color-white-alpha-8)</code></td>
423
- </tr>
424
- <tr>
425
- <td><code>--color-border-strong</code></td>
426
- <td><span class="dot" style="background: var(--color-border-strong)"></span></td>
427
- <td><code class="ref">var(--color-gray-905)</code></td>
428
- <td><code class="ref">var(--color-white-alpha-15)</code></td>
429
- </tr>
430
- <tr>
431
- <td><code>--color-border-subtle</code></td>
432
- <td><span class="dot" style="background: var(--color-border-subtle)"></span></td>
433
- <td><code class="ref">var(--color-gray-972)</code></td>
434
- <td><code class="ref">var(--color-white-alpha-8)</code></td>
435
- </tr>
436
- <tr>
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>
441
- </tr>
442
- <tr>
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>
447
- </tr>
448
- <tr>
449
- <td><code>--color-shadow</code></td>
450
- <td><span class="dot" style="background: var(--color-shadow)"></span></td>
451
- <td><code class="ref">var(--color-black)</code></td>
452
- <td><code class="ref">var(--color-black)</code></td>
453
- </tr>
454
- <tr>
455
- <td><code>--color-neutral-solid</code></td>
456
- <td><span class="dot" style="background: var(--color-neutral-solid)"></span></td>
457
- <td><code class="ref">var(--color-gray-972)</code></td>
458
- <td><code class="ref">var(--color-gray-269)</code></td>
459
- </tr>
460
- <tr>
461
- <td><code>--color-neutral-solid-hover</code></td>
462
- <td><span class="dot" style="background: var(--color-neutral-solid-hover)"></span></td>
463
- <td><code class="ref">var(--color-gray-940)</code></td>
464
- <td><code class="ref">var(--color-gray-371)</code></td>
465
- </tr>
466
- <tr>
467
- <td><code>--color-neutral-on-solid</code></td>
468
- <td><span class="dot" style="background: var(--color-neutral-on-solid)"></span></td>
469
- <td><code class="ref">var(--color-gray-205)</code></td>
470
- <td><code class="ref">var(--color-gray-985)</code></td>
471
- </tr>
472
- <tr>
473
- <td><code>--color-neutral-subtle</code></td>
474
- <td><span class="dot" style="background: var(--color-neutral-subtle)"></span></td>
475
- <td><code class="ref">var(--color-gray-972)</code></td>
476
- <td><code class="ref">var(--color-gray-269)</code></td>
477
- </tr>
478
- <tr>
479
- <td><code>--color-neutral-on-subtle</code></td>
480
- <td><span class="dot" style="background: var(--color-neutral-on-subtle)"></span></td>
481
- <td><code class="ref">var(--color-gray-205)</code></td>
482
- <td><code class="ref">var(--color-gray-985)</code></td>
483
- </tr>
484
- <tr>
485
- <td><code>--color-neutral-border</code></td>
486
- <td><span class="dot" style="background: var(--color-neutral-border)"></span></td>
487
- <td><code class="ref">var(--color-gray-940)</code></td>
488
- <td><code class="ref">var(--color-gray-371)</code></td>
489
- </tr>
490
- <tr>
491
- <td><code>--color-primary-solid</code></td>
492
- <td><span class="dot" style="background: var(--color-primary-solid)"></span></td>
493
- <td><code class="ref">var(--color-primary-800)</code></td>
494
- <td><code class="ref">var(--color-primary-100)</code></td>
495
- </tr>
496
- <tr>
497
- <td><code>--color-primary-solid-hover</code></td>
498
- <td><span class="dot" style="background: var(--color-primary-solid-hover)"></span></td>
499
- <td><code class="ref">var(--color-primary-900)</code></td>
500
- <td><code class="ref">var(--color-primary-50)</code></td>
501
- </tr>
502
- <tr>
503
- <td><code>--color-primary-on-solid</code></td>
504
- <td><span class="dot" style="background: var(--color-primary-on-solid)"></span></td>
505
- <td><code class="ref">var(--color-gray-985)</code></td>
506
- <td><code class="ref">var(--color-primary-900)</code></td>
507
- </tr>
508
- <tr>
509
- <td><code>--color-primary-subtle</code></td>
510
- <td><span class="dot" style="background: var(--color-primary-subtle)"></span></td>
511
- <td><code class="ref">var(--color-primary-50)</code></td>
512
- <td><code class="ref">var(--color-primary-900)</code></td>
513
- </tr>
514
- <tr>
515
- <td><code>--color-primary-on-subtle</code></td>
516
- <td><span class="dot" style="background: var(--color-primary-on-subtle)"></span></td>
517
- <td><code class="ref">var(--color-primary-900)</code></td>
518
- <td><code class="ref">var(--color-primary-200)</code></td>
519
- </tr>
520
- <tr>
521
- <td><code>--color-primary-border</code></td>
522
- <td><span class="dot" style="background: var(--color-primary-border)"></span></td>
523
- <td><code class="ref">var(--color-primary-200)</code></td>
524
- <td><code class="ref">var(--color-primary-700)</code></td>
525
- </tr>
526
- <tr>
527
- <td><code>--color-success-solid</code></td>
528
- <td><span class="dot" style="background: var(--color-success-solid)"></span></td>
529
- <td><code class="ref">var(--color-green-550)</code></td>
530
- <td><code class="ref">var(--color-green-550)</code></td>
531
- </tr>
532
- <tr>
533
- <td><code>--color-success-solid-hover</code></td>
534
- <td><span class="dot" style="background: var(--color-success-solid-hover)"></span></td>
535
- <td><code class="ref">var(--color-green-520)</code></td>
536
- <td><code class="ref">var(--color-green-520)</code></td>
537
- </tr>
538
- <tr>
539
- <td><code>--color-success-on-solid</code></td>
540
- <td><span class="dot" style="background: var(--color-success-on-solid)"></span></td>
541
- <td><code class="ref">var(--color-white)</code></td>
542
- <td><code class="ref">var(--color-white)</code></td>
543
- </tr>
544
- <tr>
545
- <td><code>--color-success-subtle</code></td>
546
- <td><span class="dot" style="background: var(--color-success-subtle)"></span></td>
547
- <td><code class="ref">var(--color-green-950)</code></td>
548
- <td><code class="ref">var(--color-green-260)</code></td>
549
- </tr>
550
- <tr>
551
- <td><code>--color-success-on-subtle</code></td>
552
- <td><span class="dot" style="background: var(--color-success-on-subtle)"></span></td>
553
- <td><code class="ref">var(--color-green-400)</code></td>
554
- <td><code class="ref">var(--color-green-850)</code></td>
555
- </tr>
556
- <tr>
557
- <td><code>--color-success-border</code></td>
558
- <td><span class="dot" style="background: var(--color-success-border)"></span></td>
559
- <td><code class="ref">var(--color-green-880)</code></td>
560
- <td><code class="ref">var(--color-green-350)</code></td>
561
- </tr>
562
- <tr>
563
- <td><code>--color-warning-solid</code></td>
564
- <td><span class="dot" style="background: var(--color-warning-solid)"></span></td>
565
- <td><code class="ref">var(--color-amber-550)</code></td>
566
- <td><code class="ref">var(--color-amber-550)</code></td>
567
- </tr>
568
- <tr>
569
- <td><code>--color-warning-solid-hover</code></td>
570
- <td><span class="dot" style="background: var(--color-warning-solid-hover)"></span></td>
571
- <td><code class="ref">var(--color-amber-520)</code></td>
572
- <td><code class="ref">var(--color-amber-520)</code></td>
573
- </tr>
574
- <tr>
575
- <td><code>--color-warning-on-solid</code></td>
576
- <td><span class="dot" style="background: var(--color-warning-on-solid)"></span></td>
577
- <td><code class="ref">var(--color-white)</code></td>
578
- <td><code class="ref">var(--color-white)</code></td>
579
- </tr>
580
- <tr>
581
- <td><code>--color-warning-subtle</code></td>
582
- <td><span class="dot" style="background: var(--color-warning-subtle)"></span></td>
583
- <td><code class="ref">var(--color-amber-950)</code></td>
584
- <td><code class="ref">var(--color-amber-260)</code></td>
585
- </tr>
586
- <tr>
587
- <td><code>--color-warning-on-subtle</code></td>
588
- <td><span class="dot" style="background: var(--color-warning-on-subtle)"></span></td>
589
- <td><code class="ref">var(--color-amber-400)</code></td>
590
- <td><code class="ref">var(--color-amber-850)</code></td>
591
- </tr>
592
- <tr>
593
- <td><code>--color-warning-border</code></td>
594
- <td><span class="dot" style="background: var(--color-warning-border)"></span></td>
595
- <td><code class="ref">var(--color-amber-880)</code></td>
596
- <td><code class="ref">var(--color-amber-350)</code></td>
597
- </tr>
598
- <tr>
599
- <td><code>--color-danger-solid</code></td>
600
- <td><span class="dot" style="background: var(--color-danger-solid)"></span></td>
601
- <td><code class="ref">var(--color-red-577)</code></td>
602
- <td><code class="ref">var(--color-red-577)</code></td>
603
- </tr>
604
- <tr>
605
- <td><code>--color-danger-solid-hover</code></td>
606
- <td><span class="dot" style="background: var(--color-danger-solid-hover)"></span></td>
607
- <td><code class="ref">var(--color-red-520)</code></td>
608
- <td><code class="ref">var(--color-red-520)</code></td>
609
- </tr>
610
- <tr>
611
- <td><code>--color-danger-on-solid</code></td>
612
- <td><span class="dot" style="background: var(--color-danger-on-solid)"></span></td>
613
- <td><code class="ref">var(--color-white)</code></td>
614
- <td><code class="ref">var(--color-white)</code></td>
615
- </tr>
616
- <tr>
617
- <td><code>--color-danger-subtle</code></td>
618
- <td><span class="dot" style="background: var(--color-danger-subtle)"></span></td>
619
- <td><code class="ref">var(--color-danger-100)</code></td>
620
- <td><code class="ref">var(--color-red-260)</code></td>
621
- </tr>
622
- <tr>
623
- <td><code>--color-danger-on-subtle</code></td>
624
- <td><span class="dot" style="background: var(--color-danger-on-subtle)"></span></td>
625
- <td><code class="ref">var(--color-danger-700)</code></td>
626
- <td><code class="ref">var(--color-red-850)</code></td>
627
- </tr>
628
- <tr>
629
- <td><code>--color-danger-border</code></td>
630
- <td><span class="dot" style="background: var(--color-danger-border)"></span></td>
631
- <td><code class="ref">var(--color-danger-200)</code></td>
632
- <td><code class="ref">var(--color-red-350)</code></td>
633
- </tr></tbody>
634
- </table>
635
-
636
- <h2>Colour primitives</h2>
637
- <section><h3>neutral</h3><div class="scale">
638
- <div class="swatch">
639
- <div class="chip" style="background: oklch(0.984 0.003 264)"></div>
640
- <code class="step">neutral-50</code>
641
- <code class="val">oklch(0.984 0.003 264)</code>
642
- </div>
643
- <div class="swatch">
644
- <div class="chip" style="background: oklch(0.968 0.004 264)"></div>
645
- <code class="step">neutral-100</code>
646
- <code class="val">oklch(0.968 0.004 264)</code>
647
- </div>
648
- <div class="swatch">
649
- <div class="chip" style="background: oklch(0.928 0.006 264)"></div>
650
- <code class="step">neutral-200</code>
651
- <code class="val">oklch(0.928 0.006 264)</code>
652
- </div>
653
- <div class="swatch">
654
- <div class="chip" style="background: oklch(0.869 0.01 264)"></div>
655
- <code class="step">neutral-300</code>
656
- <code class="val">oklch(0.869 0.01 264)</code>
657
- </div>
658
- <div class="swatch">
659
- <div class="chip" style="background: oklch(0.704 0.018 264)"></div>
660
- <code class="step">neutral-400</code>
661
- <code class="val">oklch(0.704 0.018 264)</code>
662
- </div>
663
- <div class="swatch">
664
- <div class="chip" style="background: oklch(0.551 0.024 264)"></div>
665
- <code class="step">neutral-500</code>
666
- <code class="val">oklch(0.551 0.024 264)</code>
667
- </div>
668
- <div class="swatch">
669
- <div class="chip" style="background: oklch(0.446 0.027 264)"></div>
670
- <code class="step">neutral-600</code>
671
- <code class="val">oklch(0.446 0.027 264)</code>
672
- </div>
673
- <div class="swatch">
674
- <div class="chip" style="background: oklch(0.373 0.028 264)"></div>
675
- <code class="step">neutral-700</code>
676
- <code class="val">oklch(0.373 0.028 264)</code>
677
- </div>
678
- <div class="swatch">
679
- <div class="chip" style="background: oklch(0.279 0.03 264)"></div>
680
- <code class="step">neutral-800</code>
681
- <code class="val">oklch(0.279 0.03 264)</code>
682
- </div>
683
- <div class="swatch">
684
- <div class="chip" style="background: oklch(0.21 0.033 264)"></div>
685
- <code class="step">neutral-900</code>
686
- <code class="val">oklch(0.21 0.033 264)</code>
687
- </div>
688
- <div class="swatch">
689
- <div class="chip" style="background: oklch(0.13 0.036 264)"></div>
690
- <code class="step">neutral-950</code>
691
- <code class="val">oklch(0.13 0.036 264)</code>
692
- </div></div></section><section><h3>primary</h3><div class="scale">
693
- <div class="swatch">
694
- <div class="chip" style="background: oklch(0.975 0.01 48)"></div>
695
- <code class="step">primary-50</code>
696
- <code class="val">oklch(0.975 0.01 48)</code>
697
- </div>
698
- <div class="swatch">
699
- <div class="chip" style="background: oklch(0.95 0.014 48)"></div>
700
- <code class="step">primary-100</code>
701
- <code class="val">oklch(0.95 0.014 48)</code>
702
- </div>
703
- <div class="swatch">
704
- <div class="chip" style="background: oklch(0.90 0.02 48)"></div>
705
- <code class="step">primary-200</code>
706
- <code class="val">oklch(0.90 0.02 48)</code>
707
- </div>
708
- <div class="swatch">
709
- <div class="chip" style="background: oklch(0.80 0.026 48)"></div>
710
- <code class="step">primary-300</code>
711
- <code class="val">oklch(0.80 0.026 48)</code>
712
- </div>
713
- <div class="swatch">
714
- <div class="chip" style="background: oklch(0.68 0.032 48)"></div>
715
- <code class="step">primary-400</code>
716
- <code class="val">oklch(0.68 0.032 48)</code>
717
- </div>
718
- <div class="swatch">
719
- <div class="chip" style="background: oklch(0.50 0.036 48)"></div>
720
- <code class="step">primary-500</code>
721
- <code class="val">oklch(0.50 0.036 48)</code>
722
- </div>
723
- <div class="swatch">
724
- <div class="chip" style="background: oklch(0.40 0.037 48)"></div>
725
- <code class="step">primary-600</code>
726
- <code class="val">oklch(0.40 0.037 48)</code>
727
- </div>
728
- <div class="swatch">
729
- <div class="chip" style="background: oklch(0.35 0.037 48)"></div>
730
- <code class="step">primary-700</code>
731
- <code class="val">oklch(0.35 0.037 48)</code>
732
- </div>
733
- <div class="swatch">
734
- <div class="chip" style="background: oklch(0.31 0.038 48)"></div>
735
- <code class="step">primary-800</code>
736
- <code class="val">oklch(0.31 0.038 48)</code>
737
- </div>
738
- <div class="swatch">
739
- <div class="chip" style="background: oklch(0.26 0.032 48)"></div>
740
- <code class="step">primary-900</code>
741
- <code class="val">oklch(0.26 0.032 48)</code>
742
- </div>
743
- <div class="swatch">
744
- <div class="chip" style="background: oklch(0.18 0.024 48)"></div>
745
- <code class="step">primary-950</code>
746
- <code class="val">oklch(0.18 0.024 48)</code>
747
- </div></div></section><section><h3>success</h3><div class="scale">
748
- <div class="swatch">
749
- <div class="chip" style="background: oklch(0.97 0.014 152)"></div>
750
- <code class="step">success-50</code>
751
- <code class="val">oklch(0.97 0.014 152)</code>
752
- </div>
753
- <div class="swatch">
754
- <div class="chip" style="background: oklch(0.936 0.036 152)"></div>
755
- <code class="step">success-100</code>
756
- <code class="val">oklch(0.936 0.036 152)</code>
757
- </div>
758
- <div class="swatch">
759
- <div class="chip" style="background: oklch(0.885 0.064 152)"></div>
760
- <code class="step">success-200</code>
761
- <code class="val">oklch(0.885 0.064 152)</code>
762
- </div>
763
- <div class="swatch">
764
- <div class="chip" style="background: oklch(0.809 0.097 152)"></div>
765
- <code class="step">success-300</code>
766
- <code class="val">oklch(0.809 0.097 152)</code>
767
- </div>
768
- <div class="swatch">
769
- <div class="chip" style="background: oklch(0.715 0.145 152)"></div>
770
- <code class="step">success-400</code>
771
- <code class="val">oklch(0.715 0.145 152)</code>
772
- </div>
773
- <div class="swatch">
774
- <div class="chip" style="background: oklch(0.623 0.162 152)"></div>
775
- <code class="step">success-500</code>
776
- <code class="val">oklch(0.623 0.162 152)</code>
777
- </div>
778
- <div class="swatch">
779
- <div class="chip" style="background: oklch(0.546 0.142 152)"></div>
780
- <code class="step">success-600</code>
781
- <code class="val">oklch(0.546 0.142 152)</code>
782
- </div>
783
- <div class="swatch">
784
- <div class="chip" style="background: oklch(0.488 0.127 152)"></div>
785
- <code class="step">success-700</code>
786
- <code class="val">oklch(0.488 0.127 152)</code>
787
- </div>
788
- <div class="swatch">
789
- <div class="chip" style="background: oklch(0.442 0.115 152)"></div>
790
- <code class="step">success-800</code>
791
- <code class="val">oklch(0.442 0.115 152)</code>
792
- </div>
793
- <div class="swatch">
794
- <div class="chip" style="background: oklch(0.396 0.103 152)"></div>
795
- <code class="step">success-900</code>
796
- <code class="val">oklch(0.396 0.103 152)</code>
797
- </div>
798
- <div class="swatch">
799
- <div class="chip" style="background: oklch(0.282 0.073 152)"></div>
800
- <code class="step">success-950</code>
801
- <code class="val">oklch(0.282 0.073 152)</code>
802
- </div></div></section><section><h3>warning</h3><div class="scale">
803
- <div class="swatch">
804
- <div class="chip" style="background: oklch(0.97 0.016 75)"></div>
805
- <code class="step">warning-50</code>
806
- <code class="val">oklch(0.97 0.016 75)</code>
807
- </div>
808
- <div class="swatch">
809
- <div class="chip" style="background: oklch(0.936 0.04 75)"></div>
810
- <code class="step">warning-100</code>
811
- <code class="val">oklch(0.936 0.04 75)</code>
812
- </div>
813
- <div class="swatch">
814
- <div class="chip" style="background: oklch(0.885 0.071 75)"></div>
815
- <code class="step">warning-200</code>
816
- <code class="val">oklch(0.885 0.071 75)</code>
817
- </div>
818
- <div class="swatch">
819
- <div class="chip" style="background: oklch(0.849 0.108 75)"></div>
820
- <code class="step">warning-300</code>
821
- <code class="val">oklch(0.849 0.108 75)</code>
822
- </div>
823
- <div class="swatch">
824
- <div class="chip" style="background: oklch(0.785 0.162 75)"></div>
825
- <code class="step">warning-400</code>
826
- <code class="val">oklch(0.785 0.162 75)</code>
827
- </div>
828
- <div class="swatch">
829
- <div class="chip" style="background: oklch(0.723 0.15 75)"></div>
830
- <code class="step">warning-500</code>
831
- <code class="val">oklch(0.723 0.15 75)</code>
832
- </div>
833
- <div class="swatch">
834
- <div class="chip" style="background: oklch(0.616 0.128 75)"></div>
835
- <code class="step">warning-600</code>
836
- <code class="val">oklch(0.616 0.128 75)</code>
837
- </div>
838
- <div class="swatch">
839
- <div class="chip" style="background: oklch(0.528 0.11 75)"></div>
840
- <code class="step">warning-700</code>
841
- <code class="val">oklch(0.528 0.11 75)</code>
842
- </div>
843
- <div class="swatch">
844
- <div class="chip" style="background: oklch(0.442 0.092 75)"></div>
845
- <code class="step">warning-800</code>
846
- <code class="val">oklch(0.442 0.092 75)</code>
847
- </div>
848
- <div class="swatch">
849
- <div class="chip" style="background: oklch(0.396 0.082 75)"></div>
850
- <code class="step">warning-900</code>
851
- <code class="val">oklch(0.396 0.082 75)</code>
852
- </div>
853
- <div class="swatch">
854
- <div class="chip" style="background: oklch(0.282 0.059 75)"></div>
855
- <code class="step">warning-950</code>
856
- <code class="val">oklch(0.282 0.059 75)</code>
857
- </div></div></section><section><h3>danger</h3><div class="scale">
858
- <div class="swatch">
859
- <div class="chip" style="background: oklch(0.97 0.014 25)"></div>
860
- <code class="step">danger-50</code>
861
- <code class="val">oklch(0.97 0.014 25)</code>
862
- </div>
863
- <div class="swatch">
864
- <div class="chip" style="background: oklch(0.936 0.032 25)"></div>
865
- <code class="step">danger-100</code>
866
- <code class="val">oklch(0.936 0.032 25)</code>
867
- </div>
868
- <div class="swatch">
869
- <div class="chip" style="background: oklch(0.885 0.06 25)"></div>
870
- <code class="step">danger-200</code>
871
- <code class="val">oklch(0.885 0.06 25)</code>
872
- </div>
873
- <div class="swatch">
874
- <div class="chip" style="background: oklch(0.809 0.107 25)"></div>
875
- <code class="step">danger-300</code>
876
- <code class="val">oklch(0.809 0.107 25)</code>
877
- </div>
878
- <div class="swatch">
879
- <div class="chip" style="background: oklch(0.715 0.17 25)"></div>
880
- <code class="step">danger-400</code>
881
- <code class="val">oklch(0.715 0.17 25)</code>
882
- </div>
883
- <div class="swatch">
884
- <div class="chip" style="background: oklch(0.623 0.214 25)"></div>
885
- <code class="step">danger-500</code>
886
- <code class="val">oklch(0.623 0.214 25)</code>
887
- </div>
888
- <div class="swatch">
889
- <div class="chip" style="background: oklch(0.546 0.218 25)"></div>
890
- <code class="step">danger-600</code>
891
- <code class="val">oklch(0.546 0.218 25)</code>
892
- </div>
893
- <div class="swatch">
894
- <div class="chip" style="background: oklch(0.488 0.195 25)"></div>
895
- <code class="step">danger-700</code>
896
- <code class="val">oklch(0.488 0.195 25)</code>
897
- </div>
898
- <div class="swatch">
899
- <div class="chip" style="background: oklch(0.442 0.165 25)"></div>
900
- <code class="step">danger-800</code>
901
- <code class="val">oklch(0.442 0.165 25)</code>
902
- </div>
903
- <div class="swatch">
904
- <div class="chip" style="background: oklch(0.396 0.135 25)"></div>
905
- <code class="step">danger-900</code>
906
- <code class="val">oklch(0.396 0.135 25)</code>
907
- </div>
908
- <div class="swatch">
909
- <div class="chip" style="background: oklch(0.282 0.086 25)"></div>
910
- <code class="step">danger-950</code>
911
- <code class="val">oklch(0.282 0.086 25)</code>
912
- </div></div></section>
913
-
914
- <h2>Spacing</h2>
915
- <section><h3>spacing</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
916
- <tr>
917
- <td><code>--spacing-0</code></td>
918
- <td><code class="ref">0rem</code></td>
919
- <td><div style="height: 12px; width: 0rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
920
- </tr>
921
- <tr>
922
- <td><code>--spacing-1</code></td>
923
- <td><code class="ref">0.25rem</code></td>
924
- <td><div style="height: 12px; width: 0.25rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
925
- </tr>
926
- <tr>
927
- <td><code>--spacing-2</code></td>
928
- <td><code class="ref">0.5rem</code></td>
929
- <td><div style="height: 12px; width: 0.5rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
930
- </tr>
931
- <tr>
932
- <td><code>--spacing-3</code></td>
933
- <td><code class="ref">0.75rem</code></td>
934
- <td><div style="height: 12px; width: 0.75rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
935
- </tr>
936
- <tr>
937
- <td><code>--spacing-4</code></td>
938
- <td><code class="ref">1rem</code></td>
939
- <td><div style="height: 12px; width: 1rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
940
- </tr>
941
- <tr>
942
- <td><code>--spacing-5</code></td>
943
- <td><code class="ref">1.25rem</code></td>
944
- <td><div style="height: 12px; width: 1.25rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
945
- </tr>
946
- <tr>
947
- <td><code>--spacing-6</code></td>
948
- <td><code class="ref">1.5rem</code></td>
949
- <td><div style="height: 12px; width: 1.5rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
950
- </tr>
951
- <tr>
952
- <td><code>--spacing-8</code></td>
953
- <td><code class="ref">2rem</code></td>
954
- <td><div style="height: 12px; width: 2rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
955
- </tr>
956
- <tr>
957
- <td><code>--spacing-10</code></td>
958
- <td><code class="ref">2.5rem</code></td>
959
- <td><div style="height: 12px; width: 2.5rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
960
- </tr>
961
- <tr>
962
- <td><code>--spacing-12</code></td>
963
- <td><code class="ref">3rem</code></td>
964
- <td><div style="height: 12px; width: 3rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
965
- </tr>
966
- <tr>
967
- <td><code>--spacing-16</code></td>
968
- <td><code class="ref">4rem</code></td>
969
- <td><div style="height: 12px; width: 4rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
970
- </tr>
971
- <tr>
972
- <td><code>--spacing-20</code></td>
973
- <td><code class="ref">5rem</code></td>
974
- <td><div style="height: 12px; width: 5rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
975
- </tr>
976
- <tr>
977
- <td><code>--spacing-24</code></td>
978
- <td><code class="ref">6rem</code></td>
979
- <td><div style="height: 12px; width: 6rem; background: var(--color-primary-solid); border-radius: 2px"></div></td>
980
- </tr>
981
- <tr>
982
- <td><code>--spacing-px</code></td>
983
- <td><code class="ref">1px</code></td>
984
- <td><div style="height: 12px; width: 1px; background: var(--color-primary-solid); border-radius: 2px"></div></td>
985
- </tr></tbody></table></section>
986
-
987
- <h2>Typography</h2>
988
- <section><h3>font size</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
989
- <tr>
990
- <td><code>--text-xs</code></td>
991
- <td><code class="ref">0.75rem / 1rem</code></td>
992
- <td><span style="font-size: 0.75rem; line-height: 1rem">Rows 1&ndash;50 of 2,481</span></td>
993
- </tr>
994
- <tr>
995
- <td><code>--text-sm</code></td>
996
- <td><code class="ref">0.875rem / 1.25rem</code></td>
997
- <td><span style="font-size: 0.875rem; line-height: 1.25rem">Rows 1&ndash;50 of 2,481</span></td>
998
- </tr>
999
- <tr>
1000
- <td><code>--text-base</code></td>
1001
- <td><code class="ref">1rem / 1.5rem</code></td>
1002
- <td><span style="font-size: 1rem; line-height: 1.5rem">Rows 1&ndash;50 of 2,481</span></td>
1003
- </tr>
1004
- <tr>
1005
- <td><code>--text-lg</code></td>
1006
- <td><code class="ref">1.125rem / 1.75rem</code></td>
1007
- <td><span style="font-size: 1.125rem; line-height: 1.75rem">Rows 1&ndash;50 of 2,481</span></td>
1008
- </tr>
1009
- <tr>
1010
- <td><code>--text-xl</code></td>
1011
- <td><code class="ref">1.25rem / 1.75rem</code></td>
1012
- <td><span style="font-size: 1.25rem; line-height: 1.75rem">Rows 1&ndash;50 of 2,481</span></td>
1013
- </tr>
1014
- <tr>
1015
- <td><code>--text-2xl</code></td>
1016
- <td><code class="ref">1.5rem / 2rem</code></td>
1017
- <td><span style="font-size: 1.5rem; line-height: 2rem">Rows 1&ndash;50 of 2,481</span></td>
1018
- </tr>
1019
- <tr>
1020
- <td><code>--text-3xl</code></td>
1021
- <td><code class="ref">1.875rem / 2.25rem</code></td>
1022
- <td><span style="font-size: 1.875rem; line-height: 2.25rem">Rows 1&ndash;50 of 2,481</span></td>
1023
- </tr></tbody></table></section>
1024
- <section><h3>font weight</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1025
- <tr>
1026
- <td><code>--font-weight-normal</code></td>
1027
- <td><code class="ref">400</code></td>
1028
- <td><span style="font-weight: 400">Rows 1&ndash;50 of 2,481</span></td>
1029
- </tr>
1030
- <tr>
1031
- <td><code>--font-weight-medium</code></td>
1032
- <td><code class="ref">500</code></td>
1033
- <td><span style="font-weight: 500">Rows 1&ndash;50 of 2,481</span></td>
1034
- </tr>
1035
- <tr>
1036
- <td><code>--font-weight-semibold</code></td>
1037
- <td><code class="ref">600</code></td>
1038
- <td><span style="font-weight: 600">Rows 1&ndash;50 of 2,481</span></td>
1039
- </tr>
1040
- <tr>
1041
- <td><code>--font-weight-bold</code></td>
1042
- <td><code class="ref">700</code></td>
1043
- <td><span style="font-weight: 700">Rows 1&ndash;50 of 2,481</span></td>
1044
- </tr></tbody></table></section>
1045
- <section><h3>letter spacing</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1046
- <tr>
1047
- <td><code>--tracking-tight</code></td>
1048
- <td><code class="ref">-0.015em</code></td>
1049
- <td><span style="letter-spacing: -0.015em">STATUS</span></td>
1050
- </tr>
1051
- <tr>
1052
- <td><code>--tracking-normal</code></td>
1053
- <td><code class="ref">0em</code></td>
1054
- <td><span style="letter-spacing: 0em">STATUS</span></td>
1055
- </tr>
1056
- <tr>
1057
- <td><code>--tracking-wide</code></td>
1058
- <td><code class="ref">0.04em</code></td>
1059
- <td><span style="letter-spacing: 0.04em">STATUS</span></td>
1060
- </tr></tbody></table></section>
1061
- <section><h3>line height</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1062
- <tr>
1063
- <td><code>--leading-none</code></td>
1064
- <td><code class="ref">1</code></td>
1065
- <td></td>
1066
- </tr>
1067
- <tr>
1068
- <td><code>--leading-tight</code></td>
1069
- <td><code class="ref">1.25</code></td>
1070
- <td></td>
1071
- </tr>
1072
- <tr>
1073
- <td><code>--leading-snug</code></td>
1074
- <td><code class="ref">1.375</code></td>
1075
- <td></td>
1076
- </tr>
1077
- <tr>
1078
- <td><code>--leading-normal</code></td>
1079
- <td><code class="ref">1.5</code></td>
1080
- <td></td>
1081
- </tr>
1082
- <tr>
1083
- <td><code>--leading-relaxed</code></td>
1084
- <td><code class="ref">1.625</code></td>
1085
- <td></td>
1086
- </tr></tbody></table></section>
1087
- <section><h3>font family</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1088
- <tr>
1089
- <td><code>--font-sans</code></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>
1092
- </tr>
1093
- <tr>
1094
- <td><code>--font-mono</code></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>
1097
- </tr></tbody></table></section>
1098
-
1099
- <h2>Radii</h2>
1100
- <section><h3>radius</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1101
- <tr>
1102
- <td><code>--radius-none</code></td>
1103
- <td><code class="ref">0rem</code></td>
1104
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0rem"></div></td>
1105
- </tr>
1106
- <tr>
1107
- <td><code>--radius-xs</code></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>
1110
- </tr>
1111
- <tr>
1112
- <td><code>--radius-sm</code></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>
1115
- </tr>
1116
- <tr>
1117
- <td><code>--radius-md</code></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>
1120
- </tr>
1121
- <tr>
1122
- <td><code>--radius-lg</code></td>
1123
- <td><code class="ref">0.5rem</code></td>
1124
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 0.5rem"></div></td>
1125
- </tr>
1126
- <tr>
1127
- <td><code>--radius-xl</code></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>
1130
- </tr>
1131
- <tr>
1132
- <td><code>--radius-full</code></td>
1133
- <td><code class="ref">9999px</code></td>
1134
- <td><div class="demo-box" style="width: 56px; height: 32px; border-radius: 9999px"></div></td>
1135
- </tr></tbody></table></section>
1136
-
1137
- <h2>Shadows</h2>
1138
- <section><h3>shadow</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1139
- <tr>
1140
- <td><code>--shadow-none</code></td>
1141
- <td><code class="ref">none</code></td>
1142
- <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: none"></div></td>
1143
- </tr>
1144
- <tr>
1145
- <td><code>--shadow-xs</code></td>
1146
- <td><code class="ref">0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent)</code></td>
1147
- <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent)"></div></td>
1148
- </tr>
1149
- <tr>
1150
- <td><code>--shadow-sm</code></td>
1151
- <td><code class="ref">0 1px 3px 0 color-mix(in oklab, var(--color-shadow) 8%, transparent), 0 1px 2px -1px color-mix(in oklab, var(--color-shadow) 8%, transparent)</code></td>
1152
- <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: 0 1px 3px 0 color-mix(in oklab, var(--color-shadow) 8%, transparent), 0 1px 2px -1px color-mix(in oklab, var(--color-shadow) 8%, transparent)"></div></td>
1153
- </tr>
1154
- <tr>
1155
- <td><code>--shadow-md</code></td>
1156
- <td><code class="ref">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)</code></td>
1157
- <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: 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)"></div></td>
1158
- </tr>
1159
- <tr>
1160
- <td><code>--shadow-lg</code></td>
1161
- <td><code class="ref">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)</code></td>
1162
- <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: 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)"></div></td>
1163
- </tr>
1164
- <tr>
1165
- <td><code>--shadow-xl</code></td>
1166
- <td><code class="ref">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)</code></td>
1167
- <td><div class="demo-box" style="width: 72px; height: 40px; border-radius: var(--radius-md); box-shadow: 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)"></div></td>
1168
- </tr>
1169
- <tr>
1170
- <td><code>--shadow-scroll-x</code></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>
1178
- </tr></tbody></table></section>
1179
-
1180
- <h2>Motion</h2>
1181
- <section><h3>duration</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1182
- <tr>
1183
- <td><code>--transition-duration-instant</code></td>
1184
- <td><code class="ref">0ms</code></td>
1185
- <td></td>
1186
- </tr>
1187
- <tr>
1188
- <td><code>--transition-duration-fast</code></td>
1189
- <td><code class="ref">120ms</code></td>
1190
- <td></td>
1191
- </tr>
1192
- <tr>
1193
- <td><code>--transition-duration-normal</code></td>
1194
- <td><code class="ref">200ms</code></td>
1195
- <td></td>
1196
- </tr>
1197
- <tr>
1198
- <td><code>--transition-duration-slow</code></td>
1199
- <td><code class="ref">320ms</code></td>
1200
- <td></td>
1201
- </tr></tbody></table></section>
1202
- <section><h3>easing</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1203
- <tr>
1204
- <td><code>--ease-linear</code></td>
1205
- <td><code class="ref">linear</code></td>
1206
- <td></td>
1207
- </tr>
1208
- <tr>
1209
- <td><code>--ease-standard</code></td>
1210
- <td><code class="ref">cubic-bezier(0.2, 0, 0, 1)</code></td>
1211
- <td></td>
1212
- </tr>
1213
- <tr>
1214
- <td><code>--ease-enter</code></td>
1215
- <td><code class="ref">cubic-bezier(0, 0, 0.2, 1)</code></td>
1216
- <td></td>
1217
- </tr>
1218
- <tr>
1219
- <td><code>--ease-exit</code></td>
1220
- <td><code class="ref">cubic-bezier(0.4, 0, 1, 1)</code></td>
1221
- <td></td>
1222
- </tr></tbody></table></section>
1223
-
1224
- <h2>Stacking layers</h2>
1225
- <section><h3>z-index</h3><table><thead><tr><th>token</th><th>value</th><th>preview</th></tr></thead><tbody>
1226
- <tr>
1227
- <td><code>--z-index-base</code></td>
1228
- <td><code class="ref">0</code></td>
1229
- <td></td>
1230
- </tr>
1231
- <tr>
1232
- <td><code>--z-index-sticky</code></td>
1233
- <td><code class="ref">100</code></td>
1234
- <td></td>
1235
- </tr>
1236
- <tr>
1237
- <td><code>--z-index-dropdown</code></td>
1238
- <td><code class="ref">200</code></td>
1239
- <td></td>
1240
- </tr>
1241
- <tr>
1242
- <td><code>--z-index-overlay</code></td>
1243
- <td><code class="ref">300</code></td>
1244
- <td></td>
1245
- </tr>
1246
- <tr>
1247
- <td><code>--z-index-modal</code></td>
1248
- <td><code class="ref">400</code></td>
1249
- <td></td>
1250
- </tr>
1251
- <tr>
1252
- <td><code>--z-index-popover</code></td>
1253
- <td><code class="ref">500</code></td>
1254
- <td></td>
1255
- </tr>
1256
- <tr>
1257
- <td><code>--z-index-toast</code></td>
1258
- <td><code class="ref">600</code></td>
1259
- <td></td>
1260
- </tr>
1261
- <tr>
1262
- <td><code>--z-index-tooltip</code></td>
1263
- <td><code class="ref">700</code></td>
1264
- <td></td>
1265
- </tr></tbody></table></section>
1266
-
1267
- <script>
1268
- const toggle = document.getElementById('toggle')
1269
- toggle.addEventListener('click', () => {
1270
- const on = document.documentElement.classList.toggle('dark')
1271
- toggle.setAttribute('aria-pressed', String(on))
1272
- })
1273
- </script>
1274
- </body>
1275
- </html>