From 94328feaa0d7310448169540bd8978e69effe334 Mon Sep 17 00:00:00 2001
From: Steve Ross <git.commits@mailbox.org>
Date: Wed, 11 Feb 2026 20:46:12 +0000
Subject: [PATCH] scss: replace @use with @forward

---
 web/app/themes/badegg/resources/css/app.scss  | 30 ++++++------
 .../themes/badegg/resources/css/editor.scss   |  6 +--
 .../resources/css/global/_framework.scss      |  8 +--
 .../badegg/resources/css/global/_mixins.scss  |  8 +--
 .../resources/css/global/_typography.scss     | 33 ++++++-------
 .../resources/css/global/_variables.scss      |  8 +--
 .../css/global/framework/_breakpoints.scss    |  4 +-
 .../css/global/framework/_colours.scss        | 15 +++---
 .../css/global/framework/_normalise.scss      |  4 +-
 .../css/global/framework/_spacing.scss        | 49 +++++++++----------
 .../mixins/_generate-button-classes.scss      |  6 +--
 .../mixins/_generate-colour-classes.scss      | 10 ++--
 .../css/global/mixins/_text-contrast.scss     |  8 +--
 .../css/plugins/_contact-form-7.scss          |  6 +--
 .../badegg/resources/css/plugins/_mce.scss    |  6 +--
 15 files changed, 98 insertions(+), 103 deletions(-)

diff --git a/web/app/themes/badegg/resources/css/app.scss b/web/app/themes/badegg/resources/css/app.scss
index 02dbde88..83aa8e09 100644
--- a/web/app/themes/badegg/resources/css/app.scss
+++ b/web/app/themes/badegg/resources/css/app.scss
@@ -1,25 +1,25 @@
 // Global Variables, Mixins, and Framework
-@use "global/variables";
-@use "global/mixins";
-@use "global/fonts";
-@use "global/typography";
-@use "global/framework";
+@forward "global/variables";
+@forward "global/mixins";
+@forward "global/fonts";
+@forward "global/typography";
+@forward "global/framework";
 
 // Third Party Plugins
-@use "plugins/contact-form-7";
-@use "plugins/mce";
+@forward "plugins/contact-form-7";
+@forward "plugins/mce";
 
 // Components
-@use "components/block";
-@use "components/forms";
-@use "components/button";
-@use "components/card";
-@use "components/BadEggLightbox";
+@forward "components/block";
+@forward "components/forms";
+@forward "components/button";
+@forward "components/card";
+@forward "components/BadEggLightbox";
 
 // Sections
-@use "../views/sections/header/header";
-@use "../views/sections/footer/footer";
+@forward "../views/sections/header/header";
+@forward "../views/sections/footer/footer";
 
 // Page Styles
-@use "views/page";
+@forward "views/page";
 
diff --git a/web/app/themes/badegg/resources/css/editor.scss b/web/app/themes/badegg/resources/css/editor.scss
index 6ab781ca..d3b9e460 100644
--- a/web/app/themes/badegg/resources/css/editor.scss
+++ b/web/app/themes/badegg/resources/css/editor.scss
@@ -1,5 +1,5 @@
 @use "app";
