@limetech/lime-elements 37.64.2 → 37.64.3

package/dist/lime-elements/style/mixins.scss

@@ -63,33 +63,55 @@
     }
 }
 
+$clickable-normal-state-transitions: (
+    color var(--limel-clickable-transition-speed, 0.4s) ease,
+    background-color var(--limel-clickable-transition-speed, 0.4s) ease,
+    box-shadow var(--limel-clickable-transform-speed, 0.4s) ease,
+    transform var(--limel-clickable-transform-speed, 0.4s)
+        var(--limel-clickable-transform-timing-function, ease)
+);
+
 @mixin is-elevated-clickable(
     $color: var(--mdc-theme-on-surface),
     $color--hovered: var(--mdc-theme-on-surface),
     $background-color: var(--lime-elevated-surface-background-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, -0.04rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         box-shadow: var(--button-shadow-pressed);
+    }
 
-        transform: translate3d(0, 0.08rem, 0);
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -100,27 +122,42 @@
     $background-color--hovered: var(--lime-elevated-surface-background-color),
     $background-color--inset: var(--mdc-theme-surface)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, 0.01rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         background-color: $background-color--inset;
         box-shadow: var(--button-shadow-inset-pressed);
-        transform: translate3d(0, 0.05rem, 0);
+    }
+
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -130,26 +167,40 @@
     $color--hovered: var(--mdc-theme-on-surface),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, 0.01rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         box-shadow: var(--button-shadow-pressed);
+    }
 
-        transform: translate3d(0, 0.08rem, 0);
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -160,26 +211,41 @@
     $background-color--hovered: var(--lime-elevated-surface-background-color),
     $background-color--inset: var(--mdc-theme-surface)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, -0.04rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         background-color: $background-color--inset;
         box-shadow: var(--button-shadow-inset-pressed);
-        transform: translate3d(0, 0.05rem, 0);
+    }
+
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 

package/dist/lime-elements/style/shadows.scss

@@ -1,116 +1,92 @@
-@use './functions';
-@use './mixins';
-
 :root {
+    --shadow-brighten-edges-inside: 0 -1px 0.26rem rgb(var(--color-white), 0.06)
+            inset,
+        0 0 0 1px rgb(var(--color-white), 0.06) inset;
+    --shadow-brighten-edges-outside: 0 0.125rem 0.26rem
+            rgb(var(--color-white), 0.06),
+        0 0 0 1px rgb(var(--color-white), 0.06);
+
     // Could be useful for highlighting areas or elements that are focused, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-focus)` to get a more coherent visual effect.
-    --shadow-focused-state: 0 0 0 #{functions.pxToRem(2)} var(--mdc-theme-primary);
+    --shadow-focused-state: 0 0 0 0.125rem var(--mdc-theme-primary);
 
     // Could be useful for highlighting areas or elements that contain errors, using a box-shadow.
     // However, we recommend to use `var(--shadow-depth-8-error)` to get a more coherent visual effect.
-    --shadow-error-state: 0 0 0 #{functions.pxToRem(2)} rgb(var(--color-red-default));
+    --shadow-error-state: 0 0 0 0.125rem rgb(var(--color-red-default));
 
     // Good for buttons and clickables such as select dropdowns, or slider grabbers
-    --button-shadow-normal: 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(
-                3.6
-            )} 0 rgba(var(--color-black), 0.232),
-        0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-            rgba(var(--color-black), 0.208);
-    --button-shadow-hovered: 0 #{functions.pxToRem(2)} #{functions.pxToRem(6)}
-            rgba(var(--color-black), 0.15),
-        0 #{functions.pxToRem(6)} #{functions.pxToRem(10)}
-            rgba(var(--color-black), 0.05);
-    --button-shadow-pressed: 0 #{functions.pxToRem(1)} #{functions.pxToRem(3)} 0
-            rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-            rgba(var(--color-black), 0.108);
-    --button-shadow-inset: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(3.5)}
-            0 rgba(var(--color-black), 0.132) inset,
-        0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-            rgba(var(--color-black), 0.108) inset,
-        0 0 #{functions.pxToRem(4)} rgba(var(--color-white), 0.9);
-    --button-shadow-inset-pressed: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(
-                5.5
-            )} 0 rgba(var(--color-black), 0.132) inset,
-        0 #{functions.pxToRem(0.3)} #{functions.pxToRem(1.9)} 0
-            rgba(var(--color-black), 0.12) inset,
-        0 0 #{functions.pxToRem(3)} rgba(var(--color-white), 0.9);
+    --button-shadow-normal: 0 0.09375rem 0.225rem 0
+            rgb(var(--color-black), 0.232),
+        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.208),
+        var(--shadow-brighten-edges-inside);
+    --button-shadow-hovered: 0 0.125rem 0.375rem rgb(var(--color-black), 0.25),
+        0 0.4rem 0.475rem -0.3rem rgb(var(--color-black), 0.1),
+        var(--shadow-brighten-edges-inside);
+    --button-shadow-pressed: 0 0.0625rem 0.1875rem 0
+            rgb(var(--color-black), 0.132),
+        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.108),
+        var(--shadow-brighten-edges-inside);
+    --button-shadow-inset: 0 0.03125rem 0.21875rem 0
+            rgb(var(--color-black), 0.132) inset,
+        0 0.01875rem 0.05625rem 0 rgb(var(--color-black), 0.108) inset,
+        var(--shadow-brighten-edges-outside),
+        0 0 0.25rem rgb(var(--color-white), 0.9);
+    --button-shadow-inset-pressed: 0 0.03125rem 0.34375rem 0
+            rgb(var(--color-black), 0.132) inset,
+        0 0.01875rem 0.11875rem 0 rgb(var(--color-black), 0.12) inset,
+        0 -1px 0.3rem rgb(var(--color-white), 0.9),
+        var(--shadow-brighten-edges-outside);
 
     // Good for Command bars, Command dropdowns, Context menus
