Merge pull request #8028 from weseek/support/129382-renamed-color-yiq

support: Bootstrap v5 breaking changes Sass

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,7 @@
   //     background-color: hsl.lighten(var(--bgcolor-global),5%);
   //   }
 
+  // TODO: theme-color() dropped in bootstrap v5
   // TODO: .input-group-prepend dropped in bootstrap v5
   // https://redmine.weseek.co.jp/issues/128307
   //   .input-group > .input-group-prepend > .input-group-text {

apps/app/src/styles/theme/_hsl-reboot-bootstrap-theme-colors.scss

@@ -21,18 +21,20 @@ $hsl-colors: (
   }
 }
 
-@each $color, $value in $hsl-colors {
-  .text-#{$color} {
-    color: $value !important;
-    @if $emphasized-link-hover-darken-percentage != 0 {
-      a {
-        @include hover-focus() {
-          color: hsl.darken($value, $emphasized-link-hover-darken-percentage) !important;
-        }
-      }
-    }
-  }
-}
+// TODO: hover-focus() dropped in bootstrap v5
+// https://redmine.weseek.co.jp/issues/128307
+// @each $color, $value in $hsl-colors {
+//   .text-#{$color} {
+//     color: $value !important;
+//     @if $emphasized-link-hover-darken-percentage != 0 {
+//       a {
+//         @include hover-focus() {
+//           color: hsl.darken($value, $emphasized-link-hover-darken-percentage) !important;
+//         }
+//       }
+//     }
+//   }
+// }
 
 @each $color, $value in $hsl-colors {
   .btn-#{$color} {

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/_reboot-bootstrap-theme-colors.scss

@@ -72,24 +72,26 @@
   }
 }
 
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    @include alert-variant(
-      theme-color-level($color, $alert-bg-level),
-      theme-color-level($color, $alert-border-level),
-      theme-color-level($color, $alert-color-level)
-    );
-  }
-  // Alert link
-  :root, .wiki {
-    .alert.alert-#{$color} {
-      a,
-      a:hover {
-        color: theme-color-level($color, $alert-color-level - 2);
-      }
-    }
-  }
-}
+// TODO: activate (https://redmine.weseek.co.jp/issues/128307)
+// theme-color-level() dropped in bootstrap v5
+// @each $color, $value in $theme-colors {
+//   .alert-#{$color} {
+//     @include alert-variant(
+//       theme-color-level($color, $alert-bg-level),
+//       theme-color-level($color, $alert-border-level),
+//       theme-color-level($color, $alert-color-level)
+//     );
+//   }
+//   // Alert link
+//   :root, .wiki {
+//     .alert.alert-#{$color} {
+//       a,
+//       a:hover {
+//         color: theme-color-level($color, $alert-color-level - 2);
+//       }
+//     }
+//   }
+// }
 
 @each $color, $value in $theme-colors {
   .bg-#{$color} {

apps/app/src/styles/theme/apply-colors.scss

@@ -66,6 +66,7 @@ code:not([class^='language-']) {
 //
 
 // TODO: activate (https://redmine.weseek.co.jp/issues/128307)
+// theme-color-level() dropped in bootstrap v5
 // Alert link
 // @each $color, $value in $theme-colors {
 //   .alert.alert-#{$color} {
@@ -90,6 +91,7 @@ code:not([class^='language-']) {
 }
 
 // TODO: activate (https://redmine.weseek.co.jp/issues/128307)
+// form-control-focus() dropped in bootstrap v5
 // Form
 // .form-control {
 //   @include form-control-focus();

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

@@ -7,10 +7,12 @@
   background-color: $bg;
 
   @at-root a#{&} {
-    @include bs.hover-focus() {
-      color: hsl.contrast($bg);
-      background-color: hsl.darken($bg, 10%);
-    }
+    // TODO: hover-focus() dropped in bootstrap v5
+    // https://redmine.weseek.co.jp/issues/128307
+    // @include bs.hover-focus() {
+    //   color: hsl.contrast($bg);
+    //   background-color: hsl.darken($bg, 10%);
+    // }
 
     &:focus,
     &.focus {

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

@@ -22,6 +22,8 @@
     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-yiq($background), $border, 15%), .5));
     // } @else {
@@ -54,6 +56,8 @@
   //   }
   //   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-yiq($background), $border, 15%), .5));

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

@@ -23,6 +23,8 @@
     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-yiq($background), $border, 15%), .5));
     // } @else {
@@ -55,6 +57,8 @@
   //   }
   //   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-yiq($background), $border, 15%), .5));