@threelight/ui 0.2.0-alpha.0 → 0.2.0-alpha.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.
Files changed (8) hide show
  1. package/README.md +124 -95
  2. package/css/base.css +477 -352
  3. package/dist/index.d.ts +23 -9
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +79 -30
  6. package/dist/index.js.map +1 -1
  7. package/examples/index.html +102 -43
  8. package/package.json +1 -1
package/css/base.css CHANGED
@@ -1,535 +1,660 @@
1
1
  @layer threelight.theme, threelight.primitives, 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
-
4
+ :where([data-tl-root]) {
56
5
  --tl-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
57
6
  "Segoe UI", sans-serif;
58
7
  --tl-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono",
59
8
  monospace;
60
-
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;
9
+ --tl-font-size-display: 3rem;
10
+ --tl-font-size-heading: 1.5rem;
11
+ --tl-font-size-body: 1rem;
12
+ --tl-font-size-caption: 0.875rem;
13
+ --tl-font-size-metric: 2.5rem;
14
+
15
+ --tl-space-1: 0.25rem;
16
+ --tl-space-2: 0.5rem;
17
+ --tl-space-3: 0.75rem;
18
+ --tl-space-4: 1rem;
19
+ --tl-space-5: 1.25rem;
20
+ --tl-space-6: 1.5rem;
21
+ --tl-space-8: 2rem;
22
+ --tl-space-10: 2.5rem;
96
23
 
97
24
  --tl-radius-sm: 4px;
98
25
  --tl-radius-md: 6px;
99
26
  --tl-radius-lg: 8px;
100
- --tl-shadow-sm: 0 1px 2px rgb(0 0 0 / 24%);
27
+ --tl-shadow-sm: 0 1px 2px rgb(0 0 0 / 12%);
28
+
29
+ --tl-color-canvas: #f8fafc;
30
+ --tl-color-surface: #ffffff;
31
+ --tl-color-layer: #f1f5f9;
32
+ --tl-color-content-primary: #111827;
33
+ --tl-color-content-secondary: #334155;
34
+ --tl-color-content-subtle: #475569;
35
+ --tl-color-border-subtle: #d8dee8;
36
+ --tl-color-border-strong: #94a3b8;
37
+ --tl-color-focus: #2563eb;
38
+
39
+ --tl-color-primary-fill: #1d4ed8;
40
+ --tl-color-primary-content: #ffffff;
41
+ --tl-color-primary-soft: #e0ecff;
42
+ --tl-color-primary-border: #9db8ff;
43
+ --tl-color-info-fill: #0369a1;
44
+ --tl-color-info-content: #ffffff;
45
+ --tl-color-info-soft: #e0f2fe;
46
+ --tl-color-info-border: #8bd3f7;
47
+ --tl-color-success-fill: #166534;
48
+ --tl-color-success-content: #ffffff;
49
+ --tl-color-success-soft: #e8f7ee;
50
+ --tl-color-success-border: #a9ddb9;
51
+ --tl-color-warning-fill: #92400e;
52
+ --tl-color-warning-content: #ffffff;
53
+ --tl-color-warning-soft: #fff4d8;
54
+ --tl-color-warning-border: #f1d18a;
55
+ --tl-color-danger-fill: #b42318;
56
+ --tl-color-danger-content: #ffffff;
57
+ --tl-color-danger-soft: #ffebe7;
58
+ --tl-color-danger-border: #ffb4aa;
59
+
60
+ color: var(--tl-color-content-primary);
61
+ background: var(--tl-color-canvas);
62
+ font-family: var(--tl-font-sans);
63
+ text-size-adjust: 100%;
64
+ }
65
+
66
+ :where([data-tl-root][data-tl-mode="dark"]) {
67
+ --tl-color-canvas: #0f172a;
68
+ --tl-color-surface: #172033;
69
+ --tl-color-layer: #1f2a3d;
70
+ --tl-color-content-primary: #f8fafc;
71
+ --tl-color-content-secondary: #dbe4ee;
72
+ --tl-color-content-subtle: #b8c4d4;
73
+ --tl-color-border-subtle: #334155;
74
+ --tl-color-border-strong: #64748b;
75
+ --tl-color-focus: #93c5fd;
76
+
77
+ --tl-color-primary-fill: #93c5fd;
78
+ --tl-color-primary-content: #10213f;
79
+ --tl-color-primary-soft: #18365f;
80
+ --tl-color-primary-border: #4f7db8;
81
+ --tl-color-info-fill: #7dd3fc;
82
+ --tl-color-info-content: #082f49;
83
+ --tl-color-info-soft: #14364d;
84
+ --tl-color-info-border: #3f87aa;
85
+ --tl-color-success-fill: #86efac;
86
+ --tl-color-success-content: #052e16;
87
+ --tl-color-success-soft: #173924;
88
+ --tl-color-success-border: #4b9462;
89
+ --tl-color-warning-fill: #facc15;
90
+ --tl-color-warning-content: #422006;
91
+ --tl-color-warning-soft: #3f3215;
92
+ --tl-color-warning-border: #a88924;
93
+ --tl-color-danger-fill: #fca5a5;
94
+ --tl-color-danger-content: #450a0a;
95
+ --tl-color-danger-soft: #46201f;
96
+ --tl-color-danger-border: #b75b59;
97
+ }
98
+
99
+ /*
100
+ Temporary alpha compatibility aliases for old unnamespaced color tokens.
101
+ These are not the stable public token contract and are not exported in
102
+ metadata. New code, docs, examples, and adapters should use --tl-color-*.
103
+ */
104
+ :where([data-tl-root]) {
105
+ --tl-canvas: var(--tl-color-canvas);
106
+ --tl-surface: var(--tl-color-surface);
107
+ --tl-layer: var(--tl-color-layer);
108
+ --tl-content-primary: var(--tl-color-content-primary);
109
+ --tl-content-secondary: var(--tl-color-content-secondary);
110
+ --tl-content-subtle: var(--tl-color-content-subtle);
111
+ --tl-border-subtle: var(--tl-color-border-subtle);
112
+ --tl-border-strong: var(--tl-color-border-strong);
113
+ --tl-focus: var(--tl-color-focus);
114
+ --tl-primary-fill: var(--tl-color-primary-fill);
115
+ --tl-primary-on-fill: var(--tl-color-primary-content);
116
+ --tl-primary-soft: var(--tl-color-primary-soft);
117
+ --tl-primary-content: var(--tl-color-primary-content);
118
+ --tl-primary-border: var(--tl-color-primary-border);
119
+ --tl-info-fill: var(--tl-color-info-fill);
120
+ --tl-info-on-fill: var(--tl-color-info-content);
121
+ --tl-info-soft: var(--tl-color-info-soft);
122
+ --tl-info-content: var(--tl-color-info-content);
123
+ --tl-info-border: var(--tl-color-info-border);
124
+ --tl-success-fill: var(--tl-color-success-fill);
125
+ --tl-success-on-fill: var(--tl-color-success-content);
126
+ --tl-success-soft: var(--tl-color-success-soft);
127
+ --tl-success-content: var(--tl-color-success-content);
128
+ --tl-success-border: var(--tl-color-success-border);
129
+ --tl-warning-fill: var(--tl-color-warning-fill);
130
+ --tl-warning-on-fill: var(--tl-color-warning-content);
131
+ --tl-warning-soft: var(--tl-color-warning-soft);
132
+ --tl-warning-content: var(--tl-color-warning-content);
133
+ --tl-warning-border: var(--tl-color-warning-border);
134
+ --tl-danger-fill: var(--tl-color-danger-fill);
135
+ --tl-danger-on-fill: var(--tl-color-danger-content);
136
+ --tl-danger-soft: var(--tl-color-danger-soft);
137
+ --tl-danger-content: var(--tl-color-danger-content);
138
+ --tl-danger-border: var(--tl-color-danger-border);
101
139
  }
