@enact/limestone 1.3.0 → 1.10.0

package/Slider/Slider.module.css

@@ -1,3 +1,86 @@
+/* ---------------------------------------
+Animations
+------------------------------------------ */
+:root {
+  /* Bounce
+	------------------------------------------ */
+  --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
+  --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
+}
+/* ---------------------------------------
+Animations properties
+------------------------------------------ */
+:root {
+  /* ---------------------------------------
+	Durations
+	------------------------------------------ */
+  --lime-motion-default-duration: 200ms;
+  --lime-motion-medium1-duration: 250ms;
+  --lime-motion-medium2-duration: 300ms;
+  --lime-motion-medium4-duration: 400ms;
+  --lime-motion-long2-duration: 500ms;
+  --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-check-motion-duration: var(--lime-motion-medium4-duration);
+  --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
+  --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
+  --lime-press-motion-duration: var(--lime-motion-medium1-duration);
+  --lime-release-motion-duration: var(--lime-motion-medium2-duration);
+  /* ---------------------------------------
+	Easing functions
+	------------------------------------------ */
+  --lime-default-motion-easing-function: ease-out;
+  --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0, 0.05, 1);
+  --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1);
+  --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
+  --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
+  /* ---------------------------------------
+	Keyframes names
+	------------------------------------------ */
+  --lime-bounce-animation-name: bounce-motion;
+  --lime-check-animation-name: check-motion;
+  /* ---------------------------------------
+	Keyframes values
+	------------------------------------------ */
+  --lime-bounce-motion-offset-default-value: 0.125rem;
+}
+/* ---------------------------------------
+Keyframes
+------------------------------------------ */
+/* Bounce
+	------------------------------------------ */
+@keyframes bounce-motion {
+  0% {
+    transform: translateX(0);
+  }
+  50% {
+    transform: translateX(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value));
+  }
+  80% {
+    transform: translateX(calc(var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value) / -2));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+/* Check
+	------------------------------------------ */
+@keyframes check-motion {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+/* ---------------------------------------
+Motion Variables
+------------------------------------------ */
+/* ---------------------------------------
+Motion Mixins
+------------------------------------------ */
 .slider {
   position: relative;
   margin: 0 1rem;
@@ -17,21 +100,21 @@
   overflow: hidden;
 }
 .slider .knob {
-  --lime-tooltip-offset: 0.5rem;
+  --lime-tooltip-offset: 0.375rem;
   position: absolute;
   will-change: transform;
 }
 .slider .knob::before {
   content: "";
   position: absolute;
-  height: 1rem;
-  width: 1rem;
-  transform: translate(-50%, -50%) scale(0.75);
-  border-radius: 0.5rem;
+  height: 0.75rem;
+  width: 0.75rem;
+  border-radius: 0.375rem;
   border: 0.125rem solid transparent;
   box-sizing: border-box;
   will-change: transform;
-  transition: transform ease-out 100ms;
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 .slider.showAnchor .knob {
   z-index: 1;
@@ -57,14 +140,21 @@
 .slider[disabled] {
   touch-action: auto;
 }
+.slider .minMax {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--primitive-font-size-48);
+  font-weight: var(--primitive-font-weight-regular);
+  line-height: 1.25rem;
+}
 .slider:global(.largeText) .knob::before {
-  height: 1rem;
-  width: 1rem;
-  border-radius: 0.5rem;
+  height: 0.75rem;
+  width: 0.75rem;
+  border-radius: 0.375rem;
 }
 .slider.horizontal {
   width: auto;
-  padding: 0.5rem 0.5rem;
+  padding: var(--primitive-spacing-24) 0.375rem;
 }
 .slider.horizontal .fill,
 .slider.horizontal .load {
@@ -73,11 +163,17 @@
 .slider.horizontal .knob {
   left: calc(var(--ui-slider-proportion-end-knob) * 100%);
 }
+.slider.horizontal.hasMinMax {
+  padding-bottom: var(--primitive-spacing-84);
+}
+.slider.horizontal .minMax {
+  margin-top: var(--primitive-spacing-24);
+}
 .slider.horizontal:global(.largeText) {
-  padding: 0.375rem 0.5rem;
+  padding: 0.25rem 0.375rem;
 }
 .slider.vertical {
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.5rem;
   min-height: 5rem;
   display: inline-block;
   vertical-align: top;
@@ -90,8 +186,21 @@
   bottom: calc(var(--ui-slider-proportion-end-knob) * 100%);
   top: auto;
 }
+.slider.vertical.hasMinMax {
+  display: flex;
+  flex-direction: row;
+  width: fit-content;
+}
+.slider.vertical.hasMinMax .progressBar {
+  width: 0.25rem;
+  flex-shrink: 0;
+}
+.slider.vertical .minMax {
+  flex-direction: column-reverse;
+  margin-left: var(--primitive-spacing-24);
+}
 .slider.vertical:global(.largeText) {
-  padding: 0.5rem 0.375rem;
+  padding: 0.375rem 0.25rem;
 }
 .slider:global(.neutral) .bar {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
@@ -119,7 +228,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .slider:global(.neutral):global(.spottable):focus.active .fill,
 :global(.spotlight-input-mouse) .slider:global(.neutral):global(.spottable):focus.active .fill,
@@ -127,15 +237,22 @@
 :global(.spotlight-input-mouse) .slider:global(.neutral):global(.spottable):focus.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-key) .slider:global(.neutral):global(.spottable):focus.active .knob::before,
-:global(.spotlight-input-mouse) .slider:global(.neutral):global(.spottable):focus.active .knob::before,
+:global(.spotlight-input-key) .slider:global(.neutral):global(.spottable):focus:active .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.neutral):global(.spottable):focus:active .knob::before,
 :global(.spotlight-input-key) .slider:global(.neutral):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) .slider:global(.neutral):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .slider:global(.neutral):global(.spottable):focus:not(.pressed) .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.neutral):global(.spottable):focus:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) .slider:global(.neutral):global(.spottable):focus[disabled] .knob::before,
 :global(.spotlight-input-mouse) .slider:global(.neutral):global(.spottable):focus[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.neutral):global(.spottable):active {
   background-color: transparent;
@@ -147,18 +264,25 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.neutral):global(.spottable):active.active .fill,
 :global(.spotlight-input-touch) .slider:global(.neutral):global(.spottable):active.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-touch) .slider:global(.neutral):global(.spottable):active.active .knob::before,
