Move shared functionality to utilities partial

.stylelintrc

@@ -26,6 +26,12 @@
       {
         "ignore": ["custom-properties"]
       }
+    ],
+    "declaration-block-no-redundant-longhand-properties": [
+      true,
+      {
+        "ignoreShorthands": ["transition"]
+      }
     ]
   }
 }

libs/core/src/scss/interaction-state/_focus.scss

@@ -1,3 +1,4 @@
+@use 'interaction-state.utilities';
 @use '../utils';
 
 // ---------------------------------------------------------------------------
@@ -60,7 +61,8 @@
 
 @mixin _focus-ring($shadow, $gap) {
   $stroke-width: utils.size('xxxxs');
+
   box-shadow: #{$shadow}, 0 0 0 $gap #{utils.get-color('background-color')},
     0 0 0 $gap + $stroke-width utils.$focus-ring-color;
-  transition: box-shadow utils.get-transition-duration('quick');
+  transition: box-shadow interaction-state.$default-transition-duration;
 }

libs/core/src/scss/interaction-state/_hover.scss

@@ -1,9 +1,11 @@
+@use 'interaction-state.utilities';
 @use 'layer';
 @use '../utils';
 
-@mixin apply-hover($loudness: layer.$default-loudness, $flip: false) {
+@mixin apply-hover($loudness: interaction-state.$default-loudness, $flip: false) {
   @include utils.hover {
     @include layer.apply-state($loudness, $flip);
+
     cursor: pointer;
     @content;
   }

libs/core/src/scss/interaction-state/_index.scss

@@ -1,4 +1,4 @@
 @forward 'focus';
 @forward 'hover';
 @forward 'layer' hide apply-state;
-@forward 'utilities';
+@forward 'interaction-state.utilities';

libs/core/src/scss/interaction-state/_interaction-state.utilities.scss

@@ -0,0 +1,35 @@
+@use 'sass:color';
+@use 'sass:list';
+@use '../utils';
+
+$default-loudness: 'm';
+$default-transition-duration: utils.get-transition-duration('quick');
+
+@function get-state-color($variant, $loudness: $default-loudness, $flip: false) {
+  $_background: utils.get-color($variant, $getValueOnly: true);
+  $_lightness: 0% !default;
+
+  @if $flip {
+    $_lightness: utils.get-loudness($loudness);
+  } @else {
+    // negative number means "make it darker"
+    $_lightness: -1 * utils.get-loudness($loudness);
+  }
+
+  $hover-color: #{color.scale($_background, $lightness: $_lightness)};
+
+  @return $hover-color;
+}
+
+/// Apply streamlined transition to interaction state changes
+/// @param {*} $property-list [all]
+@mixin transition($property-list...) {
+  @if list.length($property-list) == 0 {
+    $property-list: all;
+  }
+
+  transition-property: $property-list;
+  transition-duration: $default-transition-duration;
+  transition-timing-function: utils.get-transition-easing('static');
+  transition-delay: 0ms;
+}

libs/core/src/scss/interaction-state/_layer.scss

@@ -1,26 +1,21 @@
-@use 'sass:list';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'interaction-state.utilities';
 @use '../utils';
 
 // Put state layer above content layer as default.
 // You can change move the content layer on top by declaring e.g.:
-//
 //    --content-layer-z-index: calc(#{layer.$state-layer-z-index} + 1);
-//
 // in a component that uses interaction state layer.
 $_content-layer-z-index: utils.z('default');
 $state-layer-z-index: $_content-layer-z-index + 1;
-
 $_dark: utils.get-color('black');
 $_light: utils.get-color('black-contrast');
 
-$default-loudness: 'm';
-
 /// Prepare state layer and content layer for interaction state changes.
 /// Should be initialized before applying hover.
-/// @param {*} $border-width [0px] - Necessary for making the state layer cover border (if any) on parent element
-@mixin initialize-layer($border-width: 0px) {
+/// @param {*} $border-width [0] - Necessary for making the state layer cover border (if any) on parent element
+@mixin initialize-layer($border-width: 0) {
   --state-layer-opacity: 0;
   --state-layer-background-color: $_dark;
 
@@ -33,6 +28,7 @@ $default-loudness: 'm';
 
   .state-layer {
     position: absolute;
+
     // When we use negated value of border-width on parent for inset
     // then the hover effect (state layer) will also cover the border.
     // Otherwise the border will not be affected on hover.
@@ -41,24 +37,22 @@ $default-loudness: 'm';
     overflow: hidden;
     pointer-events: none;
     border-radius: inherit;
-
     z-index: $state-layer-z-index;
 
     &::before {
-      @include transition;
+      @include interaction-state.transition;
 
       content: '';
       position: absolute;
       pointer-events: none;
       inset: -50%;
-
       opacity: var(--state-layer-opacity, 0);
       background-color: var(--state-layer-background-color, $_dark);
     }
   }
 }
 
-@mixin apply-state($loudness: $default-loudness, $flip: false) {
+@mixin apply-state($loudness: interaction-state.$default-loudness, $flip: false) {
   $loudness-percent: utils.get-loudness($loudness);
 
   @if not(meta.type-of($loudness-percent) == number and math.unit($loudness-percent) == '%') {
@@ -79,15 +73,3 @@ $default-loudness: 'm';
     @content;
   }
 }
-
-/// Apply streamlined transition to interaction state changes
-/// @param {*} $property-list [all]
-@mixin transition($property-list...) {
-  @if list.length($property-list) == 0 {
-    $property-list: all;
-  }
-  transition-property: $property-list;
-  transition-duration: utils.get-transition-duration('quick');
-  transition-timing-function: utils.get-transition-easing('static');
-  transition-delay: 0ms;
-}

libs/core/src/scss/interaction-state/ionic/_hover.scss

@@ -1,9 +1,11 @@
+@use '../interaction-state.utilities';
 @use '../layer';
 @use '../../utils';
 
-@mixin apply-hover($loudness: layer.$default-loudness, $flip: false) {
+@mixin apply-hover($loudness: interaction-state.$default-loudness, $flip: false) {
   @include utils.hover {
     @include layer.apply-state($loudness, $flip);
+
     --background-hover: var(--state-layer-background-color);
     --background-hover-opacity: var(--state-layer-opacity);
     @content;

libs/core/src/scss/interaction-state/ionic/_index.scss

@@ -1,2 +1,2 @@
-@forward '../layer' show transition;
 @forward 'hover';
+@forward '../interaction-state.utilities' show transition;