@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-slider.scss

@@ -1,67 +1,69 @@
 // =============================================================================
-// matcha-slider.scss — Slider (single + range)
-// Aligned with Figma matcha/slider: Type(Single/Range) × State(5) = 10 variants
+// 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) {
-  $color-functions: (
-    red: getRed, pink: getPink, purple: getPurple, deep-purple: getDeepPurple,
-    indigo: getIndigo, blue: getBlue, light-blue: getLightBlue, cyan: getCyan,
-    teal: getTeal, green: getGreen, light-green: getLightGreen, lime: getLime,
-    yellow: getYellow, amber: getAmber, orange: getOrange, deep-orange: getDeepOrange,
-    brown: getBrown, grey: getGrey, blue-grey: getBlueGrey,
-    primary: getPrimary, accent: getAccent, success: getSuccess,
-    warn: getWarn, danger: getDanger, info: getInfo, disabled: getDisabled,
+  // 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 accent
-    &[data-color="accent"] {
-      .selection-bar { background-color: var(--matcha-color-accent, #{getAccent($theme)}); }
-
-      .pointer {
-        background-color: var(--matcha-color-accent, #{getAccent($theme)});
+    // Default (sem data-color) cai em accent
+    --matcha-slider-fill: var(--matcha-color-accent);
 
-        &.focused { box-shadow: 0 0 0 4px var(--matcha-color-accent, #{getAccent($theme)}); }
-        &:hover { box-shadow: var(--matcha-shadow-1, #{$shadow-1-light}), 0 0 0 4px rgba(getAccent($theme), 0.24); } // ok: structural
-        &:active { box-shadow: var(--matcha-shadow-1, #{$shadow-1-light}), 0 0 0 4px rgba(getAccent($theme), 0.24); } // ok: structural
+    // 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}, #{call($fn, $theme)});
       }
     }
 
-    .slider-track {
-      background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+    .selection-bar {
+      background-color: var(--matcha-slider-fill);
     }
 
-    // Dynamic colors
-    @each $colorName, $colorFn in $color-functions {
-      &[data-color="#{'' + $colorName}"] {
-        .selection-bar { background-color: call(#{$colorFn}, $theme); }
-
-        .pointer {
-          background-color: call(#{$colorFn}, $theme);
-          &.focused { box-shadow: 0 0 0 4px call(#{$colorFn}, $theme); }
-          &:hover { box-shadow: var(--matcha-shadow-1, #{$shadow-1-light}), 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24); } // ok: structural
-          &:active { box-shadow: var(--matcha-shadow-1, #{$shadow-1-light}), 0 0 0 4px rgba(call(#{$colorFn}, $theme), 0.24); } // ok: structural
-        }
-      }
+    .pointer {
+      background-color: var(--matcha-slider-fill);
     }
 
-    // Disabled
+    // ── Disabled — sobrescreve fill, escurece labels ──
     &.disabled {
-      .selection-bar { background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)}); }
-      .pointer { background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)}); }
+      .selection-bar { background-color: var(--matcha-color-disabled-bg); }
+      .pointer       { background-color: var(--matcha-color-disabled-bg); }
 
-      .tick-value,
       .pointer-label,
       .floor-label,
       .ceil-label {
-        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+        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 ──────────────────────────────────────────────────────────────
+// =============================================================================
+// Structural — geometria + estados (independente de cor)
+// =============================================================================
 
 .matcha-slider {
   position: relative;
@@ -70,22 +72,33 @@
   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 200ms ease;
+    transition:
+      width var(--matcha-duration-instant, 80ms) ease,
+      height var(--matcha-duration-fast, 200ms) ease,
+      top var(--matcha-duration-fast, 200ms) ease;
   }
 
-  // Figma matcha/slider thumb: 24×24 ellipse
+  // ── 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%;
@@ -93,96 +106,180 @@
     width: var(--matcha-slider-pointer-size, 24px);
     height: var(--matcha-slider-pointer-size, 24px);
     border-radius: var(--matcha-radius-pill, 9999px);
-    cursor: grab;
-    border: 2px solid var(--matcha-color-surface, white);
+    border: 3px solid var(--matcha-color-surface-bg, #111318);
     box-shadow: var(--matcha-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.1));
-    transition: box-shadow var(--matcha-duration-instant, 80ms) linear,
-                transform var(--matcha-duration-instant, 80ms) ease;
+    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;
+    }
   }
 
-  // Figma value bubble: pad 2/6, radius 4, text 11/400/14 (caption)
+  // ── 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-size: var(--matcha-text-caption, 11px);
+    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-caption, 14px);
-    white-space: nowrap;
-  }
-
-  // Figma ticks + floor/ceil labels: 11/400/14
-  .tick .tick-value {
-    position: absolute;
-    top: 15px;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: var(--matcha-text-caption, 11px);
-    line-height: var(--matcha-leading-caption, 14px);
+    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-size: var(--matcha-text-caption, 11px);
-    line-height: var(--matcha-leading-caption, 14px);
+    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 ──
+  // ── 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 { cursor: default; }
+    .slider-track,
     .pointer { cursor: default; }
   }
 
-  // ── Range ──
+  // ── Range mode — z-index pra low ficar acima do high ──
   &.range {
-    .pointer {
-      &.low-pointer { z-index: 2; }
-      &.high-pointer { z-index: 1; }
-    }
+    .pointer.low-pointer  { z-index: 2; }
+    .pointer.high-pointer { z-index: 1; }
   }
 
-  // ── Dragging ──
+  // ── 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;
-      transform: translate(-50%, -50%) scale(1.1);
-      box-shadow: var(--matcha-shadow-2, 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12));
+      width: 26px;
+      height: 26px;
+      box-shadow: var(--matcha-shadow-2, 0 4px 12px rgba(0, 0, 0, 0.2));
+
+      &::before {
+        opacity: 1;
+      }
     }
 
     .selection-bar {
-      transition: none;
+      // 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 ──
+  // ── 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: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #6200ee);
-    outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    outline: 2px solid var(--matcha-color-primary, #64b5f6);
+    outline-offset: 2px;
   }
 
-  // ── High contrast ──
+  // ── High contrast (a11y) ──
   @media (prefers-contrast: high) {
-    .pointer { border-width: 3px; }
+    .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; }
+    }
+}