102
140
  }
103
141
 
104
142
  @layer threelight.primitives {
105
143
  :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
144
+ .tl-layout-section,
145
+ .tl-layout-stack,
146
+ .tl-layout-cluster,
147
+ .tl-layout-grid,
148
+ .tl-component-card,
149
+ .tl-component-panel,
150
+ .tl-component-alert,
151
+ .tl-component-display,
152
+ .tl-component-heading,
153
+ .tl-component-body,
154
+ .tl-component-caption,
155
+ .tl-component-meta,
156
+ .tl-component-label,
157
+ .tl-component-action-text,
158
+ .tl-component-metric,
159
+ .tl-component-code,
160
+ .tl-component-button,
161
+ .tl-component-badge,
162
+ .tl-component-field,
163
+ .tl-component-input,
164
+ .tl-component-help,
165
+ .tl-pattern-page-header,
166
+ .tl-pattern-page-header__content,
167
+ .tl-pattern-page-header__actions,
168
+ .tl-pattern-empty-state,
169
+ .tl-pattern-empty-state__content,
170
+ .tl-pattern-empty-state__actions
128
171
  ) {
129
172
  box-sizing: border-box;
173
+ min-inline-size: 0;
174
+ max-inline-size: 100%;
130
175
  }
131
176
 
132
177
  :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
