@aurea-uds/core 0.44.0 → 0.46.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 +323 -85
- 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;
|
|
@@ -1358,7 +1374,7 @@ img,svg { display:block; }
|
|
|
1358
1374
|
sistema faziam a pilula crescer para baixo e a barriga dela ficava atras dos botoes. A borda de
|
|
1359
1375
|
baixo agora fica `--space-4` acima da area do sistema, em qualquer aparelho.
|
|
1360
1376
|
A variante `edge` reverte isto mais abaixo, e la o recheio e' o certo. */
|
|
1361
|
-
.bottom-nav { --bottomnav-ring:
|
|
1377
|
+
.bottom-nav { --bottomnav-ring:calc(var(--icon-lg) + var(--space-1)); --bottomnav-surface:var(--card); position:sticky; bottom:0; z-index:var(--z-sticky); display:flex; gap:var(--space-1); margin:var(--space-4); margin-bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-md); }
|
|
1362
1378
|
/* `--control-h-lg` e não `--control-h-md`: alvo de toque. O md dá 36px em comfortable e
|
|
1363
1379
|
o alvo confortável de dedo é maior — com o recuo, o item renderiza acima de 44px. */
|
|
1364
1380
|
.bottom-nav-item { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-05); min-height:var(--control-h-lg); padding:var(--space-1); border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-xs); text-align:center; text-decoration:none; cursor:pointer; }
|
|
@@ -1394,7 +1410,7 @@ img,svg { display:block; }
|
|
|
1394
1410
|
O ALVO DE TOQUE não é este número e continua sendo o `min-height` do item: `--control-h-lg`
|
|
1395
1411
|
entrega 42px em comfortable e 48 em spacious, contra os 44pt mínimos das diretrizes do iOS e
|
|
1396
1412
|
os 48dp da mesma referência. A moldura é a caixa do DESENHO; o alvo é o item inteiro. */
|
|
1397
|
-
.bottom-nav-mark { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--
|
|
1413
|
+
.bottom-nav-mark { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--space-8); height:var(--bottomnav-ring); border-radius:var(--radius-control); }
|
|
1398
1414
|
/* A BARRA MAIS BAIXA — pedido do Victor, 30/09/2026, aprovado pela imagem: *"ele é muito largo, e
|
|
1399
1415
|
é assim por conta da distância entre o ícone em cima e o texto embaixo"*. A moldura de 32 só
|
|
1400
1416
|
serve aos quatro indicadores REDONDOS, em que ela vira o círculo. Nos outros três ela era folga
|
|
@@ -1405,7 +1421,14 @@ img,svg { display:block; }
|
|
|
1405
1421
|
nativo (`navigation.tsx`). ~~A folga de 4dp da referência entre o indicador e o rótulo~~ vale só para
|
|
1406
1422
|
os redondos agora. */
|
|
1407
1423
|
.bottom-nav-mark { height:var(--icon-lg); }
|
|
1408
|
-
|
|
1424
|
+
/* A BARRA NA MESMA ALTURA EM TODOS OS FORMATOS — pedido do Victor, 27/10/2026 (*"todos esses tem a altura maior que o
|
|
1425
|
+
restante ... quero todos da mesma altura do none, subtle, pill, expand"*), e a forma escolhida na bancada, entre duas
|
|
1426
|
+
rodando: *"B: o círculo e a cápsula com 28"* (ADR-0084). O círculo e a cápsula tinham 32 em volta do ícone de 24, e a
|
|
1427
|
+
barra media 62 (o `circle-bold`, 58) contra 54 nos outros. Agora são 28 (`--bottomnav-ring`), e passam 2 por fora da
|
|
1428
|
+
caixa em cima e embaixo (a margem negativa): o item fica com a altura do ícone, como nos outros. A largura das molduras
|
|
1429
|
+
que não são redondas continua 32 (`--space-8`): é ela que dá o canto ao contador. Igual no `navigation.tsx`. */
|
|
1430
|
+
.bottom-nav-ind-circle .bottom-nav-mark, .bottom-nav-ind-circle-raised .bottom-nav-mark, .bottom-nav-ind-circle-outline .bottom-nav-mark {
|
|
1431
|
+
width:var(--bottomnav-ring); height:var(--bottomnav-ring); margin-block:calc((var(--icon-lg) - var(--bottomnav-ring)) / 2); }
|
|
1409
1432
|
/* `inline-flex` no envoltório: como `<span>` solto ele é caixa de LINHA, e mede a entrelinha do
|
|
1410
1433
|
item (18px) em vez do contador que carrega (16px). A diferença não aparece na tela — aparece
|
|
1411
1434
|
na medição, e medição errada é o que faz a razão parecer 0,75 quando é 0,67. */
|
|
@@ -1529,7 +1552,9 @@ img,svg { display:block; }
|
|
|
1529
1552
|
em todos os itens, e o recheio passa do item para ele: o item mede o mesmo escolhido ou não, e a
|
|
1530
1553
|
altura da barra não muda. O mesmo no `navigation.tsx`. */
|
|
1531
1554
|
.bottom-nav.bottom-nav-ind-circle-bold .bottom-nav-item { padding:0; }
|
|
1532
|
-
|
|
1555
|
+
/* O disco perdeu a altura mínima e o recheio de cima e de baixo caiu para `--space-05` (27/10/2026, a barra na mesma
|
|
1556
|
+
altura — acima): 56 × 44, e a barra fica em 54 como as outras. Era 56 × 48. */
|
|
1557
|
+
.bottom-nav-disc { display:flex; flex-direction:column; align-items:center; justify-content:center; inline-size:var(--bottomnav-bold,3.5rem); max-inline-size:100%; padding:var(--space-05) var(--space-1); border-radius:var(--radius-full); }
|
|
1533
1558
|
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--primary-mark); }
|
|
1534
1559
|
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc { background:var(--primary); }
|
|
1535
1560
|
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .icon { opacity:1; }
|
|
@@ -1548,7 +1573,8 @@ img,svg { display:block; }
|
|
|
1548
1573
|
O contador fica no canto do ÍCONE, e não da cápsula: sem a cápsula pintada ele ficaria solto,
|
|
1549
1574
|
longe do sino. São os (56 − 32) / 2 a mais para dentro. E ele INVERTE sobre o amarelo, pela
|
|
1550
1575
|
mesma razão medida do `circle-bold`, logo acima. */
|
|
1551
|
-
|
|
1576
|
+
/* 56 × 28 desde 27/10/2026 (a barra na mesma altura, acima): como o círculo, ela passa 2 por fora da caixa. */
|
|
1577
|
+
.bottom-nav-ind-capsule .bottom-nav-mark { width:var(--bottomnav-bold,3.5rem); height:var(--bottomnav-ring); margin-block:calc((var(--icon-lg) - var(--bottomnav-ring)) / 2); border-radius:var(--radius-full); }
|
|
1552
1578
|
.bottom-nav-ind-capsule .bottom-nav-badge { inset-inline-end:calc((var(--bottomnav-bold,3.5rem) - var(--bottomnav-ring)) / 2 - var(--space-05)); }
|
|
1553
1579
|
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--primary); color:var(--primary-mark); }
|
|
1554
1580
|
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .icon { opacity:1; }
|
|
@@ -1661,7 +1687,9 @@ img,svg { display:block; }
|
|
|
1661
1687
|
quatro níveis alternados (escuro > claro > escuro > claro) não são cobertos. Quem cobra:
|
|
1662
1688
|
`tests/visual/tema-na-secao.spec.ts`, e o `tema-na-secao.test.tsx` reprova regra nova sem a
|
|
1663
1689
|
guarda. */
|
|
1664
|
-
|
|
1690
|
+
/* A mistura de 45% ficou SÓ na `lory` (ADR-0083, 26/10/2026): na Aurea, a letra de destaque do claro é o grafite —
|
|
1691
|
+
a regra fica na seção "A paleta da 1.0", no fim da folha. */
|
|
1692
|
+
[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)); }
|
|
1665
1693
|
.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; }
|
|
1666
1694
|
|
|
1667
1695
|
/* ========================================================================== */
|
|
@@ -2337,7 +2365,7 @@ img,svg { display:block; }
|
|
|
2337
2365
|
mesma distância nos dois sentidos de escrita. */
|
|
2338
2366
|
.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); }
|
|
2339
2367
|
.switch-track { --switch-x:calc(var(--switch-h) * 2 - (var(--switch-h) - 2 * var(--space-05)) * 11 / 8 - 2 * var(--space-05)); }
|
|
2340
|
-
.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(--
|
|
2368
|
+
.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); }
|
|
2341
2369
|
/* DESATIVADO (lote 1, as travas, 20/10/2026 — o check 49 achou): o `<input>` é invisível e quem desenha é a marca,
|
|
2342
2370
|
então o `disabled` chegava ao campo e nada mudava na tela. A peça inteira recua, marca e nome, como na referência
|
|
2343
2371
|
(o estado de desativado dela vai na raiz do controle, a 0,5). Vale também para as opções de um grupo desativado. */
|
|
@@ -2381,7 +2409,7 @@ img,svg { display:block; }
|
|
|
2381
2409
|
.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); }
|
|
2382
2410
|
.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); }
|
|
2383
2411
|
.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; }
|
|
2384
|
-
.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--
|
|
2412
|
+
.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); }
|
|
2385
2413
|
.slider-thumb[data-dragging] { cursor:grabbing; }
|
|
2386
2414
|
.slider-thumb[data-dragging]::after { scale:.9; }
|
|
2387
2415
|
.slider-thumb:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
|
|
@@ -2476,7 +2504,9 @@ img,svg { display:block; }
|
|
|
2476
2504
|
O fio é 2px (fração de pixel borra), inset 15px, e o amarelo entra a 75% — cheio ele
|
|
2477
2505
|
grita mais que o próprio rótulo. No tema CLARO o amarelo puro como texto dá 1.6:1, longe
|
|
2478
2506
|
dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar. */
|
|
2479
|
-
|
|
2507
|
+
/* O BOTÃO LIGADO saiu desta linguagem na Aurea (ADR-0083, 26/10/2026): amarelo cheio, a letra do botão primário e
|
|
2508
|
+
sem fio — a regra fica na seção "A paleta da 1.0", no fim da folha. Aqui ele continua só na `lory`. */
|
|
2509
|
+
.is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"]:where([data-brand="lory"],[data-brand="lory"] *),
|
|
2480
2510
|
.segmented :is(button,a).active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
|
|
2481
2511
|
/* A CÁPSULA ELEVADA que a regra acima promete, e que no trilho não se via (ADR-0059, 08/10/2026):
|
|
2482
2512
|
o segmento aceso e a aba escolhida vivem sobre --muted, e --secondary dava 1:1 contra ele no
|
|
@@ -2489,8 +2519,8 @@ img,svg { display:block; }
|
|
|
2489
2519
|
da marca; o da Aurea é o "clarinho" (o amarelo a 10%, a receita do `.badge-primary` que o Victor
|
|
2490
2520
|
escolheu para a página atual da paginação), aqui sobre o cinza, para o grupo colado continuar uma
|
|
2491
2521
|
cápsula só. A letra da marca e o fio continuam os do "selecionado". */
|
|
2492
|
-
.btn.toggle[data-pressed] { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary)); background:var(--btn-bg); }
|
|
2493
|
-
.btn.toggle[data-pressed]:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary-hover)); }
|
|
2522
|
+
.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); }
|
|
2523
|
+
.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)); }
|
|
2494
2524
|
/* O ATIVO DA NAV DA LATERAL sai da escala DELA, e não da página (20/08/2026, o Victor viu sob a
|
|
2495
2525
|
marca `lory`). Ele dividia esta regra com o `.segmented`, que vive no conteúdo — e `--secondary`
|
|
2496
2526
|
é quase branco no tema claro. Numa lateral escura isso desenhava uma pílula branca com texto
|
|
@@ -2511,7 +2541,7 @@ img,svg { display:block; }
|
|
|
2511
2541
|
saíram com a mesma cor. Com o `:not` ela pesa (0,3,1) e só alcança quem está em repouso. */
|
|
2512
2542
|
[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); }
|
|
2513
2543
|
.is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
|
|
2514
|
-
.btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented :is(button,a).active::after,.tabs-secondary .tab[data-active]::after,
|
|
2544
|
+
.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,
|
|
2515
2545
|
.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); }
|
|
2516
2546
|
/* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
|
|
2517
2547
|
.doc-nav a.active::after,.sidebar-item[aria-current]::after { background:var(--sidebar-current-line, color-mix(in oklab, var(--sidebar-primary) 75%, transparent)); }
|
|
@@ -2523,8 +2553,10 @@ img,svg { display:block; }
|
|
|
2523
2553
|
Sobre o amarelo, a letra de destaque de DENTRO do item (o selo primário de contagem, um ícone de destaque) é a tinta do
|
|
2524
2554
|
botão: o azul sobre o amarelo mede 3,49:1 — o axe da varredura achou, no "12" do exemplo da `Sidebar`. */
|
|
2525
2555
|
[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); }
|
|
2526
|
-
|
|
2527
|
-
|
|
2556
|
+
/* A mistura de 45% (o "marrom") ficou SÓ na `lory` (ADR-0083, 26/10/2026). Na Aurea, o escolhido do claro tem a letra
|
|
2557
|
+
grafite, e o botão ligado é amarelo — as duas regras ficam na seção "A paleta da 1.0", no fim da folha. */
|
|
2558
|
+
[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"] *),
|
|
2559
|
+
[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"] *)
|
|
2528
2560
|
{ --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
|
|
2529
2561
|
/* A NAV DA LATERAL SAIU DESTA LISTA em 20/08/2026. O ajuste existe porque o amarelo puro não se lê
|
|
2530
2562
|
sobre o claro — mas ele mistura o `--foreground` da PÁGINA, e o item da lateral não está sobre a
|
|
@@ -3182,14 +3214,21 @@ button.tag-main { cursor:pointer; }
|
|
|
3182
3214
|
alinham por construção em vez de por número copiado. Saem junto os 24px de recuo e os 7px
|
|
3183
3215
|
do trilho — dois px crus a menos na catraca do check 12. */
|
|
3184
3216
|
.timeline { position:relative; display:flex; flex-direction:column; gap:var(--space-5); margin:0; padding:0; list-style:none; }
|
|
3185
|
-
|
|
3186
|
-
.
|
|
3217
|
+
/* 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
|
|
3218
|
+
tema padrão da Aurea também"). Era um `::before` da lista inteira, posicionado, e o ponto não: o navegador pinta o
|
|
3219
|
+
posicionado por cima, e a linha passava por CIMA da bolinha; e ia até o fim da lista, sobrando depois do último ponto.
|
|
3220
|
+
Agora cada item desenha o trecho até o ponto seguinte, centrado no ponto, e o ponto fica por cima. A cor é a da linha
|
|
3221
|
+
(`--border`); a paleta da 1.0 a troca por `--input`, mais adiante, fora da lory. */
|
|
3222
|
+
.timeline > li { position:relative; display:flex; align-items:flex-start; gap:var(--space-3); }
|
|
3223
|
+
.timeline > li:not(:last-child)::before { content:""; position:absolute; inset-inline-start:calc(var(--space-3) / 2 - var(--border-width) / 2);
|
|
3224
|
+
inset-block-start:calc(var(--space-1) + var(--space-3)); inset-block-end:calc(-1 * (var(--space-5) + var(--space-1)));
|
|
3225
|
+
inline-size:var(--border-width); background:var(--border); }
|
|
3187
3226
|
/* A coluna de conteúdo é uma PILHA, e não por estética: sem isso o item empilhava quando
|
|
3188
3227
|
tinha descrição (o <p> é bloco) e colava título e horário na mesma linha quando não tinha —
|
|
3189
3228
|
"Shipped14:20". Geometria de componente não depende do conteúdo (achados A2/A3). */
|
|
3190
3229
|
.timeline > li > div { display:flex; flex-direction:column; gap:var(--space-05); min-width:0; }
|
|
3191
3230
|
.timeline > li > div > p { margin:0; }
|
|
3192
|
-
.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; }
|
|
3231
|
+
.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; }
|
|
3193
3232
|
/* ACCORDION (0.32.0) — o da referência, com o realce em CÁPSULA (decisão do Victor, 11/10/2026). Sem
|
|
3194
3233
|
caixa em volta: um fio de 1 entre os itens, nenhum depois do último. A pergunta: 16 de todos os
|
|
3195
3234
|
lados, 14 peso médio, a seta de 16 no FIM (esmaecida), que vira −180° ao abrir — o marcador do
|
|
@@ -4911,6 +4950,205 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4911
4950
|
.slider-color .slider-thumb,.color-area-thumb { background:var(--white); box-shadow:var(--shadow-md); }
|
|
4912
4951
|
.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))); }
|
|
4913
4952
|
|
|
4953
|
+
/* ═══ A PALETA DA 1.0 — passo A (ADR-0083, 26/10/2026) ═══════════════════════════════════════════════════════════
|
|
4954
|
+
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
|
|
4955
|
+
GRAFITE no claro (o amarelo vira fundo, traço ou indicador, nunca letra), o link com marca-texto, os campos brancos,
|
|
4956
|
+
as marcas brancas dentro dos controles, o botão ligado amarelo e a linha do tempo consertada. Os TOKENS mudaram na
|
|
4957
|
+
fonte (`aurea.tokens.json`); aqui ficam as REGRAS que mudam junto.
|
|
4958
|
+
A `lory` fica 100% como é hoje (decisão do Victor, 26/10/2026): os tokens dela foram congelados na fonte, e toda
|
|
4959
|
+
regra desta seção leva `:where(:not([data-brand="lory"],[data-brand="lory"] *))`, de força zero. Quem prova que
|
|
4960
|
+
ela sai igual: `tests/visual/lory-congelada.spec.ts`. */
|
|
4961
|
+
|
|
4962
|
+
/* O ESCOLHIDO do claro tem a letra grafite (era a mistura de 45%, que dava marrom): a aba, o segmento aceso, o item de
|
|
4963
|
+
navegação atual e o rótulo `.eyebrow`. O fio amarelo de baixo continua. No escuro, a letra continua o amarelo. */
|
|
4964
|
+
[data-theme="light"] .is-selected:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
4965
|
+
[data-theme="light"] .eyebrow:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
4966
|
+
[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"] *),
|
|
4967
|
+
[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"] *)
|
|
4968
|
+
{ --btn-fg:var(--foreground); color:var(--foreground); }
|
|
4969
|
+
|
|
4970
|
+
/* O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): amarelo cheio com a letra do botão primário, nos dois temas, sem
|
|
4971
|
+
o fio de baixo e sem o fundo "clarinho". As cores passam por `--pressed-*` no próprio botão, para uma faixa com outro
|
|
4972
|
+
`data-theme` acertar e para os outros estilos aprovados (o cinza e o grafite) só trocarem as três variáveis. */
|
|
4973
|
+
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
4974
|
+
--pressed-bg:var(--primary); --pressed-bg-hover:var(--primary-hover); --pressed-fg:var(--primary-foreground);
|
|
4975
|
+
--btn-bg:var(--pressed-bg); --btn-fg:var(--pressed-fg); background:var(--pressed-bg); color:var(--pressed-fg); }
|
|
4976
|
+
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):hover:not(:disabled):not([aria-disabled="true"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
4977
|
+
--btn-bg:var(--pressed-bg-hover); background:var(--pressed-bg-hover); }
|
|
4978
|
+
|
|
4979
|
+
/* 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
|
|
4980
|
+
mesma cor do texto em volta, ou quase (1,91:1 no escuro). Vale para o link sem classe, para o componente `Link` e
|
|
4981
|
+
para o texto no tom link. A NAVEGAÇÃO fica de fora — a trilha, todo link dentro de `<nav>` e o segmento que é link:
|
|
4982
|
+
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
|
|
4983
|
+
chave Web | Native e 6 a trilha; só 2 estavam na prosa).
|
|
4984
|
+
A base, nos dois temas (e a VARIAÇÃO do claro): o sublinhado amarelo de 2 com 3 de afastamento. */
|
|
4985
|
+
:is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
4986
|
+
color:var(--link); text-decoration-line:underline; text-decoration-color:var(--link-underline);
|
|
4987
|
+
text-decoration-thickness:calc(2 * var(--border-width)); text-underline-offset:calc(3 * var(--border-width)); }
|
|
4988
|
+
/* 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
|
|
4989
|
+
14,79:1); no ponteiro, ela cobre a palavra inteira. É um sublinhado grosso que sobe para trás das letras, e não um
|
|
4990
|
+
fundo: assim acompanha só o texto, mesmo quando o elemento ocupa a linha inteira ou o link quebra em várias linhas.
|
|
4991
|
+
As medidas são PROPORÇÕES DA LETRA (em), medidas na bancada de 26/10/2026, e crescem com ela; provadas nos três
|
|
4992
|
+
navegadores em 27/10/2026. A variação (o sublinhado) se pede com `data-link="underline"` no próprio link, num
|
|
4993
|
+
contêiner ou no `<html>` — um atributo, e não uma classe: o core só tem classe que um componente produz. */
|
|
4994
|
+
[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"] *) {
|
|
4995
|
+
text-decoration-color:var(--link-mark); text-decoration-thickness:.5em; text-underline-offset:-.32em; text-decoration-skip-ink:none;
|
|
4996
|
+
transition:text-decoration-thickness var(--duration-fast) var(--ease-standard),text-underline-offset var(--duration-fast) var(--ease-standard); }
|
|
4997
|
+
[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"] *) {
|
|
4998
|
+
text-decoration-thickness:1.25em; text-underline-offset:-1.02em; }
|
|
4999
|
+
@media (prefers-reduced-motion:reduce) {
|
|
5000
|
+
[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; }
|
|
5001
|
+
}
|
|
5002
|
+
|
|
5003
|
+
/* As TINTAS que saíam do destaque ficariam cinza com o destaque grafite: no claro, elas saem do próprio amarelo — o selo
|
|
5004
|
+
primário de contorno (16%) e a marca do item atual da barra de baixo de aro (15%). */
|
|
5005
|
+
[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"] *) {
|
|
5006
|
+
background-color:color-mix(in oklab, var(--primary) 16%, transparent); }
|
|
5007
|
+
[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"] *) {
|
|
5008
|
+
background:color-mix(in srgb, var(--primary) 15%, transparent); }
|
|
5009
|
+
|
|
5010
|
+
/* O CAMPO no claro é BRANCO com a sombra fina em todo lugar, também DENTRO das superfícies brancas (era o cinza
|
|
5011
|
+
`--fill-2` ali — ADR-0078, item 2, revertido pela ADR-0083): dentro de um cartão branco, quem separa o campo é a
|
|
5012
|
+
sombra. A lista é a das superfícies da regra de campo, acima. No escuro, nada muda. */
|
|
5013
|
+
[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"] *) {
|
|
5014
|
+
--field-fill:var(--card); --field-lift:var(--field-lift-page); }
|
|
5015
|
+
|
|
5016
|
+
/* 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
|
|
5017
|
+
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. */
|
|
5018
|
+
[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"] *),
|
|
5019
|
+
[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"] *) {
|
|
5020
|
+
outline-color:var(--primary); }
|
|
5021
|
+
|
|
5022
|
+
/* "AUMENTAR CONTRASTE" do sistema (`prefers-contrast: more`: o "Aumentar contraste" do macOS, do iOS e do Android, o
|
|
5023
|
+
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
|
|
5024
|
+
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
|
|
5025
|
+
linha que esta preferência acende, exceção nomeada à ADR-0072 pela ADR-0083), as quatro marcas dos controles na
|
|
5026
|
+
tinta, e o foco dos campos de volta ao grafite. Fora dela, nada disto existe. */
|
|
5027
|
+
@media (prefers-contrast:more) {
|
|
5028
|
+
: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); }
|
|
5029
|
+
.input-group > :is(.input,.select,.textarea):where(:not([data-brand="lory"],[data-brand="lory"] *)) { border:0; }
|
|
5030
|
+
:root:where(:not([data-brand="lory"])),[data-theme]:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5031
|
+
--control-thumb:var(--brand-yellow-ink); --control-selected-foreground:var(--brand-yellow-ink); --control-selected-dot:var(--brand-yellow-ink); }
|
|
5032
|
+
[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"] *),
|
|
5033
|
+
[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"] *) {
|
|
5034
|
+
outline-color:var(--focus-strong); }
|
|
5035
|
+
}
|
|
5036
|
+
|
|
5037
|
+
/* A LINHA DO TEMPO: o trilho por baixo dos pontos é conserto de todas as marcas (na regra da linha do tempo, acima). Aqui
|
|
5038
|
+
só a cor: de `--border` para `--input` — na página do Zinco profundo, o `--border` quase não aparecia. */
|
|
5039
|
+
.timeline > li:not(:last-child):where(:not([data-brand="lory"],[data-brand="lory"] *))::before { background:var(--input); }
|
|
5040
|
+
|
|
5041
|
+
/* ═══ AS CORES, passo B — os estilos novos (ADR-0084, 27/10/2026) ═════════════════════════════════════════════════
|
|
5042
|
+
Os estilos que o Victor aprovou em 26/10/2026, todos para construir, cada um uma VARIAÇÃO (o padrão de cada peça não
|
|
5043
|
+
muda): o botão ligado em três (`data-pressed-style`), o segmento aceso em seis (`data-segment-style`), a linha do tempo
|
|
5044
|
+
em cinco (`data-timeline-style`) e o item atual da barra de baixo em treze (`data-current-style`), na barra flutuante e
|
|
5045
|
+
na fixa. O atributo vai na própria peça (é o que o React escreve) ou num contêiner — até o `<html>`, para o app todo. A
|
|
5046
|
+
peça com o seu atributo ganha do contêiner (`:not([data-…])` no caminho do contêiner); contêiner dentro de contêiner
|
|
5047
|
+
vale o que vem depois aqui.
|
|
5048
|
+
As cores ficam NA PEÇA, e não num token herdado da raiz: assim uma faixa com outro `data-theme` acerta.
|
|
5049
|
+
A `lory` fica de fora, como no passo A (a marca congelada): toda regra leva o `:where(:not(…lory…))` de força zero.
|
|
5050
|
+
As duas exceções desta seção, registradas na ADR-0084: o DEGRADÊ do `brand-gradient` (a segunda exceção à ADR-0007,
|
|
5051
|
+
depois da escolha de cor da ADR-0069) e os AROS dos estilos de aro (o desenho que dá nome ao estilo — exceção nomeada à
|
|
5052
|
+
ADR-0072, só quando o app escolhe o estilo). */
|
|
5053
|
+
|
|
5054
|
+
/* 2.8 · O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): o C, amarelo, é o padrão desde a 0.45.0 (a regra do passo A
|
|
5055
|
+
já escreve as três variáveis). Aqui o A (`neutral`, o cinza) e o B (`contrast`, o grafite, invertido) trocam só as três. */
|
|
5056
|
+
:is([data-pressed-style="neutral"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="neutral"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5057
|
+
--pressed-bg:var(--input); --pressed-bg-hover:color-mix(in oklab, var(--foreground) 9%, var(--input)); --pressed-fg:var(--foreground); }
|
|
5058
|
+
:is([data-pressed-style="contrast"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="contrast"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5059
|
+
--pressed-bg:var(--foreground); --pressed-bg-hover:color-mix(in oklab, var(--foreground) 84%, var(--background)); --pressed-fg:var(--background); }
|
|
5060
|
+
:is([data-pressed-style="brand"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="brand"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5061
|
+
--pressed-bg:var(--primary); --pressed-bg-hover:var(--primary-hover); --pressed-fg:var(--primary-foreground); }
|
|
5062
|
+
/* O cinza é o mais discreto — o ligado fica perto do desligado. Quem pede mais contraste ganha o contorno de 3:1 (a mesma
|
|
5063
|
+
exceção dos campos, ADR-0083: a linha que só o "aumentar contraste" acende). */
|
|
5064
|
+
@media (prefers-contrast:more) {
|
|
5065
|
+
:is([data-pressed-style="neutral"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="neutral"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5066
|
+
box-shadow:inset 0 0 0 var(--border-width) var(--input-strong); }
|
|
5067
|
+
}
|
|
5068
|
+
|
|
5069
|
+
/* 2.9 · O SEGMENTO ACESO em seis: `current` (a cápsula elevada com o fio amarelo — o de sempre, o padrão), `neutral` (a
|
|
5070
|
+
mesma cápsula, sem fio), `contrast` (o grafite), `brand` (o amarelo), `ring` (a cápsula neutra com o aro amarelo) e
|
|
5071
|
+
`dot` (a cápsula neutra com um ponto amarelo antes do texto). Do `neutral` ao `dot`, o fio de baixo sai. */
|
|
5072
|
+
:is([data-segment-style="neutral"] .segmented:not([data-segment-style]),.segmented[data-segment-style="neutral"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:var(--shadow-sm); }
|
|
5073
|
+
:is([data-segment-style="contrast"] .segmented:not([data-segment-style]),.segmented[data-segment-style="contrast"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--foreground); --seg-fg:var(--background); --seg-shadow:none; }
|
|
5074
|
+
:is([data-segment-style="brand"] .segmented:not([data-segment-style]),.segmented[data-segment-style="brand"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--primary); --seg-fg:var(--primary-foreground); --seg-shadow:none; }
|
|
5075
|
+
:is([data-segment-style="ring"] .segmented:not([data-segment-style]),.segmented[data-segment-style="ring"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary), var(--shadow-sm); }
|
|
5076
|
+
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:var(--shadow-sm); }
|
|
5077
|
+
:is([data-segment-style]:not([data-segment-style="current"]) .segmented:not([data-segment-style]),.segmented[data-segment-style]:not([data-segment-style="current"])) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5078
|
+
--btn-bg:var(--seg-bg); --btn-fg:var(--seg-fg); background:var(--seg-bg); color:var(--seg-fg); box-shadow:var(--seg-shadow); }
|
|
5079
|
+
:is([data-segment-style]:not([data-segment-style="current"]) .segmented:not([data-segment-style]),.segmented[data-segment-style]:not([data-segment-style="current"])) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *))::after { content:none; }
|
|
5080
|
+
/* O ponto do `dot` tem o lugar reservado em TODOS os segmentos, para a largura não pular quando a escolha muda. 6 de
|
|
5081
|
+
diâmetro (a proposta) e 8 até o texto (a proposta dizia 7; o 8 é o `--space-2`, o vão de ícone e texto da escala). */
|
|
5082
|
+
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a):where(:not([data-brand="lory"],[data-brand="lory"] *))::before {
|
|
5083
|
+
content:""; display:inline-block; inline-size:calc(var(--space-1) + var(--space-05)); block-size:calc(var(--space-1) + var(--space-05));
|
|
5084
|
+
margin-inline-end:var(--space-2); border-radius:var(--radius-full); vertical-align:.1em; background:transparent; }
|
|
5085
|
+
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *))::before { background:var(--primary); }
|
|
5086
|
+
|
|
5087
|
+
/* 2.12 · A LINHA DO TEMPO em cinco, todos sobre o conserto da ADR-0083: `default` (o ponto amarelo cheio — o padrão),
|
|
5088
|
+
`ring` (o ponto vazado com o aro amarelo de 2), `latest` (os pontos na cor fraca e só o último no amarelo, com halo de
|
|
5089
|
+
4), `time` (a hora numa coluna à esquerda, alinhada à direita) e `contrast` (os pontos na cor do texto). O `time` muda
|
|
5090
|
+
o arranjo pela grade e `display:contents` no `<div>` de dentro — a marcação do componente não muda. */
|
|
5091
|
+
:is([data-timeline-style="ring"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="ring"]) .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:transparent; box-shadow:inset 0 0 0 calc(2 * var(--border-width)) var(--primary); }
|
|
5092
|
+
:is([data-timeline-style="latest"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="latest"]) .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--muted-foreground); }
|
|
5093
|
+
:is([data-timeline-style="latest"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="latest"]) > li:last-child .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--primary); box-shadow:0 0 0 var(--space-1) color-mix(in oklab, var(--primary) 28%, transparent); }
|
|
5094
|
+
:is([data-timeline-style="contrast"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="contrast"]) .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--foreground); }
|
|
5095
|
+
/* A coluna da hora tem 52 (a proposta, medida com "10:02" e "Ontem"): `--space-12` + `--space-1`. */
|
|
5096
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5097
|
+
display:grid; grid-template-columns:calc(var(--space-12) + var(--space-1)) var(--space-3) minmax(0,1fr); column-gap:var(--space-3); row-gap:var(--space-05); align-items:start; }
|
|
5098
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div:where(:not([data-brand="lory"],[data-brand="lory"] *)) { display:contents; }
|
|
5099
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > small:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5100
|
+
grid-column:1; grid-row:1; text-align:end; font-variant-numeric:tabular-nums; line-height:calc(var(--text-sm) * var(--leading-normal)); }
|
|
5101
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { grid-column:2; grid-row:1; }
|
|
5102
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > strong:where(:not([data-brand="lory"],[data-brand="lory"] *)) { grid-column:3; grid-row:1; }
|
|
5103
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > p:where(:not([data-brand="lory"],[data-brand="lory"] *)) { grid-column:3; grid-row:2; }
|
|
5104
|
+
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li:not(:last-child):where(:not([data-brand="lory"],[data-brand="lory"] *))::before {
|
|
5105
|
+
inset-inline-start:calc(var(--space-12) + var(--space-1) + var(--space-3) + var(--space-3) / 2 - var(--border-width) / 2); }
|
|
5106
|
+
|
|
5107
|
+
/* 2.11 · O ITEM ATUAL DA BARRA DE BAIXO: o `indicator` escolhe a forma, o `currentStyle` a cor. O "fundo" é o do formato
|
|
5108
|
+
— o item inteiro no `pill`, no `subtle` e no `expand`; a marca do ícone no `circle`, no `circle-outline`, no
|
|
5109
|
+
`circle-raised` e no `capsule` (o nome fica embaixo, na cor do texto); o disco no `circle-bold`. O `none` não tem fundo:
|
|
5110
|
+
só a cor da letra muda. Vale igual na barra flutuante e na fixa (`edge`).
|
|
5111
|
+
neutral (A) o cinza · contrast (B) o grafite · brand (C) o amarelo cheio · ring (D) o aro amarelo, sem fundo ·
|
|
5112
|
+
plain (E) só o ícone cheio e o nome em semibold.
|
|
5113
|
+
2.11b · com amarelo e branco: brand-white (F) o amarelo com o branco — REPROVA a WCAG (1,91:1; aprovado pelo Victor
|
|
5114
|
+
sabendo disso) · white-ring (G) o branco com o aro amarelo, a tinta por dentro · brand-gradient (H) o degradê do
|
|
5115
|
+
amarelo até a ponta clara (a ponta é `--primary-gradient-end`, quando a marca define; sem ela, o amarelo com branco).
|
|
5116
|
+
2.13 · a barra inteira AMARELA, com todos os ícones e nomes na tinta (sem transparência: a tinta clareada sobre o
|
|
5117
|
+
amarelo vira marrom): bar-ink (I) a cápsula de tinta com o ícone amarelo · bar-ring (J) o aro de tinta · bar-plain (K)
|
|
5118
|
+
só o ícone cheio e o nome em semibold · bar-light (L) a cápsula amarelo-clara com a tinta. */
|
|
5119
|
+
:is([data-current-style="neutral"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="neutral"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--secondary); --bn-fg:var(--foreground); --bn-ring:none; }
|
|
5120
|
+
:is([data-current-style="contrast"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="contrast"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--foreground); --bn-fg:var(--background); --bn-ring:none; }
|
|
5121
|
+
:is([data-current-style="brand"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--primary); --bn-fg:var(--primary-foreground); --bn-ring:none; }
|
|
5122
|
+
:is([data-current-style="ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="ring"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:transparent; --bn-fg:var(--foreground); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary); }
|
|
5123
|
+
:is([data-current-style="plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="plain"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:transparent; --bn-fg:var(--foreground); --bn-ring:none; }
|
|
5124
|
+
:is([data-current-style="brand-white"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand-white"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--primary); --bn-fg:var(--white); --bn-ring:none; }
|
|
5125
|
+
:is([data-current-style="white-ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="white-ring"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--white); --bn-fg:var(--brand-yellow-ink); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary); }
|
|
5126
|
+
:is([data-current-style="brand-gradient"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand-gradient"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:linear-gradient(135deg, var(--primary) 20%, var(--primary-gradient-end, color-mix(in oklab, var(--primary) 30%, var(--white)))); --bn-fg:var(--primary-foreground); --bn-ring:none; }
|
|
5127
|
+
:is([data-current-style="bar-ink"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-ink"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--primary-foreground); --bn-fg:var(--primary); --bn-ring:none; }
|
|
5128
|
+
:is([data-current-style="bar-ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-ring"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:transparent; --bn-fg:var(--primary-foreground); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary-foreground); }
|
|
5129
|
+
:is([data-current-style="bar-plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-plain"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:transparent; --bn-fg:var(--primary-foreground); --bn-ring:none; }
|
|
5130
|
+
:is([data-current-style="bar-light"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-light"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:color-mix(in oklab, var(--primary) 45%, var(--white)); --bn-fg:var(--brand-yellow-ink); --bn-ring:none; }
|
|
5131
|
+
/* Onde vai a cor, por formato. O `:is()` com os dois caminhos (o atributo num contêiner, ou na barra) é o mesmo de cima. */
|
|
5132
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-pill,.bottom-nav-ind-subtle,.bottom-nav-ind-expand) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5133
|
+
background:var(--bn-bg); color:var(--bn-fg); box-shadow:var(--bn-ring); }
|
|
5134
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5135
|
+
color:var(--foreground); }
|
|
5136
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item[aria-current] .bottom-nav-mark:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5137
|
+
background:var(--bn-bg); color:var(--bn-fg); box-shadow:var(--bn-ring); border-color:transparent; }
|
|
5138
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])).bottom-nav-ind-circle-bold .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { color:var(--bn-fg); }
|
|
5139
|
+
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])).bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--bn-bg); box-shadow:var(--bn-ring); }
|
|
5140
|
+
:is([data-current-style="plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="plain"],[data-current-style="bar-plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-plain"]) .bottom-nav-item[aria-current] .bottom-nav-label:where(:not([data-brand="lory"],[data-brand="lory"] *)) { font-weight:var(--weight-semibold); }
|
|
5141
|
+
/* A barra amarela (2.13): a barra inteira na marca, todos os itens na tinta e o ícone sem transparência. Na fixa (`edge`)
|
|
5142
|
+
o core pinta `--background`; esta passa por cima. O ponto de selo vazio, que é amarelo, vai para a tinta. */
|
|
5143
|
+
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
|
|
5144
|
+
--bottomnav-surface:var(--primary); background:var(--primary); color:var(--primary-foreground); border-color:transparent; }
|
|
5145
|
+
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-item:where(:not([data-brand="lory"],[data-brand="lory"] *)) { color:var(--primary-foreground); }
|
|
5146
|
+
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-item .icon:where(:not([data-brand="lory"],[data-brand="lory"] *)) { opacity:1; }
|
|
5147
|
+
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-badge:empty:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--primary-foreground); }
|
|
5148
|
+
/* A classe DOBRADA é força, de propósito: a regra do nome na cor do texto (o 2.11, acima) também casa com a barra amarela,
|
|
5149
|
+
e no escuro pintaria o nome de branco sobre o amarelo. */
|
|
5150
|
+
:is([data-current-style^="bar-"] .bottom-nav.bottom-nav:not([data-current-style]),.bottom-nav.bottom-nav[data-current-style^="bar-"]):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item.bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { color:var(--primary-foreground); }
|
|
5151
|
+
|
|
4914
5152
|
/* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
|
|
4915
5153
|
/* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
|
|
4916
5154
|
de um botão responsivo herdaria o passo do botão e mudaria de tamanho sozinho. */
|