diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
index 8a0a248c7d..586640b9ee 100644
--- a/ui/app/styles/app.scss
+++ b/ui/app/styles/app.scss
@@ -3,11 +3,11 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-@import './reset';
-@import 'ember-basic-dropdown';
-@import 'ember-power-select';
-@import './core';
-@import './docs';
+@use 'reset';
+@use 'ember-basic-dropdown';
+@use 'ember-power-select';
+@use 'core';
+@use 'docs';
 
 @mixin font-face($name) {
   @font-face {
diff --git a/ui/app/styles/components/action-block.scss b/ui/app/styles/components/action-block.scss
index f5b1528317..dd11f77809 100644
--- a/ui/app/styles/components/action-block.scss
+++ b/ui/app/styles/components/action-block.scss
@@ -1,3 +1,7 @@
+@use '../utils/font_variables';
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,7 +12,7 @@
   grid-row: 1/1;
 }
 @mixin stacked-content {
-  margin-bottom: $spacing-24;
+  margin-bottom: size_variables.$spacing-24;
 }
 
 .action-block-width {
@@ -18,17 +22,17 @@
 .action-block {
   grid-template-columns: 2fr 1fr;
   display: grid;
-  padding: $spacing-16 $spacing-24;
+  padding: size_variables.$spacing-16 size_variables.$spacing-24;
   line-height: inherit;
-  grid-gap: $spacing-16;
+  grid-gap: size_variables.$spacing-16;
 
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     @include stacked-grid();
   }
 }
 
 .action-block-info {
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     @include stacked-content();
   }
 }
@@ -41,12 +45,12 @@
 }
 
 .action-block-title {
-  font-size: $size-5;
-  font-weight: $font-weight-bold;
+  font-size: size_variables.$size-5;
+  font-weight: font_variables.$font-weight-bold;
 }
 .action-block-action {
   text-align: right;
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     text-align: left;
   }
 }
@@ -55,22 +59,22 @@
 .replication-actions-grid-layout {
   display: flex;
   flex-wrap: wrap;
-  margin: $spacing-16 0;
-  @include until($mobile) {
+  margin: size_variables.$spacing-16 0;
+  @include mixins.until(size_variables.$mobile) {
     display: block;
   }
 }
 
 .replication-actions-grid-item {
   flex-basis: 50%;
-  padding: $spacing-12;
+  padding: size_variables.$spacing-12;
   display: flex;
   width: 100%;
 }
 
 .replication-actions-grid-item .action-block {
   width: 100%;
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     height: inherit;
   }
 }
