MDL-81816 core_theme: Refactor theme-color-level for BS5

.upgradenotes/MDL-81816-2024060307371918.yml

@@ -0,0 +1,7 @@
+issueNumber: MDL-81816
+notes:
+  theme_boost:
+    - message: >-
+        Bridged theme-color-level using a new shift-color function to prepare
+        for its deprecation in Boostrap 5.
+      type: improved

theme/boost/scss/moodle/bs5-bridge.scss

@@ -1,5 +1,39 @@
 /* Bootstrap 5 bridge classes */
 
+/*
+ * These variables used to bridge the gap between Bootstrap 4 and Bootstrap 5 for
+ * alert and list-group-item.
+ */
+
+// Reduces the background color intensity by 80%. This is the definition in BS5.
+$alert-bg-scale: -80% !default;
+// Reduces the border color intensity by 70%. This is the definition in BS5.
+$alert-border-scale: -70% !default;
+// Increases the text color intensity by 50%. This is the definition in BS5.
+$alert-color-scale: 50% !default;
+
+/*
+ * These function used to bridge the gap between Bootstrap 4 and Bootstrap 5 and
+ * and will be located in __functions.scss in Bootstrap 5
+ * This file should be removed as part of MDL-75669.
+ */
+
+// Tint a color: mix a color with white based on the provided weight.
+@function tint-color($color, $weight) {
+    @return mix(white, $color, $weight);
+}
+
+// Shade a color: mix a color with black.
+// This function darkens a given color with black based on the provided weight.
+@function shade-color($color, $weight) {
+    @return mix(black, $color, $weight);
+}
+
+// Shade the color if the weight is positive, else tint it.
+@function shift-color($color, $weight) {
+    @return if($weight > 0, shade-color($color, $weight), tint-color($color, -$weight));
+}
+
 /* These classes are used to bridge the gap between Bootstrap 4 and Bootstrap 5. */
 /* This file should be removed as part of MDL-75669. */
 .g-0 {

theme/boost/scss/moodle/core.scss

@@ -6,8 +6,8 @@ $dropzone-border: $gray-900 !default;
 
 $collapse-list-item-padding-y: 0.5rem !default;
 $collapse-list-item-padding-x: 1rem !default;
-$collapse-list-item-hover-bg: theme-color-level('info', -11) !default;
-$collapse-list-item-hover-border: theme-color-level('info', -9) !default;
+$collapse-list-item-hover-bg: shift-color($info, -90%) !default;
+$collapse-list-item-hover-border: shift-color($info, -70%) !default;
 
 $thin-scroll-bg-thumb: $gray-600 !default;
 $thin-scroll-bg-hover: $gray-700 !default;
@@ -2609,11 +2609,11 @@ $picker-emojis-per-row: 7 !default;
 @each $color, $value in $theme-colors {
     .alert-#{$color} {
         a {
-            color: darken(theme-color-level($color, $alert-color-level), 10%);
+            color: darken(shift-color($value, $alert-color-scale), 10%);
         }
         // Darken the close button text colour inside notification alerts for better contrast.
         .btn-close {
-            color: darken(theme-color-level($color, $alert-color-level), 20%);
+            color: darken(shift-color($value, $alert-color-scale), 20%);
             opacity: 0.6;
         }
     }

theme/boost/scss/moodle/course.scss

@@ -549,9 +549,9 @@ span.editinstructions {
     width: fit-content;
 
     @include alert-variant(
-        theme-color-level('info', $alert-bg-level),
-        theme-color-level('info', $alert-border-level),
-        theme-color-level('info', $alert-color-level)
+        shift-color($info, $alert-bg-scale),
+        shift-color($info, $alert-border-scale),
+        shift-color($info, $alert-color-scale)
     );
 }
 
@@ -1100,9 +1100,9 @@ $divider-hover-color: $primary !default;
     }
     @each $color, $value in $theme-colors {
         &.btn-#{$color} {
-            $bg-color: theme-color-level($color, $alert-bg-level);
+            $bg-color: shift-color($value, $alert-bg-scale);
             @include button-variant($bg-color, $bg-color, $value);
-            color: theme-color-level($color, $alert-color-level);
+            color: shift-color($value, $alert-color-scale);
             &:hover {
                 color: color-yiq($value);
             }
@@ -1613,8 +1613,8 @@ $divider-hover-color: $primary !default;
     @include border-radius($rounded-pill);
     font-size: $font-size-sm;
     font-weight: bold;
-    color: theme-color-level("primary", $alert-color-level);
-    background-color: theme-color-level("primary", $alert-bg-level);
+    color: shift-color($primary, $alert-color-scale);
+    background-color: shift-color($primary, $alert-bg-scale);
     &:hover,
     &:focus {
         color: color-yiq($primary);

theme/boost/scss/moodle/courseindex.scss

@@ -2,8 +2,8 @@ $courseindex-link-color: $list-group-action-color !default;
 $courseindex-link-color-selected: color-yiq($primary) !default;
 $courseindex-link-dimmed-color: $gray-600 !default;
 $courseindex-link-hover-color: black !default;
-$courseindex-item-dragging-bg: theme-color-level('info', -11) !default;
-$courseindex-item-dragging-border: theme-color-level('info', -9) !default;
+$courseindex-item-dragging-bg: shift-color($info, -90%) !default;
+$courseindex-item-dragging-border: shift-color($info, -70%) !default;
 $courseindex-item-active-border: $gray-300 !default;
 $courseindex-item-active-bg: $gray-100 !default;
 $courseindex-item-page-bg: $primary !default;

theme/boost/scss/moodle/grade.scss

@@ -157,7 +157,7 @@
             margin-right: 28px;
             font-style: italic;
             font-weight: bold;
-            color: #{theme-color-level('success', 2)};
+            color: #{shift-color($success, 20%)};
 
             input {
                 margin-bottom: 0;

theme/boost/scss/moodle/modules.scss

@@ -1475,7 +1475,7 @@ $popout-header-height: 4rem;
     margin-bottom: $alert-margin-bottom;
     border: $alert-border-width solid transparent;
     @include border-radius($alert-border-radius);
-    @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
+    @include alert-variant(shift-color($info, $alert-bg-scale), shift-color($info, $alert-border-scale), shift-color($info, $alert-color-scale)); /* stylelint-disable-line max-line-length */
 }
 
 .assignfeedback_editpdf_menu {

theme/boost/scss/moodle/question.scss

@@ -315,15 +315,15 @@ body.path-question-type {
 }
 .que .outcome,
 .que .comment {
-    @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level - 0.9)); /* stylelint-disable-line max-line-length */
+    @include alert-variant(shift-color($warning, $alert-bg-scale), shift-color($warning, $alert-border-scale), shift-color($warning, $alert-color-scale - 9%)); /* stylelint-disable-line max-line-length */
     // Darken link colour inside comments for better colour contrast against regular text.
     a {
         color: darken($link-color, 30%);
     }
 }
 
 .que .formulation {
-    @include alert-variant(theme-color-level('info', $alert-bg-level - 1.30), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level + 4)); /* stylelint-disable-line max-line-length */
+    @include alert-variant(shift-color($info, $alert-bg-scale), shift-color($info, $alert-border-scale), shift-color($info, $alert-color-scale + 40%)); /* stylelint-disable-line max-line-length */
 }
 
 .que.multichoice .answer div.r0 .icon.fa-check,
