@aurea-uds/core 0.54.1 → 0.56.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 +59 -10
- package/package.json +1 -1
package/dist/aurea.css
CHANGED
|
@@ -381,7 +381,9 @@
|
|
|
381
381
|
--field-bg:oklch(0.19 0.02 250);
|
|
382
382
|
--ring:oklch(0.72 0.19 48);
|
|
383
383
|
--focus:oklch(0.72 0.19 48);
|
|
384
|
-
--focus-strong:oklch(0.
|
|
384
|
+
--focus-strong:oklch(0.72 0.19 48);
|
|
385
|
+
--link:oklch(0.72 0.19 48);
|
|
386
|
+
--link-hover:oklch(0.78 0.17 50);
|
|
385
387
|
--selection:oklch(0.32 0.08 50);
|
|
386
388
|
--control-selected:oklch(0.72 0.19 48);
|
|
387
389
|
--control-selected-foreground:oklch(1 0 0);
|
|
@@ -452,7 +454,7 @@
|
|
|
452
454
|
--field-bg:oklch(1 0 0);
|
|
453
455
|
--ring:oklch(0.682 0.197 44.5);
|
|
454
456
|
--focus:oklch(0.682 0.197 44.5);
|
|
455
|
-
--focus-strong
|
|
457
|
+
--focus-strong:#ff6600;
|
|
456
458
|
--selection:oklch(0.96 0.04 60);
|
|
457
459
|
--control-selected:oklch(0.682 0.197 44.5);
|
|
458
460
|
--control-selected-foreground:oklch(1 0 0);
|
|
@@ -484,8 +486,8 @@
|
|
|
484
486
|
--warning-bg:oklch(0.95 0.06 80);
|
|
485
487
|
--danger-bg:oklch(0.95 0.05 25);
|
|
486
488
|
--info-bg:oklch(0.95 0.04 235);
|
|
487
|
-
--link:oklch(0.
|
|
488
|
-
--link-hover:oklch(0.
|
|
489
|
+
--link:oklch(0.682 0.197 44.5);
|
|
490
|
+
--link-hover:oklch(0.63 0.197 44.5);
|
|
489
491
|
--brand-yellow-ink:#242424;
|
|
490
492
|
--warning-foreground:#242424;
|
|
491
493
|
--control-thumb:var(--primary-mark);
|
|
@@ -1096,6 +1098,15 @@
|
|
|
1096
1098
|
--card-pad:1.25rem;
|
|
1097
1099
|
--section-gap:2rem;
|
|
1098
1100
|
}
|
|
1101
|
+
[data-text="lg"]{
|
|
1102
|
+
--text-xs:0.875rem;
|
|
1103
|
+
--text-sm:1rem;
|
|
1104
|
+
--text-base:1.125rem;
|
|
1105
|
+
--text-lg:1.25rem;
|
|
1106
|
+
--text-xl:1.375rem;
|
|
1107
|
+
--text-2xl:1.625rem;
|
|
1108
|
+
--control-h-md:var(--target-min);
|
|
1109
|
+
}
|
|
1099
1110
|
/* Aurea core — component styles. Built with @aurea-uds/tokens into dist/aurea.css. Load @aurea-uds/fonts/css for Inter, Sora and IBM Plex Mono (ADR-0077). */
|
|
1100
1111
|
/* ========================================================================== */
|
|
1101
1112
|
/* 02. RESET, ACESSIBILIDADE E BASE */
|
|
@@ -2623,13 +2634,16 @@ img,svg { display:block; }
|
|
|
2623
2634
|
que um grupo vertical tem de não ter. */
|
|
2624
2635
|
.btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; }
|
|
2625
2636
|
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn { position:relative; border-radius:0; }
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn
|
|
2637
|
+
/* O PRIMEIRO e o ÚLTIMO BOTÃO, e não o primeiro e o último filho (o Victor, 04/11/2026: "quando clico botão fica quadrado"): com
|
|
2638
|
+
um menu aberto, o motor dele põe marcadores de foco invisíveis ao lado do gatilho, e a setinha de um botão dividido deixava
|
|
2639
|
+
de ser o último filho — perdia a ponta redonda e a linha do meio. `:where()` mantém a força de antes. */
|
|
2640
|
+
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:where(:not(.btn ~ .btn)) { border-start-start-radius:var(--radius-full); border-end-start-radius:var(--btn-group-h); border-start-end-radius:var(--btn-group-v); }
|
|
2641
|
+
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:where(:not(:has(~ .btn))) { border-end-end-radius:var(--radius-full); border-start-end-radius:var(--btn-group-h); border-end-start-radius:var(--btn-group-v); }
|
|
2642
|
+
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:where(:not(.btn ~ .btn):not(:has(~ .btn))) { border-radius:var(--radius-full); }
|
|
2643
|
+
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn ~ .btn::before { content:""; position:absolute; inset-inline-start:var(--btn-group-sep-i); inset-block-start:var(--btn-group-sep-b); inline-size:var(--btn-group-sep-w); block-size:var(--btn-group-sep-h); border-radius:var(--radius-full); background:currentColor; opacity:.15; pointer-events:none; }
|
|
2630
2644
|
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:active:not(:disabled) { transform:none; }
|
|
2631
|
-
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:
|
|
2632
|
-
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:
|
|
2645
|
+
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:where(:has(~ .btn)) { border-inline-end-width:var(--btn-group-bi); border-block-end-width:var(--btn-group-bb); }
|
|
2646
|
+
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:where(.btn ~ .btn) { border-inline-start-width:var(--btn-group-bi); border-block-start-width:var(--btn-group-bb); }
|
|
2633
2647
|
/* o anel de foco de um botão do meio fica por cima dos vizinhos, e não por baixo */
|
|
2634
2648
|
:is(.btn-group,.toggle-group) > .btn:focus-visible { z-index:1; }
|
|
2635
2649
|
.btn-group-detached,.toggle-group-detached { flex-wrap:wrap; gap:var(--space-1); }
|
|
@@ -4936,6 +4950,15 @@ button.tag-main { cursor:pointer; }
|
|
|
4936
4950
|
DropdownMenu, ContextMenu, Menubar e a lista da CommandPalette. */
|
|
4937
4951
|
.menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
|
|
4938
4952
|
.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; text-align:start; text-decoration:none; cursor:pointer; }
|
|
4953
|
+
/* O ITEM COM EXPLICAÇÃO e o ÍCONE NA PONTA (0.55.0, o Victor, 04/11/2026: "pegue o código" da referência): a anatomia do
|
|
4954
|
+
item dela — o nome e, embaixo, a explicação na letra pequena e na cor de apoio; o recheio de 6 em cima e embaixo; o ícone
|
|
4955
|
+
da ponta (o "abre fora" de um link) empurrado para o fim. Só com `description` ou `trailingIcon`: sem eles, o item é o
|
|
4956
|
+
de sempre. */
|
|
4957
|
+
.menu-item:has(> .menu-item-text) { padding-block:calc(var(--space-1) + var(--space-05)); }
|
|
4958
|
+
.menu-item-text { display:grid; gap:var(--space-05); min-inline-size:0; }
|
|
4959
|
+
.menu-item-description { font-size:var(--text-xs); line-height:var(--leading-normal); font-weight:var(--weight-regular); color:var(--muted-foreground);
|
|
4960
|
+
overflow-wrap:break-word; }
|
|
4961
|
+
.menu-item > .menu-item-trailing { margin-inline-start:auto; color:var(--muted-foreground); }
|
|
4939
4962
|
.menu-item[data-highlighted],.menu-item:hover:not([data-disabled]) { background:var(--surface-3); }
|
|
4940
4963
|
/* Foco de TECLADO no item: a linha de foco, por dentro, porque a lista recorta o que passa da borda
|
|
4941
4964
|
(B-09 e a ordem de 25/09/2026, "a referência sempre primeiro": o item de menu dela
|
|
@@ -6206,6 +6229,32 @@ button.graph-node-body { cursor:pointer; }
|
|
|
6206
6229
|
:is([data-ring="true"] :is(.badge:not(.badge-solid),.btn-soft,.btn-outline,.btn-primary-outline,.btn-danger-outline):not([data-ring]),:is(.badge:not(.badge-solid),.btn-soft,.btn-outline,.btn-primary-outline,.btn-danger-outline)[data-ring="true"]) {
|
|
6207
6230
|
box-shadow:inset 0 0 0 var(--border-width) color-mix(in oklab, var(--ring-tone, currentColor) 30%, transparent); }
|
|
6208
6231
|
|
|
6232
|
+
/* ═══ OS MODOS DE LEITURA (ADR-0090, 04/11/2026) ═══════════════════════════════════════════════════════════════
|
|
6233
|
+
Seção própria, FORA da paleta do passo A: a Ember recebe os dois modos ("Sim, recebe"), e as regras da paleta, não. */
|
|
6234
|
+
/* O ALTO CONTRASTE E O TEXTO GRANDE NO APP INTEIRO (o MNT-30, bloco 3 — ADR-0090, 04/11/2026). O app liga, e não o
|
|
6235
|
+
sistema: `data-contrast="high"` e `data-text="lg"` em qualquer contêiner (a raiz do app inclusive), ou o `highContrast` e
|
|
6236
|
+
o `textSize="lg"` do `AppShell`. As formas que o Victor escolheu no esboço e aprovou na bancada: o contraste "C" e o
|
|
6237
|
+
texto "B". Valem em todas as marcas, a Ember inclusive ("Sim, recebe"); sem o atributo, nada disto existe.
|
|
6238
|
+
O CONTRASTE: o mesmo do "aumentar contraste" do sistema (o contorno de 3:1 nos campos, as marcas na tinta, o foco do
|
|
6239
|
+
campo no `--focus-strong`) e mais: o texto de apoio mais perto do texto, contorno nos cartões, o link sempre sublinhado
|
|
6240
|
+
e o contorno do botão (por dentro, como os aros — nunca borda). São linhas que SÓ este modo acende: exceção nomeada à
|
|
6241
|
+
ADR-0072, como o contorno do `prefers-contrast`. */
|
|
6242
|
+
[data-contrast="high"],[data-contrast="high"] [data-theme] {
|
|
6243
|
+
--muted-foreground:color-mix(in oklab, var(--foreground) 80%, var(--background));
|
|
6244
|
+
--control-thumb:var(--brand-yellow-ink); --control-selected-foreground:var(--brand-yellow-ink); --control-selected-dot:var(--brand-yellow-ink); }
|
|
6245
|
+
[data-contrast="high"] :is(.input,.textarea,.select,.input-group,.combobox-multi,.input-secondary,.textarea-secondary) { border-color:var(--input-strong); }
|
|
6246
|
+
[data-contrast="high"] .input-group > :is(.input,.select,.textarea) { border:0; }
|
|
6247
|
+
[data-contrast="high"] .card { border-color:var(--input-strong); }
|
|
6248
|
+
[data-contrast="high"] :is(a,.link) { text-decoration-line:underline; text-decoration-color:currentColor; text-decoration-thickness:var(--border-width); text-underline-offset:0.2em; }
|
|
6249
|
+
[data-contrast="high"] .btn { box-shadow:inset 0 0 0 var(--border-width) var(--input-strong); }
|
|
6250
|
+
[data-contrast="high"] .btn.btn-primary { box-shadow:inset 0 0 0 var(--border-width) var(--primary-foreground); }
|
|
6251
|
+
[data-contrast="high"] :is(.input,.textarea,.select):focus-visible,
|
|
6252
|
+
[data-contrast="high"] :is(.input-group,.combobox-multi,.command-field):focus-within { outline-color:var(--focus-strong); }
|
|
6253
|
+
/* O TEXTO GRANDE: os tokens do `[data-text="lg"]` (a letra 2 acima, o controle médio a 44) vêm do `aurea.tokens.css`.
|
|
6254
|
+
Aqui só a letra do corpo: o `body` resolve a dele com os tokens de onde ELE está, então um contêiner que liga o modo
|
|
6255
|
+
(o `AppShell`) refaz a conta para o que tem dentro. Na raiz (`<html>`) não: lá o `font-size` mudaria o `rem`. */
|
|
6256
|
+
[data-text="lg"]:not(:root) { font-size:var(--text-sm); }
|
|
6257
|
+
|
|
6209
6258
|
/* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
|
|
6210
6259
|
/* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
|
|
6211
6260
|
de um botão responsivo herdaria o passo do botão e mudaria de tamanho sozinho. */
|