-    --shadow-depth-8: 0 #{functions.pxToRem(3.2)} #{functions.pxToRem(7.2)} 0
-            rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(0.6)} #{functions.pxToRem(1.8)} 0
-            rgba(var(--color-black), 0.108);
+    --shadow-depth-8: 0 0.2rem 0.45rem 0 rgb(var(--color-black), 0.132),
+        0 0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);
     // Same as above, but when element is focused
     --shadow-depth-8-focused: var(--shadow-depth-8), var(--shadow-focused-state);
     // Same as above, but when element is indicating error or warning
     --shadow-depth-8-error: var(--shadow-depth-8), var(--shadow-error-state);
     // Same as above, but light source is below the element, good for bottom bars, etc...
-    --shadow-depth-8-reversed: 0 #{functions.pxToRem(-3.2)} #{functions.pxToRem(
-                7.2
-            )} 0 rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(-0.6)} #{functions.pxToRem(1.8)} 0
-            rgba(var(--color-black), 0.108);
+    --shadow-depth-8-reversed: 0 -0.2rem 0.45rem 0 rgb(var(--color-black), 0.132),
+        0 -0.0375rem 0.1125rem 0 rgb(var(--color-black), 0.108);
 
     // Good for Teaching callouts, Search results dropdown, cards, Tooltips
-    --shadow-depth-16: 0 #{functions.pxToRem(6.4)} #{functions.pxToRem(14.4)} 0
-            rgba(var(--color-black), 0.132),
-        0 #{functions.pxToRem(1.2)} #{functions.pxToRem(3.6)} 0
-            rgba(var(--color-black), 0.108);
+    --shadow-depth-16: 0 0.4rem 0.9rem 0 rgb(var(--color-black), 0.132),
+        0 0.075rem 0.225rem 0 rgb(var(--color-black), 0.108);
 
     // Same as above, but when element is focused
     --shadow-depth-16-focused: var(--shadow-depth-16),
         var(--shadow-focused-state);
 
     // Good for Pop up dialogs
