@rowkit/tokens 0.4.0 → 1.0.0-beta.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/dist/tokens.css CHANGED
@@ -6,158 +6,140 @@
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-white: oklch(1 0 0);
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%);
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 — light (defaults) */
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);
118
- --color-surface-selected: var(--color-primary-50);
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);
140
- --color-primary-subtle: var(--color-primary-50);
141
- --color-primary-on-subtle: var(--color-primary-900);
142
- --color-primary-border: var(--color-primary-200);
143
- --color-success-solid: var(--color-green-550);
144
- --color-success-solid-hover: var(--color-green-520);
145
- --color-success-on-solid: var(--color-white);
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);
157
- --color-danger-on-solid: var(--color-white);
158
- --color-danger-subtle: var(--color-danger-100);
159
- --color-danger-on-subtle: var(--color-danger-700);
160
- --color-danger-border: var(--color-danger-200);
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);
93
+ --color-control: var(--color-vga-silver);
94
+ --color-control-foreground: var(--color-vga-black);
95
+ --color-control-hover: var(--color-vga-silver);
96
+ --color-control-active: var(--color-vga-silver);
97
+ --color-control-primary: var(--color-vga-silver);
98
+ --color-control-primary-foreground: var(--color-vga-black);
99
+ --color-control-primary-hover: var(--color-vga-silver);
100
+ --color-control-primary-active: var(--color-vga-silver);
101
+ --color-control-ghost-hover: var(--color-vga-silver);
102
+ --color-control-ghost-active: var(--color-vga-silver);
103
+ --color-control-latched: var(--color-vga-silver);
104
+ --color-control-primary-latched: var(--color-vga-silver);
105
+ --color-checked: var(--color-vga-white);
106
+ --color-on-checked: var(--color-vga-black);
107
+ --color-popover: var(--color-vga-white);
108
+ --color-popover-border: var(--color-vga-black);
109
+ --color-focus-ring: var(--color-vga-black);
110
+ --color-caption: var(--color-vga-silver);
111
+ --color-caption-foreground: var(--color-vga-black);
112
+ --color-caption-close: var(--color-vga-silver);
113
+ --color-caption-minimize: var(--color-vga-silver);
114
+ --color-caption-maximize: var(--color-vga-silver);
115
+ --color-caption-inactive: var(--color-vga-silver);
116
+ --color-table-header: var(--color-vga-silver);
117
+ --color-table-header-foreground: var(--color-vga-black);
118
+ --color-table-stripe: var(--color-vga-white);
119
+ --color-table-row-hover: var(--color-vga-white);
120
+ --color-track: var(--color-vga-silver);
121
+ --color-progress: var(--color-vga-navy);
122
+ --color-scroll-thumb: var(--color-vga-silver);
123
+ --color-scroll-track: var(--color-vga-silver);
124
+ --color-tooltip-border: var(--color-vga-black);
125
+ --color-groupbox: var(--color-vga-silver);
126
+ --color-groupbox-face: var(--color-vga-silver);
127
+ --color-toast-close: var(--color-vga-silver);
128
+ --color-toast-close-foreground: var(--color-vga-black);
129
+ --color-loading-foreground: var(--color-vga-black);
130
+ --color-select-search: var(--color-vga-silver);
131
+ --color-pager: var(--color-vga-silver);
132
+ --color-pager-hover: var(--color-vga-silver);
133
+ --color-pager-active: var(--color-vga-silver);
134
+ --color-filter-bar: var(--color-vga-silver);
135
+ --color-chip: var(--color-vga-white);
136
+ --color-chip-border: var(--color-vga-gray);
137
+ --color-chip-foreground: var(--color-vga-black);
138
+ --color-chip-remove: var(--color-vga-white);
139
+ --color-field-highlight: var(--color-vga-navy);
140
+ --color-on-field-highlight: var(--color-vga-white);
141
+ --color-field-caret: var(--color-vga-black);
142
+ --color-field-button: var(--color-vga-silver);
161
143
 
162
144
  /* spacing */
163
145
  --spacing: 0.25rem;
@@ -176,30 +158,141 @@
176
158
  --spacing-24: 6rem;
177
159
  --spacing-px: 1px;
178
160
 
161
+ /* component sizes — in the spacing namespace, so h-control-md and friends exist */
162
+ --spacing-control-xs: 21px;
163
+ --spacing-control-sm: 26px;
164
+ --spacing-control-md: 28px;
165
+ --spacing-control-lg: 33px;
166
+ --spacing-icon-xs: 25px;
167
+ --spacing-icon-sm: 27px;
168
+ --spacing-icon-md: 30px;
169
+ --spacing-icon-lg: 34px;
170
+ --spacing-button-min-xs: 3rem;
171
+ --spacing-button-min-sm: 4rem;
172
+ --spacing-button-min-md: 92px;
173
+ --spacing-button-min-lg: 108px;
174
+ --spacing-button-px-xs: 0.375rem;
175
+ --spacing-button-px-sm: 0.5rem;
176
+ --spacing-button-px-md: 0.75rem;
177
+ --spacing-button-px-lg: 1rem;
178
+ --spacing-field-px: 0.25rem;
179
+ --spacing-field-px-lg: 0.375rem;
180
+ --spacing-field-gap-sm: 0.25rem;
181
+ --spacing-field-gap-md: 0.375rem;
182
+ --spacing-field-gap-lg: 0.5rem;
183
+ --spacing-field-left-gap: 0.5rem;
184
+ --spacing-field-error-gap: 0.25rem;
185
+ --spacing-check: 13px;
186
+ --spacing-radio: 12px;
187
+ --spacing-check-gap: 4px;
188
+ --spacing-check-label-px: 1px;
189
+ --spacing-titlebar: 22px;
190
+ --spacing-caption-w: 20px;
191
+ --spacing-caption-h: 18px;
192
+ --spacing-caption-gap: 0px;
193
+ --spacing-caption-close-gap: 2px;
194
+ --spacing-titlebar-px: 2px;
195
+ --spacing-title-inset-start: 4px;
196
+ --spacing-title-inset-end: 28px;
197
+ --spacing-frame: 2px;
198
+ --spacing-dialog-px: 0.75rem;
199
+ --spacing-dialog-pt: 0.75rem;
200
+ --spacing-dialog-footer-pt: 0.5rem;
201
+ --spacing-dialog-footer-pb: 0.75rem;
202
+ --spacing-item: 22px;
203
+ --spacing-item-pl: 2px;
204
+ --spacing-item-pr: 0.25rem;
205
+ --spacing-item-check: 12px;
206
+ --spacing-item-gap: 2px;
207
+ --spacing-item-check-glyph: 7px;
208
+ --spacing-popover-inset: 1px;
209
+ --spacing-table-header-px: 0.25rem;
210
+ --spacing-table-cell-px: 0.375rem;
211
+ --spacing-row-sm: 22px;
212
+ --spacing-row-md: 27px;
213
+ --spacing-select-arrow: 8px;
214
+ --spacing-select-arrow-overlap: 0px;
215
+ --spacing-select-message-px: 6px;
216
+ --spacing-select-message-py: 6px;
217
+ --spacing-select-message-gap: 6px;
218
+ --spacing-select-search-p: 2px;
219
+ --spacing-select-search-gap: 0px;
220
+ --spacing-field-button-h-sm: 17px;
221
+ --spacing-field-button-h: 19px;
222
+ --spacing-field-button-h-lg: 23px;
223
+ --spacing-field-button-pr: 2px;
224
+ --spacing-field-drop-icon: 8px;
225
+ --spacing-select-pr: 2px;
226
+ --spacing-filter-bar-p: 0.25rem;
227
+ --spacing-filter-bar-gap: 0.25rem;
228
+ --spacing-chip-px: 0.375rem;
229
+ --spacing-chip-pr-remove: 0.125rem;
230
+ --spacing-toast-py: 0.5rem;
231
+ --spacing-toast-pl: 0.5rem;
232
+ --spacing-toast-pr: 0.25rem;
233
+ --spacing-toast-gap: 0.5rem;
234
+ --spacing-toast-body-gap: 0.25rem;
235
+ --spacing-toast-icon: 16px;
236
+ --spacing-toast-close-w: 20px;
237
+ --spacing-toast-close-h: 18px;
238
+ --spacing-pager-px: 0.25rem;
239
+ --spacing-pager-arrow: 8px;
240
+ --spacing-pager-focus-px: 1px;
241
+ --spacing-pager-min-sm: 0px;
242
+ --spacing-chip-sm: 23px;
243
+ --spacing-chip-md: 26px;
244
+ --spacing-badge-px-sm: 0.25rem;
245
+ --spacing-badge-px-md: 0.375rem;
246
+ --spacing-badge-dot: 5px;
247
+ --spacing-empty-p-sm: 0.75rem;
248
+ --spacing-empty-p-md: 1.5rem;
249
+ --spacing-empty-p-lg: 1.5rem;
250
+ --spacing-empty-gap: 1rem;
251
+ --spacing-tooltip-px: 0.25rem;
252
+ --spacing-tooltip-py: 1px;
253
+ --spacing-statusbar: 27px;
254
+ --spacing-statusbar-px: 2px;
255
+ --spacing-statusbar-py: 2px;
256
+ --spacing-statusbar-gap: 2px;
257
+ --spacing-statusbar-section-px: 0.25rem;
258
+ --spacing-statusbar-section-gap: 0.25rem;
259
+ --spacing-progress: 18px;
260
+ --spacing-progress-inset: 2px;
261
+ --spacing-progress-fill: 12px;
262
+ --spacing-progress-block: 8px;
263
+ --spacing-progress-period: 10px;
264
+ --spacing-progress-segment: 38px;
265
+ --spacing-scrollbar: 16px;
266
+ --spacing-scroll-button: 16px;
267
+ --spacing-scroll-inset: 0px;
268
+ --spacing-groupbox-top: 6px;
269
+ --spacing-groupbox-pt: 1rem;
270
+ --spacing-groupbox-legend-x: 0.5rem;
271
+ --spacing-groupbox-legend-px: 2px;
272
+
179
273
  /* typography */
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;
182
- --text-xs: 0.75rem;
183
- --text-xs--line-height: 1rem;
184
- --text-sm: 0.875rem;
185
- --text-sm--line-height: 1.25rem;
186
- --text-base: 1rem;
187
- --text-base--line-height: 1.5rem;
188
- --text-lg: 1.125rem;
189
- --text-lg--line-height: 1.75rem;
190
- --text-xl: 1.25rem;
191
- --text-xl--line-height: 1.75rem;
192
- --text-2xl: 1.5rem;
193
- --text-2xl--line-height: 2rem;
194
- --text-3xl: 1.875rem;
195
- --text-3xl--line-height: 2.25rem;
274
+ --font-sans: "PT Sans", Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Verdana, Arial, sans-serif;
275
+ --font-mono: VT323, "Lucida Console", "Courier New", ui-monospace, monospace;
276
+ --text-ui: 0.8125rem;
277
+ --text-ui--line-height: 1rem;
278
+ --text-heading: 1rem;
279
+ --text-heading--line-height: 1.25rem;
280
+ --text-mono: 1rem;
281
+ --text-mono--line-height: 1rem;
282
+ --text-doc: 1rem;
283
+ --text-doc--line-height: 1.625rem;
284
+ --text-doc-mono: 1.25rem;
285
+ --text-doc-mono--line-height: 1.25rem;
286
+ --text-doc-h1: 1.625rem;
287
+ --text-doc-h1--line-height: 1.875rem;
288
+ --text-doc-h2: 1.1875rem;
289
+ --text-doc-h2--line-height: 1.5rem;
290
+ --text-doc-h3: 0.9375rem;
291
+ --text-doc-h3--line-height: 1.25rem;
196
292
  --font-weight-normal: 400;
