From 1bce94cac27d5fec4b5ea2ff62f4a4391d0620ca Mon Sep 17 00:00:00 2001
From: Mike Kasberg <kasberg.mike@gmail.com>
Date: Sat, 25 Apr 2026 16:45:13 -0600
Subject: [PATCH] Fix Dart Sass Deprecations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Upgrading Jekyll pulled in a newer version of Dart Sass, and we have
deprecation warnings in some of our sass files. Most of them are an easy
fix with an equivalent, newer syntax.

```
Deprecation Warning [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use color.adjust instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
22 │ $grey-color-dark:  darken($grey-color, 25%);
   │                    ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    /home/mkasberg/code/opensourcecatholic.github.io/css/main.scss 22:20  root stylesheet
Deprecation Warning [color-functions]: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -49.0384615385%)
color.adjust($color, $lightness: -25%)

More info: https://sass-lang.com/d/color-functions

   ╷
22 │ $grey-color-dark:  darken($grey-color, 25%);
   │                    ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
```
---
 _sass/_base.scss   | 12 +++++++-----
 _sass/_layout.scss | 10 +++++-----
 css/main.scss      | 10 ++++++----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index 436347c..99b540a 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 /**
  * Reset some basic elements
  */
@@ -34,7 +36,7 @@ h1, h2, h3, h4, h5, h6,
 p, blockquote, pre,
 ul, ol, dl, figure,
 %vertical-rhythm {
-    margin-bottom: $spacing-unit / 2;
+    margin-bottom: calc($spacing-unit / 2);
 }
 
 
@@ -95,7 +97,7 @@ a {
     text-decoration: none;
 
     &:visited {
-        color: darken($brand-color, 15%);
+        color: color.adjust($brand-color, $lightness: -15%);
     }
 
     &:hover {
@@ -112,7 +114,7 @@ a {
 blockquote {
     color: $grey-color;
     border-left: 4px solid $grey-color-light;
-    padding-left: $spacing-unit / 2;
+    padding-left: calc($spacing-unit / 2);
     font-size: 18px;
     letter-spacing: -1px;
     font-style: italic;
@@ -167,8 +169,8 @@ pre {
     @include media-query($on-laptop) {
         max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
         max-width:         calc(#{$content-width} - (#{$spacing-unit}));
-        padding-right: $spacing-unit / 2;
-        padding-left: $spacing-unit / 2;
+        padding-right: calc($spacing-unit / 2);
+        padding-left: calc($spacing-unit / 2);
     }
 }
 
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 79b1d7e..582b425 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -51,7 +51,7 @@
     @include media-query($on-palm) {
         position: absolute;
         top: 9px;
-        right: $spacing-unit / 2;
+        right: calc($spacing-unit / 2);
         background-color: $background-color;
         border: 1px solid $grey-color-light;
         border-radius: 5px;
@@ -114,7 +114,7 @@
 
 .footer-heading {
     font-size: 18px;
-    margin-bottom: $spacing-unit / 2;
+    margin-bottom: calc($spacing-unit / 2);
 }
 
 .contact-list,
@@ -126,14 +126,14 @@
 .footer-col-wrapper {
     font-size: 15px;
     color: $grey-color;
-    margin-left: -$spacing-unit / 2;
+    margin-left: calc(-1 * $spacing-unit / 2);
     @extend %clearfix;
 }
 
 .footer-col {
     float: left;
-    margin-bottom: $spacing-unit / 2;
-    padding-left: $spacing-unit / 2;
+    margin-bottom: calc($spacing-unit / 2);
+    padding-left: calc($spacing-unit / 2);
 }
 
 .footer-col-1 {
diff --git a/css/main.scss b/css/main.scss
index cd8d9e3..43ff019 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -3,6 +3,8 @@
 ---
 @charset "utf-8";
 
+@use "sass:color";
+@use "sass:math";
 
 
 // Our variables
@@ -21,8 +23,8 @@ $brand-color:      #2a7ae2;
 $osc-color:        #1583bd;
 
 $grey-color:       #828282;
-$grey-color-light: lighten($grey-color, 40%);
-$grey-color-dark:  darken($grey-color, 25%);
+$grey-color-light: color.adjust($grey-color, $lightness: 40%);
+$grey-color-dark:  color.adjust($grey-color, $lightness: -25%);
 
 // Width of the content area
 $content-width:    800px;
@@ -35,8 +37,8 @@ $on-laptop:        800px;
 // Use media queries like this:
 // @include media-query($on-palm) {
 //     .wrapper {
-//         padding-right: $spacing-unit / 2;
-//         padding-left: $spacing-unit / 2;
+//         padding-right: calc($spacing-unit / 2);
+//         padding-left: calc($spacing-unit / 2);
 //     }
 // }
 @mixin media-query($device) {