178
+ .tl-component-display,
179
+ .tl-component-heading,
180
+ .tl-component-body,
181
+ .tl-component-caption,
182
+ .tl-component-meta,
183
+ .tl-component-label,
184
+ .tl-component-action-text,
185
+ .tl-component-metric,
186
+ .tl-component-code,
187
+ .tl-component-button,
188
+ .tl-component-badge,
189
+ .tl-component-alert,
190
+ .tl-component-help,
191
+ .tl-pattern-page-header,
192
+ .tl-pattern-page-header__content,
193
+ .tl-pattern-empty-state,
194
+ .tl-pattern-empty-state__content
143
195
  ) {
144
- margin: 0;
145
- color: var(--tl-component-content, var(--tl-content-primary));
146
- font-family: var(--tl-font-sans);
147
196
  overflow-wrap: anywhere;
148
- text-wrap: pretty;
197
+ word-break: normal;
149
198
  }
150
199
 
151
- :where([data-tl-root]) :where(.tl-section) {
152
- inline-size: min(100% - 2rem, var(--tl-section-max, 72rem));
200
+ :where([data-tl-root]) :where(.tl-layout-section) {
201
+ inline-size: min(100%, var(--tl-section-max, 72rem));
153
202
  margin-inline: auto;
154
- padding-block: var(--tl-section-padding, 3rem);
203
+ padding-block: var(--tl-section-padding-block, var(--tl-space-8));
204
+ padding-inline: var(--tl-section-padding-inline, var(--tl-space-4));
155
205
  }
156
206
 
157
- :where([data-tl-root]) :where(.tl-stack) {
207
+ :where([data-tl-root]) :where(.tl-layout-stack) {
158
208
  display: flex;
159
209
  flex-direction: column;
160
- gap: var(--tl-gap, 1rem);
161
- min-inline-size: 0;
210
+ gap: var(--tl-gap, var(--tl-space-4));
162
211
  }
163
212
 
164
- :where([data-tl-root]) :where(.tl-cluster) {
213
+ :where([data-tl-root]) :where(.tl-layout-cluster) {
165
214
  display: flex;
166
215
  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;
216
+ align-items: center;
217
+ gap: var(--tl-gap, var(--tl-space-3));
171
218
  }
172
219
 
173
- :where([data-tl-root]) :where(.tl-grid) {
220
+ :where([data-tl-root]) :where(.tl-layout-grid) {
174
221
  display: grid;
175
222
  grid-template-columns: repeat(
176
223
  auto-fit,
177
224
  minmax(min(100%, var(--tl-grid-min, 16rem)), 1fr)
178
225
  );
179
- gap: var(--tl-gap, 1rem);
180
- min-inline-size: 0;
226
+ gap: var(--tl-gap, var(--tl-space-4));
181
227
  }
182
228
 
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);
229
+ :where([data-tl-root]) :where(.tl-component-card, .tl-component-panel, .tl-component-alert) {
230
+ --tl-component-background: var(--tl-color-surface);
231
+ --tl-component-content: var(--tl-color-content-primary);
232
+ --tl-component-content-muted: var(--tl-color-content-secondary);
233
+ --tl-component-border: var(--tl-color-border-subtle);
188
234
 
189
- min-inline-size: 0;
190
235
  color: var(--tl-component-content);
191
- border: 1px solid var(--tl-component-border);
192
- font-family: var(--tl-font-sans);
193
- }
194
-
195
- :where([data-tl-root]) :where(.tl-surface) {
196
236
  background: var(--tl-component-background);
197
- border-radius: var(--tl-radius-surface, var(--tl-radius-lg));
198
- padding: var(--tl-surface-padding, 1.5rem);
237
+ border: 1px solid var(--tl-component-border);
199
238
  }
200
239
 
201
- :where([data-tl-root]) :where(.tl-card) {
202
- background: var(--tl-component-background);
240
+ :where([data-tl-root]) :where(.tl-component-card) {
203
241
  border-radius: var(--tl-radius-card, var(--tl-radius-lg));
204
242
  box-shadow: var(--tl-card-shadow, var(--tl-shadow-sm));
205
- padding: var(--tl-card-padding, 1.25rem);
243
+ padding: var(--tl-card-padding, var(--tl-space-5));
206
244
  }
207
245
 
208
- :where([data-tl-root]) :where(.tl-panel) {
209
- --tl-component-background: var(--tl-layer);
246
+ :where([data-tl-root]) :where(.tl-component-panel) {
247
+ --tl-component-background: var(--tl-color-layer);
210
248
 
211
- background: var(--tl-component-background);
212
249
  border-radius: var(--tl-radius-panel, var(--tl-radius-md));
213
- padding: var(--tl-panel-padding, 1rem);
250
+ padding: var(--tl-panel-padding, var(--tl-space-4));
251
+ }
252
+
253
+ :where([data-tl-root]) :where(.tl-component-alert) {
254
+ --tl-component-background: var(--tl-color-layer);
255
+ --tl-component-border: var(--tl-color-border-strong);
256
+
257
+ border-radius: var(--tl-radius-md);
258
+ padding: var(--tl-alert-padding, var(--tl-space-4));
214
259
  }
215
260
 
216
261
  :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"]
262
+ .tl-component-card[data-tl-tone="primary"],
263
+ .tl-component-panel[data-tl-tone="primary"],
264
+ .tl-component-alert[data-tl-tone="primary"]
220
265
  ) {
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);
266
+ --tl-component-background: var(--tl-color-primary-soft);
267
+ --tl-component-content: var(--tl-color-content-primary);
268
+ --tl-component-content-muted: var(--tl-color-content-secondary);
269
+ --tl-component-border: var(--tl-color-primary-border);
225
270
  }
226
271
 
227
272
  :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"]
273
+ .tl-component-card[data-tl-tone="info"],
274
+ .tl-component-panel[data-tl-tone="info"],
275
+ .tl-component-alert[data-tl-tone="info"]
231
276
  ) {
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);
277
+ --tl-component-background: var(--tl-color-info-soft);
278
+ --tl-component-content: var(--tl-color-content-primary);
279
+ --tl-component-content-muted: var(--tl-color-content-secondary);
280
+ --tl-component-border: var(--tl-color-info-border);
236
281
  }
237
282
 
238
283
  :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"]
284
+ .tl-component-card[data-tl-tone="success"],
285
+ .tl-component-panel[data-tl-tone="success"],
286
+ .tl-component-alert[data-tl-tone="success"]
242
287
  ) {
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);
288
+ --tl-component-background: var(--tl-color-success-soft);
289
+ --tl-component-content: var(--tl-color-content-primary);
290
+ --tl-component-content-muted: var(--tl-color-content-secondary);
291
+ --tl-component-border: var(--tl-color-success-border);
247
292
  }
