@rowkit/tokens 0.4.0 → 1.0.0-beta.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 +16 -12
- package/dist/color.d.ts +134 -495
- package/dist/css.d.ts +2 -4
- package/dist/index.d.ts +142 -352
- package/dist/index.js +212 -369
- package/dist/index.js.map +1 -1
- package/dist/radius.d.ts +15 -17
- package/dist/shadow.d.ts +42 -20
- package/dist/tokens.css +111 -232
- package/dist/typography.d.ts +63 -46
- package/package.json +3 -4
- package/dist/blur.d.ts +0 -18
- package/dist/reference.html +0 -1275
package/dist/tokens.css
CHANGED
|
@@ -6,158 +6,90 @@
|
|
|
6
6
|
* Regenerate with: pnpm --filter @rowkit/tokens build
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
@custom-variant dark (&:where(.dark, .dark *));
|
|
10
|
-
|
|
11
9
|
@theme {
|
|
12
10
|
/* colour primitives — the only literal colours in rowkit */
|
|
13
|
-
--color-
|
|
14
|
-
--color-
|
|
15
|
-
--color-
|
|
16
|
-
--color-gray
|
|
17
|
-
--color-
|
|
18
|
-
--color-
|
|
19
|
-
--color-
|
|
20
|
-
--color-
|
|
21
|
-
--color-
|
|
22
|
-
--color-
|
|
23
|
-
--color-
|
|
24
|
-
--color-
|
|
25
|
-
--color-
|
|
26
|
-
--color-gray
|
|
27
|
-
--color-
|
|
28
|
-
--color-gray
|
|
29
|
-
--color-
|
|
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%);
|
|
56
|
-
--color-neutral-50: oklch(0.984 0.003 264);
|
|
57
|
-
--color-neutral-100: oklch(0.968 0.004 264);
|
|
58
|
-
--color-neutral-200: oklch(0.928 0.006 264);
|
|
59
|
-
--color-neutral-300: oklch(0.869 0.01 264);
|
|
60
|
-
--color-neutral-400: oklch(0.704 0.018 264);
|
|
61
|
-
--color-neutral-500: oklch(0.551 0.024 264);
|
|
62
|
-
--color-neutral-600: oklch(0.446 0.027 264);
|
|
63
|
-
--color-neutral-700: oklch(0.373 0.028 264);
|
|
64
|
-
--color-neutral-800: oklch(0.279 0.03 264);
|
|
65
|
-
--color-neutral-900: oklch(0.21 0.033 264);
|
|
66
|
-
--color-neutral-950: oklch(0.13 0.036 264);
|
|
67
|
-
--color-primary-50: oklch(0.975 0.011 255);
|
|
68
|
-
--color-primary-100: oklch(0.948 0.022 255);
|
|
69
|
-
--color-primary-200: oklch(0.90 0.034 255);
|
|
70
|
-
--color-primary-300: oklch(0.80 0.05 255);
|
|
71
|
-
--color-primary-400: oklch(0.68 0.07 255);
|
|
72
|
-
--color-primary-500: oklch(0.52 0.09 255);
|
|
73
|
-
--color-primary-600: oklch(0.44 0.095 255);
|
|
74
|
-
--color-primary-700: oklch(0.38 0.095 255);
|
|
75
|
-
--color-primary-800: oklch(0.32 0.09 255);
|
|
76
|
-
--color-primary-900: oklch(0.27 0.075 255);
|
|
77
|
-
--color-primary-950: oklch(0.19 0.05 255);
|
|
78
|
-
--color-success-50: oklch(0.97 0.014 152);
|
|
79
|
-
--color-success-100: oklch(0.936 0.036 152);
|
|
80
|
-
--color-success-200: oklch(0.885 0.064 152);
|
|
81
|
-
--color-success-300: oklch(0.809 0.097 152);
|
|
82
|
-
--color-success-400: oklch(0.715 0.145 152);
|
|
83
|
-
--color-success-500: oklch(0.623 0.162 152);
|
|
84
|
-
--color-success-600: oklch(0.546 0.142 152);
|
|
85
|
-
--color-success-700: oklch(0.488 0.127 152);
|
|
86
|
-
--color-success-800: oklch(0.442 0.115 152);
|
|
87
|
-
--color-success-900: oklch(0.396 0.103 152);
|
|
88
|
-
--color-success-950: oklch(0.282 0.073 152);
|
|
89
|
-
--color-warning-50: oklch(0.97 0.016 75);
|
|
90
|
-
--color-warning-100: oklch(0.936 0.04 75);
|
|
91
|
-
--color-warning-200: oklch(0.885 0.071 75);
|
|
92
|
-
--color-warning-300: oklch(0.849 0.108 75);
|
|
93
|
-
--color-warning-400: oklch(0.785 0.162 75);
|
|
94
|
-
--color-warning-500: oklch(0.723 0.15 75);
|
|
95
|
-
--color-warning-600: oklch(0.616 0.128 75);
|
|
96
|
-
--color-warning-700: oklch(0.528 0.11 75);
|
|
97
|
-
--color-warning-800: oklch(0.442 0.092 75);
|
|
98
|
-
--color-warning-900: oklch(0.396 0.082 75);
|
|
99
|
-
--color-warning-950: oklch(0.282 0.059 75);
|
|
100
|
-
--color-danger-50: oklch(0.97 0.014 25);
|
|
101
|
-
--color-danger-100: oklch(0.936 0.032 25);
|
|
102
|
-
--color-danger-200: oklch(0.885 0.06 25);
|
|
103
|
-
--color-danger-300: oklch(0.809 0.107 25);
|
|
104
|
-
--color-danger-400: oklch(0.715 0.17 25);
|
|
105
|
-
--color-danger-500: oklch(0.623 0.214 25);
|
|
106
|
-
--color-danger-600: oklch(0.546 0.218 25);
|
|
107
|
-
--color-danger-700: oklch(0.488 0.195 25);
|
|
108
|
-
--color-danger-800: oklch(0.442 0.165 25);
|
|
109
|
-
--color-danger-900: oklch(0.396 0.135 25);
|
|
110
|
-
--color-danger-950: oklch(0.282 0.086 25);
|
|
11
|
+
--color-vga-black: #000000;
|
|
12
|
+
--color-vga-white: #ffffff;
|
|
13
|
+
--color-vga-silver: #c0c0c0;
|
|
14
|
+
--color-vga-gray: #808080;
|
|
15
|
+
--color-vga-navy: #000080;
|
|
16
|
+
--color-vga-blue: #0000ff;
|
|
17
|
+
--color-vga-teal: #008080;
|
|
18
|
+
--color-vga-green: #008000;
|
|
19
|
+
--color-vga-olive: #808000;
|
|
20
|
+
--color-vga-yellow: #ffff00;
|
|
21
|
+
--color-vga-maroon: #800000;
|
|
22
|
+
--color-vga-red: #ff0000;
|
|
23
|
+
--color-win98-light: #dfdfdf;
|
|
24
|
+
--color-win98-dark-gray: #404040;
|
|
25
|
+
--color-win98-title-blue: #1084d0;
|
|
26
|
+
--color-win98-title-gray: #b5b5b5;
|
|
27
|
+
--color-win98-info: #ffffe1;
|
|
111
28
|
|
|
112
|
-
/* semantic colours
|
|
113
|
-
--color-background: var(--color-
|
|
114
|
-
--color-
|
|
115
|
-
--color-
|
|
116
|
-
--color-
|
|
117
|
-
--color-
|
|
118
|
-
--color-surface-
|
|
119
|
-
--color-surface-
|
|
120
|
-
--color-
|
|
121
|
-
--color-
|
|
122
|
-
--color-
|
|
123
|
-
--color-
|
|
124
|
-
--color-
|
|
125
|
-
--color-
|
|
126
|
-
--color-
|
|
127
|
-
--color-
|
|
128
|
-
--color-
|
|
129
|
-
--color-
|
|
130
|
-
--color-
|
|
131
|
-
--color-
|
|
132
|
-
--color-
|
|
133
|
-
--color-
|
|
134
|
-
--color-
|
|
135
|
-
--color-
|
|
136
|
-
--color-
|
|
137
|
-
--color-
|
|
138
|
-
--color-
|
|
139
|
-
--color-
|
|
140
|
-
--color-
|
|
141
|
-
--color-
|
|
142
|
-
--color-
|
|
143
|
-
--color-
|
|
144
|
-
--color-
|
|
145
|
-
--color-
|
|
146
|
-
--color-
|
|
147
|
-
--color-
|
|
148
|
-
--color-
|
|
149
|
-
--color-
|
|
150
|
-
--color-
|
|
151
|
-
--color-
|
|
152
|
-
--color-
|
|
153
|
-
--color-
|
|
154
|
-
--color-
|
|
155
|
-
--color-
|
|
156
|
-
--color-
|
|
157
|
-
--color-
|
|
158
|
-
--color-
|
|
159
|
-
--color-
|
|
160
|
-
--color-
|
|
29
|
+
/* semantic colours */
|
|
30
|
+
--color-background: var(--color-vga-silver);
|
|
31
|
+
--color-desktop: var(--color-vga-teal);
|
|
32
|
+
--color-card: var(--color-vga-silver);
|
|
33
|
+
--color-muted: var(--color-vga-silver);
|
|
34
|
+
--color-accent: var(--color-vga-silver);
|
|
35
|
+
--color-surface-active: var(--color-vga-silver);
|
|
36
|
+
--color-surface-selected: var(--color-vga-navy);
|
|
37
|
+
--color-surface-disabled: var(--color-vga-silver);
|
|
38
|
+
--color-skeleton: var(--color-vga-gray);
|
|
39
|
+
--color-input: var(--color-vga-white);
|
|
40
|
+
--color-tooltip-bg: var(--color-win98-info);
|
|
41
|
+
--color-foreground: var(--color-vga-black);
|
|
42
|
+
--color-muted-foreground: var(--color-vga-black);
|
|
43
|
+
--color-text-subtle: var(--color-win98-dark-gray);
|
|
44
|
+
--color-text-disabled: var(--color-vga-gray);
|
|
45
|
+
--color-text-disabled-emboss: var(--color-vga-white);
|
|
46
|
+
--color-on-selected: var(--color-vga-white);
|
|
47
|
+
--color-link: var(--color-vga-blue);
|
|
48
|
+
--color-border: var(--color-vga-gray);
|
|
49
|
+
--color-border-strong: var(--color-vga-black);
|
|
50
|
+
--color-border-subtle: var(--color-win98-light);
|
|
51
|
+
--color-ring: var(--color-vga-black);
|
|
52
|
+
--color-shadow: var(--color-vga-black);
|
|
53
|
+
--color-bevel-highlight: var(--color-vga-white);
|
|
54
|
+
--color-bevel-light: var(--color-win98-light);
|
|
55
|
+
--color-bevel-shadow: var(--color-vga-gray);
|
|
56
|
+
--color-bevel-dark: var(--color-vga-black);
|
|
57
|
+
--color-titlebar-from: var(--color-vga-navy);
|
|
58
|
+
--color-titlebar-to: var(--color-win98-title-blue);
|
|
59
|
+
--color-titlebar-inactive-from: var(--color-vga-gray);
|
|
60
|
+
--color-titlebar-inactive-to: var(--color-win98-title-gray);
|
|
61
|
+
--color-titlebar-foreground: var(--color-vga-white);
|
|
62
|
+
--color-titlebar-inactive-foreground: var(--color-vga-black);
|
|
63
|
+
--color-neutral-solid: var(--color-vga-black);
|
|
64
|
+
--color-neutral-solid-hover: var(--color-vga-black);
|
|
65
|
+
--color-neutral-on-solid: var(--color-vga-white);
|
|
66
|
+
--color-neutral-subtle: var(--color-vga-white);
|
|
67
|
+
--color-neutral-on-subtle: var(--color-vga-black);
|
|
68
|
+
--color-neutral-border: var(--color-vga-gray);
|
|
69
|
+
--color-primary-solid: var(--color-vga-navy);
|
|
70
|
+
--color-primary-solid-hover: var(--color-vga-navy);
|
|
71
|
+
--color-primary-on-solid: var(--color-vga-white);
|
|
72
|
+
--color-primary-subtle: var(--color-vga-white);
|
|
73
|
+
--color-primary-on-subtle: var(--color-vga-navy);
|
|
74
|
+
--color-primary-border: var(--color-vga-navy);
|
|
75
|
+
--color-success-solid: var(--color-vga-green);
|
|
76
|
+
--color-success-solid-hover: var(--color-vga-green);
|
|
77
|
+
--color-success-on-solid: var(--color-vga-white);
|
|
78
|
+
--color-success-subtle: var(--color-vga-white);
|
|
79
|
+
--color-success-on-subtle: var(--color-vga-green);
|
|
80
|
+
--color-success-border: var(--color-vga-green);
|
|
81
|
+
--color-warning-solid: var(--color-vga-yellow);
|
|
82
|
+
--color-warning-solid-hover: var(--color-vga-yellow);
|
|
83
|
+
--color-warning-on-solid: var(--color-vga-black);
|
|
84
|
+
--color-warning-subtle: var(--color-vga-white);
|
|
85
|
+
--color-warning-on-subtle: var(--color-vga-black);
|
|
86
|
+
--color-warning-border: var(--color-vga-olive);
|
|
87
|
+
--color-danger-solid: var(--color-vga-maroon);
|
|
88
|
+
--color-danger-solid-hover: var(--color-vga-maroon);
|
|
89
|
+
--color-danger-on-solid: var(--color-vga-white);
|
|
90
|
+
--color-danger-subtle: var(--color-vga-white);
|
|
91
|
+
--color-danger-on-subtle: var(--color-vga-maroon);
|
|
92
|
+
--color-danger-border: var(--color-vga-maroon);
|
|
161
93
|
|
|
162
94
|
/* spacing */
|
|
163
95
|
--spacing: 0.25rem;
|
|
@@ -177,29 +109,27 @@
|
|
|
177
109
|
--spacing-px: 1px;
|
|
178
110
|
|
|
179
111
|
/* typography */
|
|
180
|
-
--font-sans: "
|
|
181
|
-
--font-mono: "
|
|
182
|
-
--text-
|
|
183
|
-
--text-
|
|
184
|
-
--text-
|
|
185
|
-
--text-
|
|
186
|
-
--text-
|
|
187
|
-
--text-
|
|
188
|
-
--text-
|
|
189
|
-
--text-
|
|
190
|
-
--text-
|
|
191
|
-
--text-
|
|
192
|
-
--text-
|
|
193
|
-
--text-
|
|
194
|
-
--text-
|
|
195
|
-
--text-
|
|
112
|
+
--font-sans: "PT Sans", Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Verdana, Arial, sans-serif;
|
|
113
|
+
--font-mono: VT323, "Lucida Console", "Courier New", ui-monospace, monospace;
|
|
114
|
+
--text-ui: 0.8125rem;
|
|
115
|
+
--text-ui--line-height: 1rem;
|
|
116
|
+
--text-heading: 1rem;
|
|
117
|
+
--text-heading--line-height: 1.25rem;
|
|
118
|
+
--text-mono: 1rem;
|
|
119
|
+
--text-mono--line-height: 1rem;
|
|
120
|
+
--text-doc: 1rem;
|
|
121
|
+
--text-doc--line-height: 1.625rem;
|
|
122
|
+
--text-doc-mono: 1.25rem;
|
|
123
|
+
--text-doc-mono--line-height: 1.25rem;
|
|
124
|
+
--text-doc-h1: 1.625rem;
|
|
125
|
+
--text-doc-h1--line-height: 1.875rem;
|
|
126
|
+
--text-doc-h2: 1.1875rem;
|
|
127
|
+
--text-doc-h2--line-height: 1.5rem;
|
|
128
|
+
--text-doc-h3: 0.9375rem;
|
|
129
|
+
--text-doc-h3--line-height: 1.25rem;
|
|
196
130
|
--font-weight-normal: 400;
|
|
197
|
-
--font-weight-medium: 500;
|
|
198
|
-
--font-weight-semibold: 600;
|
|
199
131
|
--font-weight-bold: 700;
|
|
200
|
-
--tracking-tight: -0.015em;
|
|
201
132
|
--tracking-normal: 0em;
|
|
202
|
-
--tracking-wide: 0.04em;
|
|
203
133
|
--leading-none: 1;
|
|
204
134
|
--leading-tight: 1.25;
|
|
205
135
|
--leading-snug: 1.375;
|
|
@@ -215,18 +145,19 @@
|
|
|
215
145
|
--radius-xl: calc(var(--radius) * 1.4);
|
|
216
146
|
--radius-full: 9999px;
|
|
217
147
|
|
|
218
|
-
/*
|
|
219
|
-
--blur-overlay: 4px;
|
|
220
|
-
|
|
221
|
-
/* shadows */
|
|
148
|
+
/* bevels — box shadows */
|
|
222
149
|
--shadow-none: none;
|
|
223
|
-
--shadow-
|
|
224
|
-
--shadow-
|
|
225
|
-
--shadow-
|
|
226
|
-
--shadow-
|
|
227
|
-
--shadow-
|
|
228
|
-
--shadow-
|
|
150
|
+
--shadow-raised: inset -1px -1px var(--color-bevel-dark), inset 1px 1px var(--color-bevel-highlight), inset -2px -2px var(--color-bevel-shadow), inset 2px 2px var(--color-bevel-light);
|
|
151
|
+
--shadow-window: inset -1px -1px var(--color-bevel-dark), inset 1px 1px var(--color-bevel-light), inset -2px -2px var(--color-bevel-shadow), inset 2px 2px var(--color-bevel-highlight);
|
|
152
|
+
--shadow-raised-default: inset -1px -1px var(--color-bevel-dark), inset 1px 1px var(--color-bevel-dark), inset -2px -2px var(--color-bevel-dark), inset 2px 2px var(--color-bevel-highlight), inset -3px -3px var(--color-bevel-shadow), inset 3px 3px var(--color-bevel-light);
|
|
153
|
+
--shadow-pressed: inset -1px -1px var(--color-bevel-highlight), inset 1px 1px var(--color-bevel-dark), inset -2px -2px var(--color-bevel-light), inset 2px 2px var(--color-bevel-shadow);
|
|
154
|
+
--shadow-sunken: inset -1px -1px var(--color-bevel-highlight), inset 1px 1px var(--color-bevel-shadow), inset -2px -2px var(--color-bevel-light), inset 2px 2px var(--color-bevel-dark);
|
|
155
|
+
--shadow-status: inset -1px -1px var(--color-bevel-highlight), inset 1px 1px var(--color-bevel-shadow);
|
|
156
|
+
--shadow-etched: inset -1px -1px var(--color-bevel-highlight), inset 1px 1px var(--color-bevel-shadow), inset -2px -2px var(--color-bevel-shadow), inset 2px 2px var(--color-bevel-highlight);
|
|
157
|
+
--shadow-raised-thin: inset -1px -1px var(--color-bevel-shadow), inset 1px 1px var(--color-bevel-highlight);
|
|
158
|
+
--shadow-scroll-x: inset -1px 0 var(--color-bevel-shadow);
|
|
229
159
|
--shadow-sticky-header: inset 0 -1px 0 var(--color-border);
|
|
160
|
+
--text-shadow-disabled: 1px 1px 0 var(--color-text-disabled-emboss);
|
|
230
161
|
|
|
231
162
|
/* motion */
|
|
232
163
|
--transition-duration-instant: 0ms;
|
|
@@ -251,57 +182,5 @@
|
|
|
251
182
|
|
|
252
183
|
/* The one length the radius scale multiplies. Override to retune every corner. */
|
|
253
184
|
:root {
|
|
254
|
-
--radius:
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
/* Dark mode repoints semantic tokens only. Primitives are theme-agnostic. */
|
|
258
|
-
.dark {
|
|
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);
|
|
276
|
-
--color-shadow: var(--color-black);
|
|
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);
|
|
185
|
+
--radius: 0rem;
|
|
307
186
|
}
|
package/dist/typography.d.ts
CHANGED
|
@@ -1,85 +1,102 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Typography
|
|
2
|
+
* Typography.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* Two registers, as in the design: the interface, and long text for
|
|
5
|
+
* documentation. The interface is set at 13px — Windows 98's 8pt in its
|
|
6
|
+
* "Large Fonts" mode (120 DPI), which the system offered for exactly this
|
|
7
|
+
* reason: at 96 DPI 8pt is 11px, and on today's screens, whose pixels are far
|
|
8
|
+
* smaller than a 1998 monitor's, 11px is too small to read for long. The sizes
|
|
9
|
+
* are named after the Figma text styles (`ui/body` is `text-ui`, `doc/h1` is
|
|
10
|
+
* `text-doc-h1`), so a style picked in the design maps to one utility.
|
|
11
|
+
*
|
|
12
|
+
* Sizes are in `rem`, so a reader who raised their browser's base size gets
|
|
13
|
+
* larger text; at the default 16px base they land on the design's pixels.
|
|
7
14
|
*/
|
|
8
15
|
/**
|
|
9
16
|
* Font families.
|
|
10
17
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
18
|
+
* The interface face is **PT Sans** (ParaType, OFL): the closest open match
|
|
19
|
+
* to Tahoma, which succeeded MS Sans Serif, and compact enough for dense
|
|
20
|
+
* tables. It covers Latin and Cyrillic in regular and bold. The fixed-width
|
|
21
|
+
* face is **VT323** (OFL), drawn after the Fixedsys terminal font.
|
|
22
|
+
*
|
|
23
|
+
* rowkit does not ship either font file: the app loads them, one import each
|
|
24
|
+
* from `@fontsource/pt-sans` and `@fontsource/vt323`. Without them the stacks
|
|
25
|
+
* fall through to Tahoma and the faces operating systems already ship.
|
|
15
26
|
*/
|
|
16
27
|
export declare const fontFamily: {
|
|
17
28
|
/** UI and body text. */
|
|
18
29
|
readonly sans: string;
|
|
19
|
-
/**
|
|
30
|
+
/** Code, IDs and numbers that must align in a column. */
|
|
20
31
|
readonly mono: string;
|
|
21
32
|
};
|
|
22
33
|
/**
|
|
23
|
-
* Font sizes, each paired with the line height
|
|
34
|
+
* Font sizes, each paired with the line height the design sets it in.
|
|
24
35
|
*
|
|
25
36
|
* Pairing them prevents the most common typographic bug in a dense table:
|
|
26
|
-
*
|
|
27
|
-
*
|
|
37
|
+
* changing the size without the leading, so rows stay tall and the density
|
|
38
|
+
* the size was meant to buy evaporates.
|
|
28
39
|
*/
|
|
29
40
|
export declare const fontSize: {
|
|
30
|
-
/**
|
|
31
|
-
readonly
|
|
32
|
-
readonly size: "0.
|
|
41
|
+
/** 13/16 — every control, label, menu and table cell. Bold for titles and the default button. */
|
|
42
|
+
readonly ui: {
|
|
43
|
+
readonly size: "0.8125rem";
|
|
33
44
|
readonly lineHeight: "1rem";
|
|
34
45
|
};
|
|
35
|
-
/**
|
|
36
|
-
readonly
|
|
37
|
-
readonly size: "
|
|
46
|
+
/** 16/20, bold — the heading of an empty state or a group. */
|
|
47
|
+
readonly heading: {
|
|
48
|
+
readonly size: "1rem";
|
|
38
49
|
readonly lineHeight: "1.25rem";
|
|
39
50
|
};
|
|
40
|
-
/**
|
|
41
|
-
|
|
51
|
+
/**
|
|
52
|
+
* 16/16 — the fixed-width face beside interface text. VT323's x-height is
|
|
53
|
+
* 0.4em to PT Sans's 0.5em, so 16px VT323 stands exactly as tall as 13px
|
|
54
|
+
* PT Sans.
|
|
55
|
+
*/
|
|
56
|
+
readonly mono: {
|
|
42
57
|
readonly size: "1rem";
|
|
43
|
-
readonly lineHeight: "
|
|
58
|
+
readonly lineHeight: "1rem";
|
|
44
59
|
};
|
|
45
|
-
/**
|
|
46
|
-
readonly
|
|
47
|
-
readonly size: "
|
|
48
|
-
readonly lineHeight: "1.
|
|
60
|
+
/** 16/26 — documentation paragraphs, about seventy characters to a line. */
|
|
61
|
+
readonly doc: {
|
|
62
|
+
readonly size: "1rem";
|
|
63
|
+
readonly lineHeight: "1.625rem";
|
|
49
64
|
};
|
|
50
|
-
/**
|
|
51
|
-
readonly
|
|
65
|
+
/** 20/20 — code beside documentation text: as tall as 16px PT Sans, for the same reason as `mono`. */
|
|
66
|
+
readonly 'doc-mono': {
|
|
52
67
|
readonly size: "1.25rem";
|
|
53
|
-
readonly lineHeight: "1.
|
|
68
|
+
readonly lineHeight: "1.25rem";
|
|
69
|
+
};
|
|
70
|
+
/** 26/30, bold — a documentation page title. */
|
|
71
|
+
readonly 'doc-h1': {
|
|
72
|
+
readonly size: "1.625rem";
|
|
73
|
+
readonly lineHeight: "1.875rem";
|
|
54
74
|
};
|
|
55
|
-
/**
|
|
56
|
-
readonly '
|
|
57
|
-
readonly size: "1.
|
|
58
|
-
readonly lineHeight: "
|
|
75
|
+
/** 19/24, bold — a documentation section. */
|
|
76
|
+
readonly 'doc-h2': {
|
|
77
|
+
readonly size: "1.1875rem";
|
|
78
|
+
readonly lineHeight: "1.5rem";
|
|
59
79
|
};
|
|
60
|
-
/**
|
|
61
|
-
readonly '
|
|
62
|
-
readonly size: "
|
|
63
|
-
readonly lineHeight: "
|
|
80
|
+
/** 15/20, bold — a documentation subsection. */
|
|
81
|
+
readonly 'doc-h3': {
|
|
82
|
+
readonly size: "0.9375rem";
|
|
83
|
+
readonly lineHeight: "1.25rem";
|
|
64
84
|
};
|
|
65
85
|
};
|
|
66
|
-
/**
|
|
86
|
+
/**
|
|
87
|
+
* Font weights. Two, because PT Sans has two: anything in between would be
|
|
88
|
+
* synthesised by the browser, and a faked weight is blurrier than either real
|
|
89
|
+
* one.
|
|
90
|
+
*/
|
|
67
91
|
export declare const fontWeight: {
|
|
68
92
|
/** Body text. */
|
|
69
93
|
readonly normal: "400";
|
|
70
|
-
/**
|
|
71
|
-
readonly medium: "500";
|
|
72
|
-
/** Page titles and dialog headings. */
|
|
73
|
-
readonly semibold: "600";
|
|
74
|
-
/** Display only. Rarely needed in data views. */
|
|
94
|
+
/** Window titles, headings, the default button. */
|
|
75
95
|
readonly bold: "700";
|
|
76
96
|
};
|
|
77
|
-
/** Letter spacing.
|
|
97
|
+
/** Letter spacing. Windows 98 sets every size at the face's own spacing. */
|
|
78
98
|
export declare const letterSpacing: {
|
|
79
|
-
readonly tight: "-0.015em";
|
|
80
99
|
readonly normal: "0em";
|
|
81
|
-
/** For uppercase micro-labels, which need air to stay readable. */
|
|
82
|
-
readonly wide: "0.04em";
|
|
83
100
|
};
|
|
84
101
|
/** Standalone line heights, for when text is not using a paired {@link fontSize}. */
|
|
85
102
|
export declare const lineHeight: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rowkit/tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-beta.0",
|
|
4
4
|
"description": "Design tokens for rowkit — consumable without importing components.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Nikolai Kushner",
|
|
@@ -40,8 +40,7 @@
|
|
|
40
40
|
"node": ">=20.19.0"
|
|
41
41
|
},
|
|
42
42
|
"scripts": {
|
|
43
|
-
"build": "vue-tsc -b tsconfig.lib.json --force && vite build && node scripts/fix-dts-specifiers.mjs && node scripts/emit-css.mjs
|
|
44
|
-
"typecheck": "vue-tsc -b --force"
|
|
45
|
-
"reference": "pnpm build && open dist/reference.html"
|
|
43
|
+
"build": "vue-tsc -b tsconfig.lib.json --force && vite build && node scripts/fix-dts-specifiers.mjs && node scripts/emit-css.mjs",
|
|
44
|
+
"typecheck": "vue-tsc -b --force"
|
|
46
45
|
}
|
|
47
46
|
}
|
package/dist/blur.d.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Backdrop blur radii.
|
|
3
|
-
*
|
|
4
|
-
* One entry, and named for its job rather than a t-shirt size. Blur is not a
|
|
5
|
-
* scale rowkit designs with — it appears in exactly one place, behind a modal,
|
|
6
|
-
* and a second value would be a decision nobody has had to make yet.
|
|
7
|
-
*
|
|
8
|
-
* Deliberately small. The scrim separates the planes; the blur only stops the
|
|
9
|
-
* page behind from competing for the eye. Anything heavier reads as an effect
|
|
10
|
-
* and makes the content behind unrecognisable, which defeats the reason a
|
|
11
|
-
* modal shows its context at all.
|
|
12
|
-
*/
|
|
13
|
-
export declare const blur: {
|
|
14
|
-
/** The dialog scrim. The reference `backdrop-blur-xs`. */
|
|
15
|
-
readonly overlay: "4px";
|
|
16
|
-
};
|
|
17
|
-
/** Names of every blur token. */
|
|
18
|
-
export type BlurName = keyof typeof blur;
|