refactor: correct relative paths in Sass @use statements & address Stylelint issues

Relative path issues:

- Change @use 'config' to @use '../config' in base/ and components/
- Change @use 'config' to @use '../../config' in components/navigation/

Resolves sass-loader module resolution error during build

Stylelint issues:

1. **Remove needless stylelint-disable comments** in _grid.scss and _pagination.scss that are no longer needed
2. **Fix @if null check** in _mixins.scss - change from `$variable == null` to `not $variable` (SCSS preferred syntax)
3. **Add interpolation for CSS custom properties** in _variables.scss - wrap all SCSS variables used inside `color.adjust()` with `#{}`
4. Update lint:css script in package.json -- Stylelint should only lint SCSS/CSS files

Author: engineervix

package.json

@@ -20,7 +20,7 @@
   ],
   "scripts": {
     "//[ Linting & formatting ]//": "",
-    "lint:css": "stylelint --report-needless-disables './tbx/static_src/sass' './tbx/static_src/javascript/'",
+    "lint:css": "stylelint --report-needless-disables './tbx/static_src/sass'",
     "lint:js": "eslint --ext .js,.ts,.tsx --report-unused-disable-directives .",
     "lint:format": "prettier --check '**/?(.)*.{md,css,scss,js,ts,tsx,json,yaml,yml,vue}'",
     "lint": "npm run lint:format && npm run lint:js && npm run lint:css",

tbx/static_src/sass/base/_base.scss

@@ -1,5 +1,5 @@
 // Base styles. Some reset rules that would usually be here are now set by Preflight (see tailwind.config.js).
-@use 'config' as *;
+@use '../config' as *;
 @use 'sass:color';
 
 // Prevent text size change on orientation change.

tbx/static_src/sass/base/_fonts.scss

@@ -1,9 +1,9 @@
-@use 'config' as *;
+@use '../config' as *;
 
 @font-face {
-    font-family: 'Outfit';
+    font-family: Outfit;
     font-style: normal;
     font-weight: 200 600; // Define the range of font weights to be used
     font-display: swap;
-    src: url(../fonts/outfit-variable-font.woff2) format('woff2-variations');
+    src: url('../fonts/outfit-variable-font.woff2') format('woff2-variations');
 }

tbx/static_src/sass/base/_typography.scss

@@ -1,4 +1,4 @@
-@use 'config' as *;
+@use '../config' as *;
 @use 'sass:math';
 
 /* ============================================

tbx/static_src/sass/components/_animated-icon.scss

@@ -1,4 +1,4 @@
-@use 'config' as *;
+@use '../config' as *;
 
 .animated-icon {
     $root: &;

tbx/static_src/sass/components/_author.scss

@@ -1,4 +1,4 @@
-@use 'config' as *;
+@use '../config' as *;
 
 .authors {
     grid-column: 2 / span 4;
@@ -51,6 +51,7 @@
         @include media-query(large) {
             margin-bottom: $spacer-small;
         }
+
         .authors-wide & {
             @include media-query(large) {
                 margin-bottom: 0;

tbx/static_src/sass/components/_authors-wide.scss

@@ -1,4 +1,4 @@
-@use 'config' as *;
+@use '../config' as *;
 
 // Authors component is wider than on the blog page and sits at the bottom
 // Used on the work page and impact report page

tbx/static_src/sass/components/_avatar.scss

@@ -1,4 +1,4 @@
-@use 'config' as *;
+@use '../config' as *;
 
 .avatar {
     // Component-specific theme-less accent colors

tbx/static_src/sass/components/_blog-meta.scss

@@ -1,4 +1,4 @@
-@use 'config' as *;
+@use '../config' as *;
 
 .blog-meta {
     margin: $spacer-small 0;

tbx/static_src/sass/components/_button-link.scss

@@ -1,4 +1,4 @@
-@use 'config' as *;
+@use '../config' as *;
 
 .button-link {
     $root: &;