248
293
 
249
294
  :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"]
295
+ .tl-component-card[data-tl-tone="warning"],
296
+ .tl-component-panel[data-tl-tone="warning"],
297
+ .tl-component-alert[data-tl-tone="warning"]
253
298
  ) {
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);
299
+ --tl-component-background: var(--tl-color-warning-soft);
300
+ --tl-component-content: var(--tl-color-content-primary);
301
+ --tl-component-content-muted: var(--tl-color-content-secondary);
302
+ --tl-component-border: var(--tl-color-warning-border);
258
303
  }
259
304
 
260
305
  :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"]
306
+ .tl-component-card[data-tl-tone="danger"],
307
+ .tl-component-panel[data-tl-tone="danger"],
308
+ .tl-component-alert[data-tl-tone="danger"]
264
309
  ) {
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);
310
+ --tl-component-background: var(--tl-color-danger-soft);
311
+ --tl-component-content: var(--tl-color-content-primary);
312
+ --tl-component-content-muted: var(--tl-color-content-secondary);
313
+ --tl-component-border: var(--tl-color-danger-border);
269
314
  }
270
315
 
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;
316
+ :where([data-tl-root]) :where(.tl-component-display) {
317
+ color: var(--tl-component-content, var(--tl-color-content-primary));
318
+ font-size: var(--tl-font-size-display);
319
+ font-weight: 760;
276
320
  line-height: 1.05;
277
- }
278
-
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
321
  letter-spacing: 0;
284
- line-height: 1.2;
322
+ text-wrap: balance;
285
323
  }
