@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-progress-bar.scss

@@ -1,313 +1,313 @@
-// =============================================================================
-// 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 matcha-progress-bar-theme($theme) {
-    $semantic-colors: (
-        accent:  getAccent,
-        primary: getPrimary,
-        success: getSuccess,
-        warn:    getWarn,
-        danger:  getDanger,
-        info:    getInfo,
-    );
-
-    matcha-progress-bar {
-        // Default fill = accent
-        --matcha-progress-fill: var(--matcha-color-accent);
-
-        // 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});
-            }
-        }
-    }
-
-    // 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});
-            }
-        }
-    }
-}
-
-// =============================================================================
-// Structural — independente de cor
-// =============================================================================
-
-matcha-progress-bar {
-    display: block;
-    width: 100%;
-
-    // ── 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;
-    }
-
-    // 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;
-    }
-
-    // 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 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;
-        }
-
-        &::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;
-        }
-    }
-}
-
-// ── Sizes ──────────────────────────────────────────────────────────────────
-matcha-progress-bar {
-    // Default: 4px (já é o default do .progress)
-
-    &[size="xs"], &[size="tiny"] {
-        .progress { height: var(--matcha-space-100, 8px); }
-    }
-    &[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);
-        }
-    }
-}
-
-// =============================================================================
-// 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.
-    }
-
-    .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); }
-    }
-}
-
-// =============================================================================
-// 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;
-        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-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 (N steps discretos com gap pill)
-// =============================================================================
-matcha-progress-bar[type="segmented"] {
-    .progress-segmented {
-        display: flex;
-        flex-direction: row;
-        align-items: stretch;
-        gap: var(--matcha-space-050, 4px);
-        width: 100%;
-    }
-
-    .progress-segment {
-        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);
-        }
-    }
-
-    &[size="sm"], &[size="small"] {
-        .progress-segment { height: var(--matcha-space-200, 16px); }
-    }
-    &[size="md"], &[size="medium"] {
-        .progress-segment { height: var(--matcha-space-400, 32px); }
-    }
-}
-
-// =============================================================================
-// 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%; }
-}
-
-@keyframes matcha-progress-indeterminate-short {
-    0%   { left: -200%; right: 100%; }
-    60%  { left: 107%; right: -8%; }
-    100% { left: 107%; right: -8%; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    matcha-progress-bar {
-        .progress-fill { transition: none; }
-        .progress-indeterminate,
-        .progress-indeterminate::before { animation: none; }
-        .progress-segment { transition: none; }
-    }
-}
-
-// ── 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; }
-}
+// =============================================================================
+// 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 matcha-progress-bar-theme($theme) {
+    $semantic-colors: (
+        accent:  getAccent,
+        primary: getPrimary,
+        success: getSuccess,
+        warn:    getWarn,
+        danger:  getDanger,
+        info:    getInfo,
+    );
+
+    matcha-progress-bar {
+        // Default fill = accent
+        --matcha-progress-fill: var(--matcha-color-accent);
+
+        // 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});
+            }
+        }
+    }
+
+    // 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});
+            }
+        }
+    }
+}
+
+// =============================================================================
+// Structural — independente de cor
+// =============================================================================
+
+matcha-progress-bar {
+    display: block;
+    width: 100%;
+
+    // ── 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;
+    }
+
+    // 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;
+    }
+
+    // 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 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;
+        }
+
+        &::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;
+        }
+    }
+}
+
+// ── Sizes ──────────────────────────────────────────────────────────────────
+matcha-progress-bar {
+    // Default: 4px (já é o default do .progress)
+
+    &[size="xs"], &[size="tiny"] {
+        .progress { height: var(--matcha-space-100, 8px); }
+    }
+    &[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);
+        }
+    }
+}
+
+// =============================================================================
+// 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.
+    }
+
+    .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); }
+    }
+}
+
+// =============================================================================
+// 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;
+        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-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 (N steps discretos com gap pill)
+// =============================================================================
+matcha-progress-bar[type="segmented"] {
+    .progress-segmented {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        gap: var(--matcha-space-050, 4px);
+        width: 100%;
+    }
+
+    .progress-segment {
+        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);
+        }
+    }
+
+    &[size="sm"], &[size="small"] {
+        .progress-segment { height: var(--matcha-space-200, 16px); }
+    }
+    &[size="md"], &[size="medium"] {
+        .progress-segment { height: var(--matcha-space-400, 32px); }
+    }
+}
+
+// =============================================================================
+// 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%; }
+}
+
+@keyframes matcha-progress-indeterminate-short {
+    0%   { left: -200%; right: 100%; }
+    60%  { left: 107%; right: -8%; }
+    100% { left: 107%; right: -8%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    matcha-progress-bar {
+        .progress-fill { transition: none; }
+        .progress-indeterminate,
+        .progress-indeterminate::before { animation: none; }
+        .progress-segment { transition: none; }
+    }
+}
+
+// ── 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; }
+}