@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/Slider/Slider.module.scss

@@ -0,0 +1,293 @@
+@use '../../styles/mixins' as *;
+@use './Slider.tokens';
+
+.root {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  // CSS keyword; not a tokenizable design value.
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  user-select: none;
+}
+
+.orientation-horizontal {
+  width: 100%;
+
+  // Reserve vertical space for the marks (below the track) + the label bubble
+  // (above). Component-internal sizing for an unfixed-height row.
+  min-height: var(--slider-min-height-horizontal);
+}
+
+.orientation-vertical {
+  flex-direction: column;
+
+  // 200px is a reasonable default vertical track length; consumer can override
+  // via style or className.
+  height: var(--slider-height-vertical);
+  min-width: var(--slider-min-width-vertical);
+}
+
+.track {
+  position: relative;
+  background: var(--slider-track-bg);
+  border-radius: var(--slider-track-radius);
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  overflow: visible;
+}
+
+.orientation-horizontal .track {
+  width: 100%;
+  height: var(--slider-track-size-md-horizontal);
+}
+
+.orientation-vertical .track {
+  height: 100%;
+  width: var(--slider-track-size-md-vertical);
+}
+
+.size-sm.orientation-horizontal .track {
+  height: var(--slider-track-size-sm-horizontal);
+}
+
+.size-lg.orientation-horizontal .track {
+  height: var(--slider-track-size-lg-horizontal);
+}
+
+.size-sm.orientation-vertical .track {
+  width: var(--slider-track-size-sm-vertical);
+}
+
+.size-lg.orientation-vertical .track {
+  width: var(--slider-track-size-lg-vertical);
+}
+
+.fill {
+  position: absolute;
+  background: var(--slider-fill-bg);
+  border-radius: var(--slider-fill-radius);
+}
+
+.orientation-horizontal .fill {
+  top: 0;
+  bottom: 0;
+}
+
+.orientation-vertical .fill {
+  left: 0;
+  right: 0;
+}
+
+.tone-default .fill {
+  background: var(--slider-fill-bg-tone-default);
+}
+
+.tone-success .fill {
+  background: var(--slider-fill-bg-tone-success);
+}
+
+.tone-warning .fill {
+  background: var(--slider-fill-bg-tone-warning);
+}
+
+.tone-danger .fill {
+  background: var(--slider-fill-bg-tone-danger);
+}
+
+.thumb {
+  position: absolute;
+  background: var(--slider-thumb-bg);
+  border: var(--border-width) solid var(--slider-thumb-border-color);
+  border-radius: var(--slider-thumb-radius);
+  box-shadow: var(--slider-thumb-shadow);
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: grab;
+  transition: box-shadow var(--transition-base);
+}
+
+.orientation-horizontal .thumb {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.orientation-vertical .thumb {
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.size-sm .thumb {
+  width: var(--slider-thumb-size-sm);
+  height: var(--slider-thumb-size-sm);
+}
+
+.size-md .thumb {
+  width: var(--slider-thumb-size-md);
+  height: var(--slider-thumb-size-md);
+}
+
+.size-lg .thumb {
+  width: var(--slider-thumb-size-lg);
+  height: var(--slider-thumb-size-lg);
+}
+
+.thumb:hover {
+  border-color: var(--slider-thumb-border-color-hover);
+  box-shadow: var(--slider-thumb-shadow-hover);
+}
+
+// Split from `:hover` above. The shared rule suppressed the ring and offered
+// the HOVER treatment as its substitute, so focus and hover looked identical.
+// The border/shadow change is kept on focus as well, unlike FileUpload's
+// dropzone: nothing else here competes for the thumb's border, so the tint
+// stays as a secondary affordance — it just means a focused-and-hovered thumb
+// paints two concentric accent rings (the border tint and the focus ring).
+// Left as is; not a defect worth chasing for one pixel of visual overlap.
+// Clipping check (mixin's own requirement for a new call site): `.track`
+// declares `overflow: visible` and `.root` sets none, so nothing inside this
+// component clips the outset ring.
+// `--ring-accent` and `--slider-fill-bg` resolve to the same colour in both
+// themes (#0052cc light, #68a7ff dark). On the thumb's leading edge the
+// filled track runs under the ring's offset gap, so ring and fill meet at
+// 1:1 there — the joined-siblings hazard mixins.scss documents. The other
+// edges land on the page background and stay perceivable, so this is not a
+// 1.4.11 failure; recorded as a known instance of that hazard, not fixed,
+// since it is a contrast question and #512's sweep is geometry.
+.thumb:focus-visible {
+  border-color: var(--slider-thumb-border-color-hover);
+  box-shadow: var(--slider-thumb-shadow-hover);
+
+  @include focus-ring;
+}
+
+// `.thumb.thumbDragging`, not `.thumbDragging` (#517). Dragging a thumb means
+// the pointer is on it, so `.thumb:hover` matches for the whole drag, and a
+// keyboard drag holds `.thumb:focus-visible` — both 0,2,0 against a bare
+// class's 0,1,0. The dragging shadow therefore never painted; only `cursor`
+// looked like it worked, because nothing else declares `cursor` above 0,1,0.
+// The compound selector ties on specificity and wins on source order, so this
+// rule MUST stay below both. `Slider.test.tsx` asserts that ordering, since
+// jsdom resolves no cascade and would not notice it moving.
+.thumb.thumbDragging {
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: grabbing;
+  box-shadow: var(--slider-thumb-shadow-dragging);
+}
+
+.label {
+  position: absolute;
+  background: var(--slider-label-bg);
+  color: var(--slider-label-fg);
+  font-size: var(--slider-label-font-size);
+  font-weight: var(--slider-label-font-weight);
+  font-variant-numeric: tabular-nums;
+  padding: var(--slider-label-padding-y) var(--slider-label-padding-x);
+  border-radius: var(--slider-label-radius);
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  white-space: nowrap;
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  pointer-events: none;
+}
+
+.orientation-horizontal .label {
+  bottom: calc(100% + var(--slider-label-offset));
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.orientation-vertical .label {
+  left: calc(100% + var(--slider-label-offset));
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mark {
+  position: absolute;
+  width: var(--slider-mark-width);
+  height: var(--slider-mark-height);
+  background: var(--slider-mark-bg);
+  border-radius: var(--slider-mark-radius);
+}
+
+.markFilled {
+  background: var(--slider-mark-filled-bg);
+}
+
+.tone-success .markFilled {
+  background: var(--slider-mark-filled-bg-tone-success);
+}
+
+.tone-warning .markFilled {
+  background: var(--slider-mark-filled-bg-tone-warning);
+}
+
+.tone-danger .markFilled {
+  background: var(--slider-mark-filled-bg-tone-danger);
+}
+
+.orientation-horizontal .mark {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.orientation-vertical .mark {
+  left: 50%;
+  transform: translate(-50%, 50%);
+  width: var(--slider-mark-height);
+  height: var(--slider-mark-width);
+}
+
+.markLabel {
+  position: absolute;
+  font-size: var(--slider-mark-label-font-size);
+  color: var(--slider-mark-label-fg);
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  white-space: nowrap;
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  pointer-events: none;
+}
+
+.orientation-horizontal .markLabel {
+  top: calc(100% + var(--slider-mark-label-offset));
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.orientation-vertical .markLabel {
+  left: calc(100% + var(--slider-mark-label-offset));
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.disabled {
+  opacity: var(--slider-opacity-disabled);
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: not-allowed;
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  pointer-events: none;
+}
+
+.disabled .thumb {
+  // pointer-events:none on the root doesn't propagate to children with the
+  // default `pointer-events: auto`. The thumb is the actual hit target, so it
+  // needs its own pointer-events:none + cursor override.
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  cursor: not-allowed;
+
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value -- CSS keyword
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .thumb {
+    transition: none;
+  }
+}

package/src/components/Slider/Slider.tokens.scss

@@ -0,0 +1,98 @@
+// Slider.tokens.scss — component-scoped tokens for <Slider> (track + filled range + thumbs + tooltip + marks). Each tone (default/success/warning/danger) overrides the filled-range and filled-mark color.
+:root {
+  // Orientation sizing — horizontal min-height + vertical height/min-width
+  --slider-min-height-horizontal: 32px;
+  --slider-height-vertical: 200px;
+  --slider-min-width-vertical: 32px;
+
+  // Track — bg + radius + per-orientation thickness
+  --slider-track-bg: var(--color-border);
+  --slider-track-radius: var(--radius-full);
+  --slider-track-size-md-horizontal: 6px;
+  --slider-track-size-sm-horizontal: 4px;
+  --slider-track-size-lg-horizontal: 8px;
+  --slider-track-size-md-vertical: 6px;
+  --slider-track-size-sm-vertical: 4px;
+  --slider-track-size-lg-vertical: 8px;
+
+  // Filled range (per tone)
+  --slider-fill-bg: var(--color-accent);
+  --slider-fill-bg-tone-default: var(--color-accent);
+  --slider-fill-bg-tone-success: var(--color-success);
+
+  // @contrast --color-warning on --color-border = 1.63:1 light
+  // @contrast --color-warning-strong on --color-border = 4.55:1 light
+  // @contrast --color-success on --color-border = 3.90:1 light
+  // @contrast --color-danger on --color-border = 4.13:1 light
+  // @contrast --color-accent on --color-border = 5.21:1 light
+  // @contrast --color-warning on --color-border = 6.77:1 dark
+  // @contrast --color-success on --color-border = 5.23:1 dark
+  // @contrast --color-danger on --color-border = 3.73:1 dark
+  // @contrast --color-accent on --color-border = 4.23:1 dark
+  // The track is --color-border, not --color-bg-muted (#647): a bg-muted track
+  // vanished on every bg-muted surface (StatTile, table headers, muted panels).
+  // warning uses --color-warning-strong: the bare amber measures 1.63:1 against
+  // the track, below 1.4.11's 3:1 — the ONLY tone that fails there (light success
+  // 3.90:1, danger 4.13:1, accent 5.21:1), so the fill is wrong, not the track.
+  // In dark nothing fails (amber 6.77:1, success 5.23:1, danger 3.73:1, accent
+  // 4.23:1). See #481.
+  --slider-fill-bg-tone-warning: var(--color-warning-strong);
+  --slider-fill-bg-tone-danger: var(--color-danger);
+  --slider-fill-radius: var(--radius-full);
+
+  // Thumb — base
+  --slider-thumb-bg: var(--color-bg);
+  --slider-thumb-border-color: var(--color-border);
+  --slider-thumb-radius: var(--radius-full);
+  --slider-thumb-shadow: var(--shadow-sm);
+  --slider-thumb-border-color-hover: var(--color-accent);
+  --slider-thumb-shadow-hover: var(--shadow-md);
+
+  // One step above hover, not equal to it (#517). This was `--shadow-md` — the
+  // same value as hover — so even after the specificity fix the dragging state
+  // would have been indistinguishable from the hover state it replaces, and a
+  // drag always hovers. `--shadow-lg` is what every other dragging surface in
+  // the library lifts to (Sortable, Kanban, DashboardCanvas).
+  --slider-thumb-shadow-dragging: var(--shadow-lg);
+
+  // Thumb diameter per size
+  --slider-thumb-size-sm: 14px;
+  --slider-thumb-size-md: 18px;
+  --slider-thumb-size-lg: 22px;
+
+  // Tooltip / label bubble
+  --slider-label-bg: var(--color-fg);
+  --slider-label-fg: var(--color-bg);
+  --slider-label-font-size: var(--font-size-xs);
+  --slider-label-font-weight: var(--font-weight-medium);
+  --slider-label-padding-y: var(--space-1);
+  --slider-label-padding-x: var(--space-2);
+  --slider-label-radius: var(--radius-sm);
+  --slider-label-offset: var(--space-2);
+
+  // Mark (notch on track)
+  --slider-mark-width: 2px;
+  --slider-mark-height: 8px;
+
+  // border-strong, not border: the track is --color-border (#647), and a mark the
+  // track's own colour vanished (fully at lg, where mark and track are both 8px).
+  --slider-mark-bg: var(--color-border-strong);
+  --slider-mark-radius: var(--radius-sm);
+
+  // Mark filled — base + tones
+  --slider-mark-filled-bg: var(--color-accent);
+  --slider-mark-filled-bg-tone-success: var(--color-success);
+
+  // Matches the filled range above, so the mark stays invisible-on-fill by
+  // design rather than by accident.
+  --slider-mark-filled-bg-tone-warning: var(--color-warning-strong);
+  --slider-mark-filled-bg-tone-danger: var(--color-danger);
+
+  // Mark label text
+  --slider-mark-label-font-size: var(--font-size-xs);
+  --slider-mark-label-fg: var(--color-fg-muted);
+  --slider-mark-label-offset: var(--space-1);
+
+  // Disabled
+  --slider-opacity-disabled: var(--opacity-disabled);
+}