286
324
 
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;
325
+ :where([data-tl-root]) :where(.tl-component-heading) {
326
+ color: var(--tl-component-content, var(--tl-color-content-primary));
327
+ font-size: var(--tl-font-size-heading);
328
+ font-weight: 720;
329
+ line-height: 1.18;
330
+ letter-spacing: 0;
331
+ text-wrap: balance;
291
332
  }
292
333
 
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;
334
+ :where([data-tl-root]) :where(.tl-component-body) {
335
+ color: var(--tl-component-content, var(--tl-color-content-primary));
336
+ font-size: var(--tl-font-size-body);
337
+ line-height: 1.62;
297
338
  }
298
339
 
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;
340
+ :where([data-tl-root]) :where(.tl-component-caption, .tl-component-help) {
341
+ color: var(--tl-component-content-muted, var(--tl-color-content-secondary));
342
+ font-size: var(--tl-font-size-caption);
343
+ line-height: 1.5;
305
344
  }
306
345
 
307
- :where([data-tl-root]) :where(.tl-meta) {
308
- font-family: var(--tl-font-mono);
346
+ :where([data-tl-root]) :where(.tl-component-meta, .tl-component-label) {
347
+ color: var(--tl-component-content-muted, var(--tl-color-content-subtle));
348
+ font-size: var(--tl-font-size-caption);
349
+ font-weight: 650;
350
+ line-height: 1.35;
309
351
  }
310
352
 
311
- :where([data-tl-root]) :where(.tl-action-text) {
312
- color: var(--tl-component-content, var(--tl-primary-content));
313
- font-size: 0.875rem;
353
+ :where([data-tl-root]) :where(.tl-component-action-text) {
354
+ color: inherit;
355
+ font-size: var(--tl-font-size-body);
314
356
  font-weight: 700;
315
- letter-spacing: 0;
316
- line-height: 1.4;
357
+ line-height: 1.25;
317
358
  }
318
359
 
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;
360
+ :where([data-tl-root]) :where(.tl-component-metric) {
361
+ color: var(--tl-component-content, var(--tl-color-content-primary));
362
+ font-size: var(--tl-font-size-metric);
363
+ font-weight: 760;
364
+ line-height: 1;
325
365
  letter-spacing: 0;
326
- line-height: 1.1;
327
366
  }
328
367
 
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));
368
+ :where([data-tl-root]) :where(.tl-component-code) {
369
+ display: inline-block;
370
+ max-inline-size: 100%;
371
+ color: var(--tl-component-content, var(--tl-color-content-primary));
372
+ background: color-mix(in srgb, var(--tl-color-layer) 82%, transparent);
373
+ border: 1px solid var(--tl-color-border-subtle);
332
374
  border-radius: var(--tl-radius-sm);
333
375
  font-family: var(--tl-font-mono);
334
- font-size: 0.875rem;
376
+ font-size: var(--tl-font-size-caption);
335
377
  line-height: 1.5;
336
378
  padding: 0.125rem 0.25rem;
379
+ vertical-align: baseline;
380
+ white-space: normal;
337
381
  }
338
382
 
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);
383
+ :where([data-tl-root]) :where(.tl-component-button) {
384
+ --tl-button-background: var(--tl-color-surface);
385
+ --tl-button-content: var(--tl-color-content-primary);
386
+ --tl-button-border: var(--tl-color-border-strong);
387
+ --tl-button-disabled-background: var(--tl-color-layer);
388
+ --tl-button-disabled-content: var(--tl-color-content-secondary);
389
+ --tl-button-disabled-border: var(--tl-color-border-subtle);
343
390
 
344
391
  display: inline-flex;
345
392
  align-items: center;
346
393
  justify-content: center;
394
+ flex: 0 1 auto;
347
395
  min-block-size: 2.75rem;
396
+ min-inline-size: 0;
348
397
  max-inline-size: 100%;
349
- gap: 0.5rem;
398
+ gap: var(--tl-space-2);
350
399
  color: var(--tl-button-content);
351
400
  background: var(--tl-button-background);
352
401
  border: 1px solid var(--tl-button-border);
353
402
  border-radius: var(--tl-radius-button, var(--tl-radius-md));
354
403
  cursor: pointer;
355
404
  font-family: var(--tl-font-sans);
356
- font-size: 1rem;
405
+ font-size: var(--tl-font-size-body);
357
406
  font-weight: 700;
358
407
  line-height: 1.2;
359
- padding: 0.7rem 1rem;
408
+ padding: 0.65rem 1rem;
360
409
  text-align: center;
361
410
  text-decoration: none;
362
- overflow-wrap: anywhere;
363
411
  }
