@enact/limestone 1.3.0 → 1.10.0

package/Button/Button.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
+------------------------------------------ */
 .button {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-60);
@@ -8,8 +91,8 @@
   height: 2.75rem;
   min-width: 6.25rem;
   max-width: 25rem;
-  padding: 0 1.25rem;
-  margin: 0.75rem;
+  padding: 0 var(--primitive-spacing-60);
+  margin: var(--primitive-spacing-36);
   text-align: center;
   vertical-align: middle;
   --button-height: 2.75rem;
@@ -34,7 +117,7 @@
   /* Defined to prevent global export */
 }
 .button.focusExpand {
-  margin: 0.75rem;
+  margin: var(--primitive-spacing-36);
 }
 .button.centered .marquee {
   flex-grow: 0;
@@ -46,36 +129,36 @@
 .button .icon {
   flex-shrink: 0;
   margin-left: 0;
-  margin-right: 0.5rem;
+  margin-right: var(--primitive-spacing-24);
 }
 :global(.enact-locale-right-to-left) .button .icon {
-  margin-left: 0.5rem;
+  margin-left: var(--primitive-spacing-24);
   margin-right: 0;
 }
 .button.iconAfter .client {
   flex-direction: row-reverse;
 }
 .button.iconAfter .icon {
-  margin-left: 0.5rem;
+  margin-left: var(--primitive-spacing-24);
   margin-right: 0;
 }
 :global(.enact-locale-right-to-left) .button.iconAfter .icon {
   margin-left: 0;
-  margin-right: 0.5rem;
+  margin-right: var(--primitive-spacing-24);
 }
 .button.red,
 .button.green,
 .button.yellow,
 .button.blue {
-  padding-left: 0.75rem;
-  padding-right: 1.25rem;
+  padding-left: var(--primitive-spacing-36);
+  padding-right: var(--primitive-spacing-60);
 }
 :global(.enact-locale-right-to-left) .button.red,
 :global(.enact-locale-right-to-left) .button.green,
 :global(.enact-locale-right-to-left) .button.yellow,
 :global(.enact-locale-right-to-left) .button.blue {
-  padding-left: 1.25rem;
-  padding-right: 0.75rem;
+  padding-left: var(--primitive-spacing-60);
+  padding-right: var(--primitive-spacing-36);
 }
 .button.red .client::before,
 .button.green .client::before,
@@ -100,7 +183,7 @@
 .button.green.minWidth .client,
 .button.yellow.minWidth .client,
 .button.blue.minWidth .client {
-  margin-inline-start: 1.75rem;
+  margin-inline-start: var(--primitive-spacing-84);
   padding-inline-start: var(--primitive-spacing-24);
 }
 .button.red.minWidth .client::before,
@@ -109,7 +192,7 @@
 .button.blue.minWidth .client::before {
   bottom: 50%;
   transform: translateY(50%);
-  left: calc((1.75rem + 1.25rem) / 2 * -1);
+  left: calc((var(--primitive-spacing-84) + 1.25rem) / 2 * -1);
   right: initial;
 }
 :global(.enact-locale-right-to-left) .button.red.minWidth .client::before,
@@ -117,7 +200,7 @@
 :global(.enact-locale-right-to-left) .button.yellow.minWidth .client::before,
 :global(.enact-locale-right-to-left) .button.blue.minWidth .client::before {
   left: initial;
-  right: calc((1.75rem + 1.25rem) / 2 * -1);
+  right: calc((var(--primitive-spacing-84) + 1.25rem) / 2 * -1);
 }
 .button .marquee {
   flex-grow: 1;
@@ -142,8 +225,8 @@
   min-width: 5.5rem;
   max-width: 21.25rem;
   margin: var(--primitive-spacing-24);
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+  padding-left: var(--primitive-spacing-60);
+  padding-right: var(--primitive-spacing-60);
   --button-height: 2.25rem;
 }
 :global(.enact-locale-non-latin) .button.small {
@@ -163,33 +246,33 @@
 }
 .button.small .icon {
   margin-left: 0;
-  margin-right: 0.5rem;
+  margin-right: var(--primitive-spacing-24);
 }
 :global(.enact-locale-right-to-left) .button.small .icon {
-  margin-left: 0.5rem;
+  margin-left: var(--primitive-spacing-24);
   margin-right: 0;
 }
 .button.small.iconAfter .icon {
-  margin-left: 0.5rem;
+  margin-left: var(--primitive-spacing-24);
   margin-right: 0;
 }
 :global(.enact-locale-right-to-left) .button.small.iconAfter .icon {
   margin-left: 0;
-  margin-right: 0.5rem;
+  margin-right: var(--primitive-spacing-24);
 }
 .button.small.red,
 .button.small.green,
 .button.small.yellow,
 .button.small.blue {
-  padding-left: 0.625rem;
-  padding-right: 1.25rem;
+  padding-left: var(--primitive-spacing-30);
+  padding-right: var(--primitive-spacing-60);
 }
 :global(.enact-locale-right-to-left) .button.small.red,
 :global(.enact-locale-right-to-left) .button.small.green,
 :global(.enact-locale-right-to-left) .button.small.yellow,
 :global(.enact-locale-right-to-left) .button.small.blue {
-  padding-left: 1.25rem;
-  padding-right: 0.625rem;
+  padding-left: var(--primitive-spacing-60);
+  padding-right: var(--primitive-spacing-30);
 }
 .button.small.red .client::before,
 .button.small.green .client::before,
@@ -203,14 +286,14 @@
 .button.small.green.minWidth .client,
 .button.small.yellow.minWidth .client,
 .button.small.blue.minWidth .client {
-  margin-inline-start: 1.5rem;
+  margin-inline-start: var(--primitive-spacing-72);
 }
 .button.small.red.minWidth .client::before,
 .button.small.green.minWidth .client::before,
 .button.small.yellow.minWidth .client::before,
 .button.small.blue.minWidth .client::before {
   bottom: 50%;
-  left: calc((1.5rem + 1.0625rem) / 2 * -1);
+  left: calc((var(--primitive-spacing-72) + 1.0625rem) / 2 * -1);
   right: initial;
 }
 :global(.enact-locale-right-to-left) .button.small.red.minWidth .client::before,
@@ -218,7 +301,7 @@
 :global(.enact-locale-right-to-left) .button.small.yellow.minWidth .client::before,
 :global(.enact-locale-right-to-left) .button.small.blue.minWidth .client::before {
   left: initial;
-  right: calc((1.5rem + 1.0625rem) / 2 * -1);
+  right: calc((var(--primitive-spacing-72) + 1.0625rem) / 2 * -1);
 }
 .button.small.red.minWidth .icon,
 .button.small.green.minWidth .icon,
@@ -230,7 +313,7 @@
 .button.small.green.minWidth.iconAfter .icon,
 .button.small.yellow.minWidth.iconAfter .icon,
 .button.small.blue.minWidth.iconAfter .icon {
-  margin-inline-start: 0.5rem;
+  margin-inline-start: var(--primitive-spacing-24);
 }
 .button.small:global(.largeText) {
   font-size: var(--primitive-font-size-72);
@@ -353,6 +436,7 @@
   will-change: box-shadow, transform, filter;
   background-color: var(--semantic-color-surface-default);
   transition: transform 200ms ease-out;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: '';
   border-style: none;
   border-color: var(--semantic-color-stroke-button-outline);
@@ -371,9 +455,6 @@
 .button:global(.neutral).opaque .bg {
   opacity: 1;
 }
-.button:global(.neutral).opaque .icon {
-  color: var(--semantic-color-on-surface-main);
-}
 .button:global(.neutral).transparent {
   color: var(--semantic-color-on-background-main);
 }
@@ -383,9 +464,6 @@
 .button:global(.neutral).transparent.shadowed .client {
   text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-.button:global(.neutral).transparent .icon {
-  color: var(--semantic-color-on-background-main);
-}
 .button:global(.neutral).red .client::before {
   background-color: #ff6d78;
 }
@@ -498,10 +576,7 @@
 :global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-key) .button:global(.neutral):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) .button:global(.neutral):global(.spottable):focus.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active .bg {
   opacity: 1;
@@ -544,9 +619,7 @@
 }
 :global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-touch) .button:global(.neutral):global(.spottable):active.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus,
 :global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus {
@@ -556,24 +629,25 @@
 :global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-key) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg,
