@inchurch/matcha-theme 22.30.1 → 22.31.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-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-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/package.json

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