diff --git a/ui/app/styles/components/auth-form.scss b/ui/app/styles/components/auth-form.scss
index c6f62abfea..a46f727a73 100644
--- a/ui/app/styles/components/auth-form.scss
+++ b/ui/app/styles/components/auth-form.scss
@@ -1,3 +1,7 @@
+@use '../utils/size_variables';
+@use '../core/box.scss';
+@use '../helper-classes/general.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -25,14 +29,14 @@
 }
 
 .toolbar-namespace-picker {
-  padding: 0 $spacing-12;
+  padding: 0 size_variables.$spacing-12;
 
   .field {
     width: 100%;
   }
 
   .field-label {
-    margin-right: $spacing-12;
+    margin-right: size_variables.$spacing-12;
     align-self: center;
   }
 
diff --git a/ui/app/styles/components/autocomplete-input.scss b/ui/app/styles/components/autocomplete-input.scss
index 2e6e3fcaf8..5c5430d5d5 100644
--- a/ui/app/styles/components/autocomplete-input.scss
+++ b/ui/app/styles/components/autocomplete-input.scss
@@ -1,11 +1,13 @@
+@use '../utils/color_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .autocomplete-input {
-  background: $white !important;
-  border: 1px solid $grey-light;
+  background: color_variables.$white !important;
+  border: 1px solid color_variables.$grey-light;
   box-sizing: border-box;
   border-radius: 3px;
   width: 99%;
@@ -17,7 +19,7 @@
 .autocomplete-input-option {
   padding: 12px;
   &:hover {
-    background-color: $grey-lightest;
+    background-color: color_variables.$grey-lightest;
     cursor: pointer;
   }
 }
diff --git a/ui/app/styles/components/b64-toggle.scss b/ui/app/styles/components/b64-toggle.scss
index 8fa4670b39..bd7d047519 100644
--- a/ui/app/styles/components/b64-toggle.scss
+++ b/ui/app/styles/components/b64-toggle.scss
@@ -1,3 +1,6 @@
+@use '../utils/size_variables';
+@use '../core/buttons.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -5,7 +8,7 @@
 
 .b64-toggle {
   padding: 0.75rem;
-  font-size: $size-9;
+  font-size: size_variables.$size-9;
 }
 .b64-toggle.is-input {
   box-shadow: none;
diff --git a/ui/app/styles/components/box-label.scss b/ui/app/styles/components/box-label.scss
index 9e98534817..4704de5cc0 100644
--- a/ui/app/styles/components/box-label.scss
+++ b/ui/app/styles/components/box-label.scss
@@ -1,3 +1,10 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+@use '../core/box.scss';
+@use '../core/columns.scss';
+@use '../helper-classes/flexbox-and-grid.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -11,11 +18,11 @@ label.box-label {
   @extend .box;
   @extend .is-centered;
 
-  border-color: $grey-light;
+  border-color: color_variables.$grey-light;
   border-radius: 3px;
-  box-shadow: $box-link-shadow;
+  box-shadow: box-shadow_variables.$box-link-shadow;
   text-decoration: none;
-  transition: box-shadow $speed;
+  transition: box-shadow size_variables.$speed;
   width: 100%;
 
   > div:first-child {
@@ -27,15 +34,15 @@ label.box-label {
   }
 
   &.is-selected {
-    box-shadow: $box-link-hover-shadow, $box-shadow-middle;
+    box-shadow: box-shadow_variables.$box-link-hover-shadow, box-shadow_variables.$box-shadow-middle;
 
     .icon {
-      color: $grey;
+      color: color_variables.$grey;
     }
   }
 
   .icon {
-    color: $grey-light;
+    color: color_variables.$grey-light;
   }
 
   input[type='radio'] {
@@ -43,7 +50,7 @@ label.box-label {
   }
 
   input[type='radio'] + label {
-    border: 1px solid $grey-light;
+    border: 1px solid color_variables.$grey-light;
     border-radius: 50%;
     cursor: pointer;
     display: block;
@@ -53,16 +60,16 @@ label.box-label {
   }
 
   input[type='radio']:checked + label {
-    background: $blue;
-    border: 1px solid $blue;
-    box-shadow: inset 0 0 0 0.15rem $white;
+    background: color_variables.$blue;
+    border: 1px solid color_variables.$blue;
+    box-shadow: inset 0 0 0 0.15rem color_variables.$white;
   }
 }
 
 .box-label-header {
-  color: $grey;
+  color: color_variables.$grey;
 
   .is-selected & {
-    color: $grey-darkest;
+    color: color_variables.$grey-darkest;
   }
 }
diff --git a/ui/app/styles/components/calendar-widget.scss b/ui/app/styles/components/calendar-widget.scss
index d7db945638..c616ccf527 100644
--- a/ui/app/styles/components/calendar-widget.scss
+++ b/ui/app/styles/components/calendar-widget.scss
@@ -1,3 +1,8 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -18,13 +23,13 @@ $dark-gray: #535f73;
   }
 }
 .calendar-title {
-  padding: $spacing-10 $spacing-12;
+  padding: size_variables.$spacing-10 size_variables.$spacing-12;
 }
 
 .select-year {
   grid-area: select-year;
   margin: 10px 24px;
-  font-weight: $font-weight-bold;
+  font-weight: font_variables.$font-weight-bold;
   display: flex;
   justify-content: space-between;
   align-items: first baseline;
@@ -36,7 +41,7 @@ $dark-gray: #535f73;
 
 .border-col {
   grid-area: border-col;
-  background-color: $ui-gray-200;
+  background-color: color_variables.$ui-gray-200;
 }
 
 .calendar-widget-container {
@@ -46,9 +51,9 @@ $dark-gray: #535f73;
     'calendar-widget';
   grid-template-columns: 1fr;
   grid-template-rows: 0.7fr 3fr;
-  box-shadow: $box-shadow, $box-shadow-middle;
+  box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-middle;
   background-color: white;
-  border-radius: $radius;
+  border-radius: size_variables.$radius;
 }
 
 .calendar-widget-grid {
diff --git a/ui/app/styles/components/chart-container.scss b/ui/app/styles/components/chart-container.scss
index 75c1928c8a..1ae07e1881 100644
--- a/ui/app/styles/components/chart-container.scss
+++ b/ui/app/styles/components/chart-container.scss
@@ -1,13 +1,19 @@
+@use 'sass:color';
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .chart-wrapper {
-  border: $light-border;
-  border-radius: $radius-large;
-  padding: $spacing-12 $spacing-24;
-  margin-bottom: $spacing-16;
+  border: box-shadow_variables.$light-border;
+  border-radius: size_variables.$radius-large;
+  padding: size_variables.$spacing-12 size_variables.$spacing-24;
+  margin-bottom: size_variables.$spacing-16;
 }
 
 // GRID LAYOUT //
@@ -25,7 +31,7 @@
   grid-column-start: 1;
   grid-column-end: span col4-end;
   grid-row-start: 1;
-  box-shadow: inset 0 -1px 0 $ui-gray-200;
+  box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200;
 }
 
 .has-header-link {
@@ -38,8 +44,8 @@
       &:hover,
       &:focus {
         background-color: transparent;
-        background-color: darken($ui-gray-050, 5%);
-        border-color: darken($ui-gray-300, 5%);
+        background-color: color.adjust(color_variables.$ui-gray-050, $lightness: -5%);
+        border-color: color.adjust(color_variables.$ui-gray-300, $lightness: -5%);
       }
     }
   }
@@ -66,9 +72,9 @@
   grid-column-end: 4;
   grid-row-start: 2;
   grid-row-end: 5;
-  padding-bottom: $spacing-36;
-  margin-bottom: $spacing-12;
-  box-shadow: inset 0 -1px 0 $ui-gray-200;
+  padding-bottom: size_variables.$spacing-36;
+  margin-bottom: size_variables.$spacing-12;
+  box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200;
 
   > h2 {
     padding-left: 18px;
@@ -83,9 +89,9 @@
   grid-column-end: 8;
   grid-row-start: 2;
   grid-row-end: 5;
-  padding-bottom: $spacing-36;
-  margin-bottom: $spacing-12;
-  box-shadow: inset 0 -1px 0 $ui-gray-200;
+  padding-bottom: size_variables.$spacing-36;
+  margin-bottom: size_variables.$spacing-12;
+  box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200;
 
   > h2 {
     padding-left: 18px;
@@ -137,8 +143,8 @@
 .timestamp {
   grid-column: 1 / span 2;
   grid-row-start: -1;
-  color: $ui-gray-500;
-  font-size: $size-9;
+  color: color_variables.$ui-gray-500;
+  font-size: size_variables.$size-9;
   align-self: end;
 }
 
@@ -148,40 +154,40 @@
   grid-column-end: 6;
   align-self: center;
   justify-self: center;
-  font-size: $size-9;
+  font-size: size_variables.$size-9;
 }
 
 // FONT STYLES //
 
 h2.chart-title {
-  font-weight: $font-weight-bold;
-  font-size: $size-5;
-  line-height: $spacing-24;
-  margin-bottom: $spacing-4;
+  font-weight: font_variables.$font-weight-bold;
+  font-size: size_variables.$size-5;
+  line-height: size_variables.$spacing-24;
+  margin-bottom: size_variables.$spacing-4;
 }
 
 p.chart-description {
-  color: $ui-gray-700;
+  color: color_variables.$ui-gray-700;
   font-size: 14px;
   line-height: 18px;
-  margin-bottom: $spacing-8;
+  margin-bottom: size_variables.$spacing-8;
 }
 
 p.chart-subtext {
-  color: $ui-gray-500;
-  font-size: $size-8;
+  color: color_variables.$ui-gray-500;
+  font-size: size_variables.$size-8;
   line-height: 16px;
-  margin-top: $spacing-8;
+  margin-top: size_variables.$spacing-8;
 }
 
 h3.data-details {
-  font-weight: $font-weight-bold;
-  font-size: $size-8;
+  font-weight: font_variables.$font-weight-bold;
+  font-size: size_variables.$size-8;
   line-height: 14px;
-  margin-bottom: $spacing-8;
+  margin-bottom: size_variables.$spacing-8;
 }
 
 p.data-details {
-  font-weight: $font-weight-normal;
-  font-size: $size-4;
+  font-weight: font_variables.$font-weight-normal;
+  font-size: size_variables.$size-4;
 }
diff --git a/ui/app/styles/components/clients-date-range.scss b/ui/app/styles/components/clients-date-range.scss
index e908211109..fdd1b26211 100644
--- a/ui/app/styles/components/clients-date-range.scss
+++ b/ui/app/styles/components/clients-date-range.scss
@@ -1,3 +1,5 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -7,7 +9,7 @@
   display: flex;
   align-items: bottom;
   > * {
-    margin-right: $spacing-8;
+    margin-right: size_variables.$spacing-8;
     vertical-align: bottom;
     align-self: end;
   }
diff --git a/ui/app/styles/components/cluster-banners.scss b/ui/app/styles/components/cluster-banners.scss
index 1acd5ab2a5..0eb8ffdc34 100644
--- a/ui/app/styles/components/cluster-banners.scss
+++ b/ui/app/styles/components/cluster-banners.scss
@@ -1,3 +1,5 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -10,9 +12,9 @@
   padding: 0 1.5rem;
 
   > div {
-    margin-top: $spacing-24;
+    margin-top: size_variables.$spacing-24;
     &:last-of-type {
-      margin-bottom: $spacing-24;
+      margin-bottom: size_variables.$spacing-24;
     }
   }
 }
diff --git a/ui/app/styles/components/codemirror.scss b/ui/app/styles/components/codemirror.scss
index 49cd9d2d33..f336410447 100644
--- a/ui/app/styles/components/codemirror.scss
+++ b/ui/app/styles/components/codemirror.scss
@@ -1,3 +1,8 @@
+@use 'sass:color';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use 'calendar-widget';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -17,10 +22,10 @@ $serf: #dd4e58;
 $packer: #1ddba3;
 
 // Our colors
-$gray: lighten($black, 89%);
-$red: #ff3d3d;
-$green: #39b54a;
-$dark-gray: #535f73;
+$gray: color.adjust(color_variables.$black, $lightness: 89%);
+color_variables.$red: #ff3d3d;
+color_variables.$green: #39b54a;
+calendar-widget.$dark-gray: #535f73;
 
 $gutter-grey: #2a2f36;
 
@@ -28,18 +33,18 @@ $gutter-grey: #2a2f36;
   background-color: #f9f9fa;
   border: 1px solid $light-gray;
   border-radius: 0;
-  color: lighten($black, 13%);
-  font-family: $family-monospace;
+  color: color.adjust(color_variables.$black, $lightness: 13%);
+  font-family: font_variables.$family-monospace;
   font-size: 13px;
   padding: 7px 8px 9px;
 }
 
 .cm-s-hashi-read-only {
   &.CodeMirror {
-    background-color: $grey-lightest;
+    background-color: color_variables.$grey-lightest;
     border: none;
-    color: $ui-gray-600;
-    font-family: $family-monospace;
+    color: color_variables.$ui-gray-600;
+    font-family: font_variables.$family-monospace;
     -webkit-font-smoothing: auto;
     line-height: 1.4;
   }
@@ -49,17 +54,17 @@ $gutter-grey: #2a2f36;
     color: $packer;
   }
   span.cm-property {
-    color: lighten($consul, 20%);
+    color: color.adjust($consul, $lightness: 20%);
   }
 }
 
 .cm-s-hashi {
   &.CodeMirror {
-    background-color: $black !important;
+    background-color: color_variables.$black !important;
     resize: vertical;
     color: #cfd2d1 !important;
     border: none;
-    font-family: $family-monospace;
+    font-family: font_variables.$family-monospace;
     -webkit-font-smoothing: auto;
     line-height: 1.4;
   }
@@ -112,11 +117,11 @@ $gutter-grey: #2a2f36;
   }
 
   span.cm-variable {
-    color: lighten($consul, 20%);
+    color: color.adjust($consul, $lightness: 20%);
   }
 
   span.cm-variable-2 {
-    color: lighten($consul, 20%);
+    color: color.adjust($consul, $lightness: 20%);
   }
 
   span.cm-def {
@@ -127,7 +132,7 @@ $gutter-grey: #2a2f36;
     color: $gray;
   }
   span.cm-keyword {
-    color: $yellow;
+    color: color_variables.$yellow;
   }
 
   span.cm-atom {
@@ -151,7 +156,7 @@ $gutter-grey: #2a2f36;
   }
 
   span.cm-property {
-    color: lighten($consul, 20%);
+    color: color.adjust($consul, $lightness: 20%);
   }
 
   span.cm-variable-3 {
diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss
index 52203b342f..75c1c67ae9 100644
--- a/ui/app/styles/components/console-ui-panel.scss
+++ b/ui/app/styles/components/console-ui-panel.scss
@@ -1,3 +1,9 @@
+@use 'sass:color';
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -15,42 +21,42 @@ $console-close-height: 35px;
   position: fixed;
   bottom: 0;
   transition:
-    min-height $speed $easing,
-    transform $speed ease-in;
+    min-height size_variables.$speed size_variables.$easing,
+    transform size_variables.$speed ease-in;
   will-change: transform, min-height;
   -webkit-overflow-scrolling: touch;
   z-index: 199;
 }
 
 .console-ui-panel-content {
-  color: $white;
+  color: color_variables.$white;
   display: flex;
   flex-direction: column;
-  font-size: $size-7;
-  font-weight: $font-weight-semibold;
+  font-size: size_variables.$size-7;
+  font-weight: font_variables.$font-weight-semibold;
   justify-content: flex-end;
   min-height: calc(100% - $console-close-height); // account for close button that is sticky positioned
-  padding: $spacing-12 $spacing-12 $spacing-18;
-  transition: justify-content $speed ease-in;
+  padding: size_variables.$spacing-12 size_variables.$spacing-12 size_variables.$spacing-18;
+  transition: justify-content size_variables.$speed ease-in;
 
   pre,
   p {
     background: none;
     color: inherit;
-    font-size: $size-7;
+    font-size: size_variables.$size-7;
     min-height: 2rem;
     padding: 0;
 
     &:not(.console-ui-command):not(.CodeMirror-line) {
-      padding-left: $spacing-20;
+      padding-left: size_variables.$spacing-20;
     }
   }
 
   .cm-s-hashi.CodeMirror {
-    background-color: rgba($black, 0.5) !important;
-    font-weight: $font-weight-normal;
-    margin-left: $spacing-20;
-    padding: $spacing-12 $spacing-20;
+    background-color: rgba(color_variables.$black, 0.5) !important;
+    font-weight: font_variables.$font-weight-normal;
+    margin-left: size_variables.$spacing-20;
+    padding: size_variables.$spacing-12 size_variables.$spacing-20;
   }
 
   .console-ui-panel-intro {
@@ -63,19 +69,19 @@ $console-close-height: 35px;
   display: flex;
 
   input {
-    background-color: rgba($black, 0.5);
+    background-color: rgba(color_variables.$black, 0.5);
     border: 1px solid var(--token-color-palette-neutral-500);
     border-radius: var(--token-side-nav-body-list-item-border-radius);
-    caret-color: $white;
-    color: $white;
+    caret-color: color_variables.$white;
+    color: color_variables.$white;
     flex: 1 1 auto;
-    font-family: $family-monospace;
-    font-size: $size-6;
-    font-weight: $font-weight-bold;
+    font-family: font_variables.$family-monospace;
+    font-size: size_variables.$size-6;
+    font-weight: font_variables.$font-weight-bold;
     outline: none;
-    padding: $spacing-8;
-    margin-right: $spacing-8;
-    transition: background-color $speed;
+    padding: size_variables.$spacing-8;
+    margin-right: size_variables.$spacing-8;
+    transition: background-color size_variables.$speed;
   }
 }
 
@@ -84,9 +90,9 @@ $console-close-height: 35px;
 }
 
 .console-ui-output {
-  transition: background-color $speed ease-in-out;
+  transition: background-color size_variables.$speed ease-in-out;
   will-change: background-color;
-  padding-right: $spacing-36;
+  padding-right: size_variables.$spacing-36;
   position: relative;
   background-color: rgba(#000, 0);
   color: var(--token-color-palette-neutral-400);
@@ -96,7 +102,7 @@ $console-close-height: 35px;
 }
 
 .console-ui-alert {
-  margin-left: calc(#{$spacing-20} - 0.33rem);
+  margin-left: calc(#{size_variables.$spacing-20} - 0.33rem);
   position: relative;
   color: var(--token-color-palette-neutral-400);
 
@@ -109,17 +115,17 @@ $console-close-height: 35px;
   &.console-ui-alert--error {
     // HDS tokens are not light enough on the dark background to pass a11y tests.
     // hex value for --token-color-foreground-critical
-    color: lighten(#e52228, 20%);
+    color: color.adjust(#e52228, $lightness: 20%);
   }
   &.console-ui-alert--success {
     // HDS tokens are not light enough on the dark background to pass a11y tests.
     // hex value for --token-color-foreground-success
-    color: lighten(#008a22, 20%);
+    color: color.adjust(#008a22, $lightness: 20%);
   }
 }
 
 .panel-open .console-ui-panel {
-  box-shadow: $box-shadow-highest;
+  box-shadow: box-shadow_variables.$box-shadow-highest;
   min-height: 425px;
 }
 
@@ -151,13 +157,13 @@ $console-close-height: 35px;
 
 .console-close-button {
   position: sticky;
-  top: $spacing-8;
+  top: size_variables.$spacing-8;
   height: $console-close-height;
   display: flex;
   justify-content: flex-end;
   z-index: 210;
 
   button {
-    margin-right: $spacing-8;
+    margin-right: size_variables.$spacing-8;
   }
 }
diff --git a/ui/app/styles/components/control-group.scss b/ui/app/styles/components/control-group.scss
index a4a4b08fe3..adfdeb2fd3 100644
--- a/ui/app/styles/components/control-group.scss
+++ b/ui/app/styles/components/control-group.scss
@@ -1,3 +1,8 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+@use '../core/box.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -6,10 +11,12 @@
 .control-group,
 .control-group-success {
   @extend .box;
-  box-shadow: $box-shadow-middle, 0 0 1px $grey-dark;
+  box-shadow:
+    box-shadow_variables.$box-shadow-middle,
+    0 0 1px color_variables.$grey-dark;
 }
 .control-group-success.is-editor {
-  background: $grey-lightest;
+  background: color_variables.$grey-lightest;
 }
 
 .control-group a {
@@ -17,9 +24,9 @@
 }
 .control-group-header {
   box-shadow: 0 0 1px currentColor;
-  padding: $spacing-10 $spacing-14;
-  background: $grey-lightest;
-  color: $grey-dark;
+  padding: size_variables.$spacing-10 size_variables.$spacing-14;
+  background: color_variables.$grey-lightest;
+  color: color_variables.$grey-dark;
   position: relative;
   strong {
     color: currentColor;
@@ -27,10 +34,10 @@
 }
 
 .control-group-header.is-success {
-  color: $green-dark;
-  background: $green-lightest;
+  color: color_variables.$green-dark;
+  background: color_variables.$green-lightest;
 }
 
 .control-group .authorizations {
-  margin-top: $spacing-10;
+  margin-top: size_variables.$spacing-10;
 }
diff --git a/ui/app/styles/components/doc-link.scss b/ui/app/styles/components/doc-link.scss
index 8629ee56a6..c1d3a4c6a3 100644
--- a/ui/app/styles/components/doc-link.scss
+++ b/ui/app/styles/components/doc-link.scss
@@ -1,11 +1,14 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .doc-link {
-  color: $blue;
-  font-weight: $font-weight-semibold;
+  color: color_variables.$blue;
+  font-weight: font_variables.$font-weight-semibold;
   &:hover {
     text-decoration: underline !important;
   }
diff --git a/ui/app/styles/components/empty-state-component.scss b/ui/app/styles/components/empty-state-component.scss
index e41e118dbe..e62611ebab 100644
--- a/ui/app/styles/components/empty-state-component.scss
+++ b/ui/app/styles/components/empty-state-component.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -9,8 +13,8 @@
   background: var(--token-color-surface-faint);
   display: flex;
   justify-content: center;
-  padding: $spacing-48 $spacing-12;
-  box-shadow: 0 -2px 0 -1px $ui-gray-300;
+  padding: size_variables.$spacing-48 size_variables.$spacing-12;
+  box-shadow: 0 -2px 0 -1px color_variables.$ui-gray-300;
 }
 
 .empty-state-transparent {
@@ -19,7 +23,7 @@
   background: transparent;
   display: flex;
   justify-content: center;
-  padding: $spacing-48 0;
+  padding: size_variables.$spacing-48 0;
   box-shadow: none;
 }
 
@@ -28,36 +32,36 @@
 }
 
 .empty-state-title {
-  color: $grey;
-  font-size: $size-4;
-  font-weight: $font-weight-semibold;
+  color: color_variables.$grey;
+  font-size: size_variables.$size-4;
+  font-weight: font_variables.$font-weight-semibold;
   line-height: 1.2;
-  margin-bottom: $spacing-8;
+  margin-bottom: size_variables.$spacing-8;
 }
 
 .empty-state-subTitle {
-  font-size: $size-7;
+  font-size: size_variables.$size-7;
   margin-top: -10px;
-  padding-bottom: $spacing-12;
+  padding-bottom: size_variables.$spacing-12;
 }
 
 .empty-state-message.has-border-bottom-light {
-  padding-bottom: $spacing-12;
+  padding-bottom: size_variables.$spacing-12;
 }
 
 .empty-state-actions {
-  margin-top: $spacing-8;
+  margin-top: size_variables.$spacing-8;
   display: flex;
   justify-content: space-between;
 
   > * + * {
-    margin-left: $spacing-12;
-    margin-right: $spacing-12;
+    margin-left: size_variables.$spacing-12;
+    margin-right: size_variables.$spacing-12;
   }
 }
 
 .empty-state-icon > .hs-icon,
 .empty-state-icon > .hds-icon {
   float: left;
-  margin-right: $spacing-8;
+  margin-right: size_variables.$spacing-8;
 }
diff --git a/ui/app/styles/components/env-banner.scss b/ui/app/styles/components/env-banner.scss
index cda5d646cf..01230117a9 100644
--- a/ui/app/styles/components/env-banner.scss
+++ b/ui/app/styles/components/env-banner.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,11 +11,11 @@
   border-radius: 3rem;
   background: linear-gradient(
     135deg,
-    $blue,
+    color_variables.$blue,
     hsl(271, 100%, 71%)
   ); // only use case for purple in the app. define here instead of utils/color_var
   animation: env-banner-color-rotate 8s infinite linear alternate;
-  color: $white;
+  color: color_variables.$white;
 
   .hs-icon {
     margin: 0;
@@ -21,7 +24,7 @@
   .notification {
     background-color: transparent;
     line-height: 2;
-    padding: 0 $spacing-12;
+    padding: 0 size_variables.$spacing-12;
   }
 }
 
diff --git a/ui/app/styles/components/form-section.scss b/ui/app/styles/components/form-section.scss
index 2abde3b3d9..7c43905f6f 100644
--- a/ui/app/styles/components/form-section.scss
+++ b/ui/app/styles/components/form-section.scss
@@ -1,3 +1,5 @@
+@use '../utils/color_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -5,7 +7,7 @@
 
 .form-section {
   padding: 1.75rem 0;
-  box-shadow: 0 -1px 0 0 rgba($black, 0.1);
+  box-shadow: 0 -1px 0 0 rgba(color_variables.$black, 0.1);
 }
 
 .field:first-child .form-section,
@@ -19,6 +21,6 @@
   background-color: black;
 
   pre {
-    color: $ui-gray-010;
+    color: color_variables.$ui-gray-010;
   }
 }
diff --git a/ui/app/styles/components/global-flash.scss b/ui/app/styles/components/global-flash.scss
index 933ebe61a1..20b6411570 100644
--- a/ui/app/styles/components/global-flash.scss
+++ b/ui/app/styles/components/global-flash.scss
@@ -1,11 +1,13 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .global-flash {
-  bottom: $spacing-32;
-  right: $spacing-24;
+  bottom: size_variables.$spacing-32;
+  right: size_variables.$spacing-24;
   margin: 10px;
   max-width: 360px;
   position: fixed;
diff --git a/ui/app/styles/components/icon.scss b/ui/app/styles/components/icon.scss
index 378b2418e6..477b69ed28 100644
--- a/ui/app/styles/components/icon.scss
+++ b/ui/app/styles/components/icon.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -6,10 +9,10 @@
 .icon {
   align-items: center;
   display: inline-flex;
-  height: $size-4;
+  height: size_variables.$size-4;
   justify-content: center;
   vertical-align: middle;
-  width: $size-4;
+  width: size_variables.$size-4;
   // override the display if .button.icon to .button's default display: inline-block. See manage namespaces icon button in the namespace picker
   &.button {
     display: inline-block;
@@ -17,14 +20,14 @@
 }
 
 .icon-blue {
-  color: $blue;
+  color: color_variables.$blue;
 }
 
 .hds-icon {
   &.hds-icon--is-inline {
     vertical-align: middle;
-    margin-left: $spacing-4;
-    margin-right: $spacing-4;
+    margin-left: size_variables.$spacing-4;
+    margin-right: size_variables.$spacing-4;
   }
 }
 
diff --git a/ui/app/styles/components/info-table-row.scss b/ui/app/styles/components/info-table-row.scss
index 2067402d4e..4efe17afb3 100644
--- a/ui/app/styles/components/info-table-row.scss
+++ b/ui/app/styles/components/info-table-row.scss
@@ -1,24 +1,31 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .info-table-row {
-  box-shadow: 0 1px 0 $grey-light;
+  box-shadow: 0 1px 0 color_variables.$grey-light;
   margin: 0;
 
   &.has-no-shadow {
     box-shadow: none;
   }
 
-  @include from($mobile) {
+  @include mixins.from(size_variables.$mobile) {
     display: flex;
   }
 
   &.thead {
-    box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light;
+    box-shadow:
+      0 1px 0 color_variables.$grey-light,
+      0 -1px 0 color_variables.$grey-light;
     margin: 0;
-    padding: 0 $spacing-14 0 0;
+    padding: 0 size_variables.$spacing-14 0 0;
 
     .column {
       padding: 0.5rem 0.75rem;
@@ -27,7 +34,7 @@
 
   .column {
     align-self: center;
-    padding: $spacing-16;
+    padding: size_variables.$spacing-16;
 
     &.info-table-row-edit {
       padding-bottom: 0.3rem;
@@ -48,15 +55,15 @@
   }
 
   .hs-icon {
-    margin-right: $spacing-4;
+    margin-right: size_variables.$spacing-4;
   }
 
   .icon-true {
-    color: $green-500;
+    color: color_variables.$green-500;
   }
 
   .icon-false {
-    color: $ui-gray-300;
+    color: color_variables.$ui-gray-300;
   }
 
   a {
@@ -65,34 +72,34 @@
 }
 
 .info-table-row:not(.is-mobile) .column {
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     padding: 0;
   }
 
   &:first-child {
     padding-left: 0;
 
-    @include until($mobile) {
-      padding: $spacing-12 0 0;
+    @include mixins.until(size_variables.$mobile) {
+      padding: size_variables.$spacing-12 0 0;
     }
   }
 
   &:last-child {
     padding-right: 0;
 
-    @include until($mobile) {
-      padding: 0 0 $spacing-12;
+    @include mixins.until(size_variables.$mobile) {
+      padding: 0 0 size_variables.$spacing-12;
     }
   }
 }
 
 .info-table-row-header {
   margin: 0;
-  font-size: $size-8;
-  color: $grey;
-  font-weight: $font-weight-semibold;
+  font-size: size_variables.$size-8;
+  color: color_variables.$grey;
+  font-weight: font_variables.$font-weight-semibold;
 
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     display: none;
   }
   .info-table-row:not(.is-mobile) .column:last-child {
diff --git a/ui/app/styles/components/kmip-role-edit.scss b/ui/app/styles/components/kmip-role-edit.scss
index f4fc884be4..73ef875541 100644
--- a/ui/app/styles/components/kmip-role-edit.scss
+++ b/ui/app/styles/components/kmip-role-edit.scss
@@ -1,3 +1,6 @@
+@use '../utils/size_variables';
+@use '../core/box.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -10,8 +13,8 @@
   @extend .box;
   flex: 1 1 auto;
   box-shadow: none;
-  padding: $spacing-4 0;
+  padding: size_variables.$spacing-4 0;
 }
 .kmip-role-allowed-operations .field {
-  margin-bottom: $spacing-4;
+  margin-bottom: size_variables.$spacing-4;
 }
diff --git a/ui/app/styles/components/known-secondaries-card.scss b/ui/app/styles/components/known-secondaries-card.scss
index 7c47842dd1..9fc6c199cc 100644
--- a/ui/app/styles/components/known-secondaries-card.scss
+++ b/ui/app/styles/components/known-secondaries-card.scss
@@ -1,3 +1,6 @@
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -7,17 +10,17 @@
   grid-column: 2/3;
   grid-row: 1/3;
 
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     grid-column: 1/1;
     grid-row: 1/1;
   }
 
   .secondaries-table {
-    margin-bottom: $spacing-12;
+    margin-bottom: size_variables.$spacing-12;
   }
 
   .link {
-    font-size: $size-7;
+    font-size: size_variables.$size-7;
     text-decoration: none;
   }
 }
diff --git a/ui/app/styles/components/linked-block.scss b/ui/app/styles/components/linked-block.scss
index 707f403cf2..2c851bd138 100644
--- a/ui/app/styles/components/linked-block.scss
+++ b/ui/app/styles/components/linked-block.scss
@@ -1,3 +1,5 @@
+@use '../helper-classes/flexbox-and-grid.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
diff --git a/ui/app/styles/components/list-item-row.scss b/ui/app/styles/components/list-item-row.scss
index 4cea11e44d..c9dc0d4173 100644
--- a/ui/app/styles/components/list-item-row.scss
+++ b/ui/app/styles/components/list-item-row.scss
@@ -1,3 +1,11 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+@use '../core/box.scss';
+@use '../helper-classes/general.scss';
+@use '../helper-classes/spacing.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -17,9 +25,9 @@
   .center-inside-row {
     width: 50%;
     margin-left: auto;
-    font-size: $size-8;
-    font-weight: $font-weight-semibold;
-    color: $ui-gray-500;
+    font-size: size_variables.$size-8;
+    font-weight: font_variables.$font-weight-semibold;
+    color: color_variables.$ui-gray-500;
   }
 
   .center-display {
@@ -35,19 +43,25 @@
 
 a.list-item-row,
 .linked-block.list-item-row {
-  transition: box-shadow $speed, margin $speed, padding $speed;
+  transition:
+    box-shadow size_variables.$speed,
+    margin size_variables.$speed,
+    padding size_variables.$speed;
   will-change: box-shadow, margin, padding;
 
   &:hover,
   &:focus,
   &:active {
-    margin-left: #{-$spacing-10} !important;
-    margin-right: #{-$spacing-10} !important;
-    padding-left: $spacing-10;
-    padding-right: $spacing-10;
+    margin-left: #{-(size_variables.$spacing-10)} !important;
+    margin-right: #{-(size_variables.$spacing-10)} !important;
+    padding-left: size_variables.$spacing-10;
+    padding-right: size_variables.$spacing-10;
     position: relative;
-    box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light, $box-link-hover-shadow,
-      $box-shadow-middle;
+    box-shadow:
+      0 2px 0 -1px color_variables.$grey-light,
+      0 -2px 0 -1px color_variables.$grey-light,
+      box-shadow_variables.$box-link-hover-shadow,
+      box-shadow_variables.$box-shadow-middle;
   }
 
   &.no-destination {
diff --git a/ui/app/styles/components/login-form.scss b/ui/app/styles/components/login-form.scss
index 79476379a5..8865fc3fe6 100644
--- a/ui/app/styles/components/login-form.scss
+++ b/ui/app/styles/components/login-form.scss
@@ -1,9 +1,11 @@
+@use '../utils/box-shadow_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .login-form {
-  box-shadow: $box-shadow, $box-shadow-high;
+  box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-high;
   overflow: auto;
 }
diff --git a/ui/app/styles/components/masked-input.scss b/ui/app/styles/components/masked-input.scss
index 12987d0574..f68db6e8d9 100644
--- a/ui/app/styles/components/masked-input.scss
+++ b/ui/app/styles/components/masked-input.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -14,18 +18,18 @@ pre.masked-font {
 }
 
 .has-label .masked-input {
-  padding-top: $spacing-12;
+  padding-top: size_variables.$spacing-12;
 }
 
 .has-padding {
-  padding: $spacing-8 $spacing-12;
+  padding: size_variables.$spacing-8 size_variables.$spacing-12;
 }
 
 // we want to style the boxes the same everywhere so they
 // need to be the same font and small
 .masked-input.masked .masked-value {
   font-size: 9px;
-  font-family: $family-sans;
+  font-family: font_variables.$family-sans;
   line-height: 2.5;
 }
 
@@ -36,7 +40,7 @@ pre.masked-font {
 // aligns the boxes on the input page
 .masked-input.masked:not(.display-only) .masked-value {
   line-height: 3;
-  border-radius: $radius 0 0 $radius;
+  border-radius: size_variables.$radius 0 0 size_variables.$radius;
 }
 
 //override bulma's pre styling
@@ -45,19 +49,19 @@ pre.masked-font {
   font-size: 1rem;
   padding-top: 0;
   padding-bottom: 0;
-  padding-left: $spacing-12;
+  padding-left: size_variables.$spacing-12;
   background-color: transparent;
 }
 
 .button.masked-input-toggle {
-  min-width: $spacing-36;
+  min-width: size_variables.$spacing-36;
   border-left: 0;
-  color: $grey;
+  color: color_variables.$grey;
   box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
 }
 
 .button.masked-input-toggle {
-  border-radius: 0 $radius $radius 0;
+  border-radius: 0 size_variables.$radius size_variables.$radius 0;
 }
 
 .display-only {
@@ -65,10 +69,10 @@ pre.masked-font {
     background: transparent;
     height: auto;
     line-height: 1rem;
-    min-width: $spacing-24;
+    min-width: size_variables.$spacing-24;
     border: 0;
     box-shadow: none;
-    color: $grey-light;
+    color: color_variables.$grey-light;
     padding-left: 0;
     padding-right: 0;
 
@@ -77,7 +81,7 @@ pre.masked-font {
     &:focus,
     &:hover,
     &:focus:not(:active) {
-      color: $blue;
+      color: color_variables.$blue;
       border: 0;
       box-shadow: none;
     }
@@ -89,5 +93,5 @@ pre.masked-font {
 }
 
 .masked-input .input:focus + .masked-input-toggle {
-  background: rgba($white, 0.95);
+  background: rgba(color_variables.$white, 0.95);
 }
diff --git a/ui/app/styles/components/namespace-picker.scss b/ui/app/styles/components/namespace-picker.scss
index 7da3e887a4..10f78985b1 100644
--- a/ui/app/styles/components/namespace-picker.scss
+++ b/ui/app/styles/components/namespace-picker.scss
@@ -1,3 +1,8 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -6,7 +11,7 @@
 .namespace-picker {
   position: relative;
   color: var(--token-color-palette-neutral-300);
-  padding: $spacing-4 $spacing-8;
+  padding: size_variables.$spacing-4 size_variables.$spacing-8;
   width: 100%;
 }
 
@@ -21,7 +26,7 @@
   flex: 1 1 auto;
   height: 2rem;
   justify-content: space-between;
-  margin-right: $spacing-4;
+  margin-right: size_variables.$spacing-4;
   width: 100%;
 }
 
@@ -30,11 +35,11 @@
   max-height: 300px;
   overflow: auto;
   color: var(--token-color-foreground-primary);
-  border-radius: $radius;
-  box-shadow: $box-shadow, $box-shadow-high;
+  border-radius: size_variables.$radius;
+  box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-high;
 
   &.ember-basic-dropdown-content {
-    background: $white;
+    background: color_variables.$white;
   }
 }
 
@@ -46,17 +51,17 @@
 }
 
 .namespace-header-bar {
-  padding: $spacing-4 $spacing-10;
-  border-bottom: 1px solid rgba($black, 0.1);
-  font-weight: $font-weight-semibold;
+  padding: size_variables.$spacing-4 size_variables.$spacing-10;
+  border-bottom: 1px solid rgba(color_variables.$black, 0.1);
+  font-weight: font_variables.$font-weight-semibold;
   min-height: 32px;
 }
 
 .namespace-manage-link {
-  border-top: 1px solid rgba($black, 0.1);
+  border-top: 1px solid rgba(color_variables.$black, 0.1);
 
   .level-left {
-    font-weight: $font-weight-bold;
+    font-weight: font_variables.$font-weight-bold;
     font-size: 14px;
   }
   .level-right {
@@ -70,15 +75,15 @@
 }
 
 .namespace-link {
-  color: $black;
+  color: color_variables.$black;
   text-decoration: none;
-  font-weight: $font-weight-semibold;
-  padding: $spacing-8 $spacing-10 $spacing-8 0;
+  font-weight: font_variables.$font-weight-semibold;
+  padding: size_variables.$spacing-8 size_variables.$spacing-10 size_variables.$spacing-8 0;
 }
 
 .namespace-link.is-current {
-  margin-top: $spacing-12;
-  margin-right: -$spacing-8;
+  margin-top: size_variables.$spacing-12;
+  margin-right: -(size_variables.$spacing-8);
 
   svg {
     margin-top: 2px;
@@ -87,11 +92,11 @@
 }
 
 .leaf-panel {
-  padding: $spacing-4 $spacing-10;
+  padding: size_variables.$spacing-4 size_variables.$spacing-10;
   transition: transform ease-in-out 250ms;
   will-change: transform;
   transform: translateX(0);
-  background: $white;
+  background: color_variables.$white;
   position: absolute;
   top: 0;
   left: 0;
@@ -101,7 +106,7 @@
 }
 
 .leaf-panel-left {
-  transform: translateX(-$drawer-width);
+  transform: translateX(-(size_variables.$drawer-width));
 }
 
 .leaf-panel-adding,
@@ -115,7 +120,7 @@
 .animated-list {
   .leaf-panel-exiting,
   .leaf-panel-adding {
-    transform: translateX($drawer-width);
+    transform: translateX(size_variables.$drawer-width);
     z-index: 20;
   }
 }
diff --git a/ui/app/styles/components/namespace-reminder.scss b/ui/app/styles/components/namespace-reminder.scss
index b72824ce84..1b8bfd21b8 100644
--- a/ui/app/styles/components/namespace-reminder.scss
+++ b/ui/app/styles/components/namespace-reminder.scss
@@ -1,18 +1,22 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .namespace-reminder {
-  color: $grey;
-  margin: 0 0 $spacing-14 0;
+  color: color_variables.$grey;
+  margin: 0 0 size_variables.$spacing-14 0;
 }
 
 .console-reminder p.namespace-reminder {
-  color: $grey;
-  font-family: $family-monospace;
-  font-size: $size-8;
-  margin: $spacing-4 0 0;
+  color: color_variables.$grey;
+  font-family: font_variables.$family-monospace;
+  font-size: size_variables.$size-8;
+  margin: size_variables.$spacing-4 0 0;
   opacity: 0.7;
   position: absolute;
 }
diff --git a/ui/app/styles/components/overview-card.scss b/ui/app/styles/components/overview-card.scss
index c989d7b6e2..f58154430b 100644
--- a/ui/app/styles/components/overview-card.scss
+++ b/ui/app/styles/components/overview-card.scss
@@ -1,9 +1,11 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .overview-card {
-  padding: $spacing-24;
+  padding: size_variables.$spacing-24;
   line-height: initial;
 }
diff --git a/ui/app/styles/components/page-header-old.scss b/ui/app/styles/components/page-header-old.scss
index d5a9c37ae9..3f2f059b8c 100644
--- a/ui/app/styles/components/page-header-old.scss
+++ b/ui/app/styles/components/page-header-old.scss
@@ -1,11 +1,14 @@
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .page-header {
-  padding-bottom: $spacing-4;
-  padding-top: $spacing-20;
+  padding-bottom: size_variables.$spacing-4;
+  padding-top: size_variables.$spacing-20;
 
   .level {
     align-items: flex-end;
@@ -15,18 +18,18 @@
     flex-grow: 1;
     flex-shrink: 1;
 
-    @include until($mobile) {
+    @include mixins.until(size_variables.$mobile) {
       margin-top: 0.5rem;
     }
   }
   .level-right {
-    @include from($mobile) {
+    @include mixins.from(size_variables.$mobile) {
       justify-content: flex-end;
     }
   }
 
   .title {
-    margin-top: $spacing-16;
+    margin-top: size_variables.$spacing-16;
   }
 
   .title-with-icon {
@@ -34,7 +37,7 @@
   }
 
   .breadcrumb + .level .title {
-    margin-top: $spacing-20;
+    margin-top: size_variables.$spacing-20;
   }
   .title .icon {
     height: auto;
diff --git a/ui/app/styles/components/popup-menu.scss b/ui/app/styles/components/popup-menu.scss
index 62744ee4ea..4774db8bec 100644
--- a/ui/app/styles/components/popup-menu.scss
+++ b/ui/app/styles/components/popup-menu.scss
@@ -1,3 +1,8 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -6,19 +11,19 @@
 // Popup menu no longer exists, but these styles are still used in some places
 .popup-menu-content,
 .ember-power-select-options {
-  border-radius: $radius;
+  border-radius: size_variables.$radius;
   margin: -2px 0 0 0;
 
   & > .box {
-    border-radius: $radius;
-    box-shadow: $box-shadow, $box-shadow-middle;
+    border-radius: size_variables.$radius;
+    box-shadow: box-shadow_variables.$box-shadow, box-shadow_variables.$box-shadow-middle;
     padding: 0;
     position: relative;
     width: 210px;
   }
 
   &.is-wide > .box {
-    width: $drawer-width;
+    width: size_variables.$drawer-width;
   }
 
   .confirm-action span .button {
@@ -28,7 +33,7 @@
   }
 
   .menu {
-    padding: $spacing-4 0;
+    padding: size_variables.$spacing-4 0;
   }
 
   button.link,
@@ -41,9 +46,9 @@
     border: none;
     display: block;
     height: auto;
-    font-size: $size-7;
-    font-weight: $font-weight-semibold;
-    padding: $spacing-10 $spacing-12;
+    font-size: size_variables.$size-7;
+    font-weight: font_variables.$font-weight-semibold;
+    padding: size_variables.$spacing-10 size_variables.$spacing-12;
     text-align: left;
     text-decoration: none;
     width: 100%;
@@ -53,13 +58,13 @@
   // so they match other dropdown elements until we replace popup-menu with Hds::Dropdown
   .hds-confirm-action-critical {
     &:hover {
-      background-color: $ui-gray-050;
+      background-color: color_variables.$ui-gray-050;
     }
     div,
     span {
-      margin-left: -$spacing-4;
-      font-size: $size-7;
-      font-weight: $font-weight-semibold;
+      margin-left: -(size_variables.$spacing-4);
+      font-size: size_variables.$size-7;
+      font-weight: font_variables.$font-weight-semibold;
     }
   }
 
@@ -67,26 +72,26 @@
   .ember-power-select-option,
   .ember-power-select-option[aria-current='true'],
   a {
-    background-color: $white;
-    color: $grey-darkest;
+    background-color: color_variables.$white;
+    color: color_variables.$grey-darkest;
 
     &:hover {
-      background-color: $ui-gray-050;
-      color: $ui-gray-900;
+      background-color: color_variables.$ui-gray-050;
+      color: color_variables.$ui-gray-900;
     }
 
     &.active,
     &.is-active {
       background-color: transparent;
-      color: $blue;
+      color: color_variables.$blue;
     }
 
     &.is-destroy {
-      color: $red;
+      color: color_variables.$red;
 
       &:hover {
-        background-color: $red;
-        color: $white;
+        background-color: color_variables.$red;
+        color: color_variables.$white;
       }
     }
 
@@ -105,29 +110,29 @@
   }
 
   .menu-label {
-    color: $grey-dark;
-    font-size: $size-9;
-    font-weight: $font-weight-normal;
+    color: color_variables.$grey-dark;
+    font-size: size_variables.$size-9;
+    font-weight: font_variables.$font-weight-normal;
     letter-spacing: 0;
     margin: 0;
-    padding: $spacing-8 $spacing-12 0;
+    padding: size_variables.$spacing-8 size_variables.$spacing-12 0;
     text-transform: uppercase;
   }
 
   .menu-content {
-    padding: $spacing-8 $spacing-12;
+    padding: size_variables.$spacing-8 size_variables.$spacing-12;
   }
 
   hr {
-    background-color: $ui-gray-200;
+    background-color: color_variables.$ui-gray-200;
     margin: 0;
   }
 }
 
 .popup-menu-content p {
   box-shadow: none;
-  padding-top: $spacing-8;
-  font-weight: $font-weight-semibold;
+  padding-top: size_variables.$spacing-8;
+  font-weight: font_variables.$font-weight-semibold;
 }
 
 .popup-menu-content .level-left {
diff --git a/ui/app/styles/components/radial-progress.scss b/ui/app/styles/components/radial-progress.scss
index fac6bb7f2c..dbf92fad9e 100644
--- a/ui/app/styles/components/radial-progress.scss
+++ b/ui/app/styles/components/radial-progress.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -7,11 +10,11 @@
   transform: rotate(-90deg) translateX(-20%);
 }
 .radial-progress circle {
-  stroke: rgba($grey-light, 0.5);
-  transition: stroke-dashoffset $speed ease-in;
+  stroke: rgba(color_variables.$grey-light, 0.5);
+  transition: stroke-dashoffset size_variables.$speed ease-in;
   will-change: stroke-dashoffset;
   stroke-linecap: round;
 }
 .radial-progress circle.progress-fill {
-  stroke: $green;
+  stroke: color_variables.$green;
 }
diff --git a/ui/app/styles/components/radio-card.scss b/ui/app/styles/components/radio-card.scss
index b335ebb6ef..8d779ffea0 100644
--- a/ui/app/styles/components/radio-card.scss
+++ b/ui/app/styles/components/radio-card.scss
@@ -1,3 +1,8 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -5,17 +10,17 @@
 
 .radio-card-selector {
   display: flex;
-  margin-bottom: $spacing-8;
+  margin-bottom: size_variables.$spacing-8;
 }
 .radio-card {
-  box-shadow: $box-shadow-low;
+  box-shadow: box-shadow_variables.$box-shadow-low;
   flex: 1 1 25%;
   flex-direction: column;
   justify-content: space-between;
-  margin: $spacing-8 $spacing-16;
-  border: $base-border;
-  border-radius: $radius;
-  transition: all ease-in-out $speed;
+  margin: size_variables.$spacing-8 size_variables.$spacing-16;
+  border: box-shadow_variables.$base-border;
+  border-radius: size_variables.$radius;
+  transition: all ease-in-out size_variables.$speed;
   max-width: 60%;
   input[type='radio'] {
     position: absolute;
@@ -24,7 +29,7 @@
   }
 
   input[type='radio'] + span.dot {
-    border: 1px solid $grey-light;
+    border: 1px solid color_variables.$grey-light;
     border-radius: 50%;
     cursor: pointer;
     display: block;
@@ -35,12 +40,14 @@
   }
 
   input[type='radio']:checked + span.dot {
-    background: $blue;
-    border: 1px solid $blue;
-    box-shadow: inset 0 0 0 0.15rem $white;
+    background: color_variables.$blue;
+    border: 1px solid color_variables.$blue;
+    box-shadow: inset 0 0 0 0.15rem color_variables.$white;
   }
   input[type='radio']:focus + span.dot {
-    box-shadow: 0 0 10px 1px rgba($blue, 0.4), inset 0 0 0 0.15rem $white;
+    box-shadow:
+      0 0 10px 1px rgba(color_variables.$blue, 0.4),
+      inset 0 0 0 0.15rem color_variables.$white;
   }
 
   &.is-disabled {
@@ -67,43 +74,43 @@
 .radio-card-row {
   display: flex;
   flex: 1;
-  padding: $spacing-16;
+  padding: size_variables.$spacing-16;
 }
 .radio-card-icon {
-  color: $ui-gray-300;
+  color: color_variables.$ui-gray-300;
 }
 .radio-card-message {
-  margin: $spacing-4;
+  margin: size_variables.$spacing-4;
 }
 
 .radio-card-message-title {
-  font-weight: $font-weight-semibold;
-  font-size: $size-7;
-  margin-bottom: $spacing-4;
+  font-weight: font_variables.$font-weight-semibold;
+  font-size: size_variables.$size-7;
+  margin-bottom: size_variables.$spacing-4;
 }
 .radio-card-message-body {
   line-height: 1.2;
   color: var(--token-color-foreground-faint);
-  font-size: $size-8;
+  font-size: size_variables.$size-8;
 }
 
 .radio-card-radio-row {
   display: flex;
   justify-content: center;
-  background: $ui-gray-050;
-  padding: $spacing-8;
+  background: color_variables.$ui-gray-050;
+  padding: size_variables.$spacing-8;
 }
 
 .is-selected {
   &.radio-card {
-    border-color: $blue-500;
-    background: $ui-gray-010;
-    box-shadow: $box-shadow-middle;
+    border-color: color_variables.$blue-500;
+    background: color_variables.$ui-gray-010;
+    box-shadow: box-shadow_variables.$box-shadow-middle;
   }
   .radio-card-icon {
-    color: $black;
+    color: color_variables.$black;
   }
   .radio-card-radio-row {
-    background: $blue-050;
+    background: color_variables.$blue-050;
   }
 }
diff --git a/ui/app/styles/components/raft-join.scss b/ui/app/styles/components/raft-join.scss
index 08b362360b..276ad87547 100644
--- a/ui/app/styles/components/raft-join.scss
+++ b/ui/app/styles/components/raft-join.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -7,11 +10,11 @@
   margin-bottom: 0;
 }
 .raft-join .box.is-fullwidth {
-  padding-top: $spacing-12;
-  padding-bottom: $spacing-12;
+  padding-top: size_variables.$spacing-12;
+  padding-bottom: size_variables.$spacing-12;
 }
 .raft-join-unseal {
-  color: $orange;
-  font-size: $size-6;
+  color: color_variables.$orange;
+  font-size: size_variables.$size-6;
   display: inline-block;
 }
diff --git a/ui/app/styles/components/regex-validator.scss b/ui/app/styles/components/regex-validator.scss
index 524c6ed1a0..cc672ec075 100644
--- a/ui/app/styles/components/regex-validator.scss
+++ b/ui/app/styles/components/regex-validator.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -14,12 +18,12 @@
   flex: 0 1 auto;
 }
 .regex-group {
-  font-family: $family-monospace;
-  font-size: $size-8;
-  color: $ui-gray-600;
+  font-family: font_variables.$family-monospace;
+  font-size: size_variables.$size-8;
+  color: color_variables.$ui-gray-600;
 }
 .regex-group-position {
-  background-color: $ui-gray-200;
+  background-color: color_variables.$ui-gray-200;
   border-radius: 3px;
   padding-top: 5px;
   padding-bottom: 4px;
@@ -29,5 +33,5 @@
   }
 }
 .regex-group-value {
-  margin-right: $spacing-16;
+  margin-right: size_variables.$spacing-16;
 }
diff --git a/ui/app/styles/components/replication-dashboard.scss b/ui/app/styles/components/replication-dashboard.scss
index 6f9a5e460a..a3ac3ddab6 100644
--- a/ui/app/styles/components/replication-dashboard.scss
+++ b/ui/app/styles/components/replication-dashboard.scss
@@ -1,3 +1,8 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -10,29 +15,29 @@
     line-height: normal;
 
     &:hover {
-      box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
+      box-shadow: 0 0 0 1px rgba(color_variables.$grey-dark, 0.3);
     }
 
     .toolbar-link {
-      color: $blue-500;
+      color: color_variables.$blue-500;
     }
   }
 
   .helper-text {
-    font-weight: $font-weight-normal;
+    font-weight: font_variables.$font-weight-normal;
   }
 
   .title.is-6 {
-    margin-bottom: $spacing-8;
+    margin-bottom: size_variables.$spacing-8;
   }
 
   .reindexing-alert,
   .syncing-alert {
-    margin-top: $spacing-36;
+    margin-top: size_variables.$spacing-36;
   }
 
   .selectable-card-container {
-    margin-top: $spacing-36;
+    margin-top: size_variables.$spacing-36;
     display: grid;
 
     &.primary,
@@ -40,22 +45,22 @@
       margin: 2rem 0 2rem 0;
       grid-template-columns: 1fr 2fr;
 
-      @include until($mobile) {
+      @include mixins.until(size_variables.$mobile) {
         grid-template-columns: 1fr;
       }
     }
 
     &.secondary {
       grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-      grid-gap: $spacing-36;
+      grid-gap: size_variables.$spacing-36;
     }
 
     .card-container {
       display: grid;
-      grid-gap: $spacing-12;
+      grid-gap: size_variables.$spacing-12;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 0.2fr 0.2fr 0.2fr;
-      padding: $spacing-24;
+      padding: size_variables.$spacing-24;
       line-height: 1.5;
 
       &.summary {
@@ -66,7 +71,7 @@
         box-shadow: none;
       }
 
-      @include until(1320px) {
+      @include mixins.until(1320px) {
         // prevent an issue with the card descriptions wrapping and expanding height
         min-height: 250px;
       }
@@ -120,12 +125,12 @@
     }
 
     &.summary {
-      margin-bottom: $spacing-36;
+      margin-bottom: size_variables.$spacing-36;
     }
   }
   .summary-state {
-    padding-bottom: $spacing-36;
-    border-bottom: 1px solid rgba($grey-dark, 0.3);
+    padding-bottom: size_variables.$spacing-36;
+    border-bottom: 1px solid rgba(color_variables.$grey-dark, 0.3);
   }
 
   // prevent double lines at the bottom of the dashboard
diff --git a/ui/app/styles/components/replication-summary.scss b/ui/app/styles/components/replication-summary.scss
index c053cbc75a..137e00702d 100644
--- a/ui/app/styles/components/replication-summary.scss
+++ b/ui/app/styles/components/replication-summary.scss
@@ -1,3 +1,5 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -13,7 +15,7 @@
   }
 
   .float-right {
-    margin: $spacing-12 0 $spacing-24 0;
+    margin: size_variables.$spacing-12 0 size_variables.$spacing-24 0;
     float: right;
   }
 }
diff --git a/ui/app/styles/components/search-select.scss b/ui/app/styles/components/search-select.scss
index d1b45f5a2d..aea51b68af 100644
--- a/ui/app/styles/components/search-select.scss
+++ b/ui/app/styles/components/search-select.scss
@@ -1,3 +1,8 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -15,7 +20,7 @@
 
 .ember-power-select-trigger {
   border: 0;
-  border-radius: $radius;
+  border-radius: size_variables.$radius;
   padding-right: 0;
 
   &--active {
@@ -43,13 +48,13 @@
   z-index: -1;
 
   &::after {
-    background: $white;
-    bottom: $spacing-4;
+    background: color_variables.$white;
+    bottom: size_variables.$spacing-4;
     content: '';
-    left: $spacing-4 + $spacing-24;
+    left: size_variables.$spacing-4 + size_variables.$spacing-24;
     position: absolute;
-    right: $spacing-4;
-    top: $spacing-4;
+    right: size_variables.$spacing-4;
+    top: size_variables.$spacing-4;
     z-index: -1;
   }
 }
@@ -57,16 +62,16 @@
 .ember-power-select-search-input {
   background: transparent;
   border: 0;
-  padding: $spacing-4 $spacing-12;
-  padding-left: $spacing-4 + $spacing-24;
+  padding: size_variables.$spacing-4 size_variables.$spacing-12;
+  padding-left: size_variables.$spacing-4 + size_variables.$spacing-24;
 }
 
 div > .ember-power-select-options {
-  background: $white;
-  border: $base-border;
-  box-shadow: $box-shadow-middle;
-  margin: -4px $spacing-8 0;
-  padding: $spacing-4 0;
+  background: color_variables.$white;
+  border: box-shadow_variables.$base-border;
+  box-shadow: box-shadow_variables.$box-shadow-middle;
+  margin: -4px size_variables.$spacing-8 0;
+  padding: size_variables.$spacing-4 0;
 
   .ember-power-select-option,
   .ember-power-select-option[aria-current='true'] {
@@ -76,20 +81,20 @@ div > .ember-power-select-options {
   }
 
   .ember-power-select-option[aria-current='true'] {
-    background-color: $ui-gray-050;
-    color: $ui-gray-900;
+    background-color: color_variables.$ui-gray-050;
+    color: color_variables.$ui-gray-900;
   }
 
   .ember-power-select-option--no-matches-message {
-    color: $grey;
-    font-size: $size-8;
-    font-weight: $font-weight-semibold;
+    color: color_variables.$grey;
+    font-size: size_variables.$size-8;
+    font-weight: font_variables.$font-weight-semibold;
     text-transform: uppercase;
 
     &:hover,
     &:focus {
       background: transparent;
-      color: $grey;
+      color: color_variables.$grey;
     }
   }
 }
@@ -97,28 +102,28 @@ div > .ember-power-select-options {
 .search-select-list-item {
   align-items: center;
   display: flex;
-  padding: $spacing-4;
+  padding: size_variables.$spacing-4;
   justify-content: space-between;
-  border-bottom: $light-border;
+  border-bottom: box-shadow_variables.$light-border;
 
   .list-item-text {
     max-width: 200px;
   }
 
   .control .button {
-    color: $grey-light;
+    color: color_variables.$grey-light;
     min-width: auto;
 
     &:hover,
     &:focus {
-      color: $blue;
+      color: color_variables.$blue;
     }
   }
 }
 
 .search-select-list-key {
   color: var(--token-color-foreground-faint);
-  font-size: $size-8;
+  font-size: size_variables.$size-8;
 }
 
 .ember-power-select-dropdown.ember-basic-dropdown-content {
diff --git a/ui/app/styles/components/selectable-card-container.scss b/ui/app/styles/components/selectable-card-container.scss
index 3156eac48d..0bf4fb6acb 100644
--- a/ui/app/styles/components/selectable-card-container.scss
+++ b/ui/app/styles/components/selectable-card-container.scss
@@ -1,3 +1,6 @@
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -23,7 +26,7 @@
   grid-template-rows: repeat(2, 1fr);
   grid-gap: 2rem;
 
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     grid-template-columns: 2fr;
   }
 }
diff --git a/ui/app/styles/components/shamir-progress.scss b/ui/app/styles/components/shamir-progress.scss
index dfa02f38c1..7d74b03baa 100644
--- a/ui/app/styles/components/shamir-progress.scss
+++ b/ui/app/styles/components/shamir-progress.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -6,12 +9,12 @@
 .shamir-progress {
   .shamir-progress-progress {
     display: inline-block;
-    margin-top: $spacing-8;
-    margin-right: $spacing-12;
+    margin-top: size_variables.$spacing-8;
+    margin-right: size_variables.$spacing-12;
   }
   .progress {
-    box-shadow: 0 0 0 4px $ui-gray-050;
-    margin-top: $spacing-8;
+    box-shadow: 0 0 0 4px color_variables.$ui-gray-050;
+    margin-top: size_variables.$spacing-8;
     min-width: 90px;
   }
 }
diff --git a/ui/app/styles/components/sidebar.scss b/ui/app/styles/components/sidebar.scss
index 57748468f1..fedb1dca4a 100644
--- a/ui/app/styles/components/sidebar.scss
+++ b/ui/app/styles/components/sidebar.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,19 +12,19 @@
 
   .popup-menu-content {
     .menu-label {
-      color: $black;
+      color: color_variables.$black;
       font-size: 14px;
-      font-weight: $font-weight-bold;
+      font-weight: font_variables.$font-weight-bold;
       text-transform: unset;
     }
     .token-alert {
-      padding: $spacing-8;
+      padding: size_variables.$spacing-8;
     }
   }
 
   .confirm-action-message p {
-    padding-top: $spacing-4;
-    font-weight: $font-weight-semibold;
-    color: $black;
+    padding-top: size_variables.$spacing-4;
+    font-weight: font_variables.$font-weight-semibold;
+    color: color_variables.$black;
   }
 }
diff --git a/ui/app/styles/components/splash-page.scss b/ui/app/styles/components/splash-page.scss
index ff9384b9db..d429a2d027 100644
--- a/ui/app/styles/components/splash-page.scss
+++ b/ui/app/styles/components/splash-page.scss
@@ -1,30 +1,35 @@
+@use '../utils/color_variables';
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .splash-page-logo {
-  padding: $spacing-8 $spacing-12 $spacing-8 $spacing-24;
+  padding: size_variables.$spacing-8 size_variables.$spacing-12 size_variables.$spacing-8
+    size_variables.$spacing-24;
 
-  @include from($mobile) {
-    padding-left: $spacing-8;
+  @include mixins.from(size_variables.$mobile) {
+    padding-left: size_variables.$spacing-8;
   }
 
   svg {
-    fill: $white;
+    fill: color_variables.$white;
     height: 24px;
     width: 72px;
 
-    @include from($mobile) {
-      margin-left: $spacing-8;
+    @include mixins.from(size_variables.$mobile) {
+      margin-left: size_variables.$spacing-8;
     }
   }
 }
 
 .splash-page-container {
-  margin: $spacing-36 0;
+  margin: size_variables.$spacing-36 0;
 }
 
 .splash-page-header {
-  padding: $spacing-14 0;
+  padding: size_variables.$spacing-14 0;
 }
diff --git a/ui/app/styles/components/stat-text.scss b/ui/app/styles/components/stat-text.scss
index b160c64523..3de5778cb3 100644
--- a/ui/app/styles/components/stat-text.scss
+++ b/ui/app/styles/components/stat-text.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -12,98 +16,98 @@
   &.l,
   &.m {
     .stat-label {
-      font-size: $size-5;
-      font-weight: $font-weight-semibold;
-      margin-bottom: $spacing-4;
+      font-size: size_variables.$size-5;
+      font-weight: font_variables.$font-weight-semibold;
+      margin-bottom: size_variables.$spacing-4;
       line-height: inherit;
     }
     .stat-text {
-      font-size: $size-8;
-      font-weight: $font-weight-normal;
-      color: $ui-gray-700;
+      font-size: size_variables.$size-8;
+      font-weight: font_variables.$font-weight-normal;
+      color: color_variables.$ui-gray-700;
       line-height: inherit;
     }
     .stat-value {
-      font-size: $size-3;
-      font-weight: $font-weight-normal;
-      margin-top: $spacing-12;
+      font-size: size_variables.$size-3;
+      font-weight: font_variables.$font-weight-normal;
+      margin-top: size_variables.$spacing-12;
     }
   }
 
   &.s {
     .stat-label {
-      font-size: $size-5;
-      font-weight: $font-weight-semibold;
+      font-size: size_variables.$size-5;
+      font-weight: font_variables.$font-weight-semibold;
       line-height: inherit;
     }
     .stat-text {
-      font-size: $size-8;
-      font-weight: $font-weight-normal;
-      color: $ui-gray-700;
+      font-size: size_variables.$size-8;
+      font-weight: font_variables.$font-weight-normal;
+      color: color_variables.$ui-gray-700;
       line-height: inherit;
     }
     .stat-value {
-      font-size: $size-5;
-      font-weight: $font-weight-normal;
-      margin-top: $spacing-12;
+      font-size: size_variables.$size-5;
+      font-weight: font_variables.$font-weight-normal;
+      margin-top: size_variables.$spacing-12;
     }
   }
 
   &.l-no-subText {
     .stat-label {
-      font-size: $size-5;
-      font-weight: $font-weight-semibold;
+      font-size: size_variables.$size-5;
+      font-weight: font_variables.$font-weight-semibold;
       line-height: inherit;
     }
     .stat-text {
-      font-size: $size-8;
-      font-weight: $font-weight-normal;
-      color: $ui-gray-700;
+      font-size: size_variables.$size-8;
+      font-weight: font_variables.$font-weight-normal;
+      color: color_variables.$ui-gray-700;
       line-height: inherit;
     }
     .stat-value {
-      font-size: $size-3;
-      font-weight: $font-weight-normal;
-      margin-top: $spacing-4;
+      font-size: size_variables.$size-3;
+      font-weight: font_variables.$font-weight-normal;
+      margin-top: size_variables.$spacing-4;
     }
   }
 
   &.m-no-subText {
     .stat-label {
-      font-size: $size-8;
-      font-weight: $font-weight-bold;
+      font-size: size_variables.$size-8;
+      font-weight: font_variables.$font-weight-bold;
       line-height: inherit;
     }
     .stat-text {
-      font-size: $size-8;
-      font-weight: $font-weight-normal;
-      color: $ui-gray-700;
+      font-size: size_variables.$size-8;
+      font-weight: font_variables.$font-weight-normal;
+      color: color_variables.$ui-gray-700;
       line-height: inherit;
     }
     .stat-value {
-      font-size: $size-5;
-      font-weight: $font-weight-normal;
-      margin-top: $spacing-4;
+      font-size: size_variables.$size-5;
+      font-weight: font_variables.$font-weight-normal;
+      margin-top: size_variables.$spacing-4;
     }
   }
 
   &.s-no-subText {
     .stat-label {
-      font-size: $size-8;
-      font-weight: $font-weight-normal;
-      color: $ui-gray-500;
+      font-size: size_variables.$size-8;
+      font-weight: font_variables.$font-weight-normal;
+      color: color_variables.$ui-gray-500;
       line-height: inherit;
     }
     .stat-text {
-      font-size: $size-8;
-      font-weight: $font-weight-normal;
-      color: $ui-gray-700;
+      font-size: size_variables.$size-8;
+      font-weight: font_variables.$font-weight-normal;
+      color: color_variables.$ui-gray-700;
       line-height: inherit;
     }
     .stat-value {
-      font-size: $size-8;
-      font-weight: $font-weight-normal;
-      color: $ui-gray-800;
+      font-size: size_variables.$size-8;
+      font-weight: font_variables.$font-weight-normal;
+      color: color_variables.$ui-gray-800;
       line-height: inherit;
     }
   }
diff --git a/ui/app/styles/components/tabs-component.scss b/ui/app/styles/components/tabs-component.scss
index ff241da49f..65a2e66bea 100644
--- a/ui/app/styles/components/tabs-component.scss
+++ b/ui/app/styles/components/tabs-component.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -11,7 +15,7 @@
 
 .tabs {
   align-items: stretch;
-  box-shadow: inset 0 -1px 0 $grey-light;
+  box-shadow: inset 0 -1px 0 color_variables.$grey-light;
   display: flex;
   justify-content: space-between;
   overflow: hidden;
@@ -30,22 +34,22 @@
         box-shadow: none;
       }
       &.active {
-        border-color: $blue;
-        color: $blue;
+        border-color: color_variables.$blue;
+        color: color_variables.$blue;
       }
     }
     li {
       // solves for tools -> sub-tabs like "Unwrap data" -> "Data"
       &.is-active {
-        border-bottom: 2px solid $blue;
-        color: $blue;
+        border-bottom: 2px solid color_variables.$blue;
+        color: color_variables.$blue;
       }
       // solves for tabs on auth mounts & secrets engines
       > a {
         &.active {
-          color: $blue;
+          color: color_variables.$blue;
           background-color: transparent;
-          border-bottom: 2px solid $blue;
+          border-bottom: 2px solid color_variables.$blue;
         }
       }
     }
@@ -57,8 +61,8 @@
     }
     &.active a,
     &.is-active a {
-      border-color: $blue;
-      color: $blue;
+      border-color: color_variables.$blue;
+      color: color_variables.$blue;
     }
   }
   // important for auth tabs in active state, otherwise the border-bottom will not show.
@@ -68,20 +72,22 @@
     justify-content: center;
     vertical-align: top;
     border-bottom: 2px solid transparent;
-    color: $grey;
-    font-weight: $font-weight-semibold;
-    padding: $spacing-14 $spacing-12 $spacing-12;
+    color: color_variables.$grey;
+    font-weight: font_variables.$font-weight-semibold;
+    padding: size_variables.$spacing-14 size_variables.$spacing-12 size_variables.$spacing-12;
     text-decoration: none;
-    transition: background-color $speed, border-color $speed;
+    transition:
+      background-color size_variables.$speed,
+      border-color size_variables.$speed;
 
     &:hover,
     &:active {
-      border-color: $grey-light;
+      border-color: color_variables.$grey-light;
     }
 
     &:hover {
-      background-color: $ui-gray-050;
-      color: $grey-darkest;
+      background-color: color_variables.$ui-gray-050;
+      color: color_variables.$grey-darkest;
     }
   }
 
diff --git a/ui/app/styles/components/tool-tip.scss b/ui/app/styles/components/tool-tip.scss
index 4f4851d4cf..ea832f7c91 100644
--- a/ui/app/styles/components/tool-tip.scss
+++ b/ui/app/styles/components/tool-tip.scss
@@ -1,30 +1,34 @@
+@use '../utils/color_variables';
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .tool-tip {
-  font-size: $size-7;
+  font-size: size_variables.$size-7;
   text-transform: none;
   margin: 8px 0px 0 -4px;
   border: none;
-  border-radius: $radius-large;
+  border-radius: size_variables.$radius-large;
 
   .box {
     position: relative;
-    color: $white;
+    color: color_variables.$white;
     max-width: 200px;
-    background: $black;
+    background: color_variables.$black;
     padding: 0.5rem;
     line-height: 1.4;
-    border-radius: $radius-large;
+    border-radius: size_variables.$radius-large;
   }
 
   .fit-content {
     max-width: fit-content;
   }
 
-  @include css-top-arrow(8px, $black, 1px, $black, 20px);
+  @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, 20px);
   &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
     animation: drop-fade-above 0.15s;
   }
@@ -38,7 +42,7 @@
     animation: drop-fade-below 0.15s reverse;
   }
   &.smaller-font {
-    font-size: $size-8;
+    font-size: size_variables.$size-8;
   }
 }
 
@@ -48,7 +52,7 @@
   &::before,
   &::after {
     right: auto;
-    left: $spacing-12;
+    left: size_variables.$spacing-12;
   }
 }
 .ember-basic-dropdown-content--right.tool-tip {
@@ -56,19 +60,25 @@
 }
 
 .ember-basic-dropdown-content--below.ember-basic-dropdown-content--left.tool-tip {
-  @include css-top-arrow(8px, $black, 1px, $black, calc(100% - 20px));
+  @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, calc(100% - 20px));
 }
 .ember-basic-dropdown-content--below.ember-basic-dropdown-content--right.tool-tip {
-  @include css-top-arrow(8px, $black, 1px, $black, calc(100% - 20px));
+  @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, calc(100% - 20px));
 }
 .ember-basic-dropdown-content--above.tool-tip {
-  @include css-bottom-arrow(8px, $black, 1px, $black);
+  @include mixins.css-bottom-arrow(8px, color_variables.$black, 1px, color_variables.$black);
   & {
     margin-top: -8px;
   }
 }
 .ember-basic-dropdown-content--above.ember-basic-dropdown-content--right.tool-tip {
-  @include css-bottom-arrow(8px, $black, 1px, $black, calc(100% - 20px));
+  @include mixins.css-bottom-arrow(
+    8px,
+    color_variables.$black,
+    1px,
+    color_variables.$black,
+    calc(100% - 20px)
+  );
 }
 
 .b-checkbox .tool-tip-trigger {
diff --git a/ui/app/styles/components/toolbar.scss b/ui/app/styles/components/toolbar.scss
index 7a5a5a7f41..eb4f73eba0 100644
--- a/ui/app/styles/components/toolbar.scss
+++ b/ui/app/styles/components/toolbar.scss
@@ -1,3 +1,9 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/mixins';
+@use '../utils/size_variables';
+@use '../core/buttons.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,20 +14,24 @@
 }
 
 .toolbar {
-  background-color: $ui-gray-010;
-  border: 1px solid $ui-gray-100;
-  border-bottom-color: $ui-gray-300;
-  border-top-color: $ui-gray-300;
+  background-color: color_variables.$ui-gray-010;
+  border: 1px solid color_variables.$ui-gray-100;
+  border-bottom-color: color_variables.$ui-gray-300;
+  border-top-color: color_variables.$ui-gray-300;
   position: relative;
 
   &::after {
-    background: linear-gradient(to right, $ui-gray-010, rgba($ui-gray-010, 0));
+    background: linear-gradient(
+      to right,
+      color_variables.$ui-gray-010,
+      rgba(color_variables.$ui-gray-010, 0)
+    );
     bottom: 0;
     content: '';
     position: absolute;
     right: 0;
     top: 0;
-    width: $spacing-4;
+    width: size_variables.$spacing-4;
     z-index: 2;
   }
 
@@ -32,8 +42,8 @@
 }
 
 .toolbar-label {
-  padding: $spacing-8;
-  color: $grey;
+  padding: size_variables.$spacing-8;
+  color: color_variables.$grey;
 }
 
 .toolbar-scroller {
@@ -43,18 +53,18 @@
   justify-content: space-between;
   width: 100%;
 
-  @include from($mobile) {
-    padding: 0 $spacing-4;
+  @include mixins.from(size_variables.$mobile) {
+    padding: 0 size_variables.$spacing-4;
   }
 
   &::-webkit-scrollbar {
-    border-bottom: $base-border;
-    height: $spacing-4;
+    border-bottom: box-shadow_variables.$base-border;
+    height: size_variables.$spacing-4;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: $ui-gray-300;
-    border-radius: $spacing-4;
+    background: color_variables.$ui-gray-300;
+    border-radius: size_variables.$spacing-4;
   }
 }
 
@@ -71,15 +81,15 @@
 }
 
 .toolbar-filters + .toolbar-actions {
-  @include until($mobile) {
-    border-left: $base-border;
-    margin-left: $spacing-8;
-    padding-left: $spacing-8;
+  @include mixins.until(size_variables.$mobile) {
+    border-left: box-shadow_variables.$base-border;
+    margin-left: size_variables.$spacing-8;
+    padding-left: size_variables.$spacing-8;
   }
 }
 
 .toolbar-actions {
-  @include from($mobile) {
+  @include mixins.from(size_variables.$mobile) {
     justify-content: flex-end;
   }
 }
@@ -89,13 +99,13 @@
   @extend .is-ghost;
   @extend .has-icon-right;
   border: 0;
-  color: $black;
-  transition: background-color $speed;
+  color: color_variables.$black;
+  transition: background-color size_variables.$speed;
 
   &:hover:not(.disabled) {
-    background-color: $ui-gray-100;
+    background-color: color_variables.$ui-gray-100;
     border: 0;
-    color: $blue;
+    color: color_variables.$blue;
   }
 
   &:active {
@@ -104,7 +114,7 @@
 
   &.popup-menu-trigger {
     height: 2.5rem;
-    padding: $spacing-8 $spacing-12;
+    padding: size_variables.$spacing-8 size_variables.$spacing-12;
   }
 
   &.disabled {
@@ -120,19 +130,19 @@
   }
 }
 a.disabled.toolbar-link {
-  color: $black;
-  background-color: $white;
+  color: color_variables.$black;
+  background-color: color_variables.$white;
   cursor: not-allowed;
   &:hover {
-    background-color: $ui-gray-100;
-    color: $blue;
+    background-color: color_variables.$ui-gray-100;
+    color: color_variables.$blue;
   }
 }
 
 .toolbar-separator {
-  border-right: $light-border;
+  border-right: box-shadow_variables.$light-border;
   height: 32px;
-  margin: 0 $spacing-8;
+  margin: 0 size_variables.$spacing-8;
   width: 0;
 }
 
diff --git a/ui/app/styles/components/transform-edit.scss b/ui/app/styles/components/transform-edit.scss
index af47f8a37c..77e08bbf37 100644
--- a/ui/app/styles/components/transform-edit.scss
+++ b/ui/app/styles/components/transform-edit.scss
@@ -1,19 +1,23 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .copy-text {
-  background: $ui-gray-010;
+  background: color_variables.$ui-gray-010;
 
   & > code {
-    color: $ui-gray-800;
+    color: color_variables.$ui-gray-800;
     padding: 14px;
   }
 }
 .transform-pattern-text div:not(:first-child) {
-  font-family: $family-monospace;
+  font-family: font_variables.$family-monospace;
 }
 .transform-decode-formats:not(:last-child) {
-  margin-bottom: $spacing-12;
+  margin-bottom: size_variables.$spacing-12;
 }
diff --git a/ui/app/styles/components/transit-card.scss b/ui/app/styles/components/transit-card.scss
index 28d5cc1c29..7222109d47 100644
--- a/ui/app/styles/components/transit-card.scss
+++ b/ui/app/styles/components/transit-card.scss
@@ -1,3 +1,8 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -9,15 +14,15 @@
   grid-template-rows: 1fr;
   align-content: start;
   grid-gap: 2rem;
-  margin-top: $spacing-24;
+  margin-top: size_variables.$spacing-24;
 }
 
 .transit-card {
-  border-radius: $radius;
-  box-shadow: 0 0 0 1px rgba($grey-light, 0.4);
+  border-radius: size_variables.$radius;
+  box-shadow: 0 0 0 1px rgba(color_variables.$grey-light, 0.4);
   display: grid;
   grid-template-columns: 0.45fr 2fr;
-  padding: $spacing-16;
+  padding: size_variables.$spacing-16;
   border: none;
 
   .transit-icon {
@@ -25,20 +30,22 @@
   }
 
   .transit-action-description {
-    font-family: $family-sans;
-    font-size: $size-8;
-    color: $grey;
+    font-family: font_variables.$family-sans;
+    font-size: size_variables.$size-8;
+    color: color_variables.$grey;
   }
 
   .title {
-    color: $grey;
-    font-size: $size-7;
-    margin-bottom: $spacing-4;
+    color: color_variables.$grey;
+    font-size: size_variables.$size-7;
+    margin-bottom: size_variables.$spacing-4;
   }
 
   &:hover {
-    box-shadow: 0 0 0 1px $blue-500, $box-shadow-middle;
-    background: $blue-010;
+    box-shadow:
+      0 0 0 1px color_variables.$blue-500,
+      box-shadow_variables.$box-shadow-middle;
+    background: color_variables.$blue-010;
 
     .title {
       color: initial;
diff --git a/ui/app/styles/components/ttl-picker.scss b/ui/app/styles/components/ttl-picker.scss
index 4d445a839c..6f331afd21 100644
--- a/ui/app/styles/components/ttl-picker.scss
+++ b/ui/app/styles/components/ttl-picker.scss
@@ -1,3 +1,5 @@
+@use '../utils/color_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -14,7 +16,7 @@
 input.has-error,
 input.has-error:focus,
 input.has-error:hover {
-  border-color: $red-dark;
+  border-color: color_variables.$red-dark;
 }
 
 .ttl-value-error {
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 0bae051f29..665a64913b 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -4,110 +4,110 @@
  */
 
 // Variables
-@import './utils/color_variables'; // colors need to come first.
-@import './utils/box-shadow_variables';
-@import './utils/font_variables';
-@import './utils/size_variables';
+@use 'utils/color_variables'; // colors need to come first.
+@use 'utils/box-shadow_variables';
+@use 'utils/font_variables';
+@use 'utils/size_variables';
 
 // Element styling
-@import './core/element-styling';
+@use 'core/element-styling';
 
 // Mixins
-@import './utils/mixins';
-@import './utils/animations';
+@use 'utils/mixins';
+@use 'utils/animations';
 
 // Open-api styling
-@import './utils/swagger';
+@use 'utils/swagger';
 
 // Core Styles: each file styles a class that is not associated with a component. Ex: box and not box-label.
-@import './core/box';
-@import './core/buttons';
-@import './core/charts';
-@import './core/charts-lineal';
-@import './core/checkbox-and-radio';
-@import './core/columns';
-@import './core/containers';
-@import './core/control';
-@import './core/field';
-@import './core/file';
-@import './core/inputs';
-@import './core/json-diff-patch';
-@import './core/label';
-@import './core/level';
-@import './core/link';
-@import './core/lists';
-@import './core/menu';
-@import './core/message';
-@import './core/progress';
-@import './core/select';
-@import './core/title';
-@import './core/toggle';
+@use 'core/box';
+@use 'core/buttons';
+@use 'core/charts';
+@use 'core/charts-lineal';
+@use 'core/checkbox-and-radio';
+@use 'core/columns';
+@use 'core/containers';
+@use 'core/control';
+@use 'core/field';
+@use 'core/file';
+@use 'core/inputs';
+@use 'core/json-diff-patch';
+@use 'core/label';
+@use 'core/level';
+@use 'core/link';
+@use 'core/lists';
+@use 'core/menu';
+@use 'core/message';
+@use 'core/progress';
+@use 'core/select';
+@use 'core/title';
+@use 'core/toggle';
 
 // Helpers
-@import './helper-classes/colors';
-@import './helper-classes/flexbox-and-grid';
-@import './helper-classes/layout';
-@import './helper-classes/general';
-@import './helper-classes/spacing';
-@import './helper-classes/typography';
+@use 'helper-classes/colors';
+@use 'helper-classes/flexbox-and-grid';
+@use 'helper-classes/layout';
+@use 'helper-classes/general';
+@use 'helper-classes/spacing';
+@use 'helper-classes/typography';
 
 // Component specific styling
-@import './components/auth-form';
-@import './components/autocomplete-input';
-@import './components/b64-toggle';
-@import './components/box-label';
-@import './components/calendar-widget';
-@import './components/chart-container';
-@import './components/clients-date-range';
-@import './components/cluster-banners';
-@import './components/codemirror';
-@import './components/console-ui-panel';
-@import './components/control-group';
-@import './components/doc-link';
-@import './components/empty-state-component';
-@import './components/env-banner';
-@import './components/form-section';
-@import './components/global-flash';
-@import './components/icon';
-@import './components/init-illustration';
-@import './components/info-table-row';
-@import './components/kmip-role-edit';
-@import './components/known-secondaries-card.scss';
-@import './components/linked-block';
-@import './components/list-item-row';
-@import './components/loader';
-@import './components/login-form';
-@import './components/masked-input';
-@import './components/namespace-picker';
-@import './components/namespace-reminder';
-@import './components/navigate-input';
-@import './components/overview-card';
-@import './components/page-header-old';
-@import './components/popup-menu';
-@import './components/radio-card';
-@import './components/radial-progress';
-@import './components/raft-join';
-@import './components/read-more';
-@import './components/regex-validator';
-@import './components/replication-dashboard';
-@import './components/replication-page';
-@import './components/replication-summary';
-@import './components/role-item';
-@import './components/search-select';
-@import './components/selectable-card';
-@import './components/selectable-card-container';
-@import './components/secrets-engines-card';
-@import './components/action-block';
-@import './components/shamir-progress';
-@import './components/sidebar';
-@import './components/splash-page';
-@import './components/stat-text';
-@import './components/tabs-component';
-@import './components/text-file';
-@import './components/toolbar';
-@import './components/tool-tip';
-@import './components/transform-edit';
-@import './components/transit-card';
-@import './components/ttl-picker';
-@import './components/unseal-warning';
-@import './components/vault-loading';
+@use 'components/auth-form';
+@use 'components/autocomplete-input';
+@use 'components/b64-toggle';
+@use 'components/box-label';
+@use 'components/calendar-widget';
+@use 'components/chart-container';
+@use 'components/clients-date-range';
+@use 'components/cluster-banners';
+@use 'components/codemirror';
+@use 'components/console-ui-panel';
+@use 'components/control-group';
+@use 'components/doc-link';
+@use 'components/empty-state-component';
+@use 'components/env-banner';
+@use 'components/form-section';
+@use 'components/global-flash';
+@use 'components/icon';
+@use 'components/init-illustration';
+@use 'components/info-table-row';
+@use 'components/kmip-role-edit';
+@use 'components/known-secondaries-card.scss';
+@use 'components/linked-block';
+@use 'components/list-item-row';
+@use 'components/loader';
+@use 'components/login-form';
+@use 'components/masked-input';
+@use 'components/namespace-picker';
+@use 'components/namespace-reminder';
+@use 'components/navigate-input';
+@use 'components/overview-card';
+@use 'components/page-header-old';
+@use 'components/popup-menu';
+@use 'components/radio-card';
+@use 'components/radial-progress';
+@use 'components/raft-join';
+@use 'components/read-more';
+@use 'components/regex-validator';
+@use 'components/replication-dashboard';
+@use 'components/replication-page';
+@use 'components/replication-summary';
+@use 'components/role-item';
+@use 'components/search-select';
+@use 'components/selectable-card';
+@use 'components/selectable-card-container';
+@use 'components/secrets-engines-card';
+@use 'components/action-block';
+@use 'components/shamir-progress';
+@use 'components/sidebar';
+@use 'components/splash-page';
+@use 'components/stat-text';
+@use 'components/tabs-component';
+@use 'components/text-file';
+@use 'components/toolbar';
+@use 'components/tool-tip';
+@use 'components/transform-edit';
+@use 'components/transit-card';
+@use 'components/ttl-picker';
+@use 'components/unseal-warning';
+@use 'components/vault-loading';
diff --git a/ui/app/styles/core/box.scss b/ui/app/styles/core/box.scss
index cbec5628de..a248f71ec8 100644
--- a/ui/app/styles/core/box.scss
+++ b/ui/app/styles/core/box.scss
@@ -1,15 +1,19 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .box {
-  background-color: $white;
+  background-color: color_variables.$white;
   border-radius: 0;
-  box-shadow: 0 0 0 1px rgba($grey-dark, 0.3);
-  color: $ui-gray-900;
+  box-shadow: 0 0 0 1px rgba(color_variables.$grey-dark, 0.3);
+  color: color_variables.$ui-gray-900;
   display: block;
-  padding: $spacing-18;
+  padding: size_variables.$spacing-18;
 
   &:not(:last-child) {
     margin-bottom: 1.5rem;
@@ -29,12 +33,12 @@
   }
 
   &.no-top-shadow {
-    box-shadow: inset 0 -1px 0 0 rgba($black, 0.1);
+    box-shadow: inset 0 -1px 0 0 rgba(color_variables.$black, 0.1);
   }
 
   &.has-container {
-    box-shadow: 0 4px 4px rgba($black, 0.25);
-    border: $base-border;
-    padding: $spacing-24;
+    box-shadow: 0 4px 4px rgba(color_variables.$black, 0.25);
+    border: box-shadow_variables.$base-border;
+    padding: size_variables.$spacing-24;
   }
 }
diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss
index 3bcdbf79e1..d25a390b2c 100644
--- a/ui/app/styles/core/buttons.scss
+++ b/ui/app/styles/core/buttons.scss
@@ -1,3 +1,9 @@
+@use 'sass:color';
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -5,22 +11,26 @@
 
 .button {
   align-items: center;
-  background-color: $grey-lightest;
-  border: 1px solid $grey-light;
-  border-radius: $radius;
-  box-shadow: $box-shadow-low;
+  background-color: color_variables.$grey-lightest;
+  border: 1px solid color_variables.$grey-light;
+  border-radius: size_variables.$radius;
+  box-shadow: box-shadow_variables.$box-shadow-low;
   cursor: pointer;
-  color: $ui-gray-800;
+  color: color_variables.$ui-gray-800;
   display: inline-block;
-  font-size: $size-8;
-  font-weight: $font-weight-semibold;
+  font-size: size_variables.$size-8;
+  font-weight: font_variables.$font-weight-semibold;
   min-height: 2.25rem;
   min-width: 6rem;
   padding: 0.5625rem 0.9375rem;
   position: relative;
   text-align: center;
   text-decoration: none;
-  transition: background-color $speed, border-color $speed, box-shadow $speed, color $speed;
+  transition:
+    background-color size_variables.$speed,
+    border-color size_variables.$speed,
+    box-shadow size_variables.$speed,
+    color size_variables.$speed;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
@@ -37,9 +47,9 @@
   &:active,
   &.is-active,
   &:focus {
-    border-color: darken($grey-light, 10%);
-    box-shadow: $button-box-shadow-standard;
-    color: darken($grey-dark, 10%);
+    border-color: color.adjust(color_variables.$grey-light, $lightness: -10%);
+    box-shadow: box-shadow_variables.$button-box-shadow-standard;
+    color: color.adjust(color_variables.$grey-dark, $lightness: -10%);
   }
 
   &:focus:not(:active) {
@@ -47,8 +57,8 @@
   }
 
   &:disabled {
-    background-color: $white;
-    border-color: $ui-gray-050;
+    background-color: color_variables.$white;
+    border-color: color_variables.$ui-gray-050;
     box-shadow: none;
     cursor: not-allowed;
     opacity: 0.5;
@@ -58,37 +68,37 @@
 
   &.is-compact {
     height: 2rem;
-    padding: $spacing-4 $spacing-12;
+    padding: size_variables.$spacing-4 size_variables.$spacing-12;
   }
 
   &.is-danger {
-    background-color: $red-500;
-    border-color: darken($red-500, 2%);
-    color: $white;
-    text-shadow: 0 1px 1px rgba($black, 0.25);
+    background-color: color_variables.$red-500;
+    border-color: color.adjust(color_variables.$red-500, $lightness: -2%);
+    color: color_variables.$white;
+    text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
 
     &:hover:not([disabled]) {
-      background-color: darken($red-500, 5%);
-      border-color: darken($red-500, 5%);
-      box-shadow: $box-shadow-middle;
+      background-color: color.adjust(color_variables.$red-500, $lightness: -5%);
+      border-color: color.adjust(color_variables.$red-500, $lightness: -5%);
+      box-shadow: box-shadow_variables.$box-shadow-middle;
     }
 
     &:active,
     &.is-active {
-      background-color: darken($red-500, 10%);
-      border-color: darken($red-500, 10%);
-      box-shadow: $box-shadow-middle;
+      background-color: color.adjust(color_variables.$red-500, $lightness: -10%);
+      border-color: color.adjust(color_variables.$red-500, $lightness: -10%);
+      box-shadow: box-shadow_variables.$box-shadow-middle;
     }
 
     &:focus {
-      border-color: darken($red-500, 10%);
-      box-shadow: $button-box-shadow-standard;
+      border-color: color.adjust(color_variables.$red-500, $lightness: -10%);
+      box-shadow: box-shadow_variables.$button-box-shadow-standard;
     }
   }
 
   &.is-danger-outlined {
-    border: 1px solid $red-500;
-    color: $red-500;
+    border: 1px solid color_variables.$red-500;
+    color: color_variables.$red-500;
   }
 
   &.is-flat {
@@ -101,17 +111,17 @@
     background-color: transparent;
     border-color: transparent;
     box-shadow: none;
-    color: $blue;
+    color: color_variables.$blue;
     text-decoration: none;
 
     &:hover {
-      color: $blue-500;
-      background-color: $grey-lightest;
+      color: color_variables.$blue-500;
+      background-color: color_variables.$grey-lightest;
     }
   }
 
   &.is-icon {
-    padding: 0.25rem $spacing-24;
+    padding: 0.25rem size_variables.$spacing-24;
   }
 
   &.is-loading {
@@ -119,7 +129,7 @@
     pointer-events: none;
     &::after {
       animation: spinAround 500ms infinite linear;
-      border: 2px solid $ui-gray-300;
+      border: 2px solid color_variables.$ui-gray-300;
       border-radius: 290486px;
       border-right-color: transparent;
       border-top-color: transparent;
@@ -136,83 +146,83 @@
   &.is-link {
     background-color: transparent;
     border-color: transparent;
-    color: $blue;
+    color: color_variables.$blue;
     text-decoration: none;
-    font-weight: $font-weight-semibold;
+    font-weight: font_variables.$font-weight-semibold;
     box-shadow: none;
     min-width: 4rem;
   }
 
   &.is-primary {
-    background-color: $blue;
-    border-color: darken($blue, 2%);
-    color: $white;
-    font-weight: $font-weight-bold;
-    text-shadow: 0 1px 1px rgba($black, 0.25);
+    background-color: color_variables.$blue;
+    border-color: color.adjust(color_variables.$blue, $lightness: -2%);
+    color: color_variables.$white;
+    font-weight: font_variables.$font-weight-bold;
+    text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
 
     &:disabled {
-      background-color: $ui-gray-700;
+      background-color: color_variables.$ui-gray-700;
       border-color: transparent;
       box-shadow: none;
     }
 
     &:hover:not([disabled]) {
-      background-color: darken($blue, 5%);
-      border-color: darken($blue, 5%);
-      box-shadow: $box-shadow-middle;
+      background-color: color.adjust(color_variables.$blue, $lightness: -5%);
+      border-color: color.adjust(color_variables.$blue, $lightness: -5%);
+      box-shadow: box-shadow_variables.$box-shadow-middle;
     }
 
     &:active,
     &.is-active {
-      background-color: darken($blue, 10%);
-      border-color: darken($blue, 10%);
-      box-shadow: $box-shadow-middle;
+      background-color: color.adjust(color_variables.$blue, $lightness: -10%);
+      border-color: color.adjust(color_variables.$blue, $lightness: -10%);
+      box-shadow: box-shadow_variables.$box-shadow-middle;
     }
 
     &:focus {
-      border-color: darken($blue, 10%);
-      box-shadow: $button-box-shadow-standard;
+      border-color: color.adjust(color_variables.$blue, $lightness: -10%);
+      box-shadow: box-shadow_variables.$button-box-shadow-standard;
     }
 
     &.is-loading::after {
-      border-color: transparent transparent $white $white;
+      border-color: transparent transparent color_variables.$white color_variables.$white;
     }
 
     &.is-underlined {
       &:active,
       &.is-active {
         background-color: transparent;
-        border-bottom: 2px solid darken($blue, 10%);
+        border-bottom: 2px solid color.adjust(color_variables.$blue, $lightness: -10%);
         border-radius: unset;
-        color: darken($blue, 10%);
+        color: color.adjust(color_variables.$blue, $lightness: -10%);
       }
     }
     // is-primary.is-outlined the only is-outlined buttons are primary.
     &.is-outlined {
       background-color: transparent;
-      border-color: $blue;
-      color: $blue;
+      border-color: color_variables.$blue;
+      color: color_variables.$blue;
 
       &:hover,
       &:focus {
         background-color: transparent;
-        border-color: darken($blue, 10%);
-        color: $blue;
+        border-color: color.adjust(color_variables.$blue, $lightness: -10%);
+        color: color_variables.$blue;
       }
 
       &:active,
       &.is-active {
         background-color: transparent;
-        border-color: darken($blue, 10%);
-        color: darken($blue, 10%);
+        border-color: color.adjust(color_variables.$blue, $lightness: -10%);
+        color: color.adjust(color_variables.$blue, $lightness: -10%);
       }
     }
 
     &.is-outlined [disabled] {
       background-color: transparent;
-      border-color: $ui-gray-700;
+      border-color: color_variables.$ui-gray-700;
       box-shadow: none;
-      color: $ui-gray-700;
+      color: color_variables.$ui-gray-700;
     }
   }
 
@@ -227,7 +237,7 @@
   // End of button types
 
   &.tool-tip-trigger {
-    color: $grey-dark;
+    color: color_variables.$grey-dark;
     min-width: auto;
     padding: 0;
   }
@@ -246,7 +256,7 @@
       &,
       &:first-child:last-child {
         position: relative;
-        left: -$size-10;
+        left: -(size_variables.$size-10);
       }
     }
   }
@@ -255,8 +265,8 @@
     .hs-icon {
       &,
       &:first-child:last-child {
-        margin-left: $spacing-4;
-        margin-right: -$spacing-4;
+        margin-left: size_variables.$spacing-4;
+        margin-right: -(size_variables.$spacing-4);
       }
     }
   }
@@ -264,7 +274,7 @@
 
 .button.icon {
   box-sizing: border-box;
-  padding: 0 $spacing-4;
+  padding: 0 size_variables.$spacing-4;
   height: 24px;
   width: 24px;
   &,
@@ -281,8 +291,8 @@
 }
 
 a.button.disabled {
-  color: $white;
-  background-color: $grey-dark;
+  color: color_variables.$white;
+  background-color: color_variables.$grey-dark;
   opacity: 0.5;
   border-color: transparent;
   box-shadow: none;
@@ -305,7 +315,7 @@ a.button.disabled {
   cursor: pointer;
 
   &:disabled {
-    color: $grey-light;
+    color: color_variables.$grey-light;
     cursor: not-allowed;
   }
 }
@@ -313,19 +323,19 @@ a.button.disabled {
 // TODO HDS adoption cleanup: audit styles with design and see what to keep/remove once buttons are fully HDS
 // Existing class on <Hds::Copy::Button> component, modifying to match existing UI Structure buttons
 .hds-copy-button {
-  font-weight: $font-weight-semibold; // TODO delete
-  box-shadow: $box-shadow-low; // TODO delete
+  font-weight: font_variables.$font-weight-semibold; // TODO delete
+  box-shadow: box-shadow_variables.$box-shadow-low; // TODO delete
 
   &.white-icon svg {
-    color: $white;
+    color: color_variables.$white;
   }
 
   &.icon-grey-300 svg {
-    color: $ui-gray-300;
+    color: color_variables.$ui-gray-300;
   }
 
   &.icon-grey-500 svg {
-    color: $ui-gray-500;
+    color: color_variables.$ui-gray-500;
   }
 
   &.transparent {
@@ -333,30 +343,30 @@ a.button.disabled {
     box-shadow: none;
     border: 1px solid transparent;
     &:hover {
-      border: 1px solid $grey-light;
+      border: 1px solid color_variables.$grey-light;
       border-color: var(--token-color-border-strong);
     }
   }
 
   &.primary {
-    background-color: $blue;
-    border-color: darken($blue, 2%);
-    color: $white;
-    font-weight: $font-weight-bold;
-    text-shadow: 0 1px 1px rgba($black, 0.25);
+    background-color: color_variables.$blue;
+    border-color: color.adjust(color_variables.$blue, $lightness: -2%);
+    color: color_variables.$white;
+    font-weight: font_variables.$font-weight-bold;
+    text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
     svg {
-      color: $white;
+      color: color_variables.$white;
     }
   }
 
   &.secondary {
-    background-color: $grey-lightest;
-    border: 1px solid $grey-light;
+    background-color: color_variables.$grey-lightest;
+    border: 1px solid color_variables.$grey-light;
   }
 
   &.in-dropdown {
     div {
-      font-size: $size-7;
+      font-size: size_variables.$size-7;
     }
     svg {
       color: transparent;
@@ -366,17 +376,17 @@ a.button.disabled {
 
 // Existing class on <Hds::Button> component, modifying to match existing UI Structure buttons
 .hds-button {
-  font-weight: $font-weight-semibold; // TODO consult design on font weight after button class audit
+  font-weight: font_variables.$font-weight-semibold; // TODO consult design on font weight after button class audit
   display: inline-flex; // temporarily fixes existing button alignment until we adopt Hds::ButtonSet
   // for toolbar-button must pass arg @color="secondary"
   &.toolbar-button {
-    color: $black;
+    color: color_variables.$black;
     background: none;
     border: none;
     box-shadow: none;
     &:hover:not(.disabled) {
-      background-color: $ui-gray-100;
-      color: $blue;
+      background-color: color_variables.$ui-gray-100;
+      color: color_variables.$blue;
     }
   }
 }
diff --git a/ui/app/styles/core/charts-lineal.scss b/ui/app/styles/core/charts-lineal.scss
index 047062e71f..a5c4d2f2a7 100644
--- a/ui/app/styles/core/charts-lineal.scss
+++ b/ui/app/styles/core/charts-lineal.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -16,12 +19,12 @@
   fill: var(--token-color-palette-blue-300);
 }
 .lineal-axis {
-  color: $ui-gray-500;
+  color: color_variables.$ui-gray-500;
   text {
     font-size: 0.75rem;
   }
   line {
-    color: $ui-gray-300;
+    color: color_variables.$ui-gray-300;
   }
 }
 .lineal-tooltip-position {
@@ -34,7 +37,7 @@
   transform: translate(calc(1px * var(--x, 0)), calc(-1px * var(--y, 0)));
   transform-origin: bottom left;
   z-index: 100;
-  margin-bottom: $spacing-8;
+  margin-bottom: size_variables.$spacing-8;
 }
 
 // @colorScale arg for Lineal::VBars is "blue-bar", indices are added by lineal
diff --git a/ui/app/styles/core/charts.scss b/ui/app/styles/core/charts.scss
index 86b4ab5591..894f73d2ee 100644
--- a/ui/app/styles/core/charts.scss
+++ b/ui/app/styles/core/charts.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -33,21 +37,21 @@
 }
 
 .legend-label {
-  padding-left: $spacing-8;
-  padding-right: $spacing-36;
+  padding-left: size_variables.$spacing-8;
+  padding-right: size_variables.$spacing-36;
 }
 
 .chart-tooltip {
-  background-color: $black;
+  background-color: color_variables.$black;
   color: white;
-  font-size: $size-9;
+  font-size: size_variables.$size-9;
   padding: 6px;
-  border-radius: $radius-large;
+  border-radius: size_variables.$radius-large;
   flex-wrap: nowrap;
   width: fit-content;
 
   .bold {
-    font-weight: $font-weight-bold;
+    font-weight: font_variables.$font-weight-bold;
   }
 }
 
@@ -60,7 +64,7 @@
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 9px solid $black;
+  border-top: 9px solid color_variables.$black;
   position: absolute;
   opacity: 0.8;
   bottom: -9px;
@@ -69,21 +73,21 @@
 
 .has-grid {
   g > text {
-    color: $ui-gray-500;
-    font-size: $size-9;
+    color: color_variables.$ui-gray-500;
+    font-size: size_variables.$size-9;
   }
 
   g > line {
     // TODO: mix-blend doesn't work in firefox browser?
     mix-blend-mode: darken;
-    color: $ui-gray-300;
+    color: color_variables.$ui-gray-300;
   }
 }
 
 .is-horizontal {
   .tick > text {
-    font-weight: $font-weight-semibold;
-    font-size: $size-9;
+    font-weight: font_variables.$font-weight-semibold;
+    font-size: size_variables.$size-9;
   }
 }
 
@@ -95,16 +99,16 @@
     grid-column-end: 4;
     grid-row-start: 2;
     grid-row-end: 3;
-    margin-left: $spacing-48;
-    margin-right: $spacing-48;
+    margin-left: size_variables.$spacing-48;
+    margin-right: size_variables.$spacing-48;
   }
   .chart-container-right {
     grid-column-start: 1;
     grid-column-end: 4;
     grid-row-start: 3;
     grid-row-end: 4;
-    margin-left: $spacing-48;
-    margin-right: $spacing-48;
+    margin-left: size_variables.$spacing-48;
+    margin-right: size_variables.$spacing-48;
   }
 
   .timestamp {
diff --git a/ui/app/styles/core/checkbox-and-radio.scss b/ui/app/styles/core/checkbox-and-radio.scss
index 16ed3f4cec..71d942efc6 100644
--- a/ui/app/styles/core/checkbox-and-radio.scss
+++ b/ui/app/styles/core/checkbox-and-radio.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -28,7 +32,7 @@
 .radio[disabled],
 .checkbox input[disabled],
 .radio input[disabled] {
-  color: $grey;
+  color: color_variables.$grey;
   cursor: not-allowed;
 }
 
@@ -39,8 +43,8 @@
 
 // one-off checkbox class
 .checkbox-help-text {
-  color: $ui-gray-700;
-  font-size: $size-7;
+  color: color_variables.$ui-gray-700;
+  font-size: size_variables.$size-7;
   padding-left: 28px;
 }
 
@@ -51,9 +55,9 @@
 }
 
 .b-checkbox label::before {
-  background-color: $white;
+  background-color: color_variables.$white;
   border-radius: 3px;
-  border: 1px solid $ui-gray-300;
+  border: 1px solid color_variables.$ui-gray-300;
   content: '';
   height: 17px;
   left: 0;
@@ -64,12 +68,12 @@
 }
 
 .b-checkbox input[type='checkbox']:checked + label::before {
-  border-color: $blue;
+  border-color: color_variables.$blue;
 }
 
 .b-checkbox input[type='checkbox']:checked + label::after,
 .b-checkbox input[type='radio']:checked + label::after {
-  font-family: $family-monospace;
+  font-family: font_variables.$family-monospace;
   /*checkmark from ionicons*/
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 512 512' fill='%231563ff'%3E%3Cpath d='M461.6 109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4-2.4 0-4.6 1-6.3 2.5L194.5 323s-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9s-6.4 3.1-8.7 5.4c-1.7 1.8-29.7 31.2-43.5 45.8-.8.9-1.3 1.4-2 2.1-1.2 1.7-2 3.6-2 5.7 0 2.2.8 4 2 5.7l2.8 2.6s139.3 133.8 141.6 136.1c2.3 2.3 5.1 5.2 9.2 5.2 4 0 7.3-4.3 9.2-6.2l249.1-320c1.2-1.7 2-3.6 2-5.8 0-2.5-1-4.6-2.4-6.4z'/%3E%3C/svg%3E");
 }
@@ -82,7 +86,7 @@
 }
 
 .b-checkbox label::after {
-  color: $ui-gray-800;
+  color: color_variables.$ui-gray-800;
   font-size: 12px;
   height: 16px;
   left: 3px;
@@ -107,7 +111,7 @@
 
 .b-checkbox input[type='checkbox']:disabled + label::before,
 .b-checkbox input[type='radio']:disabled + label::before {
-  background-color: $ui-gray-100;
+  background-color: color_variables.$ui-gray-100;
   cursor: not-allowed;
 }
 
diff --git a/ui/app/styles/core/columns.scss b/ui/app/styles/core/columns.scss
index a9dd2f830f..a8e029e589 100644
--- a/ui/app/styles/core/columns.scss
+++ b/ui/app/styles/core/columns.scss
@@ -1,3 +1,5 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -7,12 +9,12 @@
 
 // Columns (plural)
 .columns {
-  margin-left: -$spacing-10;
-  margin-right: -$spacing-10;
-  margin-top: -$spacing-10;
+  margin-left: -(size_variables.$spacing-10);
+  margin-right: -(size_variables.$spacing-10);
+  margin-top: -(size_variables.$spacing-10);
 
   &:last-child {
-    margin-bottom: -$spacing-10;
+    margin-bottom: -(size_variables.$spacing-10);
   }
 
   &.is-centered {
@@ -31,7 +33,7 @@
   }
 
   &.is-gapless:not(:last-child) {
-    margin-bottom: $spacing-20;
+    margin-bottom: size_variables.$spacing-20;
   }
 
   &.is-gapless:last-child {
diff --git a/ui/app/styles/core/containers.scss b/ui/app/styles/core/containers.scss
index 5d6e8d15fa..d8e39bd812 100644
--- a/ui/app/styles/core/containers.scss
+++ b/ui/app/styles/core/containers.scss
@@ -1,3 +1,5 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -21,7 +23,7 @@
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  padding: 0 $spacing-20;
+  padding: 0 size_variables.$spacing-20;
 
   > .container {
     display: flex;
diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss
index 43a453372e..028756cf7e 100644
--- a/ui/app/styles/core/element-styling.scss
+++ b/ui/app/styles/core/element-styling.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -37,7 +41,7 @@ body,
 pre:not(.hds-code-block__code),
 strong,
 table th {
-  color: $ui-gray-900;
+  color: color_variables.$ui-gray-900;
 }
 
 h1,
@@ -80,8 +84,8 @@ object {
 }
 
 html {
-  background-color: $white;
-  font-size: $base-font-size; // 16px
+  background-color: color_variables.$white;
+  font-size: size_variables.$base-font-size; // 16px
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
@@ -104,7 +108,7 @@ button,
 input,
 select,
 textarea {
-  font-family: $family-sans;
+  font-family: font_variables.$family-sans;
 }
 
 code,
@@ -121,14 +125,14 @@ pre code {
 }
 
 body {
-  font-size: $size-6;
+  font-size: size_variables.$size-6;
   line-height: 1.5;
   overflow-x: hidden;
   overflow-y: scroll;
 }
 
 a {
-  color: $blue-500;
+  color: color_variables.$blue-500;
   cursor: pointer;
   text-decoration: underline;
 
@@ -140,19 +144,19 @@ a {
 }
 
 a:hover {
-  color: $ui-gray-900;
+  color: color_variables.$ui-gray-900;
 }
 
 code {
   background-color: transparent;
-  color: $ui-gray-700;
+  color: color_variables.$ui-gray-700;
   font-size: 1em;
   font-weight: 400;
   padding: 0;
 }
 
 hr {
-  background-color: $ui-gray-300;
+  background-color: color_variables.$ui-gray-300;
   border: none;
   display: block;
   height: 1px;
@@ -190,7 +194,7 @@ label {
 // <Hds::Dropdown>
 .hds-dropdown-list-item {
   > button:disabled {
-    color: $black;
+    color: color_variables.$black;
     opacity: 0.5;
     cursor: not-allowed;
   }
diff --git a/ui/app/styles/core/field.scss b/ui/app/styles/core/field.scss
index fbdc6e85f2..0f36b21d91 100644
--- a/ui/app/styles/core/field.scss
+++ b/ui/app/styles/core/field.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,12 +11,12 @@
 .field {
   // cannot use :read-only selector because tag used for other purposes
   &.is-readOnly {
-    background-color: $ui-gray-100;
+    background-color: color_variables.$ui-gray-100;
     cursor: not-allowed;
   }
 
   &:not(:last-child) {
-    margin-bottom: $spacing-20;
+    margin-bottom: size_variables.$spacing-20;
   }
 }
 // must come after field due to overriding the margin-bottom of not last-child
@@ -47,8 +50,8 @@
       .checkbox,
       .input,
       .select select {
-        border-bottom-left-radius: $radius;
-        border-top-left-radius: $radius;
+        border-bottom-left-radius: size_variables.$radius;
+        border-top-left-radius: size_variables.$radius;
       }
     }
     &:last-child {
@@ -56,8 +59,8 @@
       .checkbox,
       .input,
       .select select {
-        border-bottom-right-radius: $radius;
-        border-top-right-radius: $radius;
+        border-bottom-right-radius: size_variables.$radius;
+        border-top-right-radius: size_variables.$radius;
       }
     }
   }
@@ -110,7 +113,7 @@ fieldset.form-fieldset {
     flex-shrink: 1;
 
     > .field:not(:last-child) {
-      margin-right: $spacing-10;
+      margin-right: size_variables.$spacing-10;
     }
     .field:not(.is-narrow) {
       flex-grow: 1;
diff --git a/ui/app/styles/core/file.scss b/ui/app/styles/core/file.scss
index 19108fd919..97206ac3ba 100644
--- a/ui/app/styles/core/file.scss
+++ b/ui/app/styles/core/file.scss
@@ -1,3 +1,9 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+@use '../core/buttons.scss';
+@use '../core/inputs.scss';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -11,8 +17,8 @@
 
 .file-cta {
   align-items: center;
-  border: $base-border;
-  border-radius: $radius;
+  border: box-shadow_variables.$base-border;
+  border-radius: size_variables.$radius;
   display: inline-flex;
   height: 2.25em;
   justify-content: flex-start;
@@ -26,7 +32,7 @@
   white-space: nowrap;
 
   &.button {
-    height: $size-2; // in older parts of the code (Ex: shamir-modal-flow) this class is not a button. In newer parts of the code it is, and height needs to match the height of a button (2.5rem).
+    height: size_variables.$size-2; // in older parts of the code (Ex: shamir-modal-flow) this class is not a button. In newer parts of the code it is, and height needs to match the height of a button (2.5rem).
   }
 
   &:disabled {
@@ -43,9 +49,9 @@
 .file-delete-button {
   @extend .button;
   @extend .is-transparent;
-  color: $grey;
+  color: color_variables.$grey;
   position: absolute;
-  right: $spacing-8;
+  right: size_variables.$spacing-8;
 }
 
 .file-icon {
@@ -77,8 +83,8 @@
 
 .file-name {
   @extend .input;
-  border: $base-border;
-  border-radius: $radius;
+  border: box-shadow_variables.$base-border;
+  border-radius: size_variables.$radius;
   box-shadow: 0 4px 1px rgba(10, 10, 10, 0.06) inset;
   display: block;
   font-size: 1em;
diff --git a/ui/app/styles/core/inputs.scss b/ui/app/styles/core/inputs.scss
index e7982fd811..cd337f6af8 100644
--- a/ui/app/styles/core/inputs.scss
+++ b/ui/app/styles/core/inputs.scss
@@ -1,3 +1,8 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,18 +13,18 @@
 .input,
 .textarea {
   align-items: center;
-  border-radius: $radius;
-  border: $base-border;
-  box-shadow: 0 4px 1px rgba($black, 0.06) inset;
-  color: $grey-dark;
+  border-radius: size_variables.$radius;
+  border: box-shadow_variables.$base-border;
+  box-shadow: 0 4px 1px rgba(color_variables.$black, 0.06) inset;
+  color: color_variables.$grey-dark;
   display: inline-flex;
-  font-size: $size-6;
-  height: $size-2;
+  font-size: size_variables.$size-6;
+  height: size_variables.$size-2;
   line-height: 1.5;
   max-width: 100%;
   padding-bottom: calc(0.375em - 1px);
-  padding-left: $spacing-12;
-  padding-right: $spacing-12;
+  padding-left: size_variables.$spacing-12;
+  padding-right: size_variables.$spacing-12;
   padding-top: calc(0.375em - 1px);
   width: 100%;
 
@@ -28,17 +33,17 @@
   &.is-active,
   &:focus-visible {
     outline: none;
-    background-color: $white;
-    border-color: $blue-500 !important;
+    background-color: color_variables.$white;
+    border-color: color_variables.$blue-500 !important;
     box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
   }
 
   &:hover {
-    border-color: $ui-gray-300;
+    border-color: color_variables.$ui-gray-300;
   }
 
-  @include until($desktop) {
-    font-size: $size-6;
+  @include mixins.until(size_variables.$desktop) {
+    font-size: size_variables.$size-6;
   }
 
   &::placeholder {
@@ -48,13 +53,13 @@
 
 .input[disabled],
 .textarea[disabled] {
-  border-color: $grey-light;
-  background-color: $ui-gray-100;
-  color: $ui-gray-500;
+  border-color: color_variables.$grey-light;
+  background-color: color_variables.$ui-gray-100;
+  color: color_variables.$ui-gray-500;
   cursor: not-allowed;
 
   &:hover {
-    border-color: $grey-light;
+    border-color: color_variables.$grey-light;
   }
 }
 
@@ -79,7 +84,7 @@
 
 // custom input
 .input-hint {
-  padding: 0 $spacing-10;
-  font-size: $size-8;
+  padding: 0 size_variables.$spacing-10;
+  font-size: size_variables.$size-8;
   color: var(--token-color-foreground-faint);
 }
diff --git a/ui/app/styles/core/json-diff-patch.scss b/ui/app/styles/core/json-diff-patch.scss
index 0bd749d4af..d5a5cc9b5d 100644
--- a/ui/app/styles/core/json-diff-patch.scss
+++ b/ui/app/styles/core/json-diff-patch.scss
@@ -1,3 +1,5 @@
+@use '../utils/color_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -19,7 +21,7 @@
 }
 
 .jsondiffpatch-property-name {
-  color: $ui-gray-300;
+  color: color_variables.$ui-gray-300;
 }
 
 .jsondiffpatch-added > .jsondiffpatch-property-name {
diff --git a/ui/app/styles/core/label.scss b/ui/app/styles/core/label.scss
index ba8a525d09..2854eabda3 100644
--- a/ui/app/styles/core/label.scss
+++ b/ui/app/styles/core/label.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -6,12 +10,12 @@
 // This file defines the style for .is-label
 
 .is-label {
-  color: $grey-darkest;
+  color: color_variables.$grey-darkest;
   font-size: 14px;
-  font-weight: $font-weight-bold;
+  font-weight: font_variables.$font-weight-bold;
   display: flex;
   align-items: center;
-  gap: $spacing-4;
+  gap: size_variables.$spacing-4;
   width: min-content;
   min-width: 100%;
 
@@ -25,6 +29,6 @@
   }
 
   &::before {
-    border-color: $grey-light;
+    border-color: color_variables.$grey-light;
   }
 }
diff --git a/ui/app/styles/core/level.scss b/ui/app/styles/core/level.scss
index 4c9092968c..fcd595c0bc 100644
--- a/ui/app/styles/core/level.scss
+++ b/ui/app/styles/core/level.scss
@@ -1,3 +1,6 @@
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -9,11 +12,11 @@
 }
 
 .level code {
-  border-radius: $radius;
+  border-radius: size_variables.$radius;
 }
 
 .level:not(:last-child) {
-  @include vault-block;
+  @include mixins.vault-block;
 }
 
 .level-left,
@@ -45,7 +48,7 @@
 
 .level.is-mobile .level-item:not(:last-child) {
   margin-bottom: 0;
-  margin-right: $spacing-10;
+  margin-right: size_variables.$spacing-10;
 }
 
 .level.is-mobile .level-item:not(.is-narrow) {
@@ -92,6 +95,6 @@
 
 @media screen and (max-width: 768px) {
   .level-item:not(:last-child) {
-    margin-bottom: $spacing-10;
+    margin-bottom: size_variables.$spacing-10;
   }
 }
diff --git a/ui/app/styles/core/link.scss b/ui/app/styles/core/link.scss
index efece782fc..ab0bd1cf1b 100644
--- a/ui/app/styles/core/link.scss
+++ b/ui/app/styles/core/link.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -6,14 +9,14 @@
 .link {
   background: transparent;
   border: 0;
-  color: $blue;
+  color: color_variables.$blue;
   cursor: pointer;
   display: inline;
   font: inherit;
   line-height: normal;
   margin: 0;
   padding: 0;
-  font-weight: $font-weight-semibold;
+  font-weight: font_variables.$font-weight-semibold;
   user-select: text;
 
   &[disabled] {
diff --git a/ui/app/styles/core/lists.scss b/ui/app/styles/core/lists.scss
index f850b4ccc1..0ec27ba3ba 100644
--- a/ui/app/styles/core/lists.scss
+++ b/ui/app/styles/core/lists.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -9,22 +13,22 @@
   display: inline-flex;
   align-items: center;
   &:before {
-    font-size: $size-5;
-    color: $blue-500;
+    font-size: size_variables.$size-5;
+    color: color_variables.$blue-500;
     content: '|';
     position: relative;
   }
 }
 
 .list-header {
-  margin: $spacing-10 $spacing-10 0;
-  color: $grey;
-  font-size: $size-8;
-  font-weight: $font-weight-semibold;
+  margin: size_variables.$spacing-10 size_variables.$spacing-10 0;
+  color: color_variables.$grey;
+  font-size: size_variables.$size-8;
+  font-weight: font_variables.$font-weight-semibold;
   text-transform: uppercase;
 }
 
 ul.bullet {
   list-style: disc;
-  padding-left: $spacing-16;
+  padding-left: size_variables.$spacing-16;
 }
diff --git a/ui/app/styles/core/menu.scss b/ui/app/styles/core/menu.scss
index f0764a9d50..13af772fe8 100644
--- a/ui/app/styles/core/menu.scss
+++ b/ui/app/styles/core/menu.scss
@@ -1,15 +1,19 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .menu {
-  font-size: $size-6;
+  font-size: size_variables.$size-6;
 }
 
 .menu a {
   display: block;
-  padding: $spacing-8 $spacing-10;
+  padding: size_variables.$spacing-8 size_variables.$spacing-10;
   text-decoration: none;
 }
 
@@ -25,10 +29,10 @@
 .column .menu-list a {
   border-radius: 0;
   border-right: 0 solid transparent;
-  font-weight: $font-weight-semibold;
+  font-weight: font_variables.$font-weight-semibold;
 
   &:hover,
   &.is-active {
-    color: $blue;
+    color: color_variables.$blue;
   }
 }
diff --git a/ui/app/styles/core/message.scss b/ui/app/styles/core/message.scss
index 23596109cb..e2b571a28a 100644
--- a/ui/app/styles/core/message.scss
+++ b/ui/app/styles/core/message.scss
@@ -1,108 +1,113 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .alert-title {
-  font-size: $size-5;
-  font-weight: $font-weight-bold;
+  font-size: size_variables.$size-5;
+  font-weight: font_variables.$font-weight-bold;
 }
 
 .message {
-  background: $blue-010;
-  border: 1px solid $blue-100;
-  margin-bottom: $spacing-12;
-  padding: $spacing-12 $spacing-16 $spacing-16 $spacing-12;
+  background: color_variables.$blue-010;
+  border: 1px solid color_variables.$blue-100;
+  margin-bottom: size_variables.$spacing-12;
+  padding: size_variables.$spacing-12 size_variables.$spacing-16 size_variables.$spacing-16
+    size_variables.$spacing-12;
   position: relative;
 
   &:not(:last-child) {
-    margin-bottom: $spacing-20;
+    margin-bottom: size_variables.$spacing-20;
   }
 
   .message-icon {
-    color: $blue;
-    margin-right: $spacing-8;
+    color: color_variables.$blue;
+    margin-right: size_variables.$spacing-8;
   }
 
   .message-title {
-    color: $blue-500;
+    color: color_variables.$blue-500;
     font-size: 16px;
-    font-weight: $font-weight-bold;
+    font-weight: font_variables.$font-weight-bold;
     line-height: 1.25;
   }
 
   .message-body {
     border: 0;
     padding: 1em 1.25em;
-    margin-top: $spacing-4;
+    margin-top: size_variables.$spacing-4;
   }
 
   // message types, see message-types.js
   &.is-danger {
-    background: $red-010;
-    border: 1px solid $red-050;
+    background: color_variables.$red-010;
+    border: 1px solid color_variables.$red-050;
 
     .message-body {
-      color: $red-700;
+      color: color_variables.$red-700;
     }
 
     .message-icon {
-      color: $red-500;
+      color: color_variables.$red-500;
     }
 
     .message-title {
-      color: $red-700;
+      color: color_variables.$red-700;
     }
   }
 
   &.is-highlight {
-    background: $yellow-010;
-    border: 1px solid $yellow-100;
+    background: color_variables.$yellow-010;
+    border: 1px solid color_variables.$yellow-100;
 
     .message-body {
-      color: $ui-gray-900;
+      color: color_variables.$ui-gray-900;
     }
 
     .message-icon {
-      color: $yellow-500;
+      color: color_variables.$yellow-500;
     }
 
     .message-title {
-      color: $orange-700;
+      color: color_variables.$orange-700;
     }
   }
 
   &.is-info {
-    background-color: $blue-010;
+    background-color: color_variables.$blue-010;
 
     .message-body {
-      color: $blue-700;
+      color: color_variables.$blue-700;
     }
 
     .message-header {
-      background-color: $blue-500;
-      color: $white;
+      background-color: color_variables.$blue-500;
+      color: color_variables.$white;
     }
 
     .message-title {
-      color: $blue-700;
+      color: color_variables.$blue-700;
     }
   }
 
   &.is-success {
-    background: $green-010;
-    border: 1px solid $green-100;
+    background: color_variables.$green-010;
+    border: 1px solid color_variables.$green-100;
 
     .message-body {
-      color: $green-900;
+      color: color_variables.$green-900;
     }
 
     .message-icon {
-      color: $green-500;
+      color: color_variables.$green-500;
     }
 
     .message-title {
-      color: $green-700;
+      color: color_variables.$green-700;
     }
   }
 }
diff --git a/ui/app/styles/core/progress.scss b/ui/app/styles/core/progress.scss
index bdb5dfc578..1eb74275a4 100644
--- a/ui/app/styles/core/progress.scss
+++ b/ui/app/styles/core/progress.scss
@@ -1,3 +1,7 @@
+@use '../utils/box-shadow_variables';
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -5,12 +9,12 @@
 
 .progress {
   appearance: none;
-  background: $ui-gray-050;
+  background: color_variables.$ui-gray-050;
   border: none;
-  box-shadow: inset $box-link-shadow;
-  border-radius: $radius;
+  box-shadow: inset box-shadow_variables.$box-link-shadow;
+  border-radius: size_variables.$radius;
   display: block;
-  height: $size-6;
+  height: size_variables.$size-6;
   overflow: hidden;
   padding: 0;
   margin-bottom: 0;
@@ -23,7 +27,7 @@
     width: 30px;
   }
   &.is-medium {
-    height: $size-5;
+    height: size_variables.$size-5;
     width: 120px;
   }
 }
@@ -31,20 +35,20 @@
 // style the container in chrome
 .progress[value]::-webkit-progress-bar {
   background-color: #ededed;
-  box-shadow: inset $box-link-shadow;
+  box-shadow: inset box-shadow_variables.$box-link-shadow;
 }
 
 // style the bar in chrome
 .progress[value]::-webkit-progress-value {
   background-color: #4a4a4a;
-  border-radius: $radius;
-  transition: width 1s $easing;
+  border-radius: size_variables.$radius;
+  transition: width 1s size_variables.$easing;
 }
 
 // style the bar in firefox
 .progress[value]::-moz-progress-bar {
-  border-radius: $radius;
-  transition: width 1s $easing;
+  border-radius: size_variables.$radius;
+  transition: width 1s size_variables.$easing;
 }
 
 .progress::-ms-fill {
@@ -70,17 +74,17 @@
 }
 
 .progress.is-success::-webkit-progress-value {
-  background-color: $green-500;
+  background-color: color_variables.$green-500;
 }
 
 .progress.is-success::-moz-progress-bar {
-  background-color: $green-500;
+  background-color: color_variables.$green-500;
 }
 
 .progress.is-success::-ms-fill {
-  background-color: $green-500;
+  background-color: color_variables.$green-500;
 }
 
 .progress.is-success:indeterminate {
-  background-image: linear-gradient(to right, $green-500 30%, #ededed 30%);
+  background-image: linear-gradient(to right, color_variables.$green-500 30%, #ededed 30%);
 }
diff --git a/ui/app/styles/core/select.scss b/ui/app/styles/core/select.scss
index 3554ea3cd6..7f387faccb 100644
--- a/ui/app/styles/core/select.scss
+++ b/ui/app/styles/core/select.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,11 +12,11 @@ select {
 }
 
 .select select {
-  background-color: $ui-gray-050;
-  box-shadow: 0 3px 1px rgba($black, 0.12);
-  border: 1px solid $grey-light;
-  border-radius: $radius;
-  color: $grey-dark;
+  background-color: color_variables.$ui-gray-050;
+  box-shadow: 0 3px 1px rgba(color_variables.$black, 0.12);
+  border: 1px solid color_variables.$grey-light;
+  border-radius: size_variables.$radius;
+  color: color_variables.$grey-dark;
   cursor: pointer;
   display: block;
   font-size: 1em;
@@ -20,12 +24,12 @@ select {
   max-width: 100%;
   outline: none;
   padding-bottom: calc(0.375em - 1px);
-  padding-left: $spacing-10;
-  padding-right: $spacing-10;
+  padding-left: size_variables.$spacing-10;
+  padding-right: size_variables.$spacing-10;
   padding-top: calc(0.375em - 1px);
   text-rendering: auto !important;
 
-  @include until($desktop) {
+  @include mixins.until(size_variables.$desktop) {
     font-size: 1rem;
   }
 
@@ -37,23 +41,23 @@ select {
   &:focus,
   &:focus-visible,
   &.is-active {
-    border-color: $blue-500;
+    border-color: color_variables.$blue-500;
     box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
   }
 }
 
 .select select:not([multiple]) {
-  padding-right: $spacing-36;
+  padding-right: size_variables.$spacing-36;
 }
 
 .select select[disabled] {
-  border-color: $grey-light;
-  background-color: $ui-gray-100;
-  color: $ui-gray-500;
+  border-color: color_variables.$grey-light;
+  background-color: color_variables.$ui-gray-100;
+  color: color_variables.$ui-gray-500;
   cursor: not-allowed;
   user-select: none;
   &:hover {
-    border-color: $grey-light;
+    border-color: color_variables.$grey-light;
   }
 }
 
@@ -75,7 +79,7 @@ select {
   margin: 0;
   pointer-events: none;
   position: absolute;
-  right: $spacing-8;
+  right: size_variables.$spacing-8;
   top: 50%;
   transform: translateY(-50%);
   width: 24px;
diff --git a/ui/app/styles/core/title.scss b/ui/app/styles/core/title.scss
index 9ffe8b67e5..eb0b483908 100644
--- a/ui/app/styles/core/title.scss
+++ b/ui/app/styles/core/title.scss
@@ -1,3 +1,7 @@
+@use '../utils/color_variables';
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -14,51 +18,51 @@
 .title {
   color: hsl(0, 0%, 21%);
   font-size: 2rem;
-  font-weight: $font-weight-bold;
+  font-weight: font_variables.$font-weight-bold;
   line-height: 1.125;
   word-break: break-word;
 
   > a {
-    color: $black;
+    color: color_variables.$black;
     text-decoration: none;
   }
 
   // title sizes
   &.is-2 {
-    font-size: $size-2;
+    font-size: size_variables.$size-2;
   }
 
   &.is-3 {
-    font-size: $size-3;
+    font-size: size_variables.$size-3;
   }
 
   &.is-4 {
-    font-size: $size-4;
+    font-size: size_variables.$size-4;
   }
 
   &.is-5 {
-    font-size: $size-5;
+    font-size: size_variables.$size-5;
   }
 
   &.is-6 {
-    font-size: $size-6;
+    font-size: size_variables.$size-6;
   }
 
   &.is-7 {
-    font-size: $size-7;
+    font-size: size_variables.$size-7;
   }
 
   &.is-8 {
-    font-size: $size-8;
+    font-size: size_variables.$size-8;
   }
 }
 
 .form-section .title {
-  margin-bottom: $spacing-12;
+  margin-bottom: size_variables.$spacing-12;
 }
 
 .is-subtitle-gray {
   text-transform: uppercase;
-  font-size: $size-7;
-  color: $ui-gray-500;
+  font-size: size_variables.$size-7;
+  color: color_variables.$ui-gray-500;
 }
diff --git a/ui/app/styles/core/toggle.scss b/ui/app/styles/core/toggle.scss
index 0c4cb0579e..233cb07463 100644
--- a/ui/app/styles/core/toggle.scss
+++ b/ui/app/styles/core/toggle.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -43,7 +46,7 @@
   height: 1.5rem;
   border: 0.1rem solid transparent;
   border-radius: 0.75rem;
-  background: $ui-gray-300;
+  background: color_variables.$ui-gray-300;
   content: '';
 }
 .toggle[type='checkbox'] + label::after {
@@ -55,12 +58,12 @@
   height: 1rem;
   transform: translate3d(0, 0, 0);
   border-radius: 50%;
-  background: $white;
-  transition: all 0.25s $easing;
+  background: color_variables.$white;
+  transition: all 0.25s size_variables.$easing;
   content: '';
 }
 .toggle[type='checkbox']:checked + label::before {
-  background: $ui-gray-700;
+  background: color_variables.$ui-gray-700;
 }
 .toggle[type='checkbox']:checked + label::after {
   left: 1.625rem;
@@ -70,25 +73,25 @@
 .toggle[type='checkbox'] {
   &.is-small {
     + label {
-      font-size: $size-7;
-      padding-left: $spacing-32;
+      font-size: size_variables.$size-7;
+      padding-left: size_variables.$spacing-32;
       margin: 0 0.25rem;
       &::before {
-        top: calc($size-8 / 5);
-        height: $size-8;
-        width: $size-8 * 2;
+        top: calc(size_variables.$size-8 / 5);
+        height: size_variables.$size-8;
+        width: size_variables.$size-8 * 2;
       }
       &::after {
-        width: $size-8 * 0.9;
-        height: $size-8 * 0.9;
+        width: size_variables.$size-8 * 0.9;
+        height: size_variables.$size-8 * 0.9;
         transform: translateX(0.05rem);
         left: 0;
-        top: calc($size-8 / 4);
+        top: calc(size_variables.$size-8 / 4);
       }
     }
     &:checked + label::after {
       left: 0;
-      transform: translateX(($size-8 * 2) - ($size-8 * 0.94));
+      transform: translateX((size_variables.$size-8 * 2) - (size_variables.$size-8 * 0.94));
     }
   }
 }
@@ -96,10 +99,10 @@
   will-change: left;
 }
 .toggle[type='checkbox']:focus + label {
-  box-shadow: 0 0 1px $blue;
+  box-shadow: 0 0 1px color_variables.$blue;
 }
 .toggle[type='checkbox'].is-success:checked + label::before {
-  background: $blue;
+  background: color_variables.$blue;
 }
 
 .toggle-label {
diff --git a/ui/app/styles/docs.scss b/ui/app/styles/docs.scss
index 0ccb3aecfc..5527017e48 100644
--- a/ui/app/styles/docs.scss
+++ b/ui/app/styles/docs.scss
@@ -1,3 +1,6 @@
+@use 'utils/color_variables';
+@use 'utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -27,7 +30,7 @@
   h1,
   h2,
   h3 {
-    border-bottom: 1px solid $grey-light;
+    border-bottom: 1px solid color_variables.$grey-light;
     padding-bottom: 0.5rem;
   }
 
@@ -52,19 +55,19 @@
 
   ul,
   ol {
-    padding-left: $spacing-16;
-    padding-bottom: $spacing-16;
+    padding-left: size_variables.$spacing-16;
+    padding-bottom: size_variables.$spacing-16;
   }
 
   pre,
   code {
-    background-color: $ui-gray-100;
+    background-color: color_variables.$ui-gray-100;
   }
 
   blockquote {
     margin-left: 1rem;
     padding: 0.5rem;
-    background: $ui-gray-010;
+    background: color_variables.$ui-gray-010;
     border-radius: 6px;
   }
 
@@ -99,12 +102,12 @@
       }
     }
     tr {
-      border-bottom: 1px solid $grey-light;
+      border-bottom: 1px solid color_variables.$grey-light;
     }
   }
 
   .docfy-demo {
-    border: 1px solid $grey-lightest;
+    border: 1px solid color_variables.$grey-lightest;
     border-radius: 6px;
     padding: 1rem;
     overflow: scroll;
diff --git a/ui/app/styles/helper-classes/colors.scss b/ui/app/styles/helper-classes/colors.scss
index a3a6b7c390..0d1056b434 100644
--- a/ui/app/styles/helper-classes/colors.scss
+++ b/ui/app/styles/helper-classes/colors.scss
@@ -1,3 +1,5 @@
+@use '../utils/color_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -7,23 +9,23 @@
 
 // background colors
 .has-background-white-bis {
-  background: $ui-gray-050;
+  background: color_variables.$ui-gray-050;
 }
 
 .has-background-gray-100 {
-  background-color: $ui-gray-100;
+  background-color: color_variables.$ui-gray-100;
 }
 
 .has-background-gray-200 {
-  background-color: $ui-gray-200;
+  background-color: color_variables.$ui-gray-200;
 }
 
 .has-background-gray-300 {
-  background-color: $ui-gray-300;
+  background-color: color_variables.$ui-gray-300;
 }
 
 .has-background-gray-900 {
-  background-color: $ui-gray-900;
+  background-color: color_variables.$ui-gray-900;
 }
 
 .background-color-black {
@@ -33,12 +35,12 @@
 // borders
 .has-border-top-light {
   border-radius: 0;
-  border-top: 1px solid $grey-light;
+  border-top: 1px solid color_variables.$grey-light;
 }
 
 .has-border-bottom-light {
   border-radius: 0;
-  border-bottom: 1px solid $grey-light;
+  border-bottom: 1px solid color_variables.$grey-light;
 }
 
 .has-error-border,
@@ -46,22 +48,22 @@ select.has-error-border,
 .ttl-picker-form-field-error input,
 .string-list-form-field-error .field:first-of-type textarea,
 .hds-form-checkbox.has-error-border {
-  border: 1px solid $red-500;
+  border: 1px solid color_variables.$red-500;
 }
 
 .error-border-child-inputs input,
 .error-border-child-inputs textarea {
-  border: 1px solid $red-500;
+  border: 1px solid color_variables.$red-500;
 }
 
 // specifically for the SearchSelect dropdown.
 .dropdown-has-error-border > div.ember-basic-dropdown-trigger {
-  border: 1px solid $red-500;
+  border: 1px solid color_variables.$red-500;
 }
 
 // text color
 .text-grey-lightest {
-  color: $grey-lightest;
+  color: color_variables.$grey-lightest;
 }
 
 .has-text-grey-light {
@@ -73,23 +75,23 @@ select.has-error-border,
 }
 
 .has-text-grey-dark {
-  color: $ui-gray-700 !important;
+  color: color_variables.$ui-gray-700 !important;
 }
 
 .has-text-white {
-  color: $white !important;
+  color: color_variables.$white !important;
 }
 
 .has-text-black {
-  color: $black !important;
+  color: color_variables.$black !important;
 }
 
 .has-text-info {
-  color: $blue-500 !important;
+  color: color_variables.$blue-500 !important;
 }
 // same without the !important
 .has-text-primary {
-  color: $blue-500;
+  color: color_variables.$blue-500;
 }
 
 .has-text-success {
@@ -97,13 +99,13 @@ select.has-error-border,
 }
 
 .has-text-highlight {
-  color: $yellow-500;
+  color: color_variables.$yellow-500;
 }
 
 .has-text-danger {
-  color: $red-500 !important;
+  color: color_variables.$red-500 !important;
 }
 
 .has-text-primary {
-  color: $blue;
+  color: color_variables.$blue;
 }
diff --git a/ui/app/styles/helper-classes/flexbox-and-grid.scss b/ui/app/styles/helper-classes/flexbox-and-grid.scss
index 5bcf6a21ef..b67c5b2388 100644
--- a/ui/app/styles/helper-classes/flexbox-and-grid.scss
+++ b/ui/app/styles/helper-classes/flexbox-and-grid.scss
@@ -1,3 +1,6 @@
+@use '../utils/mixins';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -23,11 +26,11 @@
   }
 
   &.row-gap-8 {
-    row-gap: $spacing-8;
+    row-gap: size_variables.$spacing-8;
   }
 
   &.column-gap-16 {
-    column-gap: $spacing-16;
+    column-gap: size_variables.$spacing-16;
   }
 }
 
@@ -47,15 +50,15 @@
 }
 
 .gap-16 {
-  gap: $spacing-16;
+  gap: size_variables.$spacing-16;
 }
 
 .gap-24 {
-  gap: $spacing-24;
+  gap: size_variables.$spacing-24;
 }
 
 .gap-36 {
-  gap: $spacing-36;
+  gap: size_variables.$spacing-36;
 }
 
 // Alignment of the items
@@ -96,7 +99,7 @@
   justify-content: flex-start;
 
   &.has-gap {
-    gap: $spacing-16;
+    gap: size_variables.$spacing-16;
   }
 }
 
@@ -144,7 +147,7 @@
   }
 }
 
-@include until($mobile) {
+@include mixins.until(size_variables.$mobile) {
   .is-flex-row {
     flex-flow: column wrap;
   }
@@ -158,7 +161,7 @@
 .grid-2-columns {
   grid-template-columns: 2fr 2fr;
 
-  @include until($mobile) {
+  @include mixins.until(size_variables.$mobile) {
     grid-template-columns: 1fr;
   }
 }
diff --git a/ui/app/styles/helper-classes/general.scss b/ui/app/styles/helper-classes/general.scss
index c7663eecb3..0cf5ddfa94 100644
--- a/ui/app/styles/helper-classes/general.scss
+++ b/ui/app/styles/helper-classes/general.scss
@@ -1,3 +1,6 @@
+@use '../utils/color_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -7,7 +10,9 @@
 
 // box-shadow helpers
 .has-only-top-shadow {
-  box-shadow: 0 -1px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
+  box-shadow:
+    0 -1px 0 -1px color_variables.$grey-light,
+    0 -2px 0 -1px color_variables.$grey-light;
 }
 
 .is-shadowless {
@@ -15,17 +20,19 @@
 }
 
 .is-sideless {
-  box-shadow: 0 2px 0 -1px $grey-light, 0 -2px 0 -1px $grey-light;
+  box-shadow:
+    0 2px 0 -1px color_variables.$grey-light,
+    0 -2px 0 -1px color_variables.$grey-light;
 }
 
 // this helper needs to go after is-sideless as they are often used together and is-bottomless needs to override is-sideless (no this is not ideal).
 .is-bottomless {
-  box-shadow: 0 -1px 0 0 $grey-light;
+  box-shadow: 0 -1px 0 0 color_variables.$grey-light;
 }
 
 // border helpers
 .has-default-border {
-  border: 1px solid $grey !important;
+  border: 1px solid color_variables.$grey !important;
 }
 
 .is-borderless {
@@ -47,7 +54,7 @@
 
 // other
 .has-background-transition {
-  transition: background-color ease-out $speed;
+  transition: background-color ease-out size_variables.$speed;
 }
 
 .has-current-color-fill {
@@ -59,14 +66,14 @@
 
 // large grouped css blocks
 .is-hint {
-  color: $grey;
-  font-size: $size-8;
-  padding: $spacing-12 0;
+  color: color_variables.$grey;
+  font-size: size_variables.$size-8;
+  padding: size_variables.$spacing-12 0;
 }
 
 .is-optional {
-  color: $grey;
-  font-size: $size-8;
+  color: color_variables.$grey;
+  font-size: size_variables.$size-8;
   text-transform: lowercase;
 }
 
@@ -119,7 +126,7 @@
 
 // border-radius
 .border-radius-4 {
-  border-radius: $radius-large;
+  border-radius: size_variables.$radius-large;
 }
 
 // border-spacing
diff --git a/ui/app/styles/helper-classes/layout.scss b/ui/app/styles/helper-classes/layout.scss
index 25b307fecd..1cc0d30a61 100644
--- a/ui/app/styles/helper-classes/layout.scss
+++ b/ui/app/styles/helper-classes/layout.scss
@@ -1,3 +1,5 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -42,7 +44,7 @@
 }
 
 .top-xxs {
-  top: $spacing-4;
+  top: size_variables.$spacing-4;
 }
 
 // visibility
@@ -81,7 +83,7 @@
 }
 
 .is-medium-width {
-  width: calc($desktop / 2.5);
+  width: calc(size_variables.$desktop / 2.5);
 }
 
 .is-medium-height {
@@ -89,7 +91,7 @@
 }
 
 .is-calc-large-height {
-  height: calc($desktop * 0.66);
+  height: calc(size_variables.$desktop * 0.66);
 }
 
 // float
diff --git a/ui/app/styles/helper-classes/spacing.scss b/ui/app/styles/helper-classes/spacing.scss
index e8502205a7..250b649e3f 100644
--- a/ui/app/styles/helper-classes/spacing.scss
+++ b/ui/app/styles/helper-classes/spacing.scss
@@ -1,3 +1,5 @@
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -14,85 +16,85 @@
 }
 
 .has-short-padding {
-  padding: $spacing-4 $spacing-18;
+  padding: size_variables.$spacing-4 size_variables.$spacing-18;
 }
 
 .has-tall-padding {
-  padding: $spacing-36;
+  padding: size_variables.$spacing-36;
 }
 
 .has-side-padding-8 {
-  padding-left: $spacing-8;
-  padding-right: $spacing-8;
+  padding-left: size_variables.$spacing-8;
+  padding-right: size_variables.$spacing-8;
 }
 
 .has-side-padding-s {
-  padding-left: $spacing-12;
-  padding-right: $spacing-12;
+  padding-left: size_variables.$spacing-12;
+  padding-right: size_variables.$spacing-12;
 }
 
 .has-padding-s {
-  padding: $spacing-12;
+  padding: size_variables.$spacing-12;
 }
 
 .has-padding-xxs {
-  padding: $spacing-4;
+  padding: size_variables.$spacing-4;
 }
 
 .has-padding-m {
-  padding: $spacing-16;
+  padding: size_variables.$spacing-16;
 }
 
 .has-padding-l {
-  padding: $spacing-24;
+  padding: size_variables.$spacing-24;
 }
 
 .has-bottom-padding-s {
-  padding-bottom: $spacing-12;
+  padding-bottom: size_variables.$spacing-12;
 }
 
 .has-bottom-padding-m {
-  padding-bottom: $spacing-16;
+  padding-bottom: size_variables.$spacing-16;
 }
 
 .has-bottom-padding-l {
-  padding-bottom: $spacing-24;
+  padding-bottom: size_variables.$spacing-24;
 }
 
 .has-top-padding-xs {
-  padding-top: $spacing-8;
+  padding-top: size_variables.$spacing-8;
 }
 
 .top-padding-4 {
-  padding-top: $spacing-4;
+  padding-top: size_variables.$spacing-4;
 }
 
 .has-top-padding-s {
-  padding-top: $spacing-12;
+  padding-top: size_variables.$spacing-12;
 }
 
 .has-top-padding-m {
-  padding-top: $spacing-16;
+  padding-top: size_variables.$spacing-16;
 }
 
 .has-top-padding-l {
-  padding-top: $spacing-24;
+  padding-top: size_variables.$spacing-24;
 }
 
 .has-left-padding-xs {
-  padding-left: $spacing-8;
+  padding-left: size_variables.$spacing-8;
 }
 
 .has-left-padding-s {
-  padding-left: $spacing-12;
+  padding-left: size_variables.$spacing-12;
 }
 
 .has-left-padding-l {
-  padding-left: $spacing-24;
+  padding-left: size_variables.$spacing-24;
 }
 
 .has-top-padding-xxl {
-  padding-top: $spacing-48;
+  padding-top: size_variables.$spacing-48;
 }
 
 // All Margin helpers
@@ -102,135 +104,135 @@
 
 // spacing-18 is between medium + large
 .has-top-bottom-margin {
-  margin: $spacing-18 0rem;
+  margin: size_variables.$spacing-18 0rem;
 }
 
 .has-top-bottom-margin-xxs {
-  margin: $spacing-4 0;
+  margin: size_variables.$spacing-4 0;
 }
 
 // moving towards numerical class names (i.e. -12) and away from s/m/l etc.
 .has-top-bottom-margin-12 {
-  margin: $spacing-12 0;
+  margin: size_variables.$spacing-12 0;
 }
 
 .has-top-margin-negative-m {
-  margin-top: -$spacing-16;
+  margin-top: -(size_variables.$spacing-16);
 }
 
 .has-top-bottom-margin-negative-m {
-  margin-top: -$spacing-16;
-  margin-bottom: -$spacing-16;
+  margin-top: -(size_variables.$spacing-16);
+  margin-bottom: -(size_variables.$spacing-16);
 }
 
 .has-top-margin-negative-xxl {
-  margin-top: -$spacing-48;
+  margin-top: -(size_variables.$spacing-48);
 }
 
 .has-left-margin-xxs {
-  margin-left: $spacing-4;
+  margin-left: size_variables.$spacing-4;
 }
 
 .has-bottom-margin-xxs {
-  margin-bottom: $spacing-4 !important;
+  margin-bottom: size_variables.$spacing-4 !important;
 }
 
 .has-bottom-margin-xs {
-  margin-bottom: $spacing-8 !important;
+  margin-bottom: size_variables.$spacing-8 !important;
 }
 
 .has-bottom-margin-s {
-  margin-bottom: $spacing-12;
+  margin-bottom: size_variables.$spacing-12;
 }
 
 .has-bottom-margin-m {
-  margin-bottom: $spacing-16;
+  margin-bottom: size_variables.$spacing-16;
 }
 
 .has-bottom-margin-l {
-  margin-bottom: $spacing-24;
+  margin-bottom: size_variables.$spacing-24;
 }
 
 .has-bottom-margin-xl {
-  margin-bottom: $spacing-36;
+  margin-bottom: size_variables.$spacing-36;
 }
 
 .has-bottom-margin-xxl {
-  margin-bottom: $spacing-48;
+  margin-bottom: size_variables.$spacing-48;
 }
 
 .has-top-margin-xxs {
-  margin-top: $spacing-4;
+  margin-top: size_variables.$spacing-4;
 }
 
 .has-top-margin-s {
-  margin-top: $spacing-12;
+  margin-top: size_variables.$spacing-12;
 }
 
 .has-top-margin-xs {
-  margin-top: $spacing-8;
+  margin-top: size_variables.$spacing-8;
 }
 
 .has-top-margin-m {
-  margin-top: $spacing-16;
+  margin-top: size_variables.$spacing-16;
 }
 
 .has-top-margin-l {
-  margin-top: $spacing-24;
+  margin-top: size_variables.$spacing-24;
 }
 
 .has-top-margin-xl {
-  margin-top: $spacing-36;
+  margin-top: size_variables.$spacing-36;
 }
 
 .has-top-margin-xxl {
-  margin-top: $spacing-48;
+  margin-top: size_variables.$spacing-48;
 }
 
 .has-top-margin-xxxl {
-  margin-top: $spacing-64;
+  margin-top: size_variables.$spacing-64;
 }
 
 .has-top-margin-negative-s {
-  margin-top: (-1 * $spacing-12);
+  margin-top: (-1 * size_variables.$spacing-12);
 }
 
 .has-left-margin-xxs {
-  margin-left: $spacing-4;
+  margin-left: size_variables.$spacing-4;
 }
 
 .has-left-margin-xs {
-  margin-left: $spacing-8;
+  margin-left: size_variables.$spacing-8;
 }
 
 .has-left-margin-s {
-  margin-left: $spacing-12;
+  margin-left: size_variables.$spacing-12;
 }
 
 .has-left-margin-m {
-  margin-left: $spacing-16;
+  margin-left: size_variables.$spacing-16;
 }
 
 .has-left-margin-l {
-  margin-left: $spacing-24;
+  margin-left: size_variables.$spacing-24;
 }
 
 .has-left-margin-xl {
-  margin-left: $spacing-36;
+  margin-left: size_variables.$spacing-36;
 }
 
 .has-right-margin-4 {
-  margin-right: $spacing-4;
+  margin-right: size_variables.$spacing-4;
 }
 
 .has-right-margin-8 {
-  margin-right: $spacing-8;
+  margin-right: size_variables.$spacing-8;
 }
 
 .has-right-margin-m {
-  margin-right: $spacing-16;
+  margin-right: size_variables.$spacing-16;
 }
 
 .has-right-margin-l {
-  margin-right: $spacing-24;
+  margin-right: size_variables.$spacing-24;
 }
diff --git a/ui/app/styles/helper-classes/typography.scss b/ui/app/styles/helper-classes/typography.scss
index 3a8f050641..f7558bc3f2 100644
--- a/ui/app/styles/helper-classes/typography.scss
+++ b/ui/app/styles/helper-classes/typography.scss
@@ -1,3 +1,6 @@
+@use '../utils/font_variables';
+@use '../utils/size_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,45 +11,45 @@
 
 // font size helpers
 .is-size-4 {
-  font-size: $size-4 !important;
+  font-size: size_variables.$size-4 !important;
 }
 
 .is-size-5 {
-  font-size: $size-5 !important;
+  font-size: size_variables.$size-5 !important;
 }
 
 .is-size-6 {
-  font-size: $size-6 !important;
+  font-size: size_variables.$size-6 !important;
 }
 
 .is-size-7 {
-  font-size: $size-7 !important;
+  font-size: size_variables.$size-7 !important;
 }
 
 .is-size-8 {
-  font-size: $size-8 !important;
+  font-size: size_variables.$size-8 !important;
 }
 
 .is-size-9 {
-  font-size: $size-9 !important;
+  font-size: size_variables.$size-9 !important;
 }
 
 // Font weight
 .has-font-weight-normal {
-  font-weight: $font-weight-normal;
+  font-weight: font_variables.$font-weight-normal;
 }
 
 .has-text-weight-semibold {
-  font-weight: $font-weight-semibold !important;
+  font-weight: font_variables.$font-weight-semibold !important;
 }
 
 .has-text-weight-bold {
-  font-weight: $font-weight-bold !important;
+  font-weight: font_variables.$font-weight-bold !important;
 }
 
 // Font family
 .is-font-mono {
-  font-family: $family-monospace;
+  font-family: font_variables.$family-monospace;
 }
 
 .masked-font {
@@ -93,20 +96,20 @@
 
 // Text color or styling
 .is-help {
-  font-size: $size-8;
-  margin-top: $size-11;
+  font-size: size_variables.$size-8;
+  margin-top: size_variables.$size-11;
 }
 
 .help {
   display: block;
   font-size: 0.85714rem;
-  margin-top: $size-11;
+  margin-top: size_variables.$size-11;
 }
 
 .sub-text {
   color: var(--token-color-foreground-faint);
-  margin-bottom: $size-11;
-  font-size: $size-8;
+  margin-bottom: size_variables.$size-11;
+  font-size: size_variables.$size-8;
 
   strong {
     color: inherit;
diff --git a/ui/app/styles/utils/_box-shadow_variables.scss b/ui/app/styles/utils/_box-shadow_variables.scss
index 3ffa596688..06deb7c852 100644
--- a/ui/app/styles/utils/_box-shadow_variables.scss
+++ b/ui/app/styles/utils/_box-shadow_variables.scss
@@ -1,3 +1,5 @@
+@use 'color_variables';
+
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -6,19 +8,27 @@
 // TODO: lots of inconsistent variation on box-shadow usage. Fix.
 
 // box
-$box-shadow: 0 0 0 1px rgba($black, 0.1);
-$box-shadow-low: 0 5px 1px -2px rgba($black, 0.12), 0 3px 2px -1px rgba($black, 0);
-$box-shadow-middle: 0 8px 4px -4px rgba($black, 0.1), 0 6px 8px -2px rgba($black, 0.05);
-$box-shadow-high: 0 12px 5px -7px rgba($black, 0.08), 0 11px 10px -3px rgba($black, 0.1);
-$box-shadow-highest: 0 16px 6px -10px rgba($black, 0.06), 0 16px 16px -4px rgba($black, 0.2);
+$box-shadow: 0 0 0 1px rgba(color_variables.$black, 0.1);
+$box-shadow-low:
+  0 5px 1px -2px rgba(color_variables.$black, 0.12),
+  0 3px 2px -1px rgba(color_variables.$black, 0);
+$box-shadow-middle:
+  0 8px 4px -4px rgba(color_variables.$black, 0.1),
+  0 6px 8px -2px rgba(color_variables.$black, 0.05);
+$box-shadow-high:
+  0 12px 5px -7px rgba(color_variables.$black, 0.08),
+  0 11px 10px -3px rgba(color_variables.$black, 0.1);
+$box-shadow-highest:
+  0 16px 6px -10px rgba(color_variables.$black, 0.06),
+  0 16px 16px -4px rgba(color_variables.$black, 0.2);
 
 // box-link
-$box-link-shadow: 0 0 0 1px $ui-gray-200;
-$box-link-hover-shadow: 0 0 0 1px $ui-gray-300;
+$box-link-shadow: 0 0 0 1px color_variables.$ui-gray-200;
+$box-link-hover-shadow: 0 0 0 1px color_variables.$ui-gray-300;
 
 // border
-$base-border: 1px solid $ui-gray-300;
-$light-border: 1px solid $ui-gray-200;
+$base-border: 1px solid color_variables.$ui-gray-300;
+$light-border: 1px solid color_variables.$ui-gray-200;
 
 // button specific
-$button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
+$button-box-shadow-standard: 0 3px 1px 0 rgba(color_variables.$black, 0.12);
diff --git a/ui/app/styles/utils/mixins.scss b/ui/app/styles/utils/mixins.scss
index 6402219487..8ae982362b 100644
--- a/ui/app/styles/utils/mixins.scss
+++ b/ui/app/styles/utils/mixins.scss
@@ -1,3 +1,4 @@
+@use 'sass:math';
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -43,9 +44,9 @@
   &:before {
     border-color: rgba($border-color, 0);
     border-bottom-color: $border-color;
-    border-width: $size + round(1.41421356 * $border-width);
+    border-width: $size + math.round(1.41421356 * $border-width);
     left: calc(#{$left} + #{$left-offset});
-    margin-left: -($size + round(1.41421356 * $border-width));
+    margin-left: -($size + math.round(1.41421356 * $border-width));
   }
   &:before,
   &:after {
diff --git a/ui/ember-cli-build.js b/ui/ember-cli-build.js
index d54d67b243..6aa8780568 100644
--- a/ui/ember-cli-build.js
+++ b/ui/ember-cli-build.js
@@ -47,10 +47,13 @@ const appConfig = {
   sassOptions: {
     sourceMap: false,
     onlyIncluded: true,
+    quietDeps: true, // silences deprecation warnings from dependencies
     precision: 4,
     includePaths: [
       './node_modules/@hashicorp/design-system-components/dist/styles',
       './node_modules/@hashicorp/design-system-tokens/dist/products/css',
+      './node_modules/ember-basic-dropdown/',
+      './node_modules/ember-power-select/',
     ],
   },
   minifyCSS: {