@inchurch/matcha-theme 22.28.3 → 22.29.0

package/abstracts/_theme-api.scss

@@ -181,6 +181,11 @@ $-matcha-required-seeds: (surface-bg, surface, text-primary, accent, primary, su
     $derived: map.merge($derived, (
       accent-2: $accent-2,
       accent-2-contrast: matcha-text-on($accent-2),
+      // Espelha accent-text-on (linha ~168): mesmo cálculo do contrast, mas com
+      // nome dedicado a foreground de TEXTO — na rota de tokens estáticos os dois
+      // divergem (o -contrast lá é branco fixo, 1:1 Figma), então quem quer texto
+      // legível deve mirar text-on nas duas rotas.
+      accent-2-text-on: matcha-text-on($accent-2),
       accent-2-alpha: rgba($accent-2, .1),
       accent-2-surface: color.mix($accent-2, $surface-bg, 14%),
     ));

package/components/matcha-button-toggle.scss

@@ -408,8 +408,10 @@ matcha-button-toggle {
             width: 100%;
 
             // Children flex-share — each button takes equal width across the row.
-            // SEM min-width: 0 — o botão nunca encolhe abaixo do conteúdo
-            // (min-content); quando nem isso cabe, o overflow-x do grupo rola.
+            // O piso de encolhimento é o `min-width` do size do próprio botão
+            // (matcha-buttons.scss) — NÃO o min-content: o botão tem
+            // `overflow: hidden`, o que anula a automatic minimum size do
+            // flexbox. Quando nem esse piso cabe, o overflow-x do grupo rola.
             > button[matcha-button],
             > a[matcha-button] {
                 flex: 1 1 0;

package/components/matcha-buttons.scss

@@ -47,6 +47,18 @@
 }
 
 // ── Size classes (responsive, aligned with Figma XS/SM/MD/LG/XL) ────────────
+//
+// Cada size define `min-width` igual à sua `height`: o botão nunca fica mais
+// estreito que alto. Sem esse piso a largura é só `padding + conteúdo`, e um
+// label curto ("OK", "X") vira um retângulo VERTICAL — no XS, 23×28. Com o
+// piso o pior caso é um quadrado, com o conteúdo centrado pelo
+// `justify-content: center` do bloco estrutural. Label longo nunca atinge o
+// piso, então nada muda onde já estava certo.
+//
+// Efeito colateral desejado em flex container: o botão tem `overflow: hidden`,
+// o que já anula o `min-width: auto` (a automatic minimum size do flexbox só
+// vale para item com `overflow: visible`) — ou seja, hoje ele encolhe até ~0 e
+// corta o label. O piso troca esse colapso por um mínimo quadrado.
 
 @mixin generate-matcha-button-size-classes($helper-breakpoints) {
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
@@ -62,6 +74,7 @@
                 line-height: var(--matcha-leading-p-tiny, 14px);
                 letter-spacing: var(--matcha-letter-spacing-caption, 0.3px);
                 height: 28px;
+                min-width: 28px;
                 gap: var(--matcha-space-025, 2px);
             }
 
@@ -73,6 +86,7 @@
                 font-weight: var(--matcha-weight-medium, 500);
                 line-height: var(--matcha-leading-label-sm, 19px);
                 height: 32px;
+                min-width: 32px;
                 gap: var(--matcha-space-050, 4px);
             }
 
@@ -84,6 +98,7 @@
                 font-weight: var(--matcha-weight-medium, 500);
                 line-height: var(--matcha-leading-md, 20px);
                 height: 40px;
+                min-width: 40px;
                 gap: var(--matcha-space-100, 8px);
             }
 
@@ -95,6 +110,7 @@
                 font-weight: var(--matcha-weight-semibold, 600);
                 line-height: var(--matcha-leading-label-lg, 22px);
                 height: 48px;
+                min-width: 48px;
                 gap: var(--matcha-space-100, 8px);
             }
 