+:global(.spotlight-input-touch) .slider:global(.neutral):global(.spottable):active:active .knob::before,
 :global(.spotlight-input-touch) .slider:global(.neutral):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .slider:global(.neutral):global(.spottable):active:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.neutral):global(.spottable):active[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.neutral).pressed .fill {
   background-color: var(--semantic-color-surface-accent);
@@ -167,7 +291,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) .slider:global(.neutral):global(.spottable):focus .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.neutral):global(.spottable):focus .knob::before {
@@ -177,18 +302,18 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.neutral):global(.spottable):focus.active .knob::before,
 :global(.spotlight-input-key) :global(.noAnimation) .slider:global(.neutral):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.neutral):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.neutral):global(.spottable):active .knob::before {
   box-shadow: none;
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.neutral):global(.spottable):active.active .knob::before,
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.neutral):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.neutral).pressed .knob::before {
   box-shadow: none;
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 .slider:global(.neutral)[disabled] {
   opacity: 0.3;
@@ -216,9 +341,37 @@
 :global(.spotlight-input-touch) .slider:global(.neutral).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.neutral).colorPicker .bar,
+.slider:global(.neutral).colorPicker .fill,
+.slider:global(.neutral).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.neutral).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
+.slider:global(.neutral) .minMax {
+  color: var(--semantic-color-on-background-sub);
+}
 :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast) .bar {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -245,7 +398,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.active .fill,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.active .fill,
@@ -253,15 +407,22 @@
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.active .knob::before,
-:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.active .knob::before,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus:active .knob::before,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus:active .knob::before,
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus:not(.pressed) .knob::before,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .knob::before,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active {
   background-color: transparent;
@@ -273,18 +434,25 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active.active .fill,
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active.active .knob::before,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active:active .knob::before,
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).pressed .fill {
   background-color: var(--semantic-color-surface-accent);
@@ -293,7 +461,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus .knob::before {
@@ -303,18 +472,18 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.active .knob::before,
 :global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active .knob::before {
   box-shadow: none;
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active.active .knob::before,
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).pressed .knob::before {
   box-shadow: none;
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast)[disabled] {
   opacity: 0.3;
@@ -342,9 +511,37 @@
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .bar,
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .fill,
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast) .minMax {
+  color: var(--semantic-color-on-background-sub);
+}
 .slider:global(.light) .bar {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -371,7 +568,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .slider:global(.light):global(.spottable):focus.active .fill,
 :global(.spotlight-input-mouse) .slider:global(.light):global(.spottable):focus.active .fill,
@@ -379,15 +577,22 @@
 :global(.spotlight-input-mouse) .slider:global(.light):global(.spottable):focus.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-key) .slider:global(.light):global(.spottable):focus.active .knob::before,
-:global(.spotlight-input-mouse) .slider:global(.light):global(.spottable):focus.active .knob::before,
+:global(.spotlight-input-key) .slider:global(.light):global(.spottable):focus:active .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.light):global(.spottable):focus:active .knob::before,
 :global(.spotlight-input-key) .slider:global(.light):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) .slider:global(.light):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .slider:global(.light):global(.spottable):focus:not(.pressed) .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.light):global(.spottable):focus:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) .slider:global(.light):global(.spottable):focus[disabled] .knob::before,
 :global(.spotlight-input-mouse) .slider:global(.light):global(.spottable):focus[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.light):global(.spottable):active {
   background-color: transparent;
@@ -399,18 +604,25 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.light):global(.spottable):active.active .fill,
 :global(.spotlight-input-touch) .slider:global(.light):global(.spottable):active.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-touch) .slider:global(.light):global(.spottable):active.active .knob::before,
