@aurea-uds/core 0.4.0 → 0.5.0

package/dist/aurea.css

@@ -206,7 +206,7 @@
   --chart-5:oklch(0.424 0.199 265.638);
   --sidebar:var(--card);
   --sidebar-foreground:oklch(0.145 0 0);
-  --sidebar-primary:var(--brand-yellow);
+  --sidebar-primary:var(--primary-emphasis);
   --sidebar-primary-foreground:var(--brand-yellow-foreground);
   --sidebar-accent:var(--secondary);
   --sidebar-accent-foreground:oklch(0.205 0 0);
@@ -243,6 +243,130 @@
   --danger-bg:oklch(0.95 0.05 22);
   --info-bg:oklch(0.95 0.045 260);
 }
+[data-brand="lory"][data-theme="dark"]{
+  --background:oklch(0.16 0.018 250);
+  --foreground:oklch(0.96 0.006 250);
+  --foreground-strong:oklch(1 0 0);
+  --card:oklch(0.21 0.02 250);
+  --card-foreground:oklch(0.96 0.006 250);
+  --popover:oklch(0.21 0.02 250);
+  --popover-foreground:oklch(0.96 0.006 250);
+  --surface-1:oklch(0.21 0.02 250);
+  --surface-2:oklch(0.245 0.02 250);
+  --surface-3:oklch(0.19 0.02 250);
+  --surface-inset:oklch(0.19 0.02 250);
+  --surface-hover:oklch(0.245 0.02 250);
+  --primary:oklch(0.72 0.19 48);
+  --primary-foreground:oklch(0.16 0.02 250);
+  --primary-hover:oklch(0.78 0.17 50);
+  --primary-active:oklch(0.66 0.19 46);
+  --primary-emphasis:oklch(0.85 0.14 60);
+  --primary-outline:oklch(0.72 0.19 48 / 0.4);
+  --secondary:oklch(0.245 0.02 250);
+  --secondary-foreground:oklch(0.96 0.006 250);
+  --secondary-hover:oklch(0.28 0.02 250);
+  --muted:oklch(0.19 0.02 250);
+  --muted-foreground:oklch(0.72 0.015 250);
+  --subtle-foreground:oklch(0.58 0.016 250);
+  --accent:oklch(0.32 0.08 50);
+  --accent-foreground:oklch(0.85 0.14 60);
+  --destructive:oklch(0.7 0.19 25);
+  --destructive-foreground:oklch(0.16 0.02 250);
+  --border:oklch(1 0 0 / 0.1);
+  --border-strong:oklch(1 0 0 / 0.18);
+  --input:oklch(1 0 0 / 0.1);
+  --field-bg:oklch(0.19 0.02 250);
+  --ring:oklch(0.72 0.19 48);
+  --focus:oklch(0.72 0.19 48);
+  --focus-strong:oklch(0.85 0.14 60);
+  --selection:oklch(0.32 0.08 50);
+  --control-selected:oklch(0.72 0.19 48);
+  --control-selected-foreground:oklch(0.16 0.02 250);
+  --overlay:oklch(0 0 0 / 0.6);
+  --chart-1:oklch(0.74 0.18 50);
+  --chart-2:oklch(0.84 0.14 88);
+  --chart-3:oklch(0.72 0.15 158);
+  --chart-4:oklch(0.7 0.13 235);
+  --chart-5:oklch(0.68 0.16 320);
+  --sidebar:oklch(0.21 0.02 250);
+  --sidebar-foreground:oklch(0.96 0.006 250);
+  --sidebar-primary:oklch(0.72 0.19 48);
+  --sidebar-primary-foreground:oklch(0.16 0.02 250);
+  --sidebar-accent:oklch(0.245 0.02 250);
+  --sidebar-accent-foreground:oklch(0.96 0.006 250);
+  --sidebar-border:oklch(1 0 0 / 0.1);
+  --sidebar-ring:oklch(0.72 0.19 48);
+  --success-400:oklch(0.72 0.15 158);
+  --warning-400:oklch(0.78 0.14 78);
+  --danger-400:oklch(0.7 0.19 25);
+  --info-400:oklch(0.7 0.13 235);
+  --success-bg:oklch(0.32 0.07 158);
+  --warning-bg:oklch(0.34 0.07 80);
+  --danger-bg:oklch(0.34 0.09 25);
+  --info-bg:oklch(0.32 0.06 235);
+}
+[data-brand="lory"][data-theme="light"]{
+  --background:oklch(0.984 0.004 70);
+  --foreground:oklch(0.24 0.022 250);
+  --foreground-strong:oklch(0.16 0.02 250);
+  --card:oklch(1 0 0);
+  --card-foreground:oklch(0.24 0.022 250);
+  --popover:oklch(1 0 0);
+  --popover-foreground:oklch(0.24 0.022 250);
+  --surface-1:oklch(1 0 0);
+  --surface-2:oklch(0.975 0.004 70);
+  --surface-3:oklch(0.965 0.006 70);
+  --surface-inset:oklch(0.965 0.006 70);
+  --surface-hover:oklch(0.965 0.006 70);
+  --primary:oklch(0.682 0.197 44.5);
+  --primary-foreground:oklch(1 0 0);
+  --primary-hover:oklch(0.63 0.197 44.5);
+  --primary-active:oklch(0.58 0.19 44.5);
+  --primary-emphasis:oklch(0.52 0.17 45);
+  --primary-outline:oklch(0.682 0.197 44.5 / 0.35);
+  --secondary:oklch(0.965 0.006 70);
+  --secondary-foreground:oklch(0.24 0.022 250);
+  --secondary-hover:oklch(0.94 0.006 70);
+  --muted:oklch(0.965 0.006 70);
+  --muted-foreground:oklch(0.52 0.018 255);
+  --subtle-foreground:oklch(0.65 0.014 255);
+  --accent:oklch(0.96 0.04 60);
+  --accent-foreground:oklch(0.52 0.17 45);
+  --destructive:oklch(0.62 0.21 26);
+  --destructive-foreground:oklch(1 0 0);
+  --border:oklch(0.915 0.006 255);
+  --border-strong:oklch(0.86 0.008 255);
+  --input:oklch(0.915 0.006 255);
+  --field-bg:oklch(1 0 0);
+  --ring:oklch(0.682 0.197 44.5);
+  --focus:oklch(0.682 0.197 44.5);
+  --focus-strong:oklch(0.52 0.17 45);
+  --selection:oklch(0.96 0.04 60);
+  --control-selected:oklch(0.682 0.197 44.5);
+  --control-selected-foreground:oklch(1 0 0);
+  --overlay:oklch(0.16 0.018 250 / 0.45);
+  --chart-1:oklch(0.682 0.197 44.5);
+  --chart-2:oklch(0.82 0.15 88);
+  --chart-3:oklch(0.66 0.15 155);
+  --chart-4:oklch(0.62 0.13 235);
+  --chart-5:oklch(0.6 0.16 320);
+  --sidebar:oklch(1 0 0);
+  --sidebar-foreground:oklch(0.24 0.022 250);
+  --sidebar-primary:oklch(0.52 0.17 45);
+  --sidebar-primary-foreground:oklch(1 0 0);
+  --sidebar-accent:oklch(0.975 0.004 70);
+  --sidebar-accent-foreground:oklch(0.24 0.022 250);
+  --sidebar-border:oklch(0.915 0.006 255);
+  --sidebar-ring:oklch(0.682 0.197 44.5);
+  --success-400:oklch(0.66 0.15 155);
+  --warning-400:oklch(0.78 0.15 75);
+  --danger-400:oklch(0.62 0.21 26);
+  --info-400:oklch(0.62 0.13 235);
+  --success-bg:oklch(0.95 0.05 155);
+  --warning-bg:oklch(0.95 0.06 80);
+  --danger-bg:oklch(0.95 0.05 25);
+  --info-bg:oklch(0.95 0.04 235);
+}
 [data-density="compact"]{
   --control-h-xs:1.5rem;
   --control-h-sm:1.75rem;
@@ -489,12 +613,24 @@ img,svg { display:block; }
 /* min-width:0 é o que deixa o ellipsis funcionar dentro do flex; sem ele o nome longo empurra
    o acessório para fora da caixa em vez de cortar. */
 .sidebar-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
-@media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--secondary); } }
-.sidebar-item[aria-current] { background:var(--secondary); color:var(--foreground); font-weight:var(--weight-medium); }
+/* A LATERAL SE PINTA COM OS TOKENS DELA, e isto é conserto de 20/08/2026 — o Victor viu.
+   Estas duas regras usavam `--secondary` e `--foreground`, que são tokens da PÁGINA. Na Aurea
+   isso nunca apareceu porque o painel e a página têm a mesma claridade nos dois temas; sob a
+   marca `lory`, onde a lateral é escura mesmo no tema claro (decisão de produto da Mallory), o
+   item atual virava uma pílula QUASE BRANCA com texto escuro em cima de um painel escuro. Ele
+   chamou de "cores invertidas", e é exatamente o que era.
+   `--sidebar-accent` e `--sidebar-accent-foreground` já eram PUBLICADOS e não tinham um único
+   uso no core — token publicado que ninguém usa é promessa sem entrega, e era o par certo o
+   tempo todo. O defeito não é da marca: a marca só o tornou visível. */
+@media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--sidebar-accent); } }
+.sidebar-item[aria-current] { background:var(--sidebar-accent); color:var(--sidebar-accent-foreground); font-weight:var(--weight-medium); }
 .sidebar-item[aria-current] .icon { opacity:1; }
 /* Alinha com o TEXTO do item: padding do painel (4) + padding do item (12) = 16px. Com o
    painel apertado, os 8px de antes deixavam a rubrica fora do prumo da lista. */
