@aurea-uds/core 0.43.0 → 0.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/aurea.css +268 -84
- package/package.json +1 -1
package/dist/aurea.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--brand-yellow:oklch(0.795 0.184 86.047);
|
|
5
5
|
--brand-yellow-foreground:oklch(0.421 0.095 57.708);
|
|
6
6
|
--brand-yellow-text:oklch(0.516 0.105 86.047);
|
|
7
|
-
--brand-yellow-ink:#
|
|
7
|
+
--brand-yellow-ink:#18181b;
|
|
8
8
|
--brand-blue:#0246f1;
|
|
9
9
|
--white:oklch(1 0 0);
|
|
10
10
|
--black:oklch(0 0 0);
|
|
@@ -149,62 +149,62 @@
|
|
|
149
149
|
--tracking-widest:0.12em;
|
|
150
150
|
}
|
|
151
151
|
[data-theme="dark"]{
|
|
152
|
-
--background:#
|
|
153
|
-
--foreground:#
|
|
154
|
-
--card:#
|
|
155
|
-
--card-foreground:#
|
|
156
|
-
--popover:#
|
|
157
|
-
--popover-foreground:#
|
|
152
|
+
--background:#09090b;
|
|
153
|
+
--foreground:#fafafa;
|
|
154
|
+
--card:#18181b;
|
|
155
|
+
--card-foreground:#fafafa;
|
|
156
|
+
--popover:#18181b;
|
|
157
|
+
--popover-foreground:#fafafa;
|
|
158
158
|
--primary:var(--brand-yellow);
|
|
159
159
|
--primary-foreground:var(--brand-yellow-ink);
|
|
160
160
|
--link:var(--brand-yellow);
|
|
161
161
|
--link-hover:var(--brand-yellow);
|
|
162
|
-
--secondary:#
|
|
163
|
-
--secondary-foreground:#
|
|
164
|
-
--muted
|
|
165
|
-
--muted-foreground:#
|
|
166
|
-
--accent
|
|
167
|
-
--accent-foreground:#
|
|
162
|
+
--secondary:#27272a;
|
|
163
|
+
--secondary-foreground:#fafafa;
|
|
164
|
+
--muted:var(--secondary);
|
|
165
|
+
--muted-foreground:#a1a1aa;
|
|
166
|
+
--accent:var(--secondary);
|
|
167
|
+
--accent-foreground:#fafafa;
|
|
168
168
|
--destructive:#c50f1f;
|
|
169
169
|
--destructive-foreground:#ffffff;
|
|
170
|
-
--border:#
|
|
171
|
-
--input:#
|
|
172
|
-
--ring:#
|
|
173
|
-
--chart-1
|
|
174
|
-
--chart-2
|
|
175
|
-
--chart-3
|
|
176
|
-
--chart-4
|
|
177
|
-
--chart-5
|
|
178
|
-
--sidebar:#
|
|
179
|
-
--sidebar-foreground:#
|
|
170
|
+
--border:#2f2f35;
|
|
171
|
+
--input:#3f3f46;
|
|
172
|
+
--ring:#71717a;
|
|
173
|
+
--chart-1:#bbdbff;
|
|
174
|
+
--chart-2:#97bfff;
|
|
175
|
+
--chart-3:#76a4ff;
|
|
176
|
+
--chart-4:#5789ff;
|
|
177
|
+
--chart-5:#4371f2;
|
|
178
|
+
--sidebar:#18181b;
|
|
179
|
+
--sidebar-foreground:#fafafa;
|
|
180
180
|
--sidebar-primary:var(--brand-yellow);
|
|
181
181
|
--sidebar-primary-foreground:var(--brand-yellow-ink);
|
|
182
|
-
--sidebar-accent
|
|
183
|
-
--sidebar-accent-foreground:#
|
|
184
|
-
--sidebar-border:#
|
|
185
|
-
--sidebar-ring:#
|
|
182
|
+
--sidebar-accent:var(--secondary);
|
|
183
|
+
--sidebar-accent-foreground:#fafafa;
|
|
184
|
+
--sidebar-border:#2f2f35;
|
|
185
|
+
--sidebar-ring:#71717a;
|
|
186
186
|
--surface-1:var(--card);
|
|
187
187
|
--surface-2:var(--secondary);
|
|
188
188
|
--surface-3:var(--muted);
|
|
189
|
-
--surface-inset:#
|
|
190
|
-
--surface-hover:#
|
|
189
|
+
--surface-inset:#050506;
|
|
190
|
+
--surface-hover:#27272a;
|
|
191
191
|
--foreground-strong:var(--foreground);
|
|
192
|
-
--subtle-foreground:#
|
|
193
|
-
--border-strong:#
|
|
192
|
+
--subtle-foreground:#a1a1aa;
|
|
193
|
+
--border-strong:#a1a1aa;
|
|
194
194
|
--field-bg:var(--muted);
|
|
195
195
|
--overlay:oklch(0 0 0 / 0.5);
|
|
196
196
|
--primary-hover:oklch(0.835 0.19 89);
|
|
197
197
|
--primary-active:oklch(0.74 0.17 84);
|
|
198
|
-
--secondary-hover:#
|
|
199
|
-
--segment
|
|
198
|
+
--secondary-hover:#303036;
|
|
199
|
+
--segment:#3f3f46;
|
|
200
200
|
--focus:var(--primary);
|
|
201
201
|
--focus-strong:var(--primary);
|
|
202
202
|
--primary-emphasis:var(--primary);
|
|
203
203
|
--primary-outline:var(--primary);
|
|
204
204
|
--control-selected:var(--primary);
|
|
205
|
-
--control-selected-foreground
|
|
205
|
+
--control-selected-foreground:#ffffff;
|
|
206
206
|
--control-selected-dot:oklch(0.985 0 0);
|
|
207
|
-
--primary-mark:var(--brand-yellow-
|
|
207
|
+
--primary-mark:var(--brand-yellow-ink);
|
|
208
208
|
--selection:oklch(0.795 0.184 86.047 / 0.22);
|
|
209
209
|
--success-bg:#052505;
|
|
210
210
|
--warning-bg:#4a1e04;
|
|
@@ -237,66 +237,70 @@
|
|
|
237
237
|
--info-foreground:#ffffff;
|
|
238
238
|
--info-hover:#006cbf;
|
|
239
239
|
--warning:#f7630c;
|
|
240
|
-
--warning-foreground
|
|
240
|
+
--warning-foreground:var(--brand-yellow-ink);
|
|
241
241
|
--warning-hover:#de590b;
|
|
242
|
+
--input-strong:#646467;
|
|
243
|
+
--control-thumb:#ffffff;
|
|
244
|
+
--link-mark:rgba(0,0,0,0);
|
|
245
|
+
--link-underline:var(--primary);
|
|
242
246
|
}
|
|
243
247
|
[data-theme="light"]{
|
|
244
248
|
--background:#f5f5f5;
|
|
245
|
-
--foreground:#
|
|
249
|
+
--foreground:#09090b;
|
|
246
250
|
--card:#ffffff;
|
|
247
|
-
--card-foreground:#
|
|
251
|
+
--card-foreground:#09090b;
|
|
248
252
|
--popover:#ffffff;
|
|
249
|
-
--popover-foreground:#
|
|
253
|
+
--popover-foreground:#09090b;
|
|
250
254
|
--primary:var(--brand-yellow);
|
|
251
255
|
--primary-foreground:var(--brand-yellow-ink);
|
|
252
|
-
--link:var(--
|
|
253
|
-
--link-hover:var(--
|
|
254
|
-
--secondary:#
|
|
255
|
-
--secondary-foreground:#
|
|
256
|
+
--link:var(--foreground);
|
|
257
|
+
--link-hover:var(--foreground);
|
|
258
|
+
--secondary:#ebebed;
|
|
259
|
+
--secondary-foreground:#09090b;
|
|
256
260
|
--muted:var(--secondary);
|
|
257
|
-
--muted-foreground:#
|
|
261
|
+
--muted-foreground:#5e5e65;
|
|
258
262
|
--accent:var(--secondary);
|
|
259
|
-
--accent-foreground:#
|
|
263
|
+
--accent-foreground:#09090b;
|
|
260
264
|
--destructive:#c50f1f;
|
|
261
265
|
--destructive-foreground:#ffffff;
|
|
262
|
-
--border:#
|
|
263
|
-
--input:#
|
|
264
|
-
--ring:#
|
|
265
|
-
--chart-1
|
|
266
|
-
--chart-2
|
|
267
|
-
--chart-3
|
|
268
|
-
--chart-4
|
|
269
|
-
--chart-5
|
|
266
|
+
--border:#e4e4e7;
|
|
267
|
+
--input:#d4d4d8;
|
|
268
|
+
--ring:#8a8a93;
|
|
269
|
+
--chart-1:#4589d2;
|
|
270
|
+
--chart-2:#246cdf;
|
|
271
|
+
--chart-3:#114fda;
|
|
272
|
+
--chart-4:#0c37c4;
|
|
273
|
+
--chart-5:#0c24a3;
|
|
270
274
|
--sidebar:var(--card);
|
|
271
|
-
--sidebar-foreground:#
|
|
275
|
+
--sidebar-foreground:#09090b;
|
|
272
276
|
--sidebar-primary:var(--primary-emphasis);
|
|
273
277
|
--sidebar-primary-foreground:var(--brand-yellow-ink);
|
|
274
278
|
--sidebar-accent:var(--secondary);
|
|
275
|
-
--sidebar-accent-foreground:#
|
|
276
|
-
--sidebar-border:#
|
|
277
|
-
--sidebar-ring:#
|
|
279
|
+
--sidebar-accent-foreground:#09090b;
|
|
280
|
+
--sidebar-border:#e4e4e7;
|
|
281
|
+
--sidebar-ring:#8a8a93;
|
|
278
282
|
--surface-1:var(--card);
|
|
279
283
|
--surface-2:var(--secondary);
|
|
280
284
|
--surface-3:var(--muted);
|
|
281
|
-
--surface-inset:#
|
|
282
|
-
--surface-hover:#
|
|
285
|
+
--surface-inset:#efeff1;
|
|
286
|
+
--surface-hover:#f4f4f5;
|
|
283
287
|
--foreground-strong:var(--foreground);
|
|
284
|
-
--subtle-foreground:#
|
|
285
|
-
--border-strong:#
|
|
288
|
+
--subtle-foreground:#5e5e65;
|
|
289
|
+
--border-strong:#5e5e65;
|
|
286
290
|
--field-bg:var(--muted);
|
|
287
291
|
--overlay:oklch(0 0 0 / 0.4);
|
|
288
292
|
--primary-hover:oklch(0.835 0.19 89);
|
|
289
293
|
--primary-active:oklch(0.74 0.17 84);
|
|
290
|
-
--secondary-hover
|
|
294
|
+
--secondary-hover:#e4e4e7;
|
|
291
295
|
--segment:oklch(1 0 0);
|
|
292
|
-
--focus
|
|
296
|
+
--focus:#bd7000;
|
|
293
297
|
--focus-strong:var(--foreground);
|
|
294
|
-
--primary-emphasis:var(--
|
|
295
|
-
--primary-outline:
|
|
298
|
+
--primary-emphasis:var(--foreground);
|
|
299
|
+
--primary-outline:rgba(240,177,0,0.35);
|
|
296
300
|
--control-selected:var(--brand-yellow);
|
|
297
|
-
--control-selected-foreground
|
|
301
|
+
--control-selected-foreground:#ffffff;
|
|
298
302
|
--control-selected-dot:oklch(0.985 0 0);
|
|
299
|
-
--primary-mark:var(--brand-yellow-
|
|
303
|
+
--primary-mark:var(--brand-yellow-ink);
|
|
300
304
|
--success-400:#0e700e;
|
|
301
305
|
--warning-400:#8a3707;
|
|
302
306
|
--danger-400:#b10e1c;
|
|
@@ -331,8 +335,13 @@
|
|
|
331
335
|
--info-foreground:#ffffff;
|
|
332
336
|
--info-hover:#006cbf;
|
|
333
337
|
--warning:#f7630c;
|
|
334
|
-
--warning-foreground
|
|
338
|
+
--warning-foreground:var(--brand-yellow-ink);
|
|
335
339
|
--warning-hover:#de590b;
|
|
340
|
+
--input-strong:#8d8d91;
|
|
341
|
+
--link-mark:rgba(240,177,0,0.45);
|
|
342
|
+
--link-underline:var(--primary);
|
|
343
|
+
--control-thumb:#ffffff;
|
|
344
|
+
--warning-500:#d07612;
|
|
336
345
|
}
|
|
337
346
|
[data-brand="lory"][data-theme="dark"],[data-brand="lory"] [data-theme="dark"]{
|
|
338
347
|
--background:oklch(0.16 0.018 250);
|
|
@@ -398,6 +407,9 @@
|
|
|
398
407
|
--warning-bg:oklch(0.34 0.07 80);
|
|
399
408
|
--danger-bg:oklch(0.34 0.09 25);
|
|
400
409
|
--info-bg:oklch(0.32 0.06 235);
|
|
410
|
+
--brand-yellow-ink:#242424;
|
|
411
|
+
--warning-foreground:#242424;
|
|
412
|
+
--control-thumb:var(--primary-mark);
|
|
401
413
|
}
|
|
402
414
|
[data-brand="lory"][data-theme="light"],[data-brand="lory"] [data-theme="light"]{
|
|
403
415
|
--background:oklch(0.984 0.004 70);
|
|
@@ -464,6 +476,10 @@
|
|
|
464
476
|
--info-bg:oklch(0.95 0.04 235);
|
|
465
477
|
--link:oklch(0.52 0.106 86.047);
|
|
466
478
|
--link-hover:oklch(0.44 0.106 86.047);
|
|
479
|
+
--brand-yellow-ink:#242424;
|
|
480
|
+
--warning-foreground:#242424;
|
|
481
|
+
--control-thumb:var(--primary-mark);
|
|
482
|
+
--warning-500:oklch(0.727 0.149 60);
|
|
467
483
|
}
|
|
468
484
|
[data-density="compact"]{
|
|
469
485
|
--control-h-xs:1.5rem;
|
|
@@ -1126,7 +1142,12 @@ img,svg { display:block; }
|
|
|
1126
1142
|
.sidebar-list { display:flex; flex-direction:column; gap:var(--space-1); margin:0; padding:0; list-style:none; }
|
|
1127
1143
|
/* `width:100%` + `font:inherit` + `border:0`: o item também é <button> quando não navega, e
|
|
1128
1144
|
sem isto o botão vem com a caixa do navegador e quebra a fila. */
|
|
1129
|
-
|
|
1145
|
+
/* 2-A (o item 102, 25/10/2026): o texto do item começa a `--sidebar-item-x` da borda dele, e o fio do item escolhido começa
|
|
1146
|
+
no mesmo ponto. Era 12 o texto e 15 o fio (um número cru): o Victor viu que não começavam juntos. Com 16 (`--space-4`) os
|
|
1147
|
+
dois começam onde a curva da cápsula já acabou (a 16 da borda o fundo fica 0,11 px acima da base) — a 12 o fio sairia da
|
|
1148
|
+
curva. O título do grupo, a marca e o título do painel seguem o mesmo recuo, para a coluna continuar uma só. */
|
|
1149
|
+
.sidebar { --sidebar-item-x:var(--space-4); }
|
|
1150
|
+
.sidebar-item { display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:var(--control-h-md); padding:var(--space-1) var(--sidebar-item-x, var(--space-3)); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--sidebar-foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
|
|
1130
1151
|
.sidebar-item .icon { flex:none; opacity:.8; }
|
|
1131
1152
|
/* min-width:0 é o que deixa o ellipsis funcionar dentro do flex; sem ele o nome longo empurra
|
|
1132
1153
|
o acessório para fora da caixa em vez de cortar. */
|
|
@@ -1169,7 +1190,7 @@ img,svg { display:block; }
|
|
|
1169
1190
|
/* O título de grupo da lateral é o da referência (ADR-0067, decisão do Victor de 13/10/2026: "igual ao dela"):
|
|
1170
1191
|
letra 14, peso médio, SEM maiúsculas, na cor do texto da lateral — mais forte que o item, que é
|
|
1171
1192
|
esmaecido; 16 antes do grupo. Era 12, em maiúsculas espaçadas, esmaecido. */
|
|
1172
|
-
.sidebar-group-label { margin:var(--space-4) var(--space-3) var(--space-1); color:var(--sidebar-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
|
|
1193
|
+
.sidebar-group-label { margin:var(--space-4) var(--sidebar-item-x, var(--space-3)) var(--space-1); color:var(--sidebar-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
|
|
1173
1194
|
.sidebar-sub { padding-inline-start:var(--space-5); }
|
|
1174
1195
|
/* RECOLHIDA — a lateral vira trilho de ícones. O rótulo NÃO some do DOM: o React troca a
|
|
1175
1196
|
classe dele por `.sr-only`, então quem usa leitor de tela continua ouvindo o nome. Ícone
|
|
@@ -1195,7 +1216,7 @@ img,svg { display:block; }
|
|
|
1195
1216
|
.sidebar-body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--space-1); }
|
|
1196
1217
|
.sidebar-footer { gap:var(--space-3); padding-block-start:var(--space-3); }
|
|
1197
1218
|
/* A marca do app: o quadrinho na cor primária, com a letra na fonte de título, o nome e o subtítulo. */
|
|
1198
|
-
.sidebar-brand { display:flex; align-items:center; gap:var(--space-3); min-width:0; padding:var(--space-2) var(--space-3); }
|
|
1219
|
+
.sidebar-brand { display:flex; align-items:center; gap:var(--space-3); min-width:0; padding:var(--space-2) var(--sidebar-item-x, var(--space-3)); }
|
|
1199
1220
|
.sidebar-brand-logo { display:grid; place-items:center; flex:none; inline-size:var(--control-h-md); block-size:var(--control-h-md); overflow:hidden; border-radius:var(--radius-lg); background:var(--primary); color:var(--primary-foreground); font-family:var(--font-heading); font-weight:var(--weight-bold); }
|
|
1200
1221
|
/* `plain` (da 8 à 10 das quinze): o desenho solto, sem o quadrinho, e o nome na fonte e no tamanho de título. */
|
|
1201
1222
|
.sidebar-brand-plain { gap:var(--space-2); }
|
|
@@ -1209,7 +1230,68 @@ img,svg { display:block; }
|
|
|
1209
1230
|
/* Recolhida: a marca vira só o quadrinho, e a pessoa, a foto e a ação empilhadas, sem a caixinha. Os nomes vão para o
|
|
1210
1231
|
leitor de tela (o React troca a classe por `.sr-only`, como o rótulo do item). */
|
|
1211
1232
|
.sidebar-collapsed .sidebar-brand { justify-content:center; padding-inline:0; }
|
|
1233
|
+
/* A marca com a ação (0.44.0): o botão de recolher ao lado do nome; recolhida, ele desce para baixo do logo. */
|
|
1234
|
+
.sidebar-collapsed .sidebar-brand-with-action { flex-direction:column; gap:var(--space-2); }
|
|
1212
1235
|
.sidebar-collapsed .sidebar-user { flex-direction:column; padding-inline:0; background:transparent; }
|
|
1236
|
+
/* O BLOCO 2 DA LATERAL (25/10/2026) — o que faltava das quinze laterais que o Victor aprovou em 21/10/2026 (item 107), como
|
|
1237
|
+
variação: o padrão de hoje não muda. A referência principal não tem lateral; a anatomia e o comportamento são os da
|
|
1238
|
+
segunda da fila (o provedor, o atalho, os jeitos de recolher, a ação do grupo e do item), com a aparência da Aurea.
|
|
1239
|
+
4-E — a foto do item (o time, a pessoa) no lugar do ícone: 24, o degrau que cabe na linha de 36 com folga. */
|
|
1240
|
+
.sidebar-item > .sidebar-avatar { --step-avatar:var(--space-6); --step-avatar-fs:var(--text-xs); flex:none; }
|
|
1241
|
+
/* 4-E — a divisória entre seções: um vão, sem linha (ADR-0072). Ela parte a lista em duas; o vão soma 16 aos 4 de sempre. */
|
|
1242
|
+
.sidebar-separator { flex:none; block-size:var(--space-4); }
|
|
1243
|
+
/* 4-D — a ação do item ("⋯"): fora do link, presa à ponta da linha, no meio da altura dela. O texto do item para antes dela. */
|
|
1244
|
+
.sidebar-item-with-action { position:relative; }
|
|
1245
|
+
.sidebar-item-with-action > .sidebar-item { padding-inline-end:calc(var(--control-h-sm) + var(--space-2)); }
|
|
1246
|
+
.sidebar-item-action { position:absolute; inset-block-start:0; inset-inline-end:var(--space-1); display:flex; align-items:center; block-size:var(--control-h-md); }
|
|
1247
|
+
/* 4-D — o grupo que dobra e a ação do grupo ("+"): o nome e a ação numa fila, com a margem que o nome tinha sozinho. */
|
|
1248
|
+
.sidebar-group-head { display:flex; align-items:center; gap:var(--space-1); margin:var(--space-4) var(--space-1) var(--space-1) var(--sidebar-item-x, var(--space-3)); }
|
|
1249
|
+
.sidebar-group-head > .sidebar-group-label { flex:1; min-width:0; margin:0; }
|
|
1250
|
+
.sidebar-group-toggle { display:flex; align-items:center; gap:var(--space-1); min-block-size:var(--control-h-xs); padding:0; border:0; border-radius:var(--radius-control); background:transparent; font:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium); text-align:start; cursor:pointer; }
|
|
1251
|
+
.sidebar-group-toggle > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
1252
|
+
.sidebar-group-caret { flex:none; opacity:.8; }
|
|
1253
|
+
.sidebar-group-action { display:flex; align-items:center; gap:var(--space-1); flex:none; }
|
|
1254
|
+
/* 4-A — A LATERAL SOLTA vai do topo da janela até embaixo, como a da referência: fora do `AppShell` não há barra de cima
|
|
1255
|
+
para reservar (o item 106 mediu: solta, a lateral ficava 56 mais baixa e mais curta, e o app tinha de zerar o
|
|
1256
|
+
`--topbar-height` à mão). O app que põe uma barra própria em cima dela diz a altura em `--sidebar-offset`. */
|
|
1257
|
+
.sidebar:not(.app-shell > *) { --shell-top:calc(var(--sidebar-offset, 0px) + var(--space-4)); }
|
|
1258
|
+
.sidebar-flush:not(.app-shell > *) { --shell-top:var(--sidebar-offset, 0px); }
|
|
1259
|
+
/* 4-A — a trilha em cápsula: recolhida, o canto é o do controle, e não o do cartão. */
|
|
1260
|
+
.sidebar-collapse-capsule.sidebar-collapsed { border-radius:var(--radius-control); }
|
|
1261
|
+
/* 4-A — a que sai da tela: recolhida, ela some, e a trilha do shell vai a zero. O botão da junção fica dentro da tela, a 16
|
|
1262
|
+
da borda (ele ficaria cortado ao meio na borda da janela). */
|
|
1263
|
+
.sidebar-collapse-offcanvas.sidebar-collapsed { display:none; }
|
|
1264
|
+
/* `.sidebar` repetido na regra de propósito: a da rente recolhida (`.app-shell:has(> .sidebar-collapsed.sidebar-flush)`) vem
|
|
1265
|
+
depois na folha, com a mesma força, e deixava a trilha em 68 na rente que sai da tela (o teste do bloco 2 achou). */
|
|
1266
|
+
.app-shell:has(> .sidebar.sidebar-collapsed.sidebar-collapse-offcanvas) { --sidebar-track:0px; }
|
|
1267
|
+
.app-shell-collapsible:has(> .sidebar.sidebar-collapsed.sidebar-collapse-offcanvas) > .sidebar-toggle-slot { --toggle-x:calc(var(--space-4) + var(--control-h-xs) / 2); }
|
|
1268
|
+
/* 4-H — o item atual nas alternativas do item 101. Todas tiram o fio da casa (o `segment-line` o põe de volta, no amarelo).
|
|
1269
|
+
`segment`: a cápsula da aba escolhida (ADR-0059), a letra na cor do texto e o peso normal, como a referência. Os tokens
|
|
1270
|
+
são os da PÁGINA (`--segment` e `--foreground`), aos pares: sob uma marca de lateral escura, a cápsula clara continua
|
|
1271
|
+
legível com a letra dela. */
|
|
1272
|
+
.sidebar[class*="sidebar-indicator-"] .sidebar-item[aria-current]::after { display:none; }
|
|
1273
|
+
:is(.sidebar-indicator-segment,.sidebar-indicator-segment-dot,.sidebar-indicator-segment-line) .sidebar-item[aria-current] { --sidebar-primary:var(--foreground); --primary-emphasis:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); color:var(--foreground); font-weight:var(--weight-regular); }
|
|
1274
|
+
.sidebar-indicator-segment-dot .sidebar-item[aria-current] > .sidebar-label::before { content:""; display:inline-block; inline-size:var(--space-2); block-size:var(--space-2); margin-inline-end:var(--space-2); border-radius:var(--radius-full); background:var(--primary); vertical-align:middle; }
|
|
1275
|
+
.sidebar.sidebar-indicator-segment-line .sidebar-item[aria-current]::after { display:block; background:var(--primary); }
|
|
1276
|
+
/* `subtle`: só o cinza da lateral e a letra cheia dela, sem cor de marca. ⚠ É o mesmo cinza do ponteiro em cima (o item 101
|
|
1277
|
+
anotou): o item atual só se distingue pela letra e pelo ícone cheio. */
|
|
1278
|
+
.sidebar-indicator-subtle .sidebar-item[aria-current] { --sidebar-primary:var(--sidebar-foreground); --primary-emphasis:var(--sidebar-foreground); background:var(--sidebar-accent); color:var(--sidebar-foreground); }
|
|
1279
|
+
/* 4-F e 4-G — a trilha das seções e o painel. A lateral vira uma fila de duas caixas: a trilha, em cápsula (a 6 e a 7 das
|
|
1280
|
+
quinze), e o painel ao lado, um cartão da largura da lateral. As duas pintam a cor da lateral; a caixa de fora some. */
|
|
1281
|
+
.sidebar[class*="sidebar-panel-"] { flex-direction:row; align-items:stretch; gap:var(--space-2); padding:0; overflow:visible; border-width:0; border-radius:0; background:transparent; }
|
|
1282
|
+
.sidebar-rail-box { display:flex; flex-direction:column; gap:var(--space-1); flex:none; inline-size:var(--sidebar-rail); min-block-size:0; padding:var(--space-1) var(--space-2); overflow:hidden auto; border-radius:var(--radius-control); background:var(--sidebar); }
|
|
1283
|
+
.sidebar-rail-box .sidebar-item { justify-content:center; width:var(--control-h-md); padding-inline:0; margin-inline:auto; }
|
|
1284
|
+
.sidebar-rail-box .sidebar-item[aria-expanded="true"]:not([aria-current]) { background:var(--sidebar-accent); color:var(--sidebar-foreground); }
|
|
1285
|
+
/* O painel ENCOLHE quando falta lugar (a 320, ou na gaveta do celular, de 296): a trilha fica, e ele toma o resto, até a largura
|
|
1286
|
+
da lateral. Fixo em 264, a trilha e ele (340) passavam da gaveta e da tela — a varredura do site achou a 320. */
|
|
1287
|
+
.sidebar-panel { display:flex; flex-direction:column; gap:var(--space-1); flex:0 1 var(--sidebar-width); min-inline-size:0; min-block-size:0; padding:var(--space-1); overflow:auto; border-radius:var(--radius-card); background:var(--sidebar); color:var(--sidebar-foreground); }
|
|
1288
|
+
.sidebar-panel[hidden] { display:none; }
|
|
1289
|
+
.sidebar-panel-title { margin:var(--space-2) var(--sidebar-item-x, var(--space-3)) var(--space-1); font-family:var(--font-heading); font-size:var(--text-lg); font-weight:var(--weight-bold); line-height:var(--leading-tight); }
|
|
1290
|
+
.app-shell:has(> .sidebar-panel-docked) { --sidebar-track:calc(var(--sidebar-rail) + var(--space-2) + var(--sidebar-width) + var(--space-4)*2); }
|
|
1291
|
+
.app-shell:has(> .sidebar-panel-docked.sidebar-collapsed), .app-shell:has(> .sidebar-panel-overlay) { --sidebar-track:calc(var(--sidebar-rail) + var(--space-4)*2); }
|
|
1292
|
+
/* O painel por cima (4-G): a janelinha da Aurea, da largura da lateral, com a pele da lista dela. Os tokens da lateral passam a
|
|
1293
|
+
ser os da janelinha: sob uma marca de lateral escura, a janelinha é clara, e a letra da lateral sumiria nela. */
|
|
1294
|
+
.popover.sidebar-flyout { --sidebar-item-x:var(--space-4); --sidebar-foreground:var(--popover-foreground); --sidebar-accent:var(--fill-1); --sidebar-primary:var(--primary-emphasis); inline-size:var(--sidebar-width); max-inline-size:calc(100vw - var(--space-8)); padding:var(--space-1); gap:var(--space-1); }
|
|
1213
1295
|
/* Estas regras tocam `.app-shell` porque a coluna do grid é do shell: a
|
|
1214
1296
|
lateral não consegue encolher a própria trilha. `--sidebar-rail` continua sendo a largura
|
|
1215
1297
|
do PAINEL; a flutuante soma as margens na trilha, a rente usa o token cru.
|
|
@@ -1595,7 +1677,9 @@ img,svg { display:block; }
|
|
|
1595
1677
|
quatro níveis alternados (escuro > claro > escuro > claro) não são cobertos. Quem cobra:
|
|
1596
1678
|
`tests/visual/tema-na-secao.spec.ts`, e o `tema-na-secao.test.tsx` reprova regra nova sem a
|
|
1597
1679
|
guarda. */
|
|
1598
|
-
|
|
1680
|
+
/* A mistura de 45% ficou SÓ na `lory` (ADR-0083, 26/10/2026): na Aurea, a letra de destaque do claro é o grafite —
|
|
1681
|
+
a regra fica na seção "A paleta da 1.0", no fim da folha. */
|
|
1682
|
+
[data-theme="light"] .eyebrow:where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
|
|
1599
1683
|
.demo { min-width:0; padding:var(--card-pad); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
|
|
1600
1684
|
|
|
1601
1685
|
/* ========================================================================== */
|
|
@@ -2271,7 +2355,7 @@ img,svg { display:block; }
|
|
|
2271
2355
|
mesma distância nos dois sentidos de escrita. */
|
|
2272
2356
|
.switch-track:after { --thumb-h:calc(var(--switch-h) - 2 * var(--space-05)); --thumb-w:calc(var(--thumb-h) * 11 / 8); content:""; position:absolute; inset-inline-start:calc(var(--space-05) - var(--border-width)); top:calc(var(--space-05) - var(--border-width)); block-size:var(--thumb-h); inline-size:var(--thumb-w); border-radius:var(--radius-full); background:var(--muted-foreground); transition:transform var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard); }
|
|
2273
2357
|
.switch-track { --switch-x:calc(var(--switch-h) * 2 - (var(--switch-h) - 2 * var(--space-05)) * 11 / 8 - 2 * var(--space-05)); }
|
|
2274
|
-
.switch input:checked + .switch-track { background:var(--control-selected); border-color:transparent; } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--
|
|
2358
|
+
.switch input:checked + .switch-track { background:var(--control-selected); border-color:transparent; } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--control-thumb); }
|
|
2275
2359
|
/* DESATIVADO (lote 1, as travas, 20/10/2026 — o check 49 achou): o `<input>` é invisível e quem desenha é a marca,
|
|
2276
2360
|
então o `disabled` chegava ao campo e nada mudava na tela. A peça inteira recua, marca e nome, como na referência
|
|
2277
2361
|
(o estado de desativado dela vai na raiz do controle, a 0,5). Vale também para as opções de um grupo desativado. */
|
|
@@ -2315,7 +2399,7 @@ img,svg { display:block; }
|
|
|
2315
2399
|
.slider-track { position:relative; inline-size:100%; block-size:var(--space-5); border-inline:var(--space-3) solid transparent; border-radius:var(--radius-full); background:var(--secondary); }
|
|
2316
2400
|
.slider-fill { box-sizing:content-box; block-size:100%; margin-inline-start:calc(-1 * var(--space-3)); padding-inline-start:var(--space-3); border-radius:var(--radius-full); background:var(--primary); }
|
|
2317
2401
|
.slider-thumb { display:grid; place-items:center; inline-size:calc(var(--space-6) + var(--space-1)); block-size:100%; border-radius:var(--radius-full); background:var(--primary); cursor:grab; }
|
|
2318
|
-
.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--
|
|
2402
|
+
.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--control-thumb); box-shadow:var(--shadow-sm); transition:scale var(--duration-fast) var(--ease-standard); }
|
|
2319
2403
|
.slider-thumb[data-dragging] { cursor:grabbing; }
|
|
2320
2404
|
.slider-thumb[data-dragging]::after { scale:.9; }
|
|
2321
2405
|
.slider-thumb:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
|
|
@@ -2410,7 +2494,9 @@ img,svg { display:block; }
|
|
|
2410
2494
|
O fio é 2px (fração de pixel borra), inset 15px, e o amarelo entra a 75% — cheio ele
|
|
2411
2495
|
grita mais que o próprio rótulo. No tema CLARO o amarelo puro como texto dá 1.6:1, longe
|
|
2412
2496
|
dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar. */
|
|
2413
|
-
|
|
2497
|
+
/* O BOTÃO LIGADO saiu desta linguagem na Aurea (ADR-0083, 26/10/2026): amarelo cheio, a letra do botão primário e
|
|
2498
|
+
sem fio — a regra fica na seção "A paleta da 1.0", no fim da folha. Aqui ele continua só na `lory`. */
|
|
2499
|
+
.is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"]:where([data-brand="lory"],[data-brand="lory"] *),
|
|
2414
2500
|
.segmented :is(button,a).active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
|
|
2415
2501
|
/* A CÁPSULA ELEVADA que a regra acima promete, e que no trilho não se via (ADR-0059, 08/10/2026):
|
|
2416
2502
|
o segmento aceso e a aba escolhida vivem sobre --muted, e --secondary dava 1:1 contra ele no
|
|
@@ -2423,8 +2509,8 @@ img,svg { display:block; }
|
|
|
2423
2509
|
da marca; o da Aurea é o "clarinho" (o amarelo a 10%, a receita do `.badge-primary` que o Victor
|
|
2424
2510
|
escolheu para a página atual da paginação), aqui sobre o cinza, para o grupo colado continuar uma
|
|
2425
2511
|
cápsula só. A letra da marca e o fio continuam os do "selecionado". */
|
|
2426
|
-
.btn.toggle[data-pressed] { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary)); background:var(--btn-bg); }
|
|
2427
|
-
.btn.toggle[data-pressed]:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary-hover)); }
|
|
2512
|
+
.btn.toggle[data-pressed]:where([data-brand="lory"],[data-brand="lory"] *) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary)); background:var(--btn-bg); }
|
|
2513
|
+
.btn.toggle[data-pressed]:hover:not(:disabled):not([aria-disabled="true"]):where([data-brand="lory"],[data-brand="lory"] *) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary-hover)); }
|
|
2428
2514
|
/* O ATIVO DA NAV DA LATERAL sai da escala DELA, e não da página (20/08/2026, o Victor viu sob a
|
|
2429
2515
|
marca `lory`). Ele dividia esta regra com o `.segmented`, que vive no conteúdo — e `--secondary`
|
|
2430
2516
|
é quase branco no tema claro. Numa lateral escura isso desenhava uma pílula branca com texto
|
|
@@ -2445,19 +2531,22 @@ img,svg { display:block; }
|
|
|
2445
2531
|
saíram com a mesma cor. Com o `:not` ela pesa (0,3,1) e só alcança quem está em repouso. */
|
|
2446
2532
|
[data-theme="light"] .doc-nav a:not(.active):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); }
|
|
2447
2533
|
.is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
|
|
2448
|
-
.btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented :is(button,a).active::after,.tabs-secondary .tab[data-active]::after,
|
|
2534
|
+
.btn[aria-pressed="true"]:not(.btn-icon):where([data-brand="lory"],[data-brand="lory"] *)::after,.segmented :is(button,a).active::after,.tabs-secondary .tab[data-active]::after,
|
|
2449
2535
|
.doc-nav a.active::after,.sidebar-item[aria-current]::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
|
|
2450
2536
|
/* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
|
|
2451
2537
|
.doc-nav a.active::after,.sidebar-item[aria-current]::after { background:var(--sidebar-current-line, color-mix(in oklab, var(--sidebar-primary) 75%, transparent)); }
|
|
2538
|
+
.sidebar-item[aria-current]::after { inset-inline:var(--sidebar-item-x, var(--space-4)); }
|
|
2452
2539
|
/* ADR-0076 (20/10/2026), o Victor olhando a bancada: "não quero ele azul, não pode ser na cor do botão?". No claro da Aurea
|
|
2453
2540
|
padrão, o item atual da lateral é o botão primário: o fundo amarelo e a letra cinza-escura dele (8,13:1). O fundo já
|
|
2454
2541
|
marca o estado, e o fio de baixo some (`--sidebar-current-line` transparente: regra no `::after` não aceitaria a guarda
|
|
2455
2542
|
de tema no fim). Só sem `data-brand` (a `lory` tem a lateral dela) e só no claro (no escuro, a letra amarela continua).
|
|
2456
2543
|
Sobre o amarelo, a letra de destaque de DENTRO do item (o selo primário de contagem, um ícone de destaque) é a tinta do
|
|
2457
2544
|
botão: o azul sobre o amarelo mede 3,49:1 — o axe da varredura achou, no "12" do exemplo da `Sidebar`. */
|
|
2458
|
-
[data-theme="light"] :is(.sidebar-item[aria-current],.doc-nav a.active):not(:where([data-brand],[data-brand] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --sidebar-current-line:transparent; --primary-emphasis:var(--primary-foreground); --sidebar-primary:var(--primary-foreground); background:var(--primary); color:var(--primary-foreground); }
|
|
2459
|
-
|
|
2460
|
-
|
|
2545
|
+
[data-theme="light"] :is(.sidebar-item[aria-current],.doc-nav a.active):not(:where([data-brand],[data-brand] *,.sidebar[class*="sidebar-indicator-"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --sidebar-current-line:transparent; --primary-emphasis:var(--primary-foreground); --sidebar-primary:var(--primary-foreground); background:var(--primary); color:var(--primary-foreground); }
|
|
2546
|
+
/* A mistura de 45% (o "marrom") ficou SÓ na `lory` (ADR-0083, 26/10/2026). Na Aurea, o escolhido do claro tem a letra
|
|
2547
|
+
grafite, e o botão ligado é amarelo — as duas regras ficam na seção "A paleta da 1.0", no fim da folha. */
|
|
2548
|
+
[data-theme="light"] .is-selected:where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
2549
|
+
[data-theme="light"] .btn[aria-pressed="true"]:where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .segmented :is(button,a).active:where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
|
|
2461
2550
|
{ --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
|
|
2462
2551
|
/* A NAV DA LATERAL SAIU DESTA LISTA em 20/08/2026. O ajuste existe porque o amarelo puro não se lê
|
|
2463
2552
|
sobre o claro — mas ele mistura o `--foreground` da PÁGINA, e o item da lateral não está sobre a
|
|
@@ -3115,14 +3204,21 @@ button.tag-main { cursor:pointer; }
|
|
|
3115
3204
|
alinham por construção em vez de por número copiado. Saem junto os 24px de recuo e os 7px
|
|
3116
3205
|
do trilho — dois px crus a menos na catraca do check 12. */
|
|
3117
3206
|
.timeline { position:relative; display:flex; flex-direction:column; gap:var(--space-5); margin:0; padding:0; list-style:none; }
|
|
3118
|
-
|
|
3119
|
-
.
|
|
3207
|
+
/* O TRILHO POR BAIXO DOS PONTOS (ADR-0083, 27/10/2026, em todas as marcas — o Victor: o defeito "não tinha só na lory, no
|
|
3208
|
+
tema padrão da Aurea também"). Era um `::before` da lista inteira, posicionado, e o ponto não: o navegador pinta o
|
|
3209
|
+
posicionado por cima, e a linha passava por CIMA da bolinha; e ia até o fim da lista, sobrando depois do último ponto.
|
|
3210
|
+
Agora cada item desenha o trecho até o ponto seguinte, centrado no ponto, e o ponto fica por cima. A cor é a da linha
|
|
3211
|
+
(`--border`); a paleta da 1.0 a troca por `--input`, mais adiante, fora da lory. */
|
|
3212
|
+
.timeline > li { position:relative; display:flex; align-items:flex-start; gap:var(--space-3); }
|
|
3213
|
+
.timeline > li:not(:last-child)::before { content:""; position:absolute; inset-inline-start:calc(var(--space-3) / 2 - var(--border-width) / 2);
|
|
3214
|
+
inset-block-start:calc(var(--space-1) + var(--space-3)); inset-block-end:calc(-1 * (var(--space-5) + var(--space-1)));
|
|
3215
|
+
inline-size:var(--border-width); background:var(--border); }
|
|
3120
3216
|
/* A coluna de conteúdo é uma PILHA, e não por estética: sem isso o item empilhava quando
|
|
3121
3217
|
tinha descrição (o <p> é bloco) e colava título e horário na mesma linha quando não tinha —
|
|
3122
3218
|
"Shipped14:20". Geometria de componente não depende do conteúdo (achados A2/A3). */
|
|
3123
3219
|
.timeline > li > div { display:flex; flex-direction:column; gap:var(--space-05); min-width:0; }
|
|
3124
3220
|
.timeline > li > div > p { margin:0; }
|
|
3125
|
-
.timeline-dot { flex:none; width:var(--space-3); height:var(--space-3); border-radius:var(--radius-full); margin-block-start:var(--space-1); background:var(--primary); box-shadow:none; }
|
|
3221
|
+
.timeline-dot { position:relative; z-index:1; flex:none; width:var(--space-3); height:var(--space-3); border-radius:var(--radius-full); margin-block-start:var(--space-1); background:var(--primary); box-shadow:none; }
|
|
3126
3222
|
/* ACCORDION (0.32.0) — o da referência, com o realce em CÁPSULA (decisão do Victor, 11/10/2026). Sem
|
|
3127
3223
|
caixa em volta: um fio de 1 entre os itens, nenhum depois do último. A pergunta: 16 de todos os
|
|
3128
3224
|
lados, 14 peso médio, a seta de 16 no FIM (esmaecida), que vira −180° ao abrir — o marcador do
|
|
@@ -4844,6 +4940,94 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4844
4940
|
.slider-color .slider-thumb,.color-area-thumb { background:var(--white); box-shadow:var(--shadow-md); }
|
|
4845
4941
|
.slider-color .slider-thumb::after,.color-area-thumb::after { content:""; position:absolute; inset:calc(3 * var(--border-width)); inline-size:auto; block-size:auto; border-radius:var(--radius-full); background:var(--color-checker) center/var(--space-2) var(--space-2); box-shadow:inset 0 0 0 var(--space-4) var(--slider-thumb-color,var(--color-area-thumb,var(--primary))); }
|
|
4846
4942
|
|
|
4943
|
+
/* ═══ A PALETA DA 1.0 — passo A (ADR-0083, 26/10/2026) ═══════════════════════════════════════════════════════════
|
|
4944
|
+
A proposta de cores que o Victor aprovou família por família em 25 e 26/10/2026: a base Zinco profundo, o destaque
|
|
4945
|
+
GRAFITE no claro (o amarelo vira fundo, traço ou indicador, nunca letra), o link com marca-texto, os campos brancos,
|
|
4946
|
+
as marcas brancas dentro dos controles, o botão ligado amarelo e a linha do tempo consertada. Os TOKENS mudaram na
|
|
4947
|
+
fonte (`aurea.tokens.json`); aqui ficam as REGRAS que mudam junto.
|
|
4948
|
+
A `lory` fica 100% como é hoje (decisão do Victor, 26/10/2026): os tokens dela foram congelados na fonte, e toda
|
|
4949
|
+
regra desta seção leva `:where(:not([data-brand="lory"],[data-brand="lory"] *))`, de força zero. Quem prova que
|
|
4950
|
+
ela sai igual: `tests/visual/lory-congelada.spec.ts`. */
|
|
4951
|
+
|
|
4952
|
+
/* O ESCOLHIDO do claro tem a letra grafite (era a mistura de 45%, que dava marrom): a aba, o segmento aceso, o item de
|
|
4953
|
+
navegação atual e o rótulo `.eyebrow`. O fio amarelo de baixo continua. No escuro, a letra continua o amarelo. */
|
|
4954
|
+
[data-theme="light"] .is-selected:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
4955
|
+
[data-theme="light"] .eyebrow:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
4956
|
+
[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
4957
|
+
[data-theme="light"] .segmented :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
|
|
4958
|
+
{ --btn-fg:var(--foreground); color:var(--foreground); }
|
|
4959
|
+
|
|
4960
|
+
/* O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): amarelo cheio com a letra do botão primário, nos dois temas, sem
|
|
4961
|
+
o fio de baixo e sem o fundo "clarinho". As cores passam por `--pressed-*` no próprio botão, para uma faixa com outro
|
|
4962
|
+
`data-theme` acertar e para os outros estilos aprovados (o cinza e o grafite) só trocarem as três variáveis. */
|
|
4963
|
+
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
4964
|
+
--pressed-bg:var(--primary); --pressed-bg-hover:var(--primary-hover); --pressed-fg:var(--primary-foreground);
|
|
4965
|
+
--btn-bg:var(--pressed-bg); --btn-fg:var(--pressed-fg); background:var(--pressed-bg); color:var(--pressed-fg); }
|
|
4966
|
+
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):hover:not(:disabled):not([aria-disabled="true"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
4967
|
+
--btn-bg:var(--pressed-bg-hover); background:var(--pressed-bg-hover); }
|
|
4968
|
+
|
|
4969
|
+
/* O LINK separa-se do texto por mais que a cor (WCAG 1.4.1): no claro a letra é o grafite e no escuro o amarelo — a
|
|
4970
|
+
mesma cor do texto em volta, ou quase (1,91:1 no escuro). Vale para o link sem classe, para o componente `Link` e
|
|
4971
|
+
para o texto no tom link. A NAVEGAÇÃO fica de fora — a trilha, todo link dentro de `<nav>` e o segmento que é link:
|
|
4972
|
+
o marca-texto é para o link no meio do texto (medido no site em 27/10/2026: dos 596 links sem classe, 588 eram a
|
|
4973
|
+
chave Web | Native e 6 a trilha; só 2 estavam na prosa).
|
|
4974
|
+
A base, nos dois temas (e a VARIAÇÃO do claro): o sublinhado amarelo de 2 com 3 de afastamento. */
|
|
4975
|
+
:is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
4976
|
+
color:var(--link); text-decoration-line:underline; text-decoration-color:var(--link-underline);
|
|
4977
|
+
text-decoration-thickness:calc(2 * var(--border-width)); text-underline-offset:calc(3 * var(--border-width)); }
|
|
4978
|
+
/* O PADRÃO do claro: o MARCA-TEXTO — a faixa amarela a 45% atrás da metade de baixo das letras (o texto sobre ela mede
|
|
4979
|
+
14,79:1); no ponteiro, ela cobre a palavra inteira. É um sublinhado grosso que sobe para trás das letras, e não um
|
|
4980
|
+
fundo: assim acompanha só o texto, mesmo quando o elemento ocupa a linha inteira ou o link quebra em várias linhas.
|
|
4981
|
+
As medidas são PROPORÇÕES DA LETRA (em), medidas na bancada de 26/10/2026, e crescem com ela; provadas nos três
|
|
4982
|
+
navegadores em 27/10/2026. A variação (o sublinhado) se pede com `data-link="underline"` no próprio link, num
|
|
4983
|
+
contêiner ou no `<html>` — um atributo, e não uma classe: o core só tem classe que um componente produz. */
|
|
4984
|
+
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):not([data-link="underline"],[data-link="underline"] *):where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
4985
|
+
text-decoration-color:var(--link-mark); text-decoration-thickness:.5em; text-underline-offset:-.32em; text-decoration-skip-ink:none;
|
|
4986
|
+
transition:text-decoration-thickness var(--duration-fast) var(--ease-standard),text-underline-offset var(--duration-fast) var(--ease-standard); }
|
|
4987
|
+
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):not([data-link="underline"],[data-link="underline"] *):hover:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
4988
|
+
text-decoration-thickness:1.25em; text-underline-offset:-1.02em; }
|
|
4989
|
+
@media (prefers-reduced-motion:reduce) {
|
|
4990
|
+
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { transition:none; }
|
|
4991
|
+
}
|
|
4992
|
+
|
|
4993
|
+
/* As TINTAS que saíam do destaque ficariam cinza com o destaque grafite: no claro, elas saem do próprio amarelo — o selo
|
|
4994
|
+
primário de contorno (16%) e a marca do item atual da barra de baixo de aro (15%). */
|
|
4995
|
+
[data-theme="light"] .badge-primary.badge-outline:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
4996
|
+
background-color:color-mix(in oklab, var(--primary) 16%, transparent); }
|
|
4997
|
+
[data-theme="light"] .bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .bottom-nav-mark:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
4998
|
+
background:color-mix(in srgb, var(--primary) 15%, transparent); }
|
|
4999
|
+
|
|
5000
|
+
/* O CAMPO no claro é BRANCO com a sombra fina em todo lugar, também DENTRO das superfícies brancas (era o cinza
|
|
5001
|
+
`--fill-2` ali — ADR-0078, item 2, revertido pela ADR-0083): dentro de um cartão branco, quem separa o campo é a
|
|
5002
|
+
sombra. A lista é a das superfícies da regra de campo, acima. No escuro, nada muda. */
|
|
5003
|
+
[data-theme="light"] :is(.card:not(.card-outline):not(.card-inset),.content:not(.content-plain),.section-card,.demo,.dialog,.drawer,.popover,.menu,.command-palette,.alert,.banner-consent,.toast,.accordion-surface,.datagrid-detail,:is(.table,.table-wrap) tbody :is(td,th),.topbar-floating,.topbar-pill,.sortable-item,.app-shell-docs > .sidebar[popover]:popover-open):where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
5004
|
+
--field-fill:var(--card); --field-lift:var(--field-lift-page); }
|
|
5005
|
+
|
|
5006
|
+
/* O FOCO DOS CAMPOS no claro é o amarelo, uma linha só, como no escuro (decisão do Victor, 26/10/2026; a medida — 1,75:1
|
|
5007
|
+
na página, 1,91:1 no cartão, abaixo dos 3:1 — vai à bancada do passo A). Os botões e o resto continuam com o grafite. */
|
|
5008
|
+
[data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
5009
|
+
[data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
5010
|
+
outline-color:var(--primary); }
|
|
5011
|
+
|
|
5012
|
+
/* "AUMENTAR CONTRASTE" do sistema (`prefers-contrast: more`: o "Aumentar contraste" do macOS, do iOS e do Android, o
|
|
5013
|
+
alto contraste do Windows). Sem linha nenhuma, um campo branco nunca chega aos 3:1 da WCAG 1.4.11 — a página ou o
|
|
5014
|
+
cartão teriam de ser um cinza médio. Então quem pede mais contraste recebe: o contorno de 3:1 nos campos (a única
|
|
5015
|
+
linha que esta preferência acende, exceção nomeada à ADR-0072 pela ADR-0083), as quatro marcas dos controles na
|
|
5016
|
+
tinta, e o foco dos campos de volta ao grafite. Fora dela, nada disto existe. */
|
|
5017
|
+
@media (prefers-contrast:more) {
|
|
5018
|
+
:is(.input,.textarea,.select,.input-group,.combobox-multi,.input-secondary,.textarea-secondary):where(:not([data-brand="lory"],[data-brand="lory"] *)) { border-color:var(--input-strong); }
|
|
5019
|
+
.input-group > :is(.input,.select,.textarea):where(:not([data-brand="lory"],[data-brand="lory"] *)) { border:0; }
|
|
5020
|
+
:root:where(:not([data-brand="lory"])),[data-theme]:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5021
|
+
--control-thumb:var(--brand-yellow-ink); --control-selected-foreground:var(--brand-yellow-ink); --control-selected-dot:var(--brand-yellow-ink); }
|
|
5022
|
+
[data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
5023
|
+
[data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
|
|
5024
|
+
outline-color:var(--focus-strong); }
|
|
5025
|
+
}
|
|
5026
|
+
|
|
5027
|
+
/* A LINHA DO TEMPO: o trilho por baixo dos pontos é conserto de todas as marcas (na regra da linha do tempo, acima). Aqui
|
|
5028
|
+
só a cor: de `--border` para `--input` — na página do Zinco profundo, o `--border` quase não aparecia. */
|
|
5029
|
+
.timeline > li:not(:last-child):where(:not([data-brand="lory"],[data-brand="lory"] *))::before { background:var(--input); }
|
|
5030
|
+
|
|
4847
5031
|
/* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
|
|
4848
5032
|
/* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
|
|
4849
5033
|
de um botão responsivo herdaria o passo do botão e mudaria de tamanho sozinho. */
|