@rowkit/tokens 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -0
- package/dist/blur.d.ts +18 -0
- package/dist/color.d.ts +252 -33
- package/dist/index.d.ts +129 -36
- package/dist/index.js +267 -184
- package/dist/index.js.map +1 -1
- package/dist/radius.d.ts +61 -15
- package/dist/reference.html +231 -187
- package/dist/shadow.d.ts +12 -1
- package/dist/tokens.css +128 -81
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -18,21 +18,23 @@
|
|
|
18
18
|
* @import '@rowkit/tokens/css';
|
|
19
19
|
* ```
|
|
20
20
|
*/
|
|
21
|
-
export { colorPrimitives, colorSteps, danger, neutral, primary, semanticColorDark, semanticColorLight, success, warning, } from './color';
|
|
22
|
-
export type { ColorRef, ColorStep, SemanticColorName } from './color';
|
|
23
|
-
export {
|
|
24
|
-
export type {
|
|
25
|
-
export {
|
|
26
|
-
export type {
|
|
27
|
-
export {
|
|
28
|
-
export type {
|
|
29
|
-
export {
|
|
30
|
-
export type {
|
|
31
|
-
export {
|
|
32
|
-
export type {
|
|
33
|
-
export {
|
|
34
|
-
export type {
|
|
35
|
-
export {
|
|
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';
|
|
25
|
+
export { duration, easing } from './motion.js';
|
|
26
|
+
export type { DurationName, EasingName } from './motion.js';
|
|
27
|
+
export { radius, radiusBase } from './radius.js';
|
|
28
|
+
export type { RadiusName } from './radius.js';
|
|
29
|
+
export { shadow } from './shadow.js';
|
|
30
|
+
export type { ShadowName } from './shadow.js';
|
|
31
|
+
export { spacing, spacingBase } from './spacing.js';
|
|
32
|
+
export type { SpacingName } from './spacing.js';
|
|
33
|
+
export { fontFamily, fontSize, fontWeight, letterSpacing, lineHeight } from './typography.js';
|
|
34
|
+
export type { FontSizeName } from './typography.js';
|
|
35
|
+
export { zIndex } from './z-index.js';
|
|
36
|
+
export type { ZIndexName } from './z-index.js';
|
|
37
|
+
export { buildThemeCss } from './css.js';
|
|
36
38
|
/**
|
|
37
39
|
* Every rowkit token in one object.
|
|
38
40
|
*
|
|
@@ -41,6 +43,50 @@ export { buildThemeCss } from './css';
|
|
|
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)";
|
|
@@ -67,6 +113,10 @@ export declare const tokens: {
|
|
|
67
113
|
readonly 900: "oklch(0.396 0.135 259)";
|
|
68
114
|
readonly 950: "oklch(0.282 0.086 259)";
|
|
69
115
|
};
|
|
116
|
+
readonly red: {
|
|
117
|
+
readonly 577: "oklch(0.577 0.235 27.325)";
|
|
118
|
+
readonly 520: "oklch(0.52 0.212 27.325)";
|
|
119
|
+
};
|
|
70
120
|
readonly success: {
|
|
71
121
|
readonly 50: "oklch(0.97 0.014 152)";
|
|
72
122
|
readonly 100: "oklch(0.936 0.036 152)";
|
|
@@ -163,6 +213,44 @@ export declare const tokens: {
|
|
|
163
213
|
readonly "neutral-800": string;
|
|
164
214
|
readonly "neutral-900": string;
|
|
165
215
|
readonly "neutral-950": string;
|
|
216
|
+
readonly "white-alpha-8": string;
|
|
217
|
+
readonly "white-alpha-10": string;
|
|
218
|
+
readonly "white-alpha-15": string;
|
|
219
|
+
readonly "amber-400": string;
|
|
220
|
+
readonly "amber-950": string;
|
|
221
|
+
readonly "amber-520": string;
|
|
222
|
+
readonly "amber-880": string;
|
|
223
|
+
readonly "amber-850": string;
|
|
224
|
+
readonly "amber-550": string;
|
|
225
|
+
readonly "amber-350": string;
|
|
226
|
+
readonly "amber-260": string;
|
|
227
|
+
readonly "green-400": string;
|
|
228
|
+
readonly "green-950": string;
|
|
229
|
+
readonly "green-520": string;
|
|
230
|
+
readonly "green-880": string;
|
|
231
|
+
readonly "green-850": string;
|
|
232
|
+
readonly "green-550": string;
|
|
233
|
+
readonly "green-350": string;
|
|
234
|
+
readonly "green-260": string;
|
|
235
|
+
readonly "red-577": string;
|
|
236
|
+
readonly "red-520": string;
|
|
237
|
+
readonly "gray-988": string;
|
|
238
|
+
readonly "gray-985": string;
|
|
239
|
+
readonly "gray-972": string;
|
|
240
|
+
readonly "gray-970": string;
|
|
241
|
+
readonly "gray-940": string;
|
|
242
|
+
readonly "gray-922": string;
|
|
243
|
+
readonly "gray-905": string;
|
|
244
|
+
readonly "gray-870": string;
|
|
245
|
+
readonly "gray-708": string;
|
|
246
|
+
readonly "gray-635": string;
|
|
247
|
+
readonly "gray-642": string;
|
|
248
|
+
readonly "gray-556": string;
|
|
249
|
+
readonly "gray-535": string;
|
|
250
|
+
readonly "gray-371": string;
|
|
251
|
+
readonly "gray-269": string;
|
|
252
|
+
readonly "gray-205": string;
|
|
253
|
+
readonly "gray-145": string;
|
|
166
254
|
readonly white: "oklch(1 0 0)";
|
|
167
255
|
readonly black: "oklch(0 0 0)";
|
|
168
256
|
};
|
|
@@ -170,22 +258,22 @@ export declare const tokens: {
|
|
|
170
258
|
readonly semantic: {
|
|
171
259
|
readonly light: {
|
|
172
260
|
readonly background: `var(--color-${string})`;
|
|
173
|
-
readonly
|
|
174
|
-
readonly
|
|
175
|
-
readonly
|
|
261
|
+
readonly card: `var(--color-${string})`;
|
|
262
|
+
readonly muted: `var(--color-${string})`;
|
|
263
|
+
readonly accent: `var(--color-${string})`;
|
|
176
264
|
readonly 'surface-active': `var(--color-${string})`;
|
|
177
265
|
readonly 'surface-selected': `var(--color-${string})`;
|
|
178
266
|
readonly 'surface-disabled': `var(--color-${string})`;
|
|
179
267
|
readonly skeleton: `var(--color-${string})`;
|
|
180
|
-
readonly
|
|
181
|
-
readonly '
|
|
268
|
+
readonly foreground: `var(--color-${string})`;
|
|
269
|
+
readonly 'muted-foreground': `var(--color-${string})`;
|
|
182
270
|
readonly 'text-subtle': `var(--color-${string})`;
|
|
183
271
|
readonly 'text-disabled': `var(--color-${string})`;
|
|
184
272
|
readonly border: `var(--color-${string})`;
|
|
185
273
|
readonly 'border-strong': `var(--color-${string})`;
|
|
186
274
|
readonly 'border-subtle': `var(--color-${string})`;
|
|
187
|
-
readonly
|
|
188
|
-
readonly
|
|
275
|
+
readonly input: `var(--color-${string})`;
|
|
276
|
+
readonly ring: `var(--color-${string})`;
|
|
189
277
|
readonly shadow: `var(--color-${string})`;
|
|
190
278
|
readonly 'neutral-solid': `var(--color-${string})`;
|
|
191
279
|
readonly 'neutral-solid-hover': `var(--color-${string})`;
|
|
@@ -220,22 +308,22 @@ export declare const tokens: {
|
|
|
220
308
|
};
|
|
221
309
|
readonly dark: {
|
|
222
310
|
readonly background: `var(--color-${string})`;
|
|
223
|
-
readonly
|
|
224
|
-
readonly
|
|
225
|
-
readonly
|
|
311
|
+
readonly card: `var(--color-${string})`;
|
|
312
|
+
readonly muted: `var(--color-${string})`;
|
|
313
|
+
readonly accent: `var(--color-${string})`;
|
|
226
314
|
readonly 'surface-active': `var(--color-${string})`;
|
|
227
315
|
readonly 'surface-selected': `var(--color-${string})`;
|
|
228
316
|
readonly 'surface-disabled': `var(--color-${string})`;
|
|
229
317
|
readonly skeleton: `var(--color-${string})`;
|
|
230
|
-
readonly
|
|
231
|
-
readonly '
|
|
318
|
+
readonly foreground: `var(--color-${string})`;
|
|
319
|
+
readonly 'muted-foreground': `var(--color-${string})`;
|
|
232
320
|
readonly 'text-subtle': `var(--color-${string})`;
|
|
233
321
|
readonly 'text-disabled': `var(--color-${string})`;
|
|
234
322
|
readonly border: `var(--color-${string})`;
|
|
235
323
|
readonly 'border-strong': `var(--color-${string})`;
|
|
236
324
|
readonly 'border-subtle': `var(--color-${string})`;
|
|
237
|
-
readonly
|
|
238
|
-
readonly
|
|
325
|
+
readonly input: `var(--color-${string})`;
|
|
326
|
+
readonly ring: `var(--color-${string})`;
|
|
239
327
|
readonly shadow: `var(--color-${string})`;
|
|
240
328
|
readonly 'neutral-solid': `var(--color-${string})`;
|
|
241
329
|
readonly 'neutral-solid-hover': `var(--color-${string})`;
|
|
@@ -342,13 +430,17 @@ export declare const tokens: {
|
|
|
342
430
|
};
|
|
343
431
|
};
|
|
344
432
|
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
433
|
readonly full: "9999px";
|
|
434
|
+
readonly none: string;
|
|
435
|
+
readonly xs: string;
|
|
436
|
+
readonly sm: string;
|
|
437
|
+
readonly md: string;
|
|
438
|
+
readonly lg: string;
|
|
439
|
+
readonly xl: string;
|
|
440
|
+
};
|
|
441
|
+
readonly radiusBase: "0.625rem";
|
|
442
|
+
readonly blur: {
|
|
443
|
+
readonly overlay: "4px";
|
|
352
444
|
};
|
|
353
445
|
readonly shadow: {
|
|
354
446
|
readonly none: "none";
|
|
@@ -357,7 +449,8 @@ export declare const tokens: {
|
|
|
357
449
|
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
450
|
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
451
|
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': "
|
|
452
|
+
readonly 'scroll-x': "12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)";
|
|
453
|
+
readonly 'sticky-header': "inset 0 -1px 0 var(--color-border)";
|
|
361
454
|
};
|
|
362
455
|
readonly zIndex: {
|
|
363
456
|
readonly base: "0";
|