@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-calendar.scss

@@ -7,47 +7,43 @@
 // =========================================================
 
 @mixin matcha-calendar-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
   .matcha-calendar {
-    background: var(--matcha-color-surface-card, var(--matcha-color-surface, #{getSurface($theme)}));
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
-    box-shadow: var(--matcha-shadow-2, #{if($is-dark, $shadow-2-dark, $shadow-2-light)});
-
-    @if $is-dark {
-      border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
-    }
+    background: var(--matcha-color-surface-card, var(--matcha-color-surface));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
+    box-shadow: var(--matcha-shadow-2);
+    // Borda só-no-dark vira valor por modo (light = 0/transparent).
+    border: var(--matcha-calendar-border);
   }
 
   // ── Header ──────────────────────────────────────────────
   .matcha-calendar-header-label {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
     &:hover {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));
     }
 
     &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
       outline-offset: var(--matcha-state-focus-ring-offset, 2px);
     }
   }
 
   .matcha-calendar-nav-btn {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
     &:hover:not(:disabled):not(.is-disabled) {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));
     }
 
     &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
       outline-offset: var(--matcha-state-focus-ring-offset, 2px);
     }
 
     &[disabled],
     &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
     }
   }
 
@@ -57,48 +53,54 @@
   }
 
   .matcha-calendar-divider {
-    background: var(--matcha-color-surface-border, var(--matcha-color-border, #{getGrey($theme)}));
+    background: var(--matcha-color-surface-border, var(--matcha-color-border));
   }
 
   // ── Day cells (Month view) ──────────────────────────────
   .matcha-calendar-cell {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
     &:hover:not(.is-disabled):not(.is-selected):not(.is-range-start):not(.is-range-end) {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));
     }
 
     &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
       outline-offset: -2px;
     }
 
     // Today: ring accent (sem fill)
     &.is-today:not(.is-selected):not(.is-range-start):not(.is-range-end) {
-      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
     }
 
     // In-range (exclusive): pill individual com accent-alpha
     &.is-in-range:not(.is-selected):not(.is-range-start):not(.is-range-end) {
-      background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      background-color: var(--matcha-color-accent-alpha);
+    }
+
+    // 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));
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
     }
 
-    // Selected / range start / range end: fill accent + contrast
-    &.is-selected,
+    // 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)});
-      color: var(--matcha-color-accent-contrast, getAccentContrast($theme));
+      background-color: var(--matcha-color-accent);
+      color: var(--matcha-color-accent-contrast);
       font-weight: var(--matcha-weight-semibold, 600);
       box-shadow: none;
     }
 
     &.is-other-month {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
     }
 
     &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
       background-color: transparent;
       box-shadow: none;
     }
@@ -106,49 +108,111 @@
 
   // ── Grid views (Year / Decade) ──────────────────────────
   .matcha-calendar-grid-cell {
-    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg));
 
     &:hover:not(.is-disabled):not(.is-selected) {
       background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.08));
     }
 
     &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
       outline-offset: -2px;
     }
 
     &.is-today:not(.is-selected) {
-      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
     }
 
     &.is-selected {
-      background-color: var(--matcha-color-accent, #{getAccent($theme)});
-      color: var(--matcha-color-accent-contrast, getAccentContrast($theme));
+      background-color: var(--matcha-color-accent);
+      color: var(--matcha-color-accent-contrast);
       font-weight: var(--matcha-weight-semibold, 600);
       box-shadow: none;
     }
 
     &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
     }
   }
 
   // ── Footer (botão Hoje) ─────────────────────────────────
   .matcha-calendar-today-btn {
-    color: var(--matcha-color-accent, #{getAccent($theme)});
+    color: var(--matcha-color-accent);
 
     &:hover:not(:disabled):not(.is-disabled) {
-      background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+      background-color: var(--matcha-color-accent-alpha);
     }
 
     &:focus-visible {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
       outline-offset: 2px;
     }
 
     &[disabled],
     &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-interaction-disabled-fg);
+    }
+  }
+}
+
+// ── 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

@@ -6,7 +6,6 @@
 // =============================================================================
 
 @mixin matcha-cards-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     matcha-card,
     .matcha-card,
