@lightspeed/design-system-css 27.2.1 → 29.0.0

package/src/vend.ui/components/vd-password/vd-password.scss

@@ -26,6 +26,6 @@
   width: calc(2 / 3 * 100%);
 }
 .vd-password-strength-meter[data-value='4'] {
-  background-color: vd-colour(success);
+  background-color: hs-color(bg-success-default);
   width: calc(3 / 3 * 100%);
 }

package/src/vend.ui/components/vd-popover/vd-popover.scss

@@ -71,8 +71,8 @@
 .vd-popover {
   position: relative;
   border-radius: $vd-popover-border-radius;
-  filter: drop-shadow(0 4px 5px var(--vd-colour--shadow));
-  background-color: vd-colour(box);
+  filter: drop-shadow(0 4px 5px hs-color(overlay-dark-default));
+  background-color: hs-color(bg-neutral-top);
 
   .vd-popover-tether-pinned-bottom & {
     margin-bottom: $vd-popover-beak-size;
@@ -87,7 +87,7 @@
   position: relative;
   box-sizing: border-box;
   border-radius: $vd-popover-border-radius;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   z-index: 1;
   padding: $vd-popover-spacing;
 
@@ -112,7 +112,7 @@
   position: absolute;
   height: $vd-popover-beak-size;
   width: $vd-popover-beak-size;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   transform: rotate(45deg);
 
   // If there is a vd-action-bar present and the beak is at the bottom it should be the same colour as the action bar

package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss

@@ -78,7 +78,7 @@
   &.vd-popover-list-item--active,
   &:hover,
   &:focus {
-    background-color: vd-colour(go-highlight);
+    background-color: hs-color(bg-go-highlight-default);
   }
 }
 
@@ -104,7 +104,7 @@
 }
 
 .vd-popover-list-footer--full {
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border-top: 1px solid hs-color(border-neutral-soft);
   display: flex;
   flex-direction: column;
@@ -114,9 +114,9 @@
 
 .vd-popover-list-footer-action {
   @include vd-text(label);
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border: 0;
-  color: vd-colour(do);
+  color: hs-color(fg-go-default);
   cursor: pointer;
   flex: 1 0 100%;
   font-family: $vd-font-lato;
@@ -127,13 +127,13 @@
 
   @include vd-hover-when-supported {
     &:hover {
-      background-color: vd-colour(go-highlight);
+      background-color: hs-color(bg-go-highlight-default);
     }
   }
 
   &:active,
   &:focus {
-    background-color: vd-colour(go-highlight);
+    background-color: hs-color(bg-go-highlight-default);
   }
 }
 

package/src/vend.ui/components/vd-radio/vd-radio.scss

@@ -65,7 +65,7 @@
   height: $vd-radio-length;
   width: $vd-radio-length;
   border-radius: 50%;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border: 2px solid hs-color(border-neutral-soft);
   box-sizing: border-box;
 
@@ -76,7 +76,7 @@
     height: $vd-radio-tick-length;
     width: $vd-radio-tick-length;
     border-radius: 50%;
-    background-color: vd-colour(framing);
+    background-color: hs-color(border-neutral-soft);
     opacity: 0;
     left: $vd-radio-tick-position;
     top: $vd-radio-tick-position;
@@ -91,13 +91,13 @@
 // Checked
 .vd-radio-input:checked + .vd-radio-tick {
   transition: background-color $vd-time-l;
-  background-color: vd-colour(do);
-  border-color: vd-colour(do);
+  background-color: hs-color(bg-go-default);
+  border-color: hs-color(fg-go-default);
 
   &:after {
     opacity: 1;
     animation: vd-radio-checked $vd-time-l;
-    background-color: vd-colour(text-action);
+    background-color: hs-color(fg-neutral-ondark-default);
     box-sizing: content-box;
     backface-visibility: hidden;
   }
@@ -114,7 +114,7 @@
   }
   &:hover:checked + .vd-radio-tick:after {
     opacity: 1;
-    background-color: vd-colour(box);
+    background-color: hs-color(bg-neutral-top);
   }
 
   ~ .vd-radio-label {
@@ -129,5 +129,5 @@
 
 // Focus
 .vd-radio:focus-within {
-  box-shadow: 0 0 5px 2px vd-colour(go);
+  box-shadow: 0 0 5px 2px hs-color(fg-go-default);
 }

package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss

@@ -29,7 +29,7 @@
 
   &::before {
     content: '';
-    box-shadow: 0 0 $vd-scrollable-indicator-height vd-colour(shadow);
+    box-shadow: 0 0 $vd-scrollable-indicator-height hs-color(overlay-dark-default);
     border-radius: 100%;
     width: 100%;
     height: 100%;

package/src/vend.ui/components/vd-section/vd-section.scss

@@ -61,14 +61,14 @@ vd-section,
 .vd-section--secondary {
   &,
   .vd-section-container {
-    background-color: vd-colour(framing);
+    background-color: hs-color(border-neutral-soft);
   }
 }
 
 .vd-section--tertiary {
   &,
   .vd-section-container {
-    background-color: vd-colour(box);
+    background-color: hs-color(bg-neutral-top);
   }
 }
 
@@ -104,7 +104,7 @@ vd-section,
 .vd-section--action-bar {
   &,
   .vd-section-container {
-    background-color: vd-colour(framing);
+    background-color: hs-color(border-neutral-soft);
   }
 
   .vd-section-wrap {

package/src/vend.ui/components/vd-section-back/vd-section-back.scss

@@ -8,7 +8,7 @@
 
   .vd-section-back-icon {
     display: block;
-    color: vd-colour(keyline);
+    color: hs-color(border-neutral-strong);
     font-size: $vd-section-back-icon-font-size;
     transition-duration: $vd-time-s;
     transition-property: margin-left, padding-right, color;
@@ -18,7 +18,7 @@
     .vd-section-back-icon {
       margin-left: -2px;
       padding-right: 2px;
-      color: vd-colour(do);
+      color: hs-color(fg-go-default);
     }
   }
 

package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss

@@ -21,7 +21,7 @@
 
 .vd-segcontrol--selected {
   .vd-segcontrol-button {
-    border-color: vd-colour(do) !important;
+    border-color: hs-color(fg-go-default) !important;
     z-index: 3;
   }
 }
@@ -29,7 +29,7 @@
 .vd-segcontrol:not(.vd-segcontrol--selected):not(.vd-segcontrol--disabled):hover {
   .vd-segcontrol-input:not(:disabled) ~ .vd-segcontrol-button {
     z-index: 2;
-    border-color: vd-colour(keyline);
+    border-color: hs-color(border-neutral-strong);
     cursor: pointer;
   }
 }
@@ -43,10 +43,10 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   padding: $vd-input-padding vd-grid-unit(5);
   border: $vd-input-border-width solid hs-color(border-neutral-soft);
-  color: vd-colour(text);
+  color: hs-color(fg-neutral-default);
   width: 100%;
   transition-duration: $vd-time-s;
   transition-property: background, border;
@@ -57,7 +57,7 @@
   position: absolute;
 
   &:checked + .vd-segcontrol-button {
-    color: vd-colour(text);
+    color: hs-color(fg-neutral-default);
   }
 
   &:disabled + .vd-segcontrol-button {
@@ -70,8 +70,8 @@
 
 // Putting this at the bottom, so wins specificity wars.
 .vd-segcontrol:active .vd-segcontrol-input + .vd-segcontrol-button {
-  background-color: vd-rgba(vd-colour(box-rgb), 0.2);
-  box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread vd-rgba(vd-colour(box-rgb), $vd-opacity);
+  background-color: vd-rgba(hs-color(bg-neutral-top-rgb), 0.2);
+  box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread vd-rgba(hs-color(bg-neutral-top-rgb), $vd-opacity);
 }
 
 .vd-segcontrol--panel {

package/src/vend.ui/components/vd-select/vd-select-inline.scss

@@ -25,7 +25,7 @@
 }
 
 .vd-select-inline--placeholder {
-  color: vd-colour(supplementary);
+  color: hs-color(bg-supplementary-default);
 }
 
 .vd-select-inline-text {

package/src/vend.ui/components/vd-select/vd-select-ns.scss

@@ -13,5 +13,5 @@ $vd-select-input-group-with-error-zindex: $vd-select-input-group-focused-zindex
   background-repeat: no-repeat;
   background-size: 8px 20px;
   background-position: calc(100% - 14px) 10px;
-  background-image: vd-colour(select-arrows-bg);
+  background-image: hs-color(select-arrows-bg);
 }

package/src/vend.ui/components/vd-select/vd-select.scss

@@ -9,9 +9,9 @@
   // can just be added to the input.
   &.vd-error {
     .vd-select {
-      border-color: vd-colour(no);
+      border-color: hs-color(fg-no-default);
       &:focus {
-        box-shadow: 0 0 $vd-shadow-blur vd-colour(no);
+        box-shadow: 0 0 $vd-shadow-blur hs-color(fg-no-default);
       }
     }
   }

package/src/vend.ui/components/vd-splash/vd-splash.scss

@@ -19,7 +19,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: vd-colour(box);
+  background: hs-color(bg-neutral-top);
   overflow: auto;
   @include vd-fade-in;
 

package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss

@@ -1,6 +1,6 @@
 .vd-status-icon {
   border-radius: 50%;
-  background-color: vd-colour(do);
+  background-color: hs-color(bg-go-default);
   width: $vd-status-icon-size;
   height: $vd-status-icon-size;
   display: inline-block;
@@ -8,5 +8,5 @@
 }
 
 .vd-status-icon--negative {
-  background-color: vd-colour(no);
+  background-color: hs-color(bg-no-default);
 }

package/src/vend.ui/components/vd-suggestion/vd-suggestion-list.scss

@@ -38,7 +38,7 @@
   right: 0;
   height: $vd-suggestion-list-footer-height;
   box-sizing: border-box;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border-top: 1px solid hs-color(border-neutral-soft);
 }
 
@@ -70,7 +70,7 @@
   margin-right: -$vd-popover-list-item-spacing !important;
 
   &.vd-suggestion-clear--active {
-    color: vd-colour(text-action);
-    background-color: vd-colour(supplementary-lighter);
+    color: hs-color(fg-neutral-ondark-default);
+    background-color: hs-color(bg-supplementary-soft);
   }
 }

package/src/vend.ui/components/vd-switch/vd-switch.scss

@@ -21,8 +21,8 @@
   height: $trackHeightBig;
   border-radius: vd-grid-unit(9);
   box-sizing: border-box;
-  border: 2px solid vd-colour(do);
-  background-color: vd-colour(box);
+  border: 2px solid hs-color(fg-go-default);
+  background-color: hs-color(bg-neutral-top);
   transition: background-color $vd-time-m ease-in-out;
 
   .vd-switch--small & {
@@ -35,7 +35,7 @@
   box-sizing: border-box;
   display: inline-block;
   position: absolute;
-  color: vd-colour(text-action);
+  color: hs-color(fg-neutral-ondark-default);
   top: 8px;
   left: 10px;
   opacity: 0;
@@ -54,7 +54,7 @@
   position: absolute;
   top: 8px;
   left: 41px;
-  color: vd-colour(do);
+  color: hs-color(fg-go-default);
   opacity: 1;
   transition: opacity 0.54s ease-in-out;
 
@@ -69,8 +69,8 @@
   float: left;
   border-radius: inherit;
   box-sizing: border-box;
-  border: 2px solid vd-colour(do);
-  background-color: vd-colour(box);
+  border: 2px solid hs-color(fg-go-default);
+  background-color: hs-color(bg-neutral-top);
   pointer-events: none;
   width: $knobWidthBig;
   height: $knobWidthBig;
@@ -86,7 +86,7 @@
 
 // Checked
 .vd-switch-input:checked + .vd-switch-track {
-  background-color: vd-colour(do);
+  background-color: hs-color(bg-go-default);
 
   .vd-switch-icon {
     opacity: 1;
@@ -107,7 +107,7 @@
 
 // Focus
 .vd-switch-input:focus + .vd-switch-track {
-  box-shadow: 0 0 5px 2px vd-colour(go);
+  box-shadow: 0 0 5px 2px hs-color(fg-go-default);
 }
 
 // Disabled

package/src/vend.ui/components/vd-table/vd-table-ns.scss

@@ -1,5 +1,5 @@
-$vd-colour-table-tr-hover-background: vd-colour(go-highlight);
-$vd-colour-table-expanded-border-left: vd-colour(do);
+$vd-colour-table-tr-hover-background: hs-color(bg-go-highlight-default);
+$vd-colour-table-expanded-border-left: hs-color(fg-go-default);
 
 // Compact tables are deprecated, since subtext size has changed globally
 // we now have a local variable for compact tables until its replaced with normal tables

package/src/vend.ui/components/vd-table/vd-table.scss

@@ -16,7 +16,7 @@ table {
     }
 
     tr {
-      border-color: vd-colour(keyline);
+      border-color: hs-color(border-neutral-strong);
     }
   }
 
@@ -107,7 +107,7 @@ table {
 
       & + tr:not(.vd-expandable),
       &.vd-expandable--expanded {
-        background: vd-colour(box);
+        background: hs-color(bg-neutral-top);
 
         > td:first-child {
           &::before {
@@ -197,7 +197,7 @@ table {
   &.vd-table--data {
     border: 1px solid hs-color(border-neutral-soft);
     tr {
-      background-color: vd-colour(box);
+      background-color: hs-color(bg-neutral-top);
     }
   }
 }
@@ -246,7 +246,7 @@ table {
   > thead {
     th {
       padding: vd-grid-unit(4) vd-grid-unit(4);
-      background-color: vd-colour(box);
+      background-color: hs-color(bg-neutral-top);
     }
 
     tr {
@@ -260,11 +260,11 @@ table {
     border-bottom: none;
 
     &:nth-child(odd) {
-      background-color: vd-colour(background);
+      background-color: hs-color(bg-neutral-backdrop);
     }
 
     &:nth-child(even) {
-      background-color: vd-colour(box);
+      background-color: hs-color(bg-neutral-top);
     }
 
     > td {
@@ -286,11 +286,11 @@ table {
 
     > tbody > tr {
       &:nth-child(odd) {
-        background-color: vd-colour(background);
+        background-color: hs-color(bg-neutral-backdrop);
       }
 
       &:nth-child(even) {
-        background-color: vd-colour(box);
+        background-color: hs-color(bg-neutral-top);
       }
     }
 

package/src/vend.ui/components/vd-tabs/vd-tabs.scss

@@ -1,8 +1,8 @@
 @use 'sass:math';
 
 @mixin vd-active-tab {
-  border-bottom-color: vd-colour(do);
-  color: vd-colour(do);
+  border-bottom-color: hs-color(fg-go-default);
+  color: hs-color(fg-go-default);
 }
 
 .vd-tabs-container {
@@ -30,7 +30,7 @@
   gap: math.div($vd-tab-spacing, 2) $vd-tab-spacing;
   padding: 0;
   margin: 0;
-  box-shadow: inset 0 -1px vd-colour(keyline);
+  box-shadow: inset 0 -1px hs-color(border-neutral-strong);
 }
 
 .vd-tabs-container--overflow {
@@ -51,7 +51,7 @@
 
 .vd-tab {
   display: inline-block;
-  color: var(--vd-colour--text);
+  color: hs-color(fg-neutral-default);
 
   &.vd-tab--active .vd-tab-button {
     @include vd-active-tab();

package/src/vend.ui/components/vd-text/vd-text.scss

@@ -1,14 +1,14 @@
 .vd-text--secondary {
-  color: vd-colour(supplementary--text);
+  color: hs-color(fg-supplementary-default);
 }
 .vd-text--success {
-  color: vd-colour(do);
+  color: hs-color(fg-go-default);
 }
 .vd-text--negative {
-  color: vd-colour(no);
+  color: hs-color(fg-no-default);
 }
 .vd-text--disabled {
-  color: vd-colour(text);
+  color: hs-color(fg-neutral-default);
   opacity: 0.35;
 }
 

package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss

@@ -35,7 +35,7 @@
 
   border-radius: $vd-border-radius;
   box-sizing: border-box;
-  color: vd-colour(text-action);
+  color: hs-color(fg-neutral-ondark-default);
   text-align: center;
   font-weight: $vd-font-weight--bold;
 
@@ -59,9 +59,9 @@
 }
 
 .vd-toast-notification--success {
-  background-color: vd-colour(success);
+  background-color: hs-color(bg-success-default);
 }
 
 .vd-toast-notification--negative {
-  background-color: vd-colour(no);
+  background-color: hs-color(bg-no-default);
 }

package/src/vend.ui/components/vd-tooltip/vd-tooltip.scss

@@ -1,15 +1,15 @@
 .vd-popover--tooltip {
-  border-color: vd-colour(framing-inverse);
-  background-color: vd-colour(box-inverse);
-  color: vd-colour(text-inverse);
+  border-color: hs-color(border-neutral-inverted-soft);
+  background-color: hs-color(bg-neutral-inverted-top);
+  color: hs-color(fg-neutral-inverted-default);
 
   .vd-popover-content {
-    background-color: vd-colour(box-inverse);
+    background-color: hs-color(bg-neutral-inverted-top);
     padding: $vd-tooltip-spacing;
   }
 
   .vd-popover-beak {
-    background-color: vd-colour(box-inverse);
-    border-color: vd-colour(framing-inverse);
+    background-color: hs-color(bg-neutral-inverted-top);
+    border-color: hs-color(border-neutral-inverted-soft);
   }
 }

package/src/vend.ui/styles/global/_base-mixins.scss

@@ -7,5 +7,5 @@
   font-family: $vd-font-lato;
   font-size: vd-text-size(body);
   line-height: normal;
-  color: vd-colour(text);
+  color: hs-color(fg-neutral-default);
 }

package/src/vend.ui/styles/global/_helper-mixins.scss

@@ -19,7 +19,7 @@
     right: 1em;
     content: '';
     bottom: 0;
-    box-shadow: 0 0.1em 4em 0 vd-colour(shadow);
+    box-shadow: 0 0.1em 4em 0 hs-color(overlay-dark-default);
   }
 }
 

package/src/vend.ui/styles/global/_misc.scss

@@ -1,13 +1,13 @@
 // Borders
 $vd-border-radius: 4px;
-$vd-border-colour: vd-colour(framing);
+$vd-border-colour: hs-color(border-neutral-soft);
 $vd-border-types: (keyline, keyline-inverse, framing, framing-inverse);
 
 // Opacity and Shadows
 $vd-opacity: 0.35;
 $vd-shadow-blur: 3px !default;
 $vd-shadow-spread: 2px !default;
-$vd-box-shadow: 0 4px 10px vd-colour(shadow);
+$vd-box-shadow: 0 4px 10px hs-color(overlay-dark-default);
 
 // Shared navi non-styles
 $vd-topbar-height: 50px;

package/src/vend.ui/styles/global/_normalise.scss

@@ -3,7 +3,7 @@ body {
 
   padding: 0;
   margin: 0;
-  background-color: vd-colour(background);
+  background-color: hs-color(bg-neutral-backdrop);
 }
 
 a:link {