UI: Cleanup scss color variables (#31386)

* update greys to use hds tokens

* update blue vars

* remove unused color vars

* replace remaining colors, add hex codes in commnets

* update kv rgp color

* remove color_variables file and use hds tokens directly

ui/app/styles/components/autocomplete-input.scss

@@ -1,13 +1,11 @@
-@use '../utils/color_variables';
-
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
  */
 
 .autocomplete-input {
-  background: color_variables.$white !important;
+  background: hsl(0, 0%, 100%) !important;
-  border: 1px solid color_variables.$grey-light;
+  border: 1px solid var(--token-color-palette-neutral-300);
   box-sizing: border-box;
   border-radius: 3px;
   width: 99%;
@@ -19,7 +17,7 @@
 .autocomplete-input-option {
   padding: 12px;
   &:hover {
-    background-color: color_variables.$grey-lightest;
+    background-color: var(--token-color-palette-neutral-50);
     cursor: pointer;
   }
 }

ui/app/styles/components/box-label.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 @use '../core/box.scss';
 @use '../core/columns.scss';
@@ -18,7 +17,7 @@ label.box-label {
   @extend .box;
   @extend .is-centered;
 
-  border-color: color_variables.$grey-light;
+  border-color: var(--token-color-palette-neutral-300);
   border-radius: 3px;
   box-shadow: box-shadow_variables.$box-link-shadow;
   text-decoration: none;
@@ -37,12 +36,12 @@ label.box-label {
     box-shadow: box-shadow_variables.$box-link-hover-shadow, box-shadow_variables.$box-shadow-middle;
 
     .icon {
-      color: color_variables.$grey;
+      color: var(--token-color-palette-neutral-400);
     }
   }
 
   .icon {
-    color: color_variables.$grey-light;
+    color: var(--token-color-palette-neutral-300);
   }
 
   input[type='radio'] {
@@ -50,7 +49,7 @@ label.box-label {
   }
 
   input[type='radio'] + label {
-    border: 1px solid color_variables.$grey-light;
+    border: 1px solid var(--token-color-palette-neutral-300);
     border-radius: 50%;
     cursor: pointer;
     display: block;
@@ -60,16 +59,16 @@ label.box-label {
   }
 
   input[type='radio']:checked + label {
-    background: color_variables.$blue;
+    background: var(--token-color-palette-blue-200);
-    border: 1px solid color_variables.$blue;
+    border: 1px solid var(--token-color-palette-blue-200);
-    box-shadow: inset 0 0 0 0.15rem color_variables.$white;
+    box-shadow: inset 0 0 0 0.15rem hsl(0, 0%, 100%);
   }
 }
 
 .box-label-header {
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
 
   .is-selected & {
-    color: color_variables.$grey-darkest;
+    color: var(--token-color-palette-neutral-600);
   }
 }

ui/app/styles/components/calendar-widget.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -41,7 +40,7 @@ $dark-gray: #535f73;
 
 .border-col {
   grid-area: border-col;
-  background-color: color_variables.$ui-gray-200;
+  background-color: var(--token-color-palette-neutral-200);
 }
 
 .calendar-widget-container {

ui/app/styles/components/chart-container.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -31,24 +30,7 @@
   grid-column-start: 1;
   grid-column-end: span col4-end;
   grid-row-start: 1;
-  box-shadow: inset 0 -1px 0 color_variables.$ui-gray-200;
+  box-shadow: inset 0 -1px 0 var(--token-color-palette-neutral-200);
-}
-
-.has-header-link {
-  display: grid;
-  grid-template-columns: 4fr 1fr;
-
-  .header-right {
-    text-align: right;
-    > button {
-      &:hover,
-      &:focus {
-        background-color: transparent;
-        background-color: color.adjust(color_variables.$ui-gray-050, $lightness: -5%);
-        border-color: color.adjust(color_variables.$ui-gray-300, $lightness: -5%);
-      }
-    }
-  }
 }
 
 .chart-container-wide {
@@ -67,40 +49,6 @@
   }
 }
 
-.chart-container-left {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 2;
-  grid-row-end: 5;
-  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;
-  }
-  > p {
-    padding-left: 18px;
-  }
-}
-
-.chart-container-right {
-  grid-column-start: 4;
-  grid-column-end: 8;
-  grid-row-start: 2;
-  grid-row-end: 5;
-  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;
-  }
-  > p {
-    padding-left: 18px;
-  }
-}
-
 .chart-empty-state {
   place-self: center stretch;
   grid-row-end: span 2;
@@ -159,14 +107,14 @@ h2.chart-title {
 }
 
 p.chart-description {
-  color: color_variables.$ui-gray-700;
+  color: var(--token-color-palette-neutral-500);
   font-size: 14px;
   line-height: 18px;
   margin-bottom: size_variables.$spacing-8;
 }
 
 p.chart-subtext {
-  color: color_variables.$ui-gray-500;
+  color: var(--token-color-palette-neutral-400);
   font-size: size_variables.$size-8;
   line-height: 16px;
   margin-top: size_variables.$spacing-8;

ui/app/styles/components/console-ui-panel.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -29,7 +28,7 @@ $console-close-height: 35px;
 }
 
 .console-ui-panel-content {
-  color: color_variables.$white;
+  color: hsl(0, 0%, 100%);
   display: flex;
   flex-direction: column;
   font-size: size_variables.$size-7;
@@ -58,11 +57,11 @@ $console-close-height: 35px;
   display: flex;
 
   input {
-    background-color: rgba(color_variables.$black, 0.5);
+    background-color: rgba(hsl(0, 0%, 4%), 0.5);
     border: 1px solid var(--token-color-palette-neutral-500);
     border-radius: var(--token-side-nav-body-list-item-border-radius);
-    caret-color: color_variables.$white;
+    caret-color: hsl(0, 0%, 100%);
-    color: color_variables.$white;
+    color: hsl(0, 0%, 100%);
     flex: 1 1 auto;
     font-family: font_variables.$family-monospace;
     font-size: size_variables.$size-6;
@@ -102,13 +101,9 @@ $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: 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: color.adjust(#008a22, $lightness: 20%);
   }
 }

ui/app/styles/components/control-group.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 @use '../core/box.scss';
 
@@ -13,10 +12,10 @@
   @extend .box;
   box-shadow:
     box-shadow_variables.$box-shadow-middle,
-    0 0 1px color_variables.$grey-dark;
+    0 0 1px var(--token-color-palette-neutral-500);
 }
 .control-group-success.is-editor {
-  background: color_variables.$grey-lightest;
+  background: var(--token-color-palette-neutral-50);
 }
 
 .control-group a {
@@ -25,8 +24,8 @@
 .control-group-header {
   box-shadow: 0 0 1px currentColor;
   padding: size_variables.$spacing-10 size_variables.$spacing-14;
-  background: color_variables.$grey-lightest;
+  background: var(--token-color-palette-neutral-50);
-  color: color_variables.$grey-dark;
+  color: var(--token-color-palette-neutral-500);
   position: relative;
   strong {
     color: currentColor;
@@ -34,8 +33,8 @@
 }
 
 .control-group-header.is-success {
-  color: color_variables.$green-dark;
+  color: var(--token-color-palette-green-300);
-  background: color_variables.$green-lightest;
+  background: var(--token-color-palette-green-50);
 }
 
 .control-group .authorizations {

ui/app/styles/components/doc-link.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 
 /**
@@ -7,7 +6,7 @@
  */
 
 .doc-link {
-  color: color_variables.$blue;
+  color: var(--token-color-palette-blue-200);
   font-weight: font_variables.$font-weight-semibold;
   &:hover {
     text-decoration: underline !important;

ui/app/styles/components/empty-state-component.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -14,7 +13,7 @@
   display: flex;
   justify-content: center;
   padding: size_variables.$spacing-48 size_variables.$spacing-12;
-  box-shadow: 0 -2px 0 -1px color_variables.$ui-gray-300;
+  box-shadow: 0 -2px 0 -1px var(--token-color-palette-neutral-300);
 }
 
 .empty-state-transparent {
@@ -32,7 +31,7 @@
 }
 
 .empty-state-title {
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   font-size: size_variables.$size-4;
   font-weight: font_variables.$font-weight-semibold;
   line-height: 1.2;

ui/app/styles/components/env-banner.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -11,11 +10,11 @@
   border-radius: 3rem;
   background: linear-gradient(
     135deg,
-    color_variables.$blue,
+    var(--token-color-palette-blue-200),
     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: color_variables.$white;
+  color: hsl(0, 0%, 100%);
 
   .hs-icon {
     margin: 0;

ui/app/styles/components/form-section.scss

@@ -1,5 +1,3 @@
-@use '../utils/color_variables';
-
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -7,7 +5,7 @@
 
 .form-section {
   padding: 1.75rem 0;
-  box-shadow: 0 -1px 0 0 rgba(color_variables.$black, 0.1);
+  box-shadow: 0 -1px 0 0 rgba(hsl(0, 0%, 4%), 0.1);
 }
 
 .field:first-child .form-section,
@@ -21,6 +19,6 @@
   background-color: black;
 
   pre {
-    color: color_variables.$ui-gray-010;
+    color: var(--token-color-palette-neutral-50);
   }
 }

ui/app/styles/components/icon.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -20,7 +19,7 @@
 }
 
 .icon-blue {
-  color: color_variables.$blue;
+  color: var(--token-color-palette-blue-200);
 }
 
 .hds-icon {

ui/app/styles/components/info-table-row.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/mixins';
 @use '../utils/size_variables';
@@ -9,7 +8,7 @@
  */
 
 .info-table-row {
-  box-shadow: 0 1px 0 color_variables.$grey-light;
+  box-shadow: 0 1px 0 var(--token-color-palette-neutral-300);
   margin: 0;
 
   &.has-no-shadow {
@@ -22,8 +21,8 @@
 
   &.thead {
     box-shadow:
-      0 1px 0 color_variables.$grey-light,
+      0 1px 0 var(--token-color-palette-neutral-300),
-      0 -1px 0 color_variables.$grey-light;
+      0 -1px 0 var(--token-color-palette-neutral-300);
     margin: 0;
     padding: 0 size_variables.$spacing-14 0 0;
 
@@ -59,11 +58,11 @@
   }
 
   .icon-true {
-    color: color_variables.$green-500;
+    color: var(--token-color-palette-green-200);
   }
 
   .icon-false {
-    color: color_variables.$ui-gray-300;
+    color: var(--token-color-palette-neutral-300);
   }
 
   a {
@@ -96,7 +95,7 @@
 .info-table-row-header {
   margin: 0;
   font-size: size_variables.$size-8;
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   font-weight: font_variables.$font-weight-semibold;
 
   @include mixins.until(size_variables.$mobile) {

ui/app/styles/components/list-item-row.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 @use '../core/box.scss';
@@ -27,7 +26,7 @@
     margin-left: auto;
     font-size: size_variables.$size-8;
     font-weight: font_variables.$font-weight-semibold;
-    color: color_variables.$ui-gray-500;
+    color: var(--token-color-palette-neutral-400);
   }
 
   .center-display {
@@ -58,8 +57,8 @@ a.list-item-row,
     padding-right: size_variables.$spacing-10;
     position: relative;
     box-shadow:
-      0 2px 0 -1px color_variables.$grey-light,
+      0 2px 0 -1px var(--token-color-palette-neutral-300),
-      0 -2px 0 -1px color_variables.$grey-light,
+      0 -2px 0 -1px var(--token-color-palette-neutral-300),
       box-shadow_variables.$box-link-hover-shadow,
       box-shadow_variables.$box-shadow-middle;
   }

ui/app/styles/components/masked-input.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -56,7 +55,7 @@ pre.masked-font {
 .button.masked-input-toggle {
   min-width: size_variables.$spacing-36;
   border-left: 0;
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   box-shadow: 0 3px 1px 0px rgba(10, 10, 10, 0.12);
 }
 
@@ -72,7 +71,7 @@ pre.masked-font {
     min-width: size_variables.$spacing-24;
     border: 0;
     box-shadow: none;
-    color: color_variables.$grey-light;
+    color: var(--token-color-palette-neutral-300);
     padding-left: 0;
     padding-right: 0;
 
@@ -81,7 +80,7 @@ pre.masked-font {
     &:focus,
     &:hover,
     &:focus:not(:active) {
-      color: color_variables.$blue;
+      color: var(--token-color-palette-blue-200);
       border: 0;
       box-shadow: none;
     }
@@ -93,5 +92,5 @@ pre.masked-font {
 }
 
 .masked-input .input:focus + .masked-input-toggle {
-  background: rgba(color_variables.$white, 0.95);
+  background: rgba(hsl(0, 0%, 100%), 0.95);
 }

ui/app/styles/components/namespace-reminder.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -8,12 +7,12 @@
  */
 
 .namespace-reminder {
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   margin: 0 0 size_variables.$spacing-14 0;
 }
 
 .console-reminder p.namespace-reminder {
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   font-family: font_variables.$family-monospace;
   font-size: size_variables.$size-8;
   margin: size_variables.$spacing-4 0 0;

ui/app/styles/components/popup-menu.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -58,7 +57,7 @@
   // so they match other dropdown elements until we replace popup-menu with Hds::Dropdown
   .hds-confirm-action-critical {
     &:hover {
-      background-color: color_variables.$ui-gray-050;
+      background-color: var(--token-color-palette-neutral-50);
     }
     div,
     span {
@@ -72,26 +71,26 @@
   .ember-power-select-option,
   .ember-power-select-option[aria-current='true'],
   a {
-    background-color: color_variables.$white;
+    background-color: hsl(0, 0%, 100%);
-    color: color_variables.$grey-darkest;
+    color: var(--token-color-palette-neutral-600);
 
     &:hover {
-      background-color: color_variables.$ui-gray-050;
+      background-color: var(--token-color-palette-neutral-50);
-      color: color_variables.$ui-gray-900;
+      color: var(--token-color-palette-neutral-600);
     }
 
     &.active,
     &.is-active {
       background-color: transparent;
-      color: color_variables.$blue;
+      color: var(--token-color-palette-blue-200);
     }
 
     &.is-destroy {
-      color: color_variables.$red;
+      color: var(--token-color-palette-red-200);
 
       &:hover {
-        background-color: color_variables.$red;
+        background-color: var(--token-color-palette-red-200);
-        color: color_variables.$white;
+        color: hsl(0, 0%, 100%);
       }
     }
 
@@ -110,7 +109,7 @@
   }
 
   .menu-label {
-    color: color_variables.$grey-dark;
+    color: var(--token-color-palette-neutral-500);
     font-size: size_variables.$size-9;
     font-weight: font_variables.$font-weight-normal;
     letter-spacing: 0;
@@ -124,7 +123,7 @@
   }
 
   hr {
-    background-color: color_variables.$ui-gray-200;
+    background-color: var(--token-color-palette-neutral-200);
     margin: 0;
   }
 }

ui/app/styles/components/radial-progress.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -10,11 +9,11 @@
   transform: rotate(-90deg) translateX(-20%);
 }
 .radial-progress circle {
-  stroke: rgba(color_variables.$grey-light, 0.5);
+  stroke: rgba(var(--token-color-palette-neutral-300), 0.5);
   transition: stroke-dashoffset size_variables.$speed ease-in;
   will-change: stroke-dashoffset;
   stroke-linecap: round;
 }
 .radial-progress circle.progress-fill {
-  stroke: color_variables.$green;
+  stroke: var(--token-color-palette-green-200);
 }

ui/app/styles/components/radio-card.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -29,7 +28,7 @@
   }
 
   input[type='radio'] + span.dot {
-    border: 1px solid color_variables.$grey-light;
+    border: 1px solid var(--token-color-palette-neutral-300);
     border-radius: 50%;
     cursor: pointer;
     display: block;
@@ -40,14 +39,14 @@
   }
 
   input[type='radio']:checked + span.dot {
-    background: color_variables.$blue;
+    background: var(--token-color-palette-blue-200);
-    border: 1px solid color_variables.$blue;
+    border: 1px solid var(--token-color-palette-blue-200);
-    box-shadow: inset 0 0 0 0.15rem color_variables.$white;
+    box-shadow: inset 0 0 0 0.15rem hsl(0, 0%, 100%);
   }
   input[type='radio']:focus + span.dot {
     box-shadow:
-      0 0 10px 1px rgba(color_variables.$blue, 0.4),
+      0 0 10px 1px rgba(#1060ff, 0.4),
-      inset 0 0 0 0.15rem color_variables.$white;
+      inset 0 0 0 0.15rem hsl(0, 0%, 100%);
   }
 
   &.is-disabled {
@@ -77,7 +76,7 @@
   padding: size_variables.$spacing-16;
 }
 .radio-card-icon {
-  color: color_variables.$ui-gray-300;
+  color: var(--token-color-palette-neutral-300);
 }
 .radio-card-message {
   margin: size_variables.$spacing-4;
@@ -97,20 +96,20 @@
 .radio-card-radio-row {
   display: flex;
   justify-content: center;
-  background: color_variables.$ui-gray-050;
+  background: var(--token-color-palette-neutral-50);
   padding: size_variables.$spacing-8;
 }
 
 .is-selected {
   &.radio-card {
-    border-color: color_variables.$blue-500;
+    border-color: var(--token-color-palette-blue-200);
-    background: color_variables.$ui-gray-010;
+    background: var(--token-color-palette-neutral-50);
     box-shadow: box-shadow_variables.$box-shadow-middle;
   }
   .radio-card-icon {
-    color: color_variables.$black;
+    color: hsl(0, 0%, 4%);
   }
   .radio-card-radio-row {
-    background: color_variables.$blue-050;
+    background: var(--token-color-palette-blue-50);
   }
 }

ui/app/styles/components/raft-join.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -14,7 +13,7 @@
   padding-bottom: size_variables.$spacing-12;
 }
 .raft-join-unseal {
-  color: color_variables.$orange;
+  color: var(--token-color-palette-amber-200);
   font-size: size_variables.$size-6;
   display: inline-block;
 }

ui/app/styles/components/regex-validator.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -20,10 +19,10 @@
 .regex-group {
   font-family: font_variables.$family-monospace;
   font-size: size_variables.$size-8;
-  color: color_variables.$ui-gray-600;
+  color: var(--token-color-palette-neutral-500);
 }
 .regex-group-position {
-  background-color: color_variables.$ui-gray-200;
+  background-color: var(--token-color-palette-neutral-200);
   border-radius: 3px;
   padding-top: 5px;
   padding-bottom: 4px;

ui/app/styles/components/replication-dashboard.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/mixins';
 @use '../utils/size_variables';
@@ -15,11 +14,11 @@
     line-height: normal;
 
     &:hover {
-      box-shadow: 0 0 0 1px rgba(color_variables.$grey-dark, 0.3);
+      box-shadow: 0 0 0 1px rgba(var(--token-color-palette-neutral-500), 0.3);
     }
 
     .toolbar-link {
-      color: color_variables.$blue-500;
+      color: var(--token-color-palette-blue-200);
     }
   }
 
@@ -130,7 +129,7 @@
   }
   .summary-state {
     padding-bottom: size_variables.$spacing-36;
-    border-bottom: 1px solid rgba(color_variables.$grey-dark, 0.3);
+    border-bottom: 1px solid rgba(var(--token-color-palette-neutral-500), 0.3);
   }
 
   // prevent double lines at the bottom of the dashboard

ui/app/styles/components/search-select.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -48,7 +47,7 @@
   z-index: -1;
 
   &::after {
-    background: color_variables.$white;
+    background: hsl(0, 0%, 100%);
     bottom: size_variables.$spacing-4;
     content: '';
     left: size_variables.$spacing-4 + size_variables.$spacing-24;
@@ -67,7 +66,7 @@
 }
 
 div > .ember-power-select-options {
-  background: color_variables.$white;
+  background: hsl(0, 0%, 100%);
   border: box-shadow_variables.$base-border;
   box-shadow: box-shadow_variables.$box-shadow-middle;
   margin: -4px size_variables.$spacing-8 0;
@@ -81,12 +80,12 @@ div > .ember-power-select-options {
   }
 
   .ember-power-select-option[aria-current='true'] {
-    background-color: color_variables.$ui-gray-050;
+    background-color: var(--token-color-palette-neutral-50);
-    color: color_variables.$ui-gray-900;
+    color: var(--token-color-palette-neutral-600);
   }
 
   .ember-power-select-option--no-matches-message {
-    color: color_variables.$grey;
+    color: var(--token-color-palette-neutral-400);
     font-size: size_variables.$size-8;
     font-weight: font_variables.$font-weight-semibold;
     text-transform: uppercase;
@@ -94,7 +93,7 @@ div > .ember-power-select-options {
     &:hover,
     &:focus {
       background: transparent;
-      color: color_variables.$grey;
+      color: var(--token-color-palette-neutral-400);
     }
   }
 }
@@ -111,12 +110,12 @@ div > .ember-power-select-options {
   }
 
   .control .button {
-    color: color_variables.$grey-light;
+    color: var(--token-color-palette-neutral-300);
     min-width: auto;
 
     &:hover,
     &:focus {
-      color: color_variables.$blue;
+      color: var(--token-color-palette-blue-200);
     }
   }
 }

ui/app/styles/components/shamir-progress.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -13,7 +12,7 @@
     margin-right: size_variables.$spacing-12;
   }
   .progress {
-    box-shadow: 0 0 0 4px color_variables.$ui-gray-050;
+    box-shadow: 0 0 0 4px var(--token-color-palette-neutral-50);
     margin-top: size_variables.$spacing-8;
     min-width: 90px;
   }

ui/app/styles/components/sidebar.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -12,7 +11,7 @@
 
   .popup-menu-content {
     .menu-label {
-      color: color_variables.$black;
+      color: hsl(0, 0%, 4%);
       font-size: 14px;
       font-weight: font_variables.$font-weight-bold;
       text-transform: unset;
@@ -25,6 +24,6 @@
   .confirm-action-message p {
     padding-top: size_variables.$spacing-4;
     font-weight: font_variables.$font-weight-semibold;
-    color: color_variables.$black;
+    color: hsl(0, 0%, 4%);
   }
 }

ui/app/styles/components/splash-page.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/mixins';
 @use '../utils/size_variables';
 
@@ -16,7 +15,7 @@
   }
 
   svg {
-    fill: color_variables.$white;
+    fill: hsl(0, 0%, 100%);
     height: 24px;
     width: 72px;
 

ui/app/styles/components/stat-text.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -24,7 +23,7 @@
     .stat-text {
       font-size: size_variables.$size-8;
       font-weight: font_variables.$font-weight-normal;
-      color: color_variables.$ui-gray-700;
+      color: var(--token-color-palette-neutral-500);
       line-height: inherit;
     }
     .stat-value {
@@ -43,7 +42,7 @@
     .stat-text {
       font-size: size_variables.$size-8;
       font-weight: font_variables.$font-weight-normal;
-      color: color_variables.$ui-gray-700;
+      color: var(--token-color-palette-neutral-500);
       line-height: inherit;
     }
     .stat-value {
@@ -62,7 +61,7 @@
     .stat-text {
       font-size: size_variables.$size-8;
       font-weight: font_variables.$font-weight-normal;
-      color: color_variables.$ui-gray-700;
+      color: var(--token-color-palette-neutral-500);
       line-height: inherit;
     }
     .stat-value {
@@ -81,7 +80,7 @@
     .stat-text {
       font-size: size_variables.$size-8;
       font-weight: font_variables.$font-weight-normal;
-      color: color_variables.$ui-gray-700;
+      color: var(--token-color-palette-neutral-500);
       line-height: inherit;
     }
     .stat-value {
@@ -95,19 +94,19 @@
     .stat-label {
       font-size: size_variables.$size-8;
       font-weight: font_variables.$font-weight-normal;
-      color: color_variables.$ui-gray-500;
+      color: var(--token-color-palette-neutral-400);
       line-height: inherit;
     }
     .stat-text {
       font-size: size_variables.$size-8;
       font-weight: font_variables.$font-weight-normal;
-      color: color_variables.$ui-gray-700;
+      color: var(--token-color-palette-neutral-500);
       line-height: inherit;
     }
     .stat-value {
       font-size: size_variables.$size-8;
       font-weight: font_variables.$font-weight-normal;
-      color: color_variables.$ui-gray-800;
+      color: var(--token-color-palette-neutral-600);
       line-height: inherit;
     }
   }

ui/app/styles/components/tabs-component.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -15,7 +14,7 @@
 
 .tabs {
   align-items: stretch;
-  box-shadow: inset 0 -1px 0 color_variables.$grey-light;
+  box-shadow: inset 0 -1px 0 var(--token-color-palette-neutral-300);
   display: flex;
   justify-content: space-between;
   overflow: hidden;
@@ -34,22 +33,22 @@
         box-shadow: none;
       }
       &.active {
-        border-color: color_variables.$blue;
+        border-color: var(--token-color-palette-blue-200);
-        color: color_variables.$blue;
+        color: var(--token-color-palette-blue-200);
       }
     }
     li {
       // solves for tools -> sub-tabs like "Unwrap data" -> "Data"
       &.is-active {
-        border-bottom: 2px solid color_variables.$blue;
+        border-bottom: 2px solid var(--token-color-palette-blue-200);
-        color: color_variables.$blue;
+        color: var(--token-color-palette-blue-200);
       }
       // solves for tabs on auth mounts & secrets engines
       > a {
         &.active {
-          color: color_variables.$blue;
+          color: var(--token-color-palette-blue-200);
           background-color: transparent;
-          border-bottom: 2px solid color_variables.$blue;
+          border-bottom: 2px solid var(--token-color-palette-blue-200);
         }
       }
     }
@@ -61,8 +60,8 @@
     }
     &.active a,
     &.is-active a {
-      border-color: color_variables.$blue;
+      border-color: var(--token-color-palette-blue-200);
-      color: color_variables.$blue;
+      color: var(--token-color-palette-blue-200);
     }
   }
   // important for auth tabs in active state, otherwise the border-bottom will not show.
@@ -72,7 +71,7 @@
     justify-content: center;
     vertical-align: top;
     border-bottom: 2px solid transparent;
-    color: color_variables.$grey;
+    color: var(--token-color-palette-neutral-400);
     font-weight: font_variables.$font-weight-semibold;
     padding: size_variables.$spacing-14 size_variables.$spacing-12 size_variables.$spacing-12;
     text-decoration: none;
@@ -82,12 +81,12 @@
 
     &:hover,
     &:active {
-      border-color: color_variables.$grey-light;
+      border-color: var(--token-color-palette-neutral-300);
     }
 
     &:hover {
-      background-color: color_variables.$ui-gray-050;
+      background-color: var(--token-color-palette-neutral-50);
-      color: color_variables.$grey-darkest;
+      color: var(--token-color-palette-neutral-600);
     }
   }
 

ui/app/styles/components/tool-tip.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/mixins';
 @use '../utils/size_variables';
 
@@ -16,9 +15,9 @@
 
   .box {
     position: relative;
-    color: color_variables.$white;
+    color: hsl(0, 0%, 100%);
     max-width: 200px;
-    background: color_variables.$black;
+    background: hsl(0, 0%, 4%);
     padding: 0.5rem;
     line-height: 1.4;
     border-radius: size_variables.$radius-large;
@@ -28,7 +27,7 @@
     max-width: fit-content;
   }
 
-  @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, 20px);
+  @include mixins.css-top-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%), 20px);
   &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
     animation: drop-fade-above 0.15s;
   }
@@ -60,25 +59,19 @@
 }
 
 .ember-basic-dropdown-content--below.ember-basic-dropdown-content--left.tool-tip {
-  @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, calc(100% - 20px));
+  @include mixins.css-top-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%), calc(100% - 20px));
 }
 .ember-basic-dropdown-content--below.ember-basic-dropdown-content--right.tool-tip {
-  @include mixins.css-top-arrow(8px, color_variables.$black, 1px, color_variables.$black, calc(100% - 20px));
+  @include mixins.css-top-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%), calc(100% - 20px));
 }
 .ember-basic-dropdown-content--above.tool-tip {
-  @include mixins.css-bottom-arrow(8px, color_variables.$black, 1px, color_variables.$black);
+  @include mixins.css-bottom-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%));
   & {
     margin-top: -8px;
   }
 }
 .ember-basic-dropdown-content--above.ember-basic-dropdown-content--right.tool-tip {
-  @include mixins.css-bottom-arrow(
+  @include mixins.css-bottom-arrow(8px, hsl(0, 0%, 4%), 1px, hsl(0, 0%, 4%), calc(100% - 20px));
-    8px,
-    color_variables.$black,
-    1px,
-    color_variables.$black,
-    calc(100% - 20px)
-  );
 }
 
 .b-checkbox .tool-tip-trigger {

ui/app/styles/components/toolbar.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/mixins';
 @use '../utils/size_variables';
 @use '../core/buttons.scss';
@@ -14,17 +13,17 @@
 }
 
 .toolbar {
-  background-color: color_variables.$ui-gray-010;
+  background-color: var(--token-color-palette-neutral-50);
-  border: 1px solid color_variables.$ui-gray-100;
+  border: 1px solid var(--token-color-palette-neutral-100);
-  border-bottom-color: color_variables.$ui-gray-300;
+  border-bottom-color: var(--token-color-palette-neutral-300);
-  border-top-color: color_variables.$ui-gray-300;
+  border-top-color: var(--token-color-palette-neutral-300);
   position: relative;
 
   &::after {
     background: linear-gradient(
       to right,
-      color_variables.$ui-gray-010,
+      var(--token-color-palette-neutral-50),
-      rgba(color_variables.$ui-gray-010, 0)
+      rgba(var(--token-color-palette-neutral-50), 0)
     );
     bottom: 0;
     content: '';
@@ -43,7 +42,7 @@
 
 .toolbar-label {
   padding: size_variables.$spacing-8;
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
 }
 
 .toolbar-scroller {
@@ -63,7 +62,7 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    background: color_variables.$ui-gray-300;
+    background: var(--token-color-palette-neutral-300);
     border-radius: size_variables.$spacing-4;
   }
 }
@@ -99,13 +98,13 @@
   @extend .is-ghost;
   @extend .has-icon-right;
   border: 0;
-  color: color_variables.$black;
+  color: hsl(0, 0%, 4%);
   transition: background-color size_variables.$speed;
 
   &:hover:not(.disabled) {
-    background-color: color_variables.$ui-gray-100;
+    background-color: var(--token-color-palette-neutral-100);
     border: 0;
-    color: color_variables.$blue;
+    color: var(--token-color-palette-blue-200);
   }
 
   &:active {
@@ -130,12 +129,12 @@
   }
 }
 a.disabled.toolbar-link {
-  color: color_variables.$black;
+  color: hsl(0, 0%, 4%);
-  background-color: color_variables.$white;
+  background-color: hsl(0, 0%, 100%);
   cursor: not-allowed;
   &:hover {
-    background-color: color_variables.$ui-gray-100;
+    background-color: var(--token-color-palette-neutral-100);
-    color: color_variables.$blue;
+    color: var(--token-color-palette-blue-200);
   }
 }
 

ui/app/styles/components/transform-edit.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -8,10 +7,10 @@
  */
 
 .copy-text {
-  background: color_variables.$ui-gray-010;
+  background: var(--token-color-palette-neutral-50);
 
   & > code {
-    color: color_variables.$ui-gray-800;
+    color: var(--token-color-palette-neutral-600);
     padding: 14px;
   }
 }

ui/app/styles/components/transit-card.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -19,7 +18,7 @@
 
 .transit-card {
   border-radius: size_variables.$radius;
-  box-shadow: 0 0 0 1px rgba(color_variables.$grey-light, 0.4);
+  box-shadow: 0 0 0 1px rgba(var(--token-color-palette-neutral-300), 0.4);
   display: grid;
   grid-template-columns: 0.45fr 2fr;
   padding: size_variables.$spacing-16;
@@ -32,20 +31,20 @@
   .transit-action-description {
     font-family: font_variables.$family-sans;
     font-size: size_variables.$size-8;
-    color: color_variables.$grey;
+    color: var(--token-color-palette-neutral-400);
   }
 
   .title {
-    color: color_variables.$grey;
+    color: var(--token-color-palette-neutral-400);
     font-size: size_variables.$size-7;
     margin-bottom: size_variables.$spacing-4;
   }
 
   &:hover {
     box-shadow:
-      0 0 0 1px color_variables.$blue-500,
+      0 0 0 1px var(--token-color-palette-blue-200),
       box-shadow_variables.$box-shadow-middle;
-    background: color_variables.$blue-010;
+    background: var(--token-color-palette-blue-50);
 
     .title {
       color: initial;

ui/app/styles/components/ttl-picker.scss

@@ -1,5 +1,3 @@
-@use '../utils/color_variables';
-
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -16,7 +14,7 @@
 input.has-error,
 input.has-error:focus,
 input.has-error:hover {
-  border-color: color_variables.$red-dark;
+  border-color: var(--token-color-palette-red-300);
 }
 
 .ttl-value-error {

ui/app/styles/core.scss

@@ -4,7 +4,6 @@
  */
 
 // Variables
-@use 'utils/color_variables'; // colors need to come first.
 @use 'utils/box-shadow_variables';
 @use 'utils/font_variables';
 @use 'utils/size_variables';

ui/app/styles/core/box.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -8,10 +7,10 @@
  */
 
 .box {
-  background-color: color_variables.$white;
+  background-color: hsl(0, 0%, 100%);
   border-radius: 0;
-  box-shadow: 0 0 0 1px rgba(color_variables.$grey-dark, 0.3);
+  box-shadow: 0 0 0 1px rgba(var(--token-color-palette-neutral-500), 0.3);
-  color: color_variables.$ui-gray-900;
+  color: var(--token-color-palette-neutral-600);
   display: block;
   padding: size_variables.$spacing-18;
 
@@ -33,11 +32,11 @@
   }
 
   &.no-top-shadow {
-    box-shadow: inset 0 -1px 0 0 rgba(color_variables.$black, 0.1);
+    box-shadow: inset 0 -1px 0 0 rgba(hsl(0, 0%, 4%), 0.1);
   }
 
   &.has-container {
-    box-shadow: 0 4px 4px rgba(color_variables.$black, 0.25);
+    box-shadow: 0 4px 4px rgba(hsl(0, 0%, 4%), 0.25);
     border: box-shadow_variables.$base-border;
     padding: size_variables.$spacing-24;
   }

ui/app/styles/core/buttons.scss

@@ -1,6 +1,5 @@
 @use 'sass:color';
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -11,12 +10,12 @@
 
 .button {
   align-items: center;
-  background-color: color_variables.$grey-lightest;
+  background-color: var(--token-color-palette-neutral-50);
-  border: 1px solid color_variables.$grey-light;
+  border: 1px solid var(--token-color-palette-neutral-300);
   border-radius: size_variables.$radius;
   box-shadow: box-shadow_variables.$box-shadow-low;
   cursor: pointer;
-  color: color_variables.$ui-gray-800;
+  color: var(--token-color-palette-neutral-600);
   display: inline-block;
   font-size: size_variables.$size-8;
   font-weight: font_variables.$font-weight-semibold;
@@ -47,9 +46,9 @@
   &:active,
   &.is-active,
   &:focus {
-    border-color: color.adjust(color_variables.$grey-light, $lightness: -10%);
+    border-color: color.adjust(#c2c5cb, $lightness: -10%);
     box-shadow: box-shadow_variables.$button-box-shadow-standard;
-    color: color.adjust(color_variables.$grey-dark, $lightness: -10%);
+    color: color.adjust(#656a76, $lightness: -10%);
   }
 
   &:focus:not(:active) {
@@ -57,8 +56,8 @@
   }
 
   &:disabled {
-    background-color: color_variables.$white;
+    background-color: hsl(0, 0%, 100%);
-    border-color: color_variables.$ui-gray-050;
+    border-color: var(--token-color-palette-neutral-50);
     box-shadow: none;
     cursor: not-allowed;
     opacity: 0.5;
@@ -72,33 +71,33 @@
   }
 
   &.is-danger {
-    background-color: color_variables.$red-500;
+    background-color: var(--token-color-palette-red-200);
-    border-color: color.adjust(color_variables.$red-500, $lightness: -2%);
+    border-color: color.adjust(#e52228, $lightness: -2%);
-    color: color_variables.$white;
+    color: hsl(0, 0%, 100%);
-    text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
+    text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25);
 
     &:hover:not([disabled]) {
-      background-color: color.adjust(color_variables.$red-500, $lightness: -5%);
+      background-color: color.adjust(#e52228, $lightness: -5%);
-      border-color: color.adjust(color_variables.$red-500, $lightness: -5%);
+      border-color: color.adjust(#e52228, $lightness: -5%);
       box-shadow: box-shadow_variables.$box-shadow-middle;
     }
 
     &:active,
     &.is-active {
-      background-color: color.adjust(color_variables.$red-500, $lightness: -10%);
+      background-color: color.adjust(#e52228, $lightness: -10%);
-      border-color: color.adjust(color_variables.$red-500, $lightness: -10%);
+      border-color: color.adjust(#e52228, $lightness: -10%);
       box-shadow: box-shadow_variables.$box-shadow-middle;
     }
 
     &:focus {
-      border-color: color.adjust(color_variables.$red-500, $lightness: -10%);
+      border-color: color.adjust(#e52228, $lightness: -10%);
       box-shadow: box-shadow_variables.$button-box-shadow-standard;
     }
   }
 
   &.is-danger-outlined {
-    border: 1px solid color_variables.$red-500;
+    border: 1px solid var(--token-color-palette-red-200);
-    color: color_variables.$red-500;
+    color: var(--token-color-palette-red-200);
   }
 
   &.is-flat {
@@ -111,12 +110,12 @@
     background-color: transparent;
     border-color: transparent;
     box-shadow: none;
-    color: color_variables.$blue;
+    color: var(--token-color-palette-blue-200);
     text-decoration: none;
 
     &:hover {
-      color: color_variables.$blue-500;
+      color: var(--token-color-palette-blue-500);
-      background-color: color_variables.$grey-lightest;
+      background-color: var(--token-color-palette-neutral-50);
     }
   }
 
@@ -129,7 +128,7 @@
     pointer-events: none;
     &::after {
       animation: spinAround 500ms infinite linear;
-      border: 2px solid color_variables.$ui-gray-300;
+      border: 2px solid var(--token-color-palette-neutral-300);
       border-radius: 290486px;
       border-right-color: transparent;
       border-top-color: transparent;
@@ -146,7 +145,7 @@
   &.is-link {
     background-color: transparent;
     border-color: transparent;
-    color: color_variables.$blue;
+    color: var(--token-color-palette-blue-200);
     text-decoration: none;
     font-weight: font_variables.$font-weight-semibold;
     box-shadow: none;
@@ -154,75 +153,75 @@
   }
 
   &.is-primary {
-    background-color: color_variables.$blue;
+    background-color: var(--token-color-palette-blue-200);
-    border-color: color.adjust(color_variables.$blue, $lightness: -2%);
+    border-color: color.adjust(#1060ff, $lightness: -2%);
-    color: color_variables.$white;
+    color: hsl(0, 0%, 100%);
     font-weight: font_variables.$font-weight-bold;
-    text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
+    text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25);
 
     &:disabled {
-      background-color: color_variables.$ui-gray-700;
+      background-color: var(--token-color-palette-neutral-500);
       border-color: transparent;
       box-shadow: none;
     }
 
     &:hover:not([disabled]) {
-      background-color: color.adjust(color_variables.$blue, $lightness: -5%);
+      background-color: color.adjust(#1060ff, $lightness: -5%);
-      border-color: color.adjust(color_variables.$blue, $lightness: -5%);
+      border-color: color.adjust(#1060ff, $lightness: -5%);
       box-shadow: box-shadow_variables.$box-shadow-middle;
     }
 
     &:active,
     &.is-active {
-      background-color: color.adjust(color_variables.$blue, $lightness: -10%);
+      background-color: color.adjust(#1060ff, $lightness: -10%);
-      border-color: color.adjust(color_variables.$blue, $lightness: -10%);
+      border-color: color.adjust(#1060ff, $lightness: -10%);
       box-shadow: box-shadow_variables.$box-shadow-middle;
     }
 
     &:focus {
-      border-color: color.adjust(color_variables.$blue, $lightness: -10%);
+      border-color: color.adjust(#1060ff, $lightness: -10%);
       box-shadow: box-shadow_variables.$button-box-shadow-standard;
     }
 
     &.is-loading::after {
-      border-color: transparent transparent color_variables.$white color_variables.$white;
+      border-color: transparent transparent hsl(0, 0%, 100%) hsl(0, 0%, 100%);
     }
 
     &.is-underlined {
       &:active,
       &.is-active {
         background-color: transparent;
-        border-bottom: 2px solid color.adjust(color_variables.$blue, $lightness: -10%);
+        border-bottom: 2px solid color.adjust(#1060ff, $lightness: -10%);
         border-radius: unset;
-        color: color.adjust(color_variables.$blue, $lightness: -10%);
+        color: color.adjust(#1060ff, $lightness: -10%);
       }
     }
     // is-primary.is-outlined the only is-outlined buttons are primary.
     &.is-outlined {
       background-color: transparent;
-      border-color: color_variables.$blue;
+      border-color: var(--token-color-palette-blue-200);
-      color: color_variables.$blue;
+      color: var(--token-color-palette-blue-200);
 
       &:hover,
       &:focus {
         background-color: transparent;
-        border-color: color.adjust(color_variables.$blue, $lightness: -10%);
+        border-color: color.adjust(#1060ff, $lightness: -10%);
-        color: color_variables.$blue;
+        color: var(--token-color-palette-blue-200);
       }
 
       &:active,
       &.is-active {
         background-color: transparent;
-        border-color: color.adjust(color_variables.$blue, $lightness: -10%);
+        border-color: color.adjust(#1060ff, $lightness: -10%);
-        color: color.adjust(color_variables.$blue, $lightness: -10%);
+        color: color.adjust(#1060ff, $lightness: -10%);
       }
     }
 
     &.is-outlined [disabled] {
       background-color: transparent;
-      border-color: color_variables.$ui-gray-700;
+      border-color: var(--token-color-palette-neutral-500);
       box-shadow: none;
-      color: color_variables.$ui-gray-700;
+      color: var(--token-color-palette-neutral-500);
     }
   }
 
@@ -237,7 +236,7 @@
   // End of button types
 
   &.tool-tip-trigger {
-    color: color_variables.$grey-dark;
+    color: var(--token-color-palette-neutral-500);
     min-width: auto;
     padding: 0;
   }
@@ -291,8 +290,8 @@
 }
 
 a.button.disabled {
-  color: color_variables.$white;
+  color: hsl(0, 0%, 100%);
-  background-color: color_variables.$grey-dark;
+  background-color: var(--token-color-palette-neutral-500);
   opacity: 0.5;
   border-color: transparent;
   box-shadow: none;
@@ -315,7 +314,7 @@ a.button.disabled {
   cursor: pointer;
 
   &:disabled {
-    color: color_variables.$grey-light;
+    color: var(--token-color-palette-neutral-300);
     cursor: not-allowed;
   }
 }
@@ -327,15 +326,15 @@ a.button.disabled {
   box-shadow: box-shadow_variables.$box-shadow-low; // TODO delete
 
   &.white-icon svg {
-    color: color_variables.$white;
+    color: hsl(0, 0%, 100%);
   }
 
   &.icon-grey-300 svg {
-    color: color_variables.$ui-gray-300;
+    color: var(--token-color-palette-neutral-300);
   }
 
   &.icon-grey-500 svg {
-    color: color_variables.$ui-gray-500;
+    color: var(--token-color-palette-neutral-400);
   }
 
   &.transparent {
@@ -343,25 +342,25 @@ a.button.disabled {
     box-shadow: none;
     border: 1px solid transparent;
     &:hover {
-      border: 1px solid color_variables.$grey-light;
+      border: 1px solid var(--token-color-palette-neutral-300);
       border-color: var(--token-color-border-strong);
     }
   }
 
   &.primary {
-    background-color: color_variables.$blue;
+    background-color: var(--token-color-palette-blue-200);
-    border-color: color.adjust(color_variables.$blue, $lightness: -2%);
+    border-color: color.adjust(#1060ff, $lightness: -2%);
-    color: color_variables.$white;
+    color: hsl(0, 0%, 100%);
     font-weight: font_variables.$font-weight-bold;
-    text-shadow: 0 1px 1px rgba(color_variables.$black, 0.25);
+    text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25);
     svg {
-      color: color_variables.$white;
+      color: hsl(0, 0%, 100%);
     }
   }
 
   &.secondary {
-    background-color: color_variables.$grey-lightest;
+    background-color: var(--token-color-palette-neutral-50);
-    border: 1px solid color_variables.$grey-light;
+    border: 1px solid var(--token-color-palette-neutral-300);
   }
 
   &.in-dropdown {
@@ -380,13 +379,13 @@ a.button.disabled {
   display: inline-flex; // temporarily fixes existing button alignment until we adopt Hds::ButtonSet
   // for toolbar-button must pass arg @color="secondary"
   &.toolbar-button {
-    color: color_variables.$black;
+    color: hsl(0, 0%, 4%);
     background: none;
     border: none;
     box-shadow: none;
     &:hover:not(.disabled) {
-      background-color: color_variables.$ui-gray-100;
+      background-color: var(--token-color-palette-neutral-100);
-      color: color_variables.$blue;
+      color: var(--token-color-palette-blue-200);
     }
   }
 }

ui/app/styles/core/charts-lineal.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -19,12 +18,12 @@
   fill: var(--token-color-palette-blue-500);
 }
 .lineal-axis {
-  color: color_variables.$ui-gray-500;
+  color: var(--token-color-palette-neutral-400);
   text {
     font-size: 0.75rem;
   }
   line {
-    color: color_variables.$ui-gray-300;
+    color: var(--token-color-palette-neutral-300);
   }
 }
 .lineal-tooltip-position {
@@ -56,6 +55,6 @@
   fill: var(--token-color-palette-blue-200);
 }
 .custom-bar-new_clients {
-  fill: var(--token-color-palette-blue-500);
+  fill: var(--token-color-palette-blue-200);
-  color: var(--token-color-palette-blue-500);
+  color: var(--token-color-palette-blue-200);
 }

ui/app/styles/core/charts.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -32,7 +31,7 @@
     background-color: var(--token-color-palette-blue-200);
   }
   &.dot-new_clients {
-    background-color: var(--token-color-palette-blue-500);
+    background-color: var(--token-color-palette-blue-200);
   }
 }
 
@@ -42,7 +41,7 @@
 }
 
 .chart-tooltip {
-  background-color: color_variables.$black;
+  background-color: hsl(0, 0%, 4%);
   color: white;
   font-size: size_variables.$size-9;
   padding: 6px;
@@ -64,7 +63,7 @@
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
-  border-top: 9px solid color_variables.$black;
+  border-top: 9px solid hsl(0, 0%, 4%);
   position: absolute;
   opacity: 0.8;
   bottom: -9px;
@@ -73,14 +72,14 @@
 
 .has-grid {
   g > text {
-    color: color_variables.$ui-gray-500;
+    color: var(--token-color-palette-neutral-400);
     font-size: size_variables.$size-9;
   }
 
   g > line {
     // TODO: mix-blend doesn't work in firefox browser?
     mix-blend-mode: darken;
-    color: color_variables.$ui-gray-300;
+    color: var(--token-color-palette-neutral-300);
   }
 }
 
@@ -90,29 +89,3 @@
     font-size: size_variables.$size-9;
   }
 }
-
-// RESPONSIVE STYLING //
-
-@media only screen and (max-width: 950px) {
-  .chart-container-left {
-    grid-column-start: 1;
-    grid-column-end: 4;
-    grid-row-start: 2;
-    grid-row-end: 3;
-    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: size_variables.$spacing-48;
-    margin-right: size_variables.$spacing-48;
-  }
-
-  .timestamp {
-    grid-column-start: 1;
-    grid-row-start: 4;
-  }
-}

ui/app/styles/core/checkbox-and-radio.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -32,7 +31,7 @@
 .radio[disabled],
 .checkbox input[disabled],
 .radio input[disabled] {
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   cursor: not-allowed;
 }
 
@@ -43,7 +42,7 @@
 
 // one-off checkbox class
 .checkbox-help-text {
-  color: color_variables.$ui-gray-700;
+  color: var(--token-color-palette-neutral-500);
   font-size: size_variables.$size-7;
   padding-left: 28px;
 }
@@ -55,9 +54,9 @@
 }
 
 .b-checkbox label::before {
-  background-color: color_variables.$white;
+  background-color: hsl(0, 0%, 100%);
   border-radius: 3px;
-  border: 1px solid color_variables.$ui-gray-300;
+  border: 1px solid var(--token-color-palette-neutral-300);
   content: '';
   height: 17px;
   left: 0;
@@ -68,7 +67,7 @@
 }
 
 .b-checkbox input[type='checkbox']:checked + label::before {
-  border-color: color_variables.$blue;
+  border-color: var(--token-color-palette-blue-200);
 }
 
 .b-checkbox input[type='checkbox']:checked + label::after,
@@ -86,7 +85,7 @@
 }
 
 .b-checkbox label::after {
-  color: color_variables.$ui-gray-800;
+  color: var(--token-color-palette-neutral-600);
   font-size: 12px;
   height: 16px;
   left: 3px;
@@ -111,7 +110,7 @@
 
 .b-checkbox input[type='checkbox']:disabled + label::before,
 .b-checkbox input[type='radio']:disabled + label::before {
-  background-color: color_variables.$ui-gray-100;
+  background-color: var(--token-color-palette-neutral-100);
   cursor: not-allowed;
 }
 

ui/app/styles/core/element-styling.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -41,7 +40,7 @@ body,
 pre:not(.hds-code-block__code),
 strong,
 table th {
-  color: color_variables.$ui-gray-900;
+  color: var(--token-color-palette-neutral-600);
 }
 
 h1,
@@ -84,7 +83,7 @@ object {
 }
 
 html {
-  background-color: color_variables.$white;
+  background-color: hsl(0, 0%, 100%);
   font-size: size_variables.$base-font-size; // 16px
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -132,7 +131,7 @@ body {
 }
 
 a {
-  color: color_variables.$blue-500;
+  color: var(--token-color-palette-blue-200);
   cursor: pointer;
   text-decoration: underline;
 
@@ -144,19 +143,19 @@ a {
 }
 
 a:hover {
-  color: color_variables.$ui-gray-900;
+  color: var(--token-color-palette-neutral-600);
 }
 
 code {
   background-color: transparent;
-  color: color_variables.$ui-gray-700;
+  color: var(--token-color-palette-neutral-500);
   font-size: 1em;
   font-weight: 400;
   padding: 0;
 }
 
 hr {
-  background-color: color_variables.$ui-gray-300;
+  background-color: var(--token-color-palette-neutral-300);
   border: none;
   display: block;
   height: 1px;
@@ -194,7 +193,7 @@ label {
 // <Hds::Dropdown>
 .hds-dropdown-list-item {
   > button:disabled {
-    color: color_variables.$black;
+    color: hsl(0, 0%, 4%);
     opacity: 0.5;
     cursor: not-allowed;
   }

ui/app/styles/core/field.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -11,7 +10,7 @@
 .field {
   // cannot use :read-only selector because tag used for other purposes
   &.is-readOnly {
-    background-color: color_variables.$ui-gray-100;
+    background-color: var(--token-color-palette-neutral-100);
     cursor: not-allowed;
   }
 

ui/app/styles/core/file.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 @use '../core/buttons.scss';
 @use '../core/inputs.scss';
@@ -49,7 +48,7 @@
 .file-delete-button {
   @extend .button;
   @extend .is-transparent;
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   position: absolute;
   right: size_variables.$spacing-8;
 }

ui/app/styles/core/inputs.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/mixins';
 @use '../utils/size_variables';
 
@@ -15,8 +14,8 @@
   align-items: center;
   border-radius: size_variables.$radius;
   border: box-shadow_variables.$base-border;
-  box-shadow: 0 4px 1px rgba(color_variables.$black, 0.06) inset;
+  box-shadow: 0 4px 1px rgba(hsl(0, 0%, 4%), 0.06) inset;
-  color: color_variables.$grey-dark;
+  color: var(--token-color-palette-neutral-500);
   display: inline-flex;
   font-size: size_variables.$size-6;
   height: size_variables.$size-2;
@@ -33,13 +32,13 @@
   &.is-active,
   &:focus-visible {
     outline: none;
-    background-color: color_variables.$white;
+    background-color: hsl(0, 0%, 100%);
-    border-color: color_variables.$blue-500 !important;
+    border-color: var(--token-color-palette-blue-200) !important;
     box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
   }
 
   &:hover {
-    border-color: color_variables.$ui-gray-300;
+    border-color: var(--token-color-palette-neutral-300);
   }
 
   @include mixins.until(size_variables.$desktop) {
@@ -53,13 +52,13 @@
 
 .input[disabled],
 .textarea[disabled] {
-  border-color: color_variables.$grey-light;
+  border-color: var(--token-color-palette-neutral-300);
-  background-color: color_variables.$ui-gray-100;
+  background-color: var(--token-color-palette-neutral-100);
-  color: color_variables.$ui-gray-500;
+  color: var(--token-color-palette-neutral-400);
   cursor: not-allowed;
 
   &:hover {
-    border-color: color_variables.$grey-light;
+    border-color: var(--token-color-palette-neutral-300);
   }
 }
 

ui/app/styles/core/json-diff-patch.scss

@@ -1,5 +1,3 @@
-@use '../utils/color_variables';
-
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -21,7 +19,7 @@
 }
 
 .jsondiffpatch-property-name {
-  color: color_variables.$ui-gray-300;
+  color: var(--token-color-palette-neutral-300);
 }
 
 .jsondiffpatch-added > .jsondiffpatch-property-name {

ui/app/styles/core/label.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -10,7 +9,7 @@
 // This file defines the style for .is-label
 
 .is-label {
-  color: color_variables.$grey-darkest;
+  color: var(--token-color-palette-neutral-600);
   font-size: 14px;
   font-weight: font_variables.$font-weight-bold;
   display: flex;
@@ -29,6 +28,6 @@
   }
 
   &::before {
-    border-color: color_variables.$grey-light;
+    border-color: var(--token-color-palette-neutral-300);
   }
 }

ui/app/styles/core/link.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 
 /**
@@ -9,7 +8,7 @@
 .link {
   background: transparent;
   border: 0;
-  color: color_variables.$blue;
+  color: var(--token-color-palette-blue-200);
   cursor: pointer;
   display: inline;
   font: inherit;

ui/app/styles/core/lists.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -14,7 +13,7 @@
   align-items: center;
   &:before {
     font-size: size_variables.$size-5;
-    color: color_variables.$blue-500;
+    color: var(--token-color-palette-blue-200);
     content: '|';
     position: relative;
   }
@@ -22,7 +21,7 @@
 
 .list-header {
   margin: size_variables.$spacing-10 size_variables.$spacing-10 0;
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   font-size: size_variables.$size-8;
   font-weight: font_variables.$font-weight-semibold;
   text-transform: uppercase;

ui/app/styles/core/menu.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -33,6 +32,6 @@
 
   &:hover,
   &.is-active {
-    color: color_variables.$blue;
+    color: var(--token-color-palette-blue-200);
   }
 }

ui/app/styles/core/message.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -13,8 +12,8 @@
 }
 
 .message {
-  background: color_variables.$blue-010;
+  background: var(--token-color-palette-blue-50);
-  border: 1px solid color_variables.$blue-100;
+  border: 1px solid var(--token-color-palette-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;
@@ -25,12 +24,12 @@
   }
 
   .message-icon {
-    color: color_variables.$blue;
+    color: var(--token-color-palette-blue-200);
     margin-right: size_variables.$spacing-8;
   }
 
   .message-title {
-    color: color_variables.$blue-500;
+    color: var(--token-color-palette-blue-200);
     font-size: 16px;
     font-weight: font_variables.$font-weight-bold;
     line-height: 1.25;
@@ -44,70 +43,70 @@
 
   // message types, see message-types.js
   &.is-danger {
-    background: color_variables.$red-010;
+    background: var(--token-color-surface-critical);
-    border: 1px solid color_variables.$red-050;
+    border: 1px solid var(--token-color-palette-red-50);
 
     .message-body {
-      color: color_variables.$red-700;
+      color: var(--token-color-palette-red-300);
     }
 
     .message-icon {
-      color: color_variables.$red-500;
+      color: var(--token-color-palette-red-200);
     }
 
     .message-title {
-      color: color_variables.$red-700;
+      color: var(--token-color-palette-red-300);
     }
   }
 
   &.is-highlight {
-    background: color_variables.$yellow-010;
+    background: var(--token-color-surface-warning);
-    border: 1px solid color_variables.$yellow-100;
+    border: 1px solid var(--token-color-palette-amber-100);
 
     .message-body {
-      color: color_variables.$ui-gray-900;
+      color: var(--token-color-palette-neutral-600);
     }
 
     .message-icon {
-      color: color_variables.$yellow-500;
+      color: var(--token-color-palette-amber-200);
     }
 
     .message-title {
-      color: color_variables.$orange-700;
+      color: var(--token-color-palette-amber-300);
     }
   }
 
   &.is-info {
-    background-color: color_variables.$blue-010;
+    background-color: var(--token-color-palette-blue-50);
 
     .message-body {
-      color: color_variables.$blue-700;
+      color: var(--token-color-palette-blue-300);
     }
 
     .message-header {
-      background-color: color_variables.$blue-500;
+      background-color: var(--token-color-palette-blue-200);
-      color: color_variables.$white;
+      color: hsl(0, 0%, 100%);
     }
 
     .message-title {
-      color: color_variables.$blue-700;
+      color: var(--token-color-palette-blue-300);
     }
   }
 
   &.is-success {
-    background: color_variables.$green-010;
+    background: var(--token-color-surface-success);
-    border: 1px solid color_variables.$green-100;
+    border: 1px solid var(--token-color-palette-green-100);
 
     .message-body {
-      color: color_variables.$green-900;
+      color: var(--token-color-palette-green-500);
     }
 
     .message-icon {
-      color: color_variables.$green-500;
+      color: var(--token-color-palette-green-200);
     }
 
     .message-title {
-      color: color_variables.$green-700;
+      color: var(--token-color-palette-green-300);
     }
   }
 }

ui/app/styles/core/progress.scss

@@ -1,5 +1,4 @@
 @use '../utils/box-shadow_variables';
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -9,7 +8,7 @@
 
 .progress {
   appearance: none;
-  background: color_variables.$ui-gray-050;
+  background: var(--token-color-palette-neutral-50);
   border: none;
   box-shadow: inset box-shadow_variables.$box-link-shadow;
   border-radius: size_variables.$radius;
@@ -74,17 +73,17 @@
 }
 
 .progress.is-success::-webkit-progress-value {
-  background-color: color_variables.$green-500;
+  background-color: var(--token-color-palette-green-200);
 }
 
 .progress.is-success::-moz-progress-bar {
-  background-color: color_variables.$green-500;
+  background-color: var(--token-color-palette-green-200);
 }
 
 .progress.is-success::-ms-fill {
-  background-color: color_variables.$green-500;
+  background-color: var(--token-color-palette-green-200);
 }
 
 .progress.is-success:indeterminate {
-  background-image: linear-gradient(to right, color_variables.$green-500 30%, #ededed 30%);
+  background-image: linear-gradient(to right, var(--token-color-palette-green-200) 30%, #ededed 30%);
 }

ui/app/styles/core/select.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/mixins';
 @use '../utils/size_variables';
 
@@ -12,11 +11,11 @@ select {
 }
 
 .select select {
-  background-color: color_variables.$ui-gray-050;
+  background-color: var(--token-color-palette-neutral-50);
-  box-shadow: 0 3px 1px rgba(color_variables.$black, 0.12);
+  box-shadow: 0 3px 1px rgba(hsl(0, 0%, 4%), 0.12);
-  border: 1px solid color_variables.$grey-light;
+  border: 1px solid var(--token-color-palette-neutral-300);
   border-radius: size_variables.$radius;
-  color: color_variables.$grey-dark;
+  color: var(--token-color-palette-neutral-500);
   cursor: pointer;
   display: block;
   font-size: 1em;
@@ -41,7 +40,7 @@ select {
   &:focus,
   &:focus-visible,
   &.is-active {
-    border-color: color_variables.$blue-500;
+    border-color: var(--token-color-palette-blue-200);
     box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
   }
 }
@@ -51,13 +50,13 @@ select {
 }
 
 .select select[disabled] {
-  border-color: color_variables.$grey-light;
+  border-color: var(--token-color-palette-neutral-300);
-  background-color: color_variables.$ui-gray-100;
+  background-color: var(--token-color-palette-neutral-100);
-  color: color_variables.$ui-gray-500;
+  color: var(--token-color-palette-neutral-400);
   cursor: not-allowed;
   user-select: none;
   &:hover {
-    border-color: color_variables.$grey-light;
+    border-color: var(--token-color-palette-neutral-300);
   }
 }
 

ui/app/styles/core/title.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/font_variables';
 @use '../utils/size_variables';
 
@@ -23,7 +22,7 @@
   word-break: break-word;
 
   > a {
-    color: color_variables.$black;
+    color: hsl(0, 0%, 4%);
     text-decoration: none;
   }
 
@@ -64,5 +63,5 @@
 .is-subtitle-gray {
   text-transform: uppercase;
   font-size: size_variables.$size-7;
-  color: color_variables.$ui-gray-500;
+  color: var(--token-color-palette-neutral-400);
 }

ui/app/styles/core/toggle.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -46,7 +45,7 @@
   height: 1.5rem;
   border: 0.1rem solid transparent;
   border-radius: 0.75rem;
-  background: color_variables.$ui-gray-300;
+  background: var(--token-color-palette-neutral-300);
   content: '';
 }
 .toggle[type='checkbox'] + label::after {
@@ -58,12 +57,12 @@
   height: 1rem;
   transform: translate3d(0, 0, 0);
   border-radius: 50%;
-  background: color_variables.$white;
+  background: hsl(0, 0%, 100%);
   transition: all 0.25s size_variables.$easing;
   content: '';
 }
 .toggle[type='checkbox']:checked + label::before {
-  background: color_variables.$ui-gray-700;
+  background: var(--token-color-palette-neutral-500);
 }
 .toggle[type='checkbox']:checked + label::after {
   left: 1.625rem;
@@ -99,10 +98,10 @@
   will-change: left;
 }
 .toggle[type='checkbox']:focus + label {
-  box-shadow: 0 0 1px color_variables.$blue;
+  box-shadow: 0 0 1px var(--token-color-palette-blue-200);
 }
 .toggle[type='checkbox'].is-success:checked + label::before {
-  background: color_variables.$blue;
+  background: var(--token-color-palette-blue-200);
 }
 
 .toggle-label {

ui/app/styles/docs.scss

@@ -1,4 +1,3 @@
-@use 'utils/color_variables';
 @use 'utils/size_variables';
 
 /**
@@ -30,7 +29,7 @@
   h1,
   h2,
   h3 {
-    border-bottom: 1px solid color_variables.$grey-light;
+    border-bottom: 1px solid var(--token-color-palette-neutral-300);
     padding-bottom: 0.5rem;
   }
 
@@ -61,13 +60,13 @@
 
   pre,
   code {
-    background-color: color_variables.$ui-gray-100;
+    background-color: var(--token-color-palette-neutral-100);
   }
 
   blockquote {
     margin-left: 1rem;
     padding: 0.5rem;
-    background: color_variables.$ui-gray-010;
+    background: var(--token-color-palette-neutral-50);
     border-radius: 6px;
   }
 
@@ -102,12 +101,12 @@
       }
     }
     tr {
-      border-bottom: 1px solid color_variables.$grey-light;
+      border-bottom: 1px solid var(--token-color-palette-neutral-300);
     }
   }
 
   .docfy-demo {
-    border: 1px solid color_variables.$grey-lightest;
+    border: 1px solid var(--token-color-palette-neutral-50);
     border-radius: 6px;
     padding: 1rem;
     overflow: scroll;

ui/app/styles/helper-classes/colors.scss

@@ -1,5 +1,3 @@
-@use '../utils/color_variables';
-
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -9,27 +7,27 @@
 
 // background colors
 .background-neutral-50 {
-  background: color_variables.$neutral-50;
+  background: var(--token-color-palette-neutral-50);
 }
 
 .has-background-white-bis {
-  background: color_variables.$ui-gray-050;
+  background: var(--token-color-palette-neutral-50);
 }
 
 .has-background-gray-100 {
-  background-color: color_variables.$ui-gray-100;
+  background-color: var(--token-color-palette-neutral-100);
 }
 
 .has-background-gray-200 {
-  background-color: color_variables.$ui-gray-200;
+  background-color: var(--token-color-palette-neutral-200);
 }
 
 .has-background-gray-300 {
-  background-color: color_variables.$ui-gray-300;
+  background-color: var(--token-color-palette-neutral-300);
 }
 
 .has-background-gray-900 {
-  background-color: color_variables.$ui-gray-900;
+  background-color: var(--token-color-palette-neutral-600);
 }
 
 .background-color-black {
@@ -39,12 +37,12 @@
 // borders
 .has-border-top-light {
   border-radius: 0;
-  border-top: 1px solid color_variables.$grey-light;
+  border-top: 1px solid var(--token-color-palette-neutral-300);
 }
 
 .has-border-bottom-light {
   border-radius: 0;
-  border-bottom: 1px solid color_variables.$grey-light;
+  border-bottom: 1px solid var(--token-color-palette-neutral-300);
 }
 
 .has-error-border,
@@ -52,25 +50,25 @@ 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 color_variables.$red-500;
+  border: 1px solid var(--token-color-palette-red-200);
 }
 
 .error-border-child-inputs input,
 .error-border-child-inputs textarea {
-  border: 1px solid color_variables.$red-500;
+  border: 1px solid var(--token-color-palette-red-200);
 }
 
 // specifically for the SearchSelect dropdown.
 .dropdown-has-error-border > div.ember-basic-dropdown-trigger {
-  border: 1px solid color_variables.$red-500;
+  border: 1px solid var(--token-color-palette-red-200);
 }
 
 // text color
 .text-grey-lightest {
-  color: color_variables.$grey-lightest;
+  color: var(--token-color-palette-neutral-50);
 }
 
-.has-text-grey-light {
+.has-text-neutral-300 {
   color: var(--token-color-foreground-faint) !important;
 }
 
@@ -78,38 +76,38 @@ select.has-error-border,
   color: var(--token-color-foreground-faint) !important;
 }
 
-.has-text-grey-dark {
+.has-text-neutral-500 {
-  color: color_variables.$ui-gray-700 !important;
+  color: var(--token-color-palette-neutral-500) !important;
 }
 
 .has-text-white {
-  color: color_variables.$white !important;
+  color: hsl(0, 0%, 100%) !important;
 }
 
 .has-text-black {
-  color: color_variables.$black !important;
+  color: hsl(0, 0%, 4%) !important;
 }
 
 .has-text-info {
-  color: color_variables.$blue-500 !important;
+  color: var(--token-color-palette-blue-200) !important;
 }
 // same without the !important
 .has-text-primary {
-  color: color_variables.$blue-500;
+  color: var(--token-color-palette-blue-200);
 }
 
 .has-text-success {
-  color: var(--token-color-foreground-success) !important;
+  color: var(--token-color-palette-green-200) !important;
 }
 
 .has-text-highlight {
-  color: color_variables.$yellow-500;
+  color: var(--token-color-palette-amber-200);
 }
 
 .has-text-danger {
-  color: color_variables.$red-500 !important;
+  color: var(--token-color-palette-red-200) !important;
 }
 
 .has-text-primary {
-  color: color_variables.$blue;
+  color: var(--token-color-palette-blue-200);
 }

ui/app/styles/helper-classes/general.scss

@@ -1,4 +1,3 @@
-@use '../utils/color_variables';
 @use '../utils/size_variables';
 
 /**
@@ -11,8 +10,8 @@
 // box-shadow helpers
 .has-only-top-shadow {
   box-shadow:
-    0 -1px 0 -1px color_variables.$grey-light,
+    0 -1px 0 -1px var(--token-color-palette-neutral-300),
-    0 -2px 0 -1px color_variables.$grey-light;
+    0 -2px 0 -1px var(--token-color-palette-neutral-300);
 }
 
 .is-shadowless {
@@ -21,18 +20,18 @@
 
 .is-sideless {
   box-shadow:
-    0 2px 0 -1px color_variables.$grey-light,
+    0 2px 0 -1px var(--token-color-palette-neutral-300),
-    0 -2px 0 -1px color_variables.$grey-light;
+    0 -2px 0 -1px var(--token-color-palette-neutral-300);
 }
 
 // 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 color_variables.$grey-light;
+  box-shadow: 0 -1px 0 0 var(--token-color-palette-neutral-300);
 }
 
 // border helpers
 .has-default-border {
-  border: 1px solid color_variables.$grey !important;
+  border: 1px solid var(--token-color-palette-neutral-400) !important;
 }
 
 .is-borderless {
@@ -70,13 +69,13 @@
 
 // large grouped css blocks
 .is-hint {
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   font-size: size_variables.$size-8;
   padding: size_variables.$spacing-12 0;
 }
 
 .is-optional {
-  color: color_variables.$grey;
+  color: var(--token-color-palette-neutral-400);
   font-size: size_variables.$size-8;
   text-transform: lowercase;
 }

ui/app/styles/utils/_box-shadow_variables.scss

@@ -1,5 +1,3 @@
-@use 'color_variables';
-
 /**
  * Copyright (c) HashiCorp, Inc.
  * SPDX-License-Identifier: BUSL-1.1
@@ -8,27 +6,27 @@
 // TODO: lots of inconsistent variation on box-shadow usage. Fix.
 
 // box
-$box-shadow: 0 0 0 1px rgba(color_variables.$black, 0.1);
+$box-shadow: 0 0 0 1px rgba(hsl(0, 0%, 4%), 0.1);
 $box-shadow-low:
-  0 5px 1px -2px rgba(color_variables.$black, 0.12),
+  0 5px 1px -2px rgba(hsl(0, 0%, 4%), 0.12),
-  0 3px 2px -1px rgba(color_variables.$black, 0);
+  0 3px 2px -1px rgba(hsl(0, 0%, 4%), 0);
 $box-shadow-middle:
-  0 8px 4px -4px rgba(color_variables.$black, 0.1),
+  0 8px 4px -4px rgba(hsl(0, 0%, 4%), 0.1),
-  0 6px 8px -2px rgba(color_variables.$black, 0.05);
+  0 6px 8px -2px rgba(hsl(0, 0%, 4%), 0.05);
 $box-shadow-high:
-  0 12px 5px -7px rgba(color_variables.$black, 0.08),
+  0 12px 5px -7px rgba(hsl(0, 0%, 4%), 0.08),
-  0 11px 10px -3px rgba(color_variables.$black, 0.1);
+  0 11px 10px -3px rgba(hsl(0, 0%, 4%), 0.1);
 $box-shadow-highest:
-  0 16px 6px -10px rgba(color_variables.$black, 0.06),
+  0 16px 6px -10px rgba(hsl(0, 0%, 4%), 0.06),
-  0 16px 16px -4px rgba(color_variables.$black, 0.2);
+  0 16px 16px -4px rgba(hsl(0, 0%, 4%), 0.2);
 
 // box-link
-$box-link-shadow: 0 0 0 1px color_variables.$ui-gray-200;
+$box-link-shadow: 0 0 0 1px var(--token-color-palette-neutral-200);
-$box-link-hover-shadow: 0 0 0 1px color_variables.$ui-gray-300;
+$box-link-hover-shadow: 0 0 0 1px var(--token-color-palette-neutral-300);
 
 // border
-$base-border: 1px solid color_variables.$ui-gray-300;
+$base-border: 1px solid var(--token-color-palette-neutral-300);
-$light-border: 1px solid color_variables.$ui-gray-200;
+$light-border: 1px solid var(--token-color-palette-neutral-200);
 
 // button specific
-$button-box-shadow-standard: 0 3px 1px 0 rgba(color_variables.$black, 0.12);
+$button-box-shadow-standard: 0 3px 1px 0 rgba(hsl(0, 0%, 4%), 0.12);

ui/app/styles/utils/_color_variables.scss

@@ -1,108 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: BUSL-1.1
- */
-
-//  HDS TOKENS
-
-// Grey
-$neutral-50: var(--token-color-palette-neutral-50);
-
-/*
-DEPRECATED
-below variables are deprecated, use HDS tokens instead
-*/
-
-// UI Gray
-$ui-gray-010: #fbfbfc;
-$ui-gray-050: #f7f8fa;
-$ui-gray-100: #ebeef2;
-$ui-gray-200: #dce0e6;
-$ui-gray-300: #bac1cc;
-$ui-gray-400: #8e96a3;
-$ui-gray-500: #6f7682;
-$ui-gray-600: #626873;
-$ui-gray-700: #525761;
-$ui-gray-800: #373a42;
-$ui-gray-900: #1f2124;
-$grey-lightest: $ui-gray-050;
-$grey-light: $ui-gray-300;
-$grey: $ui-gray-500;
-$grey-dark: $ui-gray-700;
-$grey-darkest: $ui-gray-900;
-
-// Black
-$black: hsl(0, 0%, 4%); // in hex: #0a0a0a
-
-// White
-$white: hsl(0, 0%, 100%);
-
-// Blue
-$blue-010: #fbfcff;
-$blue-050: #f0f5ff;
-$blue-100: #bfd4ff;
-$blue-300: #5b92ff;
-$blue-500: #1563ff;
-$blue-700: #0e40a3;
-$blue-900: #061b46;
-$blue-lightest: $blue-050;
-$blue-light: $blue-300;
-$blue: $blue-500;
-$blue-dark: $blue-700;
-$blue-darkest: $blue-900;
-
-// Red
-$red-010: #fdfafb;
-$red-050: #f9ecee;
-$red-100: #efc7cc;
-$red-300: #db7d88;
-$red-500: #c73445;
-$red-700: #7f222c;
-$red-900: #370f13;
-$red-lightest: $red-050;
-$red-light: $red-300;
-$red: $red-500;
-$red-dark: $red-700;
-$red-darkest: $red-900;
-
-// Green
-$green-010: #fafdfa;
-$green-050: #ecf7ed;
-$green-100: #c6e9c9;
-$green-300: #7acc81;
-$green-500: #2eb039;
-$green-700: #1e7125;
-$green-900: #0d3010;
-$green-lightest: $green-050;
-$green-light: $green-300;
-$green: $green-500;
-$green-dark: $green-700;
-$green-darkest: $green-900;
-
-// Orange
-$orange-010: #fffcfa;
-$orange-050: #fef4ec;
-$orange-100: #fde0c8;
-$orange-300: #fbb77f;
-$orange-500: #fa8f37;
-$orange-700: #a05c23;
-$orange-900: #45270f;
-$orange-lightest: $orange-050;
-$orange-light: $orange-300;
-$orange: $orange-500;
-$orange-dark: $orange-700;
-$orange-darkest: $orange-900;
-
-// Yellow
-$yellow-010: #fffdf6;
-$yellow-050: #fffbed;
-$yellow-100: #fdeeba;
-$yellow-300: #fbd95e;
-$yellow-500: #fac402;
-$yellow-700: #a07d02;
-$yellow-900: #453601;
-$yellow-lightest: $yellow-050;
-$yellow-light: $yellow-300;
-$yellow: $yellow-500;
-$yellow-dark: $yellow-700;
-$yellow-darkest: $yellow-900;

ui/app/styles/utils/swagger.scss

@@ -1,5 +1,4 @@
 @use '../utils/size_variables';
-@use '../utils/color_variables';
 
 /**
  * Copyright (c) HashiCorp, Inc.
@@ -13,15 +12,15 @@
   padding: 0;
 
   .info a {
-    color: color_variables.$blue-700;
+    color: var(--token-color-palette-blue-300);
   }
 
   .title {
     small {
-      background-color: color_variables.$ui-gray-800;
+      background-color: var(--token-color-palette-neutral-600);
     }
     .version-stamp {
-      background-color: color_variables.$green-700;
+      background-color: var(--token-color-palette-green-300);
     }
   }
 
@@ -29,26 +28,26 @@
     opacity: 1;
 
     .opblock-summary-method {
-      background-color: color_variables.$ui-gray-700;
+      background-color: var(--token-color-palette-neutral-500);
     }
   }
 
   .opblock-get {
     .opblock-summary-method {
-      background-color: color_variables.$blue-500;
+      background-color: var(--token-color-palette-blue-200);
     }
   }
 
   .opblock-post,
   .opblock-patch {
     .opblock-summary-method {
-      background-color: color_variables.$green-700;
+      background-color: var(--token-color-palette-green-300);
     }
   }
 
   .opblock-delete {
     .opblock-summary-method {
-      background-color: color_variables.$red-500;
+      background-color: var(--token-color-palette-red-200);
     }
   }
 

ui/lib/core/addon/components/string-list.hbs

@@ -53,7 +53,7 @@
         {{/if}}
       </div>
       {{#if (includes index this.indicesWithComma)}}
-        <Hds::Icon @name="alert-triangle" @color="var(--token-color-foreground-warning)" @size="24" @isInline={{true}} />
+        <Hds::Icon @name="alert-triangle" @color="warning" @size="24" @isInline={{true}} />
       {{/if}}
     </div>
   {{/each}}

ui/tests/integration/components/kv/page/kv-page-version-history-test.js

@@ -64,7 +64,7 @@ module('Integration | Component | kv | Page::Secret::Metadata::Version-History',
       if (data.destroyed) {
         assert
           .dom(`${PAGE.versions.icon(version)} [data-test-icon="x-square-fill"]`)
-          .hasStyle({ color: 'rgb(199, 52, 69)' });
+          .hasStyle({ color: 'rgb(229, 34, 40)' });
       }
       if (data.isSecretDeleted) {
         assert