From 5b56b1a479f5b9930ca7eb2cb269b184d48b461c Mon Sep 17 00:00:00 2001
From: Jesper Kaltoft Vind <git@jesperkaltoft.dk>
Date: Fri, 25 Mar 2022 12:37:36 +0100
Subject: [PATCH] Interaction state hover for checkbox (#2122)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 💄 Add function that calculates hover color

* 💄 Apply transition

* ♻️ 💄 Move helper function to shared location

https://github.com/kirbydesign/designsystem/pull/2128 also needs to
calculate color in the exact same way
---
 .../src/scss/interaction-state/_index.scss    |  1 +
 .../scss/interaction-state/_utilities.scss    | 20 +++++++++++++++++++
 .../checkbox/checkbox.component.scss          | 13 ++++++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 libs/core/src/scss/interaction-state/_utilities.scss

diff --git a/libs/core/src/scss/interaction-state/_index.scss b/libs/core/src/scss/interaction-state/_index.scss
index 7a9642091d..c9d273abda 100644
--- 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
new file mode 100644
index 0000000000..24029f8eba
--- /dev/null
+++ 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
index 73e5f1d2e8..d013f62529 100644
--- 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')};