@@ -14,93 +13,97 @@
 
         // ── Default: surface ──
         &:not([color]) {
-            background-color: var(--matcha-color-surface, #{getSurface($theme)});
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            background-color: var(--matcha-color-surface);
+            color: var(--matcha-color-fg);
         }
 
         // ── Semantic colors ──
         &[color="surface"] {
-            background-color: var(--matcha-color-surface, #{getSurface($theme)});
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            background-color: var(--matcha-color-surface);
+            color: var(--matcha-color-fg);
         }
 
         &[color="bg"] {
-            background-color: var(--matcha-color-bg, #{getBackground($theme)});
-            color: var(--matcha-color-fg, #{getForeground($theme)});
+            background-color: var(--matcha-color-bg);
+            color: var(--matcha-color-fg);
         }
 
         &[color="accent"] {
-            background-color: var(--matcha-color-accent, #{getAccent($theme)});
-            color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+            background-color: var(--matcha-color-accent);
+            color: var(--matcha-color-accent-contrast);
         }
 
         &[color="primary"] {
-            background-color: var(--matcha-color-primary, #{getPrimary($theme)});
-            color: var(--matcha-color-primary-contrast, #{getPrimaryContrast($theme)});
+            background-color: var(--matcha-color-primary);
+            color: var(--matcha-color-primary-contrast);
         }
 
         &[color="danger"] {
-            background-color: var(--matcha-color-danger, #{getDanger($theme)});
-            color: var(--matcha-color-danger-contrast, #{getDangerContrast($theme)});
+            background-color: var(--matcha-color-danger);
+            color: var(--matcha-color-danger-contrast);
         }
 
         // ── Alpha modifier ──
         &[alpha]:not([alpha="false"]) {
             &[color="accent"] {
-                background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-accent-alpha);
+                color: var(--matcha-color-fg);
             }
             &[color="primary"] {
-                background-color: var(--matcha-color-primary-alpha, #{getPrimaryAlpha($theme)});
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-primary-alpha);
+                color: var(--matcha-color-fg);
             }
             &[color="danger"] {
-                background-color: var(--matcha-color-danger-alpha, #{getDangerAlpha($theme)});
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-danger-alpha);
+                color: var(--matcha-color-fg);
             }
+            // Figma DSV3: alpha + color=surface usa surface-bg (#111318), não surface-alpha.
             &[color="surface"] {
-                background-color: #{getSurfaceAlpha($theme)};
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-surface-bg);
+                color: var(--matcha-color-fg);
             }
             &[color="bg"] {
-                background-color: #{getBackgroundAlpha($theme)};
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                background-color: var(--matcha-color-surface-bg-alpha);
+                color: var(--matcha-color-fg);
             }
         }
 
         // ── 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)});
+                color: var(--matcha-color-fg);
             }
         }
 
         // ── Tint modifier ──
         &[tint]:not([tint="false"]) {
             &[color="accent"] {
-                background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-                color: var(--matcha-color-accent, #{getAccent($theme)});
+                background-color: var(--matcha-color-accent-alpha);
+                color: var(--matcha-color-accent);
             }
             &[color="primary"] {
-                background-color: var(--matcha-color-primary-alpha, #{getPrimaryAlpha($theme)});
-                color: var(--matcha-color-primary, #{getPrimary($theme)});
+                background-color: var(--matcha-color-primary-alpha);
+                color: var(--matcha-color-primary);
             }
             &[color="danger"] {
-                background-color: var(--matcha-color-danger-alpha, #{getDangerAlpha($theme)});
-                color: var(--matcha-color-danger, #{getDanger($theme)});
+                background-color: var(--matcha-color-danger-alpha);
+                color: var(--matcha-color-danger);
             }
         }
 
         // ── Basic modifier ──
         &[basic]:not([basic="false"]) {
             box-shadow: none;
-            background-color: var(--matcha-color-surface, #{getSurface($theme)});
+            background-color: var(--matcha-color-surface);
 
             &:not([color]) {
-                color: var(--matcha-color-fg, #{getForeground($theme)});
+                color: var(--matcha-color-fg);
             }
         }
 
@@ -203,3 +206,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;
+    }
+}

package/components/matcha-chart-card.scss

@@ -8,22 +8,15 @@
 // =============================================================================
 
 @mixin matcha-chart-card-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
   .matcha-chart-card {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    box-shadow: var(--matcha-shadow-1,
-      0 2px 12px rgba(0, 0, 0, if($is-dark, 0.3, 0.06)),
-      0 0 4px rgba(0, 0, 0, if($is-dark, 0.2, 0.04))
-    );
-
-    @if $is-dark {
-      border: var(--matcha-border-hairline, 1px) solid rgba(#212121, 0.06); // ok: structural
-    }
+    background: var(--matcha-color-surface);
+    box-shadow: var(--matcha-shadow-1);
+    // Borda só-no-dark vira valor por modo (light = 0/transparent, sem mudar layout).
+    border: var(--matcha-chart-card-border);
   }
 
   .matcha-chart-card__accent {
-    background: var(--matcha-color-accent, #{getAccent($theme)});
+    background: var(--matcha-color-accent);
   }
 }