@@ -106,6 +122,7 @@
                 font-weight: var(--matcha-weight-semibold, 600);
                 line-height: var(--matcha-leading-label-lg, 22px);
                 height: 56px;
+                min-width: 56px;
                 gap: var(--matcha-space-100, 8px);
             }
         }
@@ -126,6 +143,7 @@ a[matcha-link] {
     font-weight: var(--matcha-weight-medium, 500);
     font-family: inherit;
     height: px-to-rem(40px); // default MD; overridden by size attribute selectors
+    min-width: px-to-rem(40px); // piso quadrado do default MD; ver mixin de sizes
     appearance: auto;
     text-rendering: auto;
     letter-spacing: var(--matcha-letter-spacing-button, 0.2px);
@@ -245,6 +263,14 @@ a[matcha-link] {
         background: transparent;
     }
 
+    // Link legado é texto inline (padding 0) — o piso quadrado do size viraria
+    // espaço morto clicável em volta do label, então cai aqui.
+    // O `:not([outline])` é deliberado: o combo [outline][link] é um botão com
+    // borda e padding real (bloco acima), esse MANTÉM o piso.
+    &[link]:not([link="false"]):not([outline]) {
+        min-width: 0;
+    }
+
     // ── matcha-link specific (Figma spec 16914:500) ──
     // SM=11/14 Regular letter 0.3 · MD=14/20 Medium · LG=16/22 SemiBold
     // Hover/Active → underline automático. Underline=true → permanente.
@@ -253,6 +279,7 @@ a[matcha-link] {
         height: auto;
         min-height: 0;
         max-height: none;
+        min-width: 0; // texto inline não tem piso quadrado (ver mixin de sizes)
         padding: 0;
         background: transparent;
         border-radius: 0;

package/components/matcha-nav.scss

@@ -251,6 +251,19 @@
     outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
     outline-offset: var(--matcha-state-focus-ring-offset, 2px);
   }
+
+  // Desabilitado — irmão do .matcha-nav-item--disabled (mesma dupla
+  // pointer-events/cursor aqui; a cor fica no mixin de tema). Cobre as 3 formas:
+  // o `disabled` nativo do <button>, o atributo em elemento que não é button
+  // (o slot aceita <a>) e o aria-disabled de quem precisa manter o foco.
+  // Sem isto, um módulo desabilitado renderiza IDÊNTICO ao habilitado e o
+  // usuário clica sem entender por que nada acontece.
+  &:disabled,
+  &[disabled],
+  &[aria-disabled="true"] {
+    cursor: default;
+    pointer-events: none;
+  }
 }
 
 // ── Nav Rail labeled (84px — nome do módulo embaixo do ícone) ───────────────
@@ -710,6 +723,19 @@
         font-weight: var(--matcha-weight-medium, 500);
       }
     }
