ui: Replaces almost all remaining instances of SASS variables with CSS (#11200)

From an engineers perspective, whenever specifying colors from now on we should use the form:

```
color: rgb(var(--tone-red-500));
```

Please note:

- Use rgb. This lets us do this like rgb(var(--tone-red-500) / 10%) so we can use a 10% opacity red-500 if we ever need to whilst still making use of our color tokens.
- Use --tone-colorName-000 (so the prefix tone). Previously we could use a mix of --gray-500: $gray-500 (note the left hand CSS prop and right hand SASS var) for the things we need to theme currently. As we no longer use SASS we can't do --gray-500: --gray-500, so we now do --tone-gray-500: --gray-500.

Just for clarity after that, whenever specifying a color anywhere, use rgb and --tone. There is only one reason where you might not use tone, and that is if you never want a color to be affected by a theme (for example a background shadow probably always should use --black)

There are a 2 or 3 left for the code editor, plus our custom-query values

.changelog/11200.txt

@@ -0,0 +1,5 @@
+```release-note:improvement
+ui: Move the majority of our SASS variables to use native CSS custom
+properties
+```
+

ui/packages/consul-ui/app/components/anchors/index.scss

@@ -4,14 +4,14 @@ a[rel*='external']::after {
   margin-left: 8px;
 }
 %main-content label a[rel*='help'] {
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
 %main-content a[rel*='help']::after {
   @extend %with-info-circle-outline-icon, %as-pseudo;
   opacity: 0.4;
 }
 %main-content h2 a {
-  color: $gray-900;
+  color: rgb(var(--tone-gray-900));
 }
 %main-content h2 a[rel*='help']::after {
   font-size: 0.65em;

ui/packages/consul-ui/app/components/anchors/skin.scss

@@ -8,7 +8,7 @@
 %anchor,
 %anchor-intent,
 %anchor-active {
-  color: $color-action;
+  color: rgb(var(--color-action));
 }
 %anchor-decoration:hover,
 %anchor-decoration:focus {
@@ -20,7 +20,7 @@
 %anchor {
   @extend %anchor-decoration;
   cursor: pointer;
-  background-color: $transparent;
+  background-color: var(--transparent);
 }
 %anchor:hover,
 %anchor:focus {

ui/packages/consul-ui/app/components/app-view/index.scss

@@ -30,7 +30,7 @@
   width: 26px;
   height: 26px;
   cursor: pointer;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 #toolbar-toggle {
   display: none;

ui/packages/consul-ui/app/components/app-view/skin.scss

@@ -2,21 +2,21 @@
   @extend %h100;
 }
 %app-view-title {
-  border-bottom: $decor-border-100;
+  border-bottom: var(--decor-border-100);
 }
 %app-view-content form:not(.filter-bar) fieldset {
-  border-bottom: $decor-border-200;
+  border-bottom: var(--decor-border-200);
 }
 %app-view-header h1 > em {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 %app-view-header dd > a {
-  color: var(--gray-999);
+  color: rgb(var(--tone-gray-999));
 }
 %app-view-content div > dl > dd {
-  color: var(--gray-400);
+  color: rgb(var(--tone-gray-400));
 }
 %app-view-title,
 %app-view-content form:not(.filter-bar) fieldset {
-  border-color: var(--gray-200);
+  border-color: rgb(var(--tone-gray-200));
 }

ui/packages/consul-ui/app/components/auth-form/skin.scss

@@ -2,11 +2,11 @@
   text-transform: uppercase;
 }
 %auth-form-hr::before {
-  border-top: 1px solid $gray-200;
+  border-top: 1px solid rgb(var(--tone-gray-200));
 }
 /* This is to mask off the hr so it has a space */
 /* in the center so if the background color of what the */
 /* line is on is different, then this should be different */
 %auth-form-hr span {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }

ui/packages/consul-ui/app/components/auth-modal/layout.scss

@@ -6,7 +6,7 @@
   padding-right: 42px;
 }
 %auth-modal footer {
-  background-color: $transparent;
+  background-color: var(--transparent);
 }
 %auth-modal > div > div > div {
   padding-bottom: 0;

ui/packages/consul-ui/app/components/badge/index.scss

@@ -8,8 +8,8 @@
 %badge,
 %badge + dd {
   @extend %pill;
-  background-color: var(--gray-100);
-  color: var(--gray-500);
+  background-color: rgb(var(--tone-gray-100));
+  color: rgb(var(--tone-gray-500));
 }
 %badge::after,
 %badge-reversed::after,

ui/packages/consul-ui/app/components/breadcrumbs/skin.scss

@@ -1,9 +1,9 @@
 %crumbs {
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
   text-decoration: none;
 }
 %crumbs:hover {
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
   text-decoration: underline;
 }
 %crumbs::before {
@@ -11,9 +11,9 @@
 }
 %breadcrumb-milestone::before {
   @extend %with-chevron-left-mask, %as-pseudo;
-  background-color: $gray-500;
+  background-color: rgb(var(--tone-gray-500));
 }
 %breadcrumb::before {
   content: '/';
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }

ui/packages/consul-ui/app/components/buttons/skin.scss

@@ -16,8 +16,8 @@
 %dangerous-button {
   @extend %button;
   border-width: 1px;
-  border-radius: $decor-radius-100;
-  box-shadow: $decor-elevation-300;
+  border-radius: var(--decor-radius-100);
+  box-shadow: var(--decor-elevation-300);
 }
 /* color */
 %primary-button {
@@ -42,14 +42,14 @@
   @extend %frame-gray-400;
 }
 %secondary-button:disabled {
-  color: $gray-600;
+  color: rgb(var(--tone-gray-600));
 }
 %secondary-button:active {
   /* %frame-gray-something */
   @extend %frame-gray-700;
-  background-color: $gray-200;
-  color: $gray-800;
-  border-color: $gray-700;
+  background-color: rgb(var(--tone-gray-200));
+  color: rgb(var(--tone-gray-800));
+  border-color: rgb(var(--tone-gray-700));
 }
 /**/
 %dangerous-button {
@@ -67,8 +67,8 @@
 }
 
 %internal-button {
-  color: var(--gray-900);
-  background-color: var(--gray-000);
+  color: rgb(var(--tone-gray-900));
+  background-color: rgb(var(--tone-gray-000));
 }
 %internal-button-dangerous {
   @extend %frame-red-300;
@@ -77,7 +77,7 @@
   @extend %frame-red-700;
 }
 %internal-button-intent {
-  background-color: var(--gray-050);
+  background-color: rgb(var(--tone-gray-050));
 }
 %internal-button:focus,
 %internal-button:hover {
@@ -95,7 +95,7 @@
   top: 0;
   height: 100%;
   margin-left: 8px;
-  background-color: $gray-300;
+  background-color: rgb(var(--tone-gray-300));
 }
 %sort-button::before {
   @extend %with-sort-mask, %as-pseudo;

ui/packages/consul-ui/app/components/card/skin.scss

@@ -3,23 +3,23 @@
   @extend %card-intent;
 }
 %card {
-  border: $decor-border-100;
-  border-radius: $decor-radius-100;
-  background-color: rgba($white, 0.9);
+  border: var(--decor-border-100);
+  border-radius: var(--decor-radius-100);
+  background-color: rgb(var(--white) / 90%);
 }
 %card > section,
 %card > ul > li {
-  border-top: $decor-border-100;
+  border-top: var(--decor-border-100);
 }
 %card,
 %card > section,
 %card > ul > li {
-  border-color: $gray-200;
+  border-color: rgb(var(--tone-gray-200));
 }
 %card ul {
   /*TODO: %list-style-none?*/
   list-style-type: none;
 }
 %card-intent {
-  box-shadow: $decor-elevation-400;
+  box-shadow: var(--decor-elevation-400);
 }

ui/packages/consul-ui/app/components/certificate/index.scss

@@ -13,14 +13,14 @@
     @extend %with-visibility-show-icon, %as-pseudo;
   }
   code {
-    background-color: var(--gray-050);
+    background-color: rgb(var(--tone-gray-050));
     overflow-wrap: break-word;
     max-width: min-content;
     padding: 0 12px;
   }
   hr {
-    border: 3px dashed var(--gray-300);
-    background-color: $white;
+    border: 3px dashed rgb(var(--tone-gray-300));
+    background-color: rgb(var(--white));
     width: 150px;
     margin: auto;
     margin-top: 9px;

ui/packages/consul-ui/app/components/code-editor/layout.scss

@@ -15,8 +15,8 @@
 %code-editor-syntax-select {
   margin-top: 1px;
   border: 0;
-  background-color: $black;
-  color: $white;
+  background-color: rgb(var(--black));
+  color: rgb(var(--white));
   border-left: 1px solid;
   border-radius: 0;
 }
@@ -25,7 +25,7 @@
   bottom: 0px;
   width: 100%;
   height: 25px;
-  background-color: $black;
+  background-color: var(--black);
   content: '';
   display: block;
 }

ui/packages/consul-ui/app/components/code-editor/skin.scss

@@ -1,24 +1,28 @@
-$syntax-light-grey: #dde3e7;
-$syntax-light-gray: #a4a4a4;
-$syntax-light-grey-blue: #6c7b81;
-$syntax-dark-grey: #788290;
-$syntax-faded-gray: #eaeaea;
-// Product colors
-$syntax-atlas: #127eff;
-$syntax-vagrant: #2f88f7;
 $syntax-consul: #69499a;
-$syntax-terraform: #822ff7;
-$syntax-serf: #dd4e58;
-$syntax-packer: #1ddba3;
-
-// Our colors
-$syntax-gray: lighten($black, 89%);
-$syntax-red: #ff3d3d;
-$syntax-green: #39b54a;
 $syntax-dark-gray: #535f73;
+:root {
+  --syntax-light-grey: #dde3e7;
+  --syntax-light-gray: #a4a4a4;
+  --syntax-light-grey-blue: #6c7b81;
+  --syntax-dark-grey: #788290;
+  --syntax-faded-gray: #eaeaea;
+  // Product colors
+  --syntax-atlas: #127eff;
+  --syntax-vagrant: #2f88f7;
+  --syntax-consul: #{$syntax-consul};
+  --syntax-terraform: #822ff7;
+  --syntax-serf: #dd4e58;
+  --syntax-packer: #1ddba3;
 
-$syntax-gutter-grey: #2a2f36;
-$syntax-yellow: $yellow-500;
+  // Our colors
+  --syntax-gray: lighten(#000, 89%);
+  --syntax-red: #ff3d3d;
+  --syntax-green: #39b54a;
+  --syntax-dark-gray: #{$syntax-dark-gray};
+
+  --syntax-gutter-grey: #2a2f36;
+  --syntax-yellow: rgb(var(--tone-yellow-500));
+}
 .CodeMirror {
   max-width: 1150px;
   min-height: 300px;
@@ -31,10 +35,10 @@ $syntax-yellow: $yellow-500;
 }
 .CodeMirror-lint-tooltip {
   background-color: #f9f9fa;
-  border: 1px solid $syntax-light-gray;
+  border: 1px solid var(--syntax-light-gray);
   border-radius: 0;
-  color: lighten($black, 13%);
-  font-family: $typo-family-mono;
+  color: lighten(#000, 13%);
+  font-family: var(--typo-family-mono);
   font-size: 13px;
   padding: 7px 8px 9px;
 }
@@ -42,17 +46,17 @@ $syntax-yellow: $yellow-500;
 .cm-s-hashi {
   &.CodeMirror {
     width: 100%;
-    background-color: $black !important;
+    background-color: rgb(var(--black)) !important;
     color: #cfd2d1 !important;
     border: none;
-    font-family: $typo-family-mono;
+    font-family: var(--typo-family-mono);
     -webkit-font-smoothing: auto;
     line-height: 1.4;
   }
 
   .CodeMirror-gutters {
-    color: $syntax-dark-grey;
-    background-color: $syntax-gutter-grey;
+    color: var(--syntax-dark-grey);
+    background-color: var(--syntax-gutter-grey);
     border: none;
   }
 
@@ -77,20 +81,20 @@ $syntax-yellow: $yellow-500;
   .CodeMirror-line::-moz-selection,
   .CodeMirror-line > span::-moz-selection,
   .CodeMirror-line > span > span::-moz-selection {
-    background: rgba(255, 255, 255, 0.1);
+    background: rgb(var(--white) / 10%);
   }
 
   span.cm-comment {
-    color: $syntax-light-grey;
+    color: var(--syntax-light-grey);
   }
 
   span.cm-string,
   span.cm-string-2 {
-    color: $syntax-packer;
+    color: var(--syntax-packer);
   }
 
   span.cm-number {
-    color: $syntax-serf;
+    color: var(--syntax-serf);
   }
 
   span.cm-variable {
@@ -102,26 +106,26 @@ $syntax-yellow: $yellow-500;
   }
 
   span.cm-def {
-    color: $syntax-packer;
+    color: var(--syntax-packer);
   }
 
   span.cm-operator {
-    color: $syntax-gray;
+    color: var(--syntax-gray);
   }
   span.cm-keyword {
-    color: $syntax-yellow;
+    color: var(--syntax-yellow);
   }
 
   span.cm-atom {
-    color: $syntax-serf;
+    color: var(--syntax-serf);
   }
 
   span.cm-meta {
-    color: $syntax-packer;
+    color: var(--syntax-packer);
   }
 
   span.cm-tag {
-    color: $syntax-packer;
+    color: var(--syntax-packer);
   }
 
   span.cm-attribute {
@@ -150,7 +154,7 @@ $syntax-yellow: $yellow-500;
 
   .CodeMirror-matchingbracket {
     text-decoration: underline;
-    color: $white !important;
+    color: rgb(var(--white)) !important;
   }
 }
 
@@ -161,12 +165,12 @@ $syntax-yellow: $yellow-500;
 
   .cm-s-hashi {
     span {
-      color: $syntax-light-grey;
+      color: var(--syntax-light-grey);
     }
 
     span.cm-string,
     span.cm-string-2 {
-      color: $syntax-faded-gray;
+      color: var(--syntax-faded-gray);
     }
 
     span.cm-number {
@@ -174,11 +178,11 @@ $syntax-yellow: $yellow-500;
     }
 
     span.cm-property {
-      color: $white;
+      color: rgb(var(--white));
     }
 
     span.cm-variable-2 {
-      color: $syntax-light-grey-blue;
+      color: var(--syntax-light-grey-blue);
     }
   }
 }

ui/packages/consul-ui/app/components/collapsible-notices/index.scss

@@ -16,7 +16,7 @@
   }
   button {
     @extend %button;
-    color: $color-action;
+    color: rgb(var(--color-action));
     float: right;
     grid-area: toggle-button;
     margin-top: 1em;

ui/packages/consul-ui/app/components/composite-row/index.scss

@@ -61,7 +61,7 @@
   overflow-x: visible !important;
 }
 .consul-intention-permission-list > ul {
-  border-top: 1px solid $gray-200;
+  border-top: 1px solid rgb(var(--tone-gray-200));
 }
 .consul-service-instance-list .port dt,
 .consul-service-instance-list .port dt::before {
@@ -113,5 +113,5 @@
 %composite-row-header .policy-management dd::before,
 %composite-row-detail .policy-management::before {
   @extend %with-star-fill-mask, %as-pseudo;
-  background-color: var(--brand-600);
+  background-color: rgb(var(--brand-600));
 }

ui/packages/consul-ui/app/components/confirmation-dialog/skin.scss

@@ -1,6 +1,6 @@
 table div.with-confirmation.confirming {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }
 %confirmation-dialog-inline p {
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }

ui/packages/consul-ui/app/components/consul/auth-method/index.scss

@@ -20,14 +20,14 @@
     }
     table {
       thead td {
-        color: var(--gray-500);
-        font-weight: $typo-weight-semibold;
-        font-size: $typo-size-700;
+        color: rgb(var(--tone-gray-500));
+        font-weight: var(--typo-weight-semibold);
+        font-size: var(--typo-size-700);
       }
       tbody {
         td {
-          font-size: $typo-size-600;
-          color: $black;
+          font-size: var(--typo-size-600);
+          color: var(--black);
         }
         tr {
           cursor: default;
@@ -57,7 +57,7 @@
     @extend %tabular-dl;
   }
   code {
-    background-color: var(--gray-050);
+    background-color: rgb(var(--tone-gray-050));
     padding: 0 12px;
   }
 }
@@ -66,15 +66,15 @@
 .consul-auth-method-nspace-list {
   thead {
     td {
-      color: var(--gray-500) !important;
-      font-weight: $typo-weight-semibold !important;
-      font-size: $typo-size-700 !important;
+      color: rgb(var(--tone-gray-500)) !important;
+      font-weight: var(--typo-weight-semibold) !important;
+      font-size: var(--typo-size-700) !important;
     }
   }
   tbody {
     td {
-      font-size: $typo-size-600;
-      color: $black;
+      font-size: var(--typo-size-600);
+      color: var(--black);
     }
     tr {
       cursor: default;

ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs

@@ -6,7 +6,7 @@
       background-color: var(--white);
       border: var(--decor-border-100);
       border-radius: var(--decor-radius-200);
-      border-color: var(--gray-500);
+      border-color: rgb(var(--tone-gray-500));
       box-shadow: var(--decor-elevation-600);
     }
   {{/if}}

ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss

@@ -19,7 +19,7 @@
   transition-property: stroke;
 
   fill: none;
-  stroke: $gray-400;
+  stroke: rgb(var(--tone-gray-400));
   stroke-width: 2;
   vector-effect: non-scaling-stroke;
 }
@@ -30,15 +30,15 @@
 }
 %chain-node,
 %chain-node a {
-  color: $gray-900 !important;
+  color: rgb(var(--tone-gray-900)) !important;
 }
 %discovery-chain-edge-active {
-  stroke: $gray-900;
+  stroke: rgb(var(--tone-gray-900));
 }
 %chain-group {
-  border-radius: $decor-radius-100;
-  border: 1px solid $gray-200;
-  background-color: $gray-100;
+  border-radius: var(--decor-radius-100);
+  border: 1px solid rgb(var(--tone-gray-200));
+  background-color: rgb(var(--tone-gray-100));
 
   pointer-events: none;
 }
@@ -63,8 +63,8 @@
 }
 %chain-node-active {
   opacity: 1;
-  background-color: $white;
-  border-color: $gray-500;
+  background-color: rgb(var(--white));
+  border-color: rgb(var(--tone-gray-500));
 }
 /* TODO: More text truncation, centralize */
 %route-card header:not(.short) dd {
@@ -99,13 +99,13 @@
 /**/
 %with-chain-outlet::before {
   @extend %as-pseudo;
-  background-color: $white;
+  background-color: rgb(var(--white));
 
-  border-radius: $decor-radius-full;
-  border: 2px solid $gray-400;
+  border-radius: var(--decor-radius-full);
+  border: 2px solid rgb(var(--tone-gray-400));
 }
 %discovery-chain circle {
   stroke-width: 2;
-  stroke: $gray-400;
-  fill: $white;
+  stroke: rgb(var(--tone-gray-400));
+  fill: rgb(var(--white));
 }

ui/packages/consul-ui/app/components/consul/exposed-path/list/index.scss

@@ -1,6 +1,6 @@
 .consul-exposed-path-list {
   > ul {
-    border-top: 1px solid $gray-200;
+    border-top: 1px solid rgb(var(--tone-gray-200));
   }
   > ul > li {
     @extend %composite-row;

ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss

@@ -19,7 +19,7 @@
 }
 %healthcheck-output dd em {
   @extend %pill;
-  background-color: $gray-100;
+  background-color: rgb(var(--tone-gray-100));
   /*TODO: Should this be merged into %pill? */
   cursor: default;
   font-style: normal;
@@ -28,41 +28,41 @@
 }
 %healthcheck-output.passing::before {
   @extend %with-check-circle-fill-mask;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %healthcheck-output.warning::before {
   @extend %with-alert-triangle-mask;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %healthcheck-output.critical::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %healthcheck-output,
 %healthcheck-output pre {
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
 }
 %healthcheck-output dd:first-of-type {
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
 %healthcheck-output pre {
-  background-color: $gray-050;
-  color: $gray-600;
+  background-color: rgb(var(--tone-gray-050));
+  color: rgb(var(--tone-gray-600));
 }
 %healthcheck-output {
   /* TODO: this should be a frame-gray */
-  color: $gray-900;
-  border-color: $gray-200;
+  color: rgb(var(--tone-gray-900));
+  border-color: rgb(var(--tone-gray-200));
   border-style: solid;
 
   border-left-width: 4px;
 }
 %healthcheck-output.passing {
-  border-left-color: $green-500;
+  border-left-color: rgb(var(--tone-green-500));
 }
 %healthcheck-output.warning {
-  border-left-color: $yellow-500;
+  border-left-color: rgb(var(--tone-yellow-500));
 }
 %healthcheck-output.critical {
-  border-left-color: $red-500;
+  border-left-color: rgb(var(--tone-red-500));
 }

ui/packages/consul-ui/app/components/consul/intention/components.scss

@@ -9,16 +9,16 @@
 %pill-deny,
 %pill-l7 {
   display: inline-block;
-  font-weight: $typo-weight-normal;
-  font-size: $typo-size-600;
+  font-weight: var(--typo-weight-normal);
+  font-size: var(--typo-size-600);
 }
 %pill-allow {
-  color: $green-800;
-  background-color: $green-100;
+  color: rgb(var(--tone-green-800));
+  background-color: rgb(var(--tone-green-100));
 }
 %pill-deny {
-  color: $red-800;
-  background-color: $red-100;
+  color: rgb(var(--tone-red-800));
+  background-color: rgb(var(--tone-red-100));
 }
 %pill-l7 {
   @extend %frame-gray-900;

ui/packages/consul-ui/app/components/consul/intention/form/fieldsets/skin.scss

@@ -1,7 +1,7 @@
 .consul-intention-fieldsets {
   .value-allow > :last-child::before {
     @extend %with-arrow-right-mask, %as-pseudo;
-    color: $green-500;
+    color: rgb(var(--tone-green-500));
   }
   .value-deny > :last-child::before {
     @extend %with-deny-color-icon, %as-pseudo;

ui/packages/consul-ui/app/components/consul/intention/form/index.scss

@@ -3,7 +3,7 @@
     max-width: 450px;
   }
   .modal-dialog-body p {
-    font-size: $typo-size-600;
+    font-size: var(--typo-size-600);
   }
   button.dangerous {
     @extend %dangerous-button;

ui/packages/consul-ui/app/components/consul/intention/list/skin.scss

@@ -1,5 +1,5 @@
 %consul-intention-list td.permissions {
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 %consul-intention-list em {
   --word-spacing: 0.25rem;

ui/packages/consul-ui/app/components/consul/intention/permission/form/skin.scss

@@ -1,6 +1,6 @@
 .consul-intention-permission-form {
   h2 {
-    border-top: 1px solid $blue-500;
+    border-top: 1px solid rgb(var(--tone-blue-500));
     @extend %h200;
   }
   button.type-submit {

ui/packages/consul-ui/app/components/consul/loader/skin.scss

@@ -1,5 +1,5 @@
 %loader circle {
-  fill: var(--brand-100);
+  fill: rgb(var(--brand-100));
 }
 %loader circle {
   animation: loader-animation 1.5s infinite ease-in-out;

ui/packages/consul-ui/app/components/consul/lock-session/form/index.scss

@@ -1,8 +1,8 @@
 .consul-lock-session-form {
   h2 {
     @extend %h200;
-    border-bottom: $decor-border-200;
-    border-color: $gray-200;
+    border-bottom: var(--decor-border-200);
+    border-color: rgb(var(--tone-gray-200));
     padding-bottom: 0.2em;
     margin-bottom: 0.5em;
   }

ui/packages/consul-ui/app/components/consul/tomography/graph/index.scss

@@ -1,36 +1,36 @@
 .tomography-graph {
   .background {
-    fill: $gray-050;
+    fill: rgb(var(--tone-gray-050));
   }
   .axis {
     fill: none;
-    stroke: $gray-300;
+    stroke: rgb(var(--tone-gray-300));
     stroke-dasharray: 4 4;
   }
   .border {
     fill: none;
-    stroke: $gray-300;
+    stroke: rgb(var(--tone-gray-300));
   }
   .point {
-    stroke: $gray-400;
-    fill: $magenta-600;
+    stroke: rgb(var(--tone-gray-400));
+    fill: rgb(var(--tone-magenta-600));
   }
   .lines rect {
-    fill: $magenta-600;
+    fill: rgb(var(--tone-magenta-600));
     stroke: transparent;
     stroke-width: 5px;
   }
   .lines rect:hover {
-    fill: $gray-300;
+    fill: rgb(var(--tone-gray-300));
     height: 3px;
     y: -1px;
   }
   .tick line {
-    stroke: $gray-300;
+    stroke: rgb(var(--tone-gray-300));
   }
   .tick text {
-    font-size: $typo-size-600;
+    font-size: var(--typo-size-600);
     text-anchor: start;
-    color: $gray-900;
+    color: rgb(var(--tone-gray-900));
   }
 }

ui/packages/consul-ui/app/components/consul/upstream-instance/list/index.scss

@@ -12,6 +12,6 @@
     @extend %with-folder-outline-mask, %as-pseudo;
   }
   dl.local-bind-mode dt {
-    font-weight: $typo-weight-semibold;
+    font-weight: var(--typo-weight-semibold);
   }
 }

ui/packages/consul-ui/app/components/copy-button/skin.scss

@@ -1,22 +1,22 @@
 %copy-button {
-  color: var(--blue-500);
+  color: rgb(var(--tone-blue-500));
   background-color: var(--transparent);
 }
 %copy-button::before {
   @extend %with-copy-action-mask, %as-pseudo;
-  background-color: var(--gray-500);
+  background-color: rgb(var(--tone-gray-500));
 }
 %copy-button::after {
-  background-color: var(--gray-050);
+  background-color: rgb(var(--tone-gray-050));
 }
 %copy-button:hover:not(:disabled):not(:active),
 %copy-button:focus {
-  color: var(--blue-500);
-  background-color: var(--gray-050);
+  color: rgb(var(--tone-blue-500));
+  background-color: rgb(var(--tone-gray-050));
 }
 %copy-button:hover::before {
-  background-color: var(--blue-500);
+  background-color: rgb(var(--tone-blue-500));
 }
 %copy-button:active {
-  background-color: var(--gray-200);
+  background-color: rgb(var(--tone-gray-200));
 }

ui/packages/consul-ui/app/components/empty-state/skin.scss

@@ -1,6 +1,6 @@
 %empty-state {
-  color: $gray-500;
-  background-color: $gray-010;
+  color: rgb(var(--tone-gray-500));
+  background-color: rgb(var(--tone-gray-010));
 }
 %empty-state-header {
   border-bottom: none;

ui/packages/consul-ui/app/components/expanded-single-select/skin.scss

@@ -1,7 +1,7 @@
 %expanded-single-select {
-  border: $decor-border-100;
-  border-color: $gray-300;
-  border-radius: $decor-radius-100;
+  border: var(--decor-border-100);
+  border-color: rgb(var(--tone-gray-300));
+  border-radius: var(--decor-radius-100);
 }
 %expanded-single-select label {
   cursor: pointer;
@@ -9,10 +9,10 @@
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
 %expanded-single-select input[type='radio']:focus + * {
-  box-shadow: $decor-elevation-300;
+  box-shadow: var(--decor-elevation-300);
 }
 %expanded-single-select input[type='radio']:checked + *,
 %expanded-single-select input[type='radio']:hover + *,
 %expanded-single-select input[type='radio']:focus + * {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }

ui/packages/consul-ui/app/components/filter-bar/skin.scss

@@ -1,14 +1,14 @@
 .filter-bar {
   & {
-    background-color: $gray-010;
-    border-bottom: $decor-border-100;
-    border-color: $gray-200;
+    background-color: rgb(var(--tone-gray-010));
+    border-bottom: var(--decor-border-100);
+    border-color: rgb(var(--tone-gray-200));
   }
   .filters,
   .sort {
     .popover-menu > [type='checkbox']:checked + label button {
-      color: $blue-500;
-      background-color: $gray-100;
+      color: rgb(var(--tone-blue-500));
+      background-color: rgb(var(--tone-gray-100));
     }
   }
 }

ui/packages/consul-ui/app/components/flash-message/index.scss

@@ -12,7 +12,7 @@
 /* flash message usage we should be able to remove this */
 %flash-message p.exists strong::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %flash-message p.exists {
   @extend %frame-red-500;

ui/packages/consul-ui/app/components/flash-message/skin.scss

@@ -1,21 +1,21 @@
 %flash-message p {
   border-width: 1px;
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
 }
 %flash-message p strong::before {
   @extend %as-pseudo;
 }
 %flash-message p.success strong::before {
   @extend %with-check-circle-fill-mask;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %flash-message p.warning strong::before {
   @extend %with-alert-triangle-mask;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %flash-message p.error strong::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %flash-message p.success {
   @extend %frame-green-500;

ui/packages/consul-ui/app/components/form-elements/skin.scss

@@ -1,9 +1,9 @@
 %form-element-text-input {
   -moz-appearance: none;
   -webkit-appearance: none;
-  box-shadow: inset $decor-elevation-100;
-  border-radius: $decor-radius-100;
-  border: $decor-border-100;
+  box-shadow: inset var(--decor-elevation-100);
+  border-radius: var(--decor-radius-100);
+  border: var(--decor-border-100);
   outline: none;
 }
 textarea:disabled + .CodeMirror,
@@ -14,21 +14,21 @@ textarea:disabled + .CodeMirror,
 %form fieldset > p,
 %form-element-note,
 %form-element-text-input::placeholder {
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
 %form-element-error > input,
 %form-element-error > textarea {
-  border-color: var(--decor-error-500, $red-500) !important;
+  border-color: var(--decor-error-500, rgb(var(--tone-red-500))) !important;
 }
 %form-element-text-input {
-  color: $gray-500;
-  border-color: $gray-300;
+  color: rgb(var(--tone-gray-500));
+  border-color: rgb(var(--tone-gray-300));
 }
 %form-element-text-input-hover {
-  border-color: $gray-500;
+  border-color: rgb(var(--tone-gray-500));
 }
 %form-element-text-input-focus {
-  border-color: var(--typo-action-500, $blue-500);
+  border-color: var(--typo-action-500, rgb(var(--tone-blue-500)));
 }
 %form-element-label {
   color: var(--typo-contrast-999, inherit);

ui/packages/consul-ui/app/components/freetext-filter/skin.scss

@@ -1,15 +1,15 @@
 .freetext-filter {
   & {
-    border: $decor-border-100;
-    border-radius: $decor-radius-100;
+    border: var(--decor-border-100);
+    border-radius: var(--decor-radius-100);
 
-    background-color: $white;
-    border-color: $gray-200;
-    color: $gray-400;
+    background-color: rgb(var(--white));
+    border-color: rgb(var(--tone-gray-200));
+    color: rgb(var(--tone-gray-400));
   }
   &:hover,
   &:hover * {
-    border-color: $gray-400;
+    border-color: rgb(var(--tone-gray-400));
   }
   & *,
   &_input::placeholder {
@@ -36,14 +36,14 @@
     @extend %with-search-mask;
   }
   .popover-menu {
-    background-color: $gray-050;
-    color: $gray-800;
+    background-color: rgb(var(--tone-gray-050));
+    color: rgb(var(--tone-gray-800));
   }
   .popover-menu {
     border-left: 1px solid;
     border-color: inherit;
   }
   .popover-menu > [type='checkbox']:checked + label button {
-    background-color: $gray-200;
+    background-color: rgb(var(--tone-gray-200));
   }
 }

ui/packages/consul-ui/app/components/hashicorp-consul/index.scss

@@ -7,7 +7,7 @@
     display: none;
   }
   [role='banner'] a svg {
-    fill: var(--brand-600);
+    fill: rgb(var(--brand-600));
   }
   .docs-link a::after {
     @extend %with-docs-mask, %as-pseudo;
@@ -20,7 +20,7 @@
   }
   .acls-separator span {
     @extend %led-icon;
-    color: $red-500;
+    color: rgb(var(--tone-red-500));
     display: inline-block;
     position: relative;
     top: 2px;

ui/packages/consul-ui/app/components/horizontal-kv-list/README.mdx

@@ -202,11 +202,11 @@ dl {
 }
 .lock-delay::before {
   @extend %with-delay-mask, %as-pseudo;
-  color: var(--gray-700);
+  color: rgb(var(--tone-gray-700));
 }
 .ttl::before {
   @extend %with-history-mask, %as-pseudo;
-  color: var(--blue-500);
+  color: rgb(var(--tone-blue-500));
 }
 .service-identity {
   @extend %badge;

ui/packages/consul-ui/app/components/horizontal-kv-list/debug.scss

@@ -4,11 +4,11 @@
   }
   .lock-delay::before {
     @extend %with-delay-mask, %as-pseudo;
-    color: var(--gray-700);
+    color: rgb(var(--tone-gray-700));
   }
   .ttl::before {
     @extend %with-history-mask, %as-pseudo;
-    color: var(--blue-500);
+    color: rgb(var(--tone-blue-500));
   }
   .service-identity {
     @extend %badge;

ui/packages/consul-ui/app/components/icon-definition/index.scss

@@ -8,27 +8,27 @@
 %icon-definition.passing dt::before,
 %composite-row-header .passing dd::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %icon-definition.warning dt::before,
 %composite-row-header .warning dd::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %icon-definition.critical dt::before,
 %composite-row-header .critical dd::before {
   @extend %with-cancel-square-fill-mask, %as-pseudo;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %icon-definition.empty dt::before,
 %composite-row-header .empty dd::before {
   @extend %with-minus-square-fill-mask, %as-pseudo;
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }
 
 %composite-row-header [rel='me'] dd::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 
 %icon-definition.node dt::before {

ui/packages/consul-ui/app/components/informed-action/skin.scss

@@ -1,13 +1,13 @@
 %informed-action {
   & {
-    border-radius: $decor-radius-200;
-    border: $decor-border-100;
-    border-color: $gray-300;
-    background-color: $white;
+    border-radius: var(--decor-radius-200);
+    border: var(--decor-border-100);
+    border-color: rgb(var(--tone-gray-300));
+    background-color: rgb(var(--white));
   }
   > div {
-    border-top-left-radius: $decor-radius-200;
-    border-top-right-radius: $decor-radius-200;
+    border-top-left-radius: var(--decor-radius-200);
+    border-top-right-radius: var(--decor-radius-200);
     cursor: default;
   }
   header {
@@ -18,52 +18,52 @@
   }
   p {
     @extend %p2;
-    color: $black;
+    color: var(--black);
   }
   > ul {
     list-style: none;
   }
   > ul > li > *:hover,
   > ul > li > *:focus {
-    background-color: $gray-100;
+    background-color: rgb(var(--tone-gray-100));
   }
   /* variants */
   &.info {
     header {
-      color: $blue-700;
+      color: rgb(var(--tone-blue-700));
     }
     header::before {
       @extend %with-info-circle-fill-mask, %as-pseudo;
-      background-color: $blue-500;
+      background-color: rgb(var(--tone-blue-500));
       margin-right: 5px;
     }
     > div {
-      background-color: $blue-010;
+      background-color: rgb(var(--tone-blue-010));
     }
   }
   &.dangerous {
     header {
-      color: $red-700;
+      color: rgb(var(--tone-red-700));
     }
     header::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: $red-500;
+      background-color: rgb(var(--tone-red-500));
     }
     > div {
-      background-color: $red-010;
+      background-color: rgb(var(--tone-red-010));
     }
   }
   &.warning {
     header {
-      color: $orange-700;
+      color: rgb(var(--tone-orange-700));
     }
     header::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: $yellow-500;
+      background-color: rgb(var(--tone-yellow-500));
       margin-right: 5px;
     }
     > div {
-      background-color: $yellow-050;
+      background-color: rgb(var(--tone-yellow-050));
     }
   }
   /* brands */
@@ -74,7 +74,7 @@
   }
   /**/
   > ul > .action > * {
-    color: $blue-500;
+    color: rgb(var(--tone-blue-500));
   }
   > ul > .dangerous > * {
     @extend %frame-red-300;

ui/packages/consul-ui/app/components/inline-alert/skin.scss

@@ -12,7 +12,7 @@
   color: inherit;
 }
 %inline-alert-error {
-  color: $color-failure;
+  color: rgb(var(--color-failure));
 }
 %inline-alert::before {
   font-size: 14px;
@@ -22,15 +22,15 @@
 }
 %inline-alert-success::before {
   @extend %with-check-circle-fill-mask;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %inline-alert-error::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %inline-alert-warning::before {
   @extend %with-alert-triangle-mask;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
   /* the warning triangle always looks */
   /* too low just because its a triangle */
   /* this tweak make it look better */
@@ -38,5 +38,5 @@
 }
 %inline-alert-info::before {
   @extend %with-info-circle-fill-mask;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }

ui/packages/consul-ui/app/components/inline-code/skin.scss

@@ -1,6 +1,6 @@
 %inline-code {
   border: 1px solid;
-  color: var(--brand-600, inherit);
-  background-color: var(--gray-050);
-  border-color: var(--gray-200);
+  color: var(rgb(var(--brand-600)), inherit);
+  background-color: rgb(var(--tone-gray-050));
+  border-color: rgb(var(--tone-gray-200));
 }

ui/packages/consul-ui/app/components/list-collection/skin.scss

@@ -1,11 +1,11 @@
 %list-collection > ul {
   border-top: 1px solid;
-  border-color: var(--gray-200);
+  border-color: rgb(var(--tone-gray-200));
 }
 %list-collection-partial-button {
   cursor: pointer;
-  background-color: var(--gray-050);
-  color: var(--blue-500);
+  background-color: rgb(var(--tone-gray-050));
+  color: rgb(var(--tone-blue-500));
 }
 %list-collection-partial-button::after {
   @extend %with-chevron-up-mask, %as-pseudo;

ui/packages/consul-ui/app/components/list-row/skin.scss

@@ -1,30 +1,30 @@
 %list-row {
   list-style-type: none;
-  border: $decor-border-100;
-  border-top-color: $transparent;
-  border-bottom-color: $gray-200;
-  border-right-color: $transparent;
-  border-left-color: $transparent;
+  border: var(--decor-border-100);
+  border-top-color: var(--transparent);
+  border-bottom-color: rgb(var(--tone-gray-200));
+  border-right-color: var(--transparent);
+  border-left-color: var(--transparent);
 }
 %list-row-intent {
-  border-color: $gray-200;
+  border-color: rgb(var(--tone-gray-200));
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  border-top-color: $transparent;
+  border-top-color: var(--transparent);
   cursor: pointer;
 }
 %list-row-header {
-  color: $black;
+  color: var(--black);
 }
 %list-row-header * {
   color: inherit;
 }
 %list-row-detail {
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }
 %list-row-detail a {
   color: inherit;
 }
 %list-row-detail a:hover {
-  color: $color-action;
+  color: rgb(var(--color-action));
   text-decoration: underline;
 }

ui/packages/consul-ui/app/components/main-header-horizontal/skin.scss

@@ -1,3 +1,3 @@
 %main-header-horizontal::before {
-  background-color: var(--gray-000);
+  background-color: rgb(var(--tone-gray-000));
 }

ui/packages/consul-ui/app/components/main-nav-horizontal/skin.scss

@@ -1,5 +1,5 @@
 %main-nav-horizontal-action {
-  border-radius: $decor-radius-200;
+  border-radius: var(--decor-radius-200);
   cursor: pointer;
 }
 %main-nav-horizontal-action > a {
@@ -16,11 +16,11 @@
   cursor: pointer;
 }
 %main-nav-horizontal-toggle-button::before {
-  background-color: var(--gray-800);
+  background-color: rgb(var(--tone-gray-800));
 }
 %main-nav-horizontal-action,
 %main-nav-horizontal-action-intent,
 %main-nav-horizontal-action-active {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 /**/

ui/packages/consul-ui/app/components/main-nav-vertical/README.mdx

@@ -65,7 +65,7 @@ you need to define a different ancestor for a containing block you can use
   /* a transform is required to mark this element as the containing block */
   /* for hoisting, otherwise the viewport is the containing block */
   transform: translate(0, 0);
-  background-color: var(--gray-600);
+  background-color: rgb(var(--tone-gray-600));
   padding-top: 64px;
 }
 ```

ui/packages/consul-ui/app/components/main-nav-vertical/debug.scss

@@ -15,7 +15,7 @@
     /* a transform is required to mark this element as the containing block */
     /* for hoisting, otherwise the viewport is the containing block */
     transform: translate(0, 0);
-    background-color: var(--gray-600);
+    background-color: rgb(var(--tone-gray-600));
     padding-top: 64px;
   }
   // TODO: Reduce the need for these debug overrides

ui/packages/consul-ui/app/components/main-nav-vertical/index.scss

@@ -30,14 +30,14 @@
   border-top-right-radius: 0;
 }
 %main-nav-vertical .popover-menu > label > button {
-  border: $decor-border-100;
-  border-color: var(--gray-500);
-  color: var(--gray-999);
+  border: var(--decor-border-100);
+  border-color: rgb(var(--tone-gray-500));
+  color: rgb(var(--tone-gray-999));
   width: calc(100% - 20px);
   z-index: 100;
   text-align: left;
   padding: 10px;
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
 }
 %main-nav-vertical .popover-menu > label > button::after {
   float: right;

ui/packages/consul-ui/app/components/main-nav-vertical/skin.scss

@@ -1,7 +1,7 @@
 %main-nav-vertical-action {
   cursor: pointer;
-  border-right: $decor-border-400;
-  border-color: $transparent;
+  border-right: var(--decor-border-400);
+  border-color: var(--transparent);
   @extend %p1;
 }
 %main-nav-vertical-action > a {
@@ -11,7 +11,7 @@
 %main-nav-vertical [role='separator'] {
   @extend %p3;
   text-transform: uppercase;
-  font-weight: $typo-weight-medium;
+  font-weight: var(--typo-weight-medium);
 }
 %main-nav-vertical-action-intent {
   text-decoration: underline;
@@ -20,25 +20,25 @@
   text-decoration: none;
 }
 %main-nav-vertical {
-  background-color: var(--gray-050);
-  color: var(--gray-700);
+  background-color: rgb(var(--tone-gray-050));
+  color: rgb(var(--tone-gray-700));
 }
 %main-nav-vertical li:not([role='separator']) > span {
-  color: var(--gray-300);
+  color: rgb(var(--tone-gray-300));
 }
 %main-nav-vertical [role='separator'] {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 %main-nav-vertical-action {
-  color: var(--gray-800);
+  color: rgb(var(--tone-gray-800));
 }
 %main-nav-vertical-action-intent,
 %main-nav-vertical-action-active {
-  color: var(--gray-999);
+  color: rgb(var(--tone-gray-999));
 }
 %main-nav-vertical-action-active {
-  background-color: var(--gray-150);
-  border-color: var(--gray-999);
+  background-color: rgb(var(--tone-gray-150));
+  border-color: rgb(var(--tone-gray-999));
 }
 %main-nav-vertical .popover-menu[aria-label]::before {
   content: attr(aria-label);
@@ -48,17 +48,17 @@
 }
 %main-nav-vertical .is-local span:last-of-type {
   @extend %pill-200;
-  color: var(--gray-000);
-  background-color: var(--gray-500);
+  color: rgb(var(--tone-gray-000));
+  background-color: rgb(var(--tone-gray-500));
 }
 %main-nav-vertical .nspaces .menu-panel > div {
-  background-color: var(--gray-050);
-  color: var(--gray-999);
+  background-color: rgb(var(--tone-gray-050));
+  color: rgb(var(--tone-gray-999));
   padding-left: 36px;
 }
 %main-nav-vertical .nspaces .menu-panel > div::before {
   @extend %with-info-circle-fill-mask, %as-pseudo;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
   /* sizes the icon not the text */
   font-size: 1.1em;
 }

ui/packages/consul-ui/app/components/menu-panel/skin.scss

@@ -1,13 +1,13 @@
 %menu-panel {
-  border: $decor-border-100;
-  border-radius: $decor-radius-200;
-  box-shadow: $decor-elevation-600;
+  border: var(--decor-border-100);
+  border-radius: var(--decor-radius-200);
+  box-shadow: var(--decor-elevation-600);
 }
 %menu-panel > ul > li {
   list-style-type: none;
 }
 %menu-panel dt {
-  font-weight: $typo-weight-bold;
+  font-weight: var(--typo-weight-bold);
 }
 %menu-panel dl,
 %menu-panel-header {
@@ -16,33 +16,33 @@
 %menu-panel-separator {
   @extend %p3;
   text-transform: uppercase;
-  font-weight: $typo-weight-medium;
+  font-weight: var(--typo-weight-medium);
 }
 %menu-panel dt span {
-  font-weight: $typo-weight-normal;
+  font-weight: var(--typo-weight-normal);
 }
 %menu-panel-header + ul,
 %menu-panel-separator:not(:first-child) {
-  border-top: $decor-border-100;
+  border-top: var(--decor-border-100);
 }
 %menu-panel .is-active > *::after {
   @extend %with-check-plain-mask, %as-pseudo;
 }
 %menu-panel {
-  border-color: var(--gray-300);
-  background-color: var(--gray-000);
+  border-color: rgb(var(--tone-gray-300));
+  background-color: rgb(var(--tone-gray-000));
 }
 %menu-panel dt,
 %menu-panel dd {
-  color: var(--gray-800);
+  color: rgb(var(--tone-gray-800));
 }
 %menu-panel dt span {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 %menu-panel-separator {
-  color: var(--gray-600);
+  color: rgb(var(--tone-gray-600));
 }
 %menu-panel-header + ul,
 %menu-panel-separator:not(:first-child) {
-  border-color: var(--gray-300);
+  border-color: rgb(var(--tone-gray-300));
 }

ui/packages/consul-ui/app/components/modal-dialog/skin.scss

@@ -1,28 +1,28 @@
 %modal-dialog.warning header {
-  background-color: $yellow-050;
-  border-color: $yellow-500;
-  color: $yellow-800;
+  background-color: rgb(var(--tone-yellow-050));
+  border-color: rgb(var(--tone-yellow-500));
+  color: rgb(var(--tone-yellow-800));
 }
 %modal-dialog.warning header > *:not(label) {
-  font-size: $typo-size-500;
-  font-weight: $typo-weight-semibold;
+  font-size: var(--typo-size-500);
+  font-weight: var(--typo-weight-semibold);
 }
 %modal-dialog.warning header::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: $yellow-500;
+  color: rgb(var(--tone-yellow-500));
   float: left;
   margin-top: 2px;
   margin-right: 3px;
 }
 %modal-dialog-overlay {
-  background-color: rgba($white, 0.9);
+  background-color: rgb(var(--white) / 90%);
 }
 %modal-window {
-  box-shadow: $decor-elevation-800;
+  box-shadow: var(--decor-elevation-800);
 }
 %modal-window {
   /*%frame-gray-000*/
-  background-color: var(--gray-000);
+  background-color: rgb(var(--tone-gray-000));
 }
 %modal-window > footer,
 %modal-window > header {
@@ -35,7 +35,7 @@
 .modal-dialog-body,
 %modal-window > footer,
 %modal-window > header {
-  border-color: var(--gray-300);
+  border-color: rgb(var(--tone-gray-300));
 }
 .modal-dialog-body {
   border-style: solid;
@@ -50,9 +50,9 @@
 %modal-window > header [data-a11y-dialog-hide] {
   @extend %with-cancel-plain-icon;
   cursor: pointer;
-  border: $decor-border-100;
+  border: var(--decor-border-100);
   /*%frame-gray-050??*/
-  background-color: var(--gray-050);
-  border-color: var(--gray-300);
-  border-radius: $decor-radius-100;
+  background-color: rgb(var(--tone-gray-050));
+  border-color: rgb(var(--tone-gray-300));
+  border-radius: var(--decor-radius-100);
 }

ui/packages/consul-ui/app/components/more-popover-menu/index.scss

@@ -14,15 +14,15 @@
   padding: 7px;
 }
 %more-popover-menu-trigger > * {
-  background-color: $transparent;
-  border-radius: $decor-radius-100;
+  background-color: var(--transparent);
+  border-radius: var(--decor-radius-100);
   width: 30px;
   height: 30px;
   font-size: 0;
 }
 %more-popover-menu-trigger > *::after {
   @extend %with-more-horizontal-mask, %as-pseudo;
-  background-color: $gray-900;
+  background-color: rgb(var(--tone-gray-900));
   width: 16px;
   height: 16px;
   position: absolute;
@@ -32,9 +32,9 @@
   margin-left: -8px;
 }
 %more-popover-menu-trigger > *:active {
-  background-color: $gray-100;
+  background-color: rgb(var(--tone-gray-100));
 }
 %more-popover-menu-trigger > *:hover,
 %more-popover-menu-trigger > *:focus {
-  background-color: $gray-050;
+  background-color: rgb(var(--tone-gray-050));
 }

ui/packages/consul-ui/app/components/notice/skin.scss

@@ -1,7 +1,7 @@
 %notice {
-  border-radius: $decor-radius-100;
-  border: $decor-border-100;
-  color: $black;
+  border-radius: var(--decor-radius-100);
+  border: var(--decor-border-100);
+  color: var(--black);
 }
 %notice::before {
   @extend %as-pseudo;
@@ -11,7 +11,7 @@
 }
 %notice footer * {
   @extend %p3;
-  font-weight: $typo-weight-bold;
+  font-weight: var(--typo-weight-bold);
 }
 %notice-success,
 %notice-info,
@@ -21,51 +21,51 @@
   @extend %notice;
 }
 %notice-success {
-  background-color: $green-050;
-  border-color: $green-500;
+  background-color: rgb(var(--tone-green-050));
+  border-color: rgb(var(--tone-green-500));
 }
 %notice-info {
-  border-color: $blue-100;
-  background-color: $gray-010;
+  border-color: rgb(var(--tone-blue-100));
+  background-color: rgb(var(--tone-gray-010));
 }
 %notice-info header * {
-  color: $blue-700;
+  color: rgb(var(--tone-blue-700));
 }
 %notice-highlight {
-  background-color: $gray-050;
-  border-color: $gray-300;
+  background-color: rgb(var(--tone-gray-050));
+  border-color: rgb(var(--tone-gray-300));
 }
 %notice-info header * {
-  color: $gray-700;
+  color: rgb(var(--tone-gray-700));
 }
 %notice-warning {
-  border-color: $yellow-100;
-  background-color: $yellow-050;
+  border-color: rgb(var(--tone-yellow-100));
+  background-color: rgb(var(--tone-yellow-050));
 }
 %notice-warning header * {
-  color: $yellow-800;
+  color: rgb(var(--tone-yellow-800));
 }
 %notice-error {
-  background-color: $red-050;
-  border-color: $red-500;
+  background-color: rgb(var(--tone-red-050));
+  border-color: rgb(var(--tone-red-500));
 }
 %notice-success::before {
   @extend %with-check-circle-fill-mask;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %notice-info::before {
   @extend %with-info-circle-fill-mask;
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 %notice-highlight::before {
   @extend %with-star-fill-mask;
-  color: $yellow-500;
+  color: rgb(var(--tone-yellow-500));
 }
 %notice-warning::before {
   @extend %with-alert-triangle-mask;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %notice-error::before {
   @extend %with-cancel-square-fill-mask;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }

ui/packages/consul-ui/app/components/overlay/none.scss

@@ -26,9 +26,9 @@
     transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
   }
   & {
-    background-color: $white;
-    border-radius: $decor-radius-100;
-    box-shadow: $decor-elevation-400;
+    background-color: rgb(var(--white));
+    border-radius: var(--decor-radius-100);
+    box-shadow: var(--decor-elevation-400);
   }
   .tippy-arrow {
     @extend %overlay-tail;

ui/packages/consul-ui/app/components/overlay/square-tail.scss

@@ -4,11 +4,11 @@
     left: calc(0px - (var(--size) / 2)) !important;
   }
   .tippy-arrow::before {
-    background-color: $white;
+    background-color: rgb(var(--white));
     width: calc(1px + var(--size));
     height: calc(1px + var(--size));
-    border: $decor-border-100;
-    border-color: $gray-300;
+    border: var(--decor-border-100);
+    border-color: rgb(var(--tone-gray-300));
   }
   // potential icon
   .tippy-arrow::after {
@@ -23,8 +23,8 @@
       border-bottom-left-radius: 0 !important;
     }
     .tippy-arrow::before {
-      border-bottom-left-radius: $decor-radius-200;
-      border-bottom-right-radius: $decor-radius-200;
+      border-bottom-left-radius: var(--decor-radius-200);
+      border-bottom-right-radius: var(--decor-radius-200);
       border-top: 0 !important;
     }
     .tippy-arrow::after {
@@ -39,8 +39,8 @@
       border-top-left-radius: 0 !important;
     }
     .tippy-arrow::before {
-      border-top-left-radius: $decor-radius-200;
-      border-top-right-radius: $decor-radius-200;
+      border-top-left-radius: var(--decor-radius-200);
+      border-top-right-radius: var(--decor-radius-200);
       border-bottom: 0 !important;
     }
     .tippy-arrow::after {

ui/packages/consul-ui/app/components/pill/skin.scss

@@ -1,3 +1,3 @@
 %pill {
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
 }

ui/packages/consul-ui/app/components/popover-select/index.scss

@@ -23,19 +23,19 @@
 
 %popover-select .value-passing button::before {
   @extend %with-check-circle-fill-mask, %as-pseudo;
-  color: $green-500;
+  color: rgb(var(--tone-green-500));
 }
 %popover-select .value-warning button::before {
   @extend %with-alert-triangle-mask, %as-pseudo;
-  color: $orange-500;
+  color: rgb(var(--tone-orange-500));
 }
 %popover-select .value-critical button::before {
   @extend %with-cancel-square-fill-mask, %as-pseudo;
-  color: $red-500;
+  color: rgb(var(--tone-red-500));
 }
 %popover-select .value-empty button::before {
   @extend %with-minus-square-fill-mask, %as-pseudo;
-  color: $gray-400;
+  color: rgb(var(--tone-gray-400));
 }
 %popover-select.type-source li button {
   text-transform: capitalize;

ui/packages/consul-ui/app/components/radio-card/skin.scss

@@ -1,25 +1,25 @@
 %radio-card {
-  border: $decor-border-100;
-  border-radius: $decor-radius-100;
-  border-color: $gray-200;
-  box-shadow: $decor-elevation-400;
-  color: $gray-500;
+  border: var(--decor-border-100);
+  border-radius: var(--decor-radius-100);
+  border-color: rgb(var(--tone-gray-200));
+  box-shadow: var(--decor-elevation-400);
+  color: rgb(var(--tone-gray-500));
   cursor: pointer;
 }
 %radio-card.checked {
-  border-color: $blue-500;
+  border-color: rgb(var(--tone-blue-500));
 }
 %radio-card > :first-child {
-  background-color: $gray-050;
+  background-color: rgb(var(--tone-gray-050));
 }
 %radio-card.checked > :first-child {
-  background-color: $blue-050;
+  background-color: rgb(var(--tone-blue-050));
 }
 %radio-card header {
   margin-bottom: 0.5em;
 }
 %radio-card header {
-  color: $black;
+  color: var(--black);
 }
 %radio-card-with-icon > :last-child {
   padding-left: 47px;

ui/packages/consul-ui/app/components/search-bar/index.scss

@@ -1,8 +1,8 @@
 .search-bar {
   &-status {
     & {
-      border-bottom: $decor-border-100;
-      border-bottom-color: $gray-200;
+      border-bottom: var(--decor-border-100);
+      border-bottom-color: rgb(var(--tone-gray-200));
     }
     .remove-all button {
       @extend %anchor;
@@ -10,16 +10,16 @@
     li:not(.remove-all) {
       & {
         @extend %pill-200;
-        border: $decor-border-100;
-        border-color: $gray-200;
-        color: $gray-600;
+        border: var(--decor-border-100);
+        border-color: rgb(var(--tone-gray-200));
+        color: rgb(var(--tone-gray-600));
       }
       button {
         cursor: pointer;
       }
       button::before {
         @extend %with-cancel-plain-mask, %as-pseudo;
-        color: $gray-600;
+        color: rgb(var(--tone-gray-600));
         margin-top: 1px;
         margin-right: 0.2rem;
       }

ui/packages/consul-ui/app/components/secret-button/index.scss

@@ -15,7 +15,7 @@
 }
 %secret-button span::before {
   @extend %with-visibility-show-mask, %as-pseudo;
-  background-color: $gray-500;
+  background-color: rgb(var(--tone-gray-500));
 }
 %secret-button input:checked + span::before {
   @extend %with-visibility-hide-mask;

ui/packages/consul-ui/app/components/skip-links/skin.scss

@@ -1,7 +1,7 @@
 %skip-links {
-  outline: 1px solid $white;
-  color: $white;
-  background-color: $blue-500;
+  outline: 1px solid rgb(var(--white));
+  color: rgb(var(--white));
+  background-color: rgb(var(--tone-blue-500));
 }
 %skip-links button,
 %skip-links a {

ui/packages/consul-ui/app/components/sliding-toggle/skin.scss

@@ -3,7 +3,7 @@
   cursor: pointer;
 }
 %sliding-toggle label span::after {
-  border-radius: $decor-radius-full;
+  border-radius: var(--decor-radius-full);
 }
 %sliding-toggle label span::before {
   border-radius: 7px;
@@ -15,16 +15,16 @@
   @extend %sliding-toggle-negative;
 }
 %sliding-toggle label span {
-  color: $gray-900;
+  color: rgb(var(--tone-gray-900));
 }
 %sliding-toggle label span::after {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }
 %sliding-toggle label input:checked + span::before,
 %sliding-toggle-negative label input + span::before {
-  background-color: $blue-500;
+  background-color: rgb(var(--tone-blue-500));
 }
 %sliding-toggle label span::before,
 %sliding-toggle-negative label input:checked + span::before {
-  background-color: $gray-300;
+  background-color: rgb(var(--tone-gray-300));
 }

ui/packages/consul-ui/app/components/tab-nav/skin.scss

@@ -10,29 +10,29 @@
 }
 %tab-nav {
   /* %frame-transparent-something */
-  border-bottom: $decor-border-100;
+  border-bottom: var(--decor-border-100);
 }
 %with-animated-tab-selection ul::after,
 %tab-button {
-  border-bottom: $decor-border-300;
+  border-bottom: var(--decor-border-300);
 }
 %tab-nav {
   /* %frame-transparent-something */
-  border-color: var(--gray-200);
+  border-color: rgb(var(--tone-gray-200));
 }
 %tab-button {
   @extend %with-transition-500;
   transition-property: background-color, border-color;
   border-color: var(--transparent);
-  color: var(--gray-500);
+  color: rgb(var(--tone-gray-500));
 }
 %tab-button-intent,
 %tab-button-active {
   /* %frame-gray-something */
-  background-color: var(--gray-100);
+  background-color: rgb(var(--tone-gray-100));
 }
 %tab-button-intent {
-  border-color: var(--gray-300);
+  border-color: rgb(var(--tone-gray-300));
 }
 %tab-nav.animatable .selected a {
   border-color: var(--transparent) !important;

ui/packages/consul-ui/app/components/table/index.scss

@@ -21,7 +21,7 @@ table.consul-metadata-list tbody tr:hover {
 
 %table th span::after {
   @extend %with-info-circle-outline-mask, %as-pseudo;
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
   margin-left: 4px;
 }
 %table tbody tr {
@@ -31,12 +31,12 @@ table.consul-metadata-list tbody tr:hover {
   padding: 0;
 }
 %table tbody tr:hover {
-  box-shadow: $decor-elevation-300;
+  box-shadow: var(--decor-elevation-300);
 }
 
 %table td.folder::before {
   @extend %with-folder-outline-mask, %as-pseudo;
-  background-color: $gray-300;
+  background-color: rgb(var(--tone-gray-300));
   margin-top: 1px;
   margin-right: 5px;
 }

ui/packages/consul-ui/app/components/table/layout.scss

@@ -59,5 +59,5 @@
   font-weight: normal;
 }
 %table tbody td em {
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }

ui/packages/consul-ui/app/components/table/skin.scss

@@ -1,17 +1,17 @@
 %table th,
 %table td {
-  border-bottom: $decor-border-100;
+  border-bottom: var(--decor-border-100);
 }
 %table th {
-  border-color: $gray-300;
+  border-color: rgb(var(--tone-gray-300));
 }
 %table td {
-  border-color: $gray-200;
-  color: $gray-500;
+  border-color: rgb(var(--tone-gray-200));
+  color: rgb(var(--tone-gray-500));
 }
 %table th,
 %table td strong {
-  color: $gray-600;
+  color: rgb(var(--tone-gray-600));
 }
 /* TODO: Add to native selector `tbody th` - will involve moving all
  * current th's to `thead th` and changing the templates
@@ -19,7 +19,7 @@
  */
 %table a,
 %tbody-th {
-  color: $gray-900;
+  color: rgb(var(--tone-gray-900));
 }
 %table td:first-child {
   @extend %tbody-th;

ui/packages/consul-ui/app/components/tabular-details/skin.scss

@@ -6,22 +6,22 @@
   border: 0;
 }
 %tabular-detail {
-  border: 1px solid $gray-300;
-  border-radius: $decor-radius-100;
-  box-shadow: $decor-elevation-600;
+  border: 1px solid rgb(var(--tone-gray-300));
+  border-radius: var(--decor-radius-100);
+  box-shadow: var(--decor-elevation-600);
   margin-bottom: 20px;
 }
 %tabular-detail::before,
 %tabular-detail > div,
 %tabular-detail > label {
-  background-color: $white;
+  background-color: rgb(var(--white));
 }
 %tabular-detail > label::before {
   transform: rotate(180deg);
 }
 // this is here as its a fake border
 %tabular-detail::before {
-  background: $gray-200;
+  background: rgb(var(--tone-gray-200));
   content: '';
   display: block;
   height: 1px;

ui/packages/consul-ui/app/components/tabular-dl/skin.scss

@@ -1,21 +1,21 @@
 %tabular-dl {
   > dt:last-of-type,
   > dd:last-of-type {
-    border-color: var(--gray-300) !important;
+    border-color: rgb(var(--tone-gray-300)) !important;
   }
   dt,
   dd {
-    border-color: var(--gray-300) !important;
-    color: $black !important;
+    border-color: rgb(var(--tone-gray-300)) !important;
+    color: var(--black) !important;
   }
   dt {
-    font-weight: $typo-weight-bold;
+    font-weight: var(--typo-weight-bold);
   }
   dd .copy-button button::before {
-    background-color: $black;
+    background-color: var(--black);
   }
   dt.type + dd span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: var(--gray-500);
+    background-color: rgb(var(--tone-gray-500));
   }
 }

ui/packages/consul-ui/app/components/tag-list/index.scss

@@ -8,7 +8,7 @@ td.tags {
 %tag-list dt::before {
   @extend %with-tag-mask, %as-pseudo;
   color: inherit;
-  color: var(--gray-500);
+  color: rgb(var(--tone-gray-500));
 }
 %tag-list dd {
   @extend %csv-list;

ui/packages/consul-ui/app/components/toggle-button/skin.scss

@@ -1,12 +1,12 @@
 %toggle-button {
-  border-radius: $decor-radius-100;
+  border-radius: var(--decor-radius-100);
   cursor: pointer;
 }
 %toggle-button-intent {
-  background-color: $gray-050;
+  background-color: rgb(var(--tone-gray-050));
 }
 %toggle-button-active {
-  background-color: $gray-100;
+  background-color: rgb(var(--tone-gray-100));
 }
 %toggle-button:hover,
 %toggle-button:focus {

ui/packages/consul-ui/app/components/tooltip-panel/skin.scss

@@ -7,8 +7,8 @@
   width: 12px;
   height: 12px;
   background: white;
-  border-top: 1px solid $gray-300;
-  border-right: 1px solid $gray-300;
+  border-top: 1px solid rgb(var(--tone-gray-300));
+  border-right: 1px solid rgb(var(--tone-gray-300));
   transform: rotate(-45deg);
   position: absolute;
   left: 16px;

ui/packages/consul-ui/app/components/tooltip/index.scss

@@ -31,19 +31,19 @@
 
 %tooltip-bubble {
   & {
-    background-color: $gray-700;
-    color: $white;
+    background-color: rgb(var(--tone-gray-700));
+    color: rgb(var(--white));
   }
 }
 %tooltip-tail {
   --size: 5px;
   & {
-    color: $gray-700;
+    color: rgb(var(--tone-gray-700));
     width: calc(var(--size) * 2);
     height: calc(var(--size) * 2);
   }
   &::before {
-    border-color: $transparent;
+    border-color: var(--transparent);
     border-style: solid;
   }
 }

ui/packages/consul-ui/app/components/topology-metrics/card/index.scss

@@ -5,15 +5,15 @@
 #upstream-container .topology-metrics-card,
 #downstream-container .topology-metrics-card {
   display: block;
-  color: $gray-700;
+  color: rgb(var(--tone-gray-700));
   overflow: hidden;
-  background-color: $white;
-  border-radius: $decor-radius-100;
-  border: 1px solid $gray-200;
+  background-color: rgb(var(--white));
+  border-radius: var(--decor-radius-100);
+  border: 1px solid rgb(var(--tone-gray-200));
   p {
     padding: 12px 12px 0 12px;
-    font-size: $typo-size-500;
-    font-weight: $typo-weight-semibold;
+    font-size: var(--typo-size-500);
+    font-weight: var(--typo-weight-semibold);
     margin-bottom: 0 !important;
   }
   p.empty {
@@ -26,7 +26,7 @@
       margin-right: 8px;
     }
     dd {
-      color: $gray-700;
+      color: rgb(var(--tone-gray-700));
     }
     span {
       margin-right: 8px;
@@ -53,23 +53,23 @@
     }
     .nspace dt::before,
     .health dt::before {
-      background-color: $gray-500;
+      background-color: rgb(var(--tone-gray-500));
     }
     .passing::before {
       @extend %with-check-circle-fill-mask, %as-pseudo;
-      background-color: $green-500;
+      background-color: rgb(var(--tone-green-500));
     }
     .warning::before {
       @extend %with-alert-triangle-mask, %as-pseudo;
-      background-color: $orange-500;
+      background-color: rgb(var(--tone-orange-500));
     }
     .critical::before {
       @extend %with-cancel-square-fill-mask, %as-pseudo;
-      background-color: $red-500;
+      background-color: rgb(var(--tone-red-500));
     }
     .empty::before {
       @extend %with-minus-square-fill-mask, %as-pseudo;
-      color: $gray-500;
+      color: rgb(var(--tone-gray-500));
     }
   }
   .details {

ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss

@@ -2,7 +2,7 @@
   > button {
     position: absolute;
     transform: translate(-50%, -50%);
-    background-color: $white;
+    background-color: rgb(var(--white));
     padding: 1px 1px;
     &:hover {
       cursor: pointer;
@@ -21,16 +21,16 @@
   &.deny > button::before,
   &.deny .tippy-arrow::after {
     @extend %with-cancel-square-fill-mask, %as-pseudo;
-    background-color: $red-500;
+    background-color: rgb(var(--tone-red-500));
   }
   &.l7 > button::before,
   &.l7 .tippy-arrow::after {
     @extend %with-layers-mask, %as-pseudo;
-    background-color: $gray-300;
+    background-color: rgb(var(--tone-gray-300));
   }
   &.not-defined > button::before,
   &.not-defined .tippy-arrow::after {
     @extend %with-alert-triangle-mask, %as-pseudo;
-    color: $yellow-500;
+    color: rgb(var(--tone-yellow-500));
   }
 }

ui/packages/consul-ui/app/components/topology-metrics/series/skin.scss

@@ -8,7 +8,7 @@
     font-size: 0.875em;
     line-height: 1.5em;
     font-weight: normal;
-    border: 1px solid $gray-300;
+    border: 1px solid rgb(var(--tone-gray-300));
     background: #fff;
     border-radius: 2px;
     box-sizing: border-box;
@@ -19,7 +19,7 @@
       font-weight: bold;
       font-size: 14px;
       color: #000;
-      border-bottom: 1px solid $gray-200;
+      border-bottom: 1px solid rgb(var(--tone-gray-200));
       margin-bottom: 4px;
       text-align: center;
     }
@@ -31,7 +31,7 @@
     }
 
     .sparkline-tt-sum {
-      border-top: 1px solid $gray-200;
+      border-top: 1px solid rgb(var(--tone-gray-200));
       margin-top: 4px;
       padding: 8px 10px 0 10px;
     }
@@ -58,7 +58,7 @@
     height: 12px;
     left: 15px;
     bottom: -7px;
-    border: 1px solid $gray-300;
+    border: 1px solid rgb(var(--tone-gray-300));
     border-top: 0;
     border-left: 0;
     background: #fff;
@@ -75,7 +75,7 @@
   }
 
   h3 {
-    color: $gray-900;
+    color: rgb(var(--tone-gray-900));
     font-size: 16px;
   }
 
@@ -84,16 +84,16 @@
       font-weight: 600;
     }
     dd {
-      color: $gray-500;
+      color: rgb(var(--tone-gray-500));
     }
   }
 }
 
 .sparkline-key-link {
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
 }
 .sparkline-key-link:hover {
-  color: $blue-500;
+  color: rgb(var(--tone-blue-500));
 }
 #metrics-container:hover .sparkline-key-link::before {
   @extend %with-info-circle-fill-mask, %as-pseudo;

ui/packages/consul-ui/app/components/topology-metrics/skin.scss

@@ -1,41 +1,41 @@
 .topology-container {
-  color: $gray-700;
+  color: rgb(var(--tone-gray-700));
 }
 
 // Columns/Containers & Lines
 #downstream-container,
 #metrics-container,
 #upstream-container {
-  border: 1px solid $gray-200;
-  border-radius: $decor-radius-100;
+  border: 1px solid rgb(var(--tone-gray-200));
+  border-radius: var(--decor-radius-100);
 }
 #downstream-container,
 #upstream-container {
-  background-color: $gray-100;
+  background-color: rgb(var(--tone-gray-100));
 }
 #downstream-container div:first-child {
   display: inline-flex;
   span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: $gray-500;
+    background-color: rgb(var(--tone-gray-500));
   }
 }
 
 // Metrics Container
 #metrics-container {
   div:first-child {
-    background-color: $white;
+    background-color: rgb(var(--white));
   }
   .link {
-    background-color: $gray-100;
+    background-color: rgb(var(--tone-gray-100));
     a {
-      color: $gray-700;
+      color: rgb(var(--tone-gray-700));
     }
     a::before {
-      background-color: $gray-500;
+      background-color: rgb(var(--tone-gray-500));
     }
     a:hover {
-      color: $color-action;
+      color: rgb(var(--color-action));
     }
     .metrics-link::before {
       @extend %with-exit-mask, %as-pseudo;
@@ -50,34 +50,34 @@
 #downstream-lines svg,
 #upstream-lines svg {
   path {
-    fill: $transparent;
+    fill: var(--transparent);
   }
   circle {
-    fill: $white;
+    fill: rgb(var(--white));
   }
   .allow-arrow {
-    fill: $gray-300;
+    fill: rgb(var(--tone-gray-300));
     stroke-linejoin: round;
   }
   path,
   .allow-dot,
   .allow-arrow {
-    stroke: $gray-300;
+    stroke: rgb(var(--tone-gray-300));
     stroke-width: 2;
   }
   path[data-permission='not-defined'] {
     stroke-dasharray: 4;
   }
   path[data-permission='deny'] {
-    stroke: $red-500;
+    stroke: rgb(var(--tone-red-500));
   }
   .deny-dot {
-    stroke: $red-500;
+    stroke: rgb(var(--tone-red-500));
     stroke-width: 2;
   }
   .deny-arrow {
-    fill: $red-500;
-    stroke: $red-500;
+    fill: rgb(var(--tone-red-500));
+    stroke: rgb(var(--tone-red-500));
     stroke-linejoin: round;
   }
 }

ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss

@@ -5,7 +5,7 @@
   justify-content: space-between;
   align-items: stretch;
   width: 100%;
-  border-top: 1px solid var(--gray-200);
+  border-top: 1px solid rgb(var(--tone-gray-200));
   dl {
     display: flex;
     padding-bottom: 12px;
@@ -15,7 +15,7 @@
     line-height: 1.5em !important;
   }
   dd {
-    color: $gray-400 !important;
+    color: rgb(var(--tone-gray-400)) !important;
   }
   span {
     padding-bottom: 12px;

ui/packages/consul-ui/app/components/topology-metrics/status/index.scss

@@ -2,14 +2,14 @@
 .topology-metrics-status-loader {
   font-weight: normal;
   font-size: 0.875rem;
-  color: $gray-500;
+  color: rgb(var(--tone-gray-500));
   text-align: center;
   margin: 0 auto !important;
   display: block;
 
   span::before {
     @extend %with-info-circle-outline-mask, %as-pseudo;
-    background-color: $gray-500;
+    background-color: rgb(var(--tone-gray-500));
   }
 }
 

ui/packages/consul-ui/app/styles/base/color/base-variables.scss

@@ -1,142 +1,178 @@
-$steel-050: #f5f6f7;
-$steel-100: #e1e4e7;
-$steel-200: #cdd3d7;
-$steel-300: #b9c1c7;
-$steel-400: #a5b0b7;
-$steel-500: #919fa8;
-$steel-600: #77838a;
-$steel-700: #5d666b;
-$steel-800: #42494d;
-$steel-900: #282c2e;
-$magenta-050: #f9ebf2;
-$magenta-100: #efc4d8;
-$magenta-200: #e59ebe;
-$magenta-300: #da77a4;
-$magenta-400: #d0508a;
-$magenta-500: #c62a71;
-$magenta-600: #9e2159;
-$magenta-700: #7d1a47;
-$magenta-800: #5a1434;
-$magenta-900: #360c1f;
+:root {
+  /* vault */
+  --steel-050: 245 246 247;
+  --steel-100: 225 228 231;
+  --steel-200: 205 211 215;
+  --steel-300: 185 193 199;
+  --steel-400: 165 176 183;
+  --steel-500: 145 159 168;
+  --steel-600: 119 131 138;
+  --steel-700: 93 102 107;
+  --steel-800: 66 73 77;
+  --steel-900: 40 44 46;
 
-$rose-010: #fff2f8;
-$rose-050: #fff2f8;
-$rose-100: #f8d9e7;
-$rose-200: #f8d9e7;
-$rose-300: #e07eac;
-$rose-400: #e07eac;
-$rose-500: #ca2171;
-$rose-600: #8e134a;
-$rose-700: #8e134a;
-$rose-800: #650d34;
-$rose-900: #650d34;
+  /* consul */
+  --magenta-050: 249 235 242;
+  --magenta-100: 239 196 216;
+  --magenta-200: 229 158 190;
+  --magenta-300: 218 119 164;
+  --magenta-400: 208 80 138;
+  --magenta-500: 198 42 113;
+  --magenta-600: 158 33 89;
+  --magenta-700: 125 26 71;
+  --magenta-800: 90 20 52;
+  --magenta-900: 54 12 31;
 
-$cobalt-050: #f0f5ff;
-$cobalt-100: #bfd4ff;
-$cobalt-200: #8ab1ff;
-$cobalt-300: #5b92ff;
-$cobalt-400: #387aff;
-$cobalt-500: #1563ff;
-$cobalt-600: #0f4fd1;
-$cobalt-700: #0e40a3;
-$cobalt-800: #0a2d74;
-$cobalt-900: #061b46;
-$indigo-050: #eeedfc;
-$indigo-100: #d5d2f7;
-$indigo-200: #aea7f2;
-$indigo-300: #8d83ed;
-$indigo-400: #7568e8;
-$indigo-500: #5c4ee5;
-$indigo-600: #4c40bc;
-$indigo-700: #3b3292;
-$indigo-800: #2a2469;
-$indigo-900: #1a163f;
-$teal-050: #ebf8f3;
-$teal-100: #c3ecdc;
-$teal-200: #9bdfc5;
-$teal-300: #74d3ae;
-$teal-400: #4cc697;
-$teal-500: #25ba81;
-$teal-600: #1f996a;
-$teal-700: #187753;
-$teal-800: #11553b;
-$teal-900: #0b3324;
-$cyan-050: #e7f8ff;
-$cyan-100: #b9ecff;
-$cyan-200: #8be0ff;
-$cyan-300: #5cd3ff;
-$cyan-400: #2ec7ff;
-$cyan-500: #00bbff;
-$cyan-600: #009fd9;
-$cyan-700: #0077a3;
-$cyan-800: #005574;
-$cyan-900: #003346;
-$gray-010: #fbfbfc;
-$gray-050: #f7f8fa;
-$gray-100: #ebeef2;
-$gray-150: #ebeef2;
-$gray-200: #dce0e6;
-$gray-300: #bac1cc;
-$gray-400: #8e96a3;
-$gray-500: #6f7682;
-$gray-600: #626873;
-$gray-700: #525761;
-$gray-800: #373a42;
-$gray-850: #2c2e33;
-$gray-900: #1f2124;
-$gray-950: #15171c;
-$green-050: #ecf7ed;
-$green-100: #c6e9c9;
-$green-200: #a0dba5;
-$green-300: #7acc81;
-$green-400: #54be5d;
-$green-500: #2eb039;
-$green-600: #26912f;
-$green-700: #1e7125;
-$green-800: #15501a;
-$green-900: #0d3010;
-$blue-010: #fbfcff;
-$blue-050: #f0f5ff;
-$blue-100: #bfd4ff;
-$blue-200: #8ab1ff;
-$blue-300: #5b92ff;
-$blue-400: #387aff;
-$blue-500: #1563ff;
-$blue-600: #0f4fd1;
-$blue-700: #0e40a3;
-$blue-800: #0a2d74;
-$blue-900: #061b46;
-$red-010: #fdfafb;
-$red-050: #f9ecee;
-$red-100: #efc7cc;
-$red-200: #e5a2aa;
-$red-300: #db7d88;
-$red-400: #d15866;
-$red-500: #c73445;
-$red-600: #a32b39;
-$red-700: #7f222c;
-$red-800: #5b1820;
-$red-900: #370f13;
-$orange-050: #fef4ec;
-$orange-100: #fde0c8;
-$orange-200: #fccca4;
-$orange-300: #fbb77f;
-$orange-400: #faa35b;
-$orange-500: #fa8f37;
-$orange-600: #cd762e;
-$orange-700: #a05c23;
-$orange-800: #724119;
-$orange-900: #45270f;
-$yellow-050: #fffbed;
-$yellow-100: #fdeeba;
-$yellow-200: #fce48c;
-$yellow-300: #fbd95e;
-$yellow-400: #face30;
-$yellow-500: #fac402;
-$yellow-600: #cda102;
-$yellow-700: #a07d02;
-$yellow-800: #725a01;
-$yellow-900: #453601;
-$transparent: transparent;
-$white: #fff;
-$black: #000;
+  /* consul refresh */
+  --strawberry-010: 255 242 248;
+  --strawberry-050: 255 242 248;
+  --strawberry-100: 248 217 231;
+  --strawberry-200: 248 217 231;
+  --strawberry-300: 224 126 172;
+  --strawberry-400: 224 126 172;
+  --strawberry-500: 202 33 113;
+  --strawberry-600: 142 19 74;
+  --strawberry-700: 142 19 74;
+  --strawberry-800: 101 13 52;
+  --strawberry-900: 101 13 52;
+
+  /* vagrant */
+  --cobalt-050: 240 245 255;
+  --cobalt-100: 191 212 255;
+  --cobalt-200: 138 177 255;
+  --cobalt-300: 91 146 255;
+  --cobalt-400: 56 122 255;
+  --cobalt-500: 21 99 255;
+  --cobalt-600: 15 79 209;
+  --cobalt-700: 14 64 163;
+  --cobalt-800: 10 45 116;
+  --cobalt-900: 6 27 70;
+
+  /* terraform */
+  --indigo-050: 238 237 252;
+  --indigo-100: 213 210 247;
+  --indigo-200: 174 167 242;
+  --indigo-300: 141 131 237;
+  --indigo-400: 117 104 232;
+  --indigo-500: 92 78 229;
+  --indigo-600: 76 64 188;
+  --indigo-700: 59 50 146;
+  --indigo-800: 42 36 105;
+  --indigo-900: 26 22 63;
+
+  /* nomad */
+  --teal-050: 235 248 243;/*#c3ecdc*/;
+  --teal-100: 195 236 220;/*#e1e4e7*/;
+  --teal-200: 155 223 197;
+  --teal-300: 116 211 174;
+  --teal-400: 76 198 151;
+  --teal-500: 37 186 129;
+  --teal-600: 31 153 106;
+  --teal-700: 24 119 83;
+  --teal-800: 17 85 59;
+  --teal-900: 11 51 36;
+
+  /* packer */
+  --cyan-050: 231 248 255;
+  --cyan-100: 185 236 255;
+  --cyan-200: 139 224 255;
+  --cyan-300: 92 211 255;
+  --cyan-400: 46 199 255;
+  --cyan-500: 0 187 255;
+  --cyan-600: 0 159 217;
+  --cyan-700: 0 119 163;
+  --cyan-800: 0 85 116;
+  --cyan-900: 0 51 70;
+
+/* ui */
+
+/* removed to prevent confusion
+  --gray-1: #191a1c;
+  --gray-2: #323538;
+  --gray-3: #4c4f54;
+  --gray-4: #656a70;
+  --gray-5: #7f858d;
+  --gray-6: #9a9ea5;
+  --gray-7: #b4b8bc;
+  --gray-8: #d0d2d5;
+  --gray-9: #ebecee;
+  --gray-10: #f3f4f6;
+*/
+
+  --gray-010: 251 251 252;
+  --gray-050: 247 248 250;
+  --gray-100: 235 238 242;
+  --gray-150: 235 238 242;
+  --gray-200: 220 224 230;
+  --gray-300: 186 193 204;
+  --gray-400: 142 150 163;
+  --gray-500: 111 118 130;
+  --gray-600: 98 104 115;
+  --gray-700: 82 87 97;
+  --gray-800: 55 58 66;
+  --gray-850: 44 46 51;
+  --gray-900: 31 33 36;
+  --gray-950: 21 23 28;
+
+/* status */
+  --green-050: 236 247 237;
+  --green-100: 198 233 201;
+  --green-200: 160 219 165;
+  --green-300: 122 204 129;
+  --green-400: 84 190 93;
+  --green-500: 46 176 57;
+  --green-600: 38 145 47;
+  --green-700: 30 113 37;
+  --green-800: 21 80 26;
+  --green-900: 13 48 16;
+
+  --blue-010: 251 252 255;
+  --blue-050: 240 245 255;
+  --blue-100: 191 212 255;
+  --blue-200: 138 177 255;
+  --blue-300: 91 146 255;
+  --blue-400: 56 122 255;
+  --blue-500: 21 99 255;
+  --blue-600: 15 79 209;
+  --blue-700: 14 64 163;
+  --blue-800: 10 45 116;
+  --blue-900: 6 27 70;
+
+  --red-010: 253 250 251;
+  --red-050: 249 236 238;
+  --red-100: 239 199 204;
+  --red-200: 229 162 170;
+  --red-300: 219 125 136;
+  --red-400: 209 88 102;
+  --red-500: 199 52 69;
+  --red-600: 163 43 57;
+  --red-700: 127 34 44;
+  --red-800: 91 24 32;
+  --red-900: 55 15 19;
+
+  --orange-050: 254 244 236;/*#fa8f37*/;
+  --orange-100: 253 224 200;
+  --orange-200: 252 204 164;
+  --orange-300: 251 183 127;
+  --orange-400: 250 163 91;
+  --orange-500: 250 143 55;
+  --orange-600: 205 118 46;
+  --orange-700: 160 92 35;
+  --orange-800: 114 65 25;
+  --orange-900: 69 39 15;
+
+  --yellow-050: 255 251 237;/*#fa8f37;*/
+  --yellow-100: 253 238 186;
+  --yellow-200: 252 228 140;
+  --yellow-300: 251 217 94;
+  --yellow-400: 250 206 48;
+  --yellow-500: 250 196 2;
+  --yellow-600: 205 161 2;
+  --yellow-700: 160 125 2;
+  --yellow-800: 114 90 1;
+  --yellow-900: 69 54 1;
+
+  --transparent: transparent;
+  --white: 255 255 255;
+  --black: 0 0 0;
+}

ui/packages/consul-ui/app/styles/base/color/frame-placeholders.scss

@@ -1,259 +0,0 @@
-/*TODO: Move this to the reset */
-* {
-  border-width: 0;
-}
-%frame-border-000 {
-  /* same as decor-border-000 - but need to think about being able to import color on its own*/
-  border-style: solid;
-}
-%frame-brand-300 {
-  @extend %frame-border-000;
-  background-color: $transparent;
-  border-color: var(--decor-brand-600, inherit);
-  color: var(--typo-brand-600, inherit);
-}
-
-/* possibly filter bar */
-/* modal close button */
-%frame-gray-050 {
-  @extend %frame-border-000;
-  background-color: $gray-050;
-  border-color: $gray-300;
-  color: $gray-400;
-}
-/* modal main content */
-%frame-gray-100 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $gray-300;
-  color: $gray-600; /*  wasn't set */
-}
-/* hover */
-%frame-gray-200 {
-  @extend %frame-border-000;
-  background-color: $transparent;
-  border-color: $gray-700;
-  color: $gray-800;
-}
-%frame-gray-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $gray-700;
-  color: $gray-800;
-}
-/* button */
-/**/
-%frame-gray-400 {
-  @extend %frame-border-000;
-  background-color: $gray-050;
-  border-color: $gray-300;
-  color: $gray-800;
-}
-%frame-gray-500 {
-  @extend %frame-border-000;
-  background-color: $gray-050;
-  border-color: $gray-300;
-  color: $gray-400;
-}
-
-/* tabs */
-%frame-gray-600 {
-  @extend %frame-border-000;
-  background-color: $gray-100;
-  border-color: $gray-500;
-  color: $gray-500;
-}
-/* active */
-%frame-gray-700 {
-  @extend %frame-border-000;
-  background-color: $gray-200;
-  border-color: $gray-700;
-  color: $gray-800;
-}
-/* modal bars */
-%frame-gray-800 {
-  @extend %frame-border-000;
-  background-color: $gray-050;
-  border-color: $gray-300;
-  color: $gray-900;
-}
-%frame-gray-900 {
-  @extend %frame-border-000;
-  background-color: $gray-100;
-  border-color: $gray-300;
-  color: $gray-900;
-}
-
-%frame-yellow-500 {
-  @extend %frame-border-000;
-  background-color: $yellow-050;
-  border-color: $color-warning;
-}
-%frame-yellow-800 {
-  @extend %frame-border-000;
-  background-color: $yellow-500;
-  border-color: $yellow-800;
-  color: $white;
-}
-%frame-green-500 {
-  @extend %frame-border-000;
-  background-color: $green-050;
-  border-color: $green-500;
-  color: $green-500;
-}
-%frame-green-800 {
-  @extend %frame-border-000;
-  background-color: $green-500;
-  border-color: $green-800;
-  color: $white;
-}
-%frame-blue-200 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $blue-300;
-  color: $blue-300;
-}
-%frame-blue-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $blue-500;
-  color: $blue-500;
-}
-%frame-blue-500 {
-  @extend %frame-border-000;
-  background-color: $blue-050;
-  border-color: $blue-500;
-  color: $blue-800;
-}
-%frame-blue-600 {
-  @extend %frame-border-000;
-  background-color: $blue-200;
-  border-color: $gray-400;
-  color: $blue-050;
-}
-%frame-blue-700 {
-  @extend %frame-border-000;
-  background-color: $blue-400;
-  border-color: $blue-800;
-  color: $white;
-}
-%frame-blue-800 {
-  @extend %frame-border-000;
-  background-color: $blue-500;
-  border-color: $blue-800;
-  color: $white;
-}
-%frame-blue-900 {
-  @extend %frame-border-000;
-  background-color: $blue-700;
-  border-color: $blue-800;
-  color: $white;
-}
-%frame-red-300 {
-  @extend %frame-border-000;
-  background-color: $transparent;
-  border-color: $red-500;
-  color: $red-500;
-}
-%frame-red-500 {
-  @extend %frame-border-000;
-  background-color: $red-050;
-  border-color: $red-500;
-  color: $red-800;
-}
-%frame-red-600 {
-  @extend %frame-border-000;
-  background-color: $red-200;
-  border-color: $gray-400;
-  color: $white;
-}
-%frame-red-700 {
-  @extend %frame-border-000;
-  background-color: $red-500;
-  border-color: $red-800;
-  color: $white;
-}
-%frame-red-800 {
-  @extend %frame-border-000;
-  background-color: $red-500;
-  border-color: $red-800;
-  color: $white;
-}
-%frame-red-900 {
-  @extend %frame-border-000;
-  background-color: $red-700;
-  border-color: $red-800;
-  color: $white;
-}
-%frame-magenta-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $magenta-600;
-  color: $magenta-600;
-}
-%frame-magenta-800 {
-  @extend %frame-border-000;
-  background-color: $magenta-500;
-  border-color: $magenta-800;
-  color: $white;
-}
-%frame-steel-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $steel-600;
-  color: $steel-600;
-}
-%frame-steel-800 {
-  @extend %frame-border-000;
-  background-color: $steel-500;
-  border-color: $steel-800;
-  color: $white;
-}
-%frame-cobalt-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $cobalt-600;
-  color: $cobalt-600;
-}
-%frame-cobalt-800 {
-  @extend %frame-border-000;
-  background-color: $cobalt-500;
-  border-color: $cobalt-800;
-  color: $white;
-}
-%frame-indigo-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $indigo-600;
-  color: $indigo-600;
-}
-%frame-indigo-800 {
-  @extend %frame-border-000;
-  background-color: $indigo-500;
-  border-color: $indigo-800;
-  color: $white;
-}
-%frame-teal-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $teal-600;
-  color: $teal-600;
-}
-%frame-teal-800 {
-  @extend %frame-border-000;
-  background-color: $teal-500;
-  border-color: $teal-800;
-  color: $white;
-}
-%frame-cyan-300 {
-  @extend %frame-border-000;
-  background-color: $white;
-  border-color: $cyan-600;
-  color: $cyan-600;
-}
-%frame-cyan-800 {
-  @extend %frame-border-000;
-  background-color: $cyan-500;
-  border-color: $cyan-800;
-  color: $white;
-}

ui/packages/consul-ui/app/styles/base/color/hex-variables.scss

@@ -0,0 +1,178 @@
+:root {
+  /* vault */
+  --steel-050: #f5f6f7;
+  --steel-100: #e1e4e7;
+  --steel-200: #cdd3d7;
+  --steel-300: #b9c1c7;
+  --steel-400: #a5b0b7;
+  --steel-500: #919fa8;
+  --steel-600: #77838a;
+  --steel-700: #5d666b;
+  --steel-800: #42494d;
+  --steel-900: #282c2e;
+
+  /* consul */
+  --magenta-050: #f9ebf2;
+  --magenta-100: #efc4d8;
+  --magenta-200: #e59ebe;
+  --magenta-300: #da77a4;
+  --magenta-400: #d0508a;
+  --magenta-500: #c62a71;
+  --magenta-600: #9e2159;
+  --magenta-700: #7d1a47;
+  --magenta-800: #5a1434;
+  --magenta-900: #360c1f;
+
+  /* consul refresh */
+  --strawberry-010: #fff2f8;
+  --strawberry-050: #fff2f8;
+  --strawberry-100: #f8d9e7;
+  --strawberry-200: #f8d9e7;
+  --strawberry-300: #e07eac;
+  --strawberry-400: #e07eac;
+  --strawberry-500: #ca2171;
+  --strawberry-600: #8e134a;
+  --strawberry-700: #8e134a;
+  --strawberry-800: #650d34;
+  --strawberry-900: #650d34;
+
+  /* vagrant */
+  --cobalt-050: #f0f5ff;
+  --cobalt-100: #bfd4ff;
+  --cobalt-200: #8ab1ff;
+  --cobalt-300: #5b92ff;
+  --cobalt-400: #387aff;
+  --cobalt-500: #1563ff;
+  --cobalt-600: #0f4fd1;
+  --cobalt-700: #0e40a3;
+  --cobalt-800: #0a2d74;
+  --cobalt-900: #061b46;
+
+  /* terraform */
+  --indigo-050: #eeedfc;
+  --indigo-100: #d5d2f7;
+  --indigo-200: #aea7f2;
+  --indigo-300: #8d83ed;
+  --indigo-400: #7568e8;
+  --indigo-500: #5c4ee5;
+  --indigo-600: #4c40bc;
+  --indigo-700: #3b3292;
+  --indigo-800: #2a2469;
+  --indigo-900: #1a163f;
+
+  /* nomad */
+  --teal-050: #ebf8f3;/*#c3ecdc*/;
+  --teal-100: #c3ecdc;/*#e1e4e7*/;
+  --teal-200: #9bdfc5;
+  --teal-300: #74d3ae;
+  --teal-400: #4cc697;
+  --teal-500: #25ba81;
+  --teal-600: #1f996a;
+  --teal-700: #187753;
+  --teal-800: #11553b;
+  --teal-900: #0b3324;
+
+  /* packer */
+  --cyan-050: #e7f8ff;
+  --cyan-100: #b9ecff;
+  --cyan-200: #8be0ff;
+  --cyan-300: #5cd3ff;
+  --cyan-400: #2ec7ff;
+  --cyan-500: #00bbff;
+  --cyan-600: #009fd9;
+  --cyan-700: #0077a3;
+  --cyan-800: #005574;
+  --cyan-900: #003346;
+
+/* ui */
+
+/* removed to prevent confusion
+  --gray-1: #191a1c;
+  --gray-2: #323538;
+  --gray-3: #4c4f54;
+  --gray-4: #656a70;
+  --gray-5: #7f858d;
+  --gray-6: #9a9ea5;
+  --gray-7: #b4b8bc;
+  --gray-8: #d0d2d5;
+  --gray-9: #ebecee;
+  --gray-10: #f3f4f6;
+*/
+
+  --gray-010: #fbfbfc;
+  --gray-050: #f7f8fa;
+  --gray-100: #ebeef2;
+  --gray-150: #ebeef2;
+  --gray-200: #dce0e6;
+  --gray-300: #bac1cc;
+  --gray-400: #8e96a3;
+  --gray-500: #6f7682;
+  --gray-600: #626873;
+  --gray-700: #525761;
+  --gray-800: #373a42;
+  --gray-850: #2c2e33;
+  --gray-900: #1f2124;
+  --gray-950: #15171c;
+
+/* status */
+  --green-050: #ecf7ed;
+  --green-100: #c6e9c9;
+  --green-200: #a0dba5;
+  --green-300: #7acc81;
+  --green-400: #54be5d;
+  --green-500: #2eb039;
+  --green-600: #26912f;
+  --green-700: #1e7125;
+  --green-800: #15501a;
+  --green-900: #0d3010;
+
+  --blue-010: #fbfcff;
+  --blue-050: #f0f5ff;
+  --blue-100: #bfd4ff;
+  --blue-200: #8ab1ff;
+  --blue-300: #5b92ff;
+  --blue-400: #387aff;
+  --blue-500: #1563ff;
+  --blue-600: #0f4fd1;
+  --blue-700: #0e40a3;
+  --blue-800: #0a2d74;
+  --blue-900: #061b46;
+
+  --red-010: #fdfafb;
+  --red-050: #f9ecee;
+  --red-100: #efc7cc;
+  --red-200: #e5a2aa;
+  --red-300: #db7d88;
+  --red-400: #d15866;
+  --red-500: #c73445;
+  --red-600: #a32b39;
+  --red-700: #7f222c;
+  --red-800: #5b1820;
+  --red-900: #370f13;
+
+  --orange-050: #fef4ec;/*#fa8f37*/;
+  --orange-100: #fde0c8;
+  --orange-200: #fccca4;
+  --orange-300: #fbb77f;
+  --orange-400: #faa35b;
+  --orange-500: #fa8f37;
+  --orange-600: #cd762e;
+  --orange-700: #a05c23;
+  --orange-800: #724119;
+  --orange-900: #45270f;
+
+  --yellow-050: #fffbed;/*#fa8f37;*/
+  --yellow-100: #fdeeba;
+  --yellow-200: #fce48c;
+  --yellow-300: #fbd95e;
+  --yellow-400: #face30;
+  --yellow-500: #fac402;
+  --yellow-600: #cda102;
+  --yellow-700: #a07d02;
+  --yellow-800: #725a01;
+  --yellow-900: #453601;
+
+  --transparent: transparent;
+  --white: #fff;
+  --black: #000;
+}

ui/packages/consul-ui/app/styles/base/color/index.scss

@@ -1,4 +1,7 @@
+/*@import './hex-variables';*/
 @import './base-variables';
+/* load in the ui theme */
+@import './ui/index';
+/* other themes should be added at a project level */
 @import './semantic-variables';
-@import './frame-placeholders';
-@import './theme-placeholders';
+/*@import './theme-placeholders';*/

ui/packages/consul-ui/app/styles/base/color/magenta/frame-placeholders.scss

@@ -0,0 +1,13 @@
+%frame-magenta-300 {
+  @extend %frame-border-000;
+  background-color: rgb(var(--tone-gray-000));
+  border-color: rgb(var(--tone-magenta-600));
+  color: rgb(var(--tone-magenta-600));
+}
+%frame-magenta-800 {
+  @extend %frame-border-000;
+  background-color: rgb(var(--tone-magenta-500));
+  border-color: rgb(var(--tone-magenta-800));
+  color: rgb(var(--tone-gray-000));
+}
+

ui/packages/consul-ui/app/styles/base/color/magenta/index.scss

@@ -0,0 +1,6 @@
+@import './themes/light';
+@import './themes/dark';
+@import './themes/light-high-contrast';
+@import './themes/dark-high-contrast';
+@import './frame-placeholders';
+

ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark-high-contrast.scss

@@ -0,0 +1,18 @@
+%theme-dark-low-contrast {
+  --tone-magenta-000: var(--white);
+  --tone-magenta-050: var(--magenta-050);
+  --tone-magenta-100: var(--magenta-100);
+  --tone-magenta-150: var(--magenta-150);
+  --tone-magenta-200: var(--magenta-200);
+  --tone-magenta-300: var(--magenta-300);
+  --tone-magenta-400: var(--magenta-400);
+  --tone-magenta-500: var(--magenta-500);
+  --tone-magenta-600: var(--magenta-600);
+  --tone-magenta-700: var(--magenta-700);
+  --tone-magenta-800: var(--magenta-800);
+  --tone-magenta-850: var(--magenta-850);
+  --tone-magenta-900: var(--magenta-900);
+  --tone-magenta-950: var(--magenta-950);
+  --tone-magenta-999: var(--black);
+}
+

ui/packages/consul-ui/app/styles/base/color/magenta/themes/dark.scss

@@ -0,0 +1,18 @@
+%theme-dark {
+  --tone-magenta-000: var(--white);
+  --tone-magenta-050: var(--magenta-050);
+  --tone-magenta-100: var(--magenta-100);
+  --tone-magenta-150: var(--magenta-150);
+  --tone-magenta-200: var(--magenta-200);
+  --tone-magenta-300: var(--magenta-300);
+  --tone-magenta-400: var(--magenta-400);
+  --tone-magenta-500: var(--magenta-500);
+  --tone-magenta-600: var(--magenta-600);
+  --tone-magenta-700: var(--magenta-700);
+  --tone-magenta-800: var(--magenta-800);
+  --tone-magenta-850: var(--magenta-850);
+  --tone-magenta-900: var(--magenta-900);
+  --tone-magenta-950: var(--magenta-950);
+  --tone-magenta-999: var(--black);
+}
+

ui/packages/consul-ui/app/styles/base/color/magenta/themes/light-high-contrast.scss

@@ -0,0 +1,18 @@
+%theme-light {
+  --tone-magenta-000: var(--white);
+  --tone-magenta-050: var(--magenta-050);
+  --tone-magenta-100: var(--magenta-100);
+  --tone-magenta-150: var(--magenta-150);
+  --tone-magenta-200: var(--magenta-200);
+  --tone-magenta-300: var(--magenta-300);
+  --tone-magenta-400: var(--magenta-400);
+  --tone-magenta-500: var(--magenta-500);
+  --tone-magenta-600: var(--magenta-600);
+  --tone-magenta-700: var(--magenta-700);
+  --tone-magenta-800: var(--magenta-800);
+  --tone-magenta-850: var(--magenta-850);
+  --tone-magenta-900: var(--magenta-900);
+  --tone-magenta-950: var(--magenta-950);
+  --tone-magenta-999: var(--black);
+}
+

ui/packages/consul-ui/app/styles/base/color/magenta/themes/light.scss

@@ -0,0 +1,18 @@
+%theme-light-high-contrast {
+  --tone-magenta-000: var(--white);
+  --tone-magenta-050: var(--magenta-050);
+  --tone-magenta-100: var(--magenta-100);
+  --tone-magenta-150: var(--magenta-150);
+  --tone-magenta-200: var(--magenta-200);
+  --tone-magenta-300: var(--magenta-300);
+  --tone-magenta-400: var(--magenta-400);
+  --tone-magenta-500: var(--magenta-500);
+  --tone-magenta-600: var(--magenta-600);
+  --tone-magenta-700: var(--magenta-700);
+  --tone-magenta-800: var(--magenta-800);
+  --tone-magenta-850: var(--magenta-850);
+  --tone-magenta-900: var(--magenta-900);
+  --tone-magenta-950: var(--magenta-950);
+  --tone-magenta-999: var(--black);
+}
+

ui/packages/consul-ui/app/styles/base/color/semantic-variables.scss

@@ -1,12 +1,27 @@
-$color-primary: $blue-500;
-$color-dangerous: $red-500;
-$color-primary-disabled: $blue-500;
-$color-transparent: transparent;
-$color-neutral: $gray-500;
-$color-action: $blue-500;
-$color-info: $blue-500;
-$color-success: $green-500;
-$color-failure: $red-500;
-$color-danger: $red-500;
-$color-warning: $yellow-500;
-$color-alert: $orange-500;
+:root {
+  --color-primary: var(--tone-blue-500);
+  --color-dangerous: var(--tone-red-500);
+  --color-primary-disabled: var(--tone-blue-500);
+
+  --color-neutral: var(--tone-gray-500);
+  --color-action: var(--tone-blue-500);
+  --color-info: var(--tone-blue-500);
+  /*--color-active: var(--tone-blue-500); ?? form pre-focus*/
+  --color-success: var(--tone-green-500);
+  --color-failure: var(--tone-red-500);
+  --color-danger: var(--tone-red-500);
+  --color-warning: var(--tone-yellow-500);
+  --color-alert: var(--tone-orange-500);
+
+  /* --color-keyline-000: var(--white); */
+  /* --color-keyline-050: var(); */
+  /* --color-keyline-100: var(--gray-100); */
+  /* --color-keyline-200: var(--gray-200); */
+  /* --color-keyline-300: var(--gray-300); */
+  /* --color-keyline-400: var(--gray-400); */
+  /* --color-keyline-500: var(--gray-500); */
+  /* --color-keyline-600: var(--gray-600); */
+  /* --color-keyline-700: var(); */
+  /* --color-keyline-800: var(); */
+  /* --color-keyline-900: var(--black); */
+}

ui/packages/consul-ui/app/styles/base/color/strawberry/frame-placeholders.scss

@@ -0,0 +1,13 @@
+%frame-strawberry-300 {
+  @extend %frame-border-000;
+  background-color: rgb(var(--tone-gray-000));
+  border-color: rgb(var(--tone-strawberry-600));
+  color: rgb(var(--tone-strawberry-600));
+}
+%frame-strawberry-800 {
+  @extend %frame-border-000;
+  background-color: rgb(var(--tone-strawberry-500));
+  border-color: rgb(var(--tone-strawberry-800));
+  color: rgb(var(--tone-gray-000));
+}
+

ui/packages/consul-ui/app/styles/base/color/strawberry/index.scss

@@ -0,0 +1,6 @@
+@import './themes/light';
+@import './themes/dark';
+@import './themes/light-high-contrast';
+@import './themes/dark-high-contrast';
+@import './frame-placeholders';
+

ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark-high-contrast.scss

@@ -0,0 +1,18 @@
+%theme-dark-high-contrast {
+  --tone-strawberry-000: var(--white);
+  --tone-strawberry-050: var(--strawberry-050);
+  --tone-strawberry-100: var(--strawberry-100);
+  --tone-strawberry-150: var(--strawberry-150);
+  --tone-strawberry-200: var(--strawberry-200);
+  --tone-strawberry-300: var(--strawberry-300);
+  --tone-strawberry-400: var(--strawberry-400);
+  --tone-strawberry-500: var(--strawberry-500);
+  --tone-strawberry-600: var(--strawberry-600);
+  --tone-strawberry-700: var(--strawberry-700);
+  --tone-strawberry-800: var(--strawberry-800);
+  --tone-strawberry-850: var(--strawberry-850);
+  --tone-strawberry-900: var(--strawberry-900);
+  --tone-strawberry-950: var(--strawberry-950);
+  --tone-strawberry-999: var(--black);
+}
+

ui/packages/consul-ui/app/styles/base/color/strawberry/themes/dark.scss

@@ -0,0 +1,18 @@
+%theme-dark {
+  --tone-strawberry-000: var(--white);
+  --tone-strawberry-050: var(--strawberry-050);
+  --tone-strawberry-100: var(--strawberry-100);
+  --tone-strawberry-150: var(--strawberry-150);
+  --tone-strawberry-200: var(--strawberry-200);
+  --tone-strawberry-300: var(--strawberry-300);
+  --tone-strawberry-400: var(--strawberry-400);
+  --tone-strawberry-500: var(--strawberry-500);
+  --tone-strawberry-600: var(--strawberry-600);
+  --tone-strawberry-700: var(--strawberry-700);
+  --tone-strawberry-800: var(--strawberry-800);
+  --tone-strawberry-850: var(--strawberry-850);
+  --tone-strawberry-900: var(--strawberry-900);
+  --tone-strawberry-950: var(--strawberry-950);
+  --tone-strawberry-999: var(--black);
+}
+

ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light-high-contrast.scss

@@ -0,0 +1,18 @@
+%theme-light-high-contrast {
+  --tone-strawberry-000: var(--white);
+  --tone-strawberry-050: var(--strawberry-050);
+  --tone-strawberry-100: var(--strawberry-100);
+  --tone-strawberry-150: var(--strawberry-150);
+  --tone-strawberry-200: var(--strawberry-200);
+  --tone-strawberry-300: var(--strawberry-300);
+  --tone-strawberry-400: var(--strawberry-400);
+  --tone-strawberry-500: var(--strawberry-500);
+  --tone-strawberry-600: var(--strawberry-600);
+  --tone-strawberry-700: var(--strawberry-700);
+  --tone-strawberry-800: var(--strawberry-800);
+  --tone-strawberry-850: var(--strawberry-850);
+  --tone-strawberry-900: var(--strawberry-900);
+  --tone-strawberry-950: var(--strawberry-950);
+  --tone-strawberry-999: var(--black);
+}
+

ui/packages/consul-ui/app/styles/base/color/strawberry/themes/light.scss

@@ -0,0 +1,18 @@
+%theme-light {
+  --tone-strawberry-000: var(--white);
+  --tone-strawberry-050: var(--strawberry-050);
+  --tone-strawberry-100: var(--strawberry-100);
+  --tone-strawberry-150: var(--strawberry-150);
+  --tone-strawberry-200: var(--strawberry-200);
+  --tone-strawberry-300: var(--strawberry-300);
+  --tone-strawberry-400: var(--strawberry-400);
+  --tone-strawberry-500: var(--strawberry-500);
+  --tone-strawberry-600: var(--strawberry-600);
+  --tone-strawberry-700: var(--strawberry-700);
+  --tone-strawberry-800: var(--strawberry-800);
+  --tone-strawberry-850: var(--strawberry-850);
+  --tone-strawberry-900: var(--strawberry-900);
+  --tone-strawberry-950: var(--strawberry-950);
+  --tone-strawberry-999: var(--black);
+}
+