@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-cards.scss

@@ -1,230 +1,230 @@
-@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) {
-
-    matcha-card,
-    .matcha-card,
-    .matcha-card-flat {
-
-        // ── Default: surface ──
-        &:not([color]) {
-            background-color: var(--matcha-color-surface);
-            color: var(--matcha-color-fg);
-        }
-
-        // ── Semantic colors ──
-        &[color="surface"] {
-            background-color: var(--matcha-color-surface);
-            color: var(--matcha-color-fg);
-        }
-
-        &[color="bg"] {
-            background-color: var(--matcha-color-bg);
-            color: var(--matcha-color-fg);
-        }
-
-        &[color="accent"] {
-            background-color: var(--matcha-color-accent);
-            color: var(--matcha-color-accent-contrast);
-        }
-
-        &[color="primary"] {
-            background-color: var(--matcha-color-primary);
-            color: var(--matcha-color-primary-contrast);
-        }
-
-        &[color="danger"] {
-            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);
-                color: var(--matcha-color-fg);
-            }
-            &[color="primary"] {
-                background-color: var(--matcha-color-primary-alpha);
-                color: var(--matcha-color-fg);
-            }
-            &[color="danger"] {
-                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: var(--matcha-color-surface-bg);
-                color: var(--matcha-color-fg);
-            }
-            &[color="bg"] {
-                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;
-            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);
-            }
-        }
-
-        // ── Tint modifier ──
-        &[tint]:not([tint="false"]) {
-            &[color="accent"] {
-                background-color: var(--matcha-color-accent-alpha);
-                color: var(--matcha-color-accent);
-            }
-            &[color="primary"] {
-                background-color: var(--matcha-color-primary-alpha);
-                color: var(--matcha-color-primary);
-            }
-            &[color="danger"] {
-                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);
-
-            &:not([color]) {
-                color: var(--matcha-color-fg);
-            }
-        }
-
-        // ── 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;
-        }
-    }
-}
-
-// ── 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;
-    }
-}
+@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) {
+
+    matcha-card,
+    .matcha-card,
+    .matcha-card-flat {
+
+        // ── Default: surface ──
+        &:not([color]) {
+            background-color: var(--matcha-color-surface);
+            color: var(--matcha-color-fg);
+        }
+
+        // ── Semantic colors ──
+        &[color="surface"] {
+            background-color: var(--matcha-color-surface);
+            color: var(--matcha-color-fg);
+        }
+
+        &[color="bg"] {
+            background-color: var(--matcha-color-bg);
+            color: var(--matcha-color-fg);
+        }
+
+        &[color="accent"] {
+            background-color: var(--matcha-color-accent);
+            color: var(--matcha-color-accent-contrast);
+        }
+
+        &[color="primary"] {
+            background-color: var(--matcha-color-primary);
+            color: var(--matcha-color-primary-contrast);
+        }
+
+        &[color="danger"] {
+            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);
+                color: var(--matcha-color-fg);
+            }
+            &[color="primary"] {
+                background-color: var(--matcha-color-primary-alpha);
+                color: var(--matcha-color-fg);
+            }
+            &[color="danger"] {
+                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: var(--matcha-color-surface-bg);
+                color: var(--matcha-color-fg);
+            }
+            &[color="bg"] {
+                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;
+            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);
+            }
+        }
+
+        // ── Tint modifier ──
+        &[tint]:not([tint="false"]) {
+            &[color="accent"] {
+                background-color: var(--matcha-color-accent-alpha);
+                color: var(--matcha-color-accent);
+            }
+            &[color="primary"] {
+                background-color: var(--matcha-color-primary-alpha);
+                color: var(--matcha-color-primary);
+            }
+            &[color="danger"] {
+                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);
+
+            &:not([color]) {
+                color: var(--matcha-color-fg);
+            }
+        }
+
+        // ── 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;
+        }
+    }
+}
+
+// ── 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

@@ -1,53 +1,53 @@
-@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) {
-  .matcha-chart-card {
-    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);
-  }
-}
-
-// ── 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;
-  }
-}
+@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) {
+  .matcha-chart-card {
+    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);
+  }
+}
+
+// ── 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;
+  }
+}