364
412
 
365
- :where([data-tl-root]) :where(.tl-button:hover) {
413
+ :where([data-tl-root]) :where(.tl-component-button:hover) {
366
414
  filter: brightness(0.98);
367
415
  }
368
416
 
369
- :where([data-tl-root]) :where(.tl-button:focus-visible, .tl-input:focus-visible) {
370
- outline: 3px solid var(--tl-focus);
417
+ :where([data-tl-root]) :where(.tl-component-button:focus-visible, .tl-component-input:focus-visible) {
418
+ outline: 3px solid var(--tl-color-focus);
371
419
  outline-offset: 2px;
372
420
  }
373
421
 
374
- :where([data-tl-root]) :where(.tl-button:disabled, .tl-button[aria-disabled="true"], .tl-input:disabled) {
422
+ :where([data-tl-root]) :where(
423
+ .tl-component-button:disabled,
424
+ .tl-component-button[aria-disabled="true"],
425
+ .tl-component-input:disabled
426
+ ) {
375
427
  cursor: not-allowed;
376
- opacity: 0.68;
428
+ color: var(--tl-button-disabled-content, var(--tl-color-content-secondary));
429
+ background: var(--tl-button-disabled-background, var(--tl-color-layer));
430
+ border-color: var(--tl-button-disabled-border, var(--tl-color-border-subtle));
431
+ filter: none;
377
432
  }
378
433
 
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);
434
+ :where([data-tl-root]) :where(.tl-component-button[data-tl-tone="primary"]) {
435
+ --tl-button-background: var(--tl-color-primary-fill);
436
+ --tl-button-content: var(--tl-color-primary-content);
437
+ --tl-button-border: var(--tl-color-primary-fill);
383
438
  }
384
439
 
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);
440
+ :where([data-tl-root]) :where(.tl-component-button[data-tl-tone="info"]) {
441
+ --tl-button-background: var(--tl-color-info-fill);
442
+ --tl-button-content: var(--tl-color-info-content);
443
+ --tl-button-border: var(--tl-color-info-fill);
389
444
  }
390
445
 
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);
446
+ :where([data-tl-root]) :where(.tl-component-button[data-tl-tone="success"]) {
447
+ --tl-button-background: var(--tl-color-success-fill);
448
+ --tl-button-content: var(--tl-color-success-content);
449
+ --tl-button-border: var(--tl-color-success-fill);
395
450
  }
396
451
 
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);
452
+ :where([data-tl-root]) :where(.tl-component-button[data-tl-tone="warning"]) {
453
+ --tl-button-background: var(--tl-color-warning-fill);
454
+ --tl-button-content: var(--tl-color-warning-content);
455
+ --tl-button-border: var(--tl-color-warning-fill);
401
456
  }
402
457
 
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);
458
+ :where([data-tl-root]) :where(.tl-component-button[data-tl-tone="danger"]) {
459
+ --tl-button-background: var(--tl-color-danger-fill);
460
+ --tl-button-content: var(--tl-color-danger-content);
461
+ --tl-button-border: var(--tl-color-danger-fill);
407
462
  }
408
463
 
409
- :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);
464
+ :where([data-tl-root]) :where(.tl-component-badge) {
465
+ --tl-badge-background: var(--tl-color-layer);
466
+ --tl-badge-content: var(--tl-color-content-primary);
467
+ --tl-badge-border: var(--tl-color-border-subtle);
413
468
 
414
469
  display: inline-flex;
415
470
  align-items: center;
416
471
  max-inline-size: 100%;
472
+ width: fit-content;
417
473
  color: var(--tl-badge-content);
418
474
  background: var(--tl-badge-background);
419
475
  border: 1px solid var(--tl-badge-border);
420
476
  border-radius: 999px;
421
- font-family: var(--tl-font-sans);
422
477
  font-size: 0.875rem;
423
478
  font-weight: 700;
424
- line-height: 1.3;
425
- padding: 0.25rem 0.625rem;
426
- overflow-wrap: anywhere;
479
+ line-height: 1.2;
480
+ padding: 0.25rem 0.6rem;
427
481
  }
428
482
 
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);
483
+ :where([data-tl-root]) :where(.tl-component-badge[data-tl-tone="primary"]) {
484
+ --tl-badge-background: var(--tl-color-primary-soft);
485
+ --tl-badge-content: var(--tl-color-content-primary);
486
+ --tl-badge-border: var(--tl-color-primary-border);
433
487
  }
