@inchurch/matcha-theme 22.32.1 → 22.33.0

package/components/matcha-chip.scss

@@ -46,16 +46,26 @@ matcha-chip {
     &[interactive]:not([disabled]):not(.matcha-chip-disabled) {
         cursor: pointer;
 
-        // Off interactive — Hover (bg accent-alpha 10% + shadow-1) ──
+        // Off interactive — Hover: OVERLAY, nao troca de fundo ──
+        // `background-image` em vez de `background`: o chip pode ter fundo proprio
+        // (variant filled/filled-alpha, ou uma cor semantica), e trocar o `background`
+        // apagava esse fundo. Como esta regra tem especificidade MAIOR que a do mixin de
+        // cor (elemento + 2 atributos + pseudo-classe contra elemento + 2 atributos), um
+        // chip azul preenchido virava fundo verde-claro mantendo o texto branco do
+        // *-contrast — ilegivel. O overlay escurece o que estiver embaixo, seja qual for.
         &:not([selected]):hover {
-            background: var(--matcha-color-accent-alpha, rgba(168, 217, 78, 0.1));
+            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));
             box-shadow: var(--matcha-shadow-1);
         }
 
-        // Off interactive — Focus (border vira primary) ──
+        // Off interactive — Focus: anel, nao recolorir a borda ──
+        // A borda do chip carrega a COR dele; pintar de primary no foco apagava essa
+        // informacao e ficava errado em qualquer cor que nao fosse primary. O outline
+        // desenha por fora, sem disputar.
         &:not([selected]):focus-visible,
         &:not([selected]):has(:focus-visible) {
-            border-color: var(--matcha-color-primary, #64B5F6);
+            outline:        var(--matcha-border-thin, 2px) solid var(--matcha-color-primary, #64B5F6);
+            outline-offset: var(--matcha-space-025, 2px);
         }
     }
 
@@ -75,10 +85,11 @@ matcha-chip {
             box-shadow: var(--matcha-shadow-1);
         }
 
-        // On interactive — Focus (border vira primary, bg permanece accent) ──
+        // On interactive — Focus: anel por fora, bg e borda permanecem accent ──
         &[interactive]:not([disabled]):not(.matcha-chip-disabled):focus-visible,
         &[interactive]:not([disabled]):not(.matcha-chip-disabled):has(:focus-visible) {
-            border-color: var(--matcha-color-primary, #64B5F6);
+            outline:        var(--matcha-border-thin, 2px) solid var(--matcha-color-primary, #64B5F6);
+            outline-offset: var(--matcha-space-025, 2px);
         }
     }
 
@@ -209,7 +220,11 @@ matcha-chip .matcha-chip-remove [class*=" i-matcha-"] {
 
 @mixin matcha-chip-theme($theme) {
     // Cores semânticas além de accent — var(--matcha-color-*), sem getters/$theme.
-    $chip-colors: primary, success, warn, danger, info;
+    // `accent` entra na lista como qualquer outra cor. Isso só é seguro porque o default do
+    // input `color` virou 'basic': quem não pede cor nenhuma continua no estilo base (outline
+    // text-hint), e o bloco de accent só alcança quem escreveu `color="accent"`. Enquanto o
+    // default era accent, esta mesma linha pintaria TODO chip do painel de verde.
+    $chip-colors: accent, primary, success, warn, danger, info;
 
     matcha-chip {
         @each $name in $chip-colors {
@@ -228,10 +243,14 @@ matcha-chip .matcha-chip-remove [class*=" i-matcha-"] {
                 &[variant="filled"] {
                     background-color: var(--matcha-color-#{$name});
                     border-color:     var(--matcha-color-#{$name});
-                    color:            var(--matcha-color-#{$name}-contrast);
+                    // `-text-on` antes de `-contrast`: em accent o contrast é LEGADO e sempre
+                    // preto, o que no tema claro (accent = verde escuro) fica ilegível. O
+                    // `-text-on` é theme-aware e é o que o ramo [selected] da base já usa.
+                    // As outras cores não têm `-text-on` e caem no fallback, como antes.
+                    color:            var(--matcha-color-#{$name}-text-on, var(--matcha-color-#{$name}-contrast));
 
                     .matcha-chip-leading {
-                        color: var(--matcha-color-#{$name}-contrast);
+                        color: var(--matcha-color-#{$name}-text-on, var(--matcha-color-#{$name}-contrast));
                     }
                 }
 

package/components/matcha-select.scss

@@ -233,96 +233,21 @@
   // Multi-select — chips dentro do trigger
   // ═══════════════════════════════════════════════════════════════════════
 
-  // Container dos chips (substitui .matcha-select-value quando multiple=true)
-  .matcha-select-chips {
-    flex: 1;
+  // Lista de chips FORA da caixa. O chip em si é o matcha-chip (atômico) — aqui só o
+  // empilhamento. As ~95 linhas que desenhavam um chip de 22px próprio saíram: existiam
+  // porque o atômico (36px) não cabia DENTRO da caixa, e os chips deixaram de ficar lá.
+  .matcha-select-chip-list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--matcha-space-050, 4px);
-    min-width: 0;
-    overflow: hidden;
+    gap: var(--matcha-space-075, 6px);
+    margin-top: var(--matcha-space-100, 8px);
   }
 
-  // Trigger em modo multi precisa de padding vertical leve pras chips respirarem
-  // e altura automática (cresce com número de chips).
-  .matcha-select-trigger.matcha-select-multiple {
-    padding-top: var(--matcha-space-025, 2px);
-    padding-bottom: var(--matcha-space-025, 2px);
-    min-height: inherit;
-    flex-wrap: nowrap;
-  }
 
-  // Chip individual — pill pequeno com label + × remove
-  .matcha-select-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--matcha-space-050, 4px);
-    max-width: 100%;
-    height: 22px;
-    padding: 0 var(--matcha-space-075, 6px);
-    background: var(--matcha-color-accent-2-surface, rgba(0,0,0,0.08));
-    color: var(--matcha-color-text-primary);
-    border-radius: var(--matcha-radius-pill, 12px);
-    font-family: var(--matcha-font-family);
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 1;
-    letter-spacing: 0.1px;
-    white-space: nowrap;
-    user-select: none;
-  }
-
-  // Label do chip (trunca com ellipsis em chips longos)
-  .matcha-select-chip-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 160px;
-  }
-
-  // Botão × individual de cada chip
-  .matcha-select-chip-remove {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 14px;
-    height: 14px;
-    padding: 0;
-    margin: 0;
-    background: transparent;
-    border: 0;
-    border-radius: 50%;
-    color: var(--matcha-color-text-placeholder);
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 14px;
-    transition: background-color var(--matcha-duration-instant, 80ms) ease,
-                color           var(--matcha-duration-instant, 80ms) ease;
 
-    &:hover {
-      background: var(--matcha-color-surface-hover, rgba(0,0,0,0.12));
-      color: var(--matcha-color-text-primary);
-    }
 
-    &:focus { outline: none; }
-    &:focus-visible {
-      outline: var(--matcha-border-thin, 2px) solid var(--matcha-color-primary);
-      outline-offset: 1px;
-    }
-  }
 
-  // Chip sizes acompanham o size do form-field (opcional — mantém SM como default)
-  matcha-form-field[size="md"] matcha-select .matcha-select-chip,
-  matcha-form-field[size="medium"] matcha-select .matcha-select-chip {
-    height: 24px;
-    font-size: 13px;
-  }
-  matcha-form-field[size="lg"] matcha-select .matcha-select-chip,
-  matcha-form-field[size="large"] matcha-select .matcha-select-chip {
-    height: 28px;
-    font-size: 14px;
-  }
 
   // ═══════════════════════════════════════════════════════════════════════
   // Multi-select panel — checkmark + bulk actions header

package/package.json

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