Merge pull request #1156 from gusthoff/topic/infrastructure/scss/upgrade/20241227

gusthoff · web-flow · commit 87b244ca90b5 · 2024-12-27T14:37:58.000+01:00
SCSS: replace darken()/lighten() by color.scale()
diff --git a/frontend/src/styles/_variables-dark.scss b/frontend/src/styles/_variables-dark.scss
@@ -1,4 +1,6 @@
 // colors
+@use 'sass:color';
+
 $color-theme-bg-dark:                   #C34C01;    // dark orange
 
 $color-theme-bg-light:                  rgb(252, 252, 252);
@@ -14,20 +16,20 @@ $color-border:                          #444;
 
 $color-code-font:                       #DE935F;
 $color-code-bg:                         $color-bg-dark;
-$color-code-border:                     darken($color-border, 50%);
+$color-code-border:                     color.scale($color-border, $lightness: -50%);
 
 $color-menu-bg-l1:                      #222222;
-$color-menu-bg-l2:                      lighten($color-menu-bg-l1, 5%);
-$color-menu-bg-l3:                      lighten($color-menu-bg-l1, 10%);
-$color-menu-bg-hover:                   darken($color-menu-bg-l1,  20%);
+$color-menu-bg-l2:                      color.scale($color-menu-bg-l1, $lightness:   5%);
+$color-menu-bg-l3:                      color.scale($color-menu-bg-l1, $lightness:  10%);
+$color-menu-bg-hover:                   color.scale($color-menu-bg-l1, $lightness: -20%);
 
 $color-menu-font:                       #f0f0f0;
 $color-menu-alt-font:                   #e8e8e8;
-$color-menu-alt-font-hover:             lighten($color-menu-alt-font, 20%);
+$color-menu-alt-font-hover:             color.scale($color-menu-alt-font,   $lightness:  20%);
 
 $color-tab-active-font:                 rgb(200, 200, 200);
-$color-tab-hover-font:                  lighten($color-tab-active-font, 20%);
-$color-tab-font:                        darken($color-tab-active-font, 30%);
+$color-tab-hover-font:                  color.scale($color-tab-active-font, $lightness:  20%);
+$color-tab-font:                        color.scale($color-tab-active-font, $lightness: -30%);
 
 $color-widget-border:                   $color-border;
 
diff --git a/frontend/src/styles/_variables.scss b/frontend/src/styles/_variables.scss
@@ -1,4 +1,6 @@
 // colors
+@use 'sass:color';
+
 $color-theme-bg-dark:           #F56F23;    // orange
 $color-theme-bg-light:          rgb(252, 252, 252);
 
@@ -10,21 +12,21 @@ $color-theme-alt-bg:            rgb(218, 230, 239);
 $color-font-grey:               rgb(135, 135, 135);
 
 $color-slider-course:           #4A90E2;
-$color-slider-course-hover:     darken($color-slider-course, 10%);
+$color-slider-course-hover:     color.scale($color-slider-course, $lightness: -10%);
 
 $color-slider-lab:              #D91E5B;
-$color-slider-lab-hover:        darken($color-slider-lab, 10%);
+$color-slider-lab-hover:        color.scale($color-slider-lab, $lightness: -10%);
 
 $color-slider-book:             $color-theme-bg-dark;
-$color-slider-book-hover:       darken($color-slider-book, 10%);
+$color-slider-book-hover:       color.scale($color-slider-book, $lightness: -10%);
 
 $color-slider-link-bg:          rgb(74, 144, 226);
-$color-slider-link-bg-hover:    darken($color-slider-link-bg, 12%);
+$color-slider-link-bg-hover:    color.scale($color-slider-link-bg, $lightness: -12%);
 $color-slider-link-fg:          white;
 
 $color-tab-active-font:         rgb(51, 51, 51);
-$color-tab-hover-font:          lighten($color-tab-active-font, 10%);
-$color-tab-font:                lighten($color-tab-active-font, 30%);
+$color-tab-hover-font:          color.scale($color-tab-active-font, $lightness: 10%);
+$color-tab-font:                color.scale($color-tab-active-font, $lightness: 30%);
 
 $color-widget-border:           rgb(221, 221, 221);
 
@@ -39,9 +41,9 @@ $color-labarea-bg:              $color-theme-bg-light;
 $color-labarea-fg:              $color-font-grey;
 
 $color-success-green-bg:        rgb(190, 245, 203);
