From 84c084874fe8cc17324921e9e3a8b5a93ff4eaab Mon Sep 17 00:00:00 2001
From: Edward <edward@driebit.nl>
Date: Thu, 13 Feb 2025 16:28:38 +0100
Subject: [PATCH] Refactor SCSS color definitions to use color-mix removing
 deprecated sass

---
 .../lib/css/src/_base.scss                    | 33 ++++++++------
 .../lib/css/src/_buttons.scss                 |  7 +--
 .../lib/css/src/_form.scss                    | 10 ++---
 .../lib/css/src/_variables.scss               | 24 +++++------
 .../lib/css/src/blocks/_category-of.scss      |  2 +-
 .../css/src/blocks/_content-group-nav.scss    | 19 ++++----
 .../lib/css/src/blocks/_global-search.scss    | 15 +++----
 .../lib/css/src/blocks/_list.scss             | 43 +++++++++++++------
 .../lib/css/src/layout/_global-nav.scss       |  2 +-
 .../lib/css/src/pages/_edit.scss              | 12 +++---
 .../lib/css/src/pages/_search.scss            | 13 +++---
 11 files changed, 101 insertions(+), 79 deletions(-)

diff --git a/modules/mod_ginger_foundation/lib/css/src/_base.scss b/modules/mod_ginger_foundation/lib/css/src/_base.scss
index 83b048ecc..5146bde1b 100644
--- a/modules/mod_ginger_foundation/lib/css/src/_base.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/_base.scss
@@ -6,23 +6,23 @@
 
 @keyframes outline-animate {
     0% {
-        outline-offset: .5rem
+        outline-offset: 0.5rem;
     }
 
     to {
-        outline-offset: -.1rem
+        outline-offset: -0.1rem;
     }
 }
 
 *:focus {
-    outline: 0.2rem solid #51CBEE;
-    animation: outline-animate .1s linear 0s 1 normal;
+    outline: 0.2rem solid #51cbee;
+    animation: outline-animate 0.1s linear 0s 1 normal;
     animation-fill-mode: forwards;
 }
 
 .visually-hidden {
     position: absolute !important;
-    clip: rect(1px,1px,1px,1px);
+    clip: rect(1px, 1px, 1px, 1px);
     overflow: hidden;
     height: 1px;
     width: 1px;
@@ -84,7 +84,9 @@ body {
     }
 }
 
