💄 Change state layer 'flip' arg to 'make-lighter'

kirbydesign · Apr 27, 2022 · ecc5462 · ecc5462
1 parent 9067082
commit ecc5462
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 16 deletions.
diff --git a/libs/core/src/scss/interaction-state/_hover.scss b/libs/core/src/scss/interaction-state/_hover.scss
@@ -2,9 +2,9 @@
 @use 'layer';
 @use '../utils';
 
-@mixin apply-hover($loudness: interaction-state.$default-loudness, $flip: false) {
+@mixin apply-hover($loudness: interaction-state.$default-loudness, $make-lighter: false) {
   @include utils.hover {
-    @include layer.apply-state($loudness, $flip);
+    @include layer.apply-state($loudness, $make-lighter);
 
     cursor: pointer;
     @content;

diff --git a/libs/core/src/scss/interaction-state/_interaction-state.utilities.scss b/libs/core/src/scss/interaction-state/_interaction-state.utilities.scss
@@ -5,11 +5,11 @@
 $default-loudness: 'm';
 $default-transition-duration: utils.get-transition-duration('quick');
 
-@function get-state-color($variant, $loudness: $default-loudness, $flip: false) {
+@function get-state-color($variant, $loudness: $default-loudness, $make-lighter: false) {
   $_background: utils.get-color($variant, $getValueOnly: true);
   $_lightness: 0% !default;
 
-  @if $flip {
+  @if $make-lighter {
     $_lightness: utils.get-loudness($loudness);
   } @else {
     // negative number means "make it darker"

diff --git a/libs/core/src/scss/interaction-state/_layer.scss b/libs/core/src/scss/interaction-state/_layer.scss
@@ -52,7 +52,7 @@ $_light: utils.get-color('black-contrast');
   }
 }
 
-@mixin apply-state($loudness: interaction-state.$default-loudness, $flip: false) {
+@mixin apply-state($loudness: interaction-state.$default-loudness, $make-lighter: false) {
   $loudness-percent: utils.get-loudness($loudness);
 
   @if not(meta.type-of($loudness-percent) == number and math.unit($loudness-percent) == '%') {
@@ -61,7 +61,7 @@ $_light: utils.get-color('black-contrast');
 
   --state-layer-opacity: #{$loudness-percent / 100%};
 
-  @if $flip {
+  @if $make-lighter {
     --state-layer-background-color: #{$_light};
   } @else {
     --state-layer-background-color: #{$_dark};

diff --git a/libs/core/src/scss/interaction-state/ionic/_hover.scss b/libs/core/src/scss/interaction-state/ionic/_hover.scss
@@ -2,9 +2,9 @@
 @use '../layer';
 @use '../../utils';
 
-@mixin apply-hover($loudness: interaction-state.$default-loudness, $flip: false) {
+@mixin apply-hover($loudness: interaction-state.$default-loudness, $make-lighter: false) {
   @include utils.hover {
-    @include layer.apply-state($loudness, $flip);
+    @include layer.apply-state($loudness, $make-lighter);
 
     --background-hover: var(--state-layer-background-color);
     --background-hover-opacity: var(--state-layer-opacity);

diff --git a/libs/designsystem/src/lib/components/button/button.component.scss b/libs/designsystem/src/lib/components/button/button.component.scss
@@ -74,7 +74,7 @@ $button-width: (
   --kirby-button-background-color: #{utils.get-color('black')};
   --kirby-button-color: #{utils.get-color('black-contrast')};
 
-  @include interaction-state.apply-hover('xxl', $flip: true);
+  @include interaction-state.apply-hover('xxl', $make-lighter: true);
 
   &.destructive {
     --kirby-button-background-color: #{utils.get-color('light')};
@@ -219,7 +219,7 @@ $button-width: (
       --kirby-button-border-color: #{utils.get-color('white')};
       --kirby-button-color: #{utils.get-color('white')};
 
-      @include interaction-state.apply-hover('l', $flip: true);
+      @include interaction-state.apply-hover('l', $make-lighter: true);
     }
   }
 

diff --git a/libs/designsystem/src/lib/components/calendar/calendar.component.scss b/libs/designsystem/src/lib/components/calendar/calendar.component.scss
@@ -106,7 +106,7 @@ td {
 }
 
 .day.selected {
-  @include interaction-state.apply-hover('xl', $flip: true);
+  @include interaction-state.apply-hover('xl', $make-lighter: true);
 
   color: utils.get-color('black-contrast');
   background-color: utils.get-color('black');

diff --git a/libs/designsystem/src/lib/components/checkbox/checkbox.component.scss b/libs/designsystem/src/lib/components/checkbox/checkbox.component.scss
@@ -36,7 +36,7 @@ $default-checkbox-radio-size: map.get(utils.$checkbox-radio-sizes, 'md');
     --border-color-checked: #{utils.get-color('black')};
 
     @include interaction-state.apply-hover {
-      --background-checked: #{interaction-state.get-state-color('black', 'xxl', $flip: true)};
+      --background-checked: #{interaction-state.get-state-color('black', 'xxl', $make-lighter: true)};
     }
 
     &:active {

diff --git a/libs/designsystem/src/lib/components/chip/chip.component.scss b/libs/designsystem/src/lib/components/chip/chip.component.scss
@@ -11,7 +11,7 @@
   color: utils.get-color('white-contrast');
 
   &.is-selected {
-    @include interaction-state.apply-hover('xxl', $flip: true);
+    @include interaction-state.apply-hover('xxl', $make-lighter: true);
 
     background-color: utils.get-color('black');
     color: utils.get-color('black-contrast');
@@ -36,7 +36,7 @@
   user-select: none;
 
   :host-context(.kirby-color-brightness-dark) {
-    @include interaction-state.apply-hover($flip: true);
+    @include interaction-state.apply-hover($make-lighter: true);
 
     background-color: transparent;
     color: utils.get-text-color('white');
@@ -54,7 +54,7 @@
     color: utils.get-text-color('black');
 
     &.is-selected {
-      @include interaction-state.apply-hover('xxl', $flip: true);
+      @include interaction-state.apply-hover('xxl', $make-lighter: true);
 
       background-color: utils.get-color('black');
       color: utils.get-color('black-contrast');
@@ -66,7 +66,7 @@
     color: utils.get-text-color('black');
 
     &.is-selected {
-      @include interaction-state.apply-hover('xl', $flip: true);
+      @include interaction-state.apply-hover('xl', $make-lighter: true);
 
       background-color: utils.get-color('black');
       color: utils.get-color('black-contrast');