-.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:var(--subtle-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+/* O rótulo de grupo também sai da escala da LATERAL, pelo mesmo motivo: `--subtle-foreground` é
+   apagado contra a página, e contra um painel escuro num tema claro ele some. Derivado do próprio
+   `--sidebar-foreground` em vez de token novo — a lateral não publica um "muted" dela. */
+.sidebar-group-label { margin:var(--space-3) var(--space-3) var(--space-1); color:color-mix(in oklab, var(--sidebar-foreground) 62%, transparent); font-size:var(--text-xs); font-weight:var(--weight-medium); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
 .sidebar-sub { padding-inline-start:var(--space-5); }
 /* RECOLHIDA — a lateral vira trilho de ícones. O rótulo NÃO some do DOM: o React troca a
    classe dele por `.sr-only`, então quem usa leitor de tela continua ouvindo o nome. Ícone
@@ -717,9 +853,9 @@ img,svg { display:block; }
 /* .nav-group-label é o rótulo de categoria SEM ser título de documento: mesma aparência do
    h4 histórico, mas o grupo se nomeia por aria-labelledby e não entra na lista de títulos
    do leitor de tela (senão a lateral vem antes do h1 da página). É o jeito preferido. */
-.doc-nav h4,.doc-nav .nav-group-label { margin:16px 8px 8px; color:var(--subtle-foreground); font-size:11px; letter-spacing:var(--tracking-widest); text-transform:uppercase; }
+.doc-nav h4,.doc-nav .nav-group-label { margin:16px 8px 8px; color:color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); font-size:11px; letter-spacing:var(--tracking-widest); text-transform:uppercase; }
 .doc-nav .nav-group { display:grid; gap:var(--space-1); }
-.doc-nav a { display:flex; align-items:center; gap:10px; min-height:40px; margin:0; padding:9px 12px; border:1px solid transparent; border-radius:var(--radius-lg); background:transparent; color:var(--muted-foreground); text-decoration:none; box-shadow:none; }
+.doc-nav a { display:flex; align-items:center; gap:10px; min-height:40px; margin:0; padding:9px 12px; border:1px solid transparent; border-radius:var(--radius-lg); background:transparent; color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); text-decoration:none; box-shadow:none; }
 .doc-nav a:hover { color:var(--sidebar-accent-foreground); background:var(--sidebar-accent); border-color:var(--sidebar-border); }
 .doc-nav a.active { border-color:var(--sidebar-border); }
 /* o glifo da família fica na frente do rótulo e nunca encolhe o texto */
