@rowkit/tokens 0.1.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +6 -4
  2. package/dist/blur.d.ts +18 -0
  3. package/dist/color.d.ts +295 -51
  4. package/dist/index.d.ts +134 -35
  5. package/dist/index.js +284 -194
  6. package/dist/index.js.map +1 -1
  7. package/dist/radius.d.ts +67 -15
  8. package/dist/reference.html +301 -254
  9. package/dist/shadow.d.ts +12 -1
  10. package/dist/tokens.css +158 -108
  11. package/dist/typography.d.ts +11 -4
  12. package/package.json +1 -1
package/dist/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[600] // 'oklch(0.546 0.209 259)'
12
+ * tokens.color.primary[800] // 'oklch(0.31 0.038 48)' — warm espresso
13
13
  * ```
14
14
  *
15
15
  * @example The stylesheet
@@ -18,11 +18,13 @@
18
18
  * @import '@rowkit/tokens/css';
19
19
  * ```
20
20
  */
21
- export { colorPrimitives, colorSteps, danger, neutral, primary, semanticColorDark, semanticColorLight, success, warning, } from './color.js';
21
+ export { amber, colorPrimitives, colorSteps, danger, gray, green, neutral, primary, red, semanticColorDark, semanticColorLight, success, warning, whiteAlpha, } from './color.js';
22
22
  export type { ColorRef, ColorStep, SemanticColorName } from './color.js';
23
+ export { blur } from './blur.js';
24
+ export type { BlurName } from './blur.js';
23
25
  export { duration, easing } from './motion.js';
24
26
  export type { DurationName, EasingName } from './motion.js';
25
- export { radius } from './radius.js';
27
+ export { radius, radiusBase } from './radius.js';
26
28
  export type { RadiusName } from './radius.js';
27
29
  export { shadow } from './shadow.js';
28
30
  export type { ShadowName } from './shadow.js';
@@ -41,6 +43,50 @@ export { buildThemeCss } from './css.js';
41
43
  */
42
44
  export declare const tokens: {
43
45
  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)";
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
+ };
44
90
  readonly neutral: {
45
91
  readonly 50: "oklch(0.984 0.003 264)";
46
92
  readonly 100: "oklch(0.968 0.004 264)";
@@ -55,17 +101,24 @@ export declare const tokens: {
55
101
  readonly 950: "oklch(0.13 0.036 264)";
56
102
  };
57
103
  readonly primary: {
58
- readonly 50: "oklch(0.97 0.014 259)";
59
- readonly 100: "oklch(0.936 0.03 259)";
60
- readonly 200: "oklch(0.885 0.055 259)";
61
- readonly 300: "oklch(0.809 0.095 259)";
62
- readonly 400: "oklch(0.715 0.147 259)";
63
- readonly 500: "oklch(0.623 0.201 259)";
64
- readonly 600: "oklch(0.546 0.209 259)";
65
- readonly 700: "oklch(0.488 0.187 259)";
66
- readonly 800: "oklch(0.442 0.165 259)";
67
- readonly 900: "oklch(0.396 0.135 259)";
68
- readonly 950: "oklch(0.282 0.086 259)";
104
+ readonly 50: "oklch(0.975 0.01 48)";
105
+ readonly 100: "oklch(0.95 0.014 48)";
106
+ readonly 200: "oklch(0.90 0.02 48)";
107
+ readonly 300: "oklch(0.80 0.026 48)";
108
+ readonly 400: "oklch(0.68 0.032 48)";
109
+ readonly 500: "oklch(0.50 0.036 48)";
110
+ readonly 600: "oklch(0.40 0.037 48)";
111
+ readonly 700: "oklch(0.35 0.037 48)";
112
+ readonly 800: "oklch(0.31 0.038 48)";
113
+ readonly 900: "oklch(0.26 0.032 48)";
114
+ readonly 950: "oklch(0.18 0.024 48)";
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)";
69
122
  };
