@rowkit/tokens 0.4.0 → 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +74 -12
  2. package/dist/color.d.ts +249 -493
  3. package/dist/css.d.ts +16 -4
  4. package/dist/index.d.ts +383 -352
  5. package/dist/index.js +90 -409
  6. package/dist/index.js.map +1 -1
  7. package/dist/radius.d.ts +21 -17
  8. package/dist/reference.d.ts +20 -0
  9. package/dist/reference.data.d.ts +2 -0
  10. package/dist/reference.js +403 -0
  11. package/dist/reference.js.map +1 -0
  12. package/dist/shadow.d.ts +76 -20
  13. package/dist/size.d.ts +194 -0
  14. package/dist/style.d.ts +129 -0
  15. package/dist/themes/index.d.ts +69 -0
  16. package/dist/themes/modern.d.ts +139 -0
  17. package/dist/themes-B0J8E0xq.js +1022 -0
  18. package/dist/themes-B0J8E0xq.js.map +1 -0
  19. package/dist/tokens.css +1268 -232
  20. package/dist/typography.d.ts +69 -46
  21. package/package.json +7 -3
  22. package/dist/blur.d.ts +0 -18
  23. package/dist/reference.html +0 -1275
package/dist/index.d.ts CHANGED
@@ -9,7 +9,7 @@
9
9
  * @example Typed access to a primitive
10
10
  * ```ts
11
11
  * import { tokens } from '@rowkit/tokens'
12
- * tokens.color.primary[800] // 'oklch(0.32 0.09 255)' — ink blue
12
+ * tokens.color.vga.silver // '#c0c0c0' — the face of every window
13
13
  * ```
14
14
  *
15
15
  * @example The stylesheet
@@ -18,18 +18,22 @@
18
18
  * @import '@rowkit/tokens/css';
