replace vars with CSS custom props

ui/src/css/base/_config.scss

@@ -3,7 +3,6 @@
 Config settings.
 ----------------------------------------------------------------------------
 */
-
 :root {
     /* Layout. */
     --site-max-width: null;
@@ -15,35 +14,29 @@ Config settings.
     --gutter-l: var(--space-m-l);
     --gutter-xl: var(--space-l-xl);
 
+    /* Grid columns. */
+    --grid-item-min-width: 12.5rem;
+    --grid-item-max-width: 17.5rem;
+
+    /* Borders. */
+    --border-width-s: 0.0625rem;
+    --border-width-m: 0.125rem;
+
+    /* Icons. */
+    --icon-size-s: 1rem;
+    --icon-size-m: 1.5rem;
+    --icon-size-l: 2rem;
+
     /* Miscellaneous. */
     --media-aspect-ratio: 16/9;
 }
 
 /*
 ----------------------------------------------------------------------------
-Grid / Flex.
-----------------------------------------------------------------------------
-*/
-$grid-item-min-width: 12.5rem !default; // Stop grid columns getting too small.
-$grid-item-max-width: 17.5rem !default; // Or too large.
-
-/*
-----------------------------------------------------------------------------
-Borders.
-----------------------------------------------------------------------------
-*/
-$border-width-s: 0.0625rem !default;
-$border-width-m: 0.125rem !default;
-$border-width-l: 0.25rem !default;
-
-/*
-----------------------------------------------------------------------------
-Icons.
+TODO - refactor mixin
 ----------------------------------------------------------------------------
 */
-$icon-size-s: 1rem !default;
-$icon-size-m: 1.5rem !default;
-$icon-size-l: 2rem !default;
+$grid-item-min-width: 12.5rem !default;
 
 /*
 ----------------------------------------------------------------------------

ui/src/css/components/_accordion.scss

@@ -40,7 +40,7 @@ Dependencies.
     &--custom-icon {
         .accordion__summary {
             align-items: center;
-            border-block-end: $border-width-s solid;
+            border-block-end: var(--border-width-s) solid;
             display: flex;
             justify-content: space-between;
             list-style: none;

ui/src/css/components/_button.scss

@@ -10,7 +10,7 @@ Dependencies.
     @include button-reset;
 
     &[class*='text'] {
-        border: $border-width-s solid;
+        border: var(--border-width-s) solid;
     }
 
     &--text-icon {

ui/src/css/components/_nav.scss

@@ -41,7 +41,7 @@ Dependencies.
 
     .nav__list--dropdown {
         background-color: $color-background;
-        border: $border-width-s solid;
+        border: var(--border-width-s) solid;
         flex-direction: column;
         inset-block-start: 100%;
         inset-inline-start: 0;
@@ -89,7 +89,7 @@ Dependencies.
         webui-disclosure:defined {
             .nav__list {
                 background-color: $color-background;
-                border: $border-width-s solid;
+                border: var(--border-width-s) solid;
                 inset-block-start: 100%;
                 padding: var(--gutter-m);
                 position: absolute;

ui/src/css/components/_skin.scss

@@ -21,7 +21,7 @@ Dependencies.
     .skin {
         // Arbitrary styling to demo the concept.
         &-1 {
-            border: $border-width-s solid;
+            border: var(--border-width-s) solid;
             color: inherit;
             padding: var(--gutter-m);
         }

ui/src/css/components/_tables.scss

@@ -9,7 +9,7 @@ Dependencies.
 // Define mixin so tables inside prose content can be styled without requiring CSS class to be added.
 @mixin table {
     :is(th, td) {
-        border: $border-width-s solid hsl(var(--color-neutral-900) / 10%);
+        border: var(--border-width-s) solid hsl(var(--color-neutral-900) / 10%);
         padding: var(--gutter-m);
 
         /* stylelint-disable-next-line order/order */

ui/src/css/form/_checkbox.scss

@@ -16,7 +16,7 @@ Dependencies.
         inline-size: 1.5em;
 
         &:invalid:required:focus {
-            box-shadow: 0 0 0 $border-width-m $color-error;
+            box-shadow: 0 0 0 var(--border-width-m) $color-error;
         }
     }
 }

ui/src/css/form/_radio.scss

@@ -16,7 +16,7 @@ Dependencies.
         inline-size: 1.5em;
 
         &:invalid:required:focus {
-            box-shadow: 0 0 0 $border-width-m $color-error;
+            box-shadow: 0 0 0 var(--border-width-m) $color-error;
         }
     }
 }

ui/src/css/global/_icon.scss

@@ -11,14 +11,14 @@ Dependencies.
     fill: currentColor;
 
     &--small {
-        block-size: $icon-size-s;
+        block-size: var(--icon-size-s);
     }
 
     &--medium {
-        block-size: $icon-size-m;
+        block-size: var(--icon-size-m);
     }
 
     &--large {
-        block-size: $icon-size-l;
+        block-size: var(--icon-size-l);
     }
 }

ui/src/css/global/_reset.scss

@@ -130,7 +130,7 @@ iframe {
 }
 
 hr {
-    border: $border-width-s solid;
+    border: var(--border-width-s) solid;
     margin-block: var(--gutter-m);
 }
 

ui/src/css/mixins/_focus.scss

