@lightspeed/design-system-css 28.0.0 → 29.0.0

package/dist/index.css

@@ -275,10 +275,10 @@ body {
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   padding: 0;
   margin: 0;
-  background-color: var(--vd-colour--background);
+  background-color: var(--hs-color-bg-neutral-backdrop);
 }
 
 a:link {
@@ -454,19 +454,19 @@ details,
 }
 
 .vd-colour-do {
-  color: var(--vd-colour--do);
+  color: var(--hs-color-fg-go-default);
 }
 
 .vd-colour-go {
-  color: var(--vd-colour--go);
+  color: var(--hs-color-fg-go-default);
 }
 
 .vd-colour-no {
-  color: var(--vd-colour--no);
+  color: var(--hs-color-fg-no-default);
 }
 
 .vd-colour-supplementary {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-fg-supplementary-default);
 }
 
 .vd-switch-input, .vd-radio-input, .vd-checkbox-input {
@@ -513,7 +513,7 @@ details,
 
 @keyframes vd-blink-highlight {
   20%, 70% {
-    background-color: var(--vd-colour--go-highlight);
+    background-color: var(--hs-color-bg-go-highlight-default);
   }
 }
 @keyframes vd-shake {
@@ -1191,14 +1191,14 @@ details,
   position: relative;
 }
 .vd-select-container.vd-error .vd-select {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-select-container.vd-error .vd-select:focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .vd-select {
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -1209,7 +1209,7 @@ details,
   box-sizing: border-box;
   outline: none;
   box-shadow: none;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
@@ -1219,10 +1219,10 @@ details,
   background-repeat: no-repeat;
   background-size: 8px 20px;
   background-position: calc(100% - 14px) 10px;
-  background-image: var(--vd-colour--select-arrows-bg);
+  background-image: var(--hs-color-select-arrows-bg);
 }
 .vd-select::placeholder {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
   opacity: 1;
 }
 .vd-select:placeholder-shown {
@@ -1238,14 +1238,14 @@ details,
   }
 }
 .vd-select:focus, .vd-select.vd-focus {
-  border-color: var(--vd-colour--go);
-  box-shadow: 0 0 3px var(--vd-colour--go);
+  border-color: var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
 }
 .vd-select.vd-input--error, .vd-select.vd-error, .vd-select.ng-invalid.ng-dirty, .ng-submitted .vd-select.ng-invalid {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-select.vd-input--error:focus, .vd-select.vd-input--error.vd-focus, .vd-select.vd-error:focus, .vd-select.vd-error.vd-focus, .vd-select.ng-invalid.ng-dirty:focus, .vd-select.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-select.ng-invalid:focus, .ng-submitted .vd-select.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .vd-select-group {
@@ -1318,7 +1318,7 @@ details,
 }
 
 .vd-select-inline--placeholder {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
 }
 
 .vd-select-inline-text {
@@ -1335,7 +1335,7 @@ details,
 
 .vd-input {
   cursor: text;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -1346,14 +1346,14 @@ details,
   box-sizing: border-box;
   outline: none;
   box-shadow: none;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
 }
 .vd-input::placeholder {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
   opacity: 1;
 }
 .vd-input:placeholder-shown {
@@ -1369,20 +1369,20 @@ details,
   }
 }
 .vd-input:focus, .vd-input.vd-focus {
-  border-color: var(--vd-colour--go);
-  box-shadow: 0 0 3px var(--vd-colour--go);
+  border-color: var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
 }
 .vd-input.vd-input--error, .vd-input.vd-error, .vd-input.ng-invalid.ng-dirty, .ng-submitted .vd-input.ng-invalid {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-input.vd-input--error:focus, .vd-input.vd-input--error.vd-focus, .vd-input.vd-error:focus, .vd-input.vd-error.vd-focus, .vd-input.ng-invalid.ng-dirty:focus, .vd-input.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-input.ng-invalid:focus, .ng-submitted .vd-input.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .vd-input-error-message-section {
   display: block;
   margin-top: 8px;
-  color: var(--vd-colour--no);
+  color: var(--hs-color-fg-no-default);
   font-size: 12px;
 }
 .vd-input-error-message-section .vd-input-error-message-text {
@@ -1400,7 +1400,7 @@ details,
 .vd-input-icon {
   position: absolute;
   top: 14px;
-  color: var(--vd-colour--supplementary--text);
+  color: var(--hs-color-fg-supplementary-default);
   pointer-events: none;
 }
 
@@ -1440,10 +1440,10 @@ details,
   display: flex;
 }
 .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input:focus, .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input.vd-focus, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input:focus, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input.vd-focus, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input:focus, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input.vd-focus, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input:focus, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .vd-autocomplete-input-typeahead {
@@ -1452,7 +1452,7 @@ details,
   padding: 11px 14px;
   box-sizing: border-box;
   outline: none;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -1461,7 +1461,7 @@ details,
   top: 1px;
   left: 1px;
   opacity: 1;
-  color: var(--vd-colour--supplementary--text);
+  color: var(--hs-color-fg-supplementary-default);
   pointer-events: none;
   user-select: none;
   text-align: left;
@@ -1469,7 +1469,7 @@ details,
   white-space: nowrap;
 }
 .vd-autocomplete-input-typeahead::placeholder {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
   opacity: 1;
 }
 .vd-autocomplete-input-typeahead:placeholder-shown {
@@ -1496,10 +1496,10 @@ details,
   display: block;
 }
 .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi, .vd-autocomplete-filter.vd-error vd-autocomplete-multi, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi:focus, .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi.vd-focus, .vd-autocomplete-filter.vd-error vd-autocomplete-multi:focus, .vd-autocomplete-filter.vd-error vd-autocomplete-multi.vd-focus, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi:focus, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi.vd-focus, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi:focus, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .vd-autocomplete-filter-input-container {
@@ -1532,7 +1532,7 @@ details,
 
 .vd-autocomplete-select-placeholder {
   box-shadow: none;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
@@ -1544,14 +1544,14 @@ details,
   text-transform: capitalize;
 }
 .vd-autocomplete-select-placeholder:focus, .vd-autocomplete-select-placeholder.vd-focus {
-  border-color: var(--vd-colour--go);
-  box-shadow: 0 0 3px var(--vd-colour--go);
+  border-color: var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
 }
 .vd-autocomplete-select-placeholder.vd-input--error, .vd-autocomplete-select-placeholder.vd-error, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-autocomplete-select-placeholder.vd-input--error:focus, .vd-autocomplete-select-placeholder.vd-input--error.vd-focus, .vd-autocomplete-select-placeholder.vd-error:focus, .vd-autocomplete-select-placeholder.vd-error.vd-focus, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty:focus, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid:focus, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .vd-autocomplete-filter-icon {
@@ -1559,7 +1559,7 @@ details,
   z-index: 1;
   margin-left: 14px;
   margin-top: 14px;
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
 }
 
 .vd-autocomplete-filter-button-label {
@@ -1571,7 +1571,7 @@ details,
   align-items: center;
   justify-content: space-between;
   min-height: 45px;
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
 }
 @media only screen and (max-width: 768px) {
   .vd-action-bar {
@@ -1602,7 +1602,7 @@ details,
 }
 
 .vd-avatar {
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -1625,10 +1625,10 @@ details,
 .vd-avatar.vd-avatar--deleted-image {
   opacity: 0.35;
   filter: grayscale(100%);
-  background-color: var(--vd-colour--no);
+  background-color: var(--hs-color-bg-no-default);
 }
 .vd-avatar .deleted-state-icon {
-  color: var(--vd-colour--box);
+  color: var(--hs-color-bg-neutral-top);
 }
 
 .vd-avatar--initials {
@@ -1643,7 +1643,7 @@ details,
   font-weight: 700;
   word-wrap: normal;
   word-break: normal;
-  color: var(--vd-colour--text-action);
+  color: var(--hs-color-fg-neutral-ondark-default);
   text-align: center;
 }
 .vd-avatar--initials.vd-avatar--x-small {
@@ -1701,7 +1701,7 @@ details,
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
   position: relative;
 }
 .vd-avatar-multi-tile[vd-lazy-load*="placeholder.svg"] {
@@ -1709,7 +1709,7 @@ details,
 }
 
 .vd-avatar-multi-tile--remainder {
-  background-color: var(--vd-colour--keyline);
+  background-color: var(--hs-color-border-neutral-strong);
 }
 
 .vd-avatar-multi-count {
@@ -1744,7 +1744,7 @@ details,
   }
   .vd-avatar-multi-tile {
     flex: 1 1 50%;
-    border: 2px solid var(--vd-colour--box);
+    border: 2px solid var(--hs-color-bg-neutral-top);
     border-radius: 5px;
   }
 }
@@ -1815,8 +1815,8 @@ details,
 
 .vd-banner--info,
 .vd-banner--activation {
-  background-color: var(--vd-colour--supplementary);
-  color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
   border: none;
   border-left: none;
   border-right: none;
@@ -1831,13 +1831,13 @@ details,
 .vd-banner--activation .vd-link:visited,
 .vd-banner--activation .vd-btn--link,
 .vd-banner--activation .vd-btn--link:hover {
-  color: var(--vd-colour--text-action);
+  color: var(--hs-color-fg-neutral-ondark-default);
   text-decoration: underline;
 }
 
 .vd-banner--negative {
-  background-color: var(--vd-colour--no);
-  color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-fg-no-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
   border: none;
   border-left: none;
   border-right: none;
@@ -1847,13 +1847,13 @@ details,
 .vd-banner--negative .vd-link:visited,
 .vd-banner--negative .vd-btn--link,
 .vd-banner--negative .vd-btn--link:hover {
-  color: var(--vd-colour--text-action);
+  color: var(--hs-color-fg-neutral-ondark-default);
   text-decoration: underline;
 }
 
 .vd-banner--success {
-  background-color: var(--vd-colour--success);
-  color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-fg-success-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
   border: none;
   border-left: none;
   border-right: none;
@@ -1863,7 +1863,7 @@ details,
 .vd-banner--success .vd-link:visited,
 .vd-banner--success .vd-btn--link,
 .vd-banner--success .vd-btn--link:hover {
-  color: var(--vd-colour--text-action);
+  color: var(--hs-color-fg-neutral-ondark-default);
   text-decoration: underline;
 }
 
@@ -1883,7 +1883,7 @@ details,
 }
 
 .vd-bg--upsell {
-  background: var(--vd-colour--background) url("//vendfrontendassets.freetls.fastly.net/images/backgrounds/dashboard-upsell-bg-v1.svg");
+  background: var(--hs-color-bg-neutral-backdrop) url("//vendfrontendassets.freetls.fastly.net/images/backgrounds/dashboard-upsell-bg-v1.svg");
 }
 
 .vd-body {
@@ -1938,235 +1938,235 @@ a.vd-btn.disabled {
 }
 
 .vd-btn--do {
-  background-color: var(--vd-colour--do);
-  color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-bg-go-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
 }
 @media (hover: hover) {
   .vd-btn--do:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--do-lighter);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-go-soft);
   }
 }
 .vd-btn--do:active, .vd-btn--do.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--do-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--do-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-go-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn--do:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--do-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--do-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
 }
 
 .vd-btn--icon-do {
   background-color: transparent;
   padding: 12px 14px;
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-fg-supplementary-default);
 }
 @media (hover: hover) {
   .vd-btn--icon-do:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--do);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-go-default);
   }
 }
 .vd-btn--icon-do:active, .vd-btn--icon-do.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--do-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--do-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-go-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn--icon-do:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--do-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--do-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
 }
 
 .vd-btn--text-do {
   background-color: transparent;
-  color: var(--vd-colour--do);
+  color: var(--hs-color-fg-go-default);
 }
 @media (hover: hover) {
   .vd-btn--text-do:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--do);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-go-default);
   }
 }
 .vd-btn--text-do:active, .vd-btn--text-do.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--do-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--do-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-go-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn--text-do:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--do-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--do-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
 }
 
 .vd-btn--supplementary {
-  background-color: var(--vd-colour--supplementary);
-  color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
 }
 @media (hover: hover) {
   .vd-btn--supplementary:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--supplementary-lighter);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-supplementary-soft);
   }
 }
 .vd-btn--supplementary:active, .vd-btn--supplementary.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--supplementary-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--supplementary-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-supplementary-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
 }
 .vd-btn--supplementary:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--supplementary-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--supplementary-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
 }
 
 .vd-btn--icon-supplementary {
   background-color: transparent;
   padding: 12px 14px;
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-fg-supplementary-default);
 }
 @media (hover: hover) {
   .vd-btn--icon-supplementary:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--supplementary);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-supplementary-default);
   }
 }
 .vd-btn--icon-supplementary:active, .vd-btn--icon-supplementary.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--supplementary-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--supplementary-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-supplementary-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
 }
 .vd-btn--icon-supplementary:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--supplementary-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--supplementary-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
 }
 
 .vd-btn--text-supplementary {
   background-color: transparent;
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-fg-supplementary-default);
 }
 @media (hover: hover) {
   .vd-btn--text-supplementary:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--supplementary);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-supplementary-default);
   }
 }
 .vd-btn--text-supplementary:active, .vd-btn--text-supplementary.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--supplementary-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--supplementary-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-supplementary-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default), 0.35);
 }
 .vd-btn--text-supplementary:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--supplementary-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--supplementary-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default), 0.6);
 }
 
 .vd-btn--no {
-  background-color: var(--vd-colour--no);
-  color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-bg-no-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
 }
 @media (hover: hover) {
   .vd-btn--no:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--no-lighter);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-no-soft);
   }
 }
 .vd-btn--no:active, .vd-btn--no.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--no-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--no-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-no-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
 }
 .vd-btn--no:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--no-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--no-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
 }
 
 .vd-btn--icon-no {
   background-color: transparent;
   padding: 12px 14px;
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-fg-supplementary-default);
 }
 @media (hover: hover) {
   .vd-btn--icon-no:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--no);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-no-default);
   }
 }
 .vd-btn--icon-no:active, .vd-btn--icon-no.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--no-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--no-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-no-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
 }
 .vd-btn--icon-no:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--no-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--no-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
 }
 
 .vd-btn--text-no {
   background-color: transparent;
-  color: var(--vd-colour--no);
+  color: var(--hs-color-fg-no-default);
 }
 @media (hover: hover) {
   .vd-btn--text-no:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--no);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-no-default);
   }
 }
 .vd-btn--text-no:active, .vd-btn--text-no.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--no-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--no-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-no-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default), 0.35);
 }
 .vd-btn--text-no:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--no-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--no-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default), 0.6);
 }
 
 .vd-btn--go {
-  background-color: var(--vd-colour--go);
-  color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-bg-go-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
 }
 @media (hover: hover) {
   .vd-btn--go:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--go-lighter);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-go-soft);
   }
 }
 .vd-btn--go:active, .vd-btn--go.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--go-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-go-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn--go:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--go-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--go-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
 }
 
 .vd-btn--icon-go {
   background-color: transparent;
   padding: 12px 14px;
-  color: var(--vd-colour--go);
+  color: var(--hs-color-fg-go-default);
 }
 @media (hover: hover) {
   .vd-btn--icon-go:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--go);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-go-default);
   }
 }
 .vd-btn--icon-go:active, .vd-btn--icon-go.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--go-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-go-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn--icon-go:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--go-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--go-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
 }
 
 .vd-btn--text-go {
   background-color: transparent;
-  color: var(--vd-colour--go);
+  color: var(--hs-color-fg-go-default);
 }
 @media (hover: hover) {
   .vd-btn--text-go:hover {
-    color: var(--vd-colour--text-action);
-    background-color: var(--vd-colour--go);
+    color: var(--hs-color-fg-neutral-ondark-default);
+    background-color: var(--hs-color-bg-go-default);
   }
 }
 .vd-btn--text-go:active, .vd-btn--text-go.vd-btn--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--go-darker);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-go-strong);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn--text-go:focus {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--go-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--go-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
 }
 
 .vd-btn--link {
@@ -2181,7 +2181,7 @@ a.vd-btn.disabled {
   text-decoration: underline;
 }
 .vd-btn--link:hover, .vd-btn--link:focus {
-  color: var(--vd-colour--go);
+  color: var(--hs-color-fg-go-default);
 }
 
 .vd-btn--jumbo {
@@ -2223,11 +2223,11 @@ a.vd-btn.disabled {
   line-height: 1.3333333333;
   font-weight: 700;
   align-items: center;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border-radius: 4px;
   border: 2px solid var(--hs-color-border-neutral-soft);
   box-sizing: border-box;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -2250,26 +2250,26 @@ a.vd-btn.disabled {
   filter: grayscale(100%);
 }
 .vd-btn-panel:focus {
-  border-color: var(--vd-colour--go);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
+  border-color: var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn-panel:hover {
-  border-color: var(--vd-colour--go-lighter);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
+  border-color: var(--hs-color-bg-go-soft);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn-panel:active {
-  background-color: rgba(var(--vd-colour--box-rgb), 0.2);
+  background-color: rgba(var(--hs-color-bg-neutral-top), 0.2);
 }
 
 .vd-btn-panel--selected {
-  border-color: var(--vd-colour--do);
+  border-color: var(--hs-color-fg-go-default);
 }
 .vd-btn-panel--selected:focus, .vd-btn-panel--selected:hover {
-  border-color: var(--vd-colour--do-lighter);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--do-rgb), 0.35);
+  border-color: var(--hs-color-bg-go-soft);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-btn-panel--selected:active {
-  border-color: var(--vd-colour--do-darker);
+  border-color: var(--hs-color-bg-go-strong);
 }
 
 .vd-btn-panel-group {
@@ -2299,7 +2299,7 @@ a.vd-btn.disabled {
 
 .vd-card {
   border: 2px solid var(--hs-color-border-neutral-soft);
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border-radius: 5px;
 }
 .vd-card.vd-card--active {
@@ -2313,7 +2313,7 @@ a.vd-btn.disabled {
   right: 1em;
   content: "";
   bottom: 0;
-  box-shadow: 0 0.1em 4em 0 var(--vd-colour--shadow);
+  box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-dark-default);
 }
 
 vd-carousel {
@@ -2397,7 +2397,7 @@ vd-carousel-frame {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   height: 72px;
 }
 
@@ -2425,11 +2425,11 @@ vd-carousel-frame {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--vd-colour--keyline);
+  background-color: var(--hs-color-border-neutral-strong);
 }
 
 .vd-carousel-paginator-indicator--active::before {
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-bg-go-default);
 }
 
 @keyframes vd-checkbox-checked {
@@ -2515,7 +2515,7 @@ vd-carousel-frame {
   position: relative;
   height: 24px;
   width: 24px;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 1px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   box-sizing: border-box;
@@ -2527,7 +2527,7 @@ vd-carousel-frame {
   position: absolute;
   border-right: 4px solid var(--hs-color-border-neutral-soft);
   border-top: 4px solid var(--hs-color-border-neutral-soft);
-  border-color: var(--vd-colour--framing);
+  border-color: var(--hs-color-border-neutral-soft);
   transform: scaleX(-1) rotate(135deg);
   transform-origin: left top;
   height: 11px;
@@ -2543,18 +2543,18 @@ vd-carousel-frame {
 }
 
 .vd-checkbox-input:focus-visible + .vd-checkbox-tick {
-  box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--do-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--do-rgb), 0.6);
+  box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default), 0.6);
 }
 
 .vd-checkbox-input:checked + .vd-checkbox-tick {
   transition: background-color 0.8s;
-  background-color: var(--vd-colour--do);
-  border-color: var(--vd-colour--do);
+  background-color: var(--hs-color-bg-go-default);
+  border-color: var(--hs-color-fg-go-default);
 }
 .vd-checkbox-input:checked + .vd-checkbox-tick:after {
   opacity: 1;
   animation: vd-checkbox-checked 0.8s;
-  border-color: var(--vd-colour--text-action);
+  border-color: var(--hs-color-fg-neutral-ondark-default);
   box-sizing: content-box;
   backface-visibility: hidden;
 }
@@ -2579,11 +2579,11 @@ vd-carousel-frame {
 }
 
 .vd-checkbox--mixed .vd-checkbox-tick {
-  border: 2px solid var(--vd-colour--do);
+  border: 2px solid var(--hs-color-fg-go-default);
 }
 
 .vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-bg-go-default);
   border: none;
   top: 9px;
   left: 6px;
@@ -2697,7 +2697,7 @@ vd-carousel-frame {
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-size: 15px;
 }
 .vd-datepicker table,
@@ -2757,7 +2757,7 @@ vd-carousel-frame {
 .vd-datepicker .pika-table abbr,
 .vd-datepicker-range .pika-table abbr {
   font-weight: 700;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
 }
 .vd-datepicker .pika-title,
 .vd-datepicker-range .pika-title {
@@ -2780,7 +2780,7 @@ vd-carousel-frame {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   z-index: 100;
-  border-bottom: 5px solid var(--vd-colour--text);
+  border-bottom: 5px solid var(--hs-color-fg-neutral-default);
   right: 37px;
 }
 .vd-datepicker .pika-title .pika-label:nth-child(even):after,
@@ -2794,7 +2794,7 @@ vd-carousel-frame {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   z-index: 100;
-  border-top: 5px solid var(--vd-colour--text);
+  border-top: 5px solid var(--hs-color-fg-neutral-default);
   top: 10px;
   right: 37px;
 }
@@ -2809,7 +2809,7 @@ vd-carousel-frame {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   z-index: 100;
-  border-bottom: 5px solid var(--vd-colour--text);
+  border-bottom: 5px solid var(--hs-color-fg-neutral-default);
   right: 110px;
 }
 .vd-datepicker .pika-title .pika-label:nth-child(odd):after,
@@ -2823,13 +2823,13 @@ vd-carousel-frame {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   z-index: 100;
-  border-top: 5px solid var(--vd-colour--text);
+  border-top: 5px solid var(--hs-color-fg-neutral-default);
   top: 10px;
   right: 110px;
 }
 .vd-datepicker .pika-title .pika-select,
 .vd-datepicker-range .pika-title .pika-select {
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -2840,7 +2840,7 @@ vd-carousel-frame {
   box-sizing: border-box;
   outline: none;
   box-shadow: none;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
@@ -2852,7 +2852,7 @@ vd-carousel-frame {
 }
 .vd-datepicker .pika-title .pika-select::placeholder,
 .vd-datepicker-range .pika-title .pika-select::placeholder {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
   opacity: 1;
 }
 .vd-datepicker .pika-title .pika-select:placeholder-shown,
@@ -2873,15 +2873,15 @@ vd-carousel-frame {
 .vd-datepicker .pika-title .pika-select:focus, .vd-datepicker .pika-title .pika-select.vd-focus,
 .vd-datepicker-range .pika-title .pika-select:focus,
 .vd-datepicker-range .pika-title .pika-select.vd-focus {
-  border-color: var(--vd-colour--go);
-  box-shadow: 0 0 3px var(--vd-colour--go);
+  border-color: var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
 }
 .vd-datepicker .pika-title .pika-select.vd-input--error, .vd-datepicker .pika-title .pika-select.vd-error, .vd-datepicker .pika-title .pika-select.ng-invalid.ng-dirty, .ng-submitted .vd-datepicker .pika-title .pika-select.ng-invalid,
 .vd-datepicker-range .pika-title .pika-select.vd-input--error,
 .vd-datepicker-range .pika-title .pika-select.vd-error,
 .vd-datepicker-range .pika-title .pika-select.ng-invalid.ng-dirty,
 .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-datepicker .pika-title .pika-select.vd-input--error:focus, .vd-datepicker .pika-title .pika-select.vd-input--error.vd-focus, .vd-datepicker .pika-title .pika-select.vd-error:focus, .vd-datepicker .pika-title .pika-select.vd-error.vd-focus, .vd-datepicker .pika-title .pika-select.ng-invalid.ng-dirty:focus, .vd-datepicker .pika-title .pika-select.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-datepicker .pika-title .pika-select.ng-invalid:focus, .ng-submitted .vd-datepicker .pika-title .pika-select.ng-invalid.vd-focus,
 .vd-datepicker-range .pika-title .pika-select.vd-input--error:focus,
@@ -2892,13 +2892,13 @@ vd-carousel-frame {
 .vd-datepicker-range .pika-title .pika-select.ng-invalid.ng-dirty.vd-focus,
 .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid:focus,
 .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 .vd-datepicker .pika-title .pika-select-month,
 .vd-datepicker-range .pika-title .pika-select-month {
   top: -15px;
   position: absolute;
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   width: 110px;
   left: 29px;
 }
@@ -2906,7 +2906,7 @@ vd-carousel-frame {
 .vd-datepicker-range .pika-title .pika-select-year {
   top: -15px;
   position: absolute;
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   width: 72px;
   right: 29px;
 }
@@ -2931,15 +2931,15 @@ vd-carousel-frame {
   position: absolute;
   width: 7px;
   height: 7px;
-  border-right: 3px solid var(--vd-colour--text);
-  border-top: 3px solid var(--vd-colour--text);
+  border-right: 3px solid var(--hs-color-fg-neutral-default);
+  border-top: 3px solid var(--hs-color-fg-neutral-default);
   box-sizing: initial;
   transform: rotate(225deg);
 }
 .vd-datepicker .pika-title .pika-prev.is-disabled:before,
 .vd-datepicker-range .pika-title .pika-prev.is-disabled:before {
-  border-right: 3px solid var(--vd-colour--framing);
-  border-top: 3px solid var(--vd-colour--framing);
+  border-right: 3px solid var(--hs-color-border-neutral-soft);
+  border-top: 3px solid var(--hs-color-border-neutral-soft);
 }
 .vd-datepicker .pika-title .pika-next,
 .vd-datepicker-range .pika-title .pika-next {
@@ -2955,15 +2955,15 @@ vd-carousel-frame {
   position: absolute;
   width: 7px;
   height: 7px;
-  border-right: 3px solid var(--vd-colour--text);
-  border-top: 3px solid var(--vd-colour--text);
+  border-right: 3px solid var(--hs-color-fg-neutral-default);
+  border-top: 3px solid var(--hs-color-fg-neutral-default);
   box-sizing: initial;
   transform: rotate(45deg);
 }
 .vd-datepicker .pika-title .pika-next.is-disabled:before,
 .vd-datepicker-range .pika-title .pika-next.is-disabled:before {
-  border-right: 3px solid var(--vd-colour--framing);
-  border-top: 3px solid var(--vd-colour--framing);
+  border-right: 3px solid var(--hs-color-border-neutral-soft);
+  border-top: 3px solid var(--hs-color-border-neutral-soft);
 }
 .vd-datepicker .is-disabled,
 .vd-datepicker-range .is-disabled {
@@ -2971,11 +2971,11 @@ vd-carousel-frame {
 }
 .vd-datepicker .is-inrange,
 .vd-datepicker-range .is-inrange {
-  background-color: var(--vd-colour--do-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
 }
 .vd-datepicker .is-inrange .pika-button,
 .vd-datepicker-range .is-inrange .pika-button {
-  background-color: var(--vd-colour--do-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
   border-radius: 0;
 }
 .vd-datepicker .is-inrange .pika-button:hover,
@@ -2984,11 +2984,11 @@ vd-carousel-frame {
 }
 .vd-datepicker .is-startrange,
 .vd-datepicker-range .is-startrange {
-  background-image: linear-gradient(to right, transparent 50%, var(--vd-colour--do-highlight) 50%);
+  background-image: linear-gradient(to right, transparent 50%, var(--hs-color-bg-go-highlight-default) 50%);
 }
 .vd-datepicker .is-endrange,
 .vd-datepicker-range .is-endrange {
-  background-image: linear-gradient(to right, var(--vd-colour--do-highlight) 50%, transparent 50%);
+  background-image: linear-gradient(to right, var(--hs-color-bg-go-highlight-default) 50%, transparent 50%);
 }
 .vd-datepicker .is-selected.is-startrange.is-endrange,
 .vd-datepicker-range .is-selected.is-startrange.is-endrange {
@@ -3003,34 +3003,34 @@ vd-carousel-frame {
 .vd-datepicker-range .pika-button {
   font-size: 15px;
   cursor: pointer;
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   width: 30px;
   height: 30px;
   border: none;
   border-radius: 50%;
   padding: 3px;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
 }
 .vd-datepicker .pika-button:hover,
 .vd-datepicker-range .pika-button:hover {
-  background: rgba(var(--vd-colour--do-rgb), 0.35);
+  background: rgba(var(--hs-color-bg-go-default), 0.35);
 }
 .vd-datepicker .is-today .pika-button,
 .vd-datepicker-range .is-today .pika-button {
-  color: var(--vd-colour--do);
+  color: var(--hs-color-fg-go-default);
   font-weight: 700;
 }
 .vd-datepicker .is-startrange .pika-button,
 .vd-datepicker .is-endrange .pika-button,
 .vd-datepicker-range .is-startrange .pika-button,
 .vd-datepicker-range .is-endrange .pika-button {
-  border: 2px solid var(--vd-colour--do);
-  background: var(--vd-colour--do-highlight);
+  border: 2px solid var(--hs-color-fg-go-default);
+  background: var(--hs-color-bg-go-highlight-default);
 }
 .vd-datepicker .is-selected .pika-button,
 .vd-datepicker-range .is-selected .pika-button {
-  background: var(--vd-colour--do);
-  color: var(--vd-colour--text-action);
+  background: var(--hs-color-bg-go-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
   font-weight: 700;
   border: none;
 }
@@ -3041,8 +3041,8 @@ vd-carousel-frame {
 }
 .vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button,
 .vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
-  background: var(--vd-colour--do-highlight);
-  color: var(--vd-colour--text);
+  background: var(--hs-color-bg-go-highlight-default);
+  color: var(--hs-color-fg-neutral-default);
   font-weight: normal;
 }
 
@@ -3111,7 +3111,7 @@ vd-carousel-frame {
   box-sizing: border-box;
   margin: 0 auto;
   padding: var(--vd-dialog-spacing);
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   border-radius: 4px;
   display: flex;
   flex-direction: column;
@@ -3198,7 +3198,7 @@ vd-carousel-frame {
   width: 40px;
   margin: 20px auto 0;
   border: none;
-  border-top: 1px solid var(--vd-colour--keyline);
+  border-top: 1px solid var(--hs-color-border-neutral-strong);
 }
 
 .vd-dialog-content {
@@ -3274,9 +3274,9 @@ vd-carousel-frame {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   border-radius: 50%;
-  color: var(--vd-colour--supplementary--text);
+  color: var(--hs-color-fg-supplementary-default);
   padding: 10px;
   text-decoration: none;
   border: 0;
@@ -3292,15 +3292,15 @@ vd-carousel-frame {
 }
 .vd-dialog-close:focus {
   outline: 0;
-  box-shadow: 0 0 3px 1px var(--vd-colour--go);
+  box-shadow: 0 0 3px 1px var(--hs-color-fg-go-default);
 }
 .vd-modal--size-full-screen .vd-dialog-close {
   top: 16px;
   right: 16px;
 }
 .vd-modal--size-full-screen .vd-dialog-close .vd-dialog-close-button {
-  background-color: var(--vd-colour--supplementary);
-  color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-bg-neutral-top);
 }
 .vd-modal--size-full-screen .vd-dialog-close .vd-dialog-close-icon {
   opacity: 1;
@@ -3336,7 +3336,7 @@ vd-carousel-frame {
   font-size: 12px;
 }
 .vd-modal--size-full-screen .vd-dialog-close-label {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
   font-weight: bold;
 }
 @media only screen and (max-width: 768px) {
@@ -3346,14 +3346,14 @@ vd-carousel-frame {
 }
 
 .vd-dialog-close--inverse .vd-dialog-close-button {
-  background: var(--vd-colour--supplementary);
-  color: var(--vd-colour--text-action);
+  background: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
 }
 .vd-dialog-close--inverse .vd-dialog-close-icon {
   opacity: 1;
 }
 .vd-dialog-close--inverse .vd-dialog-close-label {
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   opacity: 0.5;
 }
 
@@ -3373,22 +3373,22 @@ vd-dott,
 }
 
 .vd-dott-gradient-start {
-  stop-color: var(--vd-colour--go);
+  stop-color: var(--hs-color-fg-go-default);
 }
 
 .vd-dott-gradient-stop {
-  stop-color: var(--vd-colour--success);
+  stop-color: var(--hs-color-fg-success-default);
 }
 
 .vd-dott-border:not(.vd-input--error):not(.vd-error) {
   border: initial;
-  border-top: 2px solid var(--vd-colour--go);
-  border-bottom: 2px solid var(--vd-colour--success);
-  background-image: linear-gradient(var(--vd-colour--go), var(--vd-colour--success)), linear-gradient(var(--vd-colour--go), var(--vd-colour--success));
+  border-top: 2px solid var(--hs-color-fg-go-default);
+  border-bottom: 2px solid var(--hs-color-fg-success-default);
+  background-image: linear-gradient(var(--hs-color-fg-go-default), var(--hs-color-fg-success-default)), linear-gradient(var(--hs-color-fg-go-default), var(--hs-color-fg-success-default));
   background-size: 2px 100%;
   background-position: 0 0, 100% 0;
   background-repeat: no-repeat;
-  box-shadow: 0 0 4px 0 var(--vd-colour--go);
+  box-shadow: 0 0 4px 0 var(--hs-color-fg-go-default);
 }
 
 .vd-dropdown-input {
@@ -3399,10 +3399,10 @@ vd-dott,
 }
 
 .vd-dropdown-input-container.vd-input--error .vd-dropdown-input, .vd-dropdown-input-container.vd-error .vd-dropdown-input, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-dropdown-input-container.vd-input--error .vd-dropdown-input:focus, .vd-dropdown-input-container.vd-input--error .vd-dropdown-input.vd-focus, .vd-dropdown-input-container.vd-error .vd-dropdown-input:focus, .vd-dropdown-input-container.vd-error .vd-dropdown-input.vd-focus, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input:focus, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input.vd-focus, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input:focus, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .vd-expandable-content {
@@ -3515,7 +3515,7 @@ vd-dott,
   margin: 0 0 16px;
   font-size: 16px;
   font-weight: 700;
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
   width: 100%;
 }
 
@@ -3531,14 +3531,14 @@ vd-dott,
   font-weight: 900;
   text-transform: uppercase;
   padding: 4px 8px;
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   display: inline-block;
   vertical-align: text-top;
   overflow: hidden;
 }
 .vd-flag, .vd-flag:link, .vd-flag:visited {
-  color: var(--vd-colour--supplementary--text) !important;
+  color: var(--hs-color-fg-supplementary-default) !important;
 }
 
 .vd-flag-chevron {
@@ -3556,13 +3556,13 @@ vd-dott,
 
 .vd-flag--negative,
 .vd-flag--warning {
-  background-color: var(--vd-colour--no);
+  background-color: var(--hs-color-bg-no-default);
 }
 .vd-flag--negative, .vd-flag--negative:link, .vd-flag--negative:visited,
 .vd-flag--warning,
 .vd-flag--warning:link,
 .vd-flag--warning:visited {
-  color: var(--vd-colour--text-action) !important;
+  color: var(--hs-color-fg-neutral-ondark-default) !important;
 }
 .vd-flag--negative .vd-flag-chevron,
 .vd-flag--warning .vd-flag-chevron {
@@ -3629,7 +3629,7 @@ vd-dott,
 .vd-header {
   display: block;
   font-weight: 700;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   margin: 0;
 }
 
@@ -3681,7 +3681,7 @@ vd-dott,
   text-align: center;
   padding: 48px 20px;
   box-sizing: border-box;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 @media only screen and (max-width: 1000px) {
   .vd-hero-container .vd-hero {
@@ -3707,7 +3707,7 @@ vd-dott,
   word-break: break-word;
   font-weight: 700;
   margin: 0;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   line-height: 1.2;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -3742,9 +3742,9 @@ vd-dott,
   justify-content: center;
   padding: 20px;
   box-sizing: border-box;
-  background-color: var(--vd-colour--box-inverse);
+  background-color: var(--hs-color-bg-neutral-inverted-top);
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-  color: var(--vd-colour--text-inverse);
+  color: var(--hs-color-fg-neutral-inverted-default);
   text-align: center;
   font-size: 15px;
 }
@@ -3794,7 +3794,7 @@ vd-dott,
 }
 
 .vd-hero-aux-footer {
-  color: var(--vd-colour--keyline);
+  color: var(--hs-color-border-neutral-strong);
   margin-top: 12px;
 }
 
@@ -3802,7 +3802,7 @@ vd-dott,
   margin: 20px auto;
   width: 100%;
   max-width: 1100px;
-  border-top: 1px solid var(--vd-colour--keyline);
+  border-top: 1px solid var(--hs-color-border-neutral-strong);
   border-left: none;
   border-right: none;
   border-bottom: none;
@@ -3818,7 +3818,7 @@ vd-dott,
   font-size: 12px;
 }
 .vd-countdown:not(.vd-text--negative) {
-  color: var(--vd-colour--supplementary--text);
+  color: var(--hs-color-fg-supplementary-default);
 }
 
 .vd-in-page-help {
@@ -3826,7 +3826,7 @@ vd-dott,
 }
 
 .vd-in-page-help-section {
-  border-bottom: 1px solid var(--vd-colour--framing);
+  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
 }
 
 .vd-in-page-help-container {
@@ -3882,13 +3882,13 @@ vd-dott,
 }
 
 .vd-link {
-  color: var(--vd-colour--go);
+  color: var(--hs-color-fg-go-default);
   text-decoration: none;
   cursor: pointer;
   transition: color 0.2s;
 }
 .vd-link:visited {
-  color: var(--vd-colour--go);
+  color: var(--hs-color-fg-go-default);
 }
 @media (hover: hover) {
   .vd-link:hover {
@@ -3905,7 +3905,7 @@ vd-dott,
 }
 @media (hover: hover) {
   .vd-link--secondary:hover {
-    color: var(--vd-colour--go) !important;
+    color: var(--hs-color-fg-go-default) !important;
   }
 }
 
@@ -3920,8 +3920,8 @@ vd-dott,
   line-height: 1.3333333333;
   font-weight: 400;
   padding: 6px 10px;
-  color: var(--vd-colour--supplementary--text);
-  background-color: var(--vd-colour--framing);
+  color: var(--hs-color-fg-supplementary-default);
+  background-color: var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   display: inline-block;
   margin-right: 4px;
@@ -3939,8 +3939,8 @@ vd-dott,
 }
 
 .vd-lozenge--interactive {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--supplementary);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-supplementary-default);
 }
 
 .vd-lozenge--disabled {
@@ -3950,8 +3950,8 @@ vd-dott,
 }
 
 .vd-lozenge--marked {
-  background-color: var(--vd-colour--no);
-  color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-bg-no-default);
+  color: var(--hs-color-fg-neutral-ondark-default);
 }
 
 @keyframes vd-lozenge-group-already-added {
@@ -3977,25 +3977,25 @@ vd-dott,
   align-items: center;
   cursor: text;
   box-shadow: none;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
 }
 .vd-lozenge-group:focus, .vd-lozenge-group.vd-focus {
-  border-color: var(--vd-colour--go);
-  box-shadow: 0 0 3px var(--vd-colour--go);
+  border-color: var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
 }
 .vd-lozenge-group.vd-input--error, .vd-lozenge-group.vd-error, .vd-lozenge-group.ng-invalid.ng-dirty, .ng-submitted .vd-lozenge-group.ng-invalid {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-lozenge-group.vd-input--error:focus, .vd-lozenge-group.vd-input--error.vd-focus, .vd-lozenge-group.vd-error:focus, .vd-lozenge-group.vd-error.vd-focus, .vd-lozenge-group.ng-invalid.ng-dirty:focus, .vd-lozenge-group.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-lozenge-group.ng-invalid:focus, .ng-submitted .vd-lozenge-group.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 .vd-lozenge-group:focus-within {
-  border-color: var(--vd-colour--go);
-  box-shadow: 0 0 3px var(--vd-colour--go);
+  border-color: var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
 }
 .vd-lozenge-group .vd-lozenge {
   margin-left: 4px;
@@ -4008,7 +4008,7 @@ vd-dott,
   animation-fill-mode: both;
 }
 .vd-lozenge-group .vd-lozenge-group-input {
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -4023,7 +4023,7 @@ vd-dott,
   flex-grow: 1;
 }
 .vd-lozenge-group .vd-lozenge-group-input::placeholder {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
   opacity: 1;
 }
 .vd-lozenge-group .vd-lozenge-group-input:placeholder-shown {
@@ -4045,7 +4045,7 @@ vd-dott,
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  border: 2px solid var(--vd-colour--do);
+  border: 2px solid var(--hs-color-fg-go-default);
   border-left-color: transparent;
   animation: vd-rotate 1s ease-in-out infinite;
 }
@@ -4129,7 +4129,7 @@ vd-dott,
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   position: absolute;
   z-index: 410;
 }
@@ -4150,7 +4150,7 @@ vd-dott,
 
 .vd-overlay--visible {
   visibility: visible;
-  background-color: var(--vd-colour--overlay);
+  background-color: var(--hs-color-overlay-dark-default);
   pointer-events: auto;
 }
 
@@ -4166,12 +4166,12 @@ vd-dott,
 
 .vd-panel {
   display: block;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   margin: 0 -24px;
 }
 
 .vd-panel--dark {
-  background-color: var(--vd-colour--background);
+  background-color: var(--hs-color-bg-neutral-backdrop);
 }
 
 .vd-popover-container {
@@ -4182,7 +4182,7 @@ vd-dott,
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   display: none;
   position: relative;
   z-index: 300;
@@ -4249,8 +4249,8 @@ vd-dott,
 .vd-popover {
   position: relative;
   border-radius: 5px;
-  filter: drop-shadow(0 4px 5px var(--vd-colour--shadow));
-  background-color: var(--vd-colour--box);
+  filter: drop-shadow(0 4px 5px var(--hs-color-overlay-dark-default));
+  background-color: var(--hs-color-bg-neutral-top);
 }
 .vd-popover-tether-pinned-bottom .vd-popover {
   margin-bottom: 12px;
@@ -4263,7 +4263,7 @@ vd-dott,
   position: relative;
   box-sizing: border-box;
   border-radius: 5px;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   z-index: 1;
   padding: 24px;
   max-height: calc(50vh - 40px);
@@ -4284,11 +4284,11 @@ vd-dott,
   position: absolute;
   height: 12px;
   width: 12px;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   transform: rotate(45deg);
 }
 .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top .vd-popover-actions:not(:empty) ~ .vd-popover-beak {
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
 }
 .vd-popover-tether-pinned .vd-popover-beak {
   display: none;
@@ -4343,13 +4343,13 @@ vd-dott,
 }
 .vd-multiselect-popover-container .vd-input-icon {
   padding-right: 24px;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
 }
 .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input.vd-focus, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input.vd-focus, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input.vd-focus, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input:focus, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .vd-multiselect-popover-content-container {
@@ -4470,7 +4470,7 @@ vd-dott,
   text-decoration: none;
 }
 .vd-popover-list-item.vd-popover-list-item--active, .vd-popover-list-item:hover, .vd-popover-list-item:focus {
-  background-color: var(--vd-colour--go-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
 }
 
 .vd-popover-list-item--disabled {
@@ -4521,7 +4521,7 @@ vd-dott,
 }
 
 .vd-popover-list-footer--full {
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border-top: 1px solid var(--hs-color-border-neutral-soft);
   display: flex;
   flex-direction: column;
@@ -4539,9 +4539,9 @@ vd-dott,
   font-size: 15px;
   line-height: 1.3333333333;
   font-weight: 700;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 0;
-  color: var(--vd-colour--do);
+  color: var(--hs-color-fg-go-default);
   cursor: pointer;
   flex: 1 0 100%;
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -4552,11 +4552,11 @@ vd-dott,
 }
 @media (hover: hover) {
   .vd-popover-list-footer-action:hover {
-    background-color: var(--vd-colour--go-highlight);
+    background-color: var(--hs-color-bg-go-highlight-default);
   }
 }
 .vd-popover-list-footer-action:active, .vd-popover-list-footer-action:focus {
-  background-color: var(--vd-colour--go-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
 }
 
 .vd-popover-list-separator {
@@ -4583,7 +4583,7 @@ vd-dott,
   word-break: break-word;
   font-weight: 700;
   margin: 0;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   line-height: 1.25;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -4724,7 +4724,7 @@ vd-dott,
   height: 24px;
   width: 24px;
   border-radius: 50%;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 2px solid var(--hs-color-border-neutral-soft);
   box-sizing: border-box;
 }
@@ -4735,7 +4735,7 @@ vd-dott,
   height: 8px;
   width: 8px;
   border-radius: 50%;
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
   opacity: 0;
   left: 6px;
   top: 6px;
@@ -4748,13 +4748,13 @@ vd-dott,
 
 .vd-radio-input:checked + .vd-radio-tick {
   transition: background-color 0.8s;
-  background-color: var(--vd-colour--do);
-  border-color: var(--vd-colour--do);
+  background-color: var(--hs-color-bg-go-default);
+  border-color: var(--hs-color-fg-go-default);
 }
 .vd-radio-input:checked + .vd-radio-tick:after {
   opacity: 1;
   animation: vd-radio-checked 0.8s;
-  background-color: var(--vd-colour--text-action);
+  background-color: var(--hs-color-fg-neutral-ondark-default);
   box-sizing: content-box;
   backface-visibility: hidden;
 }
@@ -4771,7 +4771,7 @@ vd-dott,
 .vd-radio.vd-disabled .vd-radio-input:hover:checked + .vd-radio-tick:after,
 .vd-radio-input:disabled:hover:checked + .vd-radio-tick:after {
   opacity: 1;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 .vd-radio.vd-disabled .vd-radio-input ~ .vd-radio-label,
 .vd-radio-input:disabled ~ .vd-radio-label {
@@ -4784,7 +4784,7 @@ vd-dott,
 }
 
 .vd-radio:focus-within {
-  box-shadow: 0 0 5px 2px var(--vd-colour--go);
+  box-shadow: 0 0 5px 2px var(--hs-color-fg-go-default);
 }
 
 .vd-scrollable-container {
@@ -4816,7 +4816,7 @@ vd-dott,
 }
 .vd-scrollable-indicator::before {
   content: "";
-  box-shadow: 0 0 30px var(--vd-colour--shadow);
+  box-shadow: 0 0 30px var(--hs-color-overlay-dark-default);
   border-radius: 100%;
   width: 100%;
   height: 100%;
@@ -4898,12 +4898,12 @@ vd-section .vd-section,
 
 .vd-section--secondary,
 .vd-section--secondary .vd-section-container {
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
 }
 
 .vd-section--tertiary,
 .vd-section--tertiary .vd-section-container {
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 
 .vd-section--panel {
@@ -4930,7 +4930,7 @@ vd-section .vd-section,
   right: 1em;
   content: "";
   bottom: 0;
-  box-shadow: 0 0.1em 4em 0 var(--vd-colour--shadow);
+  box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-dark-default);
 }
 .vd-section--fixed::after {
   animation: vd-fade-in 0.2s ease-in-out;
@@ -4944,7 +4944,7 @@ vd-section .vd-section,
 
 .vd-section--action-bar,
 .vd-section--action-bar .vd-section-container {
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
 }
 .vd-section--action-bar .vd-section-wrap {
   min-height: 45px;
@@ -4982,7 +4982,7 @@ vd-section .vd-section,
 }
 .vd-section-back .vd-section-back-icon {
   display: block;
-  color: var(--vd-colour--keyline);
+  color: var(--hs-color-border-neutral-strong);
   font-size: 24px;
   transition-duration: 0.2s;
   transition-property: margin-left, padding-right, color;
@@ -4990,7 +4990,7 @@ vd-section .vd-section,
 .vd-section-back:hover .vd-section-back-icon {
   margin-left: -2px;
   padding-right: 2px;
-  color: var(--vd-colour--do);
+  color: var(--hs-color-fg-go-default);
 }
 @media only screen and (max-width: 1000px) {
   .vd-section-back {
@@ -5023,13 +5023,13 @@ vd-section .vd-section,
 }
 
 .vd-segcontrol--selected .vd-segcontrol-button {
-  border-color: var(--vd-colour--do) !important;
+  border-color: var(--hs-color-fg-go-default) !important;
   z-index: 3;
 }
 
 .vd-segcontrol:not(.vd-segcontrol--selected):not(.vd-segcontrol--disabled):hover .vd-segcontrol-input:not(:disabled) ~ .vd-segcontrol-button {
   z-index: 2;
-  border-color: var(--vd-colour--keyline);
+  border-color: var(--hs-color-border-neutral-strong);
   cursor: pointer;
 }
 
@@ -5042,10 +5042,10 @@ vd-section .vd-section,
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   padding: 12px 20px;
   border: 2px solid var(--hs-color-border-neutral-soft);
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   width: 100%;
   transition-duration: 0.2s;
   transition-property: background, border;
@@ -5056,7 +5056,7 @@ vd-section .vd-section,
   position: absolute;
 }
 .vd-segcontrol-input:checked + .vd-segcontrol-button {
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
 }
 .vd-segcontrol-input:disabled + .vd-segcontrol-button {
   opacity: 0.35;
@@ -5066,8 +5066,8 @@ vd-section .vd-section,
 }
 
 .vd-segcontrol:active .vd-segcontrol-input + .vd-segcontrol-button {
-  background-color: rgba(var(--vd-colour--box-rgb), 0.2);
-  box-shadow: 0 0 3px 2px rgba(var(--vd-colour--box-rgb), 0.35);
+  background-color: rgba(var(--hs-color-bg-neutral-top-rgb), 0.2);
+  box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.35);
 }
 
 .vd-segcontrol--panel {
@@ -5079,7 +5079,7 @@ vd-section .vd-section,
 }
 
 .vd-splash-fullscreen-container {
-  border: 20px solid var(--vd-colour--overlay);
+  border: 20px solid var(--hs-color-overlay-dark-default);
   box-sizing: border-box;
   display: block;
   position: fixed;
@@ -5100,7 +5100,7 @@ vd-section .vd-section,
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   overflow: auto;
   animation: vd-fade-in 0.5s ease-in-out;
   animation-fill-mode: forwards;
@@ -5129,7 +5129,7 @@ vd-section .vd-section,
 
 .vd-status-icon {
   border-radius: 50%;
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-bg-go-default);
   width: 8px;
   height: 8px;
   display: inline-block;
@@ -5137,7 +5137,7 @@ vd-section .vd-section,
 }
 
 .vd-status-icon--negative {
-  background-color: var(--vd-colour--no);
+  background-color: var(--hs-color-bg-no-default);
 }
 
 .vd-suggestions-popover .vd-popover-content {
@@ -5169,7 +5169,7 @@ vd-section .vd-section,
   right: 0;
   height: 60px;
   box-sizing: border-box;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border-top: 1px solid var(--hs-color-border-neutral-soft);
 }
 
@@ -5201,8 +5201,8 @@ vd-section .vd-section,
   margin-right: -16px !important;
 }
 .vd-suggestion-clear.vd-suggestion-clear--active {
-  color: var(--vd-colour--text-action);
-  background-color: var(--vd-colour--supplementary-lighter);
+  color: var(--hs-color-fg-neutral-ondark-default);
+  background-color: var(--hs-color-bg-supplementary-soft);
 }
 
 .vd-switch {
@@ -5227,8 +5227,8 @@ vd-section .vd-section,
   height: 36px;
   border-radius: 36px;
   box-sizing: border-box;
-  border: 2px solid var(--vd-colour--do);
-  background-color: var(--vd-colour--box);
+  border: 2px solid var(--hs-color-fg-go-default);
+  background-color: var(--hs-color-bg-neutral-top);
   transition: background-color 0.5s ease-in-out;
 }
 .vd-switch--small .vd-switch-track {
@@ -5240,7 +5240,7 @@ vd-section .vd-section,
   box-sizing: border-box;
   display: inline-block;
   position: absolute;
-  color: var(--vd-colour--text-action);
+  color: var(--hs-color-fg-neutral-ondark-default);
   top: 8px;
   left: 10px;
   opacity: 0;
@@ -5258,7 +5258,7 @@ vd-section .vd-section,
   position: absolute;
   top: 8px;
   left: 41px;
-  color: var(--vd-colour--do);
+  color: var(--hs-color-fg-go-default);
   opacity: 1;
   transition: opacity 0.54s ease-in-out;
 }
@@ -5272,8 +5272,8 @@ vd-section .vd-section,
   float: left;
   border-radius: inherit;
   box-sizing: border-box;
-  border: 2px solid var(--vd-colour--do);
-  background-color: var(--vd-colour--box);
+  border: 2px solid var(--hs-color-fg-go-default);
+  background-color: var(--hs-color-bg-neutral-top);
   pointer-events: none;
   width: 36px;
   height: 36px;
@@ -5287,7 +5287,7 @@ vd-section .vd-section,
 }
 
 .vd-switch-input:checked + .vd-switch-track {
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-bg-go-default);
 }
 .vd-switch-input:checked + .vd-switch-track .vd-switch-icon {
   opacity: 1;
@@ -5303,7 +5303,7 @@ vd-section .vd-section,
 }
 
 .vd-switch-input:focus + .vd-switch-track {
-  box-shadow: 0 0 5px 2px var(--vd-colour--go);
+  box-shadow: 0 0 5px 2px var(--hs-color-fg-go-default);
 }
 
 .vd-switch-input:disabled + .vd-switch-track {
@@ -5336,7 +5336,7 @@ vd-section .vd-section,
   gap: 16px 32px;
   padding: 0;
   margin: 0;
-  box-shadow: inset 0 -1px var(--vd-colour--keyline);
+  box-shadow: inset 0 -1px var(--hs-color-border-neutral-strong);
 }
 
 .vd-tabs-container--overflow {
@@ -5355,16 +5355,16 @@ vd-section .vd-section,
 
 .vd-tab {
   display: inline-block;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
 }
 .vd-tab.vd-tab--active .vd-tab-button {
-  border-bottom-color: var(--vd-colour--do);
-  color: var(--vd-colour--do);
+  border-bottom-color: var(--hs-color-fg-go-default);
+  color: var(--hs-color-fg-go-default);
 }
 @media (hover: hover) {
   .vd-tab:hover:not(.vd-tab--disabled) .vd-tab-button {
-    border-bottom-color: var(--vd-colour--do);
-    color: var(--vd-colour--do);
+    border-bottom-color: var(--hs-color-fg-go-default);
+    color: var(--hs-color-fg-go-default);
   }
   .vd-tab:hover:not(.vd-tab--active) .vd-tab-button {
     cursor: pointer;
@@ -5441,7 +5441,7 @@ table {
   padding: 16px 40px 16px;
 }
 .vd-table thead tr {
-  border-color: var(--vd-colour--keyline);
+  border-color: var(--hs-color-border-neutral-strong);
 }
 .vd-table tr {
   border-bottom: 1px solid var(--hs-color-border-neutral-soft);
@@ -5500,18 +5500,18 @@ table {
 @media (hover: hover) {
   .vd-table tr.vd-expandable:hover:not(.vd-expandable--nt) {
     cursor: pointer;
-    background-color: var(--vd-colour--go-highlight);
+    background-color: var(--hs-color-bg-go-highlight-default);
   }
 }
 .vd-table tr.vd-expandable + tr:not(.vd-expandable), .vd-table tr.vd-expandable.vd-expandable--expanded {
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
 }
 .vd-table tr.vd-expandable + tr:not(.vd-expandable) > td:first-child::before, .vd-table tr.vd-expandable.vd-expandable--expanded > td:first-child::before {
   content: "";
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-fg-go-default);
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -5591,7 +5591,7 @@ table {
   border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table.vd-table--data tr {
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 
 .vd-table--compact thead th {
@@ -5623,7 +5623,7 @@ table {
 }
 .vd-table--report > thead th {
   padding: 16px 16px;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 .vd-table--report > thead tr {
   border: 1px solid var(--hs-color-border-neutral-soft);
@@ -5632,10 +5632,10 @@ table {
   border-bottom: none;
 }
 .vd-table--report > tbody > tr:nth-child(odd) {
-  background-color: var(--vd-colour--background);
+  background-color: var(--hs-color-bg-neutral-backdrop);
 }
 .vd-table--report > tbody > tr:nth-child(even) {
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 .vd-table--report > tbody > tr > td {
   padding: 16px 16px;
@@ -5651,10 +5651,10 @@ table {
   margin-bottom: 0;
 }
 .vd-table--report.vd-table--report--nested > tbody > tr:nth-child(odd) {
-  background-color: var(--vd-colour--background);
+  background-color: var(--hs-color-bg-neutral-backdrop);
 }
 .vd-table--report.vd-table--report--nested > tbody > tr:nth-child(even) {
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 .vd-table--report.vd-table--report--nested > tbody > tr > td:first-child {
   padding-left: 13px;
@@ -5664,19 +5664,19 @@ table {
 }
 
 .vd-text--secondary {
-  color: var(--vd-colour--supplementary--text);
+  color: var(--hs-color-fg-supplementary-default);
 }
 
 .vd-text--success {
-  color: var(--vd-colour--do);
+  color: var(--hs-color-fg-go-default);
 }
 
 .vd-text--negative {
-  color: var(--vd-colour--no);
+  color: var(--hs-color-fg-no-default);
 }
 
 .vd-text--disabled {
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   opacity: 0.35;
 }
 
@@ -5708,7 +5708,7 @@ table {
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   position: fixed;
   right: 0;
   left: 0;
@@ -5736,7 +5736,7 @@ table {
   padding: 24px 76px 24px 40px;
   border-radius: 4px;
   box-sizing: border-box;
-  color: var(--vd-colour--text-action);
+  color: var(--hs-color-fg-neutral-ondark-default);
   text-align: center;
   font-weight: 700;
   transition: opacity ease-in-out 0.5s;
@@ -5758,25 +5758,25 @@ table {
 }
 
 .vd-toast-notification--success {
-  background-color: var(--vd-colour--success);
+  background-color: var(--hs-color-bg-success-default);
 }
 
 .vd-toast-notification--negative {
-  background-color: var(--vd-colour--no);
+  background-color: var(--hs-color-bg-no-default);
 }
 
 .vd-popover--tooltip {
-  border-color: var(--vd-colour--framing-inverse);
-  background-color: var(--vd-colour--box-inverse);
-  color: var(--vd-colour--text-inverse);
+  border-color: var(--hs-color-border-neutral-inverted-soft);
+  background-color: var(--hs-color-bg-neutral-inverted-top);
+  color: var(--hs-color-fg-neutral-inverted-default);
 }
 .vd-popover--tooltip .vd-popover-content {
-  background-color: var(--vd-colour--box-inverse);
+  background-color: var(--hs-color-bg-neutral-inverted-top);
   padding: 8px;
 }
 .vd-popover--tooltip .vd-popover-beak {
-  background-color: var(--vd-colour--box-inverse);
-  border-color: var(--vd-colour--framing-inverse);
+  background-color: var(--hs-color-bg-neutral-inverted-top);
+  border-color: var(--hs-color-border-neutral-inverted-soft);
 }
 
 @media only screen and (max-width: 480px) {
@@ -5927,11 +5927,11 @@ td.vd-show-print {
 .vd-next-stepper {
   display: block;
   padding: 24px;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-next-stepper.vd-next-stepper--on-box {
-  background-color: var(--vd-colour--background);
+  background-color: var(--hs-color-bg-neutral-backdrop);
   border-color: transparent;
 }
 
@@ -6022,7 +6022,7 @@ td.vd-show-print {
 }
 .vd-id-badge.vd-id-badge--interactive-selection {
   border: 2px solid var(--hs-color-border-neutral-soft);
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border-radius: 5px;
   cursor: pointer;
 }
@@ -6031,10 +6031,10 @@ td.vd-show-print {
 }
 .vd-id-badge.vd-id-badge--interactive-selection:hover, .vd-id-badge.vd-id-badge--interactive-selection:active, .vd-id-badge.vd-id-badge--interactive-selection:focus {
   outline: none;
-  background-color: var(--vd-colour--go-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
 }
 .vd-id-badge.vd-id-badge--current {
-  border-color: var(--vd-colour--do);
+  border-color: var(--hs-color-fg-go-default);
 }
 .vd-id-badge.vd-id-badge--small .vd-id-badge__content {
   padding: 8px;
@@ -6059,7 +6059,7 @@ td.vd-show-print {
   outline: none;
 }
 .vd-id-badge.vd-id-badge--interactive-action:hover .vd-id-badge__header-title, .vd-id-badge.vd-id-badge--interactive-action:active .vd-id-badge__header-title, .vd-id-badge.vd-id-badge--interactive-action:focus .vd-id-badge__header-title {
-  color: var(--vd-colour--go);
+  color: var(--hs-color-fg-go-default);
 }
 .vd-id-badge.vd-id-badge--x-small .vd-id-badge__content {
   padding: 8px;
@@ -6100,7 +6100,7 @@ td.vd-show-print {
   justify-content: center;
   flex: 1;
   word-break: break-word;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -6137,7 +6137,7 @@ td.vd-show-print {
 }
 
 .vd-id-badge__image {
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
@@ -6182,7 +6182,7 @@ td.vd-show-print {
 }
 
 .vd-password-strength-meter[data-value="4"] {
-  background-color: var(--vd-colour--success);
+  background-color: var(--hs-color-bg-success-default);
   width: 100%;
 }
 
@@ -6735,28 +6735,28 @@ td.vd-show-print {
 }
 
 .vd-datatable-row:nth-child(odd) {
-  background-color: var(--vd-colour--background);
+  background-color: var(--hs-color-bg-neutral-backdrop);
 }
 .vd-datatable-row:nth-child(even) {
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 
 .vd-datatable-row--header {
   border-bottom: 1px solid var(--hs-color-border-neutral-strong);
 }
 .vd-datatable-row--header:nth-child(odd), .vd-datatable-row--header:nth-child(even) {
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 
 .vd-datatable-row--header-sections {
   border-bottom: 1px solid var(--hs-color-border-neutral-strong);
 }
 .vd-datatable-row--header-sections:nth-child(odd), .vd-datatable-row--header-sections:nth-child(even) {
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
 }
 
 .vd-datatable-row--footer:nth-child(odd), .vd-datatable-row--footer:nth-child(even) {
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
 }
 
 .vd-datatable-foot.vd-sticky .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
@@ -6764,7 +6764,7 @@ td.vd-show-print {
   border-bottom-color: transparent;
 }
 .vd-datatable-foot.vd-sticky--stuck .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
-  border-bottom-color: var(--vd-colour--keyline);
+  border-bottom-color: var(--hs-color-border-neutral-strong);
   border-radius: 0;
 }
 
@@ -6778,7 +6778,7 @@ td.vd-show-print {
   left: 0;
   width: 100%;
   height: 30px;
-  box-shadow: inset 0 -30px 40px -48px var(--vd-colour--shadow);
+  box-shadow: inset 0 -30px 40px -48px var(--hs-color-overlay-dark-default);
 }
 
 .vd-datatable-cell {
@@ -6918,7 +6918,7 @@ td.vd-show-print {
   font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   font-size: 15px;
   line-height: normal;
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-size: 15px;
   position: relative;
   margin-top: 8px;
@@ -6965,8 +6965,8 @@ td.vd-show-print {
   position: absolute;
   width: 7px;
   height: 7px;
-  border-right: 3px solid var(--vd-colour--text);
-  border-top: 3px solid var(--vd-colour--text);
+  border-right: 3px solid var(--hs-color-fg-neutral-default);
+  border-top: 3px solid var(--hs-color-fg-neutral-default);
   box-sizing: initial;
   transform: rotate(225deg);
 }
@@ -6980,8 +6980,8 @@ td.vd-show-print {
   position: absolute;
   width: 7px;
   height: 7px;
-  border-right: 3px solid var(--vd-colour--text);
-  border-top: 3px solid var(--vd-colour--text);
+  border-right: 3px solid var(--hs-color-fg-neutral-default);
+  border-top: 3px solid var(--hs-color-fg-neutral-default);
   box-sizing: initial;
   transform: rotate(45deg);
 }
@@ -6997,7 +6997,7 @@ td.vd-show-print {
 
 .react-datepicker__month-select,
 .react-datepicker__year-select {
-  color: var(--vd-colour--text);
+  color: var(--hs-color-fg-neutral-default);
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -7008,7 +7008,7 @@ td.vd-show-print {
   box-sizing: border-box;
   outline: none;
   box-shadow: none;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
@@ -7018,12 +7018,12 @@ td.vd-show-print {
   background-repeat: no-repeat;
   background-size: 8px 20px;
   background-position: calc(100% - 14px) 10px;
-  background-image: var(--vd-colour--select-arrows-bg);
+  background-image: var(--hs-color-select-arrows-bg);
   padding-right: 12px;
 }
 .react-datepicker__month-select::placeholder,
 .react-datepicker__year-select::placeholder {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
   opacity: 1;
 }
 .react-datepicker__month-select:placeholder-shown,
@@ -7044,15 +7044,15 @@ td.vd-show-print {
 .react-datepicker__month-select:focus, .react-datepicker__month-select.vd-focus,
 .react-datepicker__year-select:focus,
 .react-datepicker__year-select.vd-focus {
-  border-color: var(--vd-colour--go);
-  box-shadow: 0 0 3px var(--vd-colour--go);
+  border-color: var(--hs-color-fg-go-default);
+  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
 }
 .react-datepicker__month-select.vd-input--error, .react-datepicker__month-select.vd-error, .react-datepicker__month-select.ng-invalid.ng-dirty, .ng-submitted .react-datepicker__month-select.ng-invalid,
 .react-datepicker__year-select.vd-input--error,
 .react-datepicker__year-select.vd-error,
 .react-datepicker__year-select.ng-invalid.ng-dirty,
 .ng-submitted .react-datepicker__year-select.ng-invalid {
-  border-color: var(--vd-colour--no);
+  border-color: var(--hs-color-fg-no-default);
 }
 .react-datepicker__month-select.vd-input--error:focus, .react-datepicker__month-select.vd-input--error.vd-focus, .react-datepicker__month-select.vd-error:focus, .react-datepicker__month-select.vd-error.vd-focus, .react-datepicker__month-select.ng-invalid.ng-dirty:focus, .react-datepicker__month-select.ng-invalid.ng-dirty.vd-focus, .ng-submitted .react-datepicker__month-select.ng-invalid:focus, .ng-submitted .react-datepicker__month-select.ng-invalid.vd-focus,
 .react-datepicker__year-select.vd-input--error:focus,
@@ -7063,7 +7063,7 @@ td.vd-show-print {
 .react-datepicker__year-select.ng-invalid.ng-dirty.vd-focus,
 .ng-submitted .react-datepicker__year-select.ng-invalid:focus,
 .ng-submitted .react-datepicker__year-select.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--vd-colour--no);
+  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
 }
 
 .react-datepicker__month-select {
@@ -7098,7 +7098,7 @@ td.vd-show-print {
 .vd-datepicker-day-button {
   box-sizing: border-box;
   padding: 3px;
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   width: 30px;
   height: 30px;
   border: none;
@@ -7117,14 +7117,14 @@ td.vd-show-print {
 .react-datepicker__day--range-start .vd-datepicker-day-button,
 .react-datepicker__day--range-end .vd-datepicker-day-button,
 .react-datepicker__day--selected .vd-datepicker-day-button {
-  background: var(--vd-colour--do);
-  color: var(--vd-colour--box);
+  background: var(--hs-color-bg-go-default);
+  color: var(--hs-color-bg-neutral-top);
   font-weight: 700;
   border: none;
 }
 
 .react-datepicker__day:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button:hover {
-  background: rgba(var(--vd-colour--do-rgb), 0.35);
+  background: rgba(var(--hs-color-bg-go-default-rgb), 0.35);
 }
 
 .react-datepicker__day--outside-month {
@@ -7132,15 +7132,15 @@ td.vd-show-print {
 }
 
 .react-datepicker__day--today {
-  color: var(--vd-colour--do);
+  color: var(--hs-color-fg-go-default);
   font-weight: 700;
 }
 
 .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
-  background-color: var(--vd-colour--do-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
 }
 .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button {
-  background-color: var(--vd-colour--do-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
   border-radius: 0;
 }
 .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button:hover {
@@ -7154,11 +7154,11 @@ td.vd-show-print {
 }
 
 .react-datepicker__day--range-start {
-  background-image: linear-gradient(to right, transparent 50%, var(--vd-colour--do-highlight) 50%);
+  background-image: linear-gradient(to right, transparent 50%, var(--hs-color-bg-go-highlight-default) 50%);
 }
 
 .react-datepicker__day--range-end {
-  background-image: linear-gradient(to right, var(--vd-colour--do-highlight) 50%, transparent 50%);
+  background-image: linear-gradient(to right, var(--hs-color-bg-go-highlight-default) 50%, transparent 50%);
 }
 
 .react-datepicker__day--range-start.react-datepicker__day--range-end {
@@ -7195,14 +7195,14 @@ td.vd-show-print {
   height: 10px;
   width: 100%;
   border-radius: 5px;
-  background-color: var(--vd-colour--framing);
+  background-color: var(--hs-color-border-neutral-soft);
   overflow: hidden;
 }
 
 .vs-progress-bar {
   height: 100%;
   width: 0%;
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-bg-go-default);
   transition: width 0.6s ease;
 }
 
@@ -7220,7 +7220,7 @@ td.vd-show-print {
 .vd-line-graph-container .vd-grid.vd-y .tick line,
 .vd-line-graph-container .vd-axis.vd-y .tick line,
 .vd-line-graph-container .vd-axis.vd-x .tick line {
-  stroke: var(--vd-colour--framing);
+  stroke: var(--hs-color-border-neutral-soft);
   stroke-width: 1px;
   fill: transparent;
 }
@@ -7232,12 +7232,12 @@ td.vd-show-print {
   stroke: none;
 }
 .vd-line-graph-container .vd-grid-zero-tick {
-  stroke: var(--vd-colour--keyline);
+  stroke: var(--hs-color-border-neutral-strong);
 }
 .vd-line-graph-container .vd-line {
   fill: transparent;
   stroke-width: 2px;
-  stroke: var(--vd-colour--keyline);
+  stroke: var(--hs-color-border-neutral-strong);
 }
 .vd-line-graph-container .vd-line-with-fill {
   fill: transparent;
@@ -7250,8 +7250,8 @@ td.vd-show-print {
   stroke-width: 0;
 }
 .vd-line-graph-container .vd-plot-point {
-  fill: var(--vd-colour--do);
-  stroke: var(--vd-colour--box);
+  fill: var(--hs-color-fg-go-default);
+  stroke: var(--hs-color-bg-neutral-top);
   stroke-width: 2px;
 }
 .vd-line-graph-container .vd-plot-point-with-fill {
@@ -7263,7 +7263,7 @@ td.vd-show-print {
   fill: transparent;
 }
 .vd-line-graph-container .vd-line-wrapper-main .vd-line {
-  stroke: var(--vd-colour--supplementary);
+  stroke: var(--hs-color-bg-supplementary-default);
 }
 .vd-line-graph-container .vd-line-wrapper-secondary .vd-plot-point {
   stroke: none;
@@ -7280,7 +7280,7 @@ td.vd-show-print {
   line-height: 1.2;
   font-weight: 900;
   text-transform: uppercase;
-  fill: var(--vd-colour--keyline);
+  fill: var(--hs-color-border-neutral-strong);
 }
 .vd-line-graph-container .vd-axis .tick text {
   font-synthesis: none;
@@ -7292,7 +7292,7 @@ td.vd-show-print {
   font-size: 10px;
   line-height: 1.2;
   font-weight: 400;
-  fill: var(--vd-colour--text);
+  fill: var(--hs-color-fg-neutral-default);
 }
 
 .vd-chart-popover {
@@ -7311,7 +7311,7 @@ td.vd-show-print {
   box-sizing: border-box;
   margin: 0 auto;
   padding: 0;
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   border-radius: 4px;
   width: calc(90% - 50px);
   pointer-events: auto;
@@ -7488,7 +7488,7 @@ td.vd-show-print {
   display: flex;
   padding-top: 6px;
   padding-bottom: 6px;
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
   justify-content: space-between;
   align-items: center;
   min-height: 60px;
@@ -7552,7 +7552,7 @@ td.vd-show-print {
 }
 
 .vd-table-list-toggle-icon {
-  color: var(--vd-colour--supplementary);
+  color: var(--hs-color-bg-supplementary-default);
   transition: transform 50ms ease-in-out 0s;
   width: 16px;
   height: 16px;
@@ -7609,24 +7609,24 @@ td.vd-show-print {
   border-bottom: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table-list-row.vd-table-list-row--active {
-  background-color: var(--vd-colour--go-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
 }
 
 .vd-table-list-row--expandable:hover {
   cursor: pointer;
-  background-color: var(--vd-colour--go-highlight);
+  background-color: var(--hs-color-bg-go-highlight-default);
 }
 
 .vd-table-list-row--expanded {
-  background: var(--vd-colour--box);
-  box-shadow: 0 10px 12px -2px var(--vd-colour--shadow);
+  background: var(--hs-color-bg-neutral-top);
+  box-shadow: 0 10px 12px -2px var(--hs-color-overlay-dark-default);
 }
 .vd-table-list-row--expanded .vd-table-list-cell:first-child::before {
   content: "";
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-fg-go-default);
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -7636,15 +7636,15 @@ td.vd-show-print {
 }
 
 .vd-table-list-row--actions {
-  background-color: var(--vd-colour--framing);
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  background-color: var(--hs-color-border-neutral-soft);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
 }
 
 .vd-table-list-row--expanded-content {
   display: none;
 }
 .vd-table-list-row--expanded-content > .vd-table-list-cell {
-  background: var(--vd-colour--box);
+  background: var(--hs-color-bg-neutral-top);
   padding: 0;
 }
 .vd-table-list-row--expanded-content > .vd-table-list-cell:first-child::before {
@@ -7652,7 +7652,7 @@ td.vd-show-print {
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-fg-go-default);
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -7660,7 +7660,7 @@ td.vd-show-print {
 .vd-table-list-row--expanded-content > .vd-table-list-cell:first-child::after {
   content: "";
   pointer-events: none;
-  box-shadow: 0 10px 12px -2px var(--vd-colour--shadow);
+  box-shadow: 0 10px 12px -2px var(--hs-color-overlay-dark-default);
   position: absolute;
   left: 0;
   top: 0;
@@ -7670,7 +7670,7 @@ td.vd-show-print {
 }
 
 .vd-table-list-row--header {
-  border-bottom-color: var(--vd-colour--keyline);
+  border-bottom-color: var(--hs-color-border-neutral-strong);
 }
 
 .vd-table-list-expanded-container {
@@ -7744,8 +7744,8 @@ td.vd-show-print {
   position: absolute;
   width: 100%;
   height: 100%;
-  color: var(--vd-colour--box);
-  background: var(--vd-colour--box) linear-gradient(to left, var(--vd-colour--box) 50%, #e9f6e8 50%) no-repeat;
+  color: var(--hs-color-bg-neutral-top);
+  background: var(--hs-color-bg-neutral-top) linear-gradient(to left, var(--hs-color-bg-neutral-top) 50%, #e9f6e8 50%) no-repeat;
 }
 
 .vd-upsell-primary-background-inner {
@@ -7759,7 +7759,7 @@ td.vd-show-print {
 
 .vd-upsell-primary-upper {
   position: relative;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
 }
 
 .vd-upsell-primary-background svg {
@@ -7856,7 +7856,7 @@ td.vd-show-print {
   display: flex;
   justify-content: space-between;
   flex-flow: row wrap;
-  box-shadow: inset 0 -1px var(--vd-colour--keyline);
+  box-shadow: inset 0 -1px var(--hs-color-border-neutral-strong);
 }
 
 .pm-products-search-open {
@@ -7942,7 +7942,7 @@ td.vd-show-print {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background-color: var(--vd-colour--box);
+  background-color: var(--hs-color-bg-neutral-top);
   padding-top: 8px;
   height: auto;
 }
@@ -7969,10 +7969,10 @@ td.vd-show-print {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--vd-colour--keyline);
+  background-color: var(--hs-color-border-neutral-strong);
 }
 .vd-carousel-wrapper .vd-carousel-paginator-indicator--active::before {
-  background-color: var(--vd-colour--do);
+  background-color: var(--hs-color-bg-go-default);
 }
 
 .vd-video-thumbnail-container {
@@ -7989,7 +7989,7 @@ td.vd-show-print {
   margin: auto;
 }
 .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button {
-  background-color: var(--vd-colour--background);
+  background-color: var(--hs-color-bg-neutral-backdrop);
   width: 80px;
   height: 80px;
   border-radius: 50%;
@@ -7998,10 +7998,10 @@ td.vd-show-print {
   transform: translateX(3px);
 }
 .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button:hover {
-  background-color: var(--vd-colour--supplementary);
+  background-color: var(--hs-color-bg-supplementary-default);
 }
 .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button:active {
-  background-color: var(--vd-colour--supplementary);
+  background-color: var(--hs-color-bg-supplementary-default);
 }
 .vd-video-thumbnail-container .vd-video-thumbnail-image {
   position: absolute;
@@ -8035,14 +8035,14 @@ td.vd-show-print {
   top: 0;
 }
 .vd-sticky--top.vd-sticky--stuck {
-  box-shadow: 0 20px 40px -20px var(--vd-colour--shadow);
+  box-shadow: 0 20px 40px -20px var(--hs-color-overlay-dark-default);
 }
 
 .vd-sticky--bottom {
   bottom: 0;
 }
 .vd-sticky--bottom.vd-sticky--stuck {
-  box-shadow: 0 -20px 40px -20px var(--vd-colour--shadow);
+  box-shadow: 0 -20px 40px -20px var(--hs-color-overlay-dark-default);
 }
 
 .vd-sticky--stuck {