@threelight/ui 0.2.0-alpha.0 → 0.3.0-alpha.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.
Files changed (8) hide show
  1. package/README.md +62 -121
  2. package/css/base.css +735 -407
  3. package/dist/index.d.ts +242 -17
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +119 -54
  6. package/dist/index.js.map +1 -1
  7. package/examples/index.html +151 -53
  8. package/package.json +2 -2
package/css/base.css CHANGED
@@ -1,173 +1,144 @@
1
- @layer threelight.theme, threelight.primitives, threelight.utilities;
1
+ @layer threelight.theme, threelight.base, threelight.components, threelight.utilities;
2
2
 
3
3
  @layer threelight.theme {
4
- [data-tl-root][data-tl-theme="default"][data-tl-mode="light"] {
5
- color-scheme: light;
6
- --tl-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
7
- "Segoe UI", sans-serif;
8
- --tl-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono",
9
- monospace;
10
-
11
- --tl-canvas: #f6f7f9;
12
- --tl-surface: #ffffff;
13
- --tl-layer: #fbfcfe;
14
- --tl-content-primary: #1d232b;
15
- --tl-content-secondary: #566170;
16
- --tl-content-subtle: #697586;
17
- --tl-border-subtle: #d8dee7;
18
- --tl-border-strong: #aeb8c6;
19
- --tl-focus: #2563eb;
20
-
21
- --tl-primary-fill: #234c9f;
22
- --tl-primary-on-fill: #ffffff;
23
- --tl-primary-soft: #eaf1ff;
24
- --tl-primary-content: #173978;
25
- --tl-primary-border: #b8cbf6;
26
- --tl-info-fill: #075985;
27
- --tl-info-on-fill: #ffffff;
28
- --tl-info-soft: #e6f6fc;
29
- --tl-info-content: #164e63;
30
- --tl-info-border: #a8dff0;
31
- --tl-success-fill: #166534;
32
- --tl-success-on-fill: #ffffff;
33
- --tl-success-soft: #e8f7ee;
34
- --tl-success-content: #14532d;
35
- --tl-success-border: #a9ddb9;
36
- --tl-warning-fill: #92400e;
37
- --tl-warning-on-fill: #ffffff;
38
- --tl-warning-soft: #fff4d8;
39
- --tl-warning-content: #78350f;
40
- --tl-warning-border: #f1d18a;
41
- --tl-danger-fill: #b42318;
42
- --tl-danger-on-fill: #ffffff;
43
- --tl-danger-soft: #ffebe7;
44
- --tl-danger-content: #8a1f16;
45
- --tl-danger-border: #f3b0a8;
46
-
47
- --tl-radius-sm: 4px;
48
- --tl-radius-md: 6px;
49
- --tl-radius-lg: 8px;
50
- --tl-shadow-sm: 0 1px 2px rgb(29 35 43 / 8%);
51
- }
52
-
53
- [data-tl-root][data-tl-theme="default"][data-tl-mode="dark"] {
54
- color-scheme: dark;
55
-
56
- --tl-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
57
- "Segoe UI", sans-serif;
58
- --tl-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono",
4
+ :where([data-tl-root]) {
5
+ --tl-font-sans:
6
+ "Hanken Grotesk", Inter, ui-sans-serif, system-ui, -apple-system,
7
+ BlinkMacSystemFont, "Segoe UI", sans-serif;
8
+ --tl-font-mono:
9
+ "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono",
59
10
  monospace;
60
11
 
61
- --tl-canvas: #10141b;
62
- --tl-surface: #171d26;
63
- --tl-layer: #1f2732;
64
- --tl-content-primary: #eef2f7;
65
- --tl-content-secondary: #c2cad6;
66
- --tl-content-subtle: #a7b1bf;
67
- --tl-border-subtle: #374151;
68
- --tl-border-strong: #536071;
69
- --tl-focus: #8ab4ff;
70
-
71
- --tl-primary-fill: #8ab4ff;
72
- --tl-primary-on-fill: #10141b;
73
- --tl-primary-soft: #1b315d;
74
- --tl-primary-content: #dce9ff;
75
- --tl-primary-border: #456ba8;
76
- --tl-info-fill: #67d5ff;
77
- --tl-info-on-fill: #10141b;
78
- --tl-info-soft: #15394a;
79
- --tl-info-content: #d7f4ff;
80
- --tl-info-border: #3c7d95;
81
- --tl-success-fill: #74d99f;
82
- --tl-success-on-fill: #10141b;
83
- --tl-success-soft: #173b27;
84
- --tl-success-content: #d9f8e4;
85
- --tl-success-border: #3e8059;
86
- --tl-warning-fill: #f3c663;
87
- --tl-warning-on-fill: #10141b;
88
- --tl-warning-soft: #3d2e12;
89
- --tl-warning-content: #ffe8ad;
90
- --tl-warning-border: #92722c;
91
- --tl-danger-fill: #ff9a8f;
92
- --tl-danger-on-fill: #10141b;
93
- --tl-danger-soft: #4a1f1b;
94
- --tl-danger-content: #ffe0dc;
95
- --tl-danger-border: #9a5048;
96
-
97
- --tl-radius-sm: 4px;
98
- --tl-radius-md: 6px;
99
- --tl-radius-lg: 8px;
100
- --tl-shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
12
+ --tl-font-size-xs: 0.75rem;
13
+ --tl-font-size-sm: 0.8125rem;
14
+ --tl-font-size-md: 0.875rem;
15
+ --tl-font-size-lg: 1rem;
16
+ --tl-font-size-xl: 1.35rem;
17
+
18
+ --tl-space-1: 0.25rem;
19
+ --tl-space-2: 0.5rem;
20
+ --tl-space-3: 0.75rem;
21
+ --tl-space-4: 1rem;
22
+ --tl-space-5: 1.25rem;
23
+ --tl-space-6: 1.5rem;
24
+ --tl-space-8: 2rem;
25
+
26
+ --tl-radius-control: 0.375rem;
27
+ --tl-radius-card: 0.5rem;
28
+ --tl-radius-panel: 0.5rem;
29
+ --tl-shadow-card: 0 1px 2px rgb(18 24 38 / 8%);
30
+ --tl-shadow-popover: 0 18px 36px -22px rgb(16 24 40 / 28%);
31
+ --tl-density-comfortable: 1;
32
+ --tl-density-compact: 0.86;
33
+ --tl-motion-duration-fast: 120ms;
34
+ --tl-motion-duration-base: 160ms;
35
+ --tl-motion-ease-standard: cubic-bezier(0.23, 1, 0.32, 1);
36
+
37
+ --tl-color-canvas: #f5f7fa;
38
+ --tl-color-surface: #ffffff;
39
+ --tl-color-layer: #f6f8fa;
40
+ --tl-color-content-primary: #181d23;
41
+ --tl-color-content-secondary: #515b66;
42
+ --tl-color-content-subtle: #9aa4b0;
43
+ --tl-color-border-subtle: #e4e8ed;
44
+ --tl-color-border-strong: #cbd3dc;
45
+ --tl-color-focus: #2563d9;
46
+
47
+ --tl-color-primary-fill: #2563d9;
48
+ --tl-color-primary-content: #ffffff;
49
+ --tl-color-primary-soft: #eaf1ff;
50
+ --tl-color-primary-border: #c8d9fb;
51
+ --tl-color-info-fill: #1690b0;
52
+ --tl-color-info-content: #ffffff;
53
+ --tl-color-info-soft: #e7f5f9;
54
+ --tl-color-info-border: #b9e1ec;
55
+ --tl-color-success-fill: #1f9d57;
56
+ --tl-color-success-content: #ffffff;
57
+ --tl-color-success-soft: #e6f6ec;
58
+ --tl-color-success-border: #c5ead2;
59
+ --tl-color-warning-fill: #b77a08;
60
+ --tl-color-warning-content: #221400;
61
+ --tl-color-warning-soft: #fdf4e3;
62
+ --tl-color-warning-border: #ecd59f;
63
+ --tl-color-danger-fill: #d83a3a;
64
+ --tl-color-danger-content: #ffffff;
65
+ --tl-color-danger-soft: #fdecec;
66
+ --tl-color-danger-border: #f4c7c7;
67
+
68
+ color: var(--tl-color-content-primary);
69
+ background: var(--tl-color-canvas);
70
+ font-family: var(--tl-font-sans);
71
+ text-size-adjust: 100%;
72
+ }
73
+
74
+ :where([data-tl-root][data-tl-mode="dark"]) {
75
+ --tl-color-canvas: #090d14;
76
+ --tl-color-surface: #111720;
77
+ --tl-color-layer: #151c27;
78
+ --tl-color-content-primary: #eef2f7;
79
+ --tl-color-content-secondary: #a7b0bf;
80
+ --tl-color-content-subtle: #778397;
81
+ --tl-color-border-subtle: #263140;
82
+ --tl-color-border-strong: #3a485c;
83
+ --tl-color-focus: #6ca0ff;
84
+
85
+ --tl-color-primary-fill: #4f86f5;
86
+ --tl-color-primary-content: #061225;
87
+ --tl-color-primary-soft: #15223a;
88
+ --tl-color-primary-border: #284670;
89
+ --tl-color-info-fill: #36a8c8;
90
+ --tl-color-info-content: #041217;
91
+ --tl-color-info-soft: #0d2932;
92
+ --tl-color-info-border: #1c4956;
93
+ --tl-color-success-fill: #33b069;
94
+ --tl-color-success-content: #04140a;
95
+ --tl-color-success-soft: #112c1d;
96
+ --tl-color-success-border: #1d4d33;
97
+ --tl-color-warning-fill: #d6a02b;
98
+ --tl-color-warning-content: #160f02;
99
+ --tl-color-warning-soft: #2c2410;
100
+ --tl-color-warning-border: #544517;
101
+ --tl-color-danger-fill: #e85a5a;
102
+ --tl-color-danger-content: #190606;
103
+ --tl-color-danger-soft: #311819;
104
+ --tl-color-danger-border: #5d2a2c;
105
+ --tl-shadow-card: 0 1px 2px rgb(0 0 0 / 42%);
106
+ --tl-shadow-popover: 0 18px 36px -22px rgb(0 0 0 / 72%);
101
107
  }
102
108
  }
103
109
 
104
- @layer threelight.primitives {
105
- :where([data-tl-root]) :where(
106
- .tl-section,
107
- .tl-stack,
108
- .tl-cluster,
109
- .tl-grid,
110
- .tl-surface,
111
- .tl-card,
112
- .tl-panel,
113
- .tl-display,
114
- .tl-heading,
115
- .tl-body,
116
- .tl-caption,
117
- .tl-meta,
118
- .tl-label,
119
- .tl-action-text,
120
- .tl-metric,
121
- .tl-code,
122
- .tl-button,
123
- .tl-badge,
124
- .tl-alert,
125
- .tl-field,
126
- .tl-input,
127
- .tl-help
128
- ) {
110
+ @layer threelight.base {
111
+ :where([data-tl-root]) *,
112
+ :where([data-tl-root]) *::before,
113
+ :where([data-tl-root]) *::after {
129
114
  box-sizing: border-box;
130
115
  }
131
116
 
132
- :where([data-tl-root]) :where(
133
- .tl-display,
134
- .tl-heading,
135
- .tl-body,
136
- .tl-caption,
137
- .tl-meta,
138
- .tl-label,
139
- .tl-action-text,
140
- .tl-metric,
141
- .tl-code,
142
- .tl-help
143
- ) {
117
+ :where([data-tl-root]) :where(h1, h2, h3, h4, p, figure) {
144
118
  margin: 0;
145
- color: var(--tl-component-content, var(--tl-content-primary));
146
- font-family: var(--tl-font-sans);
147
- overflow-wrap: anywhere;
148
- text-wrap: pretty;
149
119
  }
150
120
 
151
- :where([data-tl-root]) :where(.tl-section) {
152
- inline-size: min(100% - 2rem, var(--tl-section-max, 72rem));
153
- margin-inline: auto;
154
- padding-block: var(--tl-section-padding, 3rem);
121
+ :where([data-tl-root]) :where(button, input, select, textarea) {
122
+ font: inherit;
155
123
  }
156
124
 
125
+ :where([data-tl-root]) :where(button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible) {
126
+ outline: 3px solid color-mix(in srgb, var(--tl-color-focus) 58%, transparent);
127
+ outline-offset: 2px;
128
+ }
129
+ }
130
+
131
+ @layer threelight.components {
157
132
  :where([data-tl-root]) :where(.tl-stack) {
158
- display: flex;
159
- flex-direction: column;
160
- gap: var(--tl-gap, 1rem);
161
- min-inline-size: 0;
133
+ display: grid;
134
+ gap: var(--tl-stack-gap, var(--tl-space-4));
162
135
  }
163
136
 
164
137
  :where([data-tl-root]) :where(.tl-cluster) {
165
138
  display: flex;
166
139
  flex-wrap: wrap;
167
- align-items: var(--tl-align, center);
168
- justify-content: var(--tl-justify, flex-start);
169
- gap: var(--tl-gap, 0.75rem);
170
- min-inline-size: 0;
140
+ align-items: center;
141
+ gap: var(--tl-cluster-gap, var(--tl-space-3));
171
142
  }
172
143
 
173
144
  :where([data-tl-root]) :where(.tl-grid) {
@@ -176,360 +147,717 @@
176
147
  auto-fit,
177
148
  minmax(min(100%, var(--tl-grid-min, 16rem)), 1fr)
178
149
  );
179
- gap: var(--tl-gap, 1rem);
150
+ gap: var(--tl-grid-gap, var(--tl-space-4));
151
+ }
152
+
153
+ :where([data-tl-root]) :where(.tl-heading) {
154
+ color: var(--tl-color-content-primary);
155
+ font-size: var(--tl-heading-size, var(--tl-font-size-xl));
156
+ font-weight: 720;
157
+ letter-spacing: 0;
158
+ line-height: 1.16;
159
+ text-wrap: balance;
160
+ }
161
+
162
+ :where([data-tl-root]) :where(.tl-text) {
163
+ color: var(--tl-text-color, var(--tl-color-content-secondary));
164
+ font-size: var(--tl-font-size-md);
165
+ line-height: 1.58;
166
+ }
167
+
168
+ :where([data-tl-root]) :where(.tl-caption) {
169
+ color: var(--tl-color-content-subtle);
170
+ font-size: var(--tl-font-size-xs);
171
+ font-weight: 600;
172
+ letter-spacing: 0.04em;
173
+ line-height: 1.45;
174
+ text-transform: uppercase;
175
+ }
176
+
177
+ :where([data-tl-root]) :where(.tl-mono) {
178
+ font-family: var(--tl-font-mono);
179
+ font-size: var(--tl-font-size-xs);
180
+ }
181
+
182
+ :where([data-tl-root]) :where(.tl-app-shell) {
183
+ display: grid;
184
+ grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
185
+ min-block-size: 100vh;
180
186
  min-inline-size: 0;
187
+ background: var(--tl-color-canvas);
181
188
  }
182
189
 
183
- :where([data-tl-root]) :where(.tl-surface, .tl-card, .tl-panel, .tl-alert) {
184
- --tl-component-background: var(--tl-surface);
185
- --tl-component-content: var(--tl-content-primary);
186
- --tl-component-content-muted: var(--tl-content-secondary);
187
- --tl-component-border: var(--tl-border-subtle);
190
+ :where([data-tl-root]) :where(.tl-app-shell__sidebar) {
191
+ min-inline-size: 0;
192
+ border-inline-end: 1px solid var(--tl-color-border-subtle);
193
+ background: var(--tl-color-surface);
194
+ }
188
195
 
196
+ :where([data-tl-root]) :where(.tl-app-shell__topbar) {
197
+ display: flex;
198
+ flex-wrap: wrap;
199
+ align-items: center;
200
+ justify-content: space-between;
201
+ gap: var(--tl-space-3);
189
202
  min-inline-size: 0;
190
- color: var(--tl-component-content);
191
- border: 1px solid var(--tl-component-border);
192
- font-family: var(--tl-font-sans);
203
+ min-block-size: 3.25rem;
204
+ padding-inline: var(--tl-space-5);
205
+ border-block-end: 1px solid var(--tl-color-border-subtle);
206
+ background: color-mix(in srgb, var(--tl-color-surface) 88%, transparent);
193
207
  }
194
208
 
195
- :where([data-tl-root]) :where(.tl-surface) {
196
- background: var(--tl-component-background);
197
- border-radius: var(--tl-radius-surface, var(--tl-radius-lg));
198
- padding: var(--tl-surface-padding, 1.5rem);
209
+ :where([data-tl-root]) :where(.tl-app-shell__topbar > *) {
210
+ min-inline-size: 0;
211
+ overflow-wrap: anywhere;
199
212
  }
200
213
 
201
- :where([data-tl-root]) :where(.tl-card) {
202
- background: var(--tl-component-background);
203
- border-radius: var(--tl-radius-card, var(--tl-radius-lg));
204
- box-shadow: var(--tl-card-shadow, var(--tl-shadow-sm));
205
- padding: var(--tl-card-padding, 1.25rem);
206
- }
207
-
208
- :where([data-tl-root]) :where(.tl-panel) {
209
- --tl-component-background: var(--tl-layer);
210
-
211
- background: var(--tl-component-background);
212
- border-radius: var(--tl-radius-panel, var(--tl-radius-md));
213
- padding: var(--tl-panel-padding, 1rem);
214
- }
215
-
216
- :where([data-tl-root]) :where(
217
- .tl-surface[data-tl-tone="primary"],
218
- .tl-card[data-tl-tone="primary"],
219
- .tl-panel[data-tl-tone="primary"]
220
- ) {
221
- --tl-component-background: var(--tl-primary-soft);
222
- --tl-component-content: var(--tl-primary-content);
223
- --tl-component-content-muted: var(--tl-primary-content);
224
- --tl-component-border: var(--tl-primary-border);
225
- }
226
-
227
- :where([data-tl-root]) :where(
228
- .tl-surface[data-tl-tone="info"],
229
- .tl-card[data-tl-tone="info"],
230
- .tl-panel[data-tl-tone="info"]
231
- ) {
232
- --tl-component-background: var(--tl-info-soft);
233
- --tl-component-content: var(--tl-info-content);
234
- --tl-component-content-muted: var(--tl-info-content);
235
- --tl-component-border: var(--tl-info-border);
236
- }
237
-
238
- :where([data-tl-root]) :where(
239
- .tl-surface[data-tl-tone="success"],
240
- .tl-card[data-tl-tone="success"],
241
- .tl-panel[data-tl-tone="success"]
242
- ) {
243
- --tl-component-background: var(--tl-success-soft);
244
- --tl-component-content: var(--tl-success-content);
245
- --tl-component-content-muted: var(--tl-success-content);
246
- --tl-component-border: var(--tl-success-border);
247
- }
248
-
249
- :where([data-tl-root]) :where(
250
- .tl-surface[data-tl-tone="warning"],
251
- .tl-card[data-tl-tone="warning"],
252
- .tl-panel[data-tl-tone="warning"]
253
- ) {
254
- --tl-component-background: var(--tl-warning-soft);
255
- --tl-component-content: var(--tl-warning-content);
256
- --tl-component-content-muted: var(--tl-warning-content);
257
- --tl-component-border: var(--tl-warning-border);
258
- }
259
-
260
- :where([data-tl-root]) :where(
261
- .tl-surface[data-tl-tone="danger"],
262
- .tl-card[data-tl-tone="danger"],
263
- .tl-panel[data-tl-tone="danger"]
264
- ) {
265
- --tl-component-background: var(--tl-danger-soft);
266
- --tl-component-content: var(--tl-danger-content);
267
- --tl-component-content-muted: var(--tl-danger-content);
268
- --tl-component-border: var(--tl-danger-border);
269
- }
270
-
271
- :where([data-tl-root]) :where(.tl-display) {
272
- color: var(--tl-component-content, var(--tl-content-primary));
273
- font-size: clamp(2rem, 6vw, 4rem);
274
- font-weight: 700;
275
- letter-spacing: 0;
276
- line-height: 1.05;
214
+ :where([data-tl-root]) :where(.tl-app-shell__main) {
215
+ min-inline-size: 0;
216
+ overflow-x: clip;
277
217
  }
278
218
 
279
- :where([data-tl-root]) :where(.tl-heading) {
280
- color: var(--tl-component-content, var(--tl-content-primary));
281
- font-size: clamp(1.25rem, 3vw, 2rem);
282
- font-weight: 700;
283
- letter-spacing: 0;
284
- line-height: 1.2;
219
+ :where([data-tl-root]) :where(.tl-app-shell__content) {
220
+ min-inline-size: 0;
221
+ max-inline-size: var(--tl-content-max, 76rem);
222
+ padding: var(--tl-space-6);
285
223
  }
286
224
 
287
- :where([data-tl-root]) :where(.tl-body) {
288
- color: var(--tl-component-content-muted, var(--tl-content-secondary));
289
- font-size: 1rem;
290
- line-height: 1.6;
225
+ :where([data-tl-root]) :where(.tl-side-nav) {
226
+ display: grid;
227
+ gap: var(--tl-space-5);
228
+ padding: var(--tl-space-5);
291
229
  }
292
230
 
293
- :where([data-tl-root]) :where(.tl-caption, .tl-help) {
294
- color: var(--tl-component-content-muted, var(--tl-content-subtle));
295
- font-size: 0.875rem;
296
- line-height: 1.45;
231
+ :where([data-tl-root]) :where(.tl-side-nav__group) {
232
+ display: grid;
233
+ gap: var(--tl-space-1);
297
234
  }
298
235
 
299
- :where([data-tl-root]) :where(.tl-meta, .tl-label) {
300
- color: var(--tl-component-content, var(--tl-content-primary));
301
- font-size: 0.875rem;
302
- font-weight: 700;
303
- letter-spacing: 0;
304
- line-height: 1.4;
236
+ :where([data-tl-root]) :where(.tl-side-nav__label) {
237
+ padding: var(--tl-space-2) var(--tl-space-2) var(--tl-space-1);
238
+ color: var(--tl-color-content-subtle);
239
+ font-size: var(--tl-font-size-xs);
240
+ font-weight: 720;
241
+ letter-spacing: 0.08em;
242
+ text-transform: uppercase;
305
243
  }
306
244
 
307
- :where([data-tl-root]) :where(.tl-meta) {
308
- font-family: var(--tl-font-mono);
245
+ :where([data-tl-root]) :where(.tl-side-nav__item) {
246
+ display: flex;
247
+ align-items: center;
248
+ justify-content: space-between;
249
+ gap: var(--tl-space-2);
250
+ min-inline-size: 0;
251
+ color: var(--tl-color-content-secondary);
252
+ border-radius: var(--tl-radius-control);
253
+ padding: var(--tl-space-2) var(--tl-space-3);
254
+ text-decoration: none;
309
255
  }
310
256
 
311
- :where([data-tl-root]) :where(.tl-action-text) {
312
- color: var(--tl-component-content, var(--tl-primary-content));
313
- font-size: 0.875rem;
314
- font-weight: 700;
315
- letter-spacing: 0;
316
- line-height: 1.4;
257
+ :where([data-tl-root]) :where(.tl-side-nav__item > *) {
258
+ min-inline-size: 0;
317
259
  }
318
260
 
319
- :where([data-tl-root]) :where(.tl-metric) {
320
- color: var(--tl-component-content, var(--tl-content-primary));
321
- font-family: var(--tl-font-mono);
322
- font-size: clamp(1.5rem, 4vw, 2.5rem);
323
- font-variant-numeric: tabular-nums;
324
- font-weight: 700;
325
- letter-spacing: 0;
326
- line-height: 1.1;
261
+ :where([data-tl-root]) :where(.tl-side-nav__item:hover) {
262
+ color: var(--tl-color-content-primary);
263
+ background: var(--tl-color-layer);
327
264
  }
328
265
 
329
- :where([data-tl-root]) :where(.tl-code) {
330
- color: var(--tl-component-content, var(--tl-content-primary));
331
- border: 1px solid var(--tl-component-border, var(--tl-border-subtle));
332
- border-radius: var(--tl-radius-sm);
333
- font-family: var(--tl-font-mono);
334
- font-size: 0.875rem;
335
- line-height: 1.5;
336
- padding: 0.125rem 0.25rem;
266
+ :where([data-tl-root]) :where(.tl-side-nav__item[aria-current="page"]) {
267
+ color: var(--tl-color-primary-fill);
268
+ background: var(--tl-color-primary-soft);
269
+ box-shadow: inset 3px 0 0 var(--tl-color-primary-fill);
270
+ font-weight: 650;
271
+ }
272
+
273
+ :where([data-tl-root]) :where(.tl-card, .tl-panel, .tl-data-panel) {
274
+ min-inline-size: 0;
275
+ color: var(--tl-color-content-primary);
276
+ border: 1px solid var(--tl-color-border-subtle);
277
+ border-radius: var(--tl-radius-card);
278
+ background: var(--tl-color-surface);
279
+ box-shadow: var(--tl-shadow-card);
337
280
  }
338
281
 
339
- :where([data-tl-root]) :where(.tl-button) {
340
- --tl-button-background: var(--tl-surface);
341
- --tl-button-content: var(--tl-content-primary);
342
- --tl-button-border: var(--tl-border-strong);
282
+ :where([data-tl-root]) :where(.tl-card) {
283
+ padding: var(--tl-card-padding, var(--tl-space-5));
284
+ }
343
285
 
286
+ :where([data-tl-root]) :where(.tl-panel, .tl-data-panel) {
287
+ overflow: hidden;
288
+ }
289
+
290
+ :where([data-tl-root]) :where(.tl-card__header, .tl-panel__header, .tl-data-panel__header, .tl-card__footer, .tl-panel__footer, .tl-data-panel__footer) {
291
+ display: flex;
292
+ flex-wrap: wrap;
293
+ align-items: center;
294
+ justify-content: space-between;
295
+ gap: var(--tl-space-3);
296
+ padding: var(--tl-space-4) var(--tl-space-5);
297
+ }
298
+
299
+ :where([data-tl-root]) :where(.tl-card__body, .tl-panel__body, .tl-data-panel__body) {
300
+ min-inline-size: 0;
301
+ padding: var(--tl-space-5);
302
+ }
303
+
304
+ :where([data-tl-root]) :where(.tl-panel__header, .tl-data-panel__header, .tl-card__footer, .tl-panel__footer, .tl-data-panel__footer) {
305
+ border-block-end: 1px solid var(--tl-color-border-subtle);
306
+ }
307
+
308
+ :where([data-tl-root]) :where(.tl-card__footer, .tl-panel__footer, .tl-data-panel__footer) {
309
+ border-block-start: 1px solid var(--tl-color-border-subtle);
310
+ border-block-end: 0;
311
+ }
312
+
313
+ :where([data-tl-root]) :where(.tl-card__title, .tl-panel__title) {
314
+ font-weight: 720;
315
+ line-height: 1.25;
316
+ }
317
+
318
+ :where([data-tl-root]) :where(.tl-card__description, .tl-panel__description) {
319
+ color: var(--tl-color-content-secondary);
320
+ font-size: var(--tl-font-size-sm);
321
+ line-height: 1.5;
322
+ }
323
+
324
+ :where([data-tl-root]) :where(.tl-button, .tl-icon-button) {
344
325
  display: inline-flex;
345
326
  align-items: center;
346
327
  justify-content: center;
347
- min-block-size: 2.75rem;
328
+ gap: var(--tl-space-2);
348
329
  max-inline-size: 100%;
349
- gap: 0.5rem;
350
- color: var(--tl-button-content);
351
- background: var(--tl-button-background);
352
- border: 1px solid var(--tl-button-border);
353
- border-radius: var(--tl-radius-button, var(--tl-radius-md));
330
+ min-block-size: 2.25rem;
331
+ color: var(--tl-button-content, var(--tl-color-content-primary));
332
+ background: var(--tl-button-background, var(--tl-color-surface));
333
+ border: 1px solid var(--tl-button-border, var(--tl-color-border-strong));
334
+ border-radius: var(--tl-radius-control);
354
335
  cursor: pointer;
355
- font-family: var(--tl-font-sans);
356
- font-size: 1rem;
357
- font-weight: 700;
336
+ font-weight: 650;
358
337
  line-height: 1.2;
359
- padding: 0.7rem 1rem;
338
+ padding: 0.5rem 0.875rem;
360
339
  text-align: center;
361
340
  text-decoration: none;
362
- overflow-wrap: anywhere;
341
+ transition:
342
+ background-color var(--tl-motion-duration-base) var(--tl-motion-ease-standard),
343
+ border-color var(--tl-motion-duration-base) var(--tl-motion-ease-standard),
344
+ color var(--tl-motion-duration-fast) var(--tl-motion-ease-standard),
345
+ filter var(--tl-motion-duration-fast) var(--tl-motion-ease-standard);
363
346
  }
364
347
 
365
- :where([data-tl-root]) :where(.tl-button:hover) {
348
+ :where([data-tl-root]) :where(.tl-button:hover, .tl-icon-button:hover) {
366
349
  filter: brightness(0.98);
367
350
  }
368
351
 
369
- :where([data-tl-root]) :where(.tl-button:focus-visible, .tl-input:focus-visible) {
370
- outline: 3px solid var(--tl-focus);
371
- outline-offset: 2px;
352
+ :where([data-tl-root]) :where(.tl-button[data-tl-size="sm"], .tl-icon-button[data-tl-size="sm"]) {
353
+ min-block-size: 2rem;
354
+ padding: 0.375rem 0.65rem;
355
+ font-size: var(--tl-font-size-sm);
356
+ }
357
+
358
+ :where([data-tl-root]) :where(.tl-button[data-tl-size="lg"], .tl-icon-button[data-tl-size="lg"]) {
359
+ min-block-size: 2.75rem;
360
+ padding: 0.7rem 1rem;
361
+ }
362
+
363
+ :where([data-tl-root]) :where(.tl-icon-button) {
364
+ inline-size: 2.25rem;
365
+ padding: 0;
366
+ }
367
+
368
+ :where([data-tl-root]) :where(.tl-button[data-tl-variant="solid"], .tl-icon-button[data-tl-variant="solid"]) {
369
+ --tl-button-background: var(--tl-tone-fill, var(--tl-color-primary-fill));
370
+ --tl-button-content: var(--tl-tone-content, var(--tl-color-primary-content));
371
+ --tl-button-border: var(--tl-tone-fill, var(--tl-color-primary-fill));
372
+ }
373
+
374
+ :where([data-tl-root]) :where(.tl-button[data-tl-variant="soft"], .tl-icon-button[data-tl-variant="soft"]) {
375
+ --tl-button-background: var(--tl-tone-soft, var(--tl-color-layer));
376
+ --tl-button-content: var(--tl-tone-ink, var(--tl-color-content-primary));
377
+ --tl-button-border: var(--tl-tone-border, var(--tl-color-border-subtle));
378
+ }
379
+
380
+ :where([data-tl-root]) :where(.tl-button[data-tl-variant="ghost"], .tl-button[data-tl-variant="plain"], .tl-icon-button[data-tl-variant="ghost"], .tl-icon-button[data-tl-variant="plain"]) {
381
+ --tl-button-background: transparent;
382
+ --tl-button-border: transparent;
372
383
  }
373
384
 
374
- :where([data-tl-root]) :where(.tl-button:disabled, .tl-button[aria-disabled="true"], .tl-input:disabled) {
385
+ :where([data-tl-root]) :where(.tl-button[data-tl-variant="plain"], .tl-icon-button[data-tl-variant="plain"]) {
386
+ padding-inline: 0;
387
+ }
388
+
389
+ :where([data-tl-root]) :where(.tl-button:disabled, .tl-icon-button:disabled, .tl-button[aria-disabled="true"], .tl-icon-button[aria-disabled="true"]) {
375
390
  cursor: not-allowed;
376
- opacity: 0.68;
391
+ opacity: 0.58;
392
+ filter: none;
377
393
  }
378
394
 
379
- :where([data-tl-root]) :where(.tl-button[data-tl-tone="primary"]) {
380
- --tl-button-background: var(--tl-primary-fill);
381
- --tl-button-content: var(--tl-primary-on-fill);
382
- --tl-button-border: var(--tl-primary-fill);
395
+ :where([data-tl-root]) :where([data-tl-tone="primary"]) {
396
+ --tl-tone-fill: var(--tl-color-primary-fill);
397
+ --tl-tone-content: var(--tl-color-primary-content);
398
+ --tl-tone-soft: var(--tl-color-primary-soft);
399
+ --tl-tone-border: var(--tl-color-primary-border);
400
+ --tl-tone-ink: var(--tl-color-primary-fill);
383
401
  }
384
402
 
385
- :where([data-tl-root]) :where(.tl-button[data-tl-tone="info"]) {
386
- --tl-button-background: var(--tl-info-fill);
387
- --tl-button-content: var(--tl-info-on-fill);
388
- --tl-button-border: var(--tl-info-fill);
403
+ :where([data-tl-root]) :where([data-tl-tone="info"]) {
404
+ --tl-tone-fill: var(--tl-color-info-fill);
405
+ --tl-tone-content: var(--tl-color-info-content);
406
+ --tl-tone-soft: var(--tl-color-info-soft);
407
+ --tl-tone-border: var(--tl-color-info-border);
408
+ --tl-tone-ink: var(--tl-color-info-fill);
389
409
  }
390
410
 
391
- :where([data-tl-root]) :where(.tl-button[data-tl-tone="success"]) {
392
- --tl-button-background: var(--tl-success-fill);
393
- --tl-button-content: var(--tl-success-on-fill);
394
- --tl-button-border: var(--tl-success-fill);
411
+ :where([data-tl-root]) :where([data-tl-tone="success"]) {
412
+ --tl-tone-fill: var(--tl-color-success-fill);
413
+ --tl-tone-content: var(--tl-color-success-content);
414
+ --tl-tone-soft: var(--tl-color-success-soft);
415
+ --tl-tone-border: var(--tl-color-success-border);
416
+ --tl-tone-ink: var(--tl-color-success-fill);
395
417
  }
396
418
 
397
- :where([data-tl-root]) :where(.tl-button[data-tl-tone="warning"]) {
398
- --tl-button-background: var(--tl-warning-fill);
399
- --tl-button-content: var(--tl-warning-on-fill);
400
- --tl-button-border: var(--tl-warning-fill);
419
+ :where([data-tl-root]) :where([data-tl-tone="warning"]) {
420
+ --tl-tone-fill: var(--tl-color-warning-fill);
421
+ --tl-tone-content: var(--tl-color-warning-content);
422
+ --tl-tone-soft: var(--tl-color-warning-soft);
423
+ --tl-tone-border: var(--tl-color-warning-border);
424
+ --tl-tone-ink: var(--tl-color-warning-fill);
401
425
  }
402
426
 
403
- :where([data-tl-root]) :where(.tl-button[data-tl-tone="danger"]) {
404
- --tl-button-background: var(--tl-danger-fill);
405
- --tl-button-content: var(--tl-danger-on-fill);
406
- --tl-button-border: var(--tl-danger-fill);
427
+ :where([data-tl-root]) :where([data-tl-tone="danger"]) {
428
+ --tl-tone-fill: var(--tl-color-danger-fill);
429
+ --tl-tone-content: var(--tl-color-danger-content);
430
+ --tl-tone-soft: var(--tl-color-danger-soft);
431
+ --tl-tone-border: var(--tl-color-danger-border);
432
+ --tl-tone-ink: var(--tl-color-danger-fill);
407
433
  }
408
434
 
409
435
  :where([data-tl-root]) :where(.tl-badge) {
410
- --tl-badge-background: var(--tl-layer);
411
- --tl-badge-content: var(--tl-content-primary);
412
- --tl-badge-border: var(--tl-border-subtle);
413
-
414
436
  display: inline-flex;
415
437
  align-items: center;
438
+ inline-size: fit-content;
416
439
  max-inline-size: 100%;
417
- color: var(--tl-badge-content);
418
- background: var(--tl-badge-background);
419
- border: 1px solid var(--tl-badge-border);
440
+ color: var(--tl-tone-ink, var(--tl-color-content-secondary));
441
+ background: var(--tl-tone-soft, var(--tl-color-layer));
442
+ border: 1px solid var(--tl-tone-border, var(--tl-color-border-subtle));
420
443
  border-radius: 999px;
421
- font-family: var(--tl-font-sans);
422
- font-size: 0.875rem;
423
- font-weight: 700;
424
- line-height: 1.3;
425
- padding: 0.25rem 0.625rem;
426
- overflow-wrap: anywhere;
444
+ font-size: var(--tl-font-size-xs);
445
+ font-weight: 650;
446
+ line-height: 1.2;
447
+ padding: 0.2rem 0.55rem;
448
+ }
449
+
450
+ :where([data-tl-root]) :where(.tl-alert, .tl-toast) {
451
+ display: grid;
452
+ grid-template-columns: auto minmax(0, 1fr) auto;
453
+ gap: var(--tl-space-3);
454
+ color: var(--tl-color-content-primary);
455
+ background: var(--tl-tone-soft, var(--tl-color-surface));
456
+ border: 1px solid var(--tl-tone-border, var(--tl-color-border-subtle));
457
+ border-radius: var(--tl-radius-card);
458
+ padding: var(--tl-space-4);
459
+ }
460
+
461
+ :where([data-tl-root]) :where(.tl-alert__title, .tl-toast__title) {
462
+ font-weight: 720;
463
+ }
464
+
465
+ :where([data-tl-root]) :where(.tl-alert__description, .tl-toast__description) {
466
+ color: var(--tl-color-content-secondary);
467
+ font-size: var(--tl-font-size-sm);
468
+ }
469
+
470
+ :where([data-tl-root]) :where(.tl-toast-region) {
471
+ position: fixed;
472
+ z-index: 50;
473
+ inset-block-end: var(--tl-space-4);
474
+ inset-inline-end: var(--tl-space-4);
475
+ display: grid;
476
+ gap: var(--tl-space-2);
477
+ inline-size: min(calc(100vw - 2rem), 24rem);
478
+ pointer-events: none;
427
479
  }
428
480
 
429
- :where([data-tl-root]) :where(.tl-badge[data-tl-tone="primary"]) {
430
- --tl-badge-background: var(--tl-primary-soft);
431
- --tl-badge-content: var(--tl-primary-content);
432
- --tl-badge-border: var(--tl-primary-border);
481
+ :where([data-tl-root]) :where(.tl-toast-region > *) {
482
+ pointer-events: auto;
433
483
  }
434
484
 
435
- :where([data-tl-root]) :where(.tl-badge[data-tl-tone="info"]) {
436
- --tl-badge-background: var(--tl-info-soft);
437
- --tl-badge-content: var(--tl-info-content);
438
- --tl-badge-border: var(--tl-info-border);
485
+ :where([data-tl-root]) :where(.tl-field) {
486
+ display: grid;
487
+ gap: var(--tl-space-2);
488
+ min-inline-size: 0;
439
489
  }
440
490
 
441
- :where([data-tl-root]) :where(.tl-badge[data-tl-tone="success"]) {
442
- --tl-badge-background: var(--tl-success-soft);
443
- --tl-badge-content: var(--tl-success-content);
444
- --tl-badge-border: var(--tl-success-border);
491
+ :where([data-tl-root]) :where(.tl-field__label) {
492
+ color: var(--tl-color-content-secondary);
493
+ font-size: var(--tl-font-size-sm);
494
+ font-weight: 650;
445
495
  }
446
496
 
447
- :where([data-tl-root]) :where(.tl-badge[data-tl-tone="warning"]) {
448
- --tl-badge-background: var(--tl-warning-soft);
449
- --tl-badge-content: var(--tl-warning-content);
450
- --tl-badge-border: var(--tl-warning-border);
497
+ :where([data-tl-root]) :where(.tl-field__help) {
498
+ color: var(--tl-color-content-subtle);
499
+ font-size: var(--tl-font-size-sm);
451
500
  }
452
501
 
453
- :where([data-tl-root]) :where(.tl-badge[data-tl-tone="danger"]) {
454
- --tl-badge-background: var(--tl-danger-soft);
455
- --tl-badge-content: var(--tl-danger-content);
456
- --tl-badge-border: var(--tl-danger-border);
502
+ :where([data-tl-root]) :where(.tl-field__error) {
503
+ color: var(--tl-color-danger-fill);
504
+ font-size: var(--tl-font-size-sm);
505
+ font-weight: 650;
457
506
  }
458
507
 
459
- :where([data-tl-root]) :where(.tl-alert) {
460
- --tl-component-background: var(--tl-layer);
461
- --tl-component-content: var(--tl-content-primary);
462
- --tl-component-content-muted: var(--tl-content-secondary);
463
- --tl-component-border: var(--tl-border-strong);
508
+ :where([data-tl-root]) :where(.tl-input, .tl-select) {
509
+ inline-size: 100%;
510
+ min-block-size: 2.375rem;
511
+ min-inline-size: 0;
512
+ max-inline-size: 100%;
513
+ color: var(--tl-color-content-primary);
514
+ background: var(--tl-color-surface);
515
+ border: 1px solid var(--tl-color-border-strong);
516
+ border-radius: var(--tl-radius-control);
517
+ padding: 0.55rem 0.7rem;
518
+ transition:
519
+ border-color var(--tl-motion-duration-base) var(--tl-motion-ease-standard),
520
+ background-color var(--tl-motion-duration-base) var(--tl-motion-ease-standard);
521
+ }
464
522
 
465
- background: var(--tl-component-background);
466
- border-radius: var(--tl-radius-md);
467
- padding: var(--tl-alert-padding, 1rem);
523
+ :where([data-tl-root]) :where(.tl-input[aria-invalid="true"], .tl-select[aria-invalid="true"]) {
524
+ border-color: var(--tl-color-danger-fill);
468
525
  }
469
526
 
470
- :where([data-tl-root]) :where(.tl-alert[data-tl-tone="primary"]) {
471
- --tl-component-background: var(--tl-primary-soft);
472
- --tl-component-content: var(--tl-primary-content);
473
- --tl-component-content-muted: var(--tl-primary-content);
474
- --tl-component-border: var(--tl-primary-border);
527
+ :where([data-tl-root]) :where(.tl-switch) {
528
+ display: inline-flex;
529
+ align-items: center;
530
+ gap: var(--tl-space-2);
531
+ max-inline-size: 100%;
532
+ border: 0;
533
+ background: transparent;
534
+ color: inherit;
535
+ cursor: pointer;
536
+ font: inherit;
537
+ padding: 0;
538
+ text-align: start;
475
539
  }
476
540
 
477
- :where([data-tl-root]) :where(.tl-alert[data-tl-tone="info"]) {
478
- --tl-component-background: var(--tl-info-soft);
479
- --tl-component-content: var(--tl-info-content);
480
- --tl-component-content-muted: var(--tl-info-content);
481
- --tl-component-border: var(--tl-info-border);
541
+ :where([data-tl-root]) :where(.tl-switch__track) {
542
+ display: inline-flex;
543
+ align-items: center;
544
+ inline-size: 2.4rem;
545
+ block-size: 1.4rem;
546
+ padding: 0.125rem;
547
+ border: 1px solid var(--tl-color-border-strong);
548
+ border-radius: 999px;
549
+ background: var(--tl-color-layer);
482
550
  }
483
551
 
484
- :where([data-tl-root]) :where(.tl-alert[data-tl-tone="success"]) {
485
- --tl-component-background: var(--tl-success-soft);
486
- --tl-component-content: var(--tl-success-content);
487
- --tl-component-content-muted: var(--tl-success-content);
488
- --tl-component-border: var(--tl-success-border);
552
+ :where([data-tl-root]) :where(.tl-switch__thumb) {
553
+ inline-size: 1rem;
554
+ block-size: 1rem;
555
+ border-radius: 999px;
556
+ background: var(--tl-color-content-secondary);
557
+ transition: transform var(--tl-motion-duration-base) var(--tl-motion-ease-standard);
489
558
  }
490
559
 
491
- :where([data-tl-root]) :where(.tl-alert[data-tl-tone="warning"]) {
492
- --tl-component-background: var(--tl-warning-soft);
493
- --tl-component-content: var(--tl-warning-content);
494
- --tl-component-content-muted: var(--tl-warning-content);
495
- --tl-component-border: var(--tl-warning-border);
560
+ :where([data-tl-root]) :where(.tl-switch[aria-checked="true"] .tl-switch__track) {
561
+ border-color: var(--tl-color-primary-fill);
562
+ background: var(--tl-color-primary-soft);
496
563
  }
497
564
 
498
- :where([data-tl-root]) :where(.tl-alert[data-tl-tone="danger"]) {
499
- --tl-component-background: var(--tl-danger-soft);
500
- --tl-component-content: var(--tl-danger-content);
501
- --tl-component-content-muted: var(--tl-danger-content);
502
- --tl-component-border: var(--tl-danger-border);
565
+ :where([data-tl-root]) :where(.tl-switch[aria-checked="true"] .tl-switch__thumb) {
566
+ transform: translateX(1rem);
567
+ background: var(--tl-color-primary-fill);
503
568
  }
504
569
 
505
- :where([data-tl-root]) :where(.tl-field) {
570
+ :where([data-tl-root]) :where(.tl-tabs) {
506
571
  display: grid;
507
- gap: 0.375rem;
572
+ gap: var(--tl-space-4);
508
573
  min-inline-size: 0;
509
574
  }
510
575
 
511
- :where([data-tl-root]) :where(.tl-input) {
576
+ :where([data-tl-root]) :where(.tl-tabs__list) {
577
+ display: flex;
578
+ flex-wrap: wrap;
579
+ gap: var(--tl-space-2);
580
+ padding: var(--tl-space-2);
581
+ border: 1px solid var(--tl-color-border-subtle);
582
+ border-radius: var(--tl-radius-card);
583
+ background: var(--tl-color-layer);
584
+ }
585
+
586
+ :where([data-tl-root]) :where(.tl-tabs__tab) {
587
+ border: 1px solid transparent;
588
+ border-radius: var(--tl-radius-control);
589
+ background: transparent;
590
+ color: var(--tl-color-content-secondary);
591
+ cursor: pointer;
592
+ padding: 0.5rem 0.75rem;
593
+ }
594
+
595
+ :where([data-tl-root]) :where(.tl-tabs__tab[aria-selected="true"]) {
596
+ color: var(--tl-color-primary-fill);
597
+ background: var(--tl-color-surface);
598
+ border-color: var(--tl-color-primary-border);
599
+ font-weight: 650;
600
+ }
601
+
602
+ :where([data-tl-root]) :where(.tl-table) {
603
+ display: block;
512
604
  inline-size: 100%;
513
- min-block-size: 2.75rem;
514
- color: var(--tl-content-primary);
515
- background: var(--tl-surface);
516
- border: 1px solid var(--tl-border-strong);
517
- border-radius: var(--tl-radius-input, var(--tl-radius-md));
518
- font-family: var(--tl-font-sans);
519
- font-size: 1rem;
520
- line-height: 1.4;
521
- padding: 0.65rem 0.75rem;
605
+ max-inline-size: 100%;
606
+ overflow-x: auto;
607
+ border-collapse: collapse;
608
+ white-space: nowrap;
609
+ }
610
+
611
+ :where([data-tl-root]) :where(.tl-table table, table.tl-table) {
612
+ inline-size: 100%;
613
+ border-collapse: collapse;
614
+ }
615
+
616
+ :where([data-tl-root]) :where(.tl-table th, .tl-table td) {
617
+ padding: 0.75rem var(--tl-space-4);
618
+ border-block-end: 1px solid var(--tl-color-border-subtle);
619
+ text-align: start;
620
+ vertical-align: middle;
621
+ }
622
+
623
+ :where([data-tl-root]) :where(.tl-table th) {
624
+ color: var(--tl-color-content-subtle);
625
+ font-size: var(--tl-font-size-xs);
626
+ font-weight: 720;
627
+ letter-spacing: 0.08em;
628
+ text-transform: uppercase;
629
+ }
630
+
631
+ :where([data-tl-root]) :where(.tl-table tr[aria-selected="true"]) {
632
+ background: var(--tl-color-primary-soft);
633
+ box-shadow: inset 3px 0 0 var(--tl-color-primary-fill);
522
634
  }
523
635
 
524
- :where([data-tl-root]) :where(.tl-input::placeholder) {
525
- color: var(--tl-content-subtle);
636
+ :where([data-tl-root]) :where(.tl-code-block) {
637
+ display: grid;
638
+ grid-template-columns: minmax(0, 1fr) auto;
639
+ gap: var(--tl-space-3);
640
+ align-items: start;
641
+ max-inline-size: 100%;
642
+ color: #eef2f7;
643
+ background: #0f141c;
644
+ border: 1px solid color-mix(in srgb, var(--tl-color-border-strong) 50%, transparent);
645
+ border-radius: var(--tl-radius-card);
646
+ padding: var(--tl-space-4);
647
+ overflow-x: auto;
648
+ }
649
+
650
+ :where([data-tl-root]) :where(.tl-code-block__content) {
651
+ min-inline-size: 0;
652
+ margin: 0;
653
+ font-family: var(--tl-font-mono);
654
+ font-size: var(--tl-font-size-sm);
655
+ white-space: pre;
656
+ }
657
+
658
+ :where([data-tl-root]) :where(.tl-code-block__copy) {
659
+ display: inline-flex;
660
+ align-items: center;
661
+ justify-content: center;
662
+ justify-self: end;
663
+ min-block-size: 2rem;
664
+ border: 1px solid var(--tl-color-border-strong);
665
+ border-radius: var(--tl-radius-control);
666
+ background: var(--tl-color-surface);
667
+ color: var(--tl-color-content-primary);
668
+ cursor: pointer;
669
+ font-weight: 650;
670
+ padding: 0.35rem 0.65rem;
671
+ }
672
+
673
+ :where([data-tl-root]) :where(.tl-filter-bar) {
674
+ display: flex;
675
+ flex-wrap: wrap;
676
+ align-items: end;
677
+ gap: var(--tl-space-3);
678
+ min-inline-size: 0;
679
+ padding: var(--tl-space-3);
680
+ border: 1px solid var(--tl-color-border-subtle);
681
+ border-radius: var(--tl-radius-card);
682
+ background: var(--tl-color-layer);
683
+ }
684
+
685
+ :where([data-tl-root]) :where(.tl-filter-bar__group) {
686
+ display: grid;
687
+ gap: var(--tl-space-1);
688
+ min-inline-size: min(100%, 12rem);
689
+ }
690
+
691
+ :where([data-tl-root]) :where(.tl-filter-bar__actions) {
692
+ margin-inline-start: auto;
693
+ }
694
+
695
+ :where([data-tl-root]) :where(.tl-metric-group) {
696
+ display: grid;
697
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
698
+ gap: var(--tl-space-4);
699
+ }
700
+
701
+ :where([data-tl-root]) :where(.tl-metric-card) {
702
+ display: grid;
703
+ gap: var(--tl-space-1);
704
+ padding: var(--tl-space-4);
705
+ border: 1px solid var(--tl-color-border-subtle);
706
+ border-radius: var(--tl-radius-card);
707
+ background: var(--tl-color-surface);
708
+ box-shadow: var(--tl-shadow-card);
709
+ }
710
+
711
+ :where([data-tl-root]) :where(.tl-metric-card__label) {
712
+ color: var(--tl-color-content-secondary);
713
+ font-size: var(--tl-font-size-sm);
714
+ }
715
+
716
+ :where([data-tl-root]) :where(.tl-metric-card__value) {
717
+ color: var(--tl-color-content-primary);
718
+ font-size: 1.55rem;
719
+ font-weight: 760;
720
+ line-height: 1;
721
+ }
722
+
723
+ :where([data-tl-root]) :where(.tl-metric-card__delta) {
724
+ color: var(--tl-tone-ink, var(--tl-color-content-subtle));
725
+ font-family: var(--tl-font-mono);
726
+ font-size: var(--tl-font-size-xs);
727
+ font-weight: 650;
728
+ }
729
+
730
+ :where([data-tl-root]) :where(.tl-settings-section) {
731
+ display: grid;
732
+ grid-template-columns: minmax(10rem, 0.36fr) minmax(0, 1fr);
733
+ gap: var(--tl-space-5);
734
+ padding-block: var(--tl-space-5);
735
+ border-block-end: 1px solid var(--tl-color-border-subtle);
736
+ }
737
+
738
+ :where([data-tl-root]) :where(.tl-stepper) {
739
+ display: grid;
740
+ gap: var(--tl-space-3);
741
+ }
742
+
743
+ :where([data-tl-root]) :where(.tl-stepper__item) {
744
+ display: flex;
745
+ align-items: center;
746
+ gap: var(--tl-space-3);
747
+ min-block-size: 3rem;
748
+ padding: var(--tl-space-3);
749
+ border: 1px solid var(--tl-color-border-subtle);
750
+ border-radius: var(--tl-radius-card);
751
+ background: var(--tl-color-layer);
752
+ }
753
+
754
+ :where([data-tl-root]) :where(.tl-stepper__item[aria-current="step"]) {
755
+ border-color: var(--tl-color-primary-border);
756
+ background: var(--tl-color-primary-soft);
757
+ }
758
+
759
+ :where([data-tl-root]) :where(.tl-stepper__marker) {
760
+ display: inline-grid;
761
+ place-items: center;
762
+ inline-size: 1.75rem;
763
+ block-size: 1.75rem;
764
+ border-radius: 999px;
765
+ background: var(--tl-color-surface);
766
+ border: 1px solid var(--tl-color-border-subtle);
767
+ font-weight: 720;
768
+ }
769
+
770
+ :where([data-tl-root]) :where(.tl-choice-card) {
771
+ display: grid;
772
+ gap: var(--tl-space-2);
773
+ min-inline-size: 0;
774
+ padding: var(--tl-space-4);
775
+ color: var(--tl-color-content-primary);
776
+ background: var(--tl-color-surface);
777
+ border: 1px solid var(--tl-color-border-subtle);
778
+ border-radius: var(--tl-radius-card);
779
+ text-align: start;
780
+ }
781
+
782
+ :where([data-tl-root]) :where(.tl-choice-card[aria-pressed="true"], .tl-choice-card[aria-selected="true"]) {
783
+ border-color: var(--tl-color-primary-border);
784
+ background: var(--tl-color-primary-soft);
785
+ box-shadow: inset 3px 0 0 var(--tl-color-primary-fill);
786
+ }
787
+
788
+ :where([data-tl-root]) :where(.tl-empty-state) {
789
+ display: grid;
790
+ place-items: center;
791
+ gap: var(--tl-space-4);
792
+ min-block-size: 14rem;
793
+ padding: var(--tl-space-6);
794
+ text-align: center;
795
+ }
796
+
797
+ :where([data-tl-root]) :where(.tl-docs-shell) {
798
+ display: grid;
799
+ grid-template-columns: minmax(12rem, 0.28fr) minmax(0, 1fr) minmax(10rem, 0.22fr);
800
+ gap: var(--tl-space-5);
801
+ min-inline-size: 0;
802
+ }
803
+
804
+ @media (max-width: 56rem) {
805
+ :where([data-tl-root]) :where(.tl-app-shell) {
806
+ grid-template-columns: 1fr;
807
+ }
808
+
809
+ :where([data-tl-root]) :where(.tl-app-shell__sidebar) {
810
+ border-inline-end: 0;
811
+ border-block-end: 1px solid var(--tl-color-border-subtle);
812
+ }
813
+
814
+ :where([data-tl-root]) :where(.tl-app-shell__content) {
815
+ padding: var(--tl-space-4);
816
+ }
817
+
818
+ :where([data-tl-root]) :where(.tl-side-nav) {
819
+ padding: var(--tl-space-4);
820
+ }
821
+
822
+ :where([data-tl-root]) :where(.tl-side-nav__group) {
823
+ grid-template-columns: 1fr;
824
+ }
825
+
826
+ :where([data-tl-root]) :where(.tl-side-nav__item) {
827
+ flex-wrap: wrap;
828
+ }
829
+
830
+ :where([data-tl-root]) :where(.tl-grid, .tl-metric-group, .tl-settings-section, .tl-docs-shell) {
831
+ grid-template-columns: 1fr;
832
+ }
833
+
834
+ :where([data-tl-root]) :where(.tl-filter-bar__actions) {
835
+ margin-inline-start: 0;
836
+ }
837
+
838
+ :where([data-tl-root]) :where(.tl-code-block) {
839
+ grid-template-columns: 1fr;
840
+ }
526
841
  }
527
842
  }
528
843
 
529
844
  @layer threelight.utilities {
530
- :where([data-tl-root]) {
531
- background: var(--tl-canvas);
532
- color: var(--tl-content-primary);
533
- font-family: var(--tl-font-sans);
845
+ :where([data-tl-root]) :where(.tl-sr-only) {
846
+ position: absolute;
847
+ inline-size: 1px;
848
+ block-size: 1px;
849
+ padding: 0;
850
+ margin: -1px;
851
+ overflow: hidden;
852
+ clip: rect(0, 0, 0, 0);
853
+ white-space: nowrap;
854
+ border: 0;
855
+ }
856
+
857
+ :where([data-tl-root]) :where(.tl-truncate) {
858
+ min-inline-size: 0;
859
+ overflow: hidden;
860
+ text-overflow: ellipsis;
861
+ white-space: nowrap;
534
862
  }
535
863
  }