-a, a:hover, a:active {
+a,
+a:hover,
+a:active {
     color: $mainThemeColor;
 }
 
@@ -99,7 +101,14 @@ img {
     border-radius: 0;
 }
 
-h1, h2, h3, h4, p, ol, ul, table {
+h1,
+h2,
+h3,
+h4,
+p,
+ol,
+ul,
+table {
     margin: 0 0 1em 0;
 }
 
@@ -136,15 +145,14 @@ h3 {
     margin-bottom: 0;
 }
 
-
 %cf {
     &:before {
-        content: '';
+        content: "";
         display: table;
     }
 
     &:after {
-        content: '';
+        content: "";
         display: table;
         clear: both;
     }
@@ -177,7 +185,8 @@ figure {
     padding-top: 56.25%;
     position: relative;
 
-    video, iframe {
+    video,
+    iframe {
         height: 100%;
         width: 100%;
         position: absolute;
@@ -190,7 +199,7 @@ figcaption {
     @include size(margin-top, 5);
     position: relative;
     @include size(font-size, 14);
-    color: lighten($typographyColor, 50%);
+    color: color-mix(in srgb, $typographyColor, white, 50%);
 
     p {
         display: inline-block;
diff --git a/modules/mod_ginger_foundation/lib/css/src/_buttons.scss b/modules/mod_ginger_foundation/lib/css/src/_buttons.scss
index 4c62a1744..da9e1578d 100644
--- a/modules/mod_ginger_foundation/lib/css/src/_buttons.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/_buttons.scss
@@ -22,7 +22,8 @@
     @extend %btn;
 }
 
-[class^="btn--"], [class*=" btn--"],
+[class^="btn--"],
+[class*=" btn--"],
 button[type="submit"] {
     @extend %btn--primary;
 }
@@ -39,9 +40,9 @@ button[type="submit"] {
     &:focus,
     &:focus:active,
     &.is-active {
-        background-color: darken($mainThemeColor, 5);
+        background-color: color-mix(in srgb, $mainThemeColor, black, 5%);
         color: $white;
-        border-color: darken($mainThemeColor, 5);
+        border-color: color-mix(in srgb, $mainThemeColor, black, 5%);
     }
 }
 
diff --git a/modules/mod_ginger_foundation/lib/css/src/_form.scss b/modules/mod_ginger_foundation/lib/css/src/_form.scss
index 8acd1b63d..f7f691485 100644
--- a/modules/mod_ginger_foundation/lib/css/src/_form.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/_form.scss
@@ -9,19 +9,19 @@ form {
         width: 100%;
         @include size(padding, 4, 10, 0);
         @include size(height, 38);
-        border: 1px solid darken($mainThemeColor, 15);
+        border: 1px solid color-mix(in srgb, $mainThemeColor, black, 15%);
         border-radius: 3px;
         line-height: 1;
         font-family: $primaryFontFamily;
     }
 
     textarea {
-        border: 1px solid darken($mainThemeColor, 15);
+        border: 1px solid color-mix(in srgb, $mainThemeColor, black, 15%);
         border-radius: 3px;
     }
 
     .form-control {
-        border: 1px solid darken($mainThemeColor, 15);
+        border: 1px solid color-mix(in srgb, $mainThemeColor, black, 15%);
         border-radius: 3px;
     }
 
@@ -29,7 +29,7 @@ form {
         width: 100%;
         @include size(padding, 0, 10);
         @include size(height, 38);
-        border: 1px solid darken($mainThemeColor, 15);
+        border: 1px solid color-mix(in srgb, $mainThemeColor, black, 15%);
         border-radius: 3px;
         @include size(line-height, 38);
         font-family: $primaryFontFamily;
@@ -45,7 +45,7 @@ form {
     }
 
     .form-group__input:after {
-        content: '!';
+        content: "!";
         display: block;
         width: 25px;
         height: 25px;
diff --git a/modules/mod_ginger_foundation/lib/css/src/_variables.scss b/modules/mod_ginger_foundation/lib/css/src/_variables.scss
index 293f90c52..8acf91a75 100644
--- a/modules/mod_ginger_foundation/lib/css/src/_variables.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/_variables.scss
@@ -1,18 +1,18 @@
 $black: #000;
-$white: #FFF;
-$alto: #DDD;
+$white: #fff;
+$alto: #ddd;
 $error: #a94442;
-$ginger: #FE7600;
+$ginger: #fe7600;
 
-$bodyBgColor: #EBEBEB;
+$bodyBgColor: #ebebeb;
 $bodyFontFamily: arial, times;
 $primaryFontFamily: $bodyFontFamily, arial, times;
 $secondaryFontFamily: arial, times;
 
 $typographyColor: #000;
-$mainThemeColor: #0087D2;
-$secondaryThemeColor: #0087D2;
-$tertiaryThemeColor: #0087D2;
+$mainThemeColor: #0087d2;
+$secondaryThemeColor: #0087d2;
+$tertiaryThemeColor: #0087d2;
 
 $btnRadius: 18px;
 $interfaceRadius: 4px;
@@ -26,18 +26,18 @@ $globalNavHeight: 70;
 $contentGroupNavHeight: 85;
 $minifiedcontentGroupNavHeight: 55;
 
-$listBgColor: #EBEBEB;
-$listHeaderBgColor: darken($listBgColor, 10);
+$listBgColor: #ebebeb;
+$listHeaderBgColor: color-mix(in srgb, $listBgColor, black, 10%);
 
-$relatedItemsBgColor: #1F1F25;
+$relatedItemsBgColor: #1f1f25;
 $relatedItemsTextColor: $white;
-$relatedItemsHeaderBgColor: #2C2E36;
+$relatedItemsHeaderBgColor: #2c2e36;
 
 $menuMobileActionsBgColor: #e0e0e0;
 $menuMobileBgColor: #f1f1f1;
 
 $footerHeight: 300;
-$footerBgColor: #23232A;
+$footerBgColor: #23232a;
 
 $standardOffset: 30;
 
diff --git a/modules/mod_ginger_foundation/lib/css/src/blocks/_category-of.scss b/modules/mod_ginger_foundation/lib/css/src/blocks/_category-of.scss
index c0a5834ab..54f058c23 100644
--- a/modules/mod_ginger_foundation/lib/css/src/blocks/_category-of.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/blocks/_category-of.scss
@@ -10,7 +10,7 @@
 
     i {
         @include size(margin-right, 8);
-        color: darken($mainThemeColor, 20);
+        color: color-mix(in srgb, $mainThemeColor, black, 20%);
     }
 }
 
diff --git a/modules/mod_ginger_foundation/lib/css/src/blocks/_content-group-nav.scss b/modules/mod_ginger_foundation/lib/css/src/blocks/_content-group-nav.scss
index 9aee5afd4..0c9e4ec5f 100644
--- a/modules/mod_ginger_foundation/lib/css/src/blocks/_content-group-nav.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/blocks/_content-group-nav.scss
@@ -12,7 +12,7 @@ body.has-content-group {
     background-size: cover;
     background-position: center center;
     text-align: center;
-    box-shadow: 3px 3px 10px 2px rgba(0,0,0,0.15);
+    box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.15);
     transition: height 0.3s;
 
     &:hover,
@@ -22,14 +22,14 @@ body.has-content-group {
     }
 
     &:after {
-        content: '';
+        content: "";
         width: 100%;
         height: 100%;
         position: absolute;
         @include size(top, 0);
         @include size(left, 0);
         z-index: 200;
-        background-color: rgba($mainThemeColor, .4);
+        background-color: rgba($mainThemeColor, 0.4);
     }
 
     &.is-minified {
@@ -53,11 +53,11 @@ body.has-content-group {
     background-position: center center;
     text-align: center;
     filter: grayscale(100%);
-    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
-    filter: gray;  /* For IE 6 - 9 */
+    -webkit-filter: grayscale(100%); /* For Webkit browsers */
+    filter: gray; /* For IE 6 - 9 */
 }
 
- .content-group-nav__banner__title {
+.content-group-nav__banner__title {
     @include vertical-align();
     z-index: 300;
     @include size(font-size, 28);
@@ -66,7 +66,7 @@ body.has-content-group {
     text-shadow: 0px 1px 10px rgba(50, 50, 50, 1);
 
     &:after {
-        content: '';
+        content: "";
         display: inline-block;
         position: relative;
         top: -6px;
@@ -102,7 +102,7 @@ body.has-content-group {
         text-align: left;
 
         &.active a {
-            background: darken($mainThemeColor, 5);
+            background: color-mix(in srgb, $mainThemeColor, black, 5%);
         }
     }
 
@@ -117,7 +117,7 @@ body.has-content-group {
         &:active,
         &:hover,
         &.is-active {
-            background: darken($mainThemeColor, 5);
+            background: color-mix(in srgb, $mainThemeColor, black, 5%);
             text-decoration: none;
         }
     }
@@ -142,4 +142,3 @@ body.has-content-group {
         @include size(top, $globalNavHeight);
     }
 }
-
diff --git a/modules/mod_ginger_foundation/lib/css/src/blocks/_global-search.scss b/modules/mod_ginger_foundation/lib/css/src/blocks/_global-search.scss
index e58105f40..445f3642a 100644
--- a/modules/mod_ginger_foundation/lib/css/src/blocks/_global-search.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/blocks/_global-search.scss
@@ -11,7 +11,6 @@
         @include size(font-size, 25);
     }
 
-
     &.is-active {
         right: 15px;
         z-index: 2100;
@@ -49,12 +48,12 @@
         }
     }
 
-    [type=text] {
+    [type="text"] {
         display: block;
         border: none;
         width: 100%;
         height: 100%;
-        background-color: #FFF;
+        background-color: #fff;
         background-position: 10px center;
         background-repeat: no-repeat;
         background-size: 30px 30px;
@@ -67,7 +66,7 @@
         }
     }
 
-    [type=submit] {
+    [type="submit"] {
         display: none;
     }
 }
@@ -84,9 +83,9 @@
     width: 100%;
     @include size(padding, 10, 15);
     background: $white;
-    border: 1px solid rgba(0,0,0,.15);
+    border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 4px;
-    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 
     ul {
         @include size(padding-left, 20);
@@ -104,7 +103,7 @@
     }
 
     a {
-        color: lighten($typographyColor, 20%);
+        color: color-mix(in srgb, $typographyColor, white, 20%);
     }
 
     &.is-scrollable {
@@ -144,7 +143,7 @@
     .search-suggestions__searchform {
         @include size(height, $globalNavHeight);
 
-        [type=text] {
+        [type="text"] {
             @include size(line-height, $globalNavHeight);
         }
     }
diff --git a/modules/mod_ginger_foundation/lib/css/src/blocks/_list.scss b/modules/mod_ginger_foundation/lib/css/src/blocks/_list.scss
index e3f5b36f2..d2c861006 100644
--- a/modules/mod_ginger_foundation/lib/css/src/blocks/_list.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/blocks/_list.scss
@@ -8,8 +8,16 @@
 
     .list__item {
         @include grid(
-            (breakpoint: $smallBreakpoint, property: 'min-width', columns: '1/2'),
-            (breakpoint: $mediumBreakpoint, property: 'min-width', columns: '1/3')
+            (
+                breakpoint: $smallBreakpoint,
+                property: "min-width",
+                columns: "1/2",
+            ),
+            (
+                breakpoint: $mediumBreakpoint,
+                property: "min-width",
+                columns: "1/3",
+            )
         );
     }
 }
@@ -119,7 +127,11 @@
     position: absolute;
     @include size(top, -50);
     left: 0px;
-    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.60) 100%);
+    background: linear-gradient(
+        to bottom,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(0, 0, 0, 0.6) 100%
+    );
     line-height: 1;
 }
 
@@ -140,7 +152,8 @@
 .list__item__content__date {
     display: block;
     @include size(margin-bottom, 7);
-    color: lighten($typographyColor, 50%);
+    color: color-mix(in srgb, $typographyColor, white, 50%);
+
     @include size(font-size, 15);
     font-weight: 300;
 }
@@ -163,14 +176,14 @@
 
     + .list__more {
         margin-top: 20px;
-        background: lighten($mainThemeColor, 20);
+        background: color-mix(in srgb, $mainThemeColor, white, 20%);
     }
 }
 
 .list__item--vertical {
     @extend .list__item;
 
-     > a {
+    > a {
         display: inline-block;
     }
 
@@ -203,7 +216,11 @@
         position: absolute;
         top: 0px;
         left: 0px;
-        background: linear-gradient(to bottom,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 100%);
+        background: linear-gradient(
+            to bottom,
+            rgba(0, 0, 0, 0.45) 0%,
+            rgba(0, 0, 0, 0) 100%
+        );
         line-height: 1;
     }
 
@@ -266,7 +283,7 @@
     position: relative;
     background: none;
     min-height: 140px;
-    background-image: url('/lib/images/fallback.png');
+    background-image: url("/lib/images/fallback.png");
     background-position: center center;
 
     @include mq(min-width, $smallBreakpoint) {
@@ -323,7 +340,8 @@
     position: relative;
     overflow: hidden;
 
-    a, article {
+    a,
+    article {
         display: block;
         width: 100%;
         height: 100%;
@@ -351,7 +369,7 @@
 
 .list__item__locations {
     @include size(font-size, 15);
-    color: lighten($typographyColor, 50%);
+    color: color-mix(in srgb, $typographyColor, white, 50%);
 
     .icon--location:before {
         width: auto;
@@ -362,7 +380,6 @@
     }
 }
 
-
 .list__item--map {
     display: block;
     @include size(padding, 6);
@@ -381,7 +398,6 @@
         border: none;
     }
 
-
     .list__item__content__category {
         background: none;
         @include size(font-size, 18);
@@ -399,12 +415,11 @@
     @include size(width, 125);
     @include size(height, 115);
     float: left;
-    background-color: darken($mainThemeColor, 10%);
+    background-color: color-mix(in srgb, $mainThemeColor, black, 10%);
     background-size: cover;
     background-position: top center;
 }
 
-
 @include mq(min-width, $mediumBreakpoint) {
     .list__item {
         &:hover {
diff --git a/modules/mod_ginger_foundation/lib/css/src/layout/_global-nav.scss b/modules/mod_ginger_foundation/lib/css/src/layout/_global-nav.scss
index 659b9dd8f..3deec8eb7 100644
--- a/modules/mod_ginger_foundation/lib/css/src/layout/_global-nav.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/layout/_global-nav.scss
@@ -42,7 +42,7 @@
     li {
         display: block;
         @include size(line-height, 18);
-        border-bottom: 1px solid lighten($typographyColor, 60%);
+        border-bottom: 1px solid color-mix(in srgb, $typographyColor, white, 60%);
     }
 
     a {
diff --git a/modules/mod_ginger_foundation/lib/css/src/pages/_edit.scss b/modules/mod_ginger_foundation/lib/css/src/pages/_edit.scss
index 16a6a3376..2b173938d 100644
--- a/modules/mod_ginger_foundation/lib/css/src/pages/_edit.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/pages/_edit.scss
@@ -10,7 +10,7 @@ ul.tree-list li.menu-item {
 
     .btn {
         border: none;
-        color: darken($mainThemeColor, 5);
+        color: color-mix(in srgb, $mainThemeColor, black, 5%);
     }
 }
 
@@ -30,7 +30,7 @@ ul.tree-list li.menu-item {
         font-size: 12px;
         line-height: 1.1em;
         position: relative;
-        color: lighten(black, 20%);
+        color: color-mix(in srgb, black, white, 20%);
 
         img {
             padding: 0;
@@ -100,20 +100,21 @@ img.admin-list-overview {
 .ginger-edit__aside {
     @include size(padding, 20);
     @include size(margin-bottom, $standardOffset);
-    background: darken($bodyBgColor, 2.5%);
+    background: color-mix(in srgb, $bodyBgColor, black, 2.5%);
 
     h3 {
         @include size(margin-bottom, 20);
     }
 }
 
-[class^="ginger-edit__aside"], [class*=" ginger-edit__aside"] {
+[class^="ginger-edit__aside"],
+[class*=" ginger-edit__aside"] {
     @extend .ginger-edit__aside;
 }
 
 .ginger-edit__profile-picture {
     padding: 15px;
-    border: 1px solid #BEBDBE;
+    border: 1px solid #bebdbe;
 
     .widget-header {
         display: none;
@@ -129,7 +130,6 @@ img.admin-list-overview {
     }
 }
 
-
 .ginger-edit {
     .modal-body {
         .table-striped {
diff --git a/modules/mod_ginger_foundation/lib/css/src/pages/_search.scss b/modules/mod_ginger_foundation/lib/css/src/pages/_search.scss
index 98323407d..d07637bda 100644
--- a/modules/mod_ginger_foundation/lib/css/src/pages/_search.scss
+++ b/modules/mod_ginger_foundation/lib/css/src/pages/_search.scss
@@ -90,7 +90,7 @@
         vertical-align: bottom;
 
         &:after {
-            content: '';
+            content: "";
             width: 8px;
             height: 8px;
             position: absolute;
@@ -107,8 +107,8 @@
     &:active,
     &:focus,
     &:active:focus {
-        background: darken($mainThemeColor, 10%);
-        border-color: darken($mainThemeColor, 10%);
+        background: color-mix(in srgb, $mainThemeColor, black, 10%);
+        border-color: color-mix(in srgb, $mainThemeColor, black, 10%);
         color: $white;
     }
 
@@ -157,7 +157,7 @@
         margin-right: 7px;
         position: relative;
         top: 2px;
-        color: lighten($typographyColor, 15%);
+        color: color-mix(in srgb, $typographyColor, white, 15%);
     }
 
     &:after {
@@ -189,10 +189,10 @@
     &.is-open {
         max-height: 200px;
 
-         ul {
+        ul {
             max-height: 200px;
             overflow: scroll;
-         }
+        }
     }
 
     ul {
@@ -250,7 +250,6 @@
 
 .search_results__map {
     display: none;
-
 }
 
 .search__results__list {