@@ -44,17 +44,17 @@ Dependencies.
 
     // See https://css-tricks.com/the-focus-visible-trick/
     &:focus-visible {
-        box-shadow: 0 0 0 $border-width-l $color-focus;
-        outline: $border-width-l solid transparent; // So high contrast mode works.
+        box-shadow: 0 0 0 var(--border-width-l) $color-focus;
+        outline: var(--border-width-l) solid transparent; // So high contrast mode works.
 
         /* stylelint-disable-next-line order/order */
         @if $inset {
-            box-shadow: inset 0 0 0 $border-width-l $color-focus;
+            box-shadow: inset 0 0 0 var(--border-width-l) $color-focus;
         }
         @content;
     }
 
     &:focus:not(:focus-visible) {
-        outline: $border-width-l solid transparent;
+        outline: var(--border-width-l) solid transparent;
     }
 }

ui/src/css/mixins/_form-field-reset.scss

@@ -8,26 +8,26 @@ Dependencies.
 
 @mixin form-field-reset {
     @include focus($background: true);
-    border: $border-width-s solid;
+    border: var(--border-width-s) solid;
     padding: var(--gutter-s);
 
     // Native HTML5 validation.
     &:valid:required {
         background-color: hsl(var(--color-accent-positive) / 10%);
         border-color: $color-success;
-        border-width: $border-width-m;
+        border-width: var(--border-width-m);
     }
 
     &:user-invalid:required {
         background-color: hsl(var(--color-accent-negative) / 10%);
         border-color: $color-error;
-        border-width: $border-width-m;
+        border-width: var(--border-width-m);
     }
 
     // ARIA.
     &[aria-invalid='true'] {
         background-color: hsl(var(--color-accent-negative) / 10%);
         border-color: $color-error;
-        border-width: $border-width-m;
+        border-width: var(--border-width-m);
     }
 }

ui/src/css/mixins/_grid.scss

@@ -10,7 +10,7 @@ Dependencies.
 // 2. The min() function inside minmax() ensures there is no horizontal overflow on very narrow screens.
 @mixin responsive-grid-auto-columns(
     $auto-layout: auto-fit,
-    $min-width: $grid-item-min-width,
+    $min-width: var(--grid-item-min-width),
     $max-width: 1fr
 ) {
     grid-template-columns: repeat(
@@ -22,7 +22,7 @@ Dependencies.
 @mixin responsive-grid-asymmetric(
     $col1: 66.66%,
     $col2: 33.33%,
-    $min-width: $grid-item-min-width
+    $min-width: var(--grid-item-min-width)
 ) {
     // Container queries.
     @container (inline-size >= calc(#{$grid-item-min-width} * 2)) {

ui/src/css/web-components/_webui-carousel.scss

@@ -19,7 +19,7 @@ webui-carousel {
 
     // Identify current slide (when using PREV|NEXT buttons).
     .is-current:not(:focus-visible) {
-        box-shadow: inset 0 0 0 $border-width-l $color-brand; // For demo purposes.
+        box-shadow: inset 0 0 0 var(--border-width-l) $color-brand; // For demo purposes.
     }
 
     .carousel__controls {
@@ -35,7 +35,7 @@ webui-carousel {
         }
 
         &__pip {
-            border: $border-width-s solid;
+            border: var(--border-width-s) solid;
             border-radius: 50%;
             font-size: 0;
             padding: var(--gutter-s);

ui/src/css/web-components/_webui-make-clickable.scss

@@ -26,8 +26,8 @@ webui-make-clickable {
         // Visible focus state only if 'data-url' link receives keyboard focus.
         &:focus-within {
             &:has([data-url]:focus-visible) {
-                box-shadow: 0 0 0 $border-width-l $color-focus;
-                outline: $border-width-l solid transparent; // So high contrast mode works.
+                box-shadow: 0 0 0 var(--border-width-l) $color-focus;
+                outline: var(--border-width-l) solid transparent; // So high contrast mode works.
             }
         }
 

ui/src/css/web-components/_webui-notify.scss

@@ -8,7 +8,7 @@ Dependencies.
 
 webui-notify {
     align-items: flex-start;
-    border: $border-width-s solid;
+    border: var(--border-width-s) solid;
     display: flex;
     justify-content: space-between;
     padding: var(--gutter-m);
@@ -34,8 +34,8 @@ webui-notify {
 
     [data-close] {
         flex-shrink: 0;
-        inset-block-start: calc($icon-size-s * -1);
-        inset-inline-end: calc($icon-size-s * -1);
+        inset-block-start: calc(var(--icon-size-s) * -1);
+        inset-inline-end: calc(var(--icon-size-s) * -1);
         position: relative;
     }
 

ui/src/css/web-components/_webui-range-input.scss

@@ -12,10 +12,10 @@ Dependencies.
 
 @mixin slider-thumb {
     background-color: $color-brand;
-    block-size: $icon-size-l;
+    block-size: var(--icon-size-l);
     border: 0;
     border-radius: 50%;
-    inline-size: $icon-size-l;
+    inline-size: var(--icon-size-l);
 }
 
 @mixin slider-track {

ui/src/css/web-components/_webui-toggle.scss

@@ -13,7 +13,7 @@ webui-toggle {
 
     [role='switch'] {
         align-items: center;
-        border: $border-width-s solid;
+        border: var(--border-width-s) solid;
         display: inline-flex;
         padding: 0;
 
@@ -44,7 +44,7 @@ webui-toggle {
         gap: var(--gutter-s);
 
         .toggle__indicator {
-            border: $border-width-s solid;
+            border: var(--border-width-s) solid;
             display: flex;
         }
     }

ui/src/css/web-components/_webui-video-player.scss

@@ -18,7 +18,7 @@ webui-video-player {
         }
 
         .icon {
-            block-size: $icon-size-l;
+            block-size: var(--icon-size-l);
         }
     }