-@use "global/variables/colours";
+@use "global/variables";
 
 html :where(.wp-block) {
   max-width: none;
@@ -8,7 +8,7 @@ html :where(.wp-block) {
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
   &:hover:after {
     content: '';
-    outline: 2px solid colours.$wpblue;
+    outline: 2px solid variables.$wpblue;
     position: absolute;
     inset: 0;
   }
@@ -36,7 +36,7 @@ html :where(.wp-block) {
 }
 
 .editor-styles-wrapper {
-  background: colours.$grey-lightest;
+  background: variables.$grey-lightest;
 
   .block-list-appender {
     width: 350px;
diff --git a/web/app/themes/badegg/resources/css/global/_framework.scss b/web/app/themes/badegg/resources/css/global/_framework.scss
index e34c2dbd..5af91783 100644
--- a/web/app/themes/badegg/resources/css/global/_framework.scss
+++ b/web/app/themes/badegg/resources/css/global/_framework.scss
@@ -1,4 +1,4 @@
-@use "framework/breakpoints";
-@use "framework/normalise";
-@use "framework/colours";
-@use "framework/spacing";
+@forward "framework/breakpoints";
+@forward "framework/normalise";
+@forward "framework/colours";
+@forward "framework/spacing";
diff --git a/web/app/themes/badegg/resources/css/global/_mixins.scss b/web/app/themes/badegg/resources/css/global/_mixins.scss
index f52c1887..e080578c 100644
--- a/web/app/themes/badegg/resources/css/global/_mixins.scss
+++ b/web/app/themes/badegg/resources/css/global/_mixins.scss
@@ -1,4 +1,4 @@
-@use "mixins/linear-gradient";
-@use "mixins/text-contrast";
-@use "mixins/generate-colour-classes";
-@use "mixins/generate-button-classes";
+@forward "mixins/linear-gradient";
+@forward "mixins/text-contrast";
+@forward "mixins/generate-colour-classes";
+@forward "mixins/generate-button-classes";
diff --git a/web/app/themes/badegg/resources/css/global/_typography.scss b/web/app/themes/badegg/resources/css/global/_typography.scss
index d5d59650..0db54be8 100644
--- a/web/app/themes/badegg/resources/css/global/_typography.scss
+++ b/web/app/themes/badegg/resources/css/global/_typography.scss
@@ -1,7 +1,4 @@
-@use "variables/fonts";
-@use "variables/breakpoints";
-@use "variables/colours";
-@use "variables/spacing";
+@use "variables";
 
 .wysiwyg {
   > *:first-child {
@@ -19,9 +16,9 @@ h3,
 h4,
 h5,
 h6 {
-  color: colours.$primary;
+  color: variables.$primary;
   font-weight: 700;
-  font-family: fonts.$font;
+  font-family: variables.$font;
   line-height: 1.1em;
   margin: 1.5em 0 0.25em;
   padding: 0;
@@ -32,7 +29,7 @@ h6 {
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
     }
   }
 }
@@ -48,7 +45,7 @@ h3 { font-size: 1.25em; }
 h4,
 h5 { font-size: 1.15em; }
 
-@media (min-width: breakpoints.$screen-sm) {
+@media (min-width: variables.$screen-sm) {
   h1 { font-size: 2.5em; }
   h2 { font-size: 2em; }
   h3 { font-size: 1.5em; }
@@ -63,8 +60,8 @@ p,
 li,
 td,
 label {
-  color: colours.$grey-darker;
-  font-family: fonts.$font;
+  color: variables.$grey-darker;
+  font-family: variables.$font;
   font-weight: 400;
   line-height: 1.5em;
   margin: 0 0 0.8em;
@@ -72,30 +69,30 @@ label {
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
     }
   }
 }
 
 a {
-  color: colours.$primary;
+  color: variables.$primary;
   text-decoration: none;
   outline: none;
   transition: all 300ms ease;
 
   &:hover,
   &:focus {
-    color: colours.$primary-dark;
+    color: variables.$primary-dark;
     text-decoration: none;
   }
 
   @media screen {
     .knockout & {
-      color: colours.$white;
+      color: variables.$white;
 
       &:hover,
       &:focus {
-        color: colours.$primary-light;
+        color: variables.$primary-light;
       }
     }
   }
@@ -131,12 +128,12 @@ ol {
 hr {
   margin: 2em auto;
   height: 0;
-  border: 0 solid colours.$grey-light;
-  border-width: spacing.$borderThin 0 0;
+  border: 0 solid variables.$grey-light;
+  border-width: variables.$borderThin 0 0;
 
   @media screen {
     .knockout & {
-      border-color: colours.$white;
+      border-color: variables.$white;
     }
   }
 }
diff --git a/web/app/themes/badegg/resources/css/global/_variables.scss b/web/app/themes/badegg/resources/css/global/_variables.scss
index d2eb7382..50049d4e 100644
--- a/web/app/themes/badegg/resources/css/global/_variables.scss
+++ b/web/app/themes/badegg/resources/css/global/_variables.scss
@@ -1,4 +1,4 @@
-@use "variables/fonts";
-@use "variables/colours";
-@use "variables/breakpoints";
-@use "variables/spacing";
+@forward "variables/fonts";
+@forward "variables/colours";
+@forward "variables/breakpoints";
+@forward "variables/spacing";
diff --git a/web/app/themes/badegg/resources/css/global/framework/_breakpoints.scss b/web/app/themes/badegg/resources/css/global/framework/_breakpoints.scss
index fe0232fb..512ea4a8 100644
--- a/web/app/themes/badegg/resources/css/global/framework/_breakpoints.scss
+++ b/web/app/themes/badegg/resources/css/global/framework/_breakpoints.scss
@@ -1,6 +1,6 @@
-@use "../variables/breakpoints";
+@use "../variables";
 
-@each $label, $value in breakpoints.$breakpoints {
+@each $label, $value in variables.$breakpoints {
   .min-#{$label} {
     @media (min-width: $value) {
       display: none;
diff --git a/web/app/themes/badegg/resources/css/global/framework/_colours.scss b/web/app/themes/badegg/resources/css/global/framework/_colours.scss
index f56475cc..e6fe723b 100644
--- a/web/app/themes/badegg/resources/css/global/framework/_colours.scss
+++ b/web/app/themes/badegg/resources/css/global/framework/_colours.scss
@@ -1,13 +1,12 @@
-@use "../mixins/generate-button-classes";
-@use "../mixins/generate-colour-classes";
-@use "../variables/colours";
+@use "../mixins";
+@use "../variables";
 
 ::selection {
-  color: colours.$white;
-  background: colours.$primary;
+  color: variables.$white;
+  background: variables.$primary;
 }
 
-@each $color, $hex in colours.$colors {
-  @include generate-colour-classes.generate_colour_classes($color, $hex);
-  @include generate-button-classes.generate_button_colors($color, $hex);
+@each $color, $hex in variables.$colors {
+  @include mixins.generate_colour_classes($color, $hex);
+  @include mixins.generate_button_colors($color, $hex);
 }
diff --git a/web/app/themes/badegg/resources/css/global/framework/_normalise.scss b/web/app/themes/badegg/resources/css/global/framework/_normalise.scss
index 7d146e38..454ca72f 100644
--- a/web/app/themes/badegg/resources/css/global/framework/_normalise.scss
+++ b/web/app/themes/badegg/resources/css/global/framework/_normalise.scss
@@ -1,4 +1,4 @@
-@use "../variables/colours";
+@use "../variables";
 
 * {
   box-sizing: border-box;
@@ -13,7 +13,7 @@ body,
 html {
   margin: 0;
   padding: 0;
-  background: colours.$white;
+  background: variables.$white;
 }
 
 .visually-hidden {
diff --git a/web/app/themes/badegg/resources/css/global/framework/_spacing.scss b/web/app/themes/badegg/resources/css/global/framework/_spacing.scss
index 87cfcbc3..4f283ee7 100644
--- a/web/app/themes/badegg/resources/css/global/framework/_spacing.scss
+++ b/web/app/themes/badegg/resources/css/global/framework/_spacing.scss
@@ -1,26 +1,25 @@
-@use "../variables/colours";
-@use "../variables/spacing";
+@use "../variables";
 
 .brand {
   display: block;
-  width: spacing.$brandWidth;
-  height: spacing.$brandHeight;
+  width: variables.$brandWidth;
+  height: variables.$brandHeight;
 
   svg,
   img {
     display: block;
-    width: spacing.$brandWidth;
-    height: spacing.$brandHeight;
+    width: variables.$brandWidth;
+    height: variables.$brandHeight;
   }
 
   .knockout & {
     @media screen {
       .fill-primary {
-        fill: colours.$white;
+        fill: variables.$white;
       }
 
       .fill-grey {
-        fill: rgba(colours.$white, 0.8);
+        fill: rgba(variables.$white, 0.8);
       }
     }
   }
@@ -32,32 +31,32 @@ figure {
 }
 
 .container {
-  width: calc(100% - spacing.$innerMedium * 2);
+  width: calc(100% - variables.$innerMedium * 2);
   margin: auto;
 
   &-full { width: auto; }
-  &-large { max-width: spacing.$containerLarge; }
-  &-medium { max-width: spacing.$containerMedium; }
-  &-small { max-width: spacing.$containerSmall; }
-  &-narrow { max-width: spacing.$containerNarrow; }
+  &-large { max-width: variables.$containerLarge; }
+  &-medium { max-width: variables.$containerMedium; }
+  &-small { max-width: variables.$containerSmall; }
+  &-narrow { max-width: variables.$containerNarrow; }
 }
 
 .section {
-  padding: spacing.$sectionMedium 0;
+  padding: variables.$sectionMedium 0;
 
-  &-small { padding: spacing.$sectionSmall 0; }
-  &-medium { padding: spacing.$sectionMedium 0; }
-  &-large { padding: spacing.$sectionLarge 0; }
+  &-small { padding: variables.$sectionSmall 0; }
+  &-medium { padding: variables.$sectionMedium 0; }
+  &-large { padding: variables.$sectionLarge 0; }
 
   &-zero-top { padding-top: 0; }
   &-zero-bottom { padding-bottom: 0; }
 }
 
 .inner {
-  padding: spacing.$innerMedium;
+  padding: variables.$innerMedium;
 
-  &-small { padding: spacing.$innerSmall; }
-  &-large { padding: spacing.$innerLarge; }
+  &-small { padding: variables.$innerSmall; }
+  &-large { padding: variables.$innerLarge; }
 
   &-zero-x {
     padding-left: 0;
@@ -71,7 +70,7 @@ figure {
 }
 
 .rounded {
-  border-radius: spacing.$borderRadius;
+  border-radius: variables.$borderRadius;
 
   &-top {
     border-bottom-right-radius: 0;
@@ -86,12 +85,12 @@ figure {
 
 .border {
   border-style: solid;
-  border-width: spacing.$borderWidth;
+  border-width: variables.$borderWidth;
 
   &-thin { border-width: 0.0625em; }
-  &-regular { border-width: spacing.$borderWidth; }
-  &-thick { border-width: spacing.$borderThick; }
-  &-thicker { border-width: spacing.$borderThicker; }
+  &-regular { border-width: variables.$borderWidth; }
+  &-thick { border-width: variables.$borderThick; }
+  &-thicker { border-width: variables.$borderThicker; }
 
   &-top {
     border-right-width: 0;
diff --git a/web/app/themes/badegg/resources/css/global/mixins/_generate-button-classes.scss b/web/app/themes/badegg/resources/css/global/mixins/_generate-button-classes.scss
index f09ec89f..93d8048e 100644
--- a/web/app/themes/badegg/resources/css/global/mixins/_generate-button-classes.scss
+++ b/web/app/themes/badegg/resources/css/global/mixins/_generate-button-classes.scss
@@ -1,4 +1,4 @@
-@use "../variables/colours";
+@use "../variables";
 
 @use "sass:color";
 
@@ -12,13 +12,13 @@
 
   @each $button in $buttons {
     #{$button}.#{$name} {
-      color: colours.$white;
+      color: variables.$white;
       background: $hex;
       border-color: $hex;
 
       &:hover,
       &:focus {
-        color: colours.$white;
+        color: variables.$white;
         background: color.adjust($hex, $lightness: 10%);
         border-color: color.adjust($hex, $lightness: 10%);
       }
diff --git a/web/app/themes/badegg/resources/css/global/mixins/_generate-colour-classes.scss b/web/app/themes/badegg/resources/css/global/mixins/_generate-colour-classes.scss
index 01ee40a1..a5a0883d 100644
--- a/web/app/themes/badegg/resources/css/global/mixins/_generate-colour-classes.scss
+++ b/web/app/themes/badegg/resources/css/global/mixins/_generate-colour-classes.scss
@@ -1,5 +1,5 @@
 @use "text-contrast";
-@use "../variables/colours";
+@use "../variables";
 
 @use "sass:color";
 
@@ -24,11 +24,11 @@
         @include text-contrast.text_contrast(color.invert($hex));
         background: color.invert($hex);
         @if($name == "white") {
-          color: colours.$white;
-          background: colours.$primary;
+          color: variables.$white;
+          background: variables.$primary;
         } @else if($name == "black") {
-          color: colours.$white;
-          background: colours.$primary-lighter;
+          color: variables.$white;
+          background: variables.$primary-lighter;
         } @else {
           @include text-contrast.text_contrast(color.invert($hex));
           background: color.invert($hex);
diff --git a/web/app/themes/badegg/resources/css/global/mixins/_text-contrast.scss b/web/app/themes/badegg/resources/css/global/mixins/_text-contrast.scss
index a9b1db22..cf7979dc 100644
--- a/web/app/themes/badegg/resources/css/global/mixins/_text-contrast.scss
+++ b/web/app/themes/badegg/resources/css/global/mixins/_text-contrast.scss
@@ -1,11 +1,11 @@
-@use "../variables/colours";
-
 @use "sass:color";
 @use "sass:math";
 
-@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
+@use "../variables";
+
+@mixin text-contrast($n, $dark: variables.$black, $light: variables.$white, $cutoff: 1.667) {
   $brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
-  $light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
+  $light-color: math.round((color.channel(variables.$white, "red") * 299) + (color.channel(variables.$white, "green") * 587) + math.div((color.channel(variables.$white, "blue") * 114), 1000));
 
   @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
     color: $light;
diff --git a/web/app/themes/badegg/resources/css/plugins/_contact-form-7.scss b/web/app/themes/badegg/resources/css/plugins/_contact-form-7.scss
index 9bee6a07..25107413 100644
--- a/web/app/themes/badegg/resources/css/plugins/_contact-form-7.scss
+++ b/web/app/themes/badegg/resources/css/plugins/_contact-form-7.scss
@@ -1,4 +1,4 @@
-@use "../global/variables/colours";
+@use "../global/variables";
 
 .wpcf7 .screen-reader-response {
   display: none;
@@ -11,11 +11,11 @@
 
   padding: 1em 0 0;
   margin-top: 2em;
-  border: 1px solid colours.$grey-light;
+  border: 1px solid variables.$grey-light;
   border-width: 1px 0 0;
 
   .knockout & {
-    border-color: rgba(colours.$white, 0.3);
+    border-color: rgba(variables.$white, 0.3);
   }
 }
 
diff --git a/web/app/themes/badegg/resources/css/plugins/_mce.scss b/web/app/themes/badegg/resources/css/plugins/_mce.scss
index 6505c751..2d5a69c9 100644
--- a/web/app/themes/badegg/resources/css/plugins/_mce.scss
+++ b/web/app/themes/badegg/resources/css/plugins/_mce.scss
@@ -1,14 +1,14 @@
-@use "../global/variables/colours";
+@use "../global/variables";
 
 #mce-responses {
   .response {
     padding: 0 0 1em;
     margin: 0 0 1em;
     font-size: 0.875em;
-    border-bottom: 1px solid colours.$grey-lighter;
+    border-bottom: 1px solid variables.$grey-lighter;
   }
 }
 
 .knockout #mce-responses .response {
-  border-bottom-color: rgba(colours.$white, 0.3);
+  border-bottom-color: rgba(variables.$white, 0.3);
 }