@inchurch/matcha-theme 22.38.2 → 22.38.3

package/components/matcha-calendar.scss

@@ -1,253 +1,253 @@
-@use "sass:map";
-
-// =========================================================
-// Matcha Calendar — somente cores/sombras/bordas (tema)
-// Estrutura (layout, tamanhos, transitions) vive em
-// matcha-components/src/lib/matcha-calendar/calendar/matcha-calendar.component.scss
-// =========================================================
-
-@mixin matcha-calendar-theme($theme) {
-  .matcha-calendar {
-    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 ──────────────────────────────────────────────
-  // Fundo accent-alpha em repouso (não só no hover) — sinaliza de cara que o
-  // label do mês/ano é clicável (abre view ano/década), não só um título.
-  // Seletor com o pai (.matcha-calendar-header) — precisa de +especificidade
-  // que o próprio `all: unset` da célula, que carrega DEPOIS (CSS de
-  // componente ViewEncapsulation.None sempre entra depois do CSS global do
-  // tema) e tem a mesma especificidade se for só a classe sozinha.
-  .matcha-calendar-header .matcha-calendar-header-label {
-    color: var(--matcha-color-accent);
-    background-color: var(--matcha-color-accent-alpha);
-
-    &: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);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-  }
-
-  .matcha-calendar-nav-btn {
-    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);
-      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-    }
-
-    &[disabled],
-    &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg);
-    }
-  }
-
-  // ── Weekday + Divider ───────────────────────────────────
-  .matcha-calendar-weekday {
-    color: var(--matcha-color-text-secondary, rgba(255, 255, 255, 0.7));
-  }
-
-  .matcha-calendar-divider {
-    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));
-
-    &: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);
-      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);
-    }
-
-    // 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);
-    }
-
-    // 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);
-    }
-
-    // Range anchors (start/end): filled accent — destaque visual dos pontos do range
-    &.is-range-start,
-    &.is-range-end {
-      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);
-    }
-
-    &.is-disabled {
-      color: var(--matcha-color-interaction-disabled-fg);
-      background-color: transparent;
-      box-shadow: none;
-    }
-
-    // Marcador de dia (dot). is-selected é outlined (não filled, ver acima) então
-    // convive sem ajuste; range anchors SÃO filled com --matcha-color-accent — mesma
-    // cor invisibilizaria o dot, por isso o contraste-swap abaixo.
-    &.is-marked::after {
-      background-color: var(--matcha-color-calendar-marker-bg, var(--matcha-color-accent));
-    }
-
-    &.is-range-start.is-marked::after,
-    &.is-range-end.is-marked::after {
-      background-color: var(--matcha-color-calendar-marker-contrast-bg, var(--matcha-color-accent-contrast));
-      box-shadow: 0 0 0 1px var(--matcha-color-accent);
-    }
-
-    &.is-disabled.is-marked::after,
-    &.is-other-month.is-marked::after {
-      background-color: var(--matcha-color-interaction-disabled-fg);
-    }
-  }
-
-  // ── Grid views (Year / Decade) ──────────────────────────
-  .matcha-calendar-grid-cell {
-    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);
-      outline-offset: -2px;
-    }
-
-    &.is-today:not(.is-selected) {
-      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
-    }
-
-    &.is-selected {
-      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);
-    }
-  }
-
-  // ── Footer (botão Hoje) ─────────────────────────────────
-  .matcha-calendar-today-btn {
-    color: var(--matcha-color-accent);
-
-    &:hover:not(:disabled):not(.is-disabled) {
-      background-color: var(--matcha-color-accent-alpha);
-    }
-
-    &:focus-visible {
-      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);
-    }
-  }
-}
-
-// ── 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-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;
-      }
-
-      &.is-marked::after {
-        background: CanvasText !important;
-        forced-color-adjust: none;
-      }
-
-      &: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;
-
-    .matcha-calendar-cell.is-marked::after {
-      background: CanvasText;
-      box-shadow: none;
-    }
-  }
-}
+@use "sass:map";
+
+// =========================================================
+// Matcha Calendar — somente cores/sombras/bordas (tema)
+// Estrutura (layout, tamanhos, transitions) vive em
+// matcha-components/src/lib/matcha-calendar/calendar/matcha-calendar.component.scss
+// =========================================================
+
+@mixin matcha-calendar-theme($theme) {
+  .matcha-calendar {
+    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 ──────────────────────────────────────────────
+  // Fundo accent-alpha em repouso (não só no hover) — sinaliza de cara que o
+  // label do mês/ano é clicável (abre view ano/década), não só um título.
+  // Seletor com o pai (.matcha-calendar-header) — precisa de +especificidade
+  // que o próprio `all: unset` da célula, que carrega DEPOIS (CSS de
+  // componente ViewEncapsulation.None sempre entra depois do CSS global do
+  // tema) e tem a mesma especificidade se for só a classe sozinha.
+  .matcha-calendar-header .matcha-calendar-header-label {
+    color: var(--matcha-color-accent);
+    background-color: var(--matcha-color-accent-alpha);
+
+    &: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);
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+  }
+
+  .matcha-calendar-nav-btn {
+    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);
+      outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+
+    &[disabled],
+    &.is-disabled {
+      color: var(--matcha-color-interaction-disabled-fg);
+    }
+  }
+
+  // ── Weekday + Divider ───────────────────────────────────
+  .matcha-calendar-weekday {
+    color: var(--matcha-color-text-secondary, rgba(255, 255, 255, 0.7));
+  }
+
+  .matcha-calendar-divider {
+    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));
+
+    &: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);
+      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);
+    }
+
+    // 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);
+    }
+
+    // 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);
+    }
+
+    // Range anchors (start/end): filled accent — destaque visual dos pontos do range
+    &.is-range-start,
+    &.is-range-end {
+      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);
+    }
+
+    &.is-disabled {
+      color: var(--matcha-color-interaction-disabled-fg);
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    // Marcador de dia (dot). is-selected é outlined (não filled, ver acima) então
+    // convive sem ajuste; range anchors SÃO filled com --matcha-color-accent — mesma
+    // cor invisibilizaria o dot, por isso o contraste-swap abaixo.
+    &.is-marked::after {
+      background-color: var(--matcha-color-calendar-marker-bg, var(--matcha-color-accent));
+    }
+
+    &.is-range-start.is-marked::after,
+    &.is-range-end.is-marked::after {
+      background-color: var(--matcha-color-calendar-marker-contrast-bg, var(--matcha-color-accent-contrast));
+      box-shadow: 0 0 0 1px var(--matcha-color-accent);
+    }
+
+    &.is-disabled.is-marked::after,
+    &.is-other-month.is-marked::after {
+      background-color: var(--matcha-color-interaction-disabled-fg);
+    }
+  }
+
+  // ── Grid views (Year / Decade) ──────────────────────────
+  .matcha-calendar-grid-cell {
+    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);
+      outline-offset: -2px;
+    }
+
+    &.is-today:not(.is-selected) {
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent);
+    }
+
+    &.is-selected {
+      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);
+    }
+  }
+
+  // ── Footer (botão Hoje) ─────────────────────────────────
+  .matcha-calendar-today-btn {
+    color: var(--matcha-color-accent);
+
+    &:hover:not(:disabled):not(.is-disabled) {
+      background-color: var(--matcha-color-accent-alpha);
+    }
+
+    &:focus-visible {
+      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);
+    }
+  }
+}
+
+// ── 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-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;
+      }
+
+      &.is-marked::after {
+        background: CanvasText !important;
+        forced-color-adjust: none;
+      }
+
+      &: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;
+
+    .matcha-calendar-cell.is-marked::after {
+      background: CanvasText;
+      box-shadow: none;
+    }
+  }
+}