@@ -354,7 +354,7 @@ body.path-question-type {
 }
 
 .que .comment {
-    @include alert-variant(theme-color-level('success', $alert-bg-level), theme-color-level('success', $alert-border-level), theme-color-level('success', $alert-color-level)); /* stylelint-disable-line max-line-length */
+    @include alert-variant(shift-color($success, $alert-bg-scale), shift-color($success, $alert-border-scale), shift-color($success, $alert-color-scale)); /* stylelint-disable-line max-line-length */
 }
 
 .que .ablock {

theme/boost/scss/moodle/toasts.scss

@@ -5,10 +5,11 @@
 }
 
 @mixin toast-variant($color) {
-    background-color: rgba(theme-color-level($color, $alert-bg-level), .95);
-    color: theme-color-level($color, $alert-color-level);
+    $color-value: map-get($theme-colors, $color);
+    background-color: rgba(shift-color($color-value, $alert-bg-scale), .95);
+    color: shift-color($color-value, $alert-color-scale);
     .toast-header {
-        color: theme-color-level($color, $alert-color-level);
+        color: shift-color($color-value, $alert-color-scale);
     }
 }
 

theme/boost/scss/moodle/variables.scss

@@ -7,17 +7,17 @@
  * preset files instead.
  */
 
-$state-success-bg: theme-color-level("success", -10) !default;
-$state-success-border: theme-color-level("success", -9) !default;
+$state-success-bg: shift-color($success, -80%) !default;
+$state-success-border: shift-color($success, -70%) !default;
 
-$state-info-bg: theme-color-level("info", -10) !default;
-$state-info-border: theme-color-level("info", -9) !default;
+$state-info-bg: shift-color($info, -80%) !default;
+$state-info-border: shift-color($info, -70%) !default;
 
-$state-warning-bg: theme-color-level("warning", -10) !default;
-$state-warning-border: theme-color-level("warning", -10) !default;
+$state-warning-bg: shift-color($warning, -80%) !default;
+$state-warning-border: shift-color($warning, -80%) !default;
 
-$state-danger-bg: theme-color-level("danger", -10) !default;
-$state-danger-border: theme-color-level("danger", -9) !default;
+$state-danger-bg: shift-color($danger, -80%) !default;
+$state-danger-border: shift-color($danger, -70%) !default;
 
 $primary-nav-padding-y: ($spacer * 0.25) !default;
 $primary-nav-padding-x: ($spacer * 0.5) !default;
@@ -33,10 +33,10 @@ $box-shadow-drawer-right: 0 .25rem .8rem rgba($black, .025) !default;
 
 $moremenu-height: 60px !default;
 
-$primary-light-background: theme-color-level('primary', -12) !default;
-$primary-light-border: theme-color-level('primary', -2) !default;
+$primary-light-background: shift-color($primary, -90%) !default;
+$primary-light-border: shift-color($primary, -20%) !default;
 $primary-light-color: $body-color;
-$primary-light-hover: theme-color-level('primary', -10) !default;
+$primary-light-hover: shift-color($primary, -80%) !default;
 $activity-iconcontainer-height: 52px;
 $activity-iconcontainer-width: 52px;