@inchurch/matcha-theme 22.30.1 → 22.32.0

package/base/_reset.scss

@@ -8,6 +8,47 @@
         *, *:before, *:after {
             box-sizing: border-box;
         }
+
+        // Seleção de texto na cor da marca. Antes só existia escopada em input/
+        // textarea (matcha-form-field) — no resto da aplicação valia o azul do
+        // sistema operacional. `accent-text-on` é o foreground DERIVADO do accent
+        // (matcha-text-on); `accent-contrast` é legado e sempre preto, não serve.
+        // `background-color`, não `background`: ::selection só aceita um conjunto
+        // pequeno de propriedades, e a shorthand não é garantida.
+        &::selection,
+        & ::selection {
+            background-color: var(--matcha-color-accent);
+            color: var(--matcha-color-accent-text-on);
+        }
+
+        // `a[matcha-cell-link]` — a âncora que identifica um registro numa listagem
+        // (célula de tabela ou título de card). Global porque vale nas duas
+        // superfícies; o realce da LINHA no hover é específico da tabela e mora em
+        // components/matcha-table.scss.
+        //
+        // Por que âncora e não clique na linha/card inteiro: só com `href` o browser
+        // entrega ctrl+clique, clique do meio e "abrir em nova aba" — e restringir o
+        // alvo ao nome devolve a seleção de texto na listagem.
+        a[matcha-cell-link] {
+            display: inline-flex;
+            align-items: center;
+            gap: var(--matcha-space-50, 4px);
+            color: inherit;
+            text-decoration: none;
+            cursor: pointer;
+
+            // Affordance que não depende de cor (a11y) — o tom accent sozinho não
+            // serve pra quem não distingue cor.
+            &:hover {
+                text-decoration: underline;
+            }
+
+            &:focus-visible {
+                outline: 2px solid var(--matcha-color-accent);
+                outline-offset: 2px;
+                border-radius: var(--matcha-radius-sm, 2px);
+            }
+        }
     }
 }
 

package/components/matcha-form-field.scss

@@ -373,11 +373,13 @@ matcha-form-field[size="huge"] .matcha-form-field:has(input[type="search"])::aft
         caret-color: var(--matcha-color-primary);
     }
 
-    // Selection highlight (quando user seleciona texto) — usa token de primary com alpha
+    // Selection highlight (quando user seleciona texto) — mesmo par accent do
+    // ::selection global (base/_reset.scss). Era primary-alpha aqui e azul do SO no
+    // resto da app: duas cores de seleção diferentes na mesma tela.
     input::selection,
     textarea::selection {
-        background: var(--matcha-color-primary-alpha);
-        color: var(--matcha-color-text-primary);
+        background-color: var(--matcha-color-accent);
+        color: var(--matcha-color-accent-text-on);
     }
 
     // Componentes projetados — todos preenchem a largura e não adicionam borda/padding próprio

package/components/matcha-modal.scss

@@ -107,7 +107,7 @@
         justify-content: center;
         position: fixed;
         inset: 0;
-        z-index: 999;
+        z-index: var(--matcha-z-modal, 999);
 
         @include generate-matcha-modal-sizes-classes($helper-breakpoints);
 