-    --shadow-depth-64: 0 #{functions.pxToRem(25.6)} #{functions.pxToRem(57.6)} 0
-            rgba(var(--color-black), 0.22),
-        0 #{functions.pxToRem(4.8)} #{functions.pxToRem(14.4)} 0
-            rgba(var(--color-black), 0.18);
+    --shadow-depth-64: 0 1.6rem 3.6rem 0 rgb(var(--color-black), 0.22),
+        0 0.3rem 0.9rem 0 rgb(var(--color-black), 0.18);
 
     // Same as above, but when element is focused
     --shadow-depth-64-focused: var(--shadow-depth-64),
         var(--shadow-focused-state);
 
-    --shadow-inflated-8: #{functions.pxToRem(-2)} #{functions.pxToRem(-2)} #{functions.pxToRem(
-                6
-            )} rgba(var(--color-black), 0.01),
-        #{functions.pxToRem(-4)} #{functions.pxToRem(-4)} #{functions.pxToRem(
-                10
-            )} rgba(var(--color-white), 0.6),
-        #{functions.pxToRem(4)} #{functions.pxToRem(4)} #{functions.pxToRem(10)}
-            rgba(var(--color-black), 0.05),
-        #{functions.pxToRem(1)} #{functions.pxToRem(1)} #{functions.pxToRem(10)}
-            rgba(var(--color-white), 0.7),
-        -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-        0 0 1px 1px rgba(var(--color-white), 0.98) inset;
-    --shadow-inflated-16: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
-                6
-            )} rgba(var(--color-black), 0.01),
-        #{functions.pxToRem(-6)} #{functions.pxToRem(-6)} #{functions.pxToRem(
-                16
-            )} rgba(var(--color-white), 0.8),
-        #{functions.pxToRem(6)} #{functions.pxToRem(6)} #{functions.pxToRem(16)}
-            rgba(var(--color-black), 0.05),
-        #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
-            rgba(var(--color-white), 0.7),
-        -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-        0 0 1px 1px rgba(var(--color-white), 0.98) inset;
-    --shadow-inflated-64: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
-                6
-            )} rgba(var(--color-black), 0.01),
-        #{functions.pxToRem(-10)} #{functions.pxToRem(-10)} #{functions.pxToRem(
-                30
-            )} rgba(var(--color-white), 1),
-        #{functions.pxToRem(10)} #{functions.pxToRem(10)} #{functions.pxToRem(
-                36
-            )} rgba(var(--color-black), 0.06),
-        #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
-            rgba(var(--color-white), 0.7),
-        -1px -1px 0 1px rgba(var(--color-black), 0.07) inset,
-        0 0 1px 1px rgba(var(--color-white), 0.98) inset;
+    --shadow-inflated-8: -0.125rem -0.125rem 0.375rem rgb(var(--color-black), 0.01),
+        -0.25rem -0.25rem 0.625rem rgb(var(--color-white), 0.6),
+        0.25rem 0.25rem 0.625rem rgb(var(--color-black), 0.05),
+        0.0625rem 0.0625rem 0.625rem rgb(var(--color-white), 0.7),
+        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
+    --shadow-inflated-16: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.01),
+        -0.375rem -0.375rem 1rem rgb(var(--color-white), 0.8),
+        0.375rem 0.375rem 1rem rgb(var(--color-black), 0.05),
+        0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
+        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
+    --shadow-inflated-64: -0.1875rem -0.1875rem 0.375rem rgb(var(--color-black), 0.01),
+        -0.625rem -0.625rem 1.875rem rgb(var(--color-white), 1),
+        0.625rem 0.625rem 2.25rem rgb(var(--color-black), 0.06),
+        0.125rem 0.125rem 0.625rem rgb(var(--color-white), 0.7),
+        -1px -1px 0 1px rgb(var(--color-black), 0.07) inset,
+        0 0 1px 1px rgb(var(--color-white), 0.98) inset;
 }
 
+// @include mixins.in(dark-mode) {
+// latest version is found in `color-palette-extended.css`
+// }
 // ⚠️ This section below is commented out.
 // It's contents are moved to src/style/color-palette-extended.css
 //
@@ -120,95 +96,3 @@
 // The shadows will get rendered too dark, due to `@media (prefers-color-scheme: dark)`
 // rule from the mixin. The day we generate `.css` files from these `.scss` files,
 // we can do it differently.