197
- --font-weight-medium: 500;
198
- --font-weight-semibold: 600;
199
293
  --font-weight-bold: 700;
200
- --tracking-tight: -0.015em;
294
+ --font-weight-strong: 700;
201
295
  --tracking-normal: 0em;
202
- --tracking-wide: 0.04em;
203
296
  --leading-none: 1;
204
297
  --leading-tight: 1.25;
205
298
  --leading-snug: 1.375;
@@ -214,19 +307,37 @@
214
307
  --radius-lg: var(--radius);
215
308
  --radius-xl: calc(var(--radius) * 1.4);
216
309
  --radius-full: 9999px;
310
+ --radius-pill: 0rem;
217
311
 
218
- /* blur */
219
- --blur-overlay: 4px;
220
-
221
- /* shadows */
222
- --shadow-none: none;
223
- --shadow-xs: 0 1px 2px 0 color-mix(in oklab, var(--color-shadow) 6%, transparent);
224
- --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);
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);
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);
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);
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);
312
+ /* bevels — box shadows, each read from --rk-shadow-* so a theme can change it */
313
+ --shadow-none: var(--rk-shadow-none);
314
+ --shadow-raised: var(--rk-shadow-raised);
315
+ --shadow-window: var(--rk-shadow-window);
316
+ --shadow-raised-default: var(--rk-shadow-raised-default);
317
+ --shadow-pressed: var(--rk-shadow-pressed);
318
+ --shadow-sunken: var(--rk-shadow-sunken);
319
+ --shadow-status: var(--rk-shadow-status);
320
+ --shadow-etched: var(--rk-shadow-etched);
321
+ --shadow-raised-thin: var(--rk-shadow-raised-thin);
322
+ --shadow-popover: var(--rk-shadow-popover);
323
+ --shadow-table: var(--rk-shadow-table);
324
+ --shadow-header: var(--rk-shadow-header);
325
+ --shadow-caption: var(--rk-shadow-caption);
326
+ --shadow-statusbar: var(--rk-shadow-statusbar);
327
+ --shadow-titlebar: var(--rk-shadow-titlebar);
328
+ --shadow-checked: var(--rk-shadow-checked);
329
+ --shadow-field-button-pressed: var(--rk-shadow-field-button-pressed);
330
+ --shadow-latched-ghost: var(--rk-shadow-latched-ghost);
331
+ --shadow-checked-selected: var(--rk-shadow-checked-selected);
332
+ --shadow-toast-close: var(--rk-shadow-toast-close);
333
+ --shadow-pager: var(--rk-shadow-pager);
334
+ --shadow-pager-focus: var(--rk-shadow-pager-focus);
335
+ --shadow-pager-pressed: var(--rk-shadow-pager-pressed);
336
+ --shadow-field-button: var(--rk-shadow-field-button);
337
+ --shadow-scroll-thumb: var(--rk-shadow-scroll-thumb);
338
+ --shadow-scroll-x: var(--rk-shadow-scroll-x);
339
+ --shadow-sticky-header: var(--rk-shadow-sticky-header);
340
+ --text-shadow-disabled: 1px 1px 0 var(--color-text-disabled-emboss);
230
341
 
231
342
  /* motion */
232
343
  --transition-duration-instant: 0ms;
@@ -251,57 +362,982 @@
251
362
 
252
363
  /* The one length the radius scale multiplies. Override to retune every corner. */