+:global(.spotlight-input-touch) .slider:global(.light):global(.spottable):active:active .knob::before,
 :global(.spotlight-input-touch) .slider:global(.light):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .slider:global(.light):global(.spottable):active:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.light):global(.spottable):active[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.light).pressed .fill {
   background-color: var(--semantic-color-surface-accent);
@@ -419,7 +631,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) .slider:global(.light):global(.spottable):focus .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.light):global(.spottable):focus .knob::before {
@@ -429,18 +642,18 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.light):global(.spottable):focus.active .knob::before,
 :global(.spotlight-input-key) :global(.noAnimation) .slider:global(.light):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.light):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.light):global(.spottable):active .knob::before {
   box-shadow: none;
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.light):global(.spottable):active.active .knob::before,
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.light):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.light).pressed .knob::before {
   box-shadow: none;
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 .slider:global(.light)[disabled] {
   opacity: 0.3;
@@ -468,9 +681,37 @@
 :global(.spotlight-input-touch) .slider:global(.light).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.light).colorPicker .bar,
+.slider:global(.light).colorPicker .fill,
+.slider:global(.light).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.light).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
+.slider:global(.light) .minMax {
+  color: var(--semantic-color-on-background-sub);
+}
 .slider:global(.game) {
   --semantic-color-surface-default: #2d224c;
   --semantic-color-surface-default-focused: #6d2fa1;
@@ -502,7 +743,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .slider:global(.game):global(.spottable):focus.active .fill,
 :global(.spotlight-input-mouse) .slider:global(.game):global(.spottable):focus.active .fill,
@@ -510,15 +752,22 @@
 :global(.spotlight-input-mouse) .slider:global(.game):global(.spottable):focus.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-key) .slider:global(.game):global(.spottable):focus.active .knob::before,