-
-// @include mixins.in(dark-mode) {
-//     --button-shadow-normal: 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(
-//                 3.6
-//             )} 0 rgba(var(--color-black), 0.632),
-//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-//             rgba(var(--color-black), 0.608);
-
-//     --button-shadow-hovered: 0 #{functions.pxToRem(2)} #{functions.pxToRem(6)}
-//             rgba(var(--color-black), 0.55),
-//         0 #{functions.pxToRem(6)} #{functions.pxToRem(10)}
-//             rgba(var(--color-black), 0.45);
-
-//     --button-shadow-pressed: 0 #{functions.pxToRem(1)} #{functions.pxToRem(3)} 0
-//             rgba(var(--color-black), 0.532),
-//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-//             rgba(var(--color-black), 0.508);
-
-//     --button-shadow-inset: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(3.5)}
-//             0 rgba(var(--color-black), 0.532) inset,
-//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0
-//             rgba(var(--color-black), 0.508) inset,
-//         0 0 #{functions.pxToRem(4)} rgba(var(--color-white), 0.1);
-
-//     --button-shadow-inset-pressed: 0 #{functions.pxToRem(0.5)} #{functions.pxToRem(
-//                 5.5
-//             )} 0 rgba(var(--color-black), 0.532) inset,
-//         0 #{functions.pxToRem(0.3)} #{functions.pxToRem(1.9)} 0
-//             rgba(var(--color-black), 0.52) inset,
-//         0 0 #{functions.pxToRem(3)} rgba(var(--color-white), 0.1);
-
-//     --shadow-depth-8: 0 #{functions.pxToRem(3.2)} #{functions.pxToRem(7.2)} 0
-//             rgba(var(--color-black), 0.532),
-//         0 #{functions.pxToRem(0.6)} #{functions.pxToRem(1.8)} 0
-//             rgba(var(--color-black), 0.508);
-
-//     --shadow-depth-8-reversed: 0 #{functions.pxToRem(-3.2)} #{functions.pxToRem(
-//                 7.2
-//             )} 0 rgba(var(--color-black), 0.532),
-//         0 #{functions.pxToRem(-0.6)} #{functions.pxToRem(1.8)} 0
-//             rgba(var(--color-black), 0.508);
-
-//     --shadow-depth-16: 0 #{functions.pxToRem(6.4)} #{functions.pxToRem(14.4)} 0
-//             rgba(var(--color-black), 0.532),
-//         0 #{functions.pxToRem(1.2)} #{functions.pxToRem(3.6)} 0
-//             rgba(var(--color-black), 0.508);
-
-//     --shadow-depth-64: 0 #{functions.pxToRem(25.6)} #{functions.pxToRem(57.6)} 0
-//             rgba(var(--color-black), 0.22),
-//         0 #{functions.pxToRem(4.8)} #{functions.pxToRem(14.4)} 0
-//             rgba(var(--color-black), 0.58);
-
-//     --shadow-inflated-8: #{functions.pxToRem(-2)} #{functions.pxToRem(-2)} #{functions.pxToRem(
-//                 6
-//             )} rgba(var(--color-black), 0.21),
-//         #{functions.pxToRem(-4)} #{functions.pxToRem(-4)} #{functions.pxToRem(
-//                 10
-//             )} rgba(var(--color-white), 0.08),
-//         #{functions.pxToRem(4)} #{functions.pxToRem(4)} #{functions.pxToRem(10)}
-//             rgba(var(--color-black), 0.46),
-//         #{functions.pxToRem(1)} #{functions.pxToRem(1)} #{functions.pxToRem(10)}
-//             rgba(var(--color-white), 0.16),
-//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
-//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-
-//     --shadow-inflated-16: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
-//                 6
-//             )} rgba(var(--color-black), 0.21),
-//         #{functions.pxToRem(-6)} #{functions.pxToRem(-6)} #{functions.pxToRem(
-//                 16
-//             )} rgba(var(--color-white), 0.1),
-//         #{functions.pxToRem(6)} #{functions.pxToRem(6)} #{functions.pxToRem(16)}
-//             rgba(var(--color-black), 0.46),
-//         #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
-//             rgba(var(--color-white), 0.16),
-//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
-//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-
-//     --shadow-inflated-64: #{functions.pxToRem(-3)} #{functions.pxToRem(-3)} #{functions.pxToRem(
-//                 6
-//             )} rgba(var(--color-black), 0.21),
-//         #{functions.pxToRem(-10)} #{functions.pxToRem(-10)} #{functions.pxToRem(
-//                 30
-//             )} rgba(var(--color-white), 0.2),
-//         #{functions.pxToRem(10)} #{functions.pxToRem(10)} #{functions.pxToRem(
-//                 36
-//             )} rgba(var(--color-black), 0.46),
-//         #{functions.pxToRem(2)} #{functions.pxToRem(2)} #{functions.pxToRem(10)}
-//             rgba(var(--color-white), 0.16),
-//         -1px -1px 0 1px rgba(var(--color-black), 0.37) inset,
-//         0 0 1px 1px rgba(var(--color-white), 0.2) inset;
-// }