+
+    // Desabilitado — mesmo token de cor do nav-item disabled, pra os dois
+    // estados lerem igual. Depois do bloco ativo de propósito: um módulo
+    // desabilitado não deve ficar com a cor de ativo.
+    &:disabled,
+    &[disabled],
+    &[aria-disabled="true"] {
+      color: var(--matcha-color-interaction-disabled-fg);
+
+      matcha-icon {
+        color: var(--matcha-color-interaction-disabled-fg);
+      }
+    }
   }
 
   .matcha-nav-rail__divider {

package/components/matcha-progress-bar.scss

@@ -25,10 +25,21 @@
         // Default fill = accent
         --matcha-progress-fill: var(--matcha-color-accent);
 
+        // Foreground do label inline, em duas alturas:
+        //   • on-fill  → sobre a barra preenchida. Cada semântica já tem o seu par
+        //                `<nome>-contrast` ("o foreground correto sobre esta cor"),
+        //                então não há contraste calculado à mão em lugar nenhum.
+        //   • on-track → sobre o rail não preenchido (disabled-bg).
+        // O default accent-contrast resolve pra rgba(0,0,0,.87) nos dois modos — o
+        // mesmo valor que estava cravado antes, então o caso default não muda de cor.
+        --matcha-progress-label-on-fill: var(--matcha-color-accent-contrast);
+        --matcha-progress-label-on-track: var(--matcha-color-fg);
+
         // Bind por color attr → CSS var (mesma estratégia do slider/spinner)
         @each $name, $fn in $semantic-colors {
             &[color="#{$name}"] {
                 --matcha-progress-fill: var(--matcha-color-#{$name});
+                --matcha-progress-label-on-fill: var(--matcha-color-#{$name}-contrast);
             }
         }
     }
@@ -62,23 +73,48 @@ matcha-progress-bar {
         overflow: hidden;
     }
 
-    // Fill determinate (standard + informative)
+    // Fill determinate (standard + informative).
+    // position/z-index colocam o fill ENTRE os dois labels (bg z-1 · fill z-2 · fg z-3),
+    // que é o que faz o fill opaco mascarar o label de trás no trecho preenchido.
     .progress-fill {
-        display: flex;
-        align-items: center;
+        position: relative;
+        z-index: 2;
         height: 100%;
         background-color: var(--matcha-progress-fill);
         border-radius: var(--matcha-radius-sm, 2px);
         transition: width var(--matcha-duration-fast, 200ms) ease;
     }
 
-    // Inline label (standard sm/md)
-    .progress-fill__label {
+    // ── Inline label (standard sm/md) ──────────────────────────────────────
+    // Base comum aos dois labels. Ambos cobrem o track inteiro (inset: 0), então
+    // ficam alinhados pixel a pixel e a única diferença entre eles é cor + clip.
+    // Se a tipografia divergir entre os dois, o recorte desalinha e aparece degrau
+    // na borda do fill — por isso size/weight moram num seletor só (blocos de size
+    // abaixo miram .progress-text, nunca um dos dois isolado).
+    .progress-text {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
         padding-left: var(--matcha-space-100, 8px);
         font-family: var(--matcha-font-family);
-        // Figma: text inverse/escuro sobre fill claro (accent é claro em dark mode)
-        color: rgba(0, 0, 0, 0.87);
         white-space: nowrap;
+        pointer-events: none;
+    }
+
+    // Trecho NÃO preenchido: atrás do fill, cor que contrasta com o track.
+    .progress-text-bg {
+        z-index: 1;
+        color: var(--matcha-progress-label-on-track);
+    }
+
+    // Trecho preenchido: na frente do fill, cor que contrasta com o fill.
+    // clip-path recorta na largura exata do progresso; a transition acompanha
+    // a mesma duração da width do fill pra recorte e barra andarem juntos.
+    .progress-text-fg {
+        z-index: 3;
+        color: var(--matcha-progress-label-on-fill);
+        transition: clip-path var(--matcha-duration-fast, 200ms) ease;
     }
 
     // Indeterminate animation (standard, sem progress) — Material-style dual-scan.
@@ -126,7 +162,7 @@ matcha-progress-bar {
     &[size="sm"], &[size="small"] {
         .progress { height: var(--matcha-space-200, 16px); border-radius: var(--matcha-radius-md, 4px); }
         .progress-fill { border-radius: var(--matcha-radius-md, 4px); }
-        .progress-fill__label {
+        .progress-text {
             font-size: var(--matcha-text-p-tiny, 11px);
             font-weight: var(--matcha-weight-regular, 400);
             line-height: var(--matcha-leading-p-tiny, 14px);
@@ -136,7 +172,7 @@ matcha-progress-bar {
     &[size="md"], &[size="medium"] {
         .progress { height: var(--matcha-space-400, 32px); border-radius: var(--matcha-radius-md, 4px); }
         .progress-fill { border-radius: var(--matcha-radius-md, 4px); }
-        .progress-fill__label {
+        .progress-text {
             font-size: var(--matcha-text-label-md, 14px);
             font-weight: var(--matcha-weight-medium, 500);
             line-height: var(--matcha-leading-label-md, 20px);
@@ -289,6 +325,7 @@ matcha-progress-bar[type="segmented"] {
 @media (prefers-reduced-motion: reduce) {
     matcha-progress-bar {
         .progress-fill { transition: none; }
+        .progress-text-fg { transition: none; }
         .progress-indeterminate,
         .progress-indeterminate::before,
         .progress-indeterminate::after { animation: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.28.3",
+  "version": "22.29.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {

package/tokens/_color-tokens.scss

@@ -154,7 +154,15 @@ $matcha-color-tokens: (
   // ── Accent Secondary (teal — 4 tokens Figma matcha/color/accent-2/*) ─────
   // Light #00796b (teal-700) | Dark #4fb7ad (teal-light)
   accent-2: (light: #00796b, dark: #4fb7ad),
+  // accent-2-contrast 1:1 Figma DSV3: {common.white} em AMBOS os modos. Serve no Light
+  // (#00796b + branco = 5.3:1), mas NÃO no Dark: accent-2 clareia pra #4fb7ad e o branco
+  // cai pra ~2.3:1 (reprova AA). Mesma situação do accent/contrast — por isso a saída é a
+  // mesma: um accent-2/text-on dedicado a FOREGROUND DE TEXTO, que inverte por modo.
+  // O -contrast fica intacto, fiel ao Figma (drift = o Figma vence).
   accent-2-contrast: (light: #ffffff, dark: #ffffff),
+  // Espelha accent-text-on. Valores batem com matcha-text-on() (rota whitelabel):
+  // yiq(#00796b)=83 → #ffffff · yiq(#4fb7ad)=151 → #1a1d21.
+  accent-2-text-on: (light: #ffffff, dark: #1a1d21),
   accent-2-alpha: (light: rgba(#00796b, .10), dark: rgba(#4fb7ad, .12)),
   accent-2-surface: (light: #e0f0ee, dark: #1d332e),
 
@@ -215,7 +223,7 @@ $matcha-color-tokens: (
   info-surface-hover: (light: #ebeefa, dark: #0f141e),
   info-surface-pressed: (light: #d8def5, dark: #131f31),
 
-  // ── Palette (18) — matcha/color/palette/* ────────────────────────────────
+  // ── Palette (19) — matcha/color/palette/* ────────────────────────────────
   palette-teal: (light: #00796b, dark: #4fb7ad),
   palette-teal-light: (light: #4fb7ad, dark: #009688),
   palette-teal-alpha: (light: rgba(#00796b, .1), dark: rgba(#4fb7ad, .1)),
@@ -225,6 +233,12 @@ $matcha-color-tokens: (
   palette-purple: (light: #9c27b0, dark: #bb6ac8),
   palette-purple-light: (light: #bb6ac8, dark: #9c27b0),
   palette-purple-alpha: (light: rgba(#9c27b0, .1), dark: rgba(#bb6ac8, .1)),
+  // Contraste (texto sobre a cor sólida), mesmo critério dos chart-series-*-contrast.
+  // Light #9c27b0 + branco = 5.6:1 · Dark #bb6ac8 + preto .87 = ~7:1 (AA nos 2 modos).
+  // Só o purple tem o par por enquanto: é a única cor da paleta usada como fill de
+  // superfície com texto em cima (barra de Jornada do dashboard). As outras ganham o
+  // seu quando aparecer o caso — não gerar 6 pares especulativos.
+  palette-purple-contrast: (light: #ffffff, dark: rgba(0, 0, 0, .87)),
   palette-pink: (light: #d81b60, dark: #e46291),
   palette-pink-light: (light: #e46291, dark: #d81b60),
   palette-pink-alpha: (light: rgba(#d81b60, .1), dark: rgba(#e46291, .1)),