@limetech/lime-elements 37.64.2 → 37.64.4

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;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.64.2",
+  "version": "37.64.4",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -27,9 +27,9 @@
     "lint": "npm run lint:src && npm run lint:scss",
     "lint:fix": "npm run lint:src:fix && npm run lint:scss:fix",
     "lint:prod": "npm run lint:src:prod && npm run lint:scss:prod",
-    "lint:src": "eslint \"**/*.{ts,tsx,js}\" --max-warnings=666 && prettier -c \"{!(package*).json,.prettierrc}\"",
-    "lint:src:fix": "eslint \"**/*.{ts,tsx,js}\" --fix --max-warnings=666 && prettier --write \"{!(package*).json,.prettierrc}\"",
-    "lint:src:prod": "eslint \"**/*.{ts,tsx,js}\" --rule \"linebreak-style: [error, unix]\" --max-warnings=666 && prettier -c \"{!(package*).json,.prettierrc}\"",
+    "lint:src": "eslint \"**/*.{ts,tsx,js}\" --max-warnings=1190 && prettier -c \"{!(package*).json,.prettierrc}\"",
+    "lint:src:fix": "eslint \"**/*.{ts,tsx,js}\" --fix --max-warnings=1190 && prettier --write \"{!(package*).json,.prettierrc}\"",
+    "lint:src:prod": "eslint \"**/*.{ts,tsx,js}\" --rule \"linebreak-style: [error, unix]\" --max-warnings=1190 && prettier -c \"{!(package*).json,.prettierrc}\"",
     "lint:scss": "prettier -c --ignore-path ./.gitignore **/*.scss",
     "lint:scss:fix": "prettier --write --ignore-path ./.gitignore **/*.scss",
     "lint:scss:prod": "prettier -c --end-of-line lf --ignore-path ./.gitignore **/*.scss",
@@ -59,18 +59,18 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^8.10.0",
-    "@typescript-eslint/parser": "^8.10.0",
+    "@typescript-eslint/eslint-plugin": "^8.12.2",
+    "@typescript-eslint/parser": "^8.12.2",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.13",
-    "eslint": "^9.12.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-ban": "^1.6.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.1",
-    "eslint-plugin-sonarjs": "^2.0.3",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-sonarjs": "^2.0.4",
     "eslint-plugin-tsdoc": "^0.3.0",
     "flatpickr": "^4.6.13",
     "globals": "^15.11.0",