package/dist/scss/mixins.scss

@@ -63,33 +63,55 @@
     }
 }
 
+$clickable-normal-state-transitions: (
+    color var(--limel-clickable-transition-speed, 0.4s) ease,
+    background-color var(--limel-clickable-transition-speed, 0.4s) ease,
+    box-shadow var(--limel-clickable-transform-speed, 0.4s) ease,
+    transform var(--limel-clickable-transform-speed, 0.4s)
+        var(--limel-clickable-transform-timing-function, ease)
+);
+
 @mixin is-elevated-clickable(
     $color: var(--mdc-theme-on-surface),
     $color--hovered: var(--mdc-theme-on-surface),
     $background-color: var(--lime-elevated-surface-background-color),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, -0.04rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         box-shadow: var(--button-shadow-pressed);
+    }
 
-        transform: translate3d(0, 0.08rem, 0);
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -100,27 +122,42 @@
     $background-color--hovered: var(--lime-elevated-surface-background-color),
     $background-color--inset: var(--mdc-theme-surface)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
     box-shadow: var(--button-shadow-normal);
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, 0.01rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         background-color: $background-color--inset;
         box-shadow: var(--button-shadow-inset-pressed);
-        transform: translate3d(0, 0.05rem, 0);
+    }
+
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -130,26 +167,40 @@
     $color--hovered: var(--mdc-theme-on-surface),
     $background-color--hovered: var(--lime-elevated-surface-background-color)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, 0.01rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         box-shadow: var(--button-shadow-pressed);
+    }
 
-        transform: translate3d(0, 0.08rem, 0);
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }
 
@@ -160,26 +211,41 @@
     $background-color--hovered: var(--lime-elevated-surface-background-color),
     $background-color--inset: var(--mdc-theme-surface)
 ) {
-    transition:
-        color 0.2s ease,
-        background-color 0.2s ease,
-        box-shadow 0.2s ease,
-        transform 0.1s ease-out;
+    transition: $clickable-normal-state-transitions;
 
     cursor: pointer;
     color: $color;
     background-color: $background-color;
 
+    &:hover,
+    &:focus,
+    &:focus-visible {
+        will-change: color, background-color, box-shadow, transform;
+    }
+
     &:hover {
+        transform: translate3d(0, -0.04rem, 0);
         color: $color--hovered;
         background-color: $background-color--hovered;
         box-shadow: var(--button-shadow-hovered);
     }
 
     &:active {
+        --limel-clickable-transform-timing-function: cubic-bezier(
+            0.83,
+            -0.15,
+            0.49,
+            1.16
+        );
+        transform: translate3d(0, 0.05rem, 0);
         background-color: $background-color--inset;
         box-shadow: var(--button-shadow-inset-pressed);
-        transform: translate3d(0, 0.05rem, 0);
+    }
+
+    &:hover,
+    &:active {
+        --limel-clickable-transition-speed: 0.2s;
+        --limel-clickable-transform-speed: 0.16s;
     }
 }