-$color-success-green-light-bg:  lighten($color-success-green-bg, 10%);
+$color-success-green-light-bg:  color.scale($color-success-green-bg, $lightness: 10%);
 $color-fail-red-bg:             rgb(253, 174, 183);
-$color-fail-red-light-bg:       lighten($color-fail-red-bg, 10%);
+$color-fail-red-light-bg:       color.scale($color-fail-red-bg,      $lightness: 10%);
 
 $color-spinner-fg:                  rgb(166, 166, 166);
 
diff --git a/frontend/src/styles/learn-dark.scss b/frontend/src/styles/learn-dark.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @use 'variables' as v;
 @use 'variables-dark' as v_darktheme;
 
@@ -65,7 +67,7 @@
         color: #fff;
 
         &:hover {
-            background-color: lighten(v_darktheme.$color-theme-bg-dark, 10%);
+            background-color: color.scale(v_darktheme.$color-theme-bg-dark, $lightness: 10%);
         }
     }
 
@@ -94,7 +96,7 @@
     }
 
     .wy-nav-side {
-        background-color: darken(v_darktheme.$color-menu-bg-l1, 10%);
+        background-color: color.scale(v_darktheme.$color-menu-bg-l1, $lightness: -10%);
     }
 
     .wy-menu-vertical {
@@ -279,7 +281,7 @@
             border-right: 1px dotted v_darktheme.$color-widget-border;
             border-bottom: 1px dotted v_darktheme.$color-widget-border;
             &:hover {
-                background-color: lighten(v_darktheme.$color-theme-bg-dark, 30%);
+                background-color: color.scale(v_darktheme.$color-theme-bg-dark, $lightness: 30%);
                 color: v_darktheme.$color-tab-hover-font;
             }
             &.active {
diff --git a/frontend/src/styles/learn.scss b/frontend/src/styles/learn.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @use 'variables' as v;
 
 // theme overrides
@@ -6,7 +8,7 @@
     color: #fff;
 
     &:hover {
-        background-color: lighten(v.$color-theme-bg-dark, 10%);
+        background-color: color.scale(v.$color-theme-bg-dark, $lightness: 10%);
     }
 }
 
@@ -178,7 +180,7 @@ pre.widget {
         border-right: 1px dotted v.$color-widget-border;
         border-bottom: 1px dotted v.$color-widget-border;
         &:hover {
-            background-color: lighten(v.$color-theme-bg-dark, 30%);
+            background-color: color.scale(v.$color-theme-bg-dark, $lightness: 30%);
             color: v.$color-tab-hover-font;
             cursor: pointer;
         }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use 'sass:color';`
	`2`	`+`
`1`	`3`	`@use 'variables' as v;`
`2`	`4`	`@use 'variables-dark' as v_darktheme;`
`3`	`5`
`@@ -65,7 +67,7 @@`
`65`	`67`	`color: #fff;`
`66`	`68`
`67`	`69`	`&:hover {`
`68`		`- background-color: lighten(v_darktheme.$color-theme-bg-dark, 10%);`
	`70`	`+ background-color: color.scale(v_darktheme.$color-theme-bg-dark, $lightness: 10%);`
`69`	`71`	`}`
`70`	`72`	`}`
`71`	`73`
`@@ -94,7 +96,7 @@`
`94`	`96`	`}`
`95`	`97`
`96`	`98`	`.wy-nav-side {`
`97`		`- background-color: darken(v_darktheme.$color-menu-bg-l1, 10%);`
	`99`	`+ background-color: color.scale(v_darktheme.$color-menu-bg-l1, $lightness: -10%);`
`98`	`100`	`}`
`99`	`101`
`100`	`102`	`.wy-menu-vertical {`
`@@ -279,7 +281,7 @@`
`279`	`281`	`border-right: 1px dotted v_darktheme.$color-widget-border;`
`280`	`282`	`border-bottom: 1px dotted v_darktheme.$color-widget-border;`
`281`	`283`	`&:hover {`
`282`		`- background-color: lighten(v_darktheme.$color-theme-bg-dark, 30%);`
	`284`	`+ background-color: color.scale(v_darktheme.$color-theme-bg-dark, $lightness: 30%);`
`283`	`285`	`color: v_darktheme.$color-tab-hover-font;`
`284`	`286`	`}`
`285`	`287`	`&.active {`