434
488
 
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);
489
+ :where([data-tl-root]) :where(.tl-component-badge[data-tl-tone="info"]) {
490
+ --tl-badge-background: var(--tl-color-info-soft);
491
+ --tl-badge-content: var(--tl-color-content-primary);
492
+ --tl-badge-border: var(--tl-color-info-border);
439
493
  }
440
494
 
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);
495
+ :where([data-tl-root]) :where(.tl-component-badge[data-tl-tone="success"]) {
496
+ --tl-badge-background: var(--tl-color-success-soft);
497
+ --tl-badge-content: var(--tl-color-content-primary);
498
+ --tl-badge-border: var(--tl-color-success-border);
445
499
  }
446
500
 
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);
501
+ :where([data-tl-root]) :where(.tl-component-badge[data-tl-tone="warning"]) {
502
+ --tl-badge-background: var(--tl-color-warning-soft);
503
+ --tl-badge-content: var(--tl-color-content-primary);
504
+ --tl-badge-border: var(--tl-color-warning-border);
451
505
  }
452
506
 
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);
507
+ :where([data-tl-root]) :where(.tl-component-badge[data-tl-tone="danger"]) {
508
+ --tl-badge-background: var(--tl-color-danger-soft);
509
+ --tl-badge-content: var(--tl-color-content-primary);
510
+ --tl-badge-border: var(--tl-color-danger-border);
457
511
  }
458
512
 
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);
513
+ :where([data-tl-root]) :where(.tl-component-field) {
514
+ display: grid;
515
+ gap: var(--tl-space-2);
516
+ max-inline-size: 100%;
517
+ }
464
518
 
465
- background: var(--tl-component-background);
519
+ :where([data-tl-root]) :where(.tl-component-input) {
520
+ inline-size: 100%;
521
+ max-inline-size: 100%;
522
+ color: var(--tl-color-content-primary);
523
+ background: var(--tl-color-surface);
524
+ border: 1px solid var(--tl-color-border-strong);
466
525
  border-radius: var(--tl-radius-md);
467
- padding: var(--tl-alert-padding, 1rem);
526
+ font: inherit;
527
+ font-size: 1rem;
528
+ line-height: 1.4;
529
+ padding: 0.75rem 0.8rem;
468
530
  }
469
531
 
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);
532
+ :where([data-tl-root]) :where(.tl-pattern-page-header) {
533
+ display: flex;
534
+ flex-wrap: wrap;
535
+ align-items: start;
536
+ gap: var(--tl-page-header-gap, var(--tl-space-5));
537
+ inline-size: 100%;
538
+ max-inline-size: 100%;
539
+ padding-block: var(--tl-page-header-padding-block, var(--tl-space-5));
475
540
  }
476
541
 
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);
542
+ :where([data-tl-root]) :where(.tl-pattern-page-header__content) {
543
+ display: grid;
544
+ flex: 1 1 min(100%, var(--tl-page-header-content-min, 28rem));
545
+ gap: var(--tl-page-header-content-gap, var(--tl-space-2));
482
546
  }
483
547
 
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);
548
+ :where([data-tl-root]) :where(.tl-pattern-page-header__actions) {
549
+ display: flex;
550
+ flex-wrap: wrap;
551
+ flex: 0 1 min(100%, var(--tl-page-header-actions-max, 28rem));
552
+ justify-content: flex-end;
553
+ align-items: center;
554
+ gap: var(--tl-page-header-actions-gap, var(--tl-space-3));
555
+ max-inline-size: 100%;
489
556
  }
490
557
 
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);
558
+ :where([data-tl-root]) :where(.tl-pattern-empty-state) {
559
+ display: grid;
560
+ justify-items: center;
561
+ gap: var(--tl-empty-state-gap, var(--tl-space-4));
562
+ inline-size: 100%;
563
+ max-inline-size: 100%;
564
+ color: var(--tl-component-content, var(--tl-color-content-primary));
565
+ background: var(--tl-component-background, var(--tl-color-surface));
566
+ border: 1px solid var(--tl-component-border, var(--tl-color-border-subtle));
567
+ border-radius: var(--tl-radius-lg);
568
+ padding: var(--tl-empty-state-padding, var(--tl-space-8) var(--tl-space-5));
569
+ text-align: center;
496
570
  }
