comment out

apps/app/src/styles/theme/_reboot-bootstrap-dropdown.scss

@@ -15,6 +15,7 @@
     fill: $color-dropdown-link;
   }
 
+  // TODO: hover-focus() dropped in bootstrap v5
   @include hover-focus() {
     color: $color-dropdown-link;
     svg {

apps/app/src/styles/theme/_reboot-bootstrap-nav.scss

@@ -26,6 +26,7 @@
     border: $nav-tabs-border-width solid transparent;
     @include border-top-radius($nav-tabs-border-radius);
 
+    // TODO: hover-focus() dropped in bootstrap v5
     @include hover-focus() {
       border-color: $nav-tabs-link-hover-border-color;
     }

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

@@ -22,11 +22,13 @@
     color: hsl.contrast($background);
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
+    // TODO: color-yiq() to color-contrast()
+    // https://redmine.weseek.co.jp/issues/128307
     // @if $enable-shadows {
-    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5));
+    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($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-contrast($background), $border, 15%), .5);
+    //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
     // }
   }
 
@@ -54,18 +56,20 @@
   //   }
   //   border-color: $active-border;
 
+  // TODO: color-yiq() to color-contrast()
+  // https://redmine.weseek.co.jp/issues/128307
   //   &: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-contrast($background), $border, 15%), .5));
+  //     //   @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($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-contrast($background), $border, 15%), .5);
+  //     //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
   //     // }
   //   }
   // }
 }
 
-// @mixin button-outline-variant($color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color) {
+// @mixin button-outline-variant($color, $color-hover: color-yiq($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/theme/mixins/_hsl-button.scss

@@ -23,11 +23,13 @@
     color: hsl.contrast($background);
     @include bs.gradient-bg($hover-background);
     border-color: $hover-border;
+    // TODO: color-yiq() to color-contrast()
+    // https://redmine.weseek.co.jp/issues/128307
     // @if $enable-shadows {
-    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), .5));
+    //   @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($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-contrast($background), $border, 15%), .5);
+    //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
     // }
   }
 
@@ -55,18 +57,20 @@
   //   }
   //   border-color: $active-border;
 
+  // TODO: color-yiq() to color-contrast()
+  // https://redmine.weseek.co.jp/issues/128307
   //   &: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-contrast($background), $border, 15%), .5));
+  //     //   @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($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-contrast($background), $border, 15%), .5);
+  //     //   box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
   //     // }
   //   }
   // }
 }
 
-// @mixin button-outline-variant($color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color) {
+// @mixin button-outline-variant($color, $color-hover: color-yiq($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;