@inchurch/matcha-theme 20.0.3

package/components/matcha-option.scss

@@ -0,0 +1,95 @@
+// =============================================================================
+// matcha-option.scss — Dropdown option item
+// Aligned with Figma matcha/option (7 states, tokenized)
+// =============================================================================
+
+// ── Structural (outside mixin) ──────────────────────────────────────────────
+
+.matcha-option {
+  // Figma matcha/option: pad 12/16, gap 16, h 44
+  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);
+  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;
+
+  // Disabled — pointer/cursor only
+  &[aria-disabled="true"],
+  &[disabled],
+  &.matcha-option-disabled {
+    pointer-events: none;
+    cursor: default;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+// ── Theme mixin ─────────────────────────────────────────────────────────────
+
+@mixin matcha-option-theme($theme) {
+  .matcha-option {
+    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);
+    }
+
+    // ── Selected — tint primary + weight medium + inset marker lateral ──
+    &[aria-selected="true"] {
+      background: var(--matcha-color-primary-surface-hover);
+      color: var(--matcha-color-primary);
+      font-weight: var(--matcha-weight-medium, 500);
+
+      // Hover sobre selected: intensifica o tint primary
+      &:hover:not([aria-disabled="true"]) {
+        background: var(--matcha-color-primary-surface-pressed);
+      }
+    }
+
+    // ── Danger ──
+    &.matcha-option--danger {
+      color: var(--matcha-color-danger, #{getDanger($theme)});
+
+      &:hover:not([aria-disabled="true"]) {
+        background: var(--matcha-color-danger-surface-hover, rgba(211, 47, 47, 0.08));
+      }
+    }
+
+    // ── Disabled ──
+    &[aria-disabled="true"],
+    &[disabled],
+    &.matcha-option-disabled {
+      color: var(--matcha-color-interaction-disabled-fg);
+      opacity: var(--matcha-opacity-disabled, 0.38);
+      background: transparent;
+    }
+
+    // ── Focus ring ──
+    &: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);
+    }
+
+    // ── 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);
+
+      // Combinado com selected: mantém tint primary + leve inset
+      &[aria-selected="true"] {
+        background: var(--matcha-color-primary-surface-pressed);
+      }
+    }
+  }
+}