@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-option.scss

@@ -1,23 +1,33 @@
 // =============================================================================
-// matcha-option.scss — Dropdown option item
-// Aligned with Figma matcha/option (7 states, tokenized)
+// matcha-option.scss — Item selecionável (dropdowns, menus, drawer)
+// Aligned with Figma DSV3 matcha/option (7 estados, tokenized accent)
+// Node: 14237:113
 // =============================================================================
 
 // ── Structural (outside mixin) ──────────────────────────────────────────────
 
 .matcha-option {
-  // Figma matcha/option: pad 12/16, gap 16, h 44
+  // Figma matcha/option: pad 12/16, gap 16, min-height 48
   position: relative;
   display: flex;
   align-items: center;
   gap: var(--matcha-space-200, 16px);
   padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-  min-height: var(--matcha-option-height, 44px);
+  min-height: var(--matcha-option-height, 48px);
   box-sizing: border-box;
   cursor: pointer;
   border-radius: var(--matcha-radius-md, 4px);
   margin: var(--matcha-space-025, 2px) var(--matcha-space-050, 4px);
-  transition: background-color var(--matcha-duration-instant, 80ms) ease;
+  transition:
+    background-color var(--matcha-duration-instant, 80ms) ease,
+    box-shadow var(--matcha-duration-instant, 80ms) ease;
+
+  // Touch: força click imediato (sem aguardar 300ms de double-tap) e impede
+  // o browser de interpretar tap leve como scroll dentro de containers com
+  // overflow-y: auto (dropdowns, command-palette, autocomplete results).
+  // Sem isso, click em touchscreen e DevTools touch-emulation às vezes não
+  // chega no @HostListener('click') da matcha-option.
+  touch-action: manipulation;
 
   // Disabled — pointer/cursor only
   &[aria-disabled="true"],
@@ -39,57 +49,122 @@
     color: var(--matcha-color-text-primary);
     background: transparent;
 
-    // ── Hover — direto no background (sem state layer tipo 2021) ──
-    &:hover:not([aria-disabled="true"]):not([disabled]):not(.matcha-option-disabled) {
-      background: var(--matcha-color-surface-bg);
+    // ── Hover (não selected) — state-layer/hover 8% ──
+    &:hover:not([aria-disabled="true"]):not([disabled]):not(.matcha-option-disabled):not([aria-selected="true"]) {
+      background: color-mix(
+        in srgb,
+        var(--matcha-color-state-layer-fg) calc(var(--matcha-state-layer-hover, 0.08) * 100%),
+        transparent
+      );
     }
 
-    // ── Selected — tint primary + weight medium + inset marker lateral ──
+    // ── Selected — accent/alpha ──
     &[aria-selected="true"] {
-      background: var(--matcha-color-primary-surface-hover);
-      color: var(--matcha-color-primary);
+      background: var(--matcha-color-accent-alpha);
       font-weight: var(--matcha-weight-medium, 500);
 
-      // Hover sobre selected: intensifica o tint primary
+      // Hover sobre selected — accent/surface-hover (mais opaco)
       &:hover:not([aria-disabled="true"]) {
-        background: var(--matcha-color-primary-surface-pressed);
+        background: var(--matcha-color-accent-surface-hover);
       }
     }
 
     // ── Danger ──
     &.matcha-option--danger {
-      color: var(--matcha-color-danger, #{getDanger($theme)});
+      color: var(--matcha-color-danger);
 
       &:hover:not([aria-disabled="true"]) {
-        background: var(--matcha-color-danger-surface-hover, rgba(211, 47, 47, 0.08));
+        background: var(--matcha-color-danger-surface-hover);
       }
     }
 
-    // ── Disabled ──
+    // ── Disabled — Figma DSV3 matcha/option: opacity 0.5 (não 0.38 do token global) ──
+    // O componente Figma especifica 0.5 explicitamente — visualmente mais leve do que
+    // 0.38 do --matcha-opacity-disabled (Material 3 default). Mantemos fidelidade ao Figma.
     &[aria-disabled="true"],
     &[disabled],
     &.matcha-option-disabled {
       color: var(--matcha-color-interaction-disabled-fg);
-      opacity: var(--matcha-opacity-disabled, 0.38);
+      opacity: var(--matcha-opacity-option-disabled, 0.5);
       background: transparent;
     }
 
-    // ── Focus ring ──
+    // ── Focused — border 2px primary/default (Figma DSV3) sem deslocar layout ──
+    // outline-offset negativo simula border interno sem afetar box-sizing.
     &:focus-visible:not([aria-disabled="true"]):not([disabled]):not(.matcha-option-disabled) {
       outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+      outline-offset: calc(-1 * var(--matcha-state-focus-ring-width, 2px));
     }
 
     // ── Keyboard highlight (cursor de navegação, orthogonal a selected) ──
     // Aplicado pelo matcha-select ao navegar com ArrowUp/Down.
-    // Hover-like mas um pouco mais intenso pra destacar a posição atual.
     &.matcha-option-highlighted:not([aria-disabled="true"]):not([disabled]) {
-      background: var(--matcha-color-surface-hover);
+      background: color-mix(
+        in srgb,
+        var(--matcha-color-state-layer-fg) calc(var(--matcha-state-layer-hover, 0.08) * 100%),
+        transparent
+      );
 
-      // Combinado com selected: mantém tint primary + leve inset
+      // Combinado com selected: mantém tint accent + leve intensificação
       &[aria-selected="true"] {
-        background: var(--matcha-color-primary-surface-pressed);
+        background: var(--matcha-color-accent-surface-hover);
+      }
+    }
+
+    // ── Modo múltiplo (matcha-select-multiple) — checkbox à esquerda ──
+    // O realce do item marcado é o próprio checkbox; por isso o fundo
+    // accent/alpha do single-select é neutralizado quando não há hover/cursor.
+    &.matcha-option-multiple {
+      gap: var(--matcha-space-100, 8px);
+
+      &[aria-selected="true"]:not(:hover):not(.matcha-option-highlighted) {
+        background: transparent;
+      }
+
+      .matcha-option-checkbox {
+        display: inline-flex;
+        align-items: center;
+        // Checkbox é puramente visual: o clique cai no host matcha-option,
+        // que faz o toggle (tanto na opção quanto sobre o checkbox).
+        pointer-events: none;
       }
     }
   }
 }
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-option {
+        color: CanvasText !important;
+
+        &:hover:not(.is-disabled):not([disabled]) {
+            background: SelectedItem !important;
+            color: SelectedItemText !important;
+        }
+
+        &.is-active,
+        &[active],
+        &[aria-selected="true"] {
+            background: Highlight !important;
+            color: HighlightText !important;
+        }
+
+        &:focus-visible {
+            outline: 2px solid CanvasText !important;
+            outline-offset: -2px;
+        }
+
+        &.is-disabled,
+        &[disabled] {
+            color: GrayText !important;
+        }
+    }
+}
+
+// ── Print ──
+// Options são parte de UI interativa — não renderizam em papel.
+@media print {
+    matcha-option {
+        display: none !important;
+    }
+}

