@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-spin.scss

@@ -1,164 +1,164 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "../abstracts/functions" as *;
-@use "../tokens/breakpoints-tokens" as *;
-@use "sass:map";
-
-// =============================================================================
-// matcha-spin.scss — Circular progress/spinner (determinate + indeterminate)
-// Angular: matcha-spin
-// =============================================================================
-
-@mixin generate-matcha-spin-size-classes($helper-breakpoints) {
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-
-            &[size#{$infix}="tiny"] {
-                width: px-to-rem(24px);
-                height: px-to-rem(24px);
-            }
-
-            &[size#{$infix}="small"] {
-                width: px-to-rem(32px);
-                height: px-to-rem(32px);
-            }
-
-            &[size#{$infix}="medium"] {
-                width: px-to-rem(40px);
-                height: px-to-rem(40px);
-            }
-
-            &[size#{$infix}="large"] {
-                width: px-to-rem(48px);
-                height: px-to-rem(48px);
-            }
-
-            &[size#{$infix}="huge"] {
-                width: px-to-rem(56px);
-                height: px-to-rem(56px);
-            }
-        }
-    }
-}
-
-@mixin matcha-spin($theme) {
-
-    matcha-spin:not([color]) .spin-progress {
-        stroke: var(--matcha-color-accent);
-    }
-
-    matcha-spin {
-
-        // Cores nomeadas de paleta (red/pink/blue/… 19 famílias) DEPRECADAS na migração
-        // runtime-theming (2026-06-19): sem uso real (só doc auto-gerada). Use as semânticas
-        // abaixo (primary/accent/feedback). Remove a dependência dos getters de paleta
-        // (getRed…getBlueGrey, shade mode-dependente da paleta Material legada).
-
-        // Accent
-        &[color="accent"] .spin-progress {
-            stroke: var(--matcha-color-accent);
-        }
-
-        // Primary
-        &[color="primary"] .spin-progress {
-            stroke: var(--matcha-color-primary);
-        }
-
-        // Success
-        &[color="success"] .spin-progress {
-            stroke: var(--matcha-color-success);
-        }
-
-        // Warn
-        &[color="warn"] .spin-progress {
-            stroke: var(--matcha-color-warn);
-        }
-
-        // Danger
-        &[color="danger"] .spin-progress {
-            stroke: var(--matcha-color-danger);
-        }
-
-        // Info
-        &[color="info"] .spin-progress {
-            stroke: var(--matcha-color-info);
-        }
-
-        .spin-placeholder {
-            stroke: var(--matcha-color-disabled);
-        }
-
-        &:not([size]) {
-            width: px-to-rem(40px);
-            height: px-to-rem(40px);
-        }
-
-        @include generate-matcha-spin-size-classes($helper-breakpoints);
-
-    }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-matcha-spin:not([progress]) .spin-progress {
-    animation:
-        matcha-spin-rotate 1.5s linear infinite,
-        matcha-spin-dash 1.5s ease-in-out infinite;
-}
-
-.matcha-spin {
-    display: inline-block;
-    position: relative;
-
-    svg {
-        transform: rotate(-90deg);
-        width: 100%;
-        height: 100%;
-    }
-
-    .spin-placeholder {
-        fill: none;
-    }
-
-    .spin-progress {
-        fill: none;
-        stroke-linecap: round;
-        transform-origin: center;
-        transition: stroke-dashoffset var(--matcha-duration-moderate, 300ms) linear;
-    }
-
-    @keyframes matcha-spin-rotate {
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-
-    @keyframes matcha-spin-dash {
-        0% {
-            stroke-dasharray: 1, 200;
-            stroke-dashoffset: 0;
-        }
-
-        50% {
-            stroke-dasharray: 100, 200;
-            stroke-dashoffset: -15;
-        }
-
-        100% {
-            stroke-dasharray: 100, 200;
-            stroke-dashoffset: -200;
-        }
-    }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-    matcha-spin:not([progress]) .spin-progress {
-        animation: none;
-    }
-
-    .matcha-spin .spin-progress {
-        transition: none;
-    }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "../abstracts/functions" as *;
+@use "../tokens/breakpoints-tokens" as *;
+@use "sass:map";
+
+// =============================================================================
+// matcha-spin.scss — Circular progress/spinner (determinate + indeterminate)
+// Angular: matcha-spin
+// =============================================================================
+
+@mixin generate-matcha-spin-size-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="tiny"] {
+                width: px-to-rem(24px);
+                height: px-to-rem(24px);
+            }
+
+            &[size#{$infix}="small"] {
+                width: px-to-rem(32px);
+                height: px-to-rem(32px);
+            }
+
+            &[size#{$infix}="medium"] {
+                width: px-to-rem(40px);
+                height: px-to-rem(40px);
+            }
+
+            &[size#{$infix}="large"] {
+                width: px-to-rem(48px);
+                height: px-to-rem(48px);
+            }
+
+            &[size#{$infix}="huge"] {
+                width: px-to-rem(56px);
+                height: px-to-rem(56px);
+            }
+        }
+    }
+}
+
+@mixin matcha-spin($theme) {
+
+    matcha-spin:not([color]) .spin-progress {
+        stroke: var(--matcha-color-accent);
+    }
+
+    matcha-spin {
+
+        // Cores nomeadas de paleta (red/pink/blue/… 19 famílias) DEPRECADAS na migração
+        // runtime-theming (2026-06-19): sem uso real (só doc auto-gerada). Use as semânticas
+        // abaixo (primary/accent/feedback). Remove a dependência dos getters de paleta
+        // (getRed…getBlueGrey, shade mode-dependente da paleta Material legada).
+
+        // Accent
+        &[color="accent"] .spin-progress {
+            stroke: var(--matcha-color-accent);
+        }
+
+        // Primary
+        &[color="primary"] .spin-progress {
+            stroke: var(--matcha-color-primary);
+        }
+
+        // Success
+        &[color="success"] .spin-progress {
+            stroke: var(--matcha-color-success);
+        }
+
+        // Warn
+        &[color="warn"] .spin-progress {
+            stroke: var(--matcha-color-warn);
+        }
+
+        // Danger
+        &[color="danger"] .spin-progress {
+            stroke: var(--matcha-color-danger);
+        }
+
+        // Info
+        &[color="info"] .spin-progress {
+            stroke: var(--matcha-color-info);
+        }
+
+        .spin-placeholder {
+            stroke: var(--matcha-color-disabled);
+        }
+
+        &:not([size]) {
+            width: px-to-rem(40px);
+            height: px-to-rem(40px);
+        }
+
+        @include generate-matcha-spin-size-classes($helper-breakpoints);
+
+    }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+matcha-spin:not([progress]) .spin-progress {
+    animation:
+        matcha-spin-rotate 1.5s linear infinite,
+        matcha-spin-dash 1.5s ease-in-out infinite;
+}
+
+.matcha-spin {
+    display: inline-block;
+    position: relative;
+
+    svg {
+        transform: rotate(-90deg);
+        width: 100%;
+        height: 100%;
+    }
+
+    .spin-placeholder {
+        fill: none;
+    }
+
+    .spin-progress {
+        fill: none;
+        stroke-linecap: round;
+        transform-origin: center;
+        transition: stroke-dashoffset var(--matcha-duration-moderate, 300ms) linear;
+    }
+
+    @keyframes matcha-spin-rotate {
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes matcha-spin-dash {
+        0% {
+            stroke-dasharray: 1, 200;
+            stroke-dashoffset: 0;
+        }
+
+        50% {
+            stroke-dasharray: 100, 200;
+            stroke-dashoffset: -15;
+        }
+
+        100% {
+            stroke-dasharray: 100, 200;
+            stroke-dashoffset: -200;
+        }
+    }
+}
+
+// ── Reduced motion ──────────────────────────────────────────────────────────
+
+@media (prefers-reduced-motion: reduce) {
+    matcha-spin:not([progress]) .spin-progress {
+        animation: none;
+    }
+
+    .matcha-spin .spin-progress {
+        transition: none;
+    }
+}

package/components/matcha-spinner.scss

@@ -1,97 +1,97 @@
-// =============================================================================
-// matcha-spinner.scss — Spinner loading indicator (1:1 com Figma DSV3)
-// =============================================================================
-// Spec canônica matcha/spinner (DSV3):
-//   • Sizes: XS 24/3 · SM 32/4 · MD 40/5 · LG 48/5 · XL 56/5 (px / stroke)
-//   • Track (rail): #282C34 (matcha/color/disabled-bg dark)
-//   • Arc (indicator): cor semântica do prop [color] — 6 opções DSV3
-//
-// IMPORTANTE: animação de rotação NÃO está aqui — vem via WAAPI no
-// spinner.component.ts (rotação de 360° infinita). Esse arquivo só pinta
-// cores e ajusta o offset do arc determinate.
-// =============================================================================
-
-@mixin matcha-spinner-theme($theme) {
-    $semantic-colors: (
-        accent:  getAccent,
-        primary: getPrimary,
-        success: getSuccess,
-        warn:    getWarn,
-        danger:  getDanger,
-        info:    getInfo,
-    );
-
-    matcha-spinner {
-        --matcha-spinner-fill: var(--matcha-color-accent);
-
-        @each $name, $fn in $semantic-colors {
-            &[color="#{$name}"] {
-                --matcha-spinner-fill: var(--matcha-color-#{$name});
-            }
-        }
-    }
-}
-
-.matcha-spinner {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 0;
-
-    .spinner-wrapper {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .spinner {
-        display: block;
-    }
-
-    // Determinate: SVG rotacionado -90deg pra arc começar em 12h (default SVG é 3h).
-    .spinner--determinate {
-        transform: rotate(-90deg);
-    }
-
-    .spinner-track {
-        stroke: var(--matcha-color-disabled-bg, #282C34);
-    }
-
-    .spinner-arc {
-        stroke: var(--matcha-spinner-fill);
-        transition: stroke-dashoffset var(--matcha-duration-fast, 200ms) ease;
-    }
-}
-
-// ── High contrast ──────────────────────────────────────────────────────────
-@media (prefers-contrast: high) {
-    .matcha-spinner .spinner-track {
-        stroke: var(--matcha-color-text-secondary, #888);
-    }
-}
-
-// ── Forced colors (Windows High Contrast) ──
-@media (forced-colors: active) {
-    .matcha-spinner {
-        .spinner-track  { stroke: GrayText !important; }
-        .spinner-circle { stroke: CanvasText !important; }
-    }
-}
-
-// ── Reduced motion ──
-@media (prefers-reduced-motion: reduce) {
-    .matcha-spinner {
-        animation: none !important;
-
-        .spinner-circle { animation: none !important; }
-    }
-}
-
-// ── Print ──
-// Spinner é loading — não tem semântica em papel.
-@media print {
-    matcha-spinner,
-    .matcha-spinner {
-        display: none !important;
-    }
-}
+// =============================================================================
+// matcha-spinner.scss — Spinner loading indicator (1:1 com Figma DSV3)
+// =============================================================================
+// Spec canônica matcha/spinner (DSV3):
+//   • Sizes: XS 24/3 · SM 32/4 · MD 40/5 · LG 48/5 · XL 56/5 (px / stroke)
+//   • Track (rail): #282C34 (matcha/color/disabled-bg dark)
+//   • Arc (indicator): cor semântica do prop [color] — 6 opções DSV3
+//
+// IMPORTANTE: animação de rotação NÃO está aqui — vem via WAAPI no
+// spinner.component.ts (rotação de 360° infinita). Esse arquivo só pinta
+// cores e ajusta o offset do arc determinate.
+// =============================================================================
+
+@mixin matcha-spinner-theme($theme) {
+    $semantic-colors: (
+        accent:  getAccent,
+        primary: getPrimary,
+        success: getSuccess,
+        warn:    getWarn,
+        danger:  getDanger,
+        info:    getInfo,
+    );
+
+    matcha-spinner {
+        --matcha-spinner-fill: var(--matcha-color-accent);
+
+        @each $name, $fn in $semantic-colors {
+            &[color="#{$name}"] {
+                --matcha-spinner-fill: var(--matcha-color-#{$name});
+            }
+        }
+    }
+}
+
+.matcha-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+
+    .spinner-wrapper {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .spinner {
+        display: block;
+    }
+
+    // Determinate: SVG rotacionado -90deg pra arc começar em 12h (default SVG é 3h).
+    .spinner--determinate {
+        transform: rotate(-90deg);
+    }
+
+    .spinner-track {
+        stroke: var(--matcha-color-disabled-bg, #282C34);
+    }
+
+    .spinner-arc {
+        stroke: var(--matcha-spinner-fill);
+        transition: stroke-dashoffset var(--matcha-duration-fast, 200ms) ease;
+    }
+}
+
+// ── High contrast ──────────────────────────────────────────────────────────
+@media (prefers-contrast: high) {
+    .matcha-spinner .spinner-track {
+        stroke: var(--matcha-color-text-secondary, #888);
+    }
+}
+
+// ── Forced colors (Windows High Contrast) ──
+@media (forced-colors: active) {
+    .matcha-spinner {
+        .spinner-track  { stroke: GrayText !important; }
+        .spinner-circle { stroke: CanvasText !important; }
+    }
+}
+
+// ── Reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+    .matcha-spinner {
+        animation: none !important;
+
+        .spinner-circle { animation: none !important; }
+    }
+}
+
+// ── Print ──
+// Spinner é loading — não tem semântica em papel.
+@media print {
+    matcha-spinner,
+    .matcha-spinner {
+        display: none !important;
+    }
+}

package/components/matcha-status-pill.scss

@@ -1,11 +1,11 @@
 // =============================================================================
-// matcha-status-pill — tons com cor + bg-alpha + halo no dot por estado.
+// matcha-status-pill — cores de feedback com bg-alpha + halo no dot.
 // Mapeamento Figma DSV3 (matcha/status-pill, fileKey i04CyWczuVctwRjE5VbJh7).
+// Só entende `color` (papel visual do DS) — nenhuma semântica de domínio.
 // =============================================================================
 
 matcha-status-pill {
-    // ── Active (success) ────────────────────────────────────────────────────
-    &[tone="active"] {
+    &[color="success"] {
         color: var(--matcha-color-success, #16a34a);
         background-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.10));
         border-color: var(--matcha-color-success-alpha, rgba(22, 163, 74, 0.30));
@@ -21,8 +21,7 @@ matcha-status-pill {
         }
     }
 
-    // ── Pending (warn) ──────────────────────────────────────────────────────
-    &[tone="pending"] {
+    &[color="warning"] {
         color: var(--matcha-color-warn, #f59e0b);
         background-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.10));
         border-color: var(--matcha-color-warn-alpha, rgba(245, 158, 11, 0.30));
@@ -38,8 +37,7 @@ matcha-status-pill {
         }
     }
 
-    // ── Refused (danger) ────────────────────────────────────────────────────
-    &[tone="refused"] {
+    &[color="danger"] {
         color: var(--matcha-color-danger, #ef4444);
         background-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.10));
         border-color: var(--matcha-color-danger-alpha, rgba(239, 68, 68, 0.30));
@@ -55,15 +53,45 @@ matcha-status-pill {
         }
     }
 
-    // ── Inactive / Unknown (cinza muted) ────────────────────────────────────
-    &[tone="inactive"],
-    &[tone="unknown"] {
+    &[color="info"] {
+        color: var(--matcha-color-info);
+        background-color: var(--matcha-color-info-alpha);
+        border-color: var(--matcha-color-info-alpha);
+
+        .matcha-status-pill__dot {
+            background-color: var(--matcha-color-info);
+            box-shadow: 0 0 0 3px var(--matcha-color-info-alpha);
+        }
+
+        &[interactive]:hover:not([disabled]) {
+            background-color: var(--matcha-color-info-alpha);
+            border-color: var(--matcha-color-info);
+        }
+    }
+
+    &[color="disabled"] {
+        color: var(--matcha-color-disabled-fg);
+        background-color: var(--matcha-color-disabled-bg-alpha, var(--matcha-color-disabled-bg));
+        border-color: var(--matcha-color-disabled-bg);
+
+        .matcha-status-pill__dot {
+            background-color: var(--matcha-color-disabled-fg);
+        }
+    }
+
+    // Neutral — fallback/ausência de status. Itálico + peso regular + dot
+    // opaco diferenciam de um estado real (ex.: disabled) — comunica "sem
+    // dado", não "estado conhecido que é neutro".
+    &[color="neutral"] {
         color: var(--matcha-color-text-muted, #9ca3af);
         background-color: var(--matcha-color-surface-hover, rgba(255, 255, 255, 0.04));
         border-color: var(--matcha-color-surface-border, rgba(255, 255, 255, 0.14));
+        font-style: italic;
+        font-weight: var(--matcha-weight-regular, 400);
 
         .matcha-status-pill__dot {
             background-color: var(--matcha-color-text-muted, #9ca3af);
+            opacity: 0.5;
         }
 
         &[interactive]:hover:not([disabled]) {
@@ -71,12 +99,4 @@ matcha-status-pill {
             border-color: var(--matcha-color-text-muted);
         }
     }
-
-    // Unknown ainda diferencia com itálico + dot opaco.
-    &[tone="unknown"] {
-        font-style: italic;
-        font-weight: var(--matcha-weight-regular, 400);
-
-        .matcha-status-pill__dot { opacity: 0.5; }
-    }
 }