19
19
  * ```
20
20
  */
21
- export { amber, colorPrimitives, colorSteps, danger, gray, green, neutral, primary, red, semanticColorDark, semanticColorLight, success, warning, whiteAlpha, } from './color.js';
22
- export type { ColorRef, ColorStep, SemanticColorName } from './color.js';
23
- export { blur } from './blur.js';
24
- export type { BlurName } from './blur.js';
21
+ export { colorPrimitives, semanticColor, vga, win98 } from './color.js';
22
+ export type { ColorRef, SemanticColorName } from './color.js';
25
23
  export { duration, easing } from './motion.js';
26
24
  export type { DurationName, EasingName } from './motion.js';
27
25
  export { radius, radiusBase } from './radius.js';
28
26
  export type { RadiusName } from './radius.js';
29
- export { shadow } from './shadow.js';
30
- export type { ShadowName } from './shadow.js';
27
+ export { shadow, textShadow } from './shadow.js';
28
+ export type { ShadowName, TextShadowName } from './shadow.js';
31
29
  export { spacing, spacingBase } from './spacing.js';
32
30
  export type { SpacingName } from './spacing.js';
31
+ export { size } from './size.js';
32
+ export type { SizeName } from './size.js';
33
+ export { style } from './style.js';
34
+ export type { StyleName } from './style.js';
35
+ export { modernDarkColor, modernDarkShadow, modernDarkVars, modernFont, modernFontSize, modernFontWeight, modernLightColor, modernLightShadow, modernLightVars, modernPalette, modernRadius, modernSize, modernStyle, defineTheme, themeNames, themeRule, win98Vars, } from './themes/index.js';
36
+ export type { ModernPaletteName, ThemeDefinition, ThemeName, ThemeTokenName, ThemeValues, ThemeVars, } from './themes/index.js';
33
37
  export { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography.js';
34
38
  export type { FontSizeName } from './typography.js';
35
39
  export { zIndex } from './z-index.js';
@@ -38,330 +42,169 @@ export { buildThemeCss } from './css.js';
38
42
  /**
39
43
  * Every rowkit token in one object.
40
44
  *
41
- * Grouped by scale rather than flattened, so `tokens.color.primary[600]`
42
- * narrows to its literal type and autocompletes each level.
45
+ * Grouped by scale rather than flattened, so `tokens.color.vga.navy` narrows
46
+ * to its literal type and autocompletes each level.
43
47
  */
44
48
  export declare const tokens: {
45
49
  readonly color: {
46
- readonly gray: {
47
- readonly 988: "oklch(0.988 0.002 264)";
48
- readonly 985: "oklch(0.985 0 0)";
49
- readonly 972: "oklch(0.972 0.003 264)";
50
- readonly 970: "oklch(0.97 0 0)";
51
- readonly 940: "oklch(0.940 0.004 264)";
52
- readonly 922: "oklch(0.922 0 0)";
53
- readonly 905: "oklch(0.905 0.006 264)";
54
- readonly 870: "oklch(0.87 0 0)";
55
- readonly 708: "oklch(0.708 0 0)";
56
- readonly 635: "oklch(0.635 0 0)";
57
- readonly 642: "oklch(0.642 0.012 264)";
58
- readonly 556: "oklch(0.556 0 0)";
59
- readonly 535: "oklch(0.535 0 0)";
60
- readonly 371: "oklch(0.371 0 0)";
61
- readonly 269: "oklch(0.269 0 0)";
62
- readonly 205: "oklch(0.205 0 0)";
63
- readonly 145: "oklch(0.145 0 0)";
50
+ /** The VGA palette Windows 98 is drawn in. */
51
+ readonly vga: {
52
+ readonly black: "#000000";
53
+ readonly white: "#ffffff";
54
+ readonly silver: "#c0c0c0";
55
+ readonly gray: "#808080";
56
+ readonly navy: "#000080";
57
+ readonly blue: "#0000ff";
58
+ readonly teal: "#008080";
59
+ readonly green: "#008000";
60
+ readonly olive: "#808000";
61
+ readonly yellow: "#ffff00";
62
+ readonly maroon: "#800000";
63
+ readonly red: "#ff0000";
64
64
  };
65
- readonly green: {
66
- readonly 950: "oklch(0.95 0.05 152)";
67
- readonly 880: "oklch(0.88 0.05 152)";
68
- readonly 850: "oklch(0.85 0.12 152)";
69
- readonly 550: "oklch(0.55 0.144 152)";
70
- readonly 520: "oklch(0.52 0.136 152)";
71
- readonly 400: "oklch(0.4 0.105 152)";
72
- readonly 350: "oklch(0.35 0.092 152)";
73
- readonly 260: "oklch(0.26 0.068 152)";
74
- };
75
- readonly amber: {
76
- readonly 950: "oklch(0.95 0.04 75)";
77
- readonly 880: "oklch(0.88 0.05 75)";
78
- readonly 850: "oklch(0.85 0.12 75)";
79
- readonly 550: "oklch(0.55 0.116 75)";
80
- readonly 520: "oklch(0.52 0.109 75)";
81
- readonly 400: "oklch(0.4 0.084 75)";
82
- readonly 350: "oklch(0.35 0.074 75)";
83
- readonly 260: "oklch(0.26 0.055 75)";
84
- };
85
- readonly whiteAlpha: {
86
- readonly 8: "oklch(1 0 0 / 8%)";
87
- readonly 10: "oklch(1 0 0 / 10%)";
88
- readonly 15: "oklch(1 0 0 / 15%)";
89
- };
90
- readonly neutral: {
91
- readonly 50: "oklch(0.984 0.003 264)";
92
- readonly 100: "oklch(0.968 0.004 264)";
93
- readonly 200: "oklch(0.928 0.006 264)";
94
- readonly 300: "oklch(0.869 0.01 264)";
95
- readonly 400: "oklch(0.704 0.018 264)";
96
- readonly 500: "oklch(0.551 0.024 264)";
97
- readonly 600: "oklch(0.446 0.027 264)";
98
- readonly 700: "oklch(0.373 0.028 264)";
99
- readonly 800: "oklch(0.279 0.03 264)";
100
- readonly 900: "oklch(0.21 0.033 264)";
101
- readonly 950: "oklch(0.13 0.036 264)";
102
- };
103
- readonly primary: {
104
- readonly 50: "oklch(0.975 0.011 255)";
105
- readonly 100: "oklch(0.948 0.022 255)";
106
- readonly 200: "oklch(0.90 0.034 255)";
107
- readonly 300: "oklch(0.80 0.05 255)";
108
- readonly 400: "oklch(0.68 0.07 255)";
109
- readonly 500: "oklch(0.52 0.09 255)";
110
- readonly 600: "oklch(0.44 0.095 255)";
111
- readonly 700: "oklch(0.38 0.095 255)";
112
- readonly 800: "oklch(0.32 0.09 255)";
113
- readonly 900: "oklch(0.27 0.075 255)";
114
- readonly 950: "oklch(0.19 0.05 255)";
115
- };
116
- readonly red: {
117
- readonly 850: "oklch(0.85 0.08 25)";
118
- readonly 577: "oklch(0.577 0.235 27.325)";
119
- readonly 520: "oklch(0.52 0.212 27.325)";
120
- readonly 350: "oklch(0.38 0.055 25)";
121
- readonly 260: "oklch(0.32 0.045 25)";
122
- };
123
- readonly success: {
124
- readonly 50: "oklch(0.97 0.014 152)";
125
- readonly 100: "oklch(0.936 0.036 152)";
126
- readonly 200: "oklch(0.885 0.064 152)";
127
- readonly 300: "oklch(0.809 0.097 152)";
128
- readonly 400: "oklch(0.715 0.145 152)";
129
- readonly 500: "oklch(0.623 0.162 152)";
130
- readonly 600: "oklch(0.546 0.142 152)";
131
- readonly 700: "oklch(0.488 0.127 152)";
132
- readonly 800: "oklch(0.442 0.115 152)";
133
- readonly 900: "oklch(0.396 0.103 152)";
134
- readonly 950: "oklch(0.282 0.073 152)";
135
- };
136
- readonly warning: {
137
- readonly 50: "oklch(0.97 0.016 75)";
138
- readonly 100: "oklch(0.936 0.04 75)";
139
- readonly 200: "oklch(0.885 0.071 75)";
140
- readonly 300: "oklch(0.849 0.108 75)";
141
- readonly 400: "oklch(0.785 0.162 75)";
142
- readonly 500: "oklch(0.723 0.15 75)";
143
- readonly 600: "oklch(0.616 0.128 75)";
144
- readonly 700: "oklch(0.528 0.11 75)";
145
- readonly 800: "oklch(0.442 0.092 75)";
146
- readonly 900: "oklch(0.396 0.082 75)";
147
- readonly 950: "oklch(0.282 0.059 75)";
148
- };
149
- readonly danger: {
150
- readonly 50: "oklch(0.97 0.014 25)";
151
- readonly 100: "oklch(0.936 0.032 25)";
152
- readonly 200: "oklch(0.885 0.06 25)";
153
- readonly 300: "oklch(0.809 0.107 25)";
154
- readonly 400: "oklch(0.715 0.17 25)";
155
- readonly 500: "oklch(0.623 0.214 25)";
156
- readonly 600: "oklch(0.546 0.218 25)";
157
- readonly 700: "oklch(0.488 0.195 25)";
158
- readonly 800: "oklch(0.442 0.165 25)";
159
- readonly 900: "oklch(0.396 0.135 25)";
160
- readonly 950: "oklch(0.282 0.086 25)";
65
+ /** The system colours Windows 98 added to it. */
66
+ readonly win98: {
67
+ readonly light: "#dfdfdf";
68
+ readonly 'dark-gray': "#404040";
69
+ readonly 'title-blue': "#1084d0";
70
+ readonly 'title-gray': "#b5b5b5";
71
+ readonly info: "#ffffe1";
161
72
  };
162
73
  /** Flat map of every primitive, keyed by CSS custom property suffix. */
163
74
  readonly primitives: {
164
- readonly "danger-50": string;
165
- readonly "danger-100": string;
166
- readonly "danger-200": string;
167
- readonly "danger-300": string;
168
- readonly "danger-400": string;
169
- readonly "danger-500": string;
170
- readonly "danger-600": string;
171
- readonly "danger-700": string;
172
- readonly "danger-800": string;
173
- readonly "danger-900": string;
174
- readonly "danger-950": string;
175
- readonly "warning-50": string;
176
- readonly "warning-100": string;
177
- readonly "warning-200": string;
178
- readonly "warning-300": string;
179
- readonly "warning-400": string;
180
- readonly "warning-500": string;
181
- readonly "warning-600": string;
182
- readonly "warning-700": string;
183
- readonly "warning-800": string;
184
- readonly "warning-900": string;
185
- readonly "warning-950": string;
186
- readonly "success-50": string;
187
- readonly "success-100": string;
188
- readonly "success-200": string;
189
- readonly "success-300": string;
190
- readonly "success-400": string;
191
- readonly "success-500": string;
192
- readonly "success-600": string;
193
- readonly "success-700": string;
194
- readonly "success-800": string;
195
- readonly "success-900": string;
196
- readonly "success-950": string;
197
- readonly "primary-50": string;
198
- readonly "primary-100": string;
199
- readonly "primary-200": string;
200
- readonly "primary-300": string;
201
- readonly "primary-400": string;
202
- readonly "primary-500": string;
203
- readonly "primary-600": string;
204
- readonly "primary-700": string;
205
- readonly "primary-800": string;
206
- readonly "primary-900": string;
207
- readonly "primary-950": string;
208
- readonly "neutral-50": string;
209
- readonly "neutral-100": string;
210
- readonly "neutral-200": string;
211
- readonly "neutral-300": string;
212
- readonly "neutral-400": string;
213
- readonly "neutral-500": string;
214
- readonly "neutral-600": string;
215
- readonly "neutral-700": string;
216
- readonly "neutral-800": string;
217
- readonly "neutral-900": string;
218
- readonly "neutral-950": string;
219
- readonly "white-alpha-8": string;
220
- readonly "white-alpha-10": string;
221
- readonly "white-alpha-15": string;
222
- readonly "amber-400": string;
223
- readonly "amber-950": string;
224
- readonly "amber-850": string;
225
- readonly "amber-520": string;
226
- readonly "amber-350": string;
227
- readonly "amber-260": string;
228
- readonly "amber-880": string;
229
- readonly "amber-550": string;
230
- readonly "green-400": string;
231
- readonly "green-950": string;
232
- readonly "green-850": string;
233
- readonly "green-520": string;
234
- readonly "green-350": string;
235
- readonly "green-260": string;
236
- readonly "green-880": string;
237
- readonly "green-550": string;
238
- readonly "red-850": string;
239
- readonly "red-577": string;
240
- readonly "red-520": string;
241
- readonly "red-350": string;
242
- readonly "red-260": string;
243
- readonly "gray-988": string;
244
- readonly "gray-985": string;
245
- readonly "gray-972": string;
246
- readonly "gray-970": string;
247
- readonly "gray-940": string;
248
- readonly "gray-922": string;
249
- readonly "gray-905": string;
250
- readonly "gray-870": string;
251
- readonly "gray-708": string;
252
- readonly "gray-635": string;
253
- readonly "gray-642": string;
254
- readonly "gray-556": string;
255
- readonly "gray-535": string;
256
- readonly "gray-371": string;
257
- readonly "gray-269": string;
258
- readonly "gray-205": string;
259
- readonly "gray-145": string;
260
- readonly white: "oklch(1 0 0)";
261
- readonly black: "oklch(0 0 0)";
75
+ readonly "win98-light": "#dfdfdf";
76
+ readonly "win98-dark-gray": "#404040";
77
+ readonly "win98-title-blue": "#1084d0";
78
+ readonly "win98-title-gray": "#b5b5b5";
79
+ readonly "win98-info": "#ffffe1";
80
+ readonly "vga-black": "#000000";
81
+ readonly "vga-white": "#ffffff";
82
+ readonly "vga-silver": "#c0c0c0";
83
+ readonly "vga-gray": "#808080";
84
+ readonly "vga-navy": "#000080";
85
+ readonly "vga-blue": "#0000ff";
86
+ readonly "vga-teal": "#008080";
87
+ readonly "vga-green": "#008000";
88
+ readonly "vga-olive": "#808000";
89
+ readonly "vga-yellow": "#ffff00";
90
+ readonly "vga-maroon": "#800000";
91
+ readonly "vga-red": "#ff0000";
262
92
  };
263
93
  /** Semantic tokens, which reference primitives via `var()`. */
264
94
  readonly semantic: {
265
- readonly light: {
266
- readonly background: `var(--color-${string})`;
267
- readonly card: `var(--color-${string})`;
268
- readonly muted: `var(--color-${string})`;
269
- readonly accent: `var(--color-${string})`;
270
- readonly 'surface-active': `var(--color-${string})`;
271
- readonly 'surface-selected': `var(--color-${string})`;
272
- readonly 'surface-disabled': `var(--color-${string})`;
273
- readonly skeleton: `var(--color-${string})`;
274
- readonly foreground: `var(--color-${string})`;
275
- readonly 'muted-foreground': `var(--color-${string})`;
276
- readonly 'text-subtle': `var(--color-${string})`;
277
- readonly 'text-disabled': `var(--color-${string})`;
278
- readonly border: `var(--color-${string})`;
279
- readonly 'border-strong': `var(--color-${string})`;
280
- readonly 'border-subtle': `var(--color-${string})`;
281
- readonly input: `var(--color-${string})`;
282
- readonly ring: `var(--color-${string})`;
283
- readonly shadow: `var(--color-${string})`;
284
- readonly 'neutral-solid': `var(--color-${string})`;
285
- readonly 'neutral-solid-hover': `var(--color-${string})`;
286
- readonly 'neutral-on-solid': `var(--color-${string})`;
287
- readonly 'neutral-subtle': `var(--color-${string})`;
288
- readonly 'neutral-on-subtle': `var(--color-${string})`;
289
- readonly 'neutral-border': `var(--color-${string})`;
290
- readonly 'primary-solid': `var(--color-${string})`;
291
- readonly 'primary-solid-hover': `var(--color-${string})`;
292
- readonly 'primary-on-solid': `var(--color-${string})`;
293
- readonly 'primary-subtle': `var(--color-${string})`;
294
- readonly 'primary-on-subtle': `var(--color-${string})`;
295
- readonly 'primary-border': `var(--color-${string})`;
296
- readonly 'success-solid': `var(--color-${string})`;
297
- readonly 'success-solid-hover': `var(--color-${string})`;
298
- readonly 'success-on-solid': `var(--color-${string})`;
299
- readonly 'success-subtle': `var(--color-${string})`;
300
- readonly 'success-on-subtle': `var(--color-${string})`;
301
- readonly 'success-border': `var(--color-${string})`;
302
- readonly 'warning-solid': `var(--color-${string})`;
303
- readonly 'warning-solid-hover': `var(--color-${string})`;
304
- readonly 'warning-on-solid': `var(--color-${string})`;
305
- readonly 'warning-subtle': `var(--color-${string})`;
306
- readonly 'warning-on-subtle': `var(--color-${string})`;
307
- readonly 'warning-border': `var(--color-${string})`;
308
- readonly 'danger-solid': `var(--color-${string})`;
309
- readonly 'danger-solid-hover': `var(--color-${string})`;
310
- readonly 'danger-on-solid': `var(--color-${string})`;
311
- readonly 'danger-subtle': `var(--color-${string})`;
312
- readonly 'danger-on-subtle': `var(--color-${string})`;
313
- readonly 'danger-border': `var(--color-${string})`;
314
- };
315
- readonly dark: {
316
- readonly background: `var(--color-${string})`;
317
- readonly card: `var(--color-${string})`;
318
- readonly muted: `var(--color-${string})`;
319
- readonly accent: `var(--color-${string})`;
320
- readonly 'surface-active': `var(--color-${string})`;
321
- readonly 'surface-selected': `var(--color-${string})`;
322
- readonly 'surface-disabled': `var(--color-${string})`;
323
- readonly skeleton: `var(--color-${string})`;
324
- readonly foreground: `var(--color-${string})`;
325
- readonly 'muted-foreground': `var(--color-${string})`;
326
- readonly 'text-subtle': `var(--color-${string})`;
327
- readonly 'text-disabled': `var(--color-${string})`;
328
- readonly border: `var(--color-${string})`;
329
- readonly 'border-strong': `var(--color-${string})`;
330
- readonly 'border-subtle': `var(--color-${string})`;
331
- readonly input: `var(--color-${string})`;
332
- readonly ring: `var(--color-${string})`;
333
- readonly shadow: `var(--color-${string})`;
334
- readonly 'neutral-solid': `var(--color-${string})`;
335
- readonly 'neutral-solid-hover': `var(--color-${string})`;
336
- readonly 'neutral-on-solid': `var(--color-${string})`;
337
- readonly 'neutral-subtle': `var(--color-${string})`;
338
- readonly 'neutral-on-subtle': `var(--color-${string})`;
339
- readonly 'neutral-border': `var(--color-${string})`;
340
- readonly 'primary-solid': `var(--color-${string})`;
341
- readonly 'primary-solid-hover': `var(--color-${string})`;
342
- readonly 'primary-on-solid': `var(--color-${string})`;
343
- readonly 'primary-subtle': `var(--color-${string})`;
344
- readonly 'primary-on-subtle': `var(--color-${string})`;
345
- readonly 'primary-border': `var(--color-${string})`;
346
- readonly 'success-solid': `var(--color-${string})`;
347
- readonly 'success-solid-hover': `var(--color-${string})`;
348
- readonly 'success-on-solid': `var(--color-${string})`;
349
- readonly 'success-subtle': `var(--color-${string})`;
350
- readonly 'success-on-subtle': `var(--color-${string})`;
351
- readonly 'success-border': `var(--color-${string})`;
352
- readonly 'warning-solid': `var(--color-${string})`;
353
- readonly 'warning-solid-hover': `var(--color-${string})`;
354
- readonly 'warning-on-solid': `var(--color-${string})`;
355
- readonly 'warning-subtle': `var(--color-${string})`;
356
- readonly 'warning-on-subtle': `var(--color-${string})`;
357
- readonly 'warning-border': `var(--color-${string})`;
358
- readonly 'danger-solid': `var(--color-${string})`;
359
- readonly 'danger-solid-hover': `var(--color-${string})`;
360
- readonly 'danger-on-solid': `var(--color-${string})`;
361
- readonly 'danger-subtle': `var(--color-${string})`;
362
- readonly 'danger-on-subtle': `var(--color-${string})`;
363
- readonly 'danger-border': `var(--color-${string})`;
364
- };
95
+ readonly background: `var(--color-${string})`;
96
+ readonly desktop: `var(--color-${string})`;
97
+ readonly card: `var(--color-${string})`;
98
+ readonly muted: `var(--color-${string})`;
99
+ readonly accent: `var(--color-${string})`;
100
+ readonly 'surface-active': `var(--color-${string})`;
101
+ readonly 'surface-selected': `var(--color-${string})`;
102
+ readonly 'surface-disabled': `var(--color-${string})`;
103
+ readonly skeleton: `var(--color-${string})`;
104
+ readonly input: `var(--color-${string})`;
105
+ readonly 'tooltip-bg': `var(--color-${string})`;
106
+ readonly foreground: `var(--color-${string})`;
107
+ readonly 'muted-foreground': `var(--color-${string})`;
108
+ readonly 'text-subtle': `var(--color-${string})`;
109
+ readonly 'text-disabled': `var(--color-${string})`;
110
+ readonly 'text-disabled-emboss': `var(--color-${string})`;
111
+ readonly 'on-selected': `var(--color-${string})`;
112
+ readonly link: `var(--color-${string})`;
113
+ readonly border: `var(--color-${string})`;
114
+ readonly 'border-strong': `var(--color-${string})`;
115
+ readonly 'border-subtle': `var(--color-${string})`;
116
+ readonly ring: `var(--color-${string})`;
117
+ readonly shadow: `var(--color-${string})`;
118
+ readonly 'bevel-highlight': `var(--color-${string})`;
119
+ readonly 'bevel-light': `var(--color-${string})`;
120
+ readonly 'bevel-shadow': `var(--color-${string})`;
121
+ readonly 'bevel-dark': `var(--color-${string})`;
122
+ readonly 'titlebar-from': `var(--color-${string})`;
123
+ readonly 'titlebar-to': `var(--color-${string})`;
124
+ readonly 'titlebar-inactive-from': `var(--color-${string})`;
125
+ readonly 'titlebar-inactive-to': `var(--color-${string})`;
126
+ readonly 'titlebar-foreground': `var(--color-${string})`;
127
+ readonly 'titlebar-inactive-foreground': `var(--color-${string})`;
128
+ readonly 'neutral-solid': `var(--color-${string})`;
129
+ readonly 'neutral-solid-hover': `var(--color-${string})`;
130
+ readonly 'neutral-on-solid': `var(--color-${string})`;
131
+ readonly 'neutral-subtle': `var(--color-${string})`;
132
+ readonly 'neutral-on-subtle': `var(--color-${string})`;
133
+ readonly 'neutral-border': `var(--color-${string})`;
134
+ readonly 'primary-solid': `var(--color-${string})`;
135
+ readonly 'primary-solid-hover': `var(--color-${string})`;
136
+ readonly 'primary-on-solid': `var(--color-${string})`;
137
+ readonly 'primary-subtle': `var(--color-${string})`;
138
+ readonly 'primary-on-subtle': `var(--color-${string})`;
139
+ readonly 'primary-border': `var(--color-${string})`;
140
+ readonly 'success-solid': `var(--color-${string})`;
141
+ readonly 'success-solid-hover': `var(--color-${string})`;
142
+ readonly 'success-on-solid': `var(--color-${string})`;
143
+ readonly 'success-subtle': `var(--color-${string})`;
144
+ readonly 'success-on-subtle': `var(--color-${string})`;
145
+ readonly 'success-border': `var(--color-${string})`;
146
+ readonly 'warning-solid': `var(--color-${string})`;
147
+ readonly 'warning-solid-hover': `var(--color-${string})`;
148
+ readonly 'warning-on-solid': `var(--color-${string})`;
149
+ readonly 'warning-subtle': `var(--color-${string})`;
150
+ readonly 'warning-on-subtle': `var(--color-${string})`;
151
+ readonly 'warning-border': `var(--color-${string})`;
152
+ readonly 'danger-solid': `var(--color-${string})`;
153
+ readonly 'danger-solid-hover': `var(--color-${string})`;
154
+ readonly 'danger-on-solid': `var(--color-${string})`;
155
+ readonly 'danger-subtle': `var(--color-${string})`;
156
+ readonly 'danger-on-subtle': `var(--color-${string})`;
157
+ readonly 'danger-border': `var(--color-${string})`;
158
+ readonly control: `var(--color-${string})`;
159
+ readonly 'control-foreground': `var(--color-${string})`;
160
+ readonly 'control-hover': `var(--color-${string})`;
161
+ readonly 'control-active': `var(--color-${string})`;
162
+ readonly 'control-primary': `var(--color-${string})`;
163
+ readonly 'control-primary-foreground': `var(--color-${string})`;
164
+ readonly 'control-primary-hover': `var(--color-${string})`;
165
+ readonly 'control-primary-active': `var(--color-${string})`;
166
+ readonly 'control-ghost-hover': `var(--color-${string})`;
167
+ readonly 'control-ghost-active': `var(--color-${string})`;
168
+ readonly 'control-latched': `var(--color-${string})`;
169
+ readonly 'control-primary-latched': `var(--color-${string})`;
170
+ readonly checked: `var(--color-${string})`;
171
+ readonly 'on-checked': `var(--color-${string})`;
172
+ readonly popover: `var(--color-${string})`;
173
+ readonly 'popover-border': `var(--color-${string})`;
174
+ readonly 'focus-ring': `var(--color-${string})`;
175
+ readonly caption: `var(--color-${string})`;
176
+ readonly 'caption-foreground': `var(--color-${string})`;
177
+ readonly 'caption-close': `var(--color-${string})`;
178
+ readonly 'caption-minimize': `var(--color-${string})`;
179
+ readonly 'caption-maximize': `var(--color-${string})`;
180
+ readonly 'caption-inactive': `var(--color-${string})`;
181
+ readonly 'table-header': `var(--color-${string})`;
182
+ readonly 'table-header-foreground': `var(--color-${string})`;
183
+ readonly 'table-stripe': `var(--color-${string})`;
184
+ readonly 'table-row-hover': `var(--color-${string})`;
185
+ readonly track: `var(--color-${string})`;
186
+ readonly progress: `var(--color-${string})`;
187
+ readonly 'scroll-thumb': `var(--color-${string})`;
188
+ readonly 'scroll-track': `var(--color-${string})`;
189
+ readonly 'tooltip-border': `var(--color-${string})`;
190
+ readonly groupbox: `var(--color-${string})`;
191
+ readonly 'groupbox-face': `var(--color-${string})`;
192
+ readonly 'toast-close': `var(--color-${string})`;
193
+ readonly 'toast-close-foreground': `var(--color-${string})`;
194
+ readonly 'loading-foreground': `var(--color-${string})`;
195
+ readonly 'select-search': `var(--color-${string})`;
196
+ readonly pager: `var(--color-${string})`;
197
+ readonly 'pager-hover': `var(--color-${string})`;
198
+ readonly 'pager-active': `var(--color-${string})`;
199
+ readonly 'filter-bar': `var(--color-${string})`;
200
+ readonly chip: `var(--color-${string})`;
201
+ readonly 'chip-border': `var(--color-${string})`;
202
+ readonly 'chip-foreground': `var(--color-${string})`;
203
+ readonly 'chip-remove': `var(--color-${string})`;
204
+ readonly 'field-highlight': `var(--color-${string})`;
205
+ readonly 'on-field-highlight': `var(--color-${string})`;
206
+ readonly 'field-caret': `var(--color-${string})`;
207
+ readonly 'field-button': `var(--color-${string})`;
365
208
  };
366
209
  };
367
210
  readonly spacing: {
@@ -381,51 +224,211 @@ export declare const tokens: {
381
224
  readonly 24: "6rem";
382
225
  };
383
226
  readonly spacingBase: "0.25rem";
227
+ readonly size: {
228
+ readonly 'control-xs': "21px";
229
+ readonly 'control-sm': "26px";
230
+ readonly 'control-md': "28px";
231
+ readonly 'control-lg': "33px";
232
+ readonly 'icon-xs': "25px";
233
+ readonly 'icon-sm': "27px";
234
+ readonly 'icon-md': "30px";
235
+ readonly 'icon-lg': "34px";
236
+ readonly 'button-min-xs': "3rem";
237
+ readonly 'button-min-sm': "4rem";
238
+ readonly 'button-min-md': "92px";
239
+ readonly 'button-min-lg': "108px";
240
+ readonly 'button-px-xs': "0.375rem";
241
+ readonly 'button-px-sm': "0.5rem";
242
+ readonly 'button-px-md': "0.75rem";
243
+ readonly 'button-px-lg': "1rem";
244
+ readonly 'field-px': "0.25rem";
245
+ readonly 'field-px-lg': "0.375rem";
246
+ readonly 'field-gap-sm': "0.25rem";
247
+ readonly 'field-gap-md': "0.375rem";
248
+ readonly 'field-gap-lg': "0.5rem";
249
+ readonly 'field-left-gap': "0.5rem";
250
+ readonly 'field-error-gap': "0.25rem";
251
+ readonly check: "13px";
252
+ readonly radio: "12px";
253
+ readonly 'check-gap': "4px";
254
+ readonly 'check-label-px': "1px";
255
+ readonly titlebar: "22px";
256
+ readonly 'caption-w': "20px";
257
+ readonly 'caption-h': "18px";
258
+ readonly 'caption-gap': "0px";
259
+ readonly 'caption-close-gap': "2px";
260
+ readonly 'titlebar-px': "2px";
261
+ readonly 'title-inset-start': "4px";
262
+ readonly 'title-inset-end': "28px";
263
+ readonly frame: "2px";
264
+ readonly 'dialog-px': "0.75rem";
265
+ readonly 'dialog-pt': "0.75rem";
266
+ readonly 'dialog-footer-pt': "0.5rem";
267
+ readonly 'dialog-footer-pb': "0.75rem";
268
+ readonly item: "22px";
269
+ readonly 'item-pl': "2px";
270
+ readonly 'item-pr': "0.25rem";
271
+ readonly 'item-check': "12px";
272
+ readonly 'item-gap': "2px";
273
+ readonly 'item-check-glyph': "7px";
274
+ readonly 'popover-inset': "1px";
275
+ readonly 'table-header-px': "0.25rem";
276
+ readonly 'table-cell-px': "0.375rem";
277
+ readonly 'row-sm': "22px";
278
+ readonly 'row-md': "27px";
279
+ readonly 'select-arrow': "8px";
280
+ readonly 'select-arrow-overlap': "0px";
281
+ readonly 'select-message-px': "6px";
282
+ readonly 'select-message-py': "6px";
283
+ readonly 'select-message-gap': "6px";
284
+ readonly 'select-search-p': "2px";
285
+ readonly 'select-search-gap': "0px";
286
+ readonly 'field-button-h-sm': "17px";
287
+ readonly 'field-button-h': "19px";
288
+ readonly 'field-button-h-lg': "23px";
289
+ readonly 'field-button-pr': "2px";
290
+ readonly 'field-drop-icon': "8px";
291
+ readonly 'select-pr': "2px";
292
+ readonly 'filter-bar-p': "0.25rem";
293
+ readonly 'filter-bar-gap': "0.25rem";
294
+ readonly 'chip-px': "0.375rem";
295
+ readonly 'chip-pr-remove': "0.125rem";
296
+ readonly 'toast-py': "0.5rem";
297
+ readonly 'toast-pl': "0.5rem";
298
+ readonly 'toast-pr': "0.25rem";
299
+ readonly 'toast-gap': "0.5rem";
300
+ readonly 'toast-body-gap': "0.25rem";
301
+ readonly 'toast-icon': "16px";
302
+ readonly 'toast-close-w': "20px";
303
+ readonly 'toast-close-h': "18px";
304
+ readonly 'pager-px': "0.25rem";
305
+ readonly 'pager-arrow': "8px";
306
+ readonly 'pager-focus-px': "1px";
307
+ readonly 'pager-min-sm': "0px";
308
+ readonly 'chip-sm': "23px";
309
+ readonly 'chip-md': "26px";
310
+ readonly 'badge-px-sm': "0.25rem";
311
+ readonly 'badge-px-md': "0.375rem";
312
+ readonly 'badge-dot': "5px";
313
+ readonly 'empty-p-sm': "0.75rem";
314
+ readonly 'empty-p-md': "1.5rem";
315
+ readonly 'empty-p-lg': "1.5rem";
316
+ readonly 'empty-gap': "1rem";
317
+ readonly 'tooltip-px': "0.25rem";
318
+ readonly 'tooltip-py': "1px";
319
+ readonly statusbar: "27px";
320
+ readonly 'statusbar-px': "2px";
321
+ readonly 'statusbar-py': "2px";
322
+ readonly 'statusbar-gap': "2px";
323
+ readonly 'statusbar-section-px': "0.25rem";
324
+ readonly 'statusbar-section-gap': "0.25rem";
325
+ readonly progress: "18px";
326
+ readonly 'progress-inset': "2px";
327
+ readonly 'progress-fill': "12px";
328
+ readonly 'progress-block': "8px";
329
+ readonly 'progress-period': "10px";
330
+ readonly 'progress-segment': "38px";
331
+ readonly scrollbar: "16px";
332
+ readonly 'scroll-button': "16px";
333
+ readonly 'scroll-inset': "0px";
334
+ readonly 'groupbox-top': "6px";
335
+ readonly 'groupbox-pt': "1rem";
336
+ readonly 'groupbox-legend-x': "0.5rem";
337
+ readonly 'groupbox-legend-px': "2px";
338
+ };
339
+ readonly style: {
340
+ readonly 'focus-label-width': "1px";
341
+ readonly 'focus-ring-width': "1px";
342
+ readonly 'focus-ring-style': "dotted";
343
+ readonly 'focus-outer-width': "0px";
344
+ readonly 'focus-outer-offset': "0px";
345
+ readonly 'press-shift': "1px";
346
+ readonly 'press-brightness': "1";
347
+ readonly 'dither-image': string;
348
+ readonly 'loading-image': string;
349
+ readonly 'animate-loading': "rk-dither 800ms steps(1) infinite";
350
+ readonly 'animate-busy': "none";
351
+ readonly 'animate-progress': "rk-progress-march calc(var(--rk-progress-steps, 18) * 100ms) steps(var(--rk-progress-steps, 18)) infinite";
352
+ readonly 'duration-control': "0ms";
353
+ readonly 'animate-overlay-in': "none";
354
+ readonly 'etch-width': "1px";
355
+ readonly 'caption-order': "0";
356
+ readonly 'close-order': "0";
357
+ readonly 'titlebar-icon': "flex";
358
+ readonly 'titlebar-align': "start";
359
+ readonly 'titlebar-balance': "0px";
360
+ readonly 'caption-glyph-opacity': "1";
361
+ readonly 'legend-weight': "400";
362
+ readonly 'link-decoration': "underline";
363
+ readonly 'invalid-width': "0px";
364
+ readonly 'field-error-align': "center";
365
+ readonly 'select-up': "none";
366
+ readonly 'footer-direction': "row";
367
+ readonly 'empty-direction': "row";
368
+ readonly 'empty-align': "start";
369
+ readonly 'overlay-bg': "transparent";
370
+ readonly 'popover-backdrop': "none";
371
+ readonly 'popover-border-width': "1px";
372
+ readonly 'scrollbar-buttons': "block";
373
+ readonly 'glyph-scale': "1";
374
+ readonly 'radio-fill': "0%";
375
+ readonly 'radio-dot-r': "0px";
376
+ readonly 'radio-edge': "0px";
377
+ readonly 'icon-pixels': "inline";
378
+ readonly 'icon-glyphs': "initial";
379
+ readonly 'icon-fill': "transparent";
380
+ readonly 'icon-tone-danger': "transparent";
381
+ readonly 'icon-tone-warning': "transparent";
382
+ readonly 'icon-tone-info': "transparent";
383
+ readonly 'icon-tone-success': "transparent";
384
+ readonly 'icon-tone-folder': "transparent";
385
+ };
384
386
  readonly font: {
385
387
  readonly family: {
386
388
  readonly sans: string;
387
389
  readonly mono: string;
388
390
  };
389
391
  readonly size: {
390
- readonly xs: {
391
- readonly size: "0.75rem";
392
+ readonly ui: {
393
+ readonly size: "0.8125rem";
392
394
  readonly lineHeight: "1rem";
393
395
  };
394
- readonly sm: {
395
- readonly size: "0.875rem";
396
+ readonly heading: {
397
+ readonly size: "1rem";
396
398
  readonly lineHeight: "1.25rem";
397
399
  };
398
- readonly base: {
400
+ readonly mono: {
399
401
  readonly size: "1rem";
400
- readonly lineHeight: "1.5rem";
402
+ readonly lineHeight: "1rem";
401
403
  };
402
- readonly lg: {
403
- readonly size: "1.125rem";
404
- readonly lineHeight: "1.75rem";
404
+ readonly doc: {
405
+ readonly size: "1rem";
406
+ readonly lineHeight: "1.625rem";
405
407
  };
406
- readonly xl: {
408
+ readonly 'doc-mono': {
407
409
  readonly size: "1.25rem";
408
- readonly lineHeight: "1.75rem";
410
+ readonly lineHeight: "1.25rem";
411
+ };
412
+ readonly 'doc-h1': {
413
+ readonly size: "1.625rem";
414
+ readonly lineHeight: "1.875rem";
409
415
  };
410
- readonly '2xl': {
411
- readonly size: "1.5rem";
412
- readonly lineHeight: "2rem";
416
+ readonly 'doc-h2': {
417
+ readonly size: "1.1875rem";
418
+ readonly lineHeight: "1.5rem";
413
419
  };
414
- readonly '3xl': {
415
- readonly size: "1.875rem";
416
- readonly lineHeight: "2.25rem";
420
+ readonly 'doc-h3': {
421
+ readonly size: "0.9375rem";
422
+ readonly lineHeight: "1.25rem";
417
423
  };
418
424
  };
419
425
  readonly weight: {
420
426
  readonly normal: "400";
421
- readonly medium: "500";
422
- readonly semibold: "600";
423
427
  readonly bold: "700";
428
+ readonly strong: "700";
424
429
  };
425
430
  readonly letterSpacing: {
426
- readonly tight: "-0.015em";
427
431
  readonly normal: "0em";
428
- readonly wide: "0.04em";
429
432
  };
430
433
  readonly lineHeight: {
431
434
  readonly none: "1";
@@ -437,6 +440,7 @@ export declare const tokens: {
437
440
  };
438
441
  readonly radius: {
439
442
  readonly full: "9999px";
443
+ readonly pill: "0rem";
440
444
  readonly none: string;
441
445
  readonly xs: string;
442
446
  readonly sm: string;
@@ -444,20 +448,39 @@ export declare const tokens: {
444
448
  readonly lg: string;
445
449
  readonly xl: string;
446
450
  };
447
- readonly radiusBase: "0.5rem";
448
- readonly blur: {
449
- readonly overlay: "4px";
450
- };
451
+ readonly radiusBase: "0rem";
451
452
  readonly shadow: {
452
453
  readonly none: "none";
453
- readonly xs: "0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent)";
454
- readonly 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)";
455
- readonly 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)";
456
- readonly 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)";
457
- readonly 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)";
458
- readonly 'scroll-x': "12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)";
454
+ readonly raised: string;
455
+ readonly window: string;
456
+ readonly 'raised-default': string;
457
+ readonly pressed: string;
458
+ readonly sunken: string;
459
+ readonly status: string;
460
+ readonly etched: string;
461
+ readonly 'raised-thin': string;
462
+ readonly popover: "none";
463
+ readonly table: string;
464
+ readonly header: string;
465
+ readonly caption: string;
466
+ readonly statusbar: "none";
467
+ readonly titlebar: "none";
468
+ readonly checked: string;
469
+ readonly 'field-button-pressed': string;
470
+ readonly 'latched-ghost': string;
471
+ readonly 'checked-selected': string;
472
+ readonly 'toast-close': string;
473
+ readonly pager: string;
474
+ readonly 'pager-focus': string;
475
+ readonly 'pager-pressed': string;
476
+ readonly 'field-button': string;
477
+ readonly 'scroll-thumb': string;
478
+ readonly 'scroll-x': "inset -1px 0 var(--color-bevel-shadow)";
459
479
  readonly 'sticky-header': "inset 0 -1px 0 var(--color-border)";
460
480
  };
481
+ readonly textShadow: {
482
+ readonly disabled: "1px 1px 0 var(--color-text-disabled-emboss)";
483
+ };
461
484
  readonly zIndex: {
462
485
  readonly base: "0";
463
486
  readonly sticky: "100";
@@ -482,6 +505,14 @@ export declare const tokens: {
482
505
  readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
483
506
  };
484
507
  };
508
+ /** Each theme as the variables it declares. */
509
+ readonly themes: {
510
+ readonly win98: import('./themes').ThemeVars;
511
+ readonly modern: {
512
+ readonly light: import('./themes').ThemeVars;
513
+ readonly dark: import('./themes').ThemeVars;
514
+ };
515
+ };
485
516
  };
486
517
  /** The shape of {@link tokens}. */
487
518
  export type Tokens = typeof tokens;