package/components/matcha-page-builder.scss

@@ -10,25 +10,25 @@
     min-height: 800px;
     width: 100%;
 
-    --gjs-main-color: #{getSurface($theme)};
-    --gjs-primary-color: #{getBackground($theme)};
-    --gjs-secondary-color: #{getBlueGrey($theme)};
-    --gjs-tertiary-color: #{getSurface($theme)};
-    --gjs-quaternary-color: #{getAccent($theme)};
-
-    --gjs-main-dark-color: #{getSurfaceAlpha($theme)};
-    --gjs-secondary-dark-color: #{getSurface($theme)};
-    --gjs-quaternary-dark-color: #{getAccentAlpha($theme)};
-
-    --gjs-font-color: #{getForeground($theme)};
-    --gjs-font-color-active: #{getForegroundAlpha($theme)};
+    --gjs-main-color: var(--matcha-color-surface);
+    --gjs-primary-color: var(--matcha-color-bg);
+    --gjs-secondary-color: var(--matcha-color-text-hint);
+    --gjs-tertiary-color: var(--matcha-color-surface);
+    --gjs-quaternary-color: var(--matcha-color-accent);
+
+    --gjs-main-dark-color: var(--matcha-color-surface-card-alpha);
+    --gjs-secondary-dark-color: var(--matcha-color-surface);
+    --gjs-quaternary-dark-color: var(--matcha-color-accent-alpha);
+
+    --gjs-font-color: var(--matcha-color-fg);
+    --gjs-font-color-active: var(--matcha-color-fg-alpha);
     --gjs-main-light-color: rgba(255, 255, 255, 0.1);
     --gjs-secondary-light-color: rgba(255, 255, 255, 0.7);
     --gjs-soft-light-color: rgba(255, 255, 255, 0.015);
-    --gjs-color-blue: #{getBlue($theme)};
-    --gjs-color-red: #{getRed($theme)};
-    --gjs-color-yellow: #{getYellow($theme)};
-    --gjs-color-green: #{getGreen($theme)};
+    --gjs-color-blue: var(--matcha-prim-blue-700);
+    --gjs-color-red: var(--matcha-color-danger);
+    --gjs-color-yellow: var(--matcha-prim-yellow-500);
+    --gjs-color-green: var(--matcha-color-success);
     --gjs-left-width: 15%;
     --gjs-color-highlight: #71b7f1;
     --gjs-color-warn: #ffca6f;