@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.
- package/README.md +6 -4
- package/dist/blur.d.ts +18 -0
- package/dist/color.d.ts +295 -51
- package/dist/index.d.ts +134 -35
- package/dist/index.js +284 -194
- package/dist/index.js.map +1 -1
- package/dist/radius.d.ts +67 -15
- package/dist/reference.html +301 -254
- package/dist/shadow.d.ts +12 -1
- package/dist/tokens.css +158 -108
- package/dist/typography.d.ts +11 -4
- package/package.json +1 -1
package/dist/shadow.d.ts
CHANGED
|
@@ -23,7 +23,18 @@ export declare const shadow: {
|
|
|
23
23
|
/** Modal dialogs. */
|
|
24
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
25
|
/** Horizontal-scroll affordance on a sticky table column. */
|
|
26
|
-
readonly 'scroll-x': "
|
|
26
|
+
readonly 'scroll-x': "12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent)";
|
|
27
|
+
/**
|
|
28
|
+
* The rule under a sticky table header, drawn as a shadow rather than a
|
|
29
|
+
* border.
|
|
30
|
+
*
|
|
31
|
+
* Under `border-collapse` a border belongs to the table's grid, not to any
|
|
32
|
+
* cell, so a `position: sticky` header leaves its border behind and scrolls
|
|
33
|
+
* away from it — the rows then slide under a header with nothing between
|
|
34
|
+
* them, which is the one thing a sticky header exists to prevent. A shadow
|
|
35
|
+
* belongs to the element and travels with it.
|
|
36
|
+
*/
|
|
37
|
+
readonly 'sticky-header': "inset 0 -1px 0 var(--color-border)";
|
|
27
38
|
};
|
|
28
39
|
/** Names of every shadow token. */
|
|
29
40
|
export type ShadowName = keyof typeof shadow;
|
package/dist/tokens.css
CHANGED
|
@@ -12,6 +12,47 @@
|
|
|
12
12
|
/* colour primitives — the only literal colours in rowkit */
|
|
13
13
|
--color-white: oklch(1 0 0);
|
|
14
14
|
--color-black: oklch(0 0 0);
|
|
15
|
+
--color-gray-145: oklch(0.145 0 0);
|
|
16
|
+
--color-gray-205: oklch(0.205 0 0);
|
|
17
|
+
--color-gray-269: oklch(0.269 0 0);
|
|
18
|
+
--color-gray-371: oklch(0.371 0 0);
|
|
19
|
+
--color-gray-535: oklch(0.535 0 0);
|
|
20
|
+
--color-gray-556: oklch(0.556 0 0);
|
|
21
|
+
--color-gray-635: oklch(0.635 0 0);
|
|
22
|
+
--color-gray-642: oklch(0.642 0.012 264);
|
|
23
|
+
--color-gray-708: oklch(0.708 0 0);
|
|
24
|
+
--color-gray-870: oklch(0.87 0 0);
|
|
25
|
+
--color-gray-905: oklch(0.905 0.006 264);
|
|
26
|
+
--color-gray-922: oklch(0.922 0 0);
|
|
27
|
+
--color-gray-940: oklch(0.940 0.004 264);
|
|
28
|
+
--color-gray-970: oklch(0.97 0 0);
|
|
29
|
+
--color-gray-972: oklch(0.972 0.003 264);
|
|
30
|
+
--color-gray-985: oklch(0.985 0 0);
|
|
31
|
+
--color-gray-988: oklch(0.988 0.002 264);
|
|
32
|
+
--color-red-260: oklch(0.32 0.045 25);
|
|
33
|
+
--color-red-350: oklch(0.38 0.055 25);
|
|
34
|
+
--color-red-520: oklch(0.52 0.212 27.325);
|
|
35
|
+
--color-red-577: oklch(0.577 0.235 27.325);
|
|
36
|
+
--color-red-850: oklch(0.85 0.08 25);
|
|
37
|
+
--color-green-260: oklch(0.26 0.068 152);
|
|
38
|
+
--color-green-350: oklch(0.35 0.092 152);
|
|
39
|
+
--color-green-400: oklch(0.4 0.105 152);
|
|
40
|
+
--color-green-520: oklch(0.52 0.136 152);
|
|
41
|
+
--color-green-550: oklch(0.55 0.144 152);
|
|
42
|
+
--color-green-850: oklch(0.85 0.12 152);
|
|
43
|
+
--color-green-880: oklch(0.88 0.05 152);
|
|
44
|
+
--color-green-950: oklch(0.95 0.05 152);
|
|
45
|
+
--color-amber-260: oklch(0.26 0.055 75);
|
|
46
|
+
--color-amber-350: oklch(0.35 0.074 75);
|
|
47
|
+
--color-amber-400: oklch(0.4 0.084 75);
|
|
48
|
+
--color-amber-520: oklch(0.52 0.109 75);
|
|
49
|
+
--color-amber-550: oklch(0.55 0.116 75);
|
|
50
|
+
--color-amber-850: oklch(0.85 0.12 75);
|
|
51
|
+
--color-amber-880: oklch(0.88 0.05 75);
|
|
52
|
+
--color-amber-950: oklch(0.95 0.04 75);
|
|
53
|
+
--color-white-alpha-8: oklch(1 0 0 / 8%);
|
|
54
|
+
--color-white-alpha-10: oklch(1 0 0 / 10%);
|
|
55
|
+
--color-white-alpha-15: oklch(1 0 0 / 15%);
|
|
15
56
|
--color-neutral-50: oklch(0.984 0.003 264);
|
|
16
57
|
--color-neutral-100: oklch(0.968 0.004 264);
|
|
17
58
|
--color-neutral-200: oklch(0.928 0.006 264);
|
|
@@ -23,17 +64,17 @@
|
|
|
23
64
|
--color-neutral-800: oklch(0.279 0.03 264);
|
|
24
65
|
--color-neutral-900: oklch(0.21 0.033 264);
|
|
25
66
|
--color-neutral-950: oklch(0.13 0.036 264);
|
|
26
|
-
--color-primary-50: oklch(0.
|
|
27
|
-
--color-primary-100: oklch(0.
|
|
28
|
-
--color-primary-200: oklch(0.
|
|
29
|
-
--color-primary-300: oklch(0.
|
|
30
|
-
--color-primary-400: oklch(0.
|
|
31
|
-
--color-primary-500: oklch(0.
|
|
32
|
-
--color-primary-600: oklch(0.
|
|
33
|
-
--color-primary-700: oklch(0.
|
|
34
|
-
--color-primary-800: oklch(0.
|
|
35
|
-
--color-primary-900: oklch(0.
|
|
36
|
-
--color-primary-950: oklch(0.
|
|
67
|
+
--color-primary-50: oklch(0.975 0.01 48);
|
|
68
|
+
--color-primary-100: oklch(0.95 0.014 48);
|
|
69
|
+
--color-primary-200: oklch(0.90 0.02 48);
|
|
70
|
+
--color-primary-300: oklch(0.80 0.026 48);
|
|
71
|
+
--color-primary-400: oklch(0.68 0.032 48);
|
|
72
|
+
--color-primary-500: oklch(0.50 0.036 48);
|
|
73
|
+
--color-primary-600: oklch(0.40 0.037 48);
|
|
74
|
+
--color-primary-700: oklch(0.35 0.037 48);
|
|
75
|
+
--color-primary-800: oklch(0.31 0.038 48);
|
|
76
|
+
--color-primary-900: oklch(0.26 0.032 48);
|
|
77
|
+
--color-primary-950: oklch(0.18 0.024 48);
|
|
37
78
|
--color-success-50: oklch(0.97 0.014 152);
|
|
38
79
|
--color-success-100: oklch(0.936 0.036 152);
|
|
39
80
|
--color-success-200: oklch(0.885 0.064 152);
|
|
@@ -69,52 +110,52 @@
|
|
|
69
110
|
--color-danger-950: oklch(0.282 0.086 25);
|
|
70
111
|
|
|
71
112
|
/* semantic colours — light (defaults) */
|
|
72
|
-
--color-background: var(--color-
|
|
73
|
-
--color-
|
|
74
|
-
--color-
|
|
75
|
-
--color-
|
|
76
|
-
--color-surface-active: var(--color-
|
|
113
|
+
--color-background: var(--color-gray-988);
|
|
114
|
+
--color-card: var(--color-white);
|
|
115
|
+
--color-muted: var(--color-gray-972);
|
|
116
|
+
--color-accent: var(--color-gray-972);
|
|
117
|
+
--color-surface-active: var(--color-gray-940);
|
|
77
118
|
--color-surface-selected: var(--color-primary-50);
|
|
78
|
-
--color-surface-disabled: var(--color-
|
|
79
|
-
--color-skeleton: var(--color-
|
|
80
|
-
--color-
|
|
81
|
-
--color-
|
|
82
|
-
--color-text-subtle: var(--color-
|
|
83
|
-
--color-text-disabled: var(--color-
|
|
84
|
-
--color-border: var(--color-
|
|
85
|
-
--color-border-strong: var(--color-
|
|
86
|
-
--color-border-subtle: var(--color-
|
|
87
|
-
--color-
|
|
88
|
-
--color-
|
|
89
|
-
--color-shadow: var(--color-
|
|
90
|
-
--color-neutral-solid: var(--color-
|
|
91
|
-
--color-neutral-solid-hover: var(--color-
|
|
92
|
-
--color-neutral-on-solid: var(--color-
|
|
93
|
-
--color-neutral-subtle: var(--color-
|
|
94
|
-
--color-neutral-on-subtle: var(--color-
|
|
95
|
-
--color-neutral-border: var(--color-
|
|
96
|
-
--color-primary-solid: var(--color-primary-
|
|
97
|
-
--color-primary-solid-hover: var(--color-primary-
|
|
98
|
-
--color-primary-on-solid: var(--color-
|
|
119
|
+
--color-surface-disabled: var(--color-gray-972);
|
|
120
|
+
--color-skeleton: var(--color-gray-972);
|
|
121
|
+
--color-foreground: var(--color-gray-145);
|
|
122
|
+
--color-muted-foreground: var(--color-gray-535);
|
|
123
|
+
--color-text-subtle: var(--color-gray-635);
|
|
124
|
+
--color-text-disabled: var(--color-gray-708);
|
|
125
|
+
--color-border: var(--color-gray-940);
|
|
126
|
+
--color-border-strong: var(--color-gray-905);
|
|
127
|
+
--color-border-subtle: var(--color-gray-972);
|
|
128
|
+
--color-input: var(--color-gray-870);
|
|
129
|
+
--color-ring: var(--color-gray-708);
|
|
130
|
+
--color-shadow: var(--color-black);
|
|
131
|
+
--color-neutral-solid: var(--color-gray-972);
|
|
132
|
+
--color-neutral-solid-hover: var(--color-gray-940);
|
|
133
|
+
--color-neutral-on-solid: var(--color-gray-205);
|
|
134
|
+
--color-neutral-subtle: var(--color-gray-972);
|
|
135
|
+
--color-neutral-on-subtle: var(--color-gray-205);
|
|
136
|
+
--color-neutral-border: var(--color-gray-940);
|
|
137
|
+
--color-primary-solid: var(--color-primary-800);
|
|
138
|
+
--color-primary-solid-hover: var(--color-primary-900);
|
|
139
|
+
--color-primary-on-solid: var(--color-gray-985);
|
|
99
140
|
--color-primary-subtle: var(--color-primary-50);
|
|
100
|
-
--color-primary-on-subtle: var(--color-primary-
|
|
141
|
+
--color-primary-on-subtle: var(--color-primary-900);
|
|
101
142
|
--color-primary-border: var(--color-primary-200);
|
|
102
|
-
--color-success-solid: var(--color-
|
|
103
|
-
--color-success-solid-hover: var(--color-
|
|
143
|
+
--color-success-solid: var(--color-green-550);
|
|
144
|
+
--color-success-solid-hover: var(--color-green-520);
|
|
104
145
|
--color-success-on-solid: var(--color-white);
|
|
105
|
-
--color-success-subtle: var(--color-
|
|
106
|
-
--color-success-on-subtle: var(--color-
|
|
107
|
-
--color-success-border: var(--color-
|
|
108
|
-
--color-warning-solid: var(--color-
|
|
109
|
-
--color-warning-solid-hover: var(--color-
|
|
110
|
-
--color-warning-on-solid: var(--color-
|
|
111
|
-
--color-warning-subtle: var(--color-
|
|
112
|
-
--color-warning-on-subtle: var(--color-
|
|
113
|
-
--color-warning-border: var(--color-
|
|
114
|
-
--color-danger-solid: var(--color-
|
|
115
|
-
--color-danger-solid-hover: var(--color-
|
|
146
|
+
--color-success-subtle: var(--color-green-950);
|
|
147
|
+
--color-success-on-subtle: var(--color-green-400);
|
|
148
|
+
--color-success-border: var(--color-green-880);
|
|
149
|
+
--color-warning-solid: var(--color-amber-550);
|
|
150
|
+
--color-warning-solid-hover: var(--color-amber-520);
|
|
151
|
+
--color-warning-on-solid: var(--color-white);
|
|
152
|
+
--color-warning-subtle: var(--color-amber-950);
|
|
153
|
+
--color-warning-on-subtle: var(--color-amber-400);
|
|
154
|
+
--color-warning-border: var(--color-amber-880);
|
|
155
|
+
--color-danger-solid: var(--color-red-577);
|
|
156
|
+
--color-danger-solid-hover: var(--color-red-520);
|
|
116
157
|
--color-danger-on-solid: var(--color-white);
|
|
117
|
-
--color-danger-subtle: var(--color-danger-
|
|
158
|
+
--color-danger-subtle: var(--color-danger-100);
|
|
118
159
|
--color-danger-on-subtle: var(--color-danger-700);
|
|
119
160
|
--color-danger-border: var(--color-danger-200);
|
|
120
161
|
|
|
@@ -136,8 +177,8 @@
|
|
|
136
177
|
--spacing-px: 1px;
|
|
137
178
|
|
|
138
179
|
/* 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;
|
|
180
|
+
--font-sans: "Geist Variable", Geist, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
|
|
181
|
+
--font-mono: "Geist Mono Variable", Geist Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace;
|
|
141
182
|
--text-xs: 0.75rem;
|
|
142
183
|
--text-xs--line-height: 1rem;
|
|
143
184
|
--text-sm: 0.875rem;
|
|
@@ -165,15 +206,18 @@
|
|
|
165
206
|
--leading-normal: 1.5;
|
|
166
207
|
--leading-relaxed: 1.625;
|
|
167
208
|
|
|
168
|
-
/* radii */
|
|
209
|
+
/* radii — multiples of --radius, declared in :root below */
|
|
169
210
|
--radius-none: 0rem;
|
|
170
|
-
--radius-xs: 0.
|
|
171
|
-
--radius-sm: 0.
|
|
172
|
-
--radius-md: 0.
|
|
173
|
-
--radius-lg:
|
|
174
|
-
--radius-xl:
|
|
211
|
+
--radius-xs: calc(var(--radius) * 0.4);
|
|
212
|
+
--radius-sm: calc(var(--radius) * 0.6);
|
|
213
|
+
--radius-md: calc(var(--radius) * 0.8);
|
|
214
|
+
--radius-lg: var(--radius);
|
|
215
|
+
--radius-xl: calc(var(--radius) * 1.4);
|
|
175
216
|
--radius-full: 9999px;
|
|
176
217
|
|
|
218
|
+
/* blur */
|
|
219
|
+
--blur-overlay: 4px;
|
|
220
|
+
|
|
177
221
|
/* shadows */
|
|
178
222
|
--shadow-none: none;
|
|
179
223
|
--shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent);
|
|
@@ -181,7 +225,8 @@
|
|
|
181
225
|
--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
226
|
--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
227
|
--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:
|
|
228
|
+
--shadow-scroll-x: 12px 0 16px -8px color-mix(in oklab, var(--color-shadow) 22%, transparent);
|
|
229
|
+
--shadow-sticky-header: inset 0 -1px 0 var(--color-border);
|
|
185
230
|
|
|
186
231
|
/* motion */
|
|
187
232
|
--transition-duration-instant: 0ms;
|
|
@@ -204,54 +249,59 @@
|
|
|
204
249
|
--z-index-tooltip: 700;
|
|
205
250
|
}
|
|
206
251
|
|
|
252
|
+
/* The one length the radius scale multiplies. Override to retune every corner. */
|
|
253
|
+
:root {
|
|
254
|
+
--radius: 0.5rem;
|
|
255
|
+
}
|
|
256
|
+
|
|
207
257
|
/* Dark mode repoints semantic tokens only. Primitives are theme-agnostic. */
|
|
208
258
|
.dark {
|
|
209
|
-
--color-background: var(--color-
|
|
210
|
-
--color-
|
|
211
|
-
--color-
|
|
212
|
-
--color-
|
|
213
|
-
--color-surface-active: var(--color-
|
|
214
|
-
--color-surface-selected: var(--color-
|
|
215
|
-
--color-surface-disabled: var(--color-
|
|
216
|
-
--color-skeleton: var(--color-
|
|
217
|
-
--color-
|
|
218
|
-
--color-
|
|
219
|
-
--color-text-subtle: var(--color-
|
|
220
|
-
--color-text-disabled: var(--color-
|
|
221
|
-
--color-border: var(--color-
|
|
222
|
-
--color-border-strong: var(--color-
|
|
223
|
-
--color-border-subtle: var(--color-
|
|
224
|
-
--color-
|
|
225
|
-
--color-
|
|
259
|
+
--color-background: var(--color-gray-145);
|
|
260
|
+
--color-card: var(--color-gray-205);
|
|
261
|
+
--color-muted: var(--color-gray-269);
|
|
262
|
+
--color-accent: var(--color-gray-269);
|
|
263
|
+
--color-surface-active: var(--color-gray-371);
|
|
264
|
+
--color-surface-selected: var(--color-gray-269);
|
|
265
|
+
--color-surface-disabled: var(--color-gray-269);
|
|
266
|
+
--color-skeleton: var(--color-gray-269);
|
|
267
|
+
--color-foreground: var(--color-gray-985);
|
|
268
|
+
--color-muted-foreground: var(--color-gray-708);
|
|
269
|
+
--color-text-subtle: var(--color-gray-556);
|
|
270
|
+
--color-text-disabled: var(--color-gray-556);
|
|
271
|
+
--color-border: var(--color-white-alpha-8);
|
|
272
|
+
--color-border-strong: var(--color-white-alpha-15);
|
|
273
|
+
--color-border-subtle: var(--color-white-alpha-8);
|
|
274
|
+
--color-input: var(--color-white-alpha-15);
|
|
275
|
+
--color-ring: var(--color-white-alpha-15);
|
|
226
276
|
--color-shadow: var(--color-black);
|
|
227
|
-
--color-neutral-solid: var(--color-
|
|
228
|
-
--color-neutral-solid-hover: var(--color-
|
|
229
|
-
--color-neutral-on-solid: var(--color-
|
|
230
|
-
--color-neutral-subtle: var(--color-
|
|
231
|
-
--color-neutral-on-subtle: var(--color-
|
|
232
|
-
--color-neutral-border: var(--color-
|
|
233
|
-
--color-primary-solid: var(--color-primary-
|
|
234
|
-
--color-primary-solid-hover: var(--color-primary-
|
|
235
|
-
--color-primary-on-solid: var(--color-
|
|
236
|
-
--color-primary-subtle: var(--color-primary-
|
|
237
|
-
--color-primary-on-subtle: var(--color-primary-
|
|
238
|
-
--color-primary-border: var(--color-primary-
|
|
239
|
-
--color-success-solid: var(--color-
|
|
240
|
-
--color-success-solid-hover: var(--color-
|
|
241
|
-
--color-success-on-solid: var(--color-
|
|
242
|
-
--color-success-subtle: var(--color-
|
|
243
|
-
--color-success-on-subtle: var(--color-
|
|
244
|
-
--color-success-border: var(--color-
|
|
245
|
-
--color-warning-solid: var(--color-
|
|
246
|
-
--color-warning-solid-hover: var(--color-
|
|
247
|
-
--color-warning-on-solid: var(--color-
|
|
248
|
-
--color-warning-subtle: var(--color-
|
|
249
|
-
--color-warning-on-subtle: var(--color-
|
|
250
|
-
--color-warning-border: var(--color-
|
|
251
|
-
--color-danger-solid: var(--color-
|
|
252
|
-
--color-danger-solid-hover: var(--color-
|
|
253
|
-
--color-danger-on-solid: var(--color-
|
|
254
|
-
--color-danger-subtle: var(--color-
|
|
255
|
-
--color-danger-on-subtle: var(--color-
|
|
256
|
-
--color-danger-border: var(--color-
|
|
277
|
+
--color-neutral-solid: var(--color-gray-269);
|
|
278
|
+
--color-neutral-solid-hover: var(--color-gray-371);
|
|
279
|
+
--color-neutral-on-solid: var(--color-gray-985);
|
|
280
|
+
--color-neutral-subtle: var(--color-gray-269);
|
|
281
|
+
--color-neutral-on-subtle: var(--color-gray-985);
|
|
282
|
+
--color-neutral-border: var(--color-gray-371);
|
|
283
|
+
--color-primary-solid: var(--color-primary-100);
|
|
284
|
+
--color-primary-solid-hover: var(--color-primary-50);
|
|
285
|
+
--color-primary-on-solid: var(--color-primary-900);
|
|
286
|
+
--color-primary-subtle: var(--color-primary-900);
|
|
287
|
+
--color-primary-on-subtle: var(--color-primary-200);
|
|
288
|
+
--color-primary-border: var(--color-primary-700);
|
|
289
|
+
--color-success-solid: var(--color-green-550);
|
|
290
|
+
--color-success-solid-hover: var(--color-green-520);
|
|
291
|
+
--color-success-on-solid: var(--color-white);
|
|
292
|
+
--color-success-subtle: var(--color-green-260);
|
|
293
|
+
--color-success-on-subtle: var(--color-green-850);
|
|
294
|
+
--color-success-border: var(--color-green-350);
|
|
295
|
+
--color-warning-solid: var(--color-amber-550);
|
|
296
|
+
--color-warning-solid-hover: var(--color-amber-520);
|
|
297
|
+
--color-warning-on-solid: var(--color-white);
|
|
298
|
+
--color-warning-subtle: var(--color-amber-260);
|
|
299
|
+
--color-warning-on-subtle: var(--color-amber-850);
|
|
300
|
+
--color-warning-border: var(--color-amber-350);
|
|
301
|
+
--color-danger-solid: var(--color-red-577);
|
|
302
|
+
--color-danger-solid-hover: var(--color-red-520);
|
|
303
|
+
--color-danger-on-solid: var(--color-white);
|
|
304
|
+
--color-danger-subtle: var(--color-red-260);
|
|
305
|
+
--color-danger-on-subtle: var(--color-red-850);
|
|
306
|
+
--color-danger-border: var(--color-red-350);
|
|
257
307
|
}
|
package/dist/typography.d.ts
CHANGED
|
@@ -5,7 +5,14 @@
|
|
|
5
5
|
* between 12px and 16px, and the sizes above `xl` exist for empty states and
|
|
6
6
|
* page titles rather than for data.
|
|
7
7
|
*/
|
|
8
|
-
/**
|
|
8
|
+
/**
|
|
9
|
+
* Font families.
|
|
10
|
+
*
|
|
11
|
+
* rowkit's face is **Geist** — designed for tools, not marketing pages. The
|
|
12
|
+
* stack names the webfont first; system fallbacks keep layout honest before
|
|
13
|
+
* the file lands. Loading the font is the app's job (one import from
|
|
14
|
+
* `@fontsource-variable/geist`); without it, the stack falls through cleanly.
|
|
15
|
+
*/
|
|
9
16
|
export declare const fontFamily: {
|
|
10
17
|
/** UI and body text. */
|
|
11
18
|
readonly sans: string;
|
|
@@ -60,11 +67,11 @@ export declare const fontSize: {
|
|
|
60
67
|
export declare const fontWeight: {
|
|
61
68
|
/** Body text. */
|
|
62
69
|
readonly normal: "400";
|
|
63
|
-
/**
|
|
70
|
+
/** Buttons, labels, card titles — prefer this over semibold in dense UI. */
|
|
64
71
|
readonly medium: "500";
|
|
65
|
-
/**
|
|
72
|
+
/** Page titles and dialog headings. */
|
|
66
73
|
readonly semibold: "600";
|
|
67
|
-
/**
|
|
74
|
+
/** Display only. Rarely needed in data views. */
|
|
68
75
|
readonly bold: "700";
|
|
69
76
|
};
|
|
70
77
|
/** Letter spacing. Tightening only pays off at display sizes. */
|