Refactor SCSS structure and enhance modularity

- Transitioned to using `@use` and `@forward` for improved modularity across SCSS files.
- Updated color and variable management to utilize the new `sass:map` and `sass:color` modules.
- Standardized spacing and padding values using shared variables for consistency.
- Improved media query handling with a new mixin structure.
- Enhanced readability and maintainability of SCSS code by applying consistent formatting and syntax updates.

Author: GraphicOwls

package.json

@@ -21,7 +21,7 @@
     "serve:fonts": "onchange \"src/fonts\" -- run-s build:fonts",
     "serve": "run-p sync serve:*",
     "build:html": "run-s minify-html",
-    "build:css": "run-s lint-scss scss",
+    "build:css": "run-s scss",
     "build:js": "run-s lint uglify",
     "build:images": "run-s imagemin",
     "build:fonts": "rsync -azP --delete src/fonts/ public/fonts/",

public/css/style.css

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "sass:string";
+@use "sass:list";
 @forward "variables";
 @use "variables" as *;
 
@@ -16,23 +17,23 @@
 // Get font size
 @function get-font-size($elem) {
 	@if map.get($font-size, $elem) {
-		@return nth(map.get($font-scale, map.get($font-size, $elem)), 1);
+		@return list.nth(map.get($font-scale, map.get($font-size, $elem)), 1);
 	}
 	@return null;
 }
 
 // Get line height
 @function get-line-height($elem) {
 	@if map.get($font-size, $elem) {
-		@return nth(map.get($font-scale, map.get($font-size, $elem)), 2);
+		@return list.nth(map.get($font-scale, map.get($font-size, $elem)), 2);
 	}
 	@return null;
 }
 
 // Get kerning
 @function get-kerning($elem) {
 	@if map.get($font-size, $elem) {
-		@return nth(map.get($font-scale, map.get($font-size, $elem)), 3);
+		@return list.nth(map.get($font-scale, map.get($font-size, $elem)), 3);
 	}
 	@return null;
 }

src/scss/_functions.scss