253
364
  :root {
254
- --radius: 0.5rem;
365
+ --radius: 0rem;
366
+ }
367
+
368
+ /* The values behind the shadow tokens, and the style switches. Windows 98's. */
369
+ :root {
370
+ --rk-shadow-none: none;
371
+ --rk-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);
372
+ --rk-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);
373
+ --rk-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);
374
+ --rk-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);
375
+ --rk-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);
376
+ --rk-shadow-status: inset -1px -1px var(--color-bevel-highlight), inset 1px 1px var(--color-bevel-shadow);
377
+ --rk-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);
378
+ --rk-shadow-raised-thin: inset -1px -1px var(--color-bevel-shadow), inset 1px 1px var(--color-bevel-highlight);
379
+ --rk-shadow-popover: none;
380
+ --rk-shadow-table: 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);
381
+ --rk-shadow-header: 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);
382
+ --rk-shadow-caption: 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);
383
+ --rk-shadow-statusbar: none;
384
+ --rk-shadow-titlebar: none;
385
+ --rk-shadow-checked: 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);
386
+ --rk-shadow-field-button-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);
387
+ --rk-shadow-latched-ghost: 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);
388
+ --rk-shadow-checked-selected: 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);
389
+ --rk-shadow-toast-close: 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);
390
+ --rk-shadow-pager: 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);
391
+ --rk-shadow-pager-focus: 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);
392
+ --rk-shadow-pager-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);
393
+ --rk-shadow-field-button: 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);
394
+ --rk-shadow-scroll-thumb: 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);
395
+ --rk-shadow-scroll-x: inset -1px 0 var(--color-bevel-shadow);
396
+ --rk-shadow-sticky-header: inset 0 -1px 0 var(--color-border);
397
+ --rk-focus-label-width: 1px;
398
+ --rk-focus-ring-width: 1px;
399
+ --rk-focus-ring-style: dotted;
400
+ --rk-focus-outer-width: 0px;
401
+ --rk-focus-outer-offset: 0px;
402
+ --rk-press-shift: 1px;
403
+ --rk-press-brightness: 1;
404
+ --rk-dither-image: conic-gradient(var(--color-card) 0 25%, var(--color-bevel-highlight) 0 50%, var(--color-card) 0 75%, var(--color-bevel-highlight) 0);
405
+ --rk-loading-image: conic-gradient(var(--color-card) 0 25%, var(--color-bevel-highlight) 0 50%, var(--color-card) 0 75%, var(--color-bevel-highlight) 0);
406
+ --rk-animate-loading: rk-dither 800ms steps(1) infinite;
407
+ --rk-animate-busy: none;
408
+ --rk-animate-progress: rk-progress-march calc(var(--rk-progress-steps, 18) * 100ms) steps(var(--rk-progress-steps, 18)) infinite;
409
+ --rk-duration-control: 0ms;
410
+ --rk-animate-overlay-in: none;
411
+ --rk-etch-width: 1px;
412
+ --rk-caption-order: 0;
413
+ --rk-close-order: 0;
414
+ --rk-titlebar-icon: flex;
415
+ --rk-titlebar-align: start;
416
+ --rk-titlebar-balance: 0px;
417
+ --rk-caption-glyph-opacity: 1;
418
+ --rk-legend-weight: 400;
419
+ --rk-link-decoration: underline;
420
+ --rk-invalid-width: 0px;
421
+ --rk-field-error-align: center;
422
+ --rk-select-up: none;
423
+ --rk-footer-direction: row;
424
+ --rk-empty-direction: row;
425
+ --rk-empty-align: start;
426
+ --rk-overlay-bg: transparent;
427
+ --rk-popover-backdrop: none;
428
+ --rk-popover-border-width: 1px;
429
+ --rk-scrollbar-buttons: block;
430
+ --rk-glyph-scale: 1;
431
+ --rk-radio-fill: 0%;
432
+ --rk-radio-dot-r: 0px;
433
+ --rk-radio-edge: 0px;
434
+ --rk-icon-pixels: inline;
435
+ --rk-icon-glyphs: initial;
436
+ --rk-icon-fill: transparent;
437
+ --rk-icon-tone-danger: transparent;
438
+ --rk-icon-tone-warning: transparent;
439
+ --rk-icon-tone-info: transparent;
440
+ --rk-icon-tone-success: transparent;
441
+ --rk-icon-tone-folder: transparent;
442
+ }
443
+
444
+ /* The modern palette. Only the modern theme references it. */
445
+ :root {
446
+ --color-modern-white: #ffffff;
447
+ --color-modern-black: #000000;
448
+ --color-modern-transparent: #00000000;
449
+ --color-modern-gray-50: #f9f9fb;
450
+ --color-modern-gray-100: #f5f5f7;
451
+ --color-modern-gray-150: #efeff2;
452
+ --color-modern-gray-200: #e8e8ed;
453
+ --color-modern-gray-250: #e0e0e5;
454
+ --color-modern-gray-300: #d2d2d7;
455
+ --color-modern-gray-400: #aeaeb2;
456
+ --color-modern-gray-500: #86868b;
457
+ --color-modern-gray-600: #6e6e73;
458
+ --color-modern-gray-700: #515154;
459
+ --color-modern-gray-750: #48484a;
460
+ --color-modern-gray-800: #3a3a3c;
461
+ --color-modern-gray-850: #2c2c2e;
462
+ --color-modern-gray-900: #1d1d1f;
463
+ --color-modern-gray-925: #1c1c1e;
464
+ --color-modern-gray-950: #161617;
465
+ --color-modern-blue: #0071e3;
466
+ --color-modern-blue-hover: #0068d6;
467
+ --color-modern-blue-active: #0062c4;
468
+ --color-modern-blue-link: #0066cc;
469
+ --color-modern-blue-link-dark: #2997ff;
470
+ --color-modern-blue-subtle: #e8f1fc;
471
+ --color-modern-blue-subtle-dark: #0f2a47;
472
+ --color-modern-blue-text: #0058b0;
473
+ --color-modern-blue-text-dark: #6cb4ff;
474
+ --color-modern-blue-border: #b3d1f5;
475
+ --color-modern-blue-border-dark: #1f4b7a;
476
+ --color-modern-blue-ring: #0071e3cc;
477
+ --color-modern-blue-ring-dark: #2997ffcc;
478
+ --color-modern-green: #1f7a35;
479
+ --color-modern-green-hover: #1a6a2e;
480
+ --color-modern-green-subtle: #e7f6eb;
481
+ --color-modern-green-subtle-dark: #12301b;
482
+ --color-modern-green-text: #1b6e31;
483
+ --color-modern-green-text-dark: #5fd47e;
484
+ --color-modern-green-border: #b4e2c0;
485
+ --color-modern-green-border-dark: #245c33;
486
+ --color-modern-orange: #ff9f0a;
487
+ --color-modern-orange-hover: #f59300;
488
+ --color-modern-orange-subtle: #fff4e0;
489
+ --color-modern-orange-subtle-dark: #3a2a0c;
490
+ --color-modern-orange-text: #8a4b00;
491
+ --color-modern-orange-text-dark: #ffbe5c;
492
+ --color-modern-orange-border: #ffd59a;
493
+ --color-modern-orange-border-dark: #6b4a12;
494
+ --color-modern-red: #d70015;
495
+ --color-modern-red-hover: #c00013;
496
+ --color-modern-red-subtle: #fdeaea;
497
+ --color-modern-red-subtle-dark: #3d1416;
498
+ --color-modern-red-text: #b0000f;
499
+ --color-modern-red-text-dark: #ffa0a4;
500
+ --color-modern-red-border: #f5b5b9;
501
+ --color-modern-red-border-dark: #7a2329;
502
+ --color-modern-traffic-red: #ff5f57;
503
+ --color-modern-traffic-yellow: #febc2e;
504
+ --color-modern-traffic-green: #28c840;
505
+ --color-modern-ink-4: #0000000a;
506
+ --color-modern-ink-6: #0000000f;
507
+ --color-modern-ink-8: #00000014;
508
+ --color-modern-ink-10: #0000001a;
509
+ --color-modern-ink-12: #0000001f;
510
+ --color-modern-ink-15: #00000026;
511
+ --color-modern-ink-25: #00000040;
512
+ --color-modern-ink-50: #00000080;
513
+ --color-modern-light-4: #ffffff0a;
514
+ --color-modern-light-8: #ffffff14;
515
+ --color-modern-light-12: #ffffff1f;
516
+ --color-modern-light-16: #ffffff29;
517
+ --color-modern-light-25: #ffffff40;
518
+ --color-modern-light-50: #ffffff80;
519
+ --color-modern-glass-light: #ffffffd9;
520
+ --color-modern-glass-dark: #323234e0;
521
+ --color-modern-desktop-light: #c7d3e6;
522
+ --color-modern-desktop-dark: #101014;
523
+ }
524
+
525
+ /* Windows 98 inside a page in another theme. */
526
+ [data-theme="win98"] {
527
+ color-scheme: light;
528
+ --color-background: var(--color-vga-silver);
529
+ --color-desktop: var(--color-vga-teal);
530
+ --color-card: var(--color-vga-silver);
531
+ --color-muted: var(--color-vga-silver);
532
+ --color-accent: var(--color-vga-silver);
533
+ --color-surface-active: var(--color-vga-silver);
534
+ --color-surface-selected: var(--color-vga-navy);
535
+ --color-surface-disabled: var(--color-vga-silver);
536
+ --color-skeleton: var(--color-vga-gray);
537
+ --color-input: var(--color-vga-white);
538
+ --color-tooltip-bg: var(--color-win98-info);
539
+ --color-foreground: var(--color-vga-black);
540
+ --color-muted-foreground: var(--color-vga-black);
541
+ --color-text-subtle: var(--color-win98-dark-gray);
542
+ --color-text-disabled: var(--color-vga-gray);
543
+ --color-text-disabled-emboss: var(--color-vga-white);
544
+ --color-on-selected: var(--color-vga-white);
545
+ --color-link: var(--color-vga-blue);
546
+ --color-border: var(--color-vga-gray);
547
+ --color-border-strong: var(--color-vga-black);
548
+ --color-border-subtle: var(--color-win98-light);
549
+ --color-ring: var(--color-vga-black);
550
+ --color-shadow: var(--color-vga-black);
551
+ --color-bevel-highlight: var(--color-vga-white);
552
+ --color-bevel-light: var(--color-win98-light);
553
+ --color-bevel-shadow: var(--color-vga-gray);
554
+ --color-bevel-dark: var(--color-vga-black);
555
+ --color-titlebar-from: var(--color-vga-navy);
556
+ --color-titlebar-to: var(--color-win98-title-blue);
557
+ --color-titlebar-inactive-from: var(--color-vga-gray);
558
+ --color-titlebar-inactive-to: var(--color-win98-title-gray);
559
+ --color-titlebar-foreground: var(--color-vga-white);
560
+ --color-titlebar-inactive-foreground: var(--color-vga-black);
561
+ --color-neutral-solid: var(--color-vga-black);
562
+ --color-neutral-solid-hover: var(--color-vga-black);
563
+ --color-neutral-on-solid: var(--color-vga-white);
564
+ --color-neutral-subtle: var(--color-vga-white);
565
+ --color-neutral-on-subtle: var(--color-vga-black);
566
+ --color-neutral-border: var(--color-vga-gray);
567
+ --color-primary-solid: var(--color-vga-navy);
568
+ --color-primary-solid-hover: var(--color-vga-navy);
569
+ --color-primary-on-solid: var(--color-vga-white);
570
+ --color-primary-subtle: var(--color-vga-white);
571
+ --color-primary-on-subtle: var(--color-vga-navy);
572
+ --color-primary-border: var(--color-vga-navy);
573
+ --color-success-solid: var(--color-vga-green);
574
+ --color-success-solid-hover: var(--color-vga-green);
575
+ --color-success-on-solid: var(--color-vga-white);
576
+ --color-success-subtle: var(--color-vga-white);
577
+ --color-success-on-subtle: var(--color-vga-green);
578
+ --color-success-border: var(--color-vga-green);
579
+ --color-warning-solid: var(--color-vga-yellow);
580
+ --color-warning-solid-hover: var(--color-vga-yellow);
581
+ --color-warning-on-solid: var(--color-vga-black);
582
+ --color-warning-subtle: var(--color-vga-white);
583
+ --color-warning-on-subtle: var(--color-vga-black);
584
+ --color-warning-border: var(--color-vga-olive);
585
+ --color-danger-solid: var(--color-vga-maroon);
586
+ --color-danger-solid-hover: var(--color-vga-maroon);
587
+ --color-danger-on-solid: var(--color-vga-white);
588
+ --color-danger-subtle: var(--color-vga-white);
589
+ --color-danger-on-subtle: var(--color-vga-maroon);
590
+ --color-danger-border: var(--color-vga-maroon);
591
+ --color-control: var(--color-vga-silver);
592
+ --color-control-foreground: var(--color-vga-black);
593
+ --color-control-hover: var(--color-vga-silver);
594
+ --color-control-active: var(--color-vga-silver);
595
+ --color-control-primary: var(--color-vga-silver);
596
+ --color-control-primary-foreground: var(--color-vga-black);
597
+ --color-control-primary-hover: var(--color-vga-silver);
598
+ --color-control-primary-active: var(--color-vga-silver);
599
+ --color-control-ghost-hover: var(--color-vga-silver);
600
+ --color-control-ghost-active: var(--color-vga-silver);
601
+ --color-control-latched: var(--color-vga-silver);
602
+ --color-control-primary-latched: var(--color-vga-silver);
603
+ --color-checked: var(--color-vga-white);
604
+ --color-on-checked: var(--color-vga-black);
605
+ --color-popover: var(--color-vga-white);
606
+ --color-popover-border: var(--color-vga-black);
607
+ --color-focus-ring: var(--color-vga-black);
608
+ --color-caption: var(--color-vga-silver);
609
+ --color-caption-foreground: var(--color-vga-black);
610
+ --color-caption-close: var(--color-vga-silver);
611
+ --color-caption-minimize: var(--color-vga-silver);
612
+ --color-caption-maximize: var(--color-vga-silver);
613
+ --color-caption-inactive: var(--color-vga-silver);
614
+ --color-table-header: var(--color-vga-silver);
615
+ --color-table-header-foreground: var(--color-vga-black);
616
+ --color-table-stripe: var(--color-vga-white);
617
+ --color-table-row-hover: var(--color-vga-white);
618
+ --color-track: var(--color-vga-silver);
619
+ --color-progress: var(--color-vga-navy);
620
+ --color-scroll-thumb: var(--color-vga-silver);
621
+ --color-scroll-track: var(--color-vga-silver);
622
+ --color-tooltip-border: var(--color-vga-black);
623
+ --color-groupbox: var(--color-vga-silver);
624
+ --color-groupbox-face: var(--color-vga-silver);
625
+ --color-toast-close: var(--color-vga-silver);
626
+ --color-toast-close-foreground: var(--color-vga-black);
627
+ --color-loading-foreground: var(--color-vga-black);
628
+ --color-select-search: var(--color-vga-silver);
629
+ --color-pager: var(--color-vga-silver);
630
+ --color-pager-hover: var(--color-vga-silver);
631
+ --color-pager-active: var(--color-vga-silver);
632
+ --color-filter-bar: var(--color-vga-silver);
633
+ --color-chip: var(--color-vga-white);
634
+ --color-chip-border: var(--color-vga-gray);
635
+ --color-chip-foreground: var(--color-vga-black);
636
+ --color-chip-remove: var(--color-vga-white);
637
+ --color-field-highlight: var(--color-vga-navy);
638
+ --color-on-field-highlight: var(--color-vga-white);
639
+ --color-field-caret: var(--color-vga-black);
640
+ --color-field-button: var(--color-vga-silver);
641
+ --rk-shadow-none: none;
642
+ --rk-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);
643
+ --rk-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);
644
+ --rk-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);
645
+ --rk-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);
646
+ --rk-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);
647
+ --rk-shadow-status: inset -1px -1px var(--color-bevel-highlight), inset 1px 1px var(--color-bevel-shadow);
648
+ --rk-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);
649
+ --rk-shadow-raised-thin: inset -1px -1px var(--color-bevel-shadow), inset 1px 1px var(--color-bevel-highlight);
650
+ --rk-shadow-popover: none;
651
+ --rk-shadow-table: 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);
652
+ --rk-shadow-header: 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);
653
+ --rk-shadow-caption: 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);
654
+ --rk-shadow-statusbar: none;
655
+ --rk-shadow-titlebar: none;
656
+ --rk-shadow-checked: 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);
657
+ --rk-shadow-field-button-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);
658
+ --rk-shadow-latched-ghost: 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);
659
+ --rk-shadow-checked-selected: 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);
660
+ --rk-shadow-toast-close: 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);
661
+ --rk-shadow-pager: 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);
662
+ --rk-shadow-pager-focus: 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);
663
+ --rk-shadow-pager-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);
664
+ --rk-shadow-field-button: 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);
665
+ --rk-shadow-scroll-thumb: 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);
666
+ --rk-shadow-scroll-x: inset -1px 0 var(--color-bevel-shadow);
667
+ --rk-shadow-sticky-header: inset 0 -1px 0 var(--color-border);
668
+ --spacing-control-xs: 21px;
669
+ --spacing-control-sm: 26px;
670
+ --spacing-control-md: 28px;
671
+ --spacing-control-lg: 33px;
672
+ --spacing-icon-xs: 25px;
673
+ --spacing-icon-sm: 27px;
674
+ --spacing-icon-md: 30px;
675
+ --spacing-icon-lg: 34px;
676
+ --spacing-button-min-xs: 3rem;
677
+ --spacing-button-min-sm: 4rem;
678
+ --spacing-button-min-md: 92px;
679
+ --spacing-button-min-lg: 108px;
680
+ --spacing-button-px-xs: 0.375rem;
681
+ --spacing-button-px-sm: 0.5rem;
682
+ --spacing-button-px-md: 0.75rem;
683
+ --spacing-button-px-lg: 1rem;
684
+ --spacing-field-px: 0.25rem;
685
+ --spacing-field-px-lg: 0.375rem;
686
+ --spacing-field-gap-sm: 0.25rem;
687
+ --spacing-field-gap-md: 0.375rem;
688
+ --spacing-field-gap-lg: 0.5rem;
689
+ --spacing-field-left-gap: 0.5rem;
690
+ --spacing-field-error-gap: 0.25rem;
691
+ --spacing-check: 13px;
692
+ --spacing-radio: 12px;
693
+ --spacing-check-gap: 4px;
694
+ --spacing-check-label-px: 1px;
695
+ --spacing-titlebar: 22px;
696
+ --spacing-caption-w: 20px;
697
+ --spacing-caption-h: 18px;
698
+ --spacing-caption-gap: 0px;
699
+ --spacing-caption-close-gap: 2px;
700
+ --spacing-titlebar-px: 2px;
701
+ --spacing-title-inset-start: 4px;
702
+ --spacing-title-inset-end: 28px;
703
+ --spacing-frame: 2px;
704
+ --spacing-dialog-px: 0.75rem;
705
+ --spacing-dialog-pt: 0.75rem;
706
+ --spacing-dialog-footer-pt: 0.5rem;
707
+ --spacing-dialog-footer-pb: 0.75rem;
708
+ --spacing-item: 22px;
709
+ --spacing-item-pl: 2px;
710
+ --spacing-item-pr: 0.25rem;
711
+ --spacing-item-check: 12px;
712
+ --spacing-item-gap: 2px;
713
+ --spacing-item-check-glyph: 7px;
714
+ --spacing-popover-inset: 1px;
715
+ --spacing-table-header-px: 0.25rem;
716
+ --spacing-table-cell-px: 0.375rem;
717
+ --spacing-row-sm: 22px;
718
+ --spacing-row-md: 27px;
719
+ --spacing-select-arrow: 8px;
720
+ --spacing-select-arrow-overlap: 0px;
721
+ --spacing-select-message-px: 6px;
722
+ --spacing-select-message-py: 6px;
723
+ --spacing-select-message-gap: 6px;
724
+ --spacing-select-search-p: 2px;
725
+ --spacing-select-search-gap: 0px;
726
+ --spacing-field-button-h-sm: 17px;
727
+ --spacing-field-button-h: 19px;
728
+ --spacing-field-button-h-lg: 23px;
729
+ --spacing-field-button-pr: 2px;
730
+ --spacing-field-drop-icon: 8px;
731
+ --spacing-select-pr: 2px;
732
+ --spacing-filter-bar-p: 0.25rem;
733
+ --spacing-filter-bar-gap: 0.25rem;
734
+ --spacing-chip-px: 0.375rem;
735
+ --spacing-chip-pr-remove: 0.125rem;
736
+ --spacing-toast-py: 0.5rem;
737
+ --spacing-toast-pl: 0.5rem;
738
+ --spacing-toast-pr: 0.25rem;
739
+ --spacing-toast-gap: 0.5rem;
740
+ --spacing-toast-body-gap: 0.25rem;
741
+ --spacing-toast-icon: 16px;
742
+ --spacing-toast-close-w: 20px;
743
+ --spacing-toast-close-h: 18px;
744
+ --spacing-pager-px: 0.25rem;
745
+ --spacing-pager-arrow: 8px;
746
+ --spacing-pager-focus-px: 1px;
747
+ --spacing-pager-min-sm: 0px;
748
+ --spacing-chip-sm: 23px;
749
+ --spacing-chip-md: 26px;
750
+ --spacing-badge-px-sm: 0.25rem;
751
+ --spacing-badge-px-md: 0.375rem;
752
+ --spacing-badge-dot: 5px;
753
+ --spacing-empty-p-sm: 0.75rem;
754
+ --spacing-empty-p-md: 1.5rem;
755
+ --spacing-empty-p-lg: 1.5rem;
756
+ --spacing-empty-gap: 1rem;
757
+ --spacing-tooltip-px: 0.25rem;
758
+ --spacing-tooltip-py: 1px;
759
+ --spacing-statusbar: 27px;
760
+ --spacing-statusbar-px: 2px;
761
+ --spacing-statusbar-py: 2px;
762
+ --spacing-statusbar-gap: 2px;
763
+ --spacing-statusbar-section-px: 0.25rem;
764
+ --spacing-statusbar-section-gap: 0.25rem;
765
+ --spacing-progress: 18px;
766
+ --spacing-progress-inset: 2px;
767
+ --spacing-progress-fill: 12px;
768
+ --spacing-progress-block: 8px;
769
+ --spacing-progress-period: 10px;
770
+ --spacing-progress-segment: 38px;
771
+ --spacing-scrollbar: 16px;
772
+ --spacing-scroll-button: 16px;
773
+ --spacing-scroll-inset: 0px;
774
+ --spacing-groupbox-top: 6px;
775
+ --spacing-groupbox-pt: 1rem;
776
+ --spacing-groupbox-legend-x: 0.5rem;
777
+ --spacing-groupbox-legend-px: 2px;
778
+ --radius-none: 0rem;
779
+ --radius-xs: calc(var(--radius) * 0.4);
780
+ --radius-sm: calc(var(--radius) * 0.6);
781
+ --radius-md: calc(var(--radius) * 0.8);
782
+ --radius-lg: var(--radius);
783
+ --radius-xl: calc(var(--radius) * 1.4);
784
+ --radius-pill: 0rem;
785
+ --rk-focus-label-width: 1px;
786
+ --rk-focus-ring-width: 1px;
787
+ --rk-focus-ring-style: dotted;
788
+ --rk-focus-outer-width: 0px;
789
+ --rk-focus-outer-offset: 0px;
790
+ --rk-press-shift: 1px;
791
+ --rk-press-brightness: 1;
792
+ --rk-dither-image: conic-gradient(var(--color-card) 0 25%, var(--color-bevel-highlight) 0 50%, var(--color-card) 0 75%, var(--color-bevel-highlight) 0);
793
+ --rk-loading-image: conic-gradient(var(--color-card) 0 25%, var(--color-bevel-highlight) 0 50%, var(--color-card) 0 75%, var(--color-bevel-highlight) 0);
794
+ --rk-animate-loading: rk-dither 800ms steps(1) infinite;
795
+ --rk-animate-busy: none;
796
+ --rk-animate-progress: rk-progress-march calc(var(--rk-progress-steps, 18) * 100ms) steps(var(--rk-progress-steps, 18)) infinite;
797
+ --rk-duration-control: 0ms;
798
+ --rk-animate-overlay-in: none;
799
+ --rk-etch-width: 1px;
800
+ --rk-caption-order: 0;
801
+ --rk-close-order: 0;
802
+ --rk-titlebar-icon: flex;
803
+ --rk-titlebar-align: start;
804
+ --rk-titlebar-balance: 0px;
805
+ --rk-caption-glyph-opacity: 1;
806
+ --rk-legend-weight: 400;
807
+ --rk-link-decoration: underline;
808
+ --rk-invalid-width: 0px;
809
+ --rk-field-error-align: center;
810
+ --rk-select-up: none;
811
+ --rk-footer-direction: row;
812
+ --rk-empty-direction: row;
813
+ --rk-empty-align: start;
814
+ --rk-overlay-bg: transparent;
815
+ --rk-popover-backdrop: none;
816
+ --rk-popover-border-width: 1px;
817
+ --rk-scrollbar-buttons: block;
818
+ --rk-glyph-scale: 1;
819
+ --rk-radio-fill: 0%;
820
+ --rk-radio-dot-r: 0px;
821
+ --rk-radio-edge: 0px;
822
+ --rk-icon-pixels: inline;
823
+ --rk-icon-glyphs: initial;
824
+ --rk-icon-fill: transparent;
825
+ --rk-icon-tone-danger: transparent;
826
+ --rk-icon-tone-warning: transparent;
827
+ --rk-icon-tone-info: transparent;
828
+ --rk-icon-tone-success: transparent;
829
+ --rk-icon-tone-folder: transparent;
830
+ --font-sans: "PT Sans", Tahoma, "Microsoft Sans Serif", "MS Sans Serif", Verdana, Arial, sans-serif;
831
+ --font-mono: VT323, "Lucida Console", "Courier New", ui-monospace, monospace;
832
+ --text-ui: 0.8125rem;
833
+ --text-ui--line-height: 1rem;
834
+ --text-heading: 1rem;
835
+ --text-heading--line-height: 1.25rem;
836
+ --text-mono: 1rem;
837
+ --text-mono--line-height: 1rem;
838
+ --text-doc-mono: 1.25rem;
839
+ --text-doc-mono--line-height: 1.25rem;
840
+ --font-weight-strong: 700;
841
+ }
842
+
843
+ /* The modern theme. */
844
+ [data-theme="modern"] {
845
+ color-scheme: light;
846
+ --color-background: var(--color-modern-gray-100);
847
+ --color-desktop: var(--color-modern-desktop-light);
848
+ --color-card: var(--color-modern-white);
849
+ --color-muted: var(--color-modern-gray-100);
850
+ --color-accent: var(--color-modern-ink-4);
851
+ --color-surface-active: var(--color-modern-gray-200);
852
+ --color-surface-selected: var(--color-modern-blue);
853
+ --color-surface-disabled: var(--color-modern-gray-100);
854
+ --color-skeleton: var(--color-modern-gray-200);
855
+ --color-input: var(--color-modern-white);
856
+ --color-tooltip-bg: var(--color-modern-gray-100);
857
+ --color-foreground: var(--color-modern-gray-900);
858
+ --color-muted-foreground: var(--color-modern-gray-700);
859
+ --color-text-subtle: var(--color-modern-gray-600);
860
+ --color-text-disabled: var(--color-modern-gray-400);
861
+ --color-text-disabled-emboss: var(--color-modern-transparent);
862
+ --color-on-selected: var(--color-modern-white);
863
+ --color-link: var(--color-modern-blue-link);
864
+ --color-border: var(--color-modern-gray-300);
865
+ --color-border-strong: var(--color-modern-gray-500);
866
+ --color-border-subtle: var(--color-modern-gray-200);
867
+ --color-ring: var(--color-modern-blue);
868
+ --color-shadow: var(--color-modern-black);
869
+ --color-bevel-highlight: var(--color-modern-transparent);
870
+ --color-bevel-light: var(--color-modern-gray-300);
871
+ --color-bevel-shadow: var(--color-modern-gray-300);
872
+ --color-bevel-dark: var(--color-modern-gray-500);
873
+ --color-titlebar-from: var(--color-modern-gray-50);
874
+ --color-titlebar-to: var(--color-modern-gray-50);
875
+ --color-titlebar-inactive-from: var(--color-modern-gray-100);
876
+ --color-titlebar-inactive-to: var(--color-modern-gray-100);
877
+ --color-titlebar-foreground: var(--color-modern-gray-900);
878
+ --color-titlebar-inactive-foreground: var(--color-modern-gray-600);
879
+ --color-neutral-solid: var(--color-modern-gray-600);
880
+ --color-neutral-solid-hover: var(--color-modern-gray-700);
881
+ --color-neutral-on-solid: var(--color-modern-white);
882
+ --color-neutral-subtle: var(--color-modern-gray-100);
883
+ --color-neutral-on-subtle: var(--color-modern-gray-800);
884
+ --color-neutral-border: var(--color-modern-gray-300);
885
+ --color-primary-solid: var(--color-modern-blue);
886
+ --color-primary-solid-hover: var(--color-modern-blue-active);
887
+ --color-primary-on-solid: var(--color-modern-white);
888
+ --color-primary-subtle: var(--color-modern-blue-subtle);
889
+ --color-primary-on-subtle: var(--color-modern-blue-text);
890
+ --color-primary-border: var(--color-modern-blue-border);
891
+ --color-success-solid: var(--color-modern-green);
892
+ --color-success-solid-hover: var(--color-modern-green-hover);
893
+ --color-success-on-solid: var(--color-modern-white);
894
+ --color-success-subtle: var(--color-modern-green-subtle);
895
+ --color-success-on-subtle: var(--color-modern-green-text);
896
+ --color-success-border: var(--color-modern-green-border);
897
+ --color-warning-solid: var(--color-modern-orange);
898
+ --color-warning-solid-hover: var(--color-modern-orange-hover);
899
+ --color-warning-on-solid: var(--color-modern-gray-900);
900
+ --color-warning-subtle: var(--color-modern-orange-subtle);
901
+ --color-warning-on-subtle: var(--color-modern-orange-text);
902
+ --color-warning-border: var(--color-modern-orange-border);
903
+ --color-danger-solid: var(--color-modern-red);
904
+ --color-danger-solid-hover: var(--color-modern-red-hover);
905
+ --color-danger-on-solid: var(--color-modern-white);
906
+ --color-danger-subtle: var(--color-modern-red-subtle);
907
+ --color-danger-on-subtle: var(--color-modern-red-text);
908
+ --color-danger-border: var(--color-modern-red-border);
909
+ --color-control: var(--color-modern-white);
910
+ --color-control-foreground: var(--color-modern-gray-900);
911
+ --color-control-hover: var(--color-modern-gray-50);
912
+ --color-control-active: var(--color-modern-gray-200);
913
+ --color-control-primary: var(--color-modern-blue);
914
+ --color-control-primary-foreground: var(--color-modern-white);
915
+ --color-control-primary-hover: var(--color-modern-blue-hover);
916
+ --color-control-primary-active: var(--color-modern-blue-active);
917
+ --color-control-ghost-hover: var(--color-modern-ink-6);
918
+ --color-control-ghost-active: var(--color-modern-ink-10);
919
+ --color-control-latched: var(--color-modern-gray-200);
920
+ --color-control-primary-latched: var(--color-modern-blue-active);
921
+ --color-checked: var(--color-modern-blue);
922
+ --color-on-checked: var(--color-modern-white);
923
+ --color-popover: var(--color-modern-glass-light);
924
+ --color-popover-border: var(--color-modern-ink-10);
925
+ --color-focus-ring: var(--color-modern-blue-ring);
926
+ --color-caption: var(--color-modern-gray-300);
927
+ --color-caption-foreground: var(--color-modern-ink-50);
928
+ --color-caption-close: var(--color-modern-traffic-red);
929
+ --color-caption-minimize: var(--color-modern-traffic-yellow);
930
+ --color-caption-maximize: var(--color-modern-traffic-green);
931
+ --color-caption-inactive: var(--color-modern-gray-300);
932
+ --color-table-header: var(--color-modern-white);
933
+ --color-table-header-foreground: var(--color-modern-gray-600);
934
+ --color-table-stripe: var(--color-modern-gray-50);
935
+ --color-table-row-hover: var(--color-modern-ink-4);
936
+ --color-track: var(--color-modern-gray-200);
937
+ --color-progress: var(--color-modern-blue);
938
+ --color-scroll-thumb: var(--color-modern-ink-25);
939
+ --color-scroll-track: var(--color-modern-transparent);
940
+ --color-tooltip-border: var(--color-modern-ink-15);
941
+ --color-groupbox: var(--color-modern-ink-4);
942
+ --color-groupbox-face: var(--color-modern-transparent);
943
+ --color-field-button: var(--color-modern-transparent);
944
+ --color-field-caret: var(--color-modern-blue);
945
+ --color-field-highlight: var(--color-modern-transparent);
946
+ --color-on-field-highlight: var(--color-modern-gray-900);
947
+ --color-pager: var(--color-modern-transparent);
948
+ --color-toast-close: var(--color-modern-ink-6);
949
+ --color-toast-close-foreground: var(--color-modern-gray-700);
950
+ --color-loading-foreground: var(--color-modern-gray-600);
951
+ --color-select-search: var(--color-modern-transparent);
952
+ --color-pager-hover: var(--color-modern-ink-6);
953
+ --color-pager-active: var(--color-modern-ink-10);
954
+ --color-filter-bar: var(--color-modern-transparent);
955
+ --color-chip: var(--color-modern-blue-subtle);
956
+ --color-chip-border: var(--color-modern-blue-border);
957
+ --color-chip-foreground: var(--color-modern-blue-text);
958
+ --color-chip-remove: var(--color-modern-ink-6);
959
+ --rk-shadow-none: none;
960
+ --rk-shadow-raised: 0 0 0 1px var(--color-modern-ink-12), 0 1px 2px var(--color-modern-ink-10);
961
+ --rk-shadow-window: 0 0 0 1px var(--color-modern-ink-12), 0 2px 6px var(--color-modern-ink-10), 0 16px 40px var(--color-modern-ink-25);
962
+ --rk-shadow-raised-default: 0 0 0 1px var(--color-modern-ink-10), 0 1px 2px var(--color-modern-ink-15);
963
+ --rk-shadow-pressed: 0 0 0 1px var(--color-modern-ink-15);
964
+ --rk-shadow-sunken: inset 0 0 0 1px var(--color-modern-gray-500), inset 0 1px 1px var(--color-modern-ink-4);
965
+ --rk-shadow-status: none;
966
+ --rk-shadow-etched: inset 0 0 0 1px var(--color-modern-ink-8);
967
+ --rk-shadow-raised-thin: none;
968
+ --rk-shadow-popover: 0 0 0 1px var(--color-modern-ink-10), 0 10px 30px var(--color-modern-ink-15);
969
+ --rk-shadow-table: inset 0 0 0 1px var(--color-modern-gray-300);
970
+ --rk-shadow-header: inset 0 -1px 0 var(--color-modern-gray-300);
971
+ --rk-shadow-caption: inset 0 0 0 0.5px var(--color-modern-ink-15);
972
+ --rk-shadow-statusbar: inset 0 1px 0 var(--color-modern-gray-300);
973
+ --rk-shadow-titlebar: inset 0 -1px 0 var(--color-modern-gray-250);
974
+ --rk-shadow-scroll-thumb: none;
975
+ --rk-shadow-field-button: none;
976
+ --rk-shadow-latched-ghost: none;
977
+ --rk-shadow-field-button-pressed: none;
978
+ --rk-shadow-pager: none;
979
+ --rk-shadow-toast-close: none;
980
+ --rk-shadow-checked-selected: inset 0 0 0 1.5px var(--color-modern-white);
981
+ --rk-shadow-pager-focus: none;
982
+ --rk-shadow-pager-pressed: none;
983
+ --rk-shadow-checked: inset 0 0 0 1px var(--color-modern-ink-10);
984
+ --rk-shadow-scroll-x: inset -1px 0 var(--color-modern-gray-300);
985
+ --rk-shadow-sticky-header: inset 0 -1px 0 var(--color-modern-gray-300);
986
+ --spacing-control-xs: 24px;
987
+ --spacing-control-sm: 28px;
988
+ --spacing-control-md: 32px;
989
+ --spacing-control-lg: 40px;
990
+ --spacing-icon-xs: 24px;
991
+ --spacing-icon-sm: 28px;
992
+ --spacing-icon-md: 32px;
993
+ --spacing-icon-lg: 40px;
994
+ --spacing-button-min-xs: 0px;
995
+ --spacing-button-min-sm: 0px;
996
+ --spacing-button-min-md: 72px;
997
+ --spacing-button-min-lg: 88px;
998
+ --spacing-button-px-xs: 0.5rem;
999
+ --spacing-button-px-sm: 0.625rem;
1000
+ --spacing-button-px-md: 0.875rem;
1001
+ --spacing-button-px-lg: 1.125rem;
1002
+ --spacing-field-px: 0.5rem;
1003
+ --spacing-field-px-lg: 0.75rem;
1004
+ --spacing-field-gap-sm: 6px;
1005
+ --spacing-field-gap-md: 6px;
1006
+ --spacing-field-gap-lg: 6px;
1007
+ --spacing-field-left-gap: 12px;
1008
+ --spacing-field-error-gap: 6px;
1009
+ --spacing-check: 16px;
1010
+ --spacing-radio: 16px;
1011
+ --spacing-check-gap: 8px;
1012
+ --spacing-check-label-px: 0px;
1013
+ --spacing-titlebar: 38px;
1014
+ --spacing-caption-w: 12px;
1015
+ --spacing-caption-h: 12px;
1016
+ --spacing-caption-gap: 8px;
1017
+ --spacing-caption-close-gap: 0px;
1018
+ --spacing-titlebar-px: 12px;
1019
+ --spacing-title-inset-start: 72px;
1020
+ --spacing-title-inset-end: 72px;
1021
+ --spacing-frame: 0px;
1022
+ --spacing-dialog-px: 20px;
1023
+ --spacing-dialog-pt: 16px;
1024
+ --spacing-dialog-footer-pt: 14px;
1025
+ --spacing-dialog-footer-pb: 20px;
1026
+ --spacing-item: 28px;
1027
+ --spacing-item-pl: 6px;
1028
+ --spacing-item-pr: 8px;
1029
+ --spacing-item-check: 16px;
1030
+ --spacing-item-gap: 4px;
1031
+ --spacing-item-check-glyph: 12px;
1032
+ --spacing-popover-inset: 5px;
1033
+ --spacing-table-header-px: 7px;
1034
+ --spacing-table-cell-px: 8px;
1035
+ --spacing-row-sm: 30px;
1036
+ --spacing-row-md: 36px;
1037
+ --spacing-select-arrow: 9px;
1038
+ --spacing-select-arrow-overlap: 2px;
1039
+ --spacing-select-message-px: 8px;
1040
+ --spacing-select-message-py: 5px;
1041
+ --spacing-select-message-gap: 8px;
1042
+ --spacing-select-search-p: 3px 3px 2px;
1043
+ --spacing-select-search-gap: 4px;
1044
+ --spacing-field-button-h-sm: 17px;
1045
+ --spacing-field-button-h: 19px;
1046
+ --spacing-field-button-h-lg: 23px;
1047
+ --spacing-field-button-pr: 4px;
1048
+ --spacing-select-pr: 6px;
1049
+ --spacing-field-drop-icon: 16px;
1050
+ --spacing-filter-bar-p: 0px;
1051
+ --spacing-filter-bar-gap: 8px;
1052
+ --spacing-chip-px: 10px;
1053
+ --spacing-chip-pr-remove: 4px;
1054
+ --spacing-pager-px: 6px;
1055
+ --spacing-pager-arrow: 10px;
1056
+ --spacing-pager-focus-px: 0px;
1057
+ --spacing-pager-min-sm: 24px;
1058
+ --spacing-toast-py: 12px;
1059
+ --spacing-toast-pl: 12px;
1060
+ --spacing-toast-pr: 10px;
1061
+ --spacing-toast-gap: 10px;
1062
+ --spacing-toast-body-gap: 2px;
1063
+ --spacing-toast-icon: 18px;
1064
+ --spacing-toast-close-w: 18px;
1065
+ --spacing-toast-close-h: 18px;
1066
+ --spacing-chip-sm: 24px;
1067
+ --spacing-chip-md: 28px;
1068
+ --spacing-badge-px-sm: 7px;
1069
+ --spacing-badge-px-md: 8px;
1070
+ --spacing-badge-dot: 6px;
1071
+ --spacing-empty-p-sm: 16px;
1072
+ --spacing-empty-p-md: 32px;
1073
+ --spacing-empty-p-lg: 48px;
1074
+ --spacing-empty-gap: 12px;
1075
+ --spacing-tooltip-px: 0.5rem;
1076
+ --spacing-tooltip-py: 3px;
1077
+ --spacing-statusbar: 28px;
1078
+ --spacing-statusbar-px: 12px;
1079
+ --spacing-statusbar-py: 3px;
1080
+ --spacing-statusbar-gap: 16px;
1081
+ --spacing-statusbar-section-px: 0px;
1082
+ --spacing-statusbar-section-gap: 6px;
1083
+ --spacing-progress: 6px;
1084
+ --spacing-progress-inset: 0px;
1085
+ --spacing-progress-fill: 6px;
1086
+ --spacing-progress-block: 1px;
1087
+ --spacing-progress-period: 1px;
1088
+ --spacing-progress-segment: 30%;
1089
+ --spacing-scrollbar: 10px;
1090
+ --spacing-scroll-button: 0px;
1091
+ --spacing-scroll-inset: 2px;
1092
+ --spacing-groupbox-top: 22px;
1093
+ --spacing-groupbox-pt: 2.25rem;
1094
+ --spacing-groupbox-legend-x: 0px;
1095
+ --spacing-groupbox-legend-px: 0px;
1096
+ --radius-none: 0px;
1097
+ --radius-xs: 4px;
1098
+ --radius-sm: 5px;
1099
+ --radius-md: 7px;
1100
+ --radius-lg: 10px;
1101
+ --radius-xl: 12px;
1102
+ --radius-pill: 9999px;
1103
+ --rk-focus-label-width: 0px;
1104
+ --rk-focus-ring-width: 2px;
1105
+ --rk-focus-ring-style: solid;
1106
+ --rk-focus-outer-width: 3px;
1107
+ --rk-focus-outer-offset: 0px;
1108
+ --rk-press-shift: 0px;
1109
+ --rk-press-brightness: 0.85;
1110
+ --rk-dither-image: none;
1111
+ --rk-loading-image: none;
1112
+ --rk-animate-loading: rk-pulse 1.6s ease-in-out infinite;
1113
+ --rk-animate-busy: rk-spin 0.8s linear infinite;
1114
+ --rk-animate-progress: rk-progress-slide 1.2s ease-in-out infinite;
1115
+ --rk-duration-control: 120ms;
1116
+ --rk-animate-overlay-in: rk-overlay-in 160ms cubic-bezier(0, 0, 0.2, 1);
1117
+ --rk-etch-width: 0px;
1118
+ --rk-caption-order: -1;
1119
+ --rk-close-order: -1;
1120
+ --rk-overlay-bg: var(--color-modern-ink-15);
1121
+ --rk-legend-weight: 600;
1122
+ --rk-link-decoration: none;
1123
+ --rk-invalid-width: 1px;
1124
+ --rk-field-error-align: start;
1125
+ --rk-select-up: block;
1126
+ --rk-footer-direction: row-reverse;
1127
+ --rk-empty-direction: column;
1128
+ --rk-empty-align: center;
1129
+ --rk-titlebar-icon: none;
1130
+ --rk-titlebar-align: center;
1131
+ --rk-titlebar-balance: 60px;
1132
+ --rk-caption-glyph-opacity: 0;
1133
+ --rk-popover-backdrop: blur(24px) saturate(180%);
1134
+ --rk-popover-border-width: 0px;
1135
+ --rk-scrollbar-buttons: none;
1136
+ --rk-glyph-scale: 1.4;
1137
+ --rk-radio-fill: 100%;
1138
+ --rk-radio-dot-r: 3px;
1139
+ --rk-radio-edge: 1px;
1140
+ --rk-icon-pixels: none;
1141
+ --rk-icon-glyphs: ;
1142
+ --rk-icon-fill: currentColor;
1143
+ --rk-icon-tone-danger: var(--color-danger-solid);
1144
+ --rk-icon-tone-warning: var(--color-warning-solid);
1145
+ --rk-icon-tone-info: var(--color-primary-solid);
1146
+ --rk-icon-tone-success: var(--color-success-solid);
1147
+ --rk-icon-tone-folder: var(--color-primary-solid);
1148
+ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
1149
+ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
1150
+ --text-ui: 0.8125rem;
1151
+ --text-ui--line-height: 1.125rem;
1152
+ --text-heading: 0.9375rem;
1153
+ --text-heading--line-height: 1.25rem;
1154
+ --text-mono: 0.75rem;
1155
+ --text-mono--line-height: 1.125rem;
1156
+ --text-doc-mono: 0.875rem;
1157
+ --text-doc-mono--line-height: 1.375rem;
1158
+ --font-weight-strong: 600;
1159
+ }
1160
+
1161
+ @media (prefers-color-scheme: dark) {
1162
+ [data-theme="modern"]:not([data-color-scheme="light"]) {
1163
+ color-scheme: dark;
1164
+ --color-background: var(--color-modern-gray-925);
1165
+ --color-desktop: var(--color-modern-desktop-dark);
1166
+ --color-card: var(--color-modern-gray-850);
1167
+ --color-muted: var(--color-modern-gray-850);
1168
+ --color-accent: var(--color-modern-light-4);
1169
+ --color-surface-active: var(--color-modern-gray-800);
1170
+ --color-surface-disabled: var(--color-modern-gray-850);
1171
+ --color-skeleton: var(--color-modern-gray-800);
1172
+ --color-input: var(--color-modern-gray-925);
1173
+ --color-tooltip-bg: var(--color-modern-gray-800);
1174
+ --color-foreground: var(--color-modern-gray-100);
1175
+ --color-muted-foreground: var(--color-modern-gray-250);
1176
+ --color-text-subtle: var(--color-modern-gray-400);
1177
+ --color-text-disabled: var(--color-modern-gray-500);
1178
+ --color-link: var(--color-modern-blue-link-dark);
1179
+ --color-border: var(--color-modern-gray-750);
1180
+ --color-border-subtle: var(--color-modern-gray-850);
1181
+ --color-ring: var(--color-modern-blue-link-dark);
1182
+ --color-bevel-light: var(--color-modern-gray-750);
1183
+ --color-bevel-shadow: var(--color-modern-gray-750);
1184
+ --color-bevel-dark: var(--color-modern-gray-600);
1185
+ --color-titlebar-from: var(--color-modern-gray-850);
1186
+ --color-titlebar-to: var(--color-modern-gray-850);
1187
+ --color-titlebar-inactive-from: var(--color-modern-gray-925);
1188
+ --color-titlebar-inactive-to: var(--color-modern-gray-925);
1189
+ --color-titlebar-foreground: var(--color-modern-gray-100);
1190
+ --color-titlebar-inactive-foreground: var(--color-modern-gray-500);
1191
+ --color-neutral-subtle: var(--color-modern-gray-800);
1192
+ --color-neutral-on-subtle: var(--color-modern-gray-150);
1193
+ --color-neutral-border: var(--color-modern-gray-750);
1194
+ --color-primary-subtle: var(--color-modern-blue-subtle-dark);
1195
+ --color-primary-on-subtle: var(--color-modern-blue-text-dark);
1196
+ --color-primary-border: var(--color-modern-blue-border-dark);
1197
+ --color-success-subtle: var(--color-modern-green-subtle-dark);
1198
+ --color-success-on-subtle: var(--color-modern-green-text-dark);
1199
+ --color-success-border: var(--color-modern-green-border-dark);
1200
+ --color-warning-subtle: var(--color-modern-orange-subtle-dark);
1201
+ --color-warning-on-subtle: var(--color-modern-orange-text-dark);
1202
+ --color-warning-border: var(--color-modern-orange-border-dark);
1203
+ --color-danger-subtle: var(--color-modern-red-subtle-dark);
1204
+ --color-danger-on-subtle: var(--color-modern-red-text-dark);
1205
+ --color-danger-border: var(--color-modern-red-border-dark);
1206
+ --color-control: var(--color-modern-gray-750);
1207
+ --color-control-foreground: var(--color-modern-gray-100);
1208
+ --color-control-hover: var(--color-modern-gray-700);
1209
+ --color-control-active: var(--color-modern-gray-600);
1210
+ --color-control-ghost-hover: var(--color-modern-light-8);
1211
+ --color-control-ghost-active: var(--color-modern-light-12);
1212
+ --color-control-latched: var(--color-modern-gray-700);
1213
+ --color-popover: var(--color-modern-glass-dark);
1214
+ --color-popover-border: var(--color-modern-light-12);
1215
+ --color-focus-ring: var(--color-modern-blue-ring-dark);
1216
+ --color-caption: var(--color-modern-gray-700);
1217
+ --color-caption-inactive: var(--color-modern-gray-700);
1218
+ --color-table-header: var(--color-modern-gray-925);
1219
+ --color-table-header-foreground: var(--color-modern-gray-500);
1220
+ --color-table-stripe: var(--color-modern-light-4);
1221
+ --color-table-row-hover: var(--color-modern-light-4);
1222
+ --color-track: var(--color-modern-gray-800);
1223
+ --color-progress: var(--color-modern-blue-link-dark);
1224
+ --color-scroll-thumb: var(--color-modern-light-25);
1225
+ --color-tooltip-border: var(--color-modern-light-12);
1226
+ --color-groupbox: var(--color-modern-light-4);
1227
+ --color-on-field-highlight: var(--color-modern-gray-100);
1228
+ --color-toast-close: var(--color-modern-light-8);
1229
+ --color-toast-close-foreground: var(--color-modern-gray-250);
1230
+ --color-loading-foreground: var(--color-modern-gray-400);
1231
+ --color-pager-hover: var(--color-modern-light-8);
1232
+ --color-pager-active: var(--color-modern-light-12);
1233
+ --color-chip: var(--color-modern-blue-subtle-dark);
1234
+ --color-chip-border: var(--color-modern-blue-border-dark);
1235
+ --color-chip-foreground: var(--color-modern-blue-text-dark);
1236
+ --color-chip-remove: var(--color-modern-light-8);
1237
+ --rk-shadow-raised: 0 0 0 1px var(--color-modern-ink-50), inset 0 1px 0 var(--color-modern-light-12);
1238
+ --rk-shadow-window: 0 0 0 1px var(--color-modern-light-12), 0 16px 40px var(--color-modern-ink-50);
1239
+ --rk-shadow-raised-default: 0 0 0 1px var(--color-modern-ink-50), inset 0 1px 0 var(--color-modern-light-16);
1240
+ --rk-shadow-pressed: 0 0 0 1px var(--color-modern-ink-50);
1241
+ --rk-shadow-sunken: inset 0 0 0 1px var(--color-modern-gray-500);
1242
+ --rk-shadow-etched: inset 0 0 0 1px var(--color-modern-light-8);
1243
+ --rk-shadow-popover: 0 0 0 1px var(--color-modern-light-12), 0 10px 30px var(--color-modern-ink-50);
1244
+ --rk-shadow-table: inset 0 0 0 1px var(--color-modern-gray-750);
1245
+ --rk-shadow-header: inset 0 -1px 0 var(--color-modern-gray-750);
1246
+ --rk-shadow-caption: inset 0 0 0 0.5px var(--color-modern-ink-25);
1247
+ --rk-shadow-statusbar: inset 0 1px 0 var(--color-modern-gray-750);
1248
+ --rk-shadow-titlebar: inset 0 -1px 0 var(--color-modern-ink-50);
1249
+ --rk-shadow-scroll-x: inset -1px 0 var(--color-modern-gray-750);
1250
+ --rk-shadow-sticky-header: inset 0 -1px 0 var(--color-modern-gray-750);
1251
+ }
255
1252
  }
