Initial commit: HMDesignSystem baseline

packages/ui/src/theme/slider.css

@@ -0,0 +1,75 @@
+/* Slider mapping. ui-viz has no Slider spec, so these are current HM values built from the HM Semantic / Primitive tokens.
+   Track, Range and Thumb are internal parts, so they are styled here; the Slider's own width / height stay `className` territory.
+   States: Radix attributes ([data-disabled], [data-orientation]) and :hover / :active / :focus-visible on the thumb. */
+:root, [data-hm-theme] {
+  --hm-slider-track-size: 6px;
+  --hm-slider-track-background: var(--hm-sem-palette-warm-neutral-light);
+  --hm-slider-range-background: var(--hm-sem-state-active);
+
+  --hm-slider-thumb-size: 18px;
+  --hm-slider-thumb-background: var(--hm-sem-bg-surface);
+  --hm-slider-thumb-border-width: 2px;
+  --hm-slider-thumb-border-color: var(--hm-sem-state-active);
+  /* Interaction halo: hover shows it, dragging widens it. Keyboard focus has its own semantic color. */
+  --hm-slider-thumb-halo-color: color-mix(in srgb, var(--hm-sem-action-primary) 20%, transparent);
+  --hm-slider-thumb-focus-halo-color: color-mix(in srgb, var(--hm-sem-stroke-input-focus) 20%, transparent);
+  --hm-slider-thumb-halo-size: 4px;
+  --hm-slider-thumb-halo-size-active: 6px;
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-slider-disabled-opacity: 0.6;
+}
+
+[data-slot="slider-track"] {
+  border-radius: 9999px;
+  background: var(--hm-slider-track-background);
+}
+[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-track"] {
+  height: var(--hm-slider-track-size);
+  width: 100%;
+}
+[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-track"] {
+  width: var(--hm-slider-track-size);
+  height: 100%;
+}
+[data-slot="slider-range"] {
+  background: var(--hm-slider-range-background);
+}
+[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-range"] {
+  height: 100%;
+}
+[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-range"] {
+  width: 100%;
+}
+
+[data-slot="slider-thumb"] {
+  box-sizing: border-box;
+  width: var(--hm-slider-thumb-size);
+  height: var(--hm-slider-thumb-size);
+  border: var(--hm-slider-thumb-border-width) solid var(--hm-slider-thumb-border-color);
+  border-radius: 9999px;
+  background: var(--hm-slider-thumb-background);
+  cursor: grab;
+}
+[data-slot="slider-thumb"]:hover {
+  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size) var(--hm-slider-thumb-halo-color);
+}
+[data-slot="slider-thumb"]:active {
+  cursor: grabbing;
+  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size-active) var(--hm-slider-thumb-halo-color);
+}
+/* Focus wins the color when states overlap; drag keeps its 6px size and grabbing cursor. */
+[data-slot="slider-thumb"]:focus-visible {
+  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size) var(--hm-slider-thumb-focus-halo-color);
+}
+[data-slot="slider-thumb"]:focus-visible:active {
+  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size-active) var(--hm-slider-thumb-focus-halo-color);
+}
+
+[data-slot="slider"][data-disabled] {
+  opacity: var(--hm-slider-disabled-opacity);
+}
+[data-slot="slider"][data-disabled] [data-slot="slider-thumb"] {
+  cursor: not-allowed;
+  box-shadow: none;
+}