@inchurch/matcha-theme 20.0.3

package/components/matcha-calendar.scss

@@ -0,0 +1,154 @@
+@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) {
+  $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));
+    }
+  }
+
+  // ── Header ──────────────────────────────────────────────
+  .matcha-calendar-header-label {
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+
+    &: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-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+  }
+
+  .matcha-calendar-nav-btn {
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+
+    &: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-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+
+    &[disabled],
+    &.is-disabled {
+      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+    }
+  }
+
+  // ── 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, #{getGrey($theme)}));
+  }
+
+  // ── Day cells (Month view) ──────────────────────────────
+  .matcha-calendar-cell {
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+
+    &: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-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)});
+    }
+
+    // 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)});
+    }
+
+    // Selected / range start / range end: fill accent + contrast
+    &.is-selected,
+    &.is-range-start,
+    &.is-range-end {
+      background-color: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent-contrast, getAccentContrast($theme));
+      font-weight: var(--matcha-weight-semibold, 600);
+      box-shadow: none;
+    }
+
+    &.is-other-month {
+      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+    }
+
+    &.is-disabled {
+      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  // ── Grid views (Year / Decade) ──────────────────────────
+  .matcha-calendar-grid-cell {
+    color: var(--matcha-color-text-primary, var(--matcha-color-fg, #{getForeground($theme)}));
+
+    &: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-offset: -2px;
+    }
+
+    &.is-today:not(.is-selected) {
+      box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) var(--matcha-color-accent, #{getAccent($theme)});
+    }
+
+    &.is-selected {
+      background-color: var(--matcha-color-accent, #{getAccent($theme)});
+      color: var(--matcha-color-accent-contrast, getAccentContrast($theme));
+      font-weight: var(--matcha-weight-semibold, 600);
+      box-shadow: none;
+    }
+
+    &.is-disabled {
+      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+    }
+  }
+
+  // ── Footer (botão Hoje) ─────────────────────────────────
+  .matcha-calendar-today-btn {
+    color: var(--matcha-color-accent, #{getAccent($theme)});
+
+    &:hover:not(:disabled):not(.is-disabled) {
+      background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+    }
+
+    &:focus-visible {
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+      outline-offset: 2px;
+    }
+
+    &[disabled],
+    &.is-disabled {
+      color: var(--matcha-color-interaction-disabled-fg, #{getDisabledContrast($theme)});
+    }
+  }
+}

package/components/matcha-cards.scss

@@ -0,0 +1,205 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-cards.scss — Card container (surface, outline, alpha, blockquote)
+// Aligned with Figma matcha/card: Tipo(3) × Direção(2) = 6 variants
+// =============================================================================
+
+@mixin matcha-cards-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    matcha-card,
+    .matcha-card,
+    .matcha-card-flat {
+
+        // ── Default: surface ──
+        &:not([color]) {
+            background-color: var(--matcha-color-surface, #{getSurface($theme)});
+            color: var(--matcha-color-fg, #{getForeground($theme)});
+        }
+
+        // ── Semantic colors ──
+        &[color="surface"] {
+            background-color: var(--matcha-color-surface, #{getSurface($theme)});
+            color: var(--matcha-color-fg, #{getForeground($theme)});
+        }
+
+        &[color="bg"] {
+            background-color: var(--matcha-color-bg, #{getBackground($theme)});
+            color: var(--matcha-color-fg, #{getForeground($theme)});
+        }
+
+        &[color="accent"] {
+            background-color: var(--matcha-color-accent, #{getAccent($theme)});
+            color: var(--matcha-color-accent-contrast, #{getAccentContrast($theme)});
+        }
+
+        &[color="primary"] {
+            background-color: var(--matcha-color-primary, #{getPrimary($theme)});
+            color: var(--matcha-color-primary-contrast, #{getPrimaryContrast($theme)});
+        }
+
+        &[color="danger"] {
+            background-color: var(--matcha-color-danger, #{getDanger($theme)});
+            color: var(--matcha-color-danger-contrast, #{getDangerContrast($theme)});
+        }
+
+        // ── Alpha modifier ──
+        &[alpha]:not([alpha="false"]) {
+            &[color="accent"] {
+                background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+            }
+            &[color="primary"] {
+                background-color: var(--matcha-color-primary-alpha, #{getPrimaryAlpha($theme)});
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+            }
+            &[color="danger"] {
+                background-color: var(--matcha-color-danger-alpha, #{getDangerAlpha($theme)});
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+            }
+            &[color="surface"] {
+                background-color: #{getSurfaceAlpha($theme)};
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+            }
+            &[color="bg"] {
+                background-color: #{getBackgroundAlpha($theme)};
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+            }
+        }
+
+        // ── Outline modifier ──
+        &[outline]:not([outline="false"]) {
+            background: transparent;
+            box-shadow: inset 0 0 0 var(--matcha-border-thin, 2px) currentColor;
+
+            &:not([color]) {
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+            }
+        }
+
+        // ── Tint modifier ──
+        &[tint]:not([tint="false"]) {
+            &[color="accent"] {
+                background-color: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
+                color: var(--matcha-color-accent, #{getAccent($theme)});
+            }
+            &[color="primary"] {
+                background-color: var(--matcha-color-primary-alpha, #{getPrimaryAlpha($theme)});
+                color: var(--matcha-color-primary, #{getPrimary($theme)});
+            }
+            &[color="danger"] {
+                background-color: var(--matcha-color-danger-alpha, #{getDangerAlpha($theme)});
+                color: var(--matcha-color-danger, #{getDanger($theme)});
+            }
+        }
+
+        // ── Basic modifier ──
+        &[basic]:not([basic="false"]) {
+            box-shadow: none;
+            background-color: var(--matcha-color-surface, #{getSurface($theme)});
+
+            &:not([color]) {
+                color: var(--matcha-color-fg, #{getForeground($theme)});
+            }
+        }
+
+        // ── Link modifier ──
+        &[link]:not([link="false"]) {
+            text-transform: initial;
+            letter-spacing: 0;
+            text-decoration: none;
+            padding: 0;
+            background: transparent;
+        }
+    }
+}
+
+// =============================================================================
+// Structural styles
+// =============================================================================
+
+matcha-card,
+.matcha-card,
+.matcha-card-flat {
+    // Figma matcha/card: radius 16 (xl)
+    padding: var(--matcha-space-200, 16px);
+    border-radius: var(--matcha-radius-xl, 16px);
+    display: flex;
+    flex-direction: column;
+
+    // ── Direction: horizontal ──
+    &.matcha-card--horizontal {
+        flex-direction: row;
+    }
+
+    // ── Blockquote borders ──
+    &-border,
+    &-border-left {
+        border-left: var(--matcha-border-thick, 8px) solid;
+    }
+
+    &-border-right {
+        border-right: var(--matcha-border-thick, 8px) solid;
+    }
+
+    // ── States ──
+    &.disabled {
+        opacity: var(--matcha-opacity-disabled, 0.38);
+        pointer-events: none;
+        transition: opacity 100ms linear;
+    }
+
+    &.enabled {
+        opacity: 1;
+        transition: opacity 100ms linear;
+    }
+
+    // ── Width variants ──
+    &.variable-width { min-width: 0; }
+    &.auto-width { min-width: 0; max-width: none; }
+    &.fixed-width { min-width: 264px; max-width: 264px; width: 264px; }
+
+    // ── Divider ──
+    .card-divider {
+        margin: var(--matcha-space-200, 16px);
+        &.full-width { margin: 0; }
+    }
+
+    // ── Expand area ──
+    .card-expand-area {
+        overflow: hidden;
+        .card-expanded-content {
+            padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px) var(--matcha-space-200, 16px);
+            line-height: 1.75;
+        }
+    }
+
+    // ── Media slot (16:9) ──
+    .matcha-card__media {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        overflow: hidden;
+        border-radius: var(--matcha-radius-md, 4px);
+        flex-shrink: 0;
+
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    // Horizontal media
+    &.matcha-card--horizontal .matcha-card__media {
+        width: 160px;
+        aspect-ratio: auto;
+        height: 100%;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &.disabled, &.enabled {
+            transition: none;
+        }
+    }
+}

package/components/matcha-chart-card.scss

@@ -0,0 +1,60 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-chart-card.scss — Simple wrapper card for Chart.js charts
+// Aligned with Figma matcha/chart-card:
+//   Accent line + content slot (chart goes inside via ng-content)
+// Angular: matcha-chart-card
+// =============================================================================
+
+@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
+    }
+  }
+
+  .matcha-chart-card__accent {
+    background: var(--matcha-color-accent, #{getAccent($theme)});
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-chart-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: var(--matcha-radius-xl, 16px);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.matcha-chart-card__accent {
+  width: 100%;
+  height: 3px;
+  flex-shrink: 0;
+}
+
+.matcha-chart-card__content {
+  display: flex;
+  flex-direction: column;
+  padding: var(--matcha-space-200, 16px);
+  flex: 1;
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+  .matcha-chart-card {
+    transition: none;
+  }
+}