replace color yiq to color contrast

apps/app/src/styles/atoms/mixins/_buttons.scss

@@ -2,19 +2,19 @@
 
 @mixin button-svg-icon-variant($background, $hover-background: darken($background, 7.5%), $active-background: darken($background, 10%)) {
   svg {
-    fill: color-yiq($background);
+    fill: color-contrast($background);
   }
 
   &:hover {
     svg {
-      fill: color-yiq($hover-background);
+      fill: color-contrast($hover-background);
     }
   }
 
   &:focus,
   &.focus {
     svg {
-      fill: color-yiq($hover-background);
+      fill: color-contrast($hover-background);
     }
   }
 
@@ -22,7 +22,7 @@
   &.disabled,
   &:disabled {
     svg {
-      fill: color-yiq($background);
+      fill: color-contrast($background);
     }
   }
 
@@ -30,7 +30,7 @@
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
     svg {
-      fill: color-yiq($active-background);
+      fill: color-contrast($active-background);
     }
   }
 }

apps/app/src/styles/theme/_apply-colors-dark.scss

@@ -94,6 +94,8 @@
   //     background-color: hsl.lighten(var(--bgcolor-global),5%);
   //   }
 
+  // TODO: theme-color() dropped in bootstrap v5
+  // https://redmine.weseek.co.jp/issues/128307
   //   .input-group > .input-group-prepend > .input-group-text {
   //     color: theme-color('light');
   //     background-color: theme-color('secondary');

apps/app/src/styles/theme/mixins/_hsl-button.scss

@@ -23,10 +23,10 @@
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
     // @if $enable-shadows {
-    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5));
     // } @else {
     //   // Avoid using mixin so we can pass custom focus shadow properly
-    //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+    //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5);
     // }
   }
 
@@ -56,16 +56,16 @@
 
   //   &:focus {
   //     // @if $enable-shadows and $btn-active-box-shadow != none {
-  //     //   @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+  //     //   @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5));
   //     // } @else {
   //     //   // Avoid using mixin so we can pass custom focus shadow properly
-  //     //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+  //     //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5);
   //     // }
   //   }
   // }
 }
 
-// @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+// @mixin button-outline-variant($color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color) {
 @mixin button-outline-variant($color, $color-hover: hsl.contrast($color), $active-background: $color, $active-border: $color) {
   color: $color;
   border-color: $color;

packages/preset-themes/src/styles/atoms/mixins/_buttons.scss

@@ -2,19 +2,19 @@
 
 @mixin button-svg-icon-variant($background, $hover-background: darken($background, 7.5%), $active-background: darken($background, 10%)) {
   svg {
-    fill: color-yiq($background);
+    fill: color-contrast($background);
   }
 
   &:hover {
     svg {
-      fill: color-yiq($hover-background);
+      fill: color-contrast($hover-background);
     }
   }
 
   &:focus,
   &.focus {
     svg {
-      fill: color-yiq($hover-background);
+      fill: color-contrast($hover-background);
     }
   }
 
@@ -22,7 +22,7 @@
   &.disabled,
   &:disabled {
     svg {
-      fill: color-yiq($background);
+      fill: color-contrast($background);
     }
   }
 
@@ -30,7 +30,7 @@
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
     svg {
-      fill: color-yiq($active-background);
+      fill: color-contrast($active-background);
     }
   }
 }

packages/preset-themes/src/styles/theme/mixins/_hsl-button.scss

@@ -24,10 +24,10 @@
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
     // @if $enable-shadows {
-    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5));
     // } @else {
     //   // Avoid using mixin so we can pass custom focus shadow properly
-    //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+    //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5);
     // }
   }
 
@@ -57,16 +57,16 @@
 
   //   &:focus {
   //     // @if $enable-shadows and $btn-active-box-shadow != none {
-  //     //   @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
+  //     //   @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5));
   //     // } @else {
   //     //   // Avoid using mixin so we can pass custom focus shadow properly
-  //     //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
+  //     //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5);
   //     // }
   //   }
   // }
 }
 
-// @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+// @mixin button-outline-variant($color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color) {
 @mixin button-outline-variant($color, $color-hover: hsl.contrast($color), $active-background: $color, $active-border: $color) {
   color: $color;
   border-color: $color;