@rowkit/tokens 0.0.0 → 0.1.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.
- package/LICENSE +21 -0
- package/README.md +68 -0
- package/dist/color.d.ts +333 -0
- package/dist/css.d.ts +15 -0
- package/dist/index.d.ts +397 -0
- package/dist/index.js +402 -0
- package/dist/index.js.map +1 -0
- package/dist/motion.d.ts +38 -0
- package/dist/radius.d.ts +24 -0
- package/dist/reference.html +1228 -0
- package/dist/shadow.d.ts +29 -0
- package/dist/spacing.d.ts +51 -0
- package/dist/tokens.css +257 -0
- package/dist/typography.d.ts +86 -0
- package/dist/z-index.d.ts +31 -0
- package/package.json +46 -9
- package/index.js +0 -1
package/dist/shadow.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Elevation shadows.
|
|
3
|
+
*
|
|
4
|
+
* Each shadow mixes from `--color-shadow`, a semantic token, rather than
|
|
5
|
+
* hardcoding a colour — so dark mode swaps the base to pure black by
|
|
6
|
+
* repointing one variable.
|
|
7
|
+
*
|
|
8
|
+
* Dark mode leans on surface lightness for elevation rather than on shadows.
|
|
9
|
+
* A shadow is a darker region, and on a near-black page there is very little
|
|
10
|
+
* headroom left to darken; the raised surface colour does the work instead.
|
|
11
|
+
*/
|
|
12
|
+
export declare const shadow: {
|
|
13
|
+
/** No elevation. */
|
|
14
|
+
readonly none: "none";
|
|
15
|
+
/** Hairline lift — sticky table headers, input focus. */
|
|
16
|
+
readonly xs: "0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent)";
|
|
17
|
+
/** Resting cards. */
|
|
18
|
+
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)";
|
|
19
|
+
/** Dropdowns, popovers. */
|
|
20
|
+
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)";
|
|
21
|
+
/** Menus over content. */
|
|
22
|
+
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)";
|
|
23
|
+
/** Modal dialogs. */
|
|
24
|
+
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)";
|
|
25
|
+
/** Horizontal-scroll affordance on a sticky table column. */
|
|
26
|
+
readonly 'scroll-x': "8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent)";
|
|
27
|
+
};
|
|
28
|
+
/** Names of every shadow token. */
|
|
29
|
+
export type ShadowName = keyof typeof shadow;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Spacing scale.
|
|
3
|
+
*
|
|
4
|
+
* Keys are multiples of the 4px base unit, matching the convention most Vue and
|
|
5
|
+
* Tailwind developers already carry in their heads: `4` is 1rem, `2` is 8px.
|
|
6
|
+
* Fractional steps are deliberately absent — they would need escaped CSS custom
|
|
7
|
+
* property names (`--spacing-0\.5`), and Tailwind v4 already derives arbitrary
|
|
8
|
+
* fractions from {@link spacingBase}.
|
|
9
|
+
*
|
|
10
|
+
* The low end is dense on purpose. A table cell padded at `2`/`3` is the
|
|
11
|
+
* difference between a grid that shows twenty rows and one that shows twelve.
|
|
12
|
+
*/
|
|
13
|
+
export declare const spacing: {
|
|
14
|
+
/** Zero. */
|
|
15
|
+
readonly 0: "0rem";
|
|
16
|
+
/** 1px — hairline offsets and optical nudges, not layout. */
|
|
17
|
+
readonly px: "1px";
|
|
18
|
+
/** 4px — icon-to-label gap. */
|
|
19
|
+
readonly 1: "0.25rem";
|
|
20
|
+
/** 8px — dense table cell padding. */
|
|
21
|
+
readonly 2: "0.5rem";
|
|
22
|
+
/** 12px — default table cell padding, compact control padding. */
|
|
23
|
+
readonly 3: "0.75rem";
|
|
24
|
+
/** 16px — default control padding, tight card padding. */
|
|
25
|
+
readonly 4: "1rem";
|
|
26
|
+
/** 20px */
|
|
27
|
+
readonly 5: "1.25rem";
|
|
28
|
+
/** 24px — card padding, gap between form fields. */
|
|
29
|
+
readonly 6: "1.5rem";
|
|
30
|
+
/** 32px — section spacing. */
|
|
31
|
+
readonly 8: "2rem";
|
|
32
|
+
/** 40px */
|
|
33
|
+
readonly 10: "2.5rem";
|
|
34
|
+
/** 48px — gap between major page regions. */
|
|
35
|
+
readonly 12: "3rem";
|
|
36
|
+
/** 64px — page gutters. */
|
|
37
|
+
readonly 16: "4rem";
|
|
38
|
+
/** 80px */
|
|
39
|
+
readonly 20: "5rem";
|
|
40
|
+
/** 96px — empty-state vertical padding. */
|
|
41
|
+
readonly 24: "6rem";
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* The base unit Tailwind v4 multiplies for dynamic spacing utilities.
|
|
45
|
+
*
|
|
46
|
+
* Emitting this as `--spacing` keeps `p-7` and `mt-3.5` working even though
|
|
47
|
+
* neither has a named token above.
|
|
48
|
+
*/
|
|
49
|
+
export declare const spacingBase = "0.25rem";
|
|
50
|
+
/** Names of every spacing token. */
|
|
51
|
+
export type SpacingName = keyof typeof spacing;
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* rowkit design tokens.
|
|
3
|
+
*
|
|
4
|
+
* GENERATED FILE — DO NOT EDIT.
|
|
5
|
+
* Source of truth: packages/tokens/src/*.ts
|
|
6
|
+
* Regenerate with: pnpm --filter @rowkit/tokens build
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
10
|
+
|
|
11
|
+
@theme {
|
|
12
|
+
/* colour primitives — the only literal colours in rowkit */
|
|
13
|
+
--color-white: oklch(1 0 0);
|
|
14
|
+
--color-black: oklch(0 0 0);
|
|
15
|
+
--color-neutral-50: oklch(0.984 0.003 264);
|
|
16
|
+
--color-neutral-100: oklch(0.968 0.004 264);
|
|
17
|
+
--color-neutral-200: oklch(0.928 0.006 264);
|
|
18
|
+
--color-neutral-300: oklch(0.869 0.01 264);
|
|
19
|
+
--color-neutral-400: oklch(0.704 0.018 264);
|
|
20
|
+
--color-neutral-500: oklch(0.551 0.024 264);
|
|
21
|
+
--color-neutral-600: oklch(0.446 0.027 264);
|
|
22
|
+
--color-neutral-700: oklch(0.373 0.028 264);
|
|
23
|
+
--color-neutral-800: oklch(0.279 0.03 264);
|
|
24
|
+
--color-neutral-900: oklch(0.21 0.033 264);
|
|
25
|
+
--color-neutral-950: oklch(0.13 0.036 264);
|
|
26
|
+
--color-primary-50: oklch(0.97 0.014 259);
|
|
27
|
+
--color-primary-100: oklch(0.936 0.03 259);
|
|
28
|
+
--color-primary-200: oklch(0.885 0.055 259);
|
|
29
|
+
--color-primary-300: oklch(0.809 0.095 259);
|
|
30
|
+
--color-primary-400: oklch(0.715 0.147 259);
|
|
31
|
+
--color-primary-500: oklch(0.623 0.201 259);
|
|
32
|
+
--color-primary-600: oklch(0.546 0.209 259);
|
|
33
|
+
--color-primary-700: oklch(0.488 0.187 259);
|
|
34
|
+
--color-primary-800: oklch(0.442 0.165 259);
|
|
35
|
+
--color-primary-900: oklch(0.396 0.135 259);
|
|
36
|
+
--color-primary-950: oklch(0.282 0.086 259);
|
|
37
|
+
--color-success-50: oklch(0.97 0.014 152);
|
|
38
|
+
--color-success-100: oklch(0.936 0.036 152);
|
|
39
|
+
--color-success-200: oklch(0.885 0.064 152);
|
|
40
|
+
--color-success-300: oklch(0.809 0.097 152);
|
|
41
|
+
--color-success-400: oklch(0.715 0.145 152);
|
|
42
|
+
--color-success-500: oklch(0.623 0.162 152);
|
|
43
|
+
--color-success-600: oklch(0.546 0.142 152);
|
|
44
|
+
--color-success-700: oklch(0.488 0.127 152);
|
|
45
|
+
--color-success-800: oklch(0.442 0.115 152);
|
|
46
|
+
--color-success-900: oklch(0.396 0.103 152);
|
|
47
|
+
--color-success-950: oklch(0.282 0.073 152);
|
|
48
|
+
--color-warning-50: oklch(0.97 0.016 75);
|
|
49
|
+
--color-warning-100: oklch(0.936 0.04 75);
|
|
50
|
+
--color-warning-200: oklch(0.885 0.071 75);
|
|
51
|
+
--color-warning-300: oklch(0.849 0.108 75);
|
|
52
|
+
--color-warning-400: oklch(0.785 0.162 75);
|
|
53
|
+
--color-warning-500: oklch(0.723 0.15 75);
|
|
54
|
+
--color-warning-600: oklch(0.616 0.128 75);
|
|
55
|
+
--color-warning-700: oklch(0.528 0.11 75);
|
|
56
|
+
--color-warning-800: oklch(0.442 0.092 75);
|
|
57
|
+
--color-warning-900: oklch(0.396 0.082 75);
|
|
58
|
+
--color-warning-950: oklch(0.282 0.059 75);
|
|
59
|
+
--color-danger-50: oklch(0.97 0.014 25);
|
|
60
|
+
--color-danger-100: oklch(0.936 0.032 25);
|
|
61
|
+
--color-danger-200: oklch(0.885 0.06 25);
|
|
62
|
+
--color-danger-300: oklch(0.809 0.107 25);
|
|
63
|
+
--color-danger-400: oklch(0.715 0.17 25);
|
|
64
|
+
--color-danger-500: oklch(0.623 0.214 25);
|
|
65
|
+
--color-danger-600: oklch(0.546 0.218 25);
|
|
66
|
+
--color-danger-700: oklch(0.488 0.195 25);
|
|
67
|
+
--color-danger-800: oklch(0.442 0.165 25);
|
|
68
|
+
--color-danger-900: oklch(0.396 0.135 25);
|
|
69
|
+
--color-danger-950: oklch(0.282 0.086 25);
|
|
70
|
+
|
|
71
|
+
/* semantic colours — light (defaults) */
|
|
72
|
+
--color-background: var(--color-neutral-50);
|
|
73
|
+
--color-surface: var(--color-white);
|
|
74
|
+
--color-surface-subtle: var(--color-neutral-100);
|
|
75
|
+
--color-surface-hover: var(--color-neutral-100);
|
|
76
|
+
--color-surface-active: var(--color-neutral-200);
|
|
77
|
+
--color-surface-selected: var(--color-primary-50);
|
|
78
|
+
--color-surface-disabled: var(--color-neutral-100);
|
|
79
|
+
--color-skeleton: var(--color-neutral-200);
|
|
80
|
+
--color-text: var(--color-neutral-900);
|
|
81
|
+
--color-text-muted: var(--color-neutral-600);
|
|
82
|
+
--color-text-subtle: var(--color-neutral-400);
|
|
83
|
+
--color-text-disabled: var(--color-neutral-400);
|
|
84
|
+
--color-border: var(--color-neutral-200);
|
|
85
|
+
--color-border-strong: var(--color-neutral-300);
|
|
86
|
+
--color-border-subtle: var(--color-neutral-100);
|
|
87
|
+
--color-border-control: var(--color-neutral-500);
|
|
88
|
+
--color-focus-ring: var(--color-primary-600);
|
|
89
|
+
--color-shadow: var(--color-neutral-950);
|
|
90
|
+
--color-neutral-solid: var(--color-neutral-700);
|
|
91
|
+
--color-neutral-solid-hover: var(--color-neutral-800);
|
|
92
|
+
--color-neutral-on-solid: var(--color-white);
|
|
93
|
+
--color-neutral-subtle: var(--color-neutral-100);
|
|
94
|
+
--color-neutral-on-subtle: var(--color-neutral-700);
|
|
95
|
+
--color-neutral-border: var(--color-neutral-200);
|
|
96
|
+
--color-primary-solid: var(--color-primary-600);
|
|
97
|
+
--color-primary-solid-hover: var(--color-primary-700);
|
|
98
|
+
--color-primary-on-solid: var(--color-white);
|
|
99
|
+
--color-primary-subtle: var(--color-primary-50);
|
|
100
|
+
--color-primary-on-subtle: var(--color-primary-700);
|
|
101
|
+
--color-primary-border: var(--color-primary-200);
|
|
102
|
+
--color-success-solid: var(--color-success-600);
|
|
103
|
+
--color-success-solid-hover: var(--color-success-700);
|
|
104
|
+
--color-success-on-solid: var(--color-white);
|
|
105
|
+
--color-success-subtle: var(--color-success-50);
|
|
106
|
+
--color-success-on-subtle: var(--color-success-700);
|
|
107
|
+
--color-success-border: var(--color-success-200);
|
|
108
|
+
--color-warning-solid: var(--color-warning-600);
|
|
109
|
+
--color-warning-solid-hover: var(--color-warning-500);
|
|
110
|
+
--color-warning-on-solid: var(--color-neutral-900);
|
|
111
|
+
--color-warning-subtle: var(--color-warning-50);
|
|
112
|
+
--color-warning-on-subtle: var(--color-warning-700);
|
|
113
|
+
--color-warning-border: var(--color-warning-200);
|
|
114
|
+
--color-danger-solid: var(--color-danger-600);
|
|
115
|
+
--color-danger-solid-hover: var(--color-danger-700);
|
|
116
|
+
--color-danger-on-solid: var(--color-white);
|
|
117
|
+
--color-danger-subtle: var(--color-danger-50);
|
|
118
|
+
--color-danger-on-subtle: var(--color-danger-700);
|
|
119
|
+
--color-danger-border: var(--color-danger-200);
|
|
120
|
+
|
|
121
|
+
/* spacing */
|
|
122
|
+
--spacing: 0.25rem;
|
|
123
|
+
--spacing-0: 0rem;
|
|
124
|
+
--spacing-1: 0.25rem;
|
|
125
|
+
--spacing-2: 0.5rem;
|
|
126
|
+
--spacing-3: 0.75rem;
|
|
127
|
+
--spacing-4: 1rem;
|
|
128
|
+
--spacing-5: 1.25rem;
|
|
129
|
+
--spacing-6: 1.5rem;
|
|
130
|
+
--spacing-8: 2rem;
|
|
131
|
+
--spacing-10: 2.5rem;
|
|
132
|
+
--spacing-12: 3rem;
|
|
133
|
+
--spacing-16: 4rem;
|
|
134
|
+
--spacing-20: 5rem;
|
|
135
|
+
--spacing-24: 6rem;
|
|
136
|
+
--spacing-px: 1px;
|
|
137
|
+
|
|
138
|
+
/* typography */
|
|
139
|
+
--font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
|
|
140
|
+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
|
|
141
|
+
--text-xs: 0.75rem;
|
|
142
|
+
--text-xs--line-height: 1rem;
|
|
143
|
+
--text-sm: 0.875rem;
|
|
144
|
+
--text-sm--line-height: 1.25rem;
|
|
145
|
+
--text-base: 1rem;
|
|
146
|
+
--text-base--line-height: 1.5rem;
|
|
147
|
+
--text-lg: 1.125rem;
|
|
148
|
+
--text-lg--line-height: 1.75rem;
|
|
149
|
+
--text-xl: 1.25rem;
|
|
150
|
+
--text-xl--line-height: 1.75rem;
|
|
151
|
+
--text-2xl: 1.5rem;
|
|
152
|
+
--text-2xl--line-height: 2rem;
|
|
153
|
+
--text-3xl: 1.875rem;
|
|
154
|
+
--text-3xl--line-height: 2.25rem;
|
|
155
|
+
--font-weight-normal: 400;
|
|
156
|
+
--font-weight-medium: 500;
|
|
157
|
+
--font-weight-semibold: 600;
|
|
158
|
+
--font-weight-bold: 700;
|
|
159
|
+
--tracking-tight: -0.015em;
|
|
160
|
+
--tracking-normal: 0em;
|
|
161
|
+
--tracking-wide: 0.04em;
|
|
162
|
+
--leading-none: 1;
|
|
163
|
+
--leading-tight: 1.25;
|
|
164
|
+
--leading-snug: 1.375;
|
|
165
|
+
--leading-normal: 1.5;
|
|
166
|
+
--leading-relaxed: 1.625;
|
|
167
|
+
|
|
168
|
+
/* radii */
|
|
169
|
+
--radius-none: 0rem;
|
|
170
|
+
--radius-xs: 0.125rem;
|
|
171
|
+
--radius-sm: 0.25rem;
|
|
172
|
+
--radius-md: 0.375rem;
|
|
173
|
+
--radius-lg: 0.5rem;
|
|
174
|
+
--radius-xl: 0.75rem;
|
|
175
|
+
--radius-full: 9999px;
|
|
176
|
+
|
|
177
|
+
/* shadows */
|
|
178
|
+
--shadow-none: none;
|
|
179
|
+
--shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent);
|
|
180
|
+
--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);
|
|
181
|
+
--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);
|
|
182
|
+
--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);
|
|
183
|
+
--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);
|
|
184
|
+
--shadow-scroll-x: 8px 0 8px -8px color-mix(in oklab, var(--color-shadow) 15%, transparent);
|
|
185
|
+
|
|
186
|
+
/* motion */
|
|
187
|
+
--transition-duration-instant: 0ms;
|
|
188
|
+
--transition-duration-fast: 120ms;
|
|
189
|
+
--transition-duration-normal: 200ms;
|
|
190
|
+
--transition-duration-slow: 320ms;
|
|
191
|
+
--ease-linear: linear;
|
|
192
|
+
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
193
|
+
--ease-enter: cubic-bezier(0, 0, 0.2, 1);
|
|
194
|
+
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
195
|
+
|
|
196
|
+
/* stacking layers */
|
|
197
|
+
--z-index-base: 0;
|
|
198
|
+
--z-index-sticky: 100;
|
|
199
|
+
--z-index-dropdown: 200;
|
|
200
|
+
--z-index-overlay: 300;
|
|
201
|
+
--z-index-modal: 400;
|
|
202
|
+
--z-index-popover: 500;
|
|
203
|
+
--z-index-toast: 600;
|
|
204
|
+
--z-index-tooltip: 700;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* Dark mode repoints semantic tokens only. Primitives are theme-agnostic. */
|
|
208
|
+
.dark {
|
|
209
|
+
--color-background: var(--color-neutral-950);
|
|
210
|
+
--color-surface: var(--color-neutral-900);
|
|
211
|
+
--color-surface-subtle: var(--color-neutral-800);
|
|
212
|
+
--color-surface-hover: var(--color-neutral-800);
|
|
213
|
+
--color-surface-active: var(--color-neutral-700);
|
|
214
|
+
--color-surface-selected: var(--color-primary-950);
|
|
215
|
+
--color-surface-disabled: var(--color-neutral-800);
|
|
216
|
+
--color-skeleton: var(--color-neutral-800);
|
|
217
|
+
--color-text: var(--color-neutral-50);
|
|
218
|
+
--color-text-muted: var(--color-neutral-400);
|
|
219
|
+
--color-text-subtle: var(--color-neutral-500);
|
|
220
|
+
--color-text-disabled: var(--color-neutral-600);
|
|
221
|
+
--color-border: var(--color-neutral-800);
|
|
222
|
+
--color-border-strong: var(--color-neutral-700);
|
|
223
|
+
--color-border-subtle: var(--color-neutral-900);
|
|
224
|
+
--color-border-control: var(--color-neutral-500);
|
|
225
|
+
--color-focus-ring: var(--color-primary-400);
|
|
226
|
+
--color-shadow: var(--color-black);
|
|
227
|
+
--color-neutral-solid: var(--color-neutral-400);
|
|
228
|
+
--color-neutral-solid-hover: var(--color-neutral-300);
|
|
229
|
+
--color-neutral-on-solid: var(--color-neutral-950);
|
|
230
|
+
--color-neutral-subtle: var(--color-neutral-800);
|
|
231
|
+
--color-neutral-on-subtle: var(--color-neutral-200);
|
|
232
|
+
--color-neutral-border: var(--color-neutral-700);
|
|
233
|
+
--color-primary-solid: var(--color-primary-400);
|
|
234
|
+
--color-primary-solid-hover: var(--color-primary-300);
|
|
235
|
+
--color-primary-on-solid: var(--color-neutral-950);
|
|
236
|
+
--color-primary-subtle: var(--color-primary-950);
|
|
237
|
+
--color-primary-on-subtle: var(--color-primary-300);
|
|
238
|
+
--color-primary-border: var(--color-primary-800);
|
|
239
|
+
--color-success-solid: var(--color-success-400);
|
|
240
|
+
--color-success-solid-hover: var(--color-success-300);
|
|
241
|
+
--color-success-on-solid: var(--color-neutral-950);
|
|
242
|
+
--color-success-subtle: var(--color-success-950);
|
|
243
|
+
--color-success-on-subtle: var(--color-success-300);
|
|
244
|
+
--color-success-border: var(--color-success-800);
|
|
245
|
+
--color-warning-solid: var(--color-warning-400);
|
|
246
|
+
--color-warning-solid-hover: var(--color-warning-300);
|
|
247
|
+
--color-warning-on-solid: var(--color-neutral-950);
|
|
248
|
+
--color-warning-subtle: var(--color-warning-950);
|
|
249
|
+
--color-warning-on-subtle: var(--color-warning-300);
|
|
250
|
+
--color-warning-border: var(--color-warning-800);
|
|
251
|
+
--color-danger-solid: var(--color-danger-400);
|
|
252
|
+
--color-danger-solid-hover: var(--color-danger-300);
|
|
253
|
+
--color-danger-on-solid: var(--color-neutral-950);
|
|
254
|
+
--color-danger-subtle: var(--color-danger-950);
|
|
255
|
+
--color-danger-on-subtle: var(--color-danger-300);
|
|
256
|
+
--color-danger-border: var(--color-danger-800);
|
|
257
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typography scale.
|
|
3
|
+
*
|
|
4
|
+
* Weighted toward the small end: a dashboard spends most of its type budget
|
|
5
|
+
* between 12px and 16px, and the sizes above `xl` exist for empty states and
|
|
6
|
+
* page titles rather than for data.
|
|
7
|
+
*/
|
|
8
|
+
/** Font families. Both stacks start with a system font — no webfont request. */
|
|
9
|
+
export declare const fontFamily: {
|
|
10
|
+
/** UI and body text. */
|
|
11
|
+
readonly sans: string;
|
|
12
|
+
/** IDs, hashes, numeric columns that must align vertically. */
|
|
13
|
+
readonly mono: string;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Font sizes, each paired with the line height it should almost always use.
|
|
17
|
+
*
|
|
18
|
+
* Pairing them prevents the most common typographic bug in a dense table:
|
|
19
|
+
* shrinking the font without shrinking leading, so rows stay tall and the
|
|
20
|
+
* density gain evaporates.
|
|
21
|
+
*/
|
|
22
|
+
export declare const fontSize: {
|
|
23
|
+
/** 12px — table metadata, badges, column headers. */
|
|
24
|
+
readonly xs: {
|
|
25
|
+
readonly size: "0.75rem";
|
|
26
|
+
readonly lineHeight: "1rem";
|
|
27
|
+
};
|
|
28
|
+
/** 14px — the default for table cells and form controls. */
|
|
29
|
+
readonly sm: {
|
|
30
|
+
readonly size: "0.875rem";
|
|
31
|
+
readonly lineHeight: "1.25rem";
|
|
32
|
+
};
|
|
33
|
+
/** 16px — body copy outside of data views. */
|
|
34
|
+
readonly base: {
|
|
35
|
+
readonly size: "1rem";
|
|
36
|
+
readonly lineHeight: "1.5rem";
|
|
37
|
+
};
|
|
38
|
+
/** 18px — card titles. */
|
|
39
|
+
readonly lg: {
|
|
40
|
+
readonly size: "1.125rem";
|
|
41
|
+
readonly lineHeight: "1.75rem";
|
|
42
|
+
};
|
|
43
|
+
/** 20px — section headings. */
|
|
44
|
+
readonly xl: {
|
|
45
|
+
readonly size: "1.25rem";
|
|
46
|
+
readonly lineHeight: "1.75rem";
|
|
47
|
+
};
|
|
48
|
+
/** 24px — page titles, empty-state headings. */
|
|
49
|
+
readonly '2xl': {
|
|
50
|
+
readonly size: "1.5rem";
|
|
51
|
+
readonly lineHeight: "2rem";
|
|
52
|
+
};
|
|
53
|
+
/** 30px — the largest size rowkit ships. */
|
|
54
|
+
readonly '3xl': {
|
|
55
|
+
readonly size: "1.875rem";
|
|
56
|
+
readonly lineHeight: "2.25rem";
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
/** Font weights. */
|
|
60
|
+
export declare const fontWeight: {
|
|
61
|
+
/** Body text. */
|
|
62
|
+
readonly normal: "400";
|
|
63
|
+
/** Column headers, subtle emphasis. */
|
|
64
|
+
readonly medium: "500";
|
|
65
|
+
/** Buttons, card titles. */
|
|
66
|
+
readonly semibold: "600";
|
|
67
|
+
/** Page titles. */
|
|
68
|
+
readonly bold: "700";
|
|
69
|
+
};
|
|
70
|
+
/** Letter spacing. Tightening only pays off at display sizes. */
|
|
71
|
+
export declare const letterSpacing: {
|
|
72
|
+
readonly tight: "-0.015em";
|
|
73
|
+
readonly normal: "0em";
|
|
74
|
+
/** For uppercase micro-labels, which need air to stay readable. */
|
|
75
|
+
readonly wide: "0.04em";
|
|
76
|
+
};
|
|
77
|
+
/** Standalone line heights, for when text is not using a paired {@link fontSize}. */
|
|
78
|
+
export declare const lineHeight: {
|
|
79
|
+
readonly none: "1";
|
|
80
|
+
readonly tight: "1.25";
|
|
81
|
+
readonly snug: "1.375";
|
|
82
|
+
readonly normal: "1.5";
|
|
83
|
+
readonly relaxed: "1.625";
|
|
84
|
+
};
|
|
85
|
+
/** Names of every font size token. */
|
|
86
|
+
export type FontSizeName = keyof typeof fontSize;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Stacking layers.
|
|
3
|
+
*
|
|
4
|
+
* Spaced by 100 so a consumer can slot their own chrome — an app header, a
|
|
5
|
+
* cookie banner — between two rowkit layers without editing rowkit or starting
|
|
6
|
+
* a `z-index: 99999` arms race.
|
|
7
|
+
*
|
|
8
|
+
* The ordering is not arbitrary. A tooltip must outrank a toast, because a
|
|
9
|
+
* toast can carry an action button that itself has a tooltip. A popover must
|
|
10
|
+
* outrank a modal, because a select inside a dialog opens a popover.
|
|
11
|
+
*/
|
|
12
|
+
export declare const zIndex: {
|
|
13
|
+
/** Default flow. */
|
|
14
|
+
readonly base: "0";
|
|
15
|
+
/** Sticky table header and pinned columns. */
|
|
16
|
+
readonly sticky: "100";
|
|
17
|
+
/** Dropdown menus attached to page-level content. */
|
|
18
|
+
readonly dropdown: "200";
|
|
19
|
+
/** Backdrop behind a modal. */
|
|
20
|
+
readonly overlay: "300";
|
|
21
|
+
/** Dialog surface. */
|
|
22
|
+
readonly modal: "400";
|
|
23
|
+
/** Popovers and selects — must sit above a dialog to work inside one. */
|
|
24
|
+
readonly popover: "500";
|
|
25
|
+
/** Toast queue. */
|
|
26
|
+
readonly toast: "600";
|
|
27
|
+
/** Tooltips outrank everything, including toasts. */
|
|
28
|
+
readonly tooltip: "700";
|
|
29
|
+
};
|
|
30
|
+
/** Names of every z-index token. */
|
|
31
|
+
export type ZIndexName = keyof typeof zIndex;
|
package/package.json
CHANGED
|
@@ -1,10 +1,47 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
"name": "@rowkit/tokens",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Design tokens for rowkit — consumable without importing components.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Nikolai Kushner",
|
|
7
|
+
"homepage": "https://rowkit.dev",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/NikolaiKushner/rowkit.git",
|
|
11
|
+
"directory": "packages/tokens"
|
|
12
|
+
},
|
|
13
|
+
"bugs": "https://github.com/NikolaiKushner/rowkit/issues",
|
|
14
|
+
"keywords": [
|
|
15
|
+
"design-tokens",
|
|
16
|
+
"design-system",
|
|
17
|
+
"rowkit"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
20
|
+
"sideEffects": false,
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
24
|
+
"main": "./dist/index.js",
|
|
25
|
+
"module": "./dist/index.js",
|
|
26
|
+
"types": "./dist/index.d.ts",
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"types": "./dist/index.d.ts",
|
|
30
|
+
"import": "./dist/index.js"
|
|
31
|
+
},
|
|
32
|
+
"./css": "./dist/tokens.css",
|
|
33
|
+
"./package.json": "./package.json"
|
|
34
|
+
},
|
|
35
|
+
"publishConfig": {
|
|
36
|
+
"access": "public",
|
|
37
|
+
"provenance": true
|
|
38
|
+
},
|
|
39
|
+
"engines": {
|
|
40
|
+
"node": ">=20.19.0"
|
|
41
|
+
},
|
|
42
|
+
"scripts": {
|
|
43
|
+
"build": "vue-tsc -b tsconfig.lib.json --force && vite build && node scripts/fix-dts-specifiers.mjs && node scripts/emit-css.mjs && node scripts/emit-reference.mjs",
|
|
44
|
+
"typecheck": "vue-tsc -b --force",
|
|
45
|
+
"reference": "pnpm build && open dist/reference.html"
|
|
46
|
+
}
|
|
47
|
+
}
|
package/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
// placeholder
|