497
571
 
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);
572
+ :where([data-tl-root]) :where(.tl-pattern-empty-state__content) {
573
+ display: grid;
574
+ gap: var(--tl-empty-state-content-gap, var(--tl-space-2));
575
+ inline-size: min(100%, var(--tl-empty-state-content-max, 42rem));
503
576
  }
504
577
 
505
- :where([data-tl-root]) :where(.tl-field) {
506
- display: grid;
507
- gap: 0.375rem;
508
- min-inline-size: 0;
578
+ :where([data-tl-root]) :where(.tl-pattern-empty-state__actions) {
579
+ display: flex;
580
+ flex-wrap: wrap;
581
+ justify-content: center;
582
+ align-items: center;
583
+ gap: var(--tl-empty-state-actions-gap, var(--tl-space-3));
584
+ inline-size: min(100%, var(--tl-empty-state-actions-max, 36rem));
509
585
  }
510
586
 
511
- :where([data-tl-root]) :where(.tl-input) {
512
- 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;
587
+ :where([data-tl-root]) :where(.tl-pattern-empty-state[data-tl-tone="primary"]) {
588
+ --tl-component-background: var(--tl-color-primary-soft);
589
+ --tl-component-content: var(--tl-color-content-primary);
590
+ --tl-component-border: var(--tl-color-primary-border);
591
+ }
592
+
593
+ :where([data-tl-root]) :where(.tl-pattern-empty-state[data-tl-tone="info"]) {
594
+ --tl-component-background: var(--tl-color-info-soft);
595
+ --tl-component-content: var(--tl-color-content-primary);
596
+ --tl-component-border: var(--tl-color-info-border);
522
597
  }
523
598
 
524
- :where([data-tl-root]) :where(.tl-input::placeholder) {
525
- color: var(--tl-content-subtle);
599
+ :where([data-tl-root]) :where(.tl-pattern-empty-state[data-tl-tone="success"]) {
600
+ --tl-component-background: var(--tl-color-success-soft);
601
+ --tl-component-content: var(--tl-color-content-primary);
602
+ --tl-component-border: var(--tl-color-success-border);
603
+ }
604
+
605
+ :where([data-tl-root]) :where(.tl-pattern-empty-state[data-tl-tone="warning"]) {
606
+ --tl-component-background: var(--tl-color-warning-soft);
607
+ --tl-component-content: var(--tl-color-content-primary);
608
+ --tl-component-border: var(--tl-color-warning-border);
609
+ }
610
+
611
+ :where([data-tl-root]) :where(.tl-pattern-empty-state[data-tl-tone="danger"]) {
612
+ --tl-component-background: var(--tl-color-danger-soft);
613
+ --tl-component-content: var(--tl-color-content-primary);
614
+ --tl-component-border: var(--tl-color-danger-border);
615
+ }
616
+
617
+ :where([data-tl-root]) :where([data-tl-state="loading"]) {
618
+ cursor: progress;
619
+ }
620
+
621
+ :where([data-tl-root]) :where([data-tl-state="error"]) {
622
+ --tl-component-background: var(--tl-color-danger-soft);
623
+ --tl-component-content: var(--tl-color-content-primary);
624
+ --tl-component-border: var(--tl-color-danger-border);
625
+ }
626
+
627
+ @media (max-width: 48rem) {
628
+ :where([data-tl-root]) :where(.tl-pattern-page-header__actions) {
629
+ justify-content: flex-start;
630
+ min-inline-size: 0;
631
+ }
632
+
633
+ :where([data-tl-root]) :where(
634
+ .tl-pattern-page-header__actions > *,
635
+ .tl-pattern-empty-state__actions > *
636
+ ) {
637
+ flex: 1 1 min(100%, 12rem);
638
+ }
526
639
  }
527
640
  }
528
641
 
529
642
  @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);
643
+ :where([data-tl-root]) :where(.tl-utility-sr-only) {
644
+ position: absolute;
645
+ inline-size: 1px;
646
+ block-size: 1px;
647
+ overflow: hidden;
648
+ clip: rect(0 0 0 0);
649
+ clip-path: inset(50%);
650
+ white-space: nowrap;
651
+ }
652
+
653
+ :where([data-tl-root]) :where(.tl-utility-truncate) {
654
+ min-inline-size: 0;
655
+ max-inline-size: 100%;
656
+ overflow: hidden;
657
+ text-overflow: ellipsis;
658
+ white-space: nowrap;
534
659
  }
535
660
  }