+:global(.spotlight-input-mouse) .button:global(.neutral):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active {
   z-index: 1;
 }
 :global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-touch) .button:global(.neutral):not([disabled]):global(.spottable):active.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus .bg {
@@ -603,22 +677,12 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.neutral):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active .bg {
   opacity: 1;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
@@ -643,17 +707,10 @@
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.neutral):global(.spottable):active.focusExpand:active.small .bg {
-  transform: none;
-}
 .button:global(.neutral)[disabled] {
   opacity: 1;
 }
@@ -716,6 +773,7 @@
   will-change: box-shadow, transform, filter;
   background-color: var(--semantic-color-surface-default);
   transition: transform 200ms ease-out;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: '';
   border-style: none;
   border-color: var(--semantic-color-stroke-button-outline);
@@ -734,9 +792,6 @@
 :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).opaque .bg {
   opacity: 1;
 }
-:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).opaque .icon {
-  color: var(--semantic-color-on-surface-main);
-}
 :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).transparent {
   color: var(--semantic-color-on-background-main);
 }
@@ -746,9 +801,6 @@
 :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).transparent.shadowed .client {
   text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-:global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).transparent .icon {
-  color: var(--semantic-color-on-background-main);
-}
 :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast).red .client::before {
   background-color: #ff6d78;
 }
