@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-slider.scss

@@ -1,285 +1,285 @@
-// =============================================================================
-// matcha-slider.scss — Slider (single + range) — 1:1 com Figma DSV3
-// =============================================================================
-// Spec canônica matcha/slider (DSV3):
-//   • Track 4px · radius 2 · color disabled-bg (rail) / accent (selection)
-//   • Thumb 24×24 · radius pill · border 3px surface-bg · shadow level-1
-//   • State Layer halo 40×40 (::before) opacity 0 → 0.12 hover → 1 active
-//   • Active grow: thumb 24 → 26 + shadow level-2 (heavier)
-//   • Focus ring: outline 2px primary + offset 2px (geometry 32×32 vs thumb)
-//   • Pointer label (pill): 26×18 padding 2/6 · radius md · bg surface-card · caption text
-//   • Floor/Ceil labels: caption · color text/secondary · disabled-fg quando off
-//   • 6 cores semânticas DSV3: accent · primary · success · warn · danger · info
-// =============================================================================
-
-@mixin matcha-slider-theme($theme) {
-  // 6 cores semânticas DSV3 (sem Material 1 legacy).
-  $semantic-colors: (
-    accent:  getAccent,
-    primary: getPrimary,
-    success: getSuccess,
-    warn:    getWarn,
-    danger:  getDanger,
-    info:    getInfo,
-  );
-
-  .matcha-slider {
-    // Default (sem data-color) cai em accent
-    --matcha-slider-fill: var(--matcha-color-accent);
-
-    // Bind por data-color → CSS var pra cores serem trocáveis sem repetir regras
-    @each $name, $fn in $semantic-colors {
-      &[data-color="#{$name}"] {
-        --matcha-slider-fill: var(--matcha-color-#{$name});
-      }
-    }
-
-    .selection-bar {
-      background-color: var(--matcha-slider-fill);
-    }
-
-    .pointer {
-      background-color: var(--matcha-slider-fill);
-    }
-
-    // ── Disabled — sobrescreve fill, escurece labels ──
-    &.disabled {
-      .selection-bar { background-color: var(--matcha-color-disabled-bg); }
-      .pointer       { background-color: var(--matcha-color-disabled-bg); }
-
-      .pointer-label,
-      .floor-label,
-      .ceil-label {
-        color: var(--matcha-color-disabled-fg);
-      }
-
-      // Pill do label fica neutro no disabled (não destaca valor que não pode mudar)
-      .pointer-label {
-        background-color: var(--matcha-color-disabled-bg);
-      }
-    }
-  }
-}
-
-// =============================================================================
-// Structural — geometria + estados (independente de cor)
-// =============================================================================
-
-.matcha-slider {
-  position: relative;
-  width: 100%;
-  padding: var(--matcha-space-250, 20px) 0;
-  user-select: none;
-  background-color: transparent;
-
-  // ── Track 4px ──
-  .slider-track {
-    position: relative;
-    height: var(--matcha-slider-track-height, 4px);
-    border-radius: var(--matcha-radius-sm, 2px);
-    background-color: var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
-    cursor: pointer;
-    margin: 0 10px;
-  }
-
-  // ── Selection (parte preenchida) ──
-  // Height padrão = 4px (100% do track). Cresce pra 6px durante drag pra sinalizar
-  // "estou mexendo nesta faixa" sem precisar destacar ambos os thumbs (ver dragging).
-  .selection-bar {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    border-radius: var(--matcha-radius-sm, 2px);
-    transition:
-      width var(--matcha-duration-instant, 80ms) ease,
-      height var(--matcha-duration-fast, 200ms) ease,
-      top var(--matcha-duration-fast, 200ms) ease;
-  }
-
-  // ── Thumb 24×24 (Figma matcha/slider) ──
-  // border 3px solid surface-bg (Figma #111318 dark = surface-bg dark)
-  // shadow nível 1 padrão; nível 2 quando dragging (active)
-  .pointer {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: var(--matcha-slider-pointer-size, 24px);
-    height: var(--matcha-slider-pointer-size, 24px);
-    border-radius: var(--matcha-radius-pill, 9999px);
-    border: 3px solid var(--matcha-color-surface-bg, #111318);
-    box-shadow: var(--matcha-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.1));
-    cursor: grab;
-    transition:
-      width var(--matcha-duration-instant, 80ms) ease,
-      height var(--matcha-duration-instant, 80ms) ease,
-      box-shadow var(--matcha-duration-instant, 80ms) linear;
-
-    // ── State layer halo 40×40 (Figma "Thumb SL") ──
-    // ::before evita mexer no HTML; centralizado no thumb via translate.
-    // opacity 0 default → 0.12 hover → 1 active (drag)
-    &::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      background-color: var(--matcha-slider-fill, var(--matcha-color-accent));
-      transform: translate(-50%, -50%);
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity var(--matcha-duration-instant, 80ms) ease;
-      z-index: -1; // atrás do thumb pra não cobrir o ícone/cor sólida
-    }
-
-    &:hover::before {
-      opacity: 0.12;
-    }
-  }
-
-  // ── Pointer label (value pill — Figma 26×18, pad 2/6, radius 4) ──
-  // Posição acima do thumb (top -24px), background surface-card pra contraste
-  // sobre a linha do track. Anima junto com o thumb (slide horizontal).
-  .pointer-label {
-    position: absolute;
-    top: -24px;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: var(--matcha-space-025, 2px) var(--matcha-space-075, 6px);
-    background-color: var(--matcha-color-surface-card, #1c1f26);
-    border-radius: var(--matcha-radius-md, 4px);
-    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-primary, #e8eaed);
-    white-space: nowrap;
-    pointer-events: none;
-  }
-
-  // ── Floor / Ceil labels (escala visível abaixo do track) ──
-  // Figma: padding 0 16px, color text-secondary, caption typography
-  .limit-labels {
-    display: flex;
-    justify-content: space-between;
-    margin: var(--matcha-space-100, 8px) 10px 0;
-    top: -18px;
-    position: relative;
-    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));
-  }
-
-  // ── Disabled — opacity Figma é 0.6, mas usamos token DSV3 (0.38) ──
-  // que respeita melhor WCAG pra texto sobre fundo escuro.
-  &.disabled {
-    opacity: var(--matcha-opacity-disabled, 0.38);
-    pointer-events: none;
-    cursor: default;
-
-    .slider-track,
-    .pointer { cursor: default; }
-  }
-
-  // ── Range mode — z-index pra low ficar acima do high ──
-  &.range {
-    .pointer.low-pointer  { z-index: 2; }
-    .pointer.high-pointer { z-index: 1; }
-  }
-
-  // ── Active (dragging) — Figma "Type=Active" cresce thumb 24→26 ──
-  // + state layer 100% sólido + shadow elevation-2 (mais pesada)
-  // Selection bar cresce 4px → 6px (top: -1px pra manter centerline) sinalizando
-  // "esta faixa está sendo modificada" — reforça o feedback do range sem
-  // precisar destacar o thumb não-arrastado.
-  &.dragging {
-    .pointer {
-      cursor: grabbing !important;
-      width: 26px;
-      height: 26px;
-      box-shadow: var(--matcha-shadow-2, 0 4px 12px rgba(0, 0, 0, 0.2));
-
-      &::before {
-        opacity: 1;
-      }
-    }
-
-    .selection-bar {
-      // width muda em tempo real (segue o cursor); height/top animam suave
-      transition:
-        width 0s,
-        height var(--matcha-duration-fast, 200ms) ease,
-        top var(--matcha-duration-fast, 200ms) ease;
-      height: 6px;
-      top: -1px;
-    }
-  }
-
-  // ── Focus ring — Figma usa primary blue (#64B5F6 dark) ──
-  // outline + offset replica geometry 32×32 ring (24 thumb + 4*2 outline+offset)
-  .pointer:focus-visible {
-    outline: 2px solid var(--matcha-color-primary, #64b5f6);
-    outline-offset: 2px;
-  }
-
-  // ── High contrast (a11y) ──
-  @media (prefers-contrast: high) {
-    .pointer { border-width: 4px; }
-    .selection-bar { border: var(--matcha-border-hairline, 1px) solid currentColor; }
-  }
-
-  // ── Reduced motion ──
-  @media (prefers-reduced-motion: reduce) {
-    .pointer,
-    .pointer::before,
-    .selection-bar {
-      transition: none;
-    }
-  }
-}
-
-// ── Forced colors ──
-@media (forced-colors: active) {
-    matcha-slider {
-        .slider-track,
-        .full-bar {
-            background: Canvas !important;
-            border: 1px solid CanvasText !important;
-        }
-
-        .selection-bar {
-            background: Highlight !important;
-        }
-
-        .pointer {
-            background: ButtonFace !important;
-            border: 2px solid CanvasText !important;
-
-            &:focus-visible,
-            &.is-active {
-                outline: 2px solid CanvasText !important;
-                outline-offset: 2px;
-            }
-        }
-
-        &[disabled],
-        &.is-disabled {
-            opacity: 0.5;
-            .pointer { border-color: GrayText !important; }
-        }
-    }
-}
-
-// ── Print ──
-// Slider mostra valor estático em papel.
-@media print {
-    matcha-slider {
-        .pointer { background: currentColor !important; }
-        .selection-bar { background: currentColor !important; }
-    }
-}
+// =============================================================================
+// matcha-slider.scss — Slider (single + range) — 1:1 com Figma DSV3
+// =============================================================================
+// Spec canônica matcha/slider (DSV3):
+//   • Track 4px · radius 2 · color disabled-bg (rail) / accent (selection)
+//   • Thumb 24×24 · radius pill · border 3px surface-bg · shadow level-1
+//   • State Layer halo 40×40 (::before) opacity 0 → 0.12 hover → 1 active
+//   • Active grow: thumb 24 → 26 + shadow level-2 (heavier)
+//   • Focus ring: outline 2px primary + offset 2px (geometry 32×32 vs thumb)
+//   • Pointer label (pill): 26×18 padding 2/6 · radius md · bg surface-card · caption text
+//   • Floor/Ceil labels: caption · color text/secondary · disabled-fg quando off
+//   • 6 cores semânticas DSV3: accent · primary · success · warn · danger · info
+// =============================================================================
+
+@mixin matcha-slider-theme($theme) {
+  // 6 cores semânticas DSV3 (sem Material 1 legacy).
+  $semantic-colors: (
+    accent:  getAccent,
+    primary: getPrimary,
+    success: getSuccess,
+    warn:    getWarn,
+    danger:  getDanger,
+    info:    getInfo,
+  );
+
+  .matcha-slider {
+    // Default (sem data-color) cai em accent
+    --matcha-slider-fill: var(--matcha-color-accent);
+
+    // Bind por data-color → CSS var pra cores serem trocáveis sem repetir regras
+    @each $name, $fn in $semantic-colors {
+      &[data-color="#{$name}"] {
+        --matcha-slider-fill: var(--matcha-color-#{$name});
+      }
+    }
+
+    .selection-bar {
+      background-color: var(--matcha-slider-fill);
+    }
+
+    .pointer {
+      background-color: var(--matcha-slider-fill);
+    }
+
+    // ── Disabled — sobrescreve fill, escurece labels ──
+    &.disabled {
+      .selection-bar { background-color: var(--matcha-color-disabled-bg); }
+      .pointer       { background-color: var(--matcha-color-disabled-bg); }
+
+      .pointer-label,
+      .floor-label,
+      .ceil-label {
+        color: var(--matcha-color-disabled-fg);
+      }
+
+      // Pill do label fica neutro no disabled (não destaca valor que não pode mudar)
+      .pointer-label {
+        background-color: var(--matcha-color-disabled-bg);
+      }
+    }
+  }
+}
+
+// =============================================================================
+// Structural — geometria + estados (independente de cor)
+// =============================================================================
+
+.matcha-slider {
+  position: relative;
+  width: 100%;
+  padding: var(--matcha-space-250, 20px) 0;
+  user-select: none;
+  background-color: transparent;
+
+  // ── Track 4px ──
+  .slider-track {
+    position: relative;
+    height: var(--matcha-slider-track-height, 4px);
+    border-radius: var(--matcha-radius-sm, 2px);
+    background-color: var(--matcha-color-surface-border, rgba(255, 255, 255, 0.12));
+    cursor: pointer;
+    margin: 0 10px;
+  }
+
+  // ── Selection (parte preenchida) ──
+  // Height padrão = 4px (100% do track). Cresce pra 6px durante drag pra sinalizar
+  // "estou mexendo nesta faixa" sem precisar destacar ambos os thumbs (ver dragging).
+  .selection-bar {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    border-radius: var(--matcha-radius-sm, 2px);
+    transition:
+      width var(--matcha-duration-instant, 80ms) ease,
+      height var(--matcha-duration-fast, 200ms) ease,
+      top var(--matcha-duration-fast, 200ms) ease;
+  }
+
+  // ── Thumb 24×24 (Figma matcha/slider) ──
+  // border 3px solid surface-bg (Figma #111318 dark = surface-bg dark)
+  // shadow nível 1 padrão; nível 2 quando dragging (active)
+  .pointer {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--matcha-slider-pointer-size, 24px);
+    height: var(--matcha-slider-pointer-size, 24px);
+    border-radius: var(--matcha-radius-pill, 9999px);
+    border: 3px solid var(--matcha-color-surface-bg, #111318);
+    box-shadow: var(--matcha-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.1));
+    cursor: grab;
+    transition:
+      width var(--matcha-duration-instant, 80ms) ease,
+      height var(--matcha-duration-instant, 80ms) ease,
+      box-shadow var(--matcha-duration-instant, 80ms) linear;
+
+    // ── State layer halo 40×40 (Figma "Thumb SL") ──
+    // ::before evita mexer no HTML; centralizado no thumb via translate.
+    // opacity 0 default → 0.12 hover → 1 active (drag)
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: var(--matcha-slider-fill, var(--matcha-color-accent));
+      transform: translate(-50%, -50%);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) ease;
+      z-index: -1; // atrás do thumb pra não cobrir o ícone/cor sólida
+    }
+
+    &:hover::before {
+      opacity: 0.12;
+    }
+  }
+
+  // ── Pointer label (value pill — Figma 26×18, pad 2/6, radius 4) ──
+  // Posição acima do thumb (top -24px), background surface-card pra contraste
+  // sobre a linha do track. Anima junto com o thumb (slide horizontal).
+  .pointer-label {
+    position: absolute;
+    top: -24px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: var(--matcha-space-025, 2px) var(--matcha-space-075, 6px);
+    background-color: var(--matcha-color-surface-card, #1c1f26);
+    border-radius: var(--matcha-radius-md, 4px);
+    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-primary, #e8eaed);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  // ── Floor / Ceil labels (escala visível abaixo do track) ──
+  // Figma: padding 0 16px, color text-secondary, caption typography
+  .limit-labels {
+    display: flex;
+    justify-content: space-between;
+    margin: var(--matcha-space-100, 8px) 10px 0;
+    top: -18px;
+    position: relative;
+    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));
+  }
+
+  // ── Disabled — opacity Figma é 0.6, mas usamos token DSV3 (0.38) ──
+  // que respeita melhor WCAG pra texto sobre fundo escuro.
+  &.disabled {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+    pointer-events: none;
+    cursor: default;
+
+    .slider-track,
+    .pointer { cursor: default; }
+  }
+
+  // ── Range mode — z-index pra low ficar acima do high ──
+  &.range {
+    .pointer.low-pointer  { z-index: 2; }
+    .pointer.high-pointer { z-index: 1; }
+  }
+
+  // ── Active (dragging) — Figma "Type=Active" cresce thumb 24→26 ──
+  // + state layer 100% sólido + shadow elevation-2 (mais pesada)
+  // Selection bar cresce 4px → 6px (top: -1px pra manter centerline) sinalizando
+  // "esta faixa está sendo modificada" — reforça o feedback do range sem
+  // precisar destacar o thumb não-arrastado.
+  &.dragging {
+    .pointer {
+      cursor: grabbing !important;
+      width: 26px;
+      height: 26px;
+      box-shadow: var(--matcha-shadow-2, 0 4px 12px rgba(0, 0, 0, 0.2));
+
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    .selection-bar {
+      // width muda em tempo real (segue o cursor); height/top animam suave
+      transition:
+        width 0s,
+        height var(--matcha-duration-fast, 200ms) ease,
+        top var(--matcha-duration-fast, 200ms) ease;
+      height: 6px;
+      top: -1px;
+    }
+  }
+
+  // ── Focus ring — Figma usa primary blue (#64B5F6 dark) ──
+  // outline + offset replica geometry 32×32 ring (24 thumb + 4*2 outline+offset)
+  .pointer:focus-visible {
+    outline: 2px solid var(--matcha-color-primary, #64b5f6);
+    outline-offset: 2px;
+  }
+
+  // ── High contrast (a11y) ──
+  @media (prefers-contrast: high) {
+    .pointer { border-width: 4px; }
+    .selection-bar { border: var(--matcha-border-hairline, 1px) solid currentColor; }
+  }
+
+  // ── Reduced motion ──
+  @media (prefers-reduced-motion: reduce) {
+    .pointer,
+    .pointer::before,
+    .selection-bar {
+      transition: none;
+    }
+  }
+}
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-slider {
+        .slider-track,
+        .full-bar {
+            background: Canvas !important;
+            border: 1px solid CanvasText !important;
+        }
+
+        .selection-bar {
+            background: Highlight !important;
+        }
+
+        .pointer {
+            background: ButtonFace !important;
+            border: 2px solid CanvasText !important;
+
+            &:focus-visible,
+            &.is-active {
+                outline: 2px solid CanvasText !important;
+                outline-offset: 2px;
+            }
+        }
+
+        &[disabled],
+        &.is-disabled {
+            opacity: 0.5;
+            .pointer { border-color: GrayText !important; }
+        }
+    }
+}
+
+// ── Print ──
+// Slider mostra valor estático em papel.
+@media print {
+    matcha-slider {
+        .pointer { background: currentColor !important; }
+        .selection-bar { background: currentColor !important; }
+    }
+}