@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-calendar.scss

@@ -83,8 +83,14 @@
       background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
     }
 
-    // Selected / range start / range end: fill accent + contrast
-    &.is-selected,
+    // Selected single (Figma: outlined accent, NÃO filled — preserva text-primary)
+    &.is-selected:not(.is-range-start):not(.is-range-end) {
+      background-color: transparent;
+      color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    // Range anchors (start/end): filled accent — destaque visual dos pontos do range
     &.is-range-start,
     &.is-range-end {
       background-color: var(--matcha-color-accent, #{getAccent($theme)});
@@ -152,3 +158,65 @@
     }
   }
 }
+
+// ── Forced colors (Windows High Contrast) ──
+// Calendar tem muitos estados (selected, today, disabled) — todos precisam
+// distinção visível via system tokens.
+@media (forced-colors: active) {
+  matcha-calendar {
+    border: 1px solid CanvasText;
+    background: Canvas;
+
+    .matcha-calendar-day-cell {
+      border: 1px solid transparent;
+
+      &.is-selected {
+        background: Highlight !important;
+        color: HighlightText !important;
+        border-color: HighlightText;
+      }
+
+      // Today — outlined (não usa Highlight pra não confundir com selected)
+      &.is-today:not(.is-selected) {
+        border-color: CanvasText !important;
+      }
+
+      &.is-disabled,
+      &[disabled] {
+        color: GrayText !important;
+      }
+
+      &:focus-visible {
+        outline: 2px solid CanvasText !important;
+        outline-offset: -2px;
+      }
+    }
+
+    .matcha-calendar-today-btn:focus-visible {
+      outline: 2px solid CanvasText !important;
+    }
+  }
+}
+
+// ── Reduced motion ──
+// Calendar tem transitions em hover/select e nav arrows.
+@media (prefers-reduced-motion: reduce) {
+  matcha-calendar {
+    *,
+    *::before,
+    *::after {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+}
+
+// ── Print ──
+// Calendar é informacional — mantém visível, sem shadow + break-inside avoid.
+@media print {
+  matcha-calendar {
+    box-shadow: none !important;
+    border: 1px solid currentColor;
+    break-inside: avoid;
+  }
+}

package/components/matcha-cards.scss

@@ -58,8 +58,9 @@
                 background-color: var(--matcha-color-danger-alpha, #{getDangerAlpha($theme)});
                 color: var(--matcha-color-fg, #{getForeground($theme)});
             }
+            // Figma DSV3: alpha + color=surface usa surface-bg (#111318), não surface-alpha.
             &[color="surface"] {
-                background-color: #{getSurfaceAlpha($theme)};
+                background-color: var(--matcha-color-surface-bg, #{getBackground($theme)});
                 color: var(--matcha-color-fg, #{getForeground($theme)});
             }
             &[color="bg"] {
@@ -69,9 +70,12 @@
         }
 
         // ── Outline modifier ──
+        // Figma DSV3: border 1px surface-border (rgba 255,255,255,0.12 dark).
+        // Antes era `inset 2px currentColor` — divergia da spec e ficava grosso demais.
         &[outline]:not([outline="false"]) {
             background: transparent;
-            box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) currentColor;
+            border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
+            box-shadow: none;
 
             &:not([color]) {
                 color: var(--matcha-color-fg, #{getForeground($theme)});
@@ -203,3 +207,25 @@ matcha-card,
         }
     }
 }
+
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+    matcha-card,
+    .matcha-card,
+    .matcha-card-flat {
+        border: 1px solid CanvasText !important;
+        background: Canvas !important;
+        box-shadow: none !important;
+    }
+}
+
+// ── Print ──
+// Cards visíveis (contêm conteúdo), sem shadow + break-inside avoid.
+@media print {
+    matcha-card,
+    .matcha-card,
+    .matcha-card-flat {
+        box-shadow: none !important;
+        break-inside: avoid;
+    }
+}