@@ -861,10 +913,7 @@
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active .bg {
   opacity: 1;
@@ -907,9 +956,7 @@
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus {
@@ -919,24 +966,25 @@
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active {
   z-index: 1;
 }
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):not([disabled]):global(.spottable):active.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus .bg {
@@ -966,22 +1014,12 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active .bg {
   opacity: 1;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
@@ -1006,17 +1044,10 @@
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast):global(.spottable):active.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.enact-a11y-high-contrast) .button:global(.neutral):global(.highContrast)[disabled] {
   opacity: 1;
 }
@@ -1079,6 +1110,7 @@
   will-change: box-shadow, transform, filter;
   background-color: var(--semantic-color-surface-default);
   transition: transform 200ms ease-out;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: '';
   border-style: none;
   border-color: var(--semantic-color-stroke-button-outline);
@@ -1097,9 +1129,6 @@
 .button:global(.light).opaque .bg {
   opacity: 1;
 }
-.button:global(.light).opaque .icon {
-  color: var(--semantic-color-on-surface-main);
-}
 .button:global(.light).transparent {
   color: var(--semantic-color-on-background-main);
 }
@@ -1109,9 +1138,6 @@
 .button:global(.light).transparent.shadowed .client {
   text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-.button:global(.light).transparent .icon {
-  color: var(--semantic-color-on-background-main);
-}
 .button:global(.light).red .client::before {
   background-color: #ff6d78;
 }
@@ -1224,10 +1250,7 @@
 :global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-key) .button:global(.light):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) .button:global(.light):global(.spottable):focus.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .button:global(.light):global(.spottable):active .bg {
   opacity: 1;
@@ -1270,9 +1293,7 @@
 }
 :global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-touch) .button:global(.light):global(.spottable):active.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus,
 :global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus {
@@ -1282,24 +1303,25 @@
 :global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-key) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg,
+:global(.spotlight-input-mouse) .button:global(.light):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active {
   z-index: 1;
 }
 :global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-touch) .button:global(.light):not([disabled]):global(.spottable):active.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus .bg {
@@ -1329,22 +1351,12 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.light):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active .bg {
   opacity: 1;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
@@ -1369,17 +1381,10 @@
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.light):global(.spottable):active.focusExpand:active.small .bg {
-  transform: none;
-}
 .button:global(.light)[disabled] {
   opacity: 1;
 }
@@ -1445,6 +1450,7 @@
   will-change: box-shadow, transform, filter;
   background-color: var(--semantic-color-surface-default);
   transition: transform 200ms ease-out;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: 0.125rem;
   border-style: solid;
   border-color: var(--semantic-color-stroke-button-outline);
@@ -1463,9 +1469,6 @@
 .button:global(.game).opaque .bg {
   opacity: 1;
 }
-.button:global(.game).opaque .icon {
-  color: var(--semantic-color-on-surface-main);
-}
 .button:global(.game).transparent {
   color: var(--semantic-color-on-background-main);
 }
@@ -1475,9 +1478,6 @@
 .button:global(.game).transparent.shadowed .client {
   text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-.button:global(.game).transparent .icon {
-  color: var(--semantic-color-on-background-main);
-}
 .button:global(.game).red .client::before {
   background-color: #ff6d78;
 }
@@ -1590,10 +1590,7 @@
 :global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-key) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) .button:global(.game):global(.spottable):active .bg {
   opacity: 1;
@@ -1636,9 +1633,7 @@
 }
 :global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-touch) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus,
 :global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus {
@@ -1648,24 +1643,25 @@
 :global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-key) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg,