-:global(.spotlight-input-mouse) .slider:global(.game):global(.spottable):focus.active .knob::before,
+:global(.spotlight-input-key) .slider:global(.game):global(.spottable):focus:active .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.game):global(.spottable):focus:active .knob::before,
 :global(.spotlight-input-key) .slider:global(.game):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) .slider:global(.game):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) .slider:global(.game):global(.spottable):focus:not(.pressed) .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.game):global(.spottable):focus:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) .slider:global(.game):global(.spottable):focus[disabled] .knob::before,
 :global(.spotlight-input-mouse) .slider:global(.game):global(.spottable):focus[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.game):global(.spottable):active {
   background-color: transparent;
@@ -530,18 +779,25 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.game):global(.spottable):active.active .fill,
 :global(.spotlight-input-touch) .slider:global(.game):global(.spottable):active.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-touch) .slider:global(.game):global(.spottable):active.active .knob::before,
+:global(.spotlight-input-touch) .slider:global(.game):global(.spottable):active:active .knob::before,
 :global(.spotlight-input-touch) .slider:global(.game):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) .slider:global(.game):global(.spottable):active:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.game):global(.spottable):active[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) .slider:global(.game).pressed .fill {
   background-color: var(--semantic-color-surface-accent);
@@ -550,7 +806,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) .slider:global(.game):global(.spottable):focus .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.game):global(.spottable):focus .knob::before {
@@ -560,18 +817,18 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.game):global(.spottable):focus.active .knob::before,
 :global(.spotlight-input-key) :global(.noAnimation) .slider:global(.game):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) .slider:global(.game):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.game):global(.spottable):active .knob::before {
   box-shadow: none;
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.game):global(.spottable):active.active .knob::before,
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.game):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) .slider:global(.game).pressed .knob::before {
   box-shadow: none;
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 .slider:global(.game)[disabled] {
   opacity: 0.3;
@@ -599,9 +856,37 @@
 :global(.spotlight-input-touch) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.game).colorPicker .bar,
+.slider:global(.game).colorPicker .fill,
+.slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
+.slider:global(.game) .minMax {
+  color: var(--semantic-color-on-background-sub);
+}
 :global(.green) .slider:global(.game) {
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
@@ -632,7 +917,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.green) .slider:global(.game):global(.spottable):focus.active .fill,
 :global(.spotlight-input-mouse) :global(.green) .slider:global(.game):global(.spottable):focus.active .fill,
@@ -640,15 +926,22 @@
 :global(.spotlight-input-mouse) :global(.green) .slider:global(.game):global(.spottable):focus.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-key) :global(.green) .slider:global(.game):global(.spottable):focus.active .knob::before,
-:global(.spotlight-input-mouse) :global(.green) .slider:global(.game):global(.spottable):focus.active .knob::before,
+:global(.spotlight-input-key) :global(.green) .slider:global(.game):global(.spottable):focus:active .knob::before,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game):global(.spottable):focus:active .knob::before,
 :global(.spotlight-input-key) :global(.green) .slider:global(.game):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.green) .slider:global(.game):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) :global(.green) .slider:global(.game):global(.spottable):focus:not(.pressed) .knob::before,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game):global(.spottable):focus:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.green) .slider:global(.game):global(.spottable):focus[disabled] .knob::before,
 :global(.spotlight-input-mouse) :global(.green) .slider:global(.game):global(.spottable):focus[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game):global(.spottable):active {
   background-color: transparent;
@@ -660,18 +953,25 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game):global(.spottable):active.active .fill,
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game):global(.spottable):active.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-touch) :global(.green) .slider:global(.game):global(.spottable):active.active .knob::before,
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game):global(.spottable):active:active .knob::before,
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game):global(.spottable):active:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game):global(.spottable):active[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game).pressed .fill {
   background-color: var(--semantic-color-surface-accent);
@@ -680,7 +980,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) :global(.green) .slider:global(.game):global(.spottable):focus .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .slider:global(.game):global(.spottable):focus .knob::before {
@@ -690,18 +991,18 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .slider:global(.game):global(.spottable):focus.active .knob::before,
 :global(.spotlight-input-key) :global(.noAnimation) :global(.green) .slider:global(.game):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .slider:global(.game):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .slider:global(.game):global(.spottable):active .knob::before {
   box-shadow: none;
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .slider:global(.game):global(.spottable):active.active .knob::before,
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .slider:global(.game):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .slider:global(.game).pressed .knob::before {
   box-shadow: none;
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.green) .slider:global(.game)[disabled] {
   opacity: 0.3;
@@ -729,9 +1030,37 @@
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.green) .slider:global(.game).colorPicker .bar,
+:global(.green) .slider:global(.game).colorPicker .fill,
+:global(.green) .slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.green) .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
+:global(.green) .slider:global(.game) .minMax {
+  color: var(--semantic-color-on-background-sub);
+}
 :global(.orange) .slider:global(.game) {
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
@@ -762,7 +1091,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.orange) .slider:global(.game):global(.spottable):focus.active .fill,
 :global(.spotlight-input-mouse) :global(.orange) .slider:global(.game):global(.spottable):focus.active .fill,
@@ -770,15 +1100,22 @@
 :global(.spotlight-input-mouse) :global(.orange) .slider:global(.game):global(.spottable):focus.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-key) :global(.orange) .slider:global(.game):global(.spottable):focus.active .knob::before,
-:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game):global(.spottable):focus.active .knob::before,
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game):global(.spottable):focus:active .knob::before,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game):global(.spottable):focus:active .knob::before,
 :global(.spotlight-input-key) :global(.orange) .slider:global(.game):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.orange) .slider:global(.game):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game):global(.spottable):focus:not(.pressed) .knob::before,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game):global(.spottable):focus:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.orange) .slider:global(.game):global(.spottable):focus[disabled] .knob::before,
 :global(.spotlight-input-mouse) :global(.orange) .slider:global(.game):global(.spottable):focus[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game):global(.spottable):active {
   background-color: transparent;
@@ -790,18 +1127,25 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game):global(.spottable):active.active .fill,
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game):global(.spottable):active.pressed .fill {
   background-color: var(--semantic-color-surface-accent);
 }
-:global(.spotlight-input-touch) :global(.orange) .slider:global(.game):global(.spottable):active.active .knob::before,
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game):global(.spottable):active:active .knob::before,
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.16);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
+}
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game):global(.spottable):active:not(.pressed) .knob::before {
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game):global(.spottable):active[disabled] .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%) scale(1);
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game).pressed .fill {
   background-color: var(--semantic-color-surface-accent);
@@ -810,7 +1154,8 @@
   background-color: var(--semantic-color-surface-default-focused);
   border-color: transparent;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
-  transform: translate(-50%, -50%) scale(1);
+  transform: translate(-50%, -50%) scale(1.33);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .slider:global(.game):global(.spottable):focus .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .slider:global(.game):global(.spottable):focus .knob::before {
@@ -820,18 +1165,18 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .slider:global(.game):global(.spottable):focus.active .knob::before,
 :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .slider:global(.game):global(.spottable):focus.pressed .knob::before,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .slider:global(.game):global(.spottable):focus.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .slider:global(.game):global(.spottable):active .knob::before {
   box-shadow: none;
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .slider:global(.game):global(.spottable):active.active .knob::before,
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .slider:global(.game):global(.spottable):active.pressed .knob::before {
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .slider:global(.game).pressed .knob::before {
   box-shadow: none;
-  transform: translate(-50%, -50%) scale(0.75);
+  transform: translate(-50%, -50%);
 }
 :global(.orange) .slider:global(.game)[disabled] {
   opacity: 0.3;
@@ -859,9 +1204,37 @@
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.orange) .slider:global(.game).colorPicker .bar,
+:global(.orange) .slider:global(.game).colorPicker .fill,
+:global(.orange) .slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.orange) .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
+:global(.orange) .slider:global(.game) .minMax {
+  color: var(--semantic-color-on-background-sub);
+}
 .tooltip.horizontal.above {
   transform: translateY(-0.25rem);
 }