Interaction state hover for checkbox (#2122)

* 💄 Add function that calculates hover color * 💄 Apply transition * ♻️ 💄 Move helper function to shared location #2128 also needs to calculate color in the exact same way
kirbydesign · Mar 25, 2022 · 5b56b1a · 5b56b1a
1 parent 04939cb
commit 5b56b1a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/libs/core/src/scss/interaction-state/_index.scss b/libs/core/src/scss/interaction-state/_index.scss
@@ -1,3 +1,4 @@
 @forward 'focus';
 @forward 'hover';
 @forward 'layer' hide apply-state;
+@forward 'utilities';
diff --git a/libs/core/src/scss/interaction-state/_utilities.scss b/libs/core/src/scss/interaction-state/_utilities.scss
@@ -0,0 +1,20 @@
+@use 'sass:color';
+@use 'layer';
+@use '../utils';
+
+@function get-state-color($variant, $loudness: layer.$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;
+}
diff --git a/libs/designsystem/src/lib/components/checkbox/checkbox.component.scss b/libs/designsystem/src/lib/components/checkbox/checkbox.component.scss
@@ -20,6 +20,10 @@ $default-checkbox-radio-size: map.get(utils.$checkbox-radio-sizes, 'md');
     --background-checked: #{utils.get-color('success')};
     --border-color-checked: #{utils.get-color('success')};
 
+    @include interaction-state.apply-hover {
+      --background-checked: #{interaction-state.get-state-color('success')};
+    }
+
     &:active {
       --background-checked: #{utils.get-color('success-shade')};
       --border-color-checked: #{utils.get-color('success-shade')};
@@ -31,6 +35,10 @@ $default-checkbox-radio-size: map.get(utils.$checkbox-radio-sizes, 'md');
     --background-checked: #{utils.get-color('black')};
     --border-color-checked: #{utils.get-color('black')};
 
+    @include interaction-state.apply-hover {
+      --background-checked: #{interaction-state.get-state-color('black', 'xxl', $flip: true)};
+    }
+
     &:active {
       --checkmark-color: #{utils.get-color('white-shade')};
       --background-checked: #{utils.get-color('black-tint')};
@@ -57,6 +65,11 @@ $default-checkbox-radio-size: map.get(utils.$checkbox-radio-sizes, 'md');
 
   ion-checkbox {
     @include interaction-state.apply-focus-part($part: 'container');
+    @include interaction-state.apply-hover {
+      --background: #{interaction-state.get-state-color('white', 's')};
+    }
+
+    --transition: #{utils.get-transition-duration('quick')};
 
     --size: #{$checkbox-icon-size};
     --checkmark-width: #{utils.size('xxxs')};