Merge pull request #1749 from folio-org/ongoing-config-apidocs

FOLIO-4079 Fix Sass deprecation warnings
folio-org · Oct 8, 2024 · 78afbd6 · 78afbd6
2 parents b12ca2e + 74ae3d4
commit 78afbd6
Show file tree

Hide file tree

Showing 6 changed files with 942 additions and 10 deletions.
diff --git a/_sass/_folio-base.scss b/_sass/_folio-base.scss
@@ -1,11 +1,13 @@
+@use "sass:color";
+
 $base-font-family: "myriad-pro-n3", "myriad-pro", sans-serif;
 $base-font-weight: 400;
 
 $f-color-orange: #da6a2d;
 $f-color-purple: #38307f;
 $f-color-dark-grey: #515251;
 $f-color-light-grey: #737272;
-$f-color-lighter-grey: lighten($f-color-light-grey, 50%);
+$f-color-lighter-grey: color.adjust($f-color-light-grey, $lightness: 50%, $space: hsl);
 $f-color-attention: #ff0000;
 $f-link-color: #2a7ae2; // from minima
 

diff --git a/_sass/_folio.scss b/_sass/_folio.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 div.highlight {
   border: 1px solid $f-color-light-grey;
 }
@@ -96,7 +98,7 @@ a {
   text-decoration: none;
 
   &:visited {
-    color: darken($f-link-color, 15%);
+    color: color.adjust($f-link-color, $lightness: -15%, $space: hsl);
   }
 
   &:hover {

diff --git a/_sass/classic-jekyll-theme.scss b/_sass/classic-jekyll-theme.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // *********************************************************************************************************************
 //
 // This file replaces the main.sccs file form the Jekyll theme minima.
@@ -39,9 +41,9 @@ $text-color:					#111;
 $background-color:				#fdfdfd; // Applied to the top element, override by background settings below
 //
 $grey-color:					#828282;
-$grey-color-light:				lighten($grey-color, 40%);
-$grey-color-light-light:		lighten($grey-color-light, 40%);
-$grey-color-dark:				darken($grey-color, 25%);
+$grey-color-light:				color.adjust($grey-color, $lightness: 40%, $space: hsl);
+$grey-color-light-light:		color.adjust($grey-color-light, $lightness: 40%, $space: hsl);
+$grey-color-dark:				color.adjust($grey-color, $lightness: -25%, $space: hsl);
 
 // Since Liquid is not available, it is necessary to redefine the baseurl from the _config.yml file here
 //
@@ -346,7 +348,7 @@ $banner-title-color-widest:						$f-color-white;
 //
 $banner-subtitle-color-narrow:					$theme-color;
 $banner-subtitle-color-medium:					$theme-color;
-$banner-subtitle-color-widest:					lighten(black, 50%);
+$banner-subtitle-color-widest:					color.adjust(black, $lightness: 50%, $space: hsl);
 
 
 // *********************************************************************************************************************
@@ -361,8 +363,8 @@ $banner-subtitle-color-widest:					lighten(black, 50%);
 // Note: This does NOT control visibility of the menubar!
 //
 $banner-menu-symbol-enabled-narrow:				true;
-$banner-menu-symbol-enabled-medium:				false;
-$banner-menu-symbol-enabled-widest:				false;
+$banner-menu-symbol-enabled-medium:				true;
+$banner-menu-symbol-enabled-widest:				true;
 
 // The z-order of the menu symbol. Use this to position the menu symbol relative to the title-area and the icon.
 // CSS property: z-index
@@ -831,8 +833,8 @@ $tertiary-column-background-widest:		none;
 // Color for the separator between the columns
 // CSS property: border-right (but only the color part)
 //
-$column-separator-color-medium:			lighten($grey-color, 30%);
-$column-separator-color-widest:			lighten($grey-color, 30%);
+$column-separator-color-medium:			color.adjust($grey-color, $lightness: 30%, $space: hsl);
+$column-separator-color-widest:			color.adjust($grey-color, $lightness: 30%, $space: hsl);
 
 // Enable/disable display of the column separator
 //