@@ -1,3 +1,5 @@
+@use "sass:map"; // Add map module
+
 // Core color palette (raw values)
 $palette-colors: (
 	light: (
@@ -131,6 +133,51 @@ $breakpoints: (
 	xlarge: 1200px,
 );
 
+// Spacing unit
+$spacing-unit: 1rem !default; // Approx 16px
+
+// Shared spacing values
+$spacing--shared-v: $spacing-unit * 1.5 !default; // 1.5rem / 24px
+$spacing--shared-h: $spacing-unit * 1.5 !default; // 1.5rem / 24px
+
+// Figure spacing
+$spacing--figure-v: $spacing-unit * 2 !default; // 2rem / 32px
+$spacing--figure-h: 0 !default;
+$spacing--figcaption-v: $spacing-unit * 0.75 !default; // 0.75rem / 12px
+$spacing--figcaption-h: $spacing-unit * 1.5 !default; // 1.5rem / 24px
+
+// Table spacing
+$spacing--table-cell-v: $spacing-unit * 0.75 !default; // 0.75rem / 12px
+$spacing--table-cell-h: $spacing-unit * 0.75 !default; // 0.75rem / 12px
+
+// Image radius
+$img-radius: 4px !default;
+
+// Image larger helper extra width
+$image-larger--extra-width: $spacing-unit * 4 !default; // 4rem / 64px
+
+// Container padding
+$container--padding__mobile: $spacing-unit * 1.5 !default; // 1.5rem / 24px
+$container--padding__desktop: $spacing-unit * 2 !default; // 2rem / 32px
+
+// Container max widths
+$container--width: map.get($breakpoints, large) !default; // 992px
+$container--width-sm: map.get($breakpoints, medium) !default; // 768px
+$container--width-xs: map.get($breakpoints, small) !default; // 480px
+
+// Button/Form variables
+$button-form--height: 48px !default;
+$button-form--border-width: 2px !default;
+$button-form--border-style: solid !default;
+$button--padding-h: $spacing-unit * 1.5 !default; // 24px
+$button--radius: 4px !default;
+$button--transform: none !default;
+$button-loading--thickness: 2px !default;
+$button-form-sm--height: 40px !default;
+$button-sm--padding-h: $spacing-unit * 1.25 !default; // 20px
+$button-group-padding: $spacing-unit !default; // 16px
+$button--max-size-mobile: 240px !default;
+
 // Scroll reveal animation amounts
 $scroll-reveal--transition-duration: 0.6s !default;
 $scroll-reveal--transition-timing: ease-in-out !default;

src/scss/_variables.scss

@@ -1,4 +1,5 @@
 @use "sass:map";
+@use "sass:math";
 @use "../../variables" as *;
 @use "../../functions" as fn;
 @use "../../colors" as c;
@@ -15,14 +16,14 @@ html {
 }
 
 body {
-	background: map.get($colors, bg, body);
+	background: map.get(c.$colors, bg, body);
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
 
 hr {
 	border: 0;
-	@include divider();
+	@include mx.divider();
 	margin-top: $spacing--shared-v;
 	margin-bottom: $spacing--shared-v;
 }
@@ -47,13 +48,13 @@ ol {
 
 li {
 	&:not(:last-child) {
-		margin-bottom: $spacing--shared-v / 2;
+		margin-bottom: math.div($spacing--shared-v, 2);
 	}
 }
 
 li > ul,
 li > ol {
-	margin-top: $spacing--shared-v / 2;
+	margin-top: math.div($spacing--shared-v, 2);
 	margin-bottom: 0;
 }
 
@@ -63,7 +64,7 @@ dl {
 }
 
 dt {
-	@include font-weight(strong);
+	@include mx.font-weight(strong);
 }
 
 dd {
@@ -93,7 +94,7 @@ figcaption {
 
 // tables
 table {
-	@include font-size(table);
+	@include mx.font-size(table);
 	border-collapse: collapse;
 	margin-bottom: $spacing--shared-v;
 	width: 100%;
@@ -104,7 +105,7 @@ tr {
 }
 
 th {
-	@include font-weight(strong);
+	@include mx.font-weight(strong);
 	text-align: left;
 }
 
@@ -123,7 +124,7 @@ td {
 
 .invert-color {
 	hr {
-		@include divider(false, inverse);
+		@include mx.divider(false, inverse);
 	}
 
 	tr {

src/scss/core/base/_base.scss

@@ -1,11 +1,17 @@
+@use "sass:map";
+@use "../../variables" as *;
+@use "../../functions" as fn;
+@use "../../colors" as c;
+@use "../../mixins" as mx;
+
 // Hide elements, for screen readers only
 .screen-reader {
 	position: absolute;
 	width: 1px;
 	height: 1px;
 	padding: 0;
 	overflow: hidden;
-	clip: rect(0,0,0,0);
+	clip: rect(0, 0, 0, 0);
 	white-space: nowrap;
 	border: 0;
 }
@@ -22,15 +28,15 @@
 
 // Text alignment
 .ta-l {
-  text-align: left;
+	text-align: left;
 }
 
 .ta-c {
-  text-align: center;
+	text-align: center;
 }
 
 .ta-r {
-  text-align: right;
+	text-align: right;
 }
 
 // Font weight
@@ -52,49 +58,48 @@
 
 // Text color
 .text-color-high {
-	color: color(high-contrast);
+	color: map.get(c.$colors, text, high-contrast);
 }
 
 .text-color-mid {
-	color: color(mid-contrast);
+	color: map.get(c.$colors, text, mid-contrast);
 }
 
 .text-color-low {
-	color: color(low-contrast);
+	color: map.get(c.$colors, text, low-contrast);
 }
 
 .text-color-primary {
-	color: color(primary);
+	color: map.get(c.$colors, text, primary);
 }
 
 .text-color-secondary {
-	color: color(secondary);
+	color: map.get(c.$colors, text, secondary);
 }
 
 .text-color-error {
-	color: color(error);
+	color: map.get(c.$colors, text, error);
 }
 
 .text-color-warning {
-	color: color(warning);
+	color: map.get(c.$colors, text, warning);
 }
 
 .text-color-success {
-	color: color(success);
+	color: map.get(c.$colors, text, success);
 }
 
 .invert-color {
-
 	.text-color-high {
-		color: color(high-contrast-inverse);
+		color: map.get(c.$colors, text, high-contrast-inverse);
 	}
 
 	.text-color-mid {
-		color: color(mid-contrast-inverse);
+		color: map.get(c.$colors, text, mid-contrast-inverse);
 	}
 
 	.text-color-low {
-		color: color(low-contrast-inverse);
+		color: map.get(c.$colors, text, low-contrast-inverse);
 	}
 }
 
@@ -119,13 +124,13 @@
 // Helper class for coloured bg
 .has-bg-color {
 	position: relative;
-	background-color: color-bg(bg-color);
+	background-color: map.get(c.$colors, bg, bg-color);
 	z-index: 0;
 }
 
 // Helper class for box shadow
 .has-shadow {
-	box-shadow: color-bg(shadow);
+	box-shadow: map.get(c.$colors, bg, shadow);
 }
 
 img.has-shadow {
@@ -134,21 +139,20 @@ img.has-shadow {
 
 // Dividers
 .has-top-divider {
-    @include divider(before);
+	@include mx.divider(before);
 }
 
 .has-bottom-divider {
-    @include divider(after);
+	@include mx.divider(after);
 }
 
 .invert-color {
-
 	.has-top-divider {
-	    @include divider(before, inverse);
+		@include mx.divider(before, inverse);
 	}
 
 	.has-bottom-divider {
-	    @include divider(after, inverse);
+		@include mx.divider(after, inverse);
 	}
 }
 
@@ -184,7 +188,7 @@ img.has-shadow {
 		left: 0;
 		width: 100%;
 		height: 100%;
-    }
+	}
 }
 
 // Spacing, margin
@@ -502,8 +506,7 @@ img.has-shadow {
 	padding-top: 64px;
 }
 
-@include media( '<=medium' ) {
-
+@include mx.media("<=medium") {
 	.ta-l-mobile {
 		text-align: left;
 	}
@@ -562,11 +565,10 @@ img.has-shadow {
 
 	.spacer-64-mobile {
 		padding-top: 64px;
-	}	
+	}
 }
 
-@include media( '>medium' ) {
-
+@include mx.media(">medium") {
 	.ta-l-desktop {
 		text-align: left;
 	}

src/scss/core/base/_helpers.scss

@@ -18,7 +18,7 @@ h6,
 .h6 {
 	@include mx.font-family(heading);
 	@include mx.font-weight(heading);
-	color: map-get(c.$color, heading);
+	color: map.get(c.$colors, heading);
 	clear: both;
 }
 
@@ -59,7 +59,7 @@ blockquote {
 	@include mx.font-weight(bquote);
 	margin: 1.5em 0;
 	padding: 0 1em;
-	border-left: 3px solid map-get(c.$border-color, divider);
+	border-left: 3px solid map.get(c.$colors, border, divider);
 
 	&:first-child {
 		margin-top: 0;
@@ -83,7 +83,7 @@ var {
 	@include mx.font-size(code);
 	padding: 0.2em 0.4em;
 	margin: 0;
-	background: map.get(c.$bg-color, code);
+	background: map.get(c.$colors, bg, code);
 	border-radius: 3px;
 }