+:global(.spotlight-input-mouse) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active {
   z-index: 1;
 }
 :global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-touch) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus .bg {
@@ -1695,22 +1691,12 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active .bg {
   opacity: 1;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
@@ -1735,17 +1721,10 @@
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.noAnimation) .button:global(.game):global(.spottable):active.focusExpand:active.small .bg {
-  transform: none;
-}
 .button:global(.game)[disabled] {
   opacity: 1;
 }
@@ -1810,6 +1789,7 @@
   will-change: box-shadow, transform, filter;
   background-color: var(--semantic-color-surface-default);
   transition: transform 200ms ease-out;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: 0.125rem;
   border-style: solid;
   border-color: var(--semantic-color-stroke-button-outline);
@@ -1828,9 +1808,6 @@
 :global(.green) .button:global(.game).opaque .bg {
   opacity: 1;
 }
-:global(.green) .button:global(.game).opaque .icon {
-  color: var(--semantic-color-on-surface-main);
-}
 :global(.green) .button:global(.game).transparent {
   color: var(--semantic-color-on-background-main);
 }
@@ -1840,9 +1817,6 @@
 :global(.green) .button:global(.game).transparent.shadowed .client {
   text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-:global(.green) .button:global(.game).transparent .icon {
-  color: var(--semantic-color-on-background-main);
-}
 :global(.green) .button:global(.game).red .client::before {
   background-color: #ff6d78;
 }
@@ -1955,10 +1929,7 @@
 :global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-key) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active .bg {
   opacity: 1;
@@ -2001,9 +1972,7 @@
 }
 :global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-touch) :global(.green) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus,
 :global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus {
@@ -2013,24 +1982,25 @@
 :global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-key) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg,
+:global(.spotlight-input-mouse) :global(.green) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active {
   z-index: 1;
 }
 :global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-touch) :global(.green) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus .bg {
@@ -2060,22 +2030,12 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active .bg {
   opacity: 1;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
@@ -2100,17 +2060,10 @@
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.green) .button:global(.game):global(.spottable):active.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.green) .button:global(.game)[disabled] {
   opacity: 1;
 }
@@ -2175,6 +2128,7 @@
   will-change: box-shadow, transform, filter;
   background-color: var(--semantic-color-surface-default);
   transition: transform 200ms ease-out;
+  transition: transform var(--lime-focus-out-motion-duration) var(--lime-focus-out-motion-easing-function);
   border-width: 0.125rem;
   border-style: solid;
   border-color: var(--semantic-color-stroke-button-outline);
@@ -2193,9 +2147,6 @@
 :global(.orange) .button:global(.game).opaque .bg {
   opacity: 1;
 }
-:global(.orange) .button:global(.game).opaque .icon {
-  color: var(--semantic-color-on-surface-main);
-}
 :global(.orange) .button:global(.game).transparent {
   color: var(--semantic-color-on-background-main);
 }
@@ -2205,9 +2156,6 @@
 :global(.orange) .button:global(.game).transparent.shadowed .client {
   text-shadow: 0.125rem 0.25rem 0.25rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
 }
-:global(.orange) .button:global(.game).transparent .icon {
-  color: var(--semantic-color-on-background-main);
-}
 :global(.orange) .button:global(.game).red .client::before {
   background-color: #ff6d78;
 }
@@ -2320,10 +2268,7 @@
 :global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg,
 :global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-key) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active .bg {
   opacity: 1;
@@ -2366,9 +2311,7 @@
 }
 :global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: scale(1.1);
-}
-:global(.spotlight-input-touch) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
-  transform: scale(1.1);
+  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus,
 :global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus {
@@ -2378,24 +2321,25 @@
 :global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-key) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg,
+:global(.spotlight-input-mouse) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):focus.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active {
   z-index: 1;
 }
 :global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active .bg {
-  transform: scale(1.02);
+  transform: scale(1.05);
+  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
 }
-:global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:active.small .bg {
-  transform: scale(1.04);
+:global(.spotlight-input-touch) :global(.orange) .button:global(.game):not([disabled]):global(.spottable):active.focusExpand:not(.pressed) .bg {
+  transform: scale(1.1);
+  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
 }
 :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus .bg {
@@ -2425,22 +2369,12 @@
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.pressed .bg,
 :global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand:active .bg,
 :global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand.pressed.small .bg,
-:global(.spotlight-input-key) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg,
-:global(.spotlight-input-mouse) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):focus.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active .bg {
   opacity: 1;
   box-shadow: 0 0.5rem 0.75rem color(from var(--semantic-color-on-background-black) srgb r g b / 0.35);
@@ -2465,17 +2399,10 @@
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand.small .bg {
-  transform: none;
-}
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand.pressed .bg,
 :global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand:active .bg {
   transform: none;
 }
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand.pressed.small .bg,
-:global(.spotlight-input-touch) :global(.noAnimation) :global(.orange) .button:global(.game):global(.spottable):active.focusExpand:active.small .bg {
-  transform: none;
-}
 :global(.orange) .button:global(.game)[disabled] {
   opacity: 1;
 }