256
1253
 
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);
1254
+ [data-theme="modern"][data-color-scheme="dark"] {
1255
+ color-scheme: dark;
1256
+ --color-background: var(--color-modern-gray-925);
1257
+ --color-desktop: var(--color-modern-desktop-dark);
1258
+ --color-card: var(--color-modern-gray-850);
1259
+ --color-muted: var(--color-modern-gray-850);
1260
+ --color-accent: var(--color-modern-light-4);
1261
+ --color-surface-active: var(--color-modern-gray-800);
1262
+ --color-surface-disabled: var(--color-modern-gray-850);
1263
+ --color-skeleton: var(--color-modern-gray-800);
1264
+ --color-input: var(--color-modern-gray-925);
1265
+ --color-tooltip-bg: var(--color-modern-gray-800);
1266
+ --color-foreground: var(--color-modern-gray-100);
1267
+ --color-muted-foreground: var(--color-modern-gray-250);
1268
+ --color-text-subtle: var(--color-modern-gray-400);
1269
+ --color-text-disabled: var(--color-modern-gray-500);
1270
+ --color-link: var(--color-modern-blue-link-dark);
1271
+ --color-border: var(--color-modern-gray-750);
1272
+ --color-border-subtle: var(--color-modern-gray-850);
1273
+ --color-ring: var(--color-modern-blue-link-dark);
1274
+ --color-bevel-light: var(--color-modern-gray-750);
1275
+ --color-bevel-shadow: var(--color-modern-gray-750);
1276
+ --color-bevel-dark: var(--color-modern-gray-600);
1277
+ --color-titlebar-from: var(--color-modern-gray-850);
1278
+ --color-titlebar-to: var(--color-modern-gray-850);
1279
+ --color-titlebar-inactive-from: var(--color-modern-gray-925);
1280
+ --color-titlebar-inactive-to: var(--color-modern-gray-925);
1281
+ --color-titlebar-foreground: var(--color-modern-gray-100);
1282
+ --color-titlebar-inactive-foreground: var(--color-modern-gray-500);
1283
+ --color-neutral-subtle: var(--color-modern-gray-800);
1284
+ --color-neutral-on-subtle: var(--color-modern-gray-150);
1285
+ --color-neutral-border: var(--color-modern-gray-750);
1286
+ --color-primary-subtle: var(--color-modern-blue-subtle-dark);
1287
+ --color-primary-on-subtle: var(--color-modern-blue-text-dark);
1288
+ --color-primary-border: var(--color-modern-blue-border-dark);
1289
+ --color-success-subtle: var(--color-modern-green-subtle-dark);
1290
+ --color-success-on-subtle: var(--color-modern-green-text-dark);
1291
+ --color-success-border: var(--color-modern-green-border-dark);
1292
+ --color-warning-subtle: var(--color-modern-orange-subtle-dark);
1293
+ --color-warning-on-subtle: var(--color-modern-orange-text-dark);
1294
+ --color-warning-border: var(--color-modern-orange-border-dark);
1295
+ --color-danger-subtle: var(--color-modern-red-subtle-dark);
1296
+ --color-danger-on-subtle: var(--color-modern-red-text-dark);
1297
+ --color-danger-border: var(--color-modern-red-border-dark);
1298
+ --color-control: var(--color-modern-gray-750);
1299
+ --color-control-foreground: var(--color-modern-gray-100);
1300
+ --color-control-hover: var(--color-modern-gray-700);
1301
+ --color-control-active: var(--color-modern-gray-600);
1302
+ --color-control-ghost-hover: var(--color-modern-light-8);
1303
+ --color-control-ghost-active: var(--color-modern-light-12);
1304
+ --color-control-latched: var(--color-modern-gray-700);
1305
+ --color-popover: var(--color-modern-glass-dark);
1306
+ --color-popover-border: var(--color-modern-light-12);
1307
+ --color-focus-ring: var(--color-modern-blue-ring-dark);
1308
+ --color-caption: var(--color-modern-gray-700);
1309
+ --color-caption-inactive: var(--color-modern-gray-700);
1310
+ --color-table-header: var(--color-modern-gray-925);
1311
+ --color-table-header-foreground: var(--color-modern-gray-500);
1312
+ --color-table-stripe: var(--color-modern-light-4);
1313
+ --color-table-row-hover: var(--color-modern-light-4);
1314
+ --color-track: var(--color-modern-gray-800);
1315
+ --color-progress: var(--color-modern-blue-link-dark);
1316
+ --color-scroll-thumb: var(--color-modern-light-25);
1317
+ --color-tooltip-border: var(--color-modern-light-12);
1318
+ --color-groupbox: var(--color-modern-light-4);
1319
+ --color-on-field-highlight: var(--color-modern-gray-100);
1320
+ --color-toast-close: var(--color-modern-light-8);
1321
+ --color-toast-close-foreground: var(--color-modern-gray-250);
1322
+ --color-loading-foreground: var(--color-modern-gray-400);
1323
+ --color-pager-hover: var(--color-modern-light-8);
1324
+ --color-pager-active: var(--color-modern-light-12);
1325
+ --color-chip: var(--color-modern-blue-subtle-dark);
1326
+ --color-chip-border: var(--color-modern-blue-border-dark);
1327
+ --color-chip-foreground: var(--color-modern-blue-text-dark);
1328
+ --color-chip-remove: var(--color-modern-light-8);
1329
+ --rk-shadow-raised: 0 0 0 1px var(--color-modern-ink-50), inset 0 1px 0 var(--color-modern-light-12);
1330
+ --rk-shadow-window: 0 0 0 1px var(--color-modern-light-12), 0 16px 40px var(--color-modern-ink-50);
1331
+ --rk-shadow-raised-default: 0 0 0 1px var(--color-modern-ink-50), inset 0 1px 0 var(--color-modern-light-16);
1332
+ --rk-shadow-pressed: 0 0 0 1px var(--color-modern-ink-50);
1333
+ --rk-shadow-sunken: inset 0 0 0 1px var(--color-modern-gray-500);
1334
+ --rk-shadow-etched: inset 0 0 0 1px var(--color-modern-light-8);
1335
+ --rk-shadow-popover: 0 0 0 1px var(--color-modern-light-12), 0 10px 30px var(--color-modern-ink-50);
1336
+ --rk-shadow-table: inset 0 0 0 1px var(--color-modern-gray-750);
1337
+ --rk-shadow-header: inset 0 -1px 0 var(--color-modern-gray-750);
1338
+ --rk-shadow-caption: inset 0 0 0 0.5px var(--color-modern-ink-25);
1339
+ --rk-shadow-statusbar: inset 0 1px 0 var(--color-modern-gray-750);
1340
+ --rk-shadow-titlebar: inset 0 -1px 0 var(--color-modern-ink-50);
1341
+ --rk-shadow-scroll-x: inset -1px 0 var(--color-modern-gray-750);
1342
+ --rk-shadow-sticky-header: inset 0 -1px 0 var(--color-modern-gray-750);
307
1343
  }