@aurea-uds/core 0.36.0 → 0.37.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 +56 -11
- package/package.json +1 -1
package/dist/aurea.css
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
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
7
|
--brand-yellow-ink:#242424;
|
|
8
|
+
--brand-blue:#0246f1;
|
|
8
9
|
--white:oklch(1 0 0);
|
|
9
10
|
--black:oklch(0 0 0);
|
|
10
11
|
--font-ui:"Atkinson Hyperlegible Next","Segoe UI",sans-serif;
|
|
@@ -248,8 +249,8 @@
|
|
|
248
249
|
--popover-foreground:#242424;
|
|
249
250
|
--primary:var(--brand-yellow);
|
|
250
251
|
--primary-foreground:var(--brand-yellow-ink);
|
|
251
|
-
--link:var(--brand-
|
|
252
|
-
--link-hover:var(--brand-
|
|
252
|
+
--link:var(--brand-blue);
|
|
253
|
+
--link-hover:var(--brand-blue);
|
|
253
254
|
--secondary:#ebebeb;
|
|
254
255
|
--secondary-foreground:#242424;
|
|
255
256
|
--muted:var(--secondary);
|
|
@@ -290,8 +291,8 @@
|
|
|
290
291
|
--segment:oklch(1 0 0);
|
|
291
292
|
--focus:var(--primary);
|
|
292
293
|
--focus-strong:var(--foreground);
|
|
293
|
-
--primary-emphasis:var(--brand-
|
|
294
|
-
--primary-outline:var(--brand-
|
|
294
|
+
--primary-emphasis:var(--brand-blue);
|
|
295
|
+
--primary-outline:var(--brand-blue);
|
|
295
296
|
--control-selected:var(--brand-yellow);
|
|
296
297
|
--control-selected-foreground:var(--brand-yellow-ink);
|
|
297
298
|
--control-selected-dot:oklch(0.985 0 0);
|
|
@@ -1977,6 +1978,11 @@ img,svg { display:block; }
|
|
|
1977
1978
|
linha passa a ser só o adorno de 100%, que é o que se quer. */
|
|
1978
1979
|
.input-group>.input,.input-group>.select,.input-group>.textarea { flex:1 1 0; min-inline-size:0; background:transparent; border:0; border-radius:0; }
|
|
1979
1980
|
.input-group>.input:focus-visible,.input-group>.select:focus-visible,.input-group>.textarea:focus-visible { outline:none; }
|
|
1981
|
+
/* Desativado (lote 1, 20/10/2026): no grupo, quem pinta o estado é a moldura, como no inválido — só o texto recuava, e o
|
|
1982
|
+
fundo e o ícone ficavam iguais. O campo de dentro não recua de novo (seriam 0,25). Só o CAMPO conta: um botão
|
|
1983
|
+
desativado no adorno (o de limpar, sem texto) não desativa o grupo. */
|
|
1984
|
+
.input-group:has(> :is(.input,.select,.textarea):disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
|
|
1985
|
+
.input-group>.input:disabled,.input-group>.select:disabled,.input-group>.textarea:disabled { opacity:1; }
|
|
1980
1986
|
/* O adorno não estica nem encolhe, e nunca rouba o clique do campo — a menos que ele PRÓPRIO
|
|
1981
1987
|
seja clicável, e aí quem devolve o ponteiro é o botão de dentro. */
|
|
1982
1988
|
.input-group-addon { display:inline-flex; flex:none; align-items:center; gap:var(--space-1); color:var(--subtle-foreground); }
|
|
@@ -2082,7 +2088,9 @@ img,svg { display:block; }
|
|
|
2082
2088
|
de virar a seta seriam dois idiomas para "isto está aberto". */
|
|
2083
2089
|
.collapsible { display:grid; }
|
|
2084
2090
|
.collapsible-trigger { display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--control-h-sm); padding:0; border:0; background:transparent; color:var(--foreground); font:inherit; font-weight:var(--weight-medium); text-align:start; cursor:pointer; }
|
|
2085
|
-
.collapsible-trigger:hover { color:var(--primary); }
|
|
2091
|
+
.collapsible-trigger:hover:not([data-disabled]) { color:var(--primary); }
|
|
2092
|
+
/* Desativado (lote 1, 20/10/2026): o motor marca o gatilho com `data-disabled`; ele recua e não acende no hover. */
|
|
2093
|
+
.collapsible-trigger[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
|
|
2086
2094
|
.collapsible-chevron { flex:none; transition:transform var(--duration-fast) var(--ease-standard); }
|
|
2087
2095
|
.collapsible-trigger[data-panel-open] .collapsible-chevron { transform:rotate(180deg); }
|
|
2088
2096
|
.collapsible-panel { overflow:hidden; }
|
|
@@ -2203,6 +2211,10 @@ img,svg { display:block; }
|
|
|
2203
2211
|
.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); }
|
|
2204
2212
|
.switch-track { --switch-x:calc(var(--switch-h) * 2 - (var(--switch-h) - 2 * var(--space-05)) * 11 / 8 - 2 * var(--space-05)); }
|
|
2205
2213
|
.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(--primary-mark); }
|
|
2214
|
+
/* DESATIVADO (lote 1, as travas, 20/10/2026 — o check 49 achou): o `<input>` é invisível e quem desenha é a marca,
|
|
2215
|
+
então o `disabled` chegava ao campo e nada mudava na tela. A peça inteira recua, marca e nome, como na referência
|
|
2216
|
+
(o estado de desativado dela vai na raiz do controle, a 0,5). Vale também para as opções de um grupo desativado. */
|
|
2217
|
+
.checkbox:has(> input:disabled),.radio:has(> input:disabled),.switch:has(> input:disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
|
|
2206
2218
|
.range { width:100%; accent-color:var(--primary); }
|
|
2207
2219
|
/* Slider VERTICAL, no `<input type=range>` NATIVO — sem trocar de motor.
|
|
2208
2220
|
|
|
@@ -2369,7 +2381,14 @@ img,svg { display:block; }
|
|
|
2369
2381
|
.btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,.tabs-secondary .tab[data-active]::after,
|
|
2370
2382
|
.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); }
|
|
2371
2383
|
/* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
|
|
2372
|
-
.doc-nav a.active::after,.sidebar-item[aria-current]::after { background:color-mix(in oklab, var(--sidebar-primary) 75%, transparent); }
|
|
2384
|
+
.doc-nav a.active::after,.sidebar-item[aria-current]::after { background:var(--sidebar-current-line, color-mix(in oklab, var(--sidebar-primary) 75%, transparent)); }
|
|
2385
|
+
/* 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
|
|
2386
|
+
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á
|
|
2387
|
+
marca o estado, e o fio de baixo some (`--sidebar-current-line` transparente: regra no `::after` não aceitaria a guarda
|
|
2388
|
+
de tema no fim). Só sem `data-brand` (a `lory` tem a lateral dela) e só no claro (no escuro, a letra amarela continua).
|
|
2389
|
+
Sobre o amarelo, a letra de destaque de DENTRO do item (o selo primário de contagem, um ícone de destaque) é a tinta do
|
|
2390
|
+
botão: o azul sobre o amarelo mede 3,49:1 — o axe da varredura achou, no "12" do exemplo da `Sidebar`. */
|
|
2391
|
+
[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); }
|
|
2373
2392
|
[data-theme="light"] .is-selected:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
|
|
2374
2393
|
[data-theme="light"] .btn[aria-pressed="true"]:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .segmented button.active:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
|
|
2375
2394
|
{ --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
|
|
@@ -2397,9 +2416,14 @@ img,svg { display:block; }
|
|
|
2397
2416
|
numa fila, `align-self:flex-start` tiraria o selo do meio; o tamanho definido só desliga o
|
|
2398
2417
|
esticar, que é o que a coluna faz com um item sem tamanho. */
|
|
2399
2418
|
.badge-fit { inline-size:fit-content; }
|
|
2400
|
-
/* O cheio da marca
|
|
2401
|
-
|
|
2419
|
+
/* O cheio da marca escreve com a letra do botão amarelo (`--primary-foreground`): na ADR-0073 o acento do claro virou o
|
|
2420
|
+
próprio amarelo, e a letra de antes (`--background`, clara) media 1,75:1 em cima dele. O fundo, na Aurea padrão, é o
|
|
2421
|
+
primário desde a ADR-0076 (a regra logo abaixo). */
|
|
2402
2422
|
.badge-primary { --badge-accent:var(--primary-emphasis); --badge-on:var(--primary-foreground); color:var(--primary-emphasis); border-color:transparent; background:color-mix(in srgb,var(--primary) 10%,transparent); }
|
|
2423
|
+
/* ADR-0076 (20/10/2026): na Aurea padrão a letra de destaque do claro é o AZUL, e o cheio continua o AMARELO — o fundo do
|
|
2424
|
+
selo cheio é o primário, e não o acento (com o acento, sairia a letra cinza no azul, 1,99:1). Só sem `data-brand`, como o
|
|
2425
|
+
contorno lá embaixo: na `lory` do claro o primário com a letra dela mede 3,08:1, e o acento dela já é o fundo certo. */
|
|
2426
|
+
.badge-primary:not(:where([data-brand],[data-brand] *)) { --badge-fill:var(--primary); }
|
|
2403
2427
|
/* TAMANHOS. O md é a base (24px), que não muda — é o que as 103 fichas já usam. */
|
|
2404
2428
|
.badge-xs { min-height:var(--space-4); padding:0 var(--space-1); border-width:0; }
|
|
2405
2429
|
.badge-sm { min-height:var(--space-5); padding:0 calc(var(--space-1) + var(--space-05) - var(--border-width)); }
|
|
@@ -2485,7 +2509,7 @@ img,svg { display:block; }
|
|
|
2485
2509
|
tema: `--success-400` é verde CLARO no escuro e verde ESCURO no claro. */
|
|
2486
2510
|
/* O selo CHEIO de estado é o botão cheio do mesmo tom (ADR-0061): a mesma cor funda e a mesma letra
|
|
2487
2511
|
(`--badge-fill`/`--badge-on`). Quem não declara o par (as categorias, o neutro) segue enchendo com o
|
|
2488
|
-
acento, como antes; a marca
|
|
2512
|
+
acento, como antes; a marca declara a letra (ADR-0073) e, na Aurea padrão, o fundo é o primário (ADR-0076). */
|
|
2489
2513
|
.badge-solid { background:var(--badge-fill, var(--badge-accent)); color:var(--badge-on, var(--background)); border-color:transparent; }
|
|
2490
2514
|
.badge-outline { background:transparent; color:var(--badge-accent); border-color:transparent; }
|
|
2491
2515
|
/* flat (15/10/2026): o tom de sempre sem a linha em volta — o selo da referência não tem borda em forma nenhuma. A
|
|
@@ -3068,6 +3092,26 @@ button.tag-main { cursor:pointer; }
|
|
|
3068
3092
|
é inalcançável por teclado (axe scrollable-region-focusable). Quem escreve esta marcação à
|
|
3069
3093
|
mão precisa de `tabindex="0"` no <pre> — o componente React já o emite. */
|
|
3070
3094
|
.code-block { overflow:auto; padding:16px; border:1px solid transparent; border-radius:var(--radius-lg); background:var(--surface-inset); color:var(--muted-foreground); font:12px/1.7 var(--font-code); }
|
|
3095
|
+
/* Lote V (20/10/2026): o número da linha e as cores do código (`CodeBlock lineNumbers` e `highlight`). O número é o da
|
|
3096
|
+
referência, medido na página dela: uma coluna de 16 (--space-4), alinhada à direita, a 24 do código (--space-6); ela
|
|
3097
|
+
cresce com os algarismos da última linha (`--code-line-digits`, que o componente escreve), para a coluna não pular
|
|
3098
|
+
na linha 100. A cor é a apagada da Aurea, que se lê (a da referência apaga até ~2:1). O número é DESENHO: não entra
|
|
3099
|
+
no texto copiado (`user-select:none`) nem no leitor de tela (o texto alternativo vazio depois da barra; quem não
|
|
3100
|
+
entende a barra fica com a linha de cima).
|
|
3101
|
+
As cores são as do `CodeEditor` (o `aureaHighlightStyle`), pelos mesmos tokens. Com cor, o texto sem cor é o do
|
|
3102
|
+
tema (`--foreground`), e não o apagado: o apagado fica para o comentário. */
|
|
3103
|
+
.code-block-numbered { counter-reset:aurea-linha; }
|
|
3104
|
+
.code-block-numbered .code-line::before { counter-increment:aurea-linha; content:counter(aurea-linha); content:counter(aurea-linha) / ""; display:inline-block; min-inline-size:max(var(--space-4), calc(var(--code-line-digits, 2) * 1ch)); margin-inline-end:var(--space-6); color:var(--muted-foreground); text-align:end; -webkit-user-select:none; user-select:none; }
|
|
3105
|
+
.code-block-highlighted { color:var(--foreground); }
|
|
3106
|
+
.code-block .tok-comment { color:var(--muted-foreground); font-style:italic; }
|
|
3107
|
+
/* As cores levam 20% do texto, como o nível do registro, que mora no mesmo fundo (`.log-stream`, ADR-0072): puras, o azul
|
|
3108
|
+
caía a 4,08:1 no claro e o verde a 4,44:1 no escuro (medido no site, 20/10/2026). */
|
|
3109
|
+
.code-block .tok-keyword { color:color-mix(in oklab,var(--info-400) 80%,var(--foreground)); }
|
|
3110
|
+
.code-block .tok-string { color:color-mix(in oklab,var(--success-400) 80%,var(--foreground)); }
|
|
3111
|
+
.code-block .tok-number { color:color-mix(in oklab,var(--warning-400) 80%,var(--foreground)); }
|
|
3112
|
+
.code-block .tok-property { color:var(--foreground); }
|
|
3113
|
+
.code-block .tok-function { color:var(--foreground); font-weight:var(--weight-semibold); }
|
|
3114
|
+
.code-block .tok-invalid { color:color-mix(in oklab,var(--danger-400) 80%,var(--foreground)); }
|
|
3071
3115
|
/* Bloco de código COM copiar: a moldura não rola, o <pre> rola por dentro e o gatilho fica
|
|
3072
3116
|
parado no canto. O comportamento é do core (aurea.js, [data-aurea-copy]); aqui só a pele.
|
|
3073
3117
|
O check em amarelo é confirmação instantânea — dura 1,5s e volta ao ícone de copiar. */
|
|
@@ -4653,8 +4697,9 @@ button.graph-node-body { cursor:pointer; }
|
|
|
4653
4697
|
da "C" dos botões): com a letra de sempre, o verde caía a 3,79:1 no claro e o `success` a 4,15:1 no escuro, dentro do
|
|
4654
4698
|
cartão. Medido em 16/10/2026: o pior caso passa a 4,79:1. Os outros selos (suave, plano) têm fundo próprio e não mudam. */
|
|
4655
4699
|
.badge-outline { background-color:color-mix(in oklab,var(--badge-accent) 16%,transparent); color:color-mix(in oklab,var(--badge-accent) 80%,var(--foreground)); }
|
|
4656
|
-
/* Menos o primário da Aurea (ADR-0073, decisão do Victor de 18/10/2026, "A"): a letra é o próprio amarelo
|
|
4657
|
-
do selo suave e do botão de contorno da marca — misturado ao texto,
|
|
4700
|
+
/* Menos o primário da Aurea (ADR-0073, decisão do Victor de 18/10/2026, "A"): a letra é o próprio acento (o amarelo no
|
|
4701
|
+
escuro; o azul no claro, desde a ADR-0076), a mesma do selo suave e do botão de contorno da marca — misturado ao texto,
|
|
4702
|
+
o amarelo virava mostarda (2,36:1) só nesta peça. A
|
|
4658
4703
|
referência principal usa a mesma letra no suave e no contorno. Só sem `data-brand`: na `lory` do claro, sem a
|
|
4659
4704
|
mistura, a letra cairia de 5,56 para 4,42:1. */
|
|
4660
4705
|
.badge-primary.badge-outline:not(:where([data-brand],[data-brand] *)) { color:var(--badge-accent); }
|