@@ -895,13 +1031,39 @@ img,svg { display:block; }
    grita mais que o próprio rótulo. No tema CLARO o amarelo puro como texto dá 1.6:1, longe
    dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar. */
 .is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"],
-.segmented button.active,.doc-nav a.active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
+.segmented button.active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
+/* O ATIVO DA NAV DA LATERAL sai da escala DELA, e não da página (20/08/2026, o Victor viu sob a
+   marca `lory`). Ele dividia esta regra com o `.segmented`, que vive no conteúdo — e `--secondary`
+   é quase branco no tema claro. Numa lateral escura isso desenhava uma pílula branca com texto
+   escuro: as cores invertidas que ele apontou.
+   `--sidebar-accent` e `--sidebar-primary` já eram publicados e não tinham uso no core. O segundo
+   é o que mantém a MARCA no item atual: fundo da lateral, texto da marca. */
+.doc-nav a.active { position:relative; background:var(--sidebar-accent); color:var(--sidebar-primary); }
+/* E O ITEM EM REPOUSO PRECISA DA MESMA PROTEÇÃO, por um motivo de ESPECIFICIDADE que só apareceu
+   medindo a tela do Victor em 20/08/2026 — eu tinha medido o ATIVO e dado o conserto por pronto.
+   Os links da lateral do catálogo não têm atributo `class`, então `[data-theme="light"]
+   a:not([class])` — a regra que existe para LINK DE PROSA — casa com eles. Ela pesa (0,2,1) e a
+   `.doc-nav a` pesa (0,1,1): a regra de prosa ganhava e pintava o item com
+   `color-mix(--primary, --foreground)`. Sob a marca `lory` isso deu MARROM ESCURO
+   (`oklab(0.44 0.059 0.051)`) sobre um painel escuro — ilegível, e foi o que ele viu.
+   Mesmo peso, e depois na folha: quem manda no que está DENTRO da lateral é a lateral.
+   `:not(.active)` NÃO é enfeite — a primeira versão desta linha não tinha, pesava igual à regra do
+   item atual e, vindo depois, APAGAVA o laranja dele. Medido no mesmo minuto: ativo e inativo
+   saíram com a mesma cor. Com o `:not` ela pesa (0,3,1) e só alcança quem está em repouso. */
+[data-theme="light"] .doc-nav a:not(.active) { color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); }
 .is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
 .btn[aria-pressed="true"]:not(.btn-icon)::after,.segmented button.active::after,
 .doc-nav a.active::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); }