70
123
  readonly success: {
71
124
  readonly 50: "oklch(0.97 0.014 152)";
@@ -163,6 +216,47 @@ export declare const tokens: {
163
216
  readonly "neutral-800": string;
164
217
  readonly "neutral-900": string;
165
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;
166
260
  readonly white: "oklch(1 0 0)";
167
261
  readonly black: "oklch(0 0 0)";
168
262
  };
@@ -170,22 +264,22 @@ export declare const tokens: {
170
264
  readonly semantic: {
171
265
  readonly light: {
172
266
  readonly background: `var(--color-${string})`;
173
- readonly surface: `var(--color-${string})`;
174
- readonly 'surface-subtle': `var(--color-${string})`;
175
- readonly 'surface-hover': `var(--color-${string})`;
267
+ readonly card: `var(--color-${string})`;
268
+ readonly muted: `var(--color-${string})`;
269
+ readonly accent: `var(--color-${string})`;
176
270
  readonly 'surface-active': `var(--color-${string})`;
177
271
  readonly 'surface-selected': `var(--color-${string})`;
178
272
  readonly 'surface-disabled': `var(--color-${string})`;
179
273
  readonly skeleton: `var(--color-${string})`;
180
- readonly text: `var(--color-${string})`;
181
- readonly 'text-muted': `var(--color-${string})`;
274
+ readonly foreground: `var(--color-${string})`;
275
+ readonly 'muted-foreground': `var(--color-${string})`;
182
276
  readonly 'text-subtle': `var(--color-${string})`;
183
277
  readonly 'text-disabled': `var(--color-${string})`;
184
278
  readonly border: `var(--color-${string})`;
185
279
  readonly 'border-strong': `var(--color-${string})`;
186
280
  readonly 'border-subtle': `var(--color-${string})`;
187
- readonly 'border-control': `var(--color-${string})`;
188
- readonly 'focus-ring': `var(--color-${string})`;
281
+ readonly input: `var(--color-${string})`;
282
+ readonly ring: `var(--color-${string})`;
189
283
  readonly shadow: `var(--color-${string})`;
190
284
  readonly 'neutral-solid': `var(--color-${string})`;
191
285
  readonly 'neutral-solid-hover': `var(--color-${string})`;
@@ -220,22 +314,22 @@ export declare const tokens: {
220
314
  };
221
315
  readonly dark: {
222
316
  readonly background: `var(--color-${string})`;
223
- readonly surface: `var(--color-${string})`;
224
- readonly 'surface-subtle': `var(--color-${string})`;
225
- readonly 'surface-hover': `var(--color-${string})`;
317
+ readonly card: `var(--color-${string})`;
318
+ readonly muted: `var(--color-${string})`;
319
+ readonly accent: `var(--color-${string})`;
226
320
  readonly 'surface-active': `var(--color-${string})`;
227
321
  readonly 'surface-selected': `var(--color-${string})`;
228
322
  readonly 'surface-disabled': `var(--color-${string})`;
229
323
  readonly skeleton: `var(--color-${string})`;
230
- readonly text: `var(--color-${string})`;
231
- readonly 'text-muted': `var(--color-${string})`;
324
+ readonly foreground: `var(--color-${string})`;
325
+ readonly 'muted-foreground': `var(--color-${string})`;
232
326
  readonly 'text-subtle': `var(--color-${string})`;
233
327
  readonly 'text-disabled': `var(--color-${string})`;
234
328
  readonly border: `var(--color-${string})`;
235
329
  readonly 'border-strong': `var(--color-${string})`;
236
330
  readonly 'border-subtle': `var(--color-${string})`;
237
- readonly 'border-control': `var(--color-${string})`;
238
- readonly 'focus-ring': `var(--color-${string})`;
331
+ readonly input: `var(--color-${string})`;
332
+ readonly ring: `var(--color-${string})`;
239
333
  readonly shadow: `var(--color-${string})`;
240
334
  readonly 'neutral-solid': `var(--color-${string})`;
241
335
  readonly 'neutral-solid-hover': `var(--color-${string})`;
@@ -342,13 +436,17 @@ export declare const tokens: {
342
436
  };
343
437
  };
344
438
  readonly radius: {
345
- readonly none: "0rem";
346
- readonly xs: "0.125rem";
347
- readonly sm: "0.25rem";
348
- readonly md: "0.375rem";
349
- readonly lg: "0.5rem";
350
- readonly xl: "0.75rem";
351
439
  readonly full: "9999px";
440
+ readonly none: string;
441
+ readonly xs: string;
442
+ readonly sm: string;
443
+ readonly md: string;
444
+ readonly lg: string;
445
+ readonly xl: string;
446
+ };
447
+ readonly radiusBase: "0.5rem";
448
+ readonly blur: {
449
+ readonly overlay: "4px";
352
450
  };
353
451
  readonly shadow: {
354
452
  readonly none: "none";
@@ -357,7 +455,8 @@ export declare const tokens: {
357
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)";
358
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)";
359
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)";
360
- readonly 'scroll-x': "8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent)";
458
+ readonly 'scroll-x': "12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)";
459
+ readonly 'sticky-header': "inset 0 -1px 0 var(--color-border)";
361
460
  };
362
461
  readonly zIndex: {
363
462
  readonly base: "0";