@@ -123,7 +123,7 @@
     .matcha-modal-backdrop {
         position: fixed;
         inset: 0;
-        z-index: 998;
+        z-index: var(--matcha-z-modal-bg, 998);
         cursor: pointer;
         // Figma matcha/overlay Type=Modal: scrim 50% + blur 6px
         background: var(--matcha-scrim-modal, rgba(0, 0, 0, 0.5));
@@ -139,7 +139,7 @@
     // bg surface/card · radius 16 · shadow 8r@4y + 32r@12y · sem border.
     .matcha-modal {
         position: relative;
-        z-index: 999;
+        z-index: var(--matcha-z-modal, 999);
         display: flex;
         flex-direction: column;
         // Perf: contain layout/paint pra browser não recalcular reflow da page atrás.

package/components/matcha-nav.scss

@@ -61,6 +61,11 @@
   border: 0;
   background: transparent;
   cursor: pointer;
+  // O row é <a> quando o item tem [routerLink]/[href] — sem este reset a âncora
+  // traz sublinhado e a cor de link do browser. As demais regras já eram agnósticas
+  // de tag (border: 0, background: transparent atendiam o <button>).
+  text-decoration: none;
+  color: inherit;
   width: 100%;
   box-sizing: border-box;
   transition: background-color var(--matcha-duration-instant, 80ms) ease,

package/components/matcha-panel.scss

@@ -75,7 +75,8 @@
 // barra sem cortar texto (fica sob o padding do item). Escopado a menu porque
 // submenus são portados pro <body> (não são descendentes) — logo não são clipados;
 // select/autocomplete/calendar ficam intactos.
-.matcha-panel:has(> .matcha-menu-content) {
+.matcha-panel:has(> .matcha-menu-content),
+.matcha-panel:has(.matcha-select-options) {
     overflow-x: hidden;
 }
 

package/components/matcha-table.scss

@@ -12,7 +12,15 @@
 //
 // Companion directives (a11y automática):
 //   [matcha-table-sortable] em <th>  — aria-sort + tabindex + keyboard
-//   [rowClick] em <tr>              — só o binding já ativa tudo (tabindex + Enter/Space + hover accent)
+//   [rowClick] em <tr>              — AÇÃO na linha (abrir modal, selecionar). Só o
+//                                     binding já ativa tudo (tabindex + Enter/Space
+//                                     + hover accent na linha inteira)
+//
+// Navegação (leva pra outra página) NÃO é [rowClick]:
+//   <a matcha-cell-link [routerLink]> dentro do <td> — âncora de verdade, então
+//   ctrl+clique/clique do meio/botão direito funcionam e o resto da linha segue
+//   selecionável. Ponteiro e tom accent aparecem só sobre a âncora, pintando a linha
+//   inteira. Os dois no mesmo <tr> é proibido pelo canon (dois hovers competindo).
 //
 // Helpers CSS-only:
 //   td.numeric  → tabular-nums
@@ -75,6 +83,10 @@
     --matcha-table-row-bg-hover:             rgba(var(--matcha-color-fg), 0.12);
     --matcha-table-row-bg-hover-striped:     rgba(var(--matcha-color-fg), 0.18);
     --matcha-table-header-bg-hover:          rgba(var(--matcha-color-fg), 0.10);
+    // Hover da linha que NAVEGA: tom accent, disparado só quando o ponteiro está
+    // sobre a âncora da célula (ver "Row navegável" adiante). Fora dela a linha usa
+    // o hover neutro acima — é esse contraste que diz ao usuário onde clicar.
+    --matcha-table-row-bg-hover-accent:      var(--matcha-color-accent-surface-hover);
 
     // ── Sort indicator colors ─────────────────────────────────────────────
     // Inactive usa alpha 0.45 no foreground — claramente VISÍVEL como "ali tem
@@ -382,6 +394,36 @@
     // table-clickable-row.directive.ts) — nenhuma regra de tema necessária
     // aqui, o estilo inline já vence qualquer especificidade.
 
+    // ── Row navegável (`<a matcha-cell-link>` na célula) ───────────────────
+    // A linha que LEVA PRA OUTRA PÁGINA não é clicável inteira: quem navega é uma
+    // âncora de verdade na célula, pra que ctrl+clique, clique do meio e o menu do
+    // botão direito funcionem — e pra que o resto da linha continue selecionável
+    // com o mouse (com a linha toda clicável, não dava pra copiar texto da tabela).
+    //
+    // O feedback visual é o inverso do rowClick: ponteiro e tom accent aparecem só
+    // quando o mouse está sobre a âncora, e aí a linha INTEIRA pinta. Fora dela vale
+    // o hover neutro de sempre.
+    //
+    // Pinta via --matcha-table-cell-bg em TODOS os td da linha (mesmo caminho do
+    // hover normal), não com background-color no <tr>: em tabela striped o fundo
+    // mora no td, e um background no tr ficaria por baixo dele — o resultado seria
+    // uma célula colorida e o resto não.
+    //
+    // Depois das regras de striped de propósito: mesma especificidade, e ordem de
+    // origem decide. `:has()` já é usado em ~10 componentes do tema.
+    // O estilo BASE da âncora é global (base/_reset.scss) — ela também aparece em
+    // card de listagem, fora de qualquer tabela. Aqui fica só o que é da tabela: o
+    // realce da linha inteira.
+    a[matcha-cell-link]:focus-visible {
+      outline: var(--matcha-table-focus-ring-width) solid
+        var(--matcha-table-focus-ring-color);
+    }
+
+    tbody tr:has(a[matcha-cell-link]:hover) td,
+    tbody tr:has(a[matcha-cell-link]:focus-visible) td {
+      --matcha-table-cell-bg: var(--matcha-table-row-bg-hover-accent);
+    }
+
     tbody tr.is-selected td {
       --matcha-table-cell-bg: var(--matcha-table-row-bg-selected);
     }

package/components/matcha-toolbar.scss

@@ -23,14 +23,21 @@
   // ── CSS vars (single source of truth) ─────────────────────────────────
   matcha-toolbar {
     // Spacing — alinhado ao Figma DSV3 15866:92.
-    // Toolbar padding 16px simétrico, gap entre groups 12px (Figma Frame interno),
-    // gap interno de actions group 8px. Height 68 = 16+36+16.
+    // Toolbar padding 16px simétrico, gap UNICO de 8px (space-100), height 68 = 16+36+16.
+    //
+    // O gap entre groups era 12px (space-150) contra 8px dentro do actions, e isso
+    // produzia tres distancias diferentes na mesma barra: busca->icon-button 12px,
+    // icon-button->icon-button 8px, ultimo icon-button->CTA 8px. Unificado em 8px, que e
+    // o que o proprio canon do slot declara no topo deste arquivo ("flex gap-100") --
+    // gap-100 E 8px. Os 12px vinham do "Figma Frame interno", outra medida, e nao do slot.
+    // Conferir 15866:92 quando alguem abrir o frame; se o slot for 12, e este comentario
+    // que esta errado, nao o valor.
     // Consumer pode override per-side via --matcha-toolbar-padding-left/right.
     --matcha-toolbar-padding-y:        var(--matcha-space-200, 16px);
     --matcha-toolbar-padding-x:        var(--matcha-space-200, 16px);
     --matcha-toolbar-padding-left:     var(--matcha-toolbar-padding-x);
     --matcha-toolbar-padding-right:    var(--matcha-toolbar-padding-x);
-    --matcha-toolbar-gap:              var(--matcha-space-150, 12px);
+    --matcha-toolbar-gap:              var(--matcha-space-100, 8px);
     --matcha-toolbar-actions-gap:      var(--matcha-space-100, 8px);
     --matcha-toolbar-min-height:       68px;
 

package/package.json

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

package/tokens/_static-tokens.scss

@@ -86,7 +86,7 @@
   --matcha-z-dropdown: 100;
   --matcha-z-sticky: 200;
   --matcha-z-popover: 300;
-  --matcha-z-tooltip: 400;
+  --matcha-z-tooltip: 1001;
   --matcha-z-modal-bg: 998;
   --matcha-z-modal: 999;
   --matcha-z-overlay: 1000;