+/* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
+.doc-nav a.active::after { background:color-mix(in oklab, var(--sidebar-primary) 75%, transparent); }
 [data-theme="light"] .is-selected,[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]),
-[data-theme="light"] .btn[aria-pressed="true"],[data-theme="light"] .segmented button.active,
-[data-theme="light"] .doc-nav a.active { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+[data-theme="light"] .btn[aria-pressed="true"],[data-theme="light"] .segmented button.active
+  { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
+/* A NAV DA LATERAL SAIU DESTA LISTA em 20/08/2026. O ajuste existe porque o amarelo puro não se lê
+   sobre o claro — mas ele mistura o `--foreground` da PÁGINA, e o item da lateral não está sobre a
+   página: está sobre `--sidebar-accent`. Sob a marca `lory`, onde esse fundo é escuro no tema
+   claro, a mistura escurecia o texto contra um fundo escuro. Quem manda ali é `--sidebar-primary`,
+   que cada marca já publica com a claridade certa para o painel dela. */
 
 /* `line-height:1` não é enfeite: sem ele o .badge herdava a entrelinha do pai e a MESMA
    classe media 26px dentro do .brand (lh 18px) e 22px dentro de um .btn-nav (lh 12px) — na

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/core",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "The Aurea UDS stylesheet and its vanilla behaviour. Import @aurea-uds/fonts/css before this.",
   "keywords": ["aurea", "design-system", "css", "design-tokens"],
   "license": "Apache-2.0",