@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-progress-bar.scss

@@ -1,209 +1,313 @@
 // =============================================================================
-// matcha-progress-bar.scss — Progress bar (determinate, indeterminate, informative)
-// Aligned with Figma matcha/progress-bar: Type(3) × Size(4) = 7 variants
+// matcha-progress-bar.scss — Progress bar (1:1 com Figma DSV3)
+// =============================================================================
+// 4 types canônicos × 4 sizes:
+//   • standard      — bar contínua (default 4 / xs 8 / sm 16 / md 32)
+//   • multi-level   — N segmentos coloridos lado a lado (sm 16 / md 32)
+//   • informative   — card 60px com %, descrição, ETA + bar 4px embaixo
+//   • segmented     — N steps discretos com gap (sm 16 / md 32)
+//
+// Cores: 6 semânticas DSV3 (Material 1 legacy removida)
+// Track (rail): #282C34 dark = matcha/color/disabled-bg
 // =============================================================================
 
-@mixin generate-matcha-progress-bar-size-classes($helper-breakpoints) {
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
-
-            &[size#{$infix}="xs"],
-            &[size#{$infix}="tiny"] {
-                .progress { height: px-to-rem(8px); }
-            }
+@mixin matcha-progress-bar-theme($theme) {
+    $semantic-colors: (
+        accent:  getAccent,
+        primary: getPrimary,
+        success: getSuccess,
+        warn:    getWarn,
+        danger:  getDanger,
+        info:    getInfo,
+    );
 
-            &[size#{$infix}="sm"],
-            &[size#{$infix}="small"] {
-                .progress { height: px-to-rem(16px); }
-            }
+    matcha-progress-bar {
+        // Default fill = accent
+        --matcha-progress-fill: var(--matcha-color-accent, #{getAccent($theme)});
 
-            &[size#{$infix}="md"],
-            &[size#{$infix}="medium"] {
-                .progress { height: px-to-rem(32px); }
+        // Bind por color attr → CSS var (mesma estratégia do slider/spinner)
+        @each $name, $fn in $semantic-colors {
+            &[color="#{$name}"] {
+                --matcha-progress-fill: var(--matcha-color-#{$name}, #{call($fn, $theme)});
             }
         }
     }
 
-    &:not([size]) {
-        .progress { height: px-to-rem(4px); }
-    }
-}
-
-@mixin matcha-progress-bar-theme($theme) {
-    matcha-progress-bar:not([color]) {
-        .determinate,
-        .indeterminate {
-            background-color: var(--matcha-color-accent, #{getAccent($theme)});
+    // Multi-level: cada segment tem sua própria cor via [data-segment-color]
+    matcha-progress-bar[type="multi-level"] {
+        @each $name, $fn in $semantic-colors {
+            .progress-segment-color[data-segment-color="#{$name}"] {
+                background-color: var(--matcha-color-#{$name}, #{call($fn, $theme)});
+            }
         }
     }
+}
 
-    matcha-progress-bar {
-        .matcha-progress-bar {
-            overflow: hidden;
-            border-radius: var(--matcha-radius-lg, 8px);
-        }
+// =============================================================================
+// Structural — independente de cor
+// =============================================================================
 
-        .progress {
-            position: relative;
-            display: block;
-            width: 100%;
-            background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-            border-radius: var(--matcha-radius-sm, 2px);
-            background-clip: padding-box;
-            overflow: hidden;
-
-            .progress-text {
-                position: absolute;
-                inset: 0;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: var(--matcha-text-sm, 12px);
-                font-weight: var(--matcha-weight-semibold, 600);
-                pointer-events: none;
-                white-space: nowrap;
-            }
+matcha-progress-bar {
+    display: block;
+    width: 100%;
 
-            .progress-text-bg {
-                color: var(--matcha-color-fg, #{getForeground($theme)});
-                z-index: 1;
-            }
+    // ── Track base (compartilhado por standard e multi-level) ──────────────
+    .progress {
+        position: relative;
+        display: block;
+        width: 100%;
+        height: var(--matcha-space-050, 4px);  // default size
+        background-color: var(--matcha-color-disabled-bg, #282C34);
+        border-radius: var(--matcha-radius-sm, 2px);
+        overflow: hidden;
+    }
 
-            .progress-text-fg {
-                color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-                z-index: 3;
-                transition: clip-path 300ms linear;
-            }
+    // Fill determinate (standard + informative)
+    .progress-fill {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        background-color: var(--matcha-progress-fill);
+        border-radius: var(--matcha-radius-sm, 2px);
+        transition: width var(--matcha-duration-fast, 200ms) ease;
+    }
 
-            .determinate {
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                left: 0;
-                transition: width 300ms linear;
-                z-index: 2;
-            }
+    // Inline label (standard sm/md)
+    .progress-fill__label {
+        padding-left: var(--matcha-space-100, 8px);
+        font-family: var(--matcha-font-family);
+        // Figma: text inverse/escuro sobre fill claro (accent é claro em dark mode)
+        color: rgba(0, 0, 0, 0.87);
+        white-space: nowrap;
+    }
 
-            .indeterminate {
-                &:before {
-                    content: '';
-                    position: absolute;
-                    background-color: inherit;
-                    top: 0; left: 0; bottom: 0;
-                    will-change: left, right;
-                    animation: matcha-progress-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-                }
-
-                &:after {
-                    content: '';
-                    position: absolute;
-                    background-color: inherit;
-                    top: 0; left: 0; bottom: 0;
-                    will-change: left, right;
-                    animation: matcha-progress-indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-                    animation-delay: 1.15s;
-                }
-            }
+    // Indeterminate animation (standard, sem progress) — Material-style dual-scan.
+    // O .progress-indeterminate é wrapper transparente com overflow hidden.
+    // ::before e ::after são as 2 barras animadas que cruzam o track.
+    // Animar left/right (em vez de transform) é o approach que funciona em
+    // todos browsers e dá o ratio de "scan" característico do Material.
+    .progress-indeterminate {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        background-color: transparent;
+
+        &::before,
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            background-color: var(--matcha-progress-fill);
+            will-change: left, right;
         }
 
-        .progress-info-card {
-            border-radius: var(--matcha-radius-lg, 8px);
-            width: 100%;
-            display: block;
+        &::before {
+            animation: matcha-progress-indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        }
+        &::after {
+            animation: matcha-progress-indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+            animation-delay: 1.15s;
         }
-
-        @include generate-matcha-progress-bar-size-classes($helper-breakpoints);
     }
+}
 
-    @keyframes matcha-progress-indeterminate {
-        0% { left: -35%; right: 100%; }
-        60% { left: 100%; right: -90%; }
-        100% { left: 100%; right: -90%; }
-    }
+// ── Sizes ──────────────────────────────────────────────────────────────────
+matcha-progress-bar {
+    // Default: 4px (já é o default do .progress)
 
-    @keyframes matcha-progress-indeterminate-short {
-        0% { left: -200%; right: 100%; }
-        60% { left: 107%; right: -8%; }
-        100% { left: 107%; right: -8%; }
+    &[size="xs"], &[size="tiny"] {
+        .progress { height: var(--matcha-space-100, 8px); }
     }
-
-    @media (prefers-reduced-motion: reduce) {
-        matcha-progress-bar .progress {
-            .determinate { transition: none; }
-            .indeterminate:before,
-            .indeterminate:after { animation: none; }
-            .progress-text-fg { transition: none; }
+    &[size="sm"], &[size="small"] {
+        .progress { height: var(--matcha-space-200, 16px); border-radius: var(--matcha-radius-md, 4px); }
+        .progress-fill { border-radius: var(--matcha-radius-md, 4px); }
+        .progress-fill__label {
+            font-size: var(--matcha-text-p-tiny, 11px);
+            font-weight: var(--matcha-weight-regular, 400);
+            line-height: var(--matcha-leading-p-tiny, 14px);
+            letter-spacing: 0.3px;
+        }
+    }
+    &[size="md"], &[size="medium"] {
+        .progress { height: var(--matcha-space-400, 32px); border-radius: var(--matcha-radius-md, 4px); }
+        .progress-fill { border-radius: var(--matcha-radius-md, 4px); }
+        .progress-fill__label {
+            font-size: var(--matcha-text-label-md, 14px);
+            font-weight: var(--matcha-weight-medium, 500);
+            line-height: var(--matcha-leading-label-md, 20px);
         }
     }
 }
 
-// ── Structural ──────────────────────────────────────────────────────────────
+// =============================================================================
+// Multi-level (3+ segmentos coloridos lado a lado)
+// =============================================================================
+matcha-progress-bar[type="multi-level"] {
+    .progress--multi {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        // Track de fundo já vem do .progress (disabled-bg). Os segments coloridos
+        // sobrepõem por width%, deixando o resto exposto como track.
+    }
 
-matcha-progress-bar {
-    display: flex;
-    width: 100%;
-    border-radius: var(--matcha-radius-lg, 8px);
+    .progress-segment-color {
+        // Cor vem do data-segment-color → tema. Width vem do [style.width.%].
+        height: 100%;
+        // Sem border-radius interno — só as pontas do conjunto seguem o radius do track.
+    }
+
+    // Sizes específicos do multi-level
+    &[size="sm"], &[size="small"] {
+        .progress { height: var(--matcha-space-200, 16px); border-radius: var(--matcha-radius-sm, 2px); }
+    }
+    &[size="md"], &[size="medium"] {
+        .progress { height: var(--matcha-space-400, 32px); border-radius: var(--matcha-radius-md, 4px); }
+    }
+}
 
-    .matcha-progress-bar {
+// =============================================================================
+// Informative (card 60px com %, descrição, ETA + bar 4px)
+// Layout: padding 16, gap 8, bg surface-card, shadow 1, radius lg
+// =============================================================================
+matcha-progress-bar[type="informative"] {
+    .progress-info {
         display: flex;
         flex-direction: column;
-        position: relative;
-        width: 100%;
+        align-items: stretch;
+        gap: var(--matcha-space-100, 8px);
+        padding: var(--matcha-space-200, 16px);
+        background: var(--matcha-color-surface-card, #1c1f26);
+        box-shadow: var(--matcha-shadow-1, 0px 2px 8px rgba(0, 0, 0, 0.08));
+        border-radius: var(--matcha-radius-lg, 8px);
     }
-}
 
-.progress {
-    overflow: hidden;
+    .progress-info__row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+    }
+
+    // Percentage — label-sm 12/500/16 · text-primary
+    .progress-info__percentage {
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-label-sm, 12px);
+        font-weight: var(--matcha-weight-medium, 500);
+        line-height: var(--matcha-leading-label-sm, 16px);
+        color: var(--matcha-color-text-primary, #e8eaed);
+        flex: none;
+    }
+
+    // Description — body-sm 12/400/16 · text-primary · flex-grow
+    .progress-info__description {
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-body-sm, 12px);
+        font-weight: var(--matcha-weight-regular, 400);
+        line-height: var(--matcha-leading-body-sm, 16px);
+        color: var(--matcha-color-text-primary, #e8eaed);
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // ETA — caption 11/400/14 · text-secondary · letter 0.3
+    .progress-info__eta {
+        font-family: var(--matcha-font-family);
+        font-size: var(--matcha-text-p-tiny, 11px);
+        font-weight: var(--matcha-weight-regular, 400);
+        line-height: var(--matcha-leading-p-tiny, 14px);
+        letter-spacing: 0.3px;
+        color: var(--matcha-color-text-secondary, rgba(255, 255, 255, 0.7));
+        flex: none;
+    }
+
+    // Bar 4px (sempre size default — Figma não varia)
+    .progress--info-track {
+        height: var(--matcha-space-050, 4px);
+        border-radius: var(--matcha-radius-sm, 2px);
+    }
 }
 
 // =============================================================================
-// Segmented Progress Bar — Step progress indicator (Type=Segmented)
-// Aligned with Figma matcha/progress-bar: Type=Segmented, Size=SM|MD
+// Segmented (N steps discretos com gap pill)
 // =============================================================================
-
 matcha-progress-bar[type="segmented"] {
-    .matcha-progress-bar {
+    .progress-segmented {
+        display: flex;
         flex-direction: row;
+        align-items: stretch;
         gap: var(--matcha-space-050, 4px);
+        width: 100%;
     }
 
     .progress-segment {
-        flex: 1;
-        border-radius: var(--matcha-radius-sm, 2px);
+        flex: 1 1 0;
+        height: var(--matcha-space-100, 8px);  // default
+        background: var(--matcha-color-disabled-bg, #282C34);
+        border-radius: var(--matcha-radius-pill, 9999px);
+        transition: background var(--matcha-duration-fast, 200ms) ease;
+
+        &.is-filled {
+            background: var(--matcha-progress-fill);
+        }
     }
 
-    // ── Sizes ──
-    &[size="sm"] .progress-segment,
-    &[size="small"] .progress-segment {
-        height: var(--matcha-space-200, 16px);
-        border-radius: var(--matcha-radius-sm, 2px);
+    &[size="sm"], &[size="small"] {
+        .progress-segment { height: var(--matcha-space-200, 16px); }
     }
-
-    &[size="md"] .progress-segment,
-    &[size="medium"] .progress-segment {
-        height: var(--matcha-space-400, 32px);
-        border-radius: var(--matcha-radius-md, 4px);
+    &[size="md"], &[size="medium"] {
+        .progress-segment { height: var(--matcha-space-400, 32px); }
     }
+}
 
-    &:not([size]) .progress-segment {
-        height: var(--matcha-space-100, 8px);
-        border-radius: var(--matcha-radius-sm, 2px);
-    }
+// =============================================================================
+// Animations + a11y
+// =============================================================================
+// Material-style dual-scan keyframes — animam left/right pra criar o efeito
+// de barra que "cruza" o track. ::before é a barra principal (mais larga),
+// ::after é a complementar (mais fina, com delay) que dá o ritmo de scan.
+@keyframes matcha-progress-indeterminate {
+    0%   { left: -35%; right: 100%; }
+    60%  { left: 100%; right: -90%; }
+    100% { left: 100%; right: -90%; }
+}
 
-    // Hide standard progress bar elements
-    .progress { display: none; }
-    .progress-info-card { display: none; }
+@keyframes matcha-progress-indeterminate-short {
+    0%   { left: -200%; right: 100%; }
+    60%  { left: 107%; right: -8%; }
+    100% { left: 107%; right: -8%; }
 }
 
-@mixin matcha-progress-bar-segmented-theme($theme) {
-    matcha-progress-bar[type="segmented"] {
-        .progress-segment {
-            background: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+@media (prefers-reduced-motion: reduce) {
+    matcha-progress-bar {
+        .progress-fill { transition: none; }
+        .progress-indeterminate,
+        .progress-indeterminate::before { animation: none; }
+        .progress-segment { transition: none; }
+    }
+}
 
-            &.segment-filled {
-                background: var(--matcha-color-accent, #{getAccent($theme)});
-            }
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-progress-bar {
+        .progress-track {
+            background: Canvas !important;
+            border: 1px solid CanvasText !important;
+        }
+        .progress-fill,
+        .progress-segment.is-filled { background: Highlight !important; }
+        .progress-segment:not(.is-filled) {
+            background: Canvas !important;
+            border: 1px solid CanvasText !important;
         }
     }
 }
+
+// ── Print ──
+@media print {
+    matcha-progress-bar .progress-indeterminate { display: none !important; }
+}