@lightspeed/design-system-css 28.0.0 → 29.0.1

package/src/vend.ui/components/vd-btn/vd-btn-panel.scss

@@ -4,11 +4,11 @@
   @include vd-text(label);
 
   align-items: center;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border-radius: $vd-border-radius;
   border: 2px solid hs-color(border-neutral-soft);
   box-sizing: border-box;
-  color: vd-colour(text);
+  color: hs-color(fg-neutral-default);
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -29,33 +29,33 @@
   @include vd-btn-disabled();
 
   &:focus {
-    border-color: vd-colour(go);
+    border-color: hs-color(fg-go-default);
     @include vd-btn-shadow(go);
   }
 
   &:hover {
-    border-color: vd-colour(go-lighter);
+    border-color: hs-color(bg-go-soft);
     @include vd-btn-shadow(go);
   }
 
   &:active {
-    background-color: vd-rgba(vd-colour(box-rgb), 0.2);
+    background-color: vd-rgba(hs-color(bg-neutral-top), 0.2);
   }
 }
 
 // =================================== Selected Modifier =================================== //
 
 .vd-btn-panel--selected {
-  border-color: vd-colour(do);
+  border-color: hs-color(fg-go-default);
 
   &:focus,
   &:hover {
-    border-color: vd-colour(do-lighter);
+    border-color: hs-color(bg-go-soft);
     @include vd-btn-shadow(do);
   }
 
   &:active {
-    border-color: vd-colour(do-darker);
+    border-color: hs-color(bg-go-strong);
   }
 }
 

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

@@ -61,7 +61,7 @@ a.vd-btn {
 
   &:hover,
   &:focus {
-    color: vd-colour(go);
+    color: hs-color(fg-go-default);
   }
 }
 

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

@@ -3,6 +3,6 @@ $vd-card-framing: 2px;
 
 @mixin vd-card() {
   border: $vd-card-framing solid hs-color(border-neutral-soft);
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border-radius: $vd-card-border-radius;
 }

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

@@ -84,7 +84,7 @@ vd-carousel-frame {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   height: 72px;
 }
 
@@ -112,10 +112,10 @@ vd-carousel-frame {
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    background-color: vd-colour(keyline);
+    background-color: hs-color(border-neutral-strong);
   }
 }
 
 .vd-carousel-paginator-indicator--active::before {
-  background-color: vd-colour(do);
+  background-color: hs-color(bg-go-default);
 }

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

@@ -81,7 +81,7 @@
   position: relative;
   height: $vd-checkbox-length;
   width: $vd-checkbox-length;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border: 1px solid hs-color(border-neutral-soft);
   border-radius: $vd-border-radius;
   box-sizing: border-box;
@@ -93,7 +93,7 @@
     position: absolute;
     border-right: $vd-checkbox-tick-thickness solid hs-color(border-neutral-soft);
     border-top: $vd-checkbox-tick-thickness solid hs-color(border-neutral-soft);
-    border-color: vd-colour(framing);
+    border-color: hs-color(border-neutral-soft);
     transform: scaleX(-1) rotate(180deg + -45deg);
     transform-origin: left top;
     height: $vd-checkbox-tick-height;
@@ -116,13 +116,13 @@
 // Checked
 .vd-checkbox-input:checked + .vd-checkbox-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-checkbox-checked $vd-time-l;
-    border-color: vd-colour(text-action);
+    border-color: hs-color(fg-neutral-ondark-default);
     box-sizing: content-box;
     backface-visibility: hidden;
   }
@@ -150,11 +150,11 @@
 
 // Mixed state
 .vd-checkbox--mixed .vd-checkbox-tick {
-  border: 2px solid vd-colour(do);
+  border: 2px solid hs-color(fg-go-default);
 }
 
 .vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
-  background-color: vd-colour(do);
+  background-color: hs-color(bg-go-default);
   border: none;
   top: 9px;
   left: 6px;

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

@@ -1,8 +1,8 @@
 // Date picker general
 $vd-datepicker-font-size: 15px;
-$vd-datepicker-button-colour: vd-colour(do);
+$vd-datepicker-button-colour: hs-color(bg-go-default);
 $vd-datepicker-padding: 24px;
-$vd-datepicker-background: vd-colour(box);
+$vd-datepicker-background: hs-color(bg-neutral-top);
 $vd-datepicker-border: 1px solid hs-color(border-neutral-soft);
 
 // Date picker no end date
@@ -10,7 +10,7 @@ $vd-datepicker-range-no-end-height: 32px;
 
 // Table
 $vd-datepicker-table-spacing: 10px;
-$vd-datepicker-range-colour: vd-colour(do-highlight);
+$vd-datepicker-range-colour: hs-color(bg-go-highlight-default);
 
 // Button
 $vd-datepicker-button-radius: 50%;
@@ -19,8 +19,8 @@ $vd-datepicker-button-size: 30px;
 // Button next / prev
 $vd-datepicker-next-prev-button-width: 26px;
 $vd-datepicker-next-prev-button-icon-size: 7px;
-$vd-datepicker-next-prev-arrow-border-enabled: 3px solid vd-colour(text);
-$vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
+$vd-datepicker-next-prev-arrow-border-enabled: 3px solid hs-color(fg-neutral-default);
+$vd-datepicker-next-prev-arrow-border-disabled: 3px solid hs-color(border-neutral-soft);
 
 // Select
 $vd-datepicker-select-horizontal-positioning: 29px;
@@ -31,7 +31,7 @@ $vd-datepicker-select-icon-position-top: 10px;
 $vd-datepicker-select-icon-position-right-even: 37px;
 $vd-datepicker-select-icon-position-right-odd: 110px;
 $vd-datepicker-select-icon-border-width: 4px;
-$vd-datepicker-select-arrow-border: 5px solid vd-colour(text);
+$vd-datepicker-select-arrow-border: 5px solid hs-color(fg-neutral-default);
 
 // inputs
 $vd-datepicker-data-inputs-width: 245px;

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

@@ -143,7 +143,7 @@
 
     abbr {
       font-weight: $vd-font-weight--bold;
-      color: vd-colour(text);
+      color: hs-color(fg-neutral-default);
     }
   }
 
@@ -290,29 +290,29 @@
     border: none;
     border-radius: $vd-datepicker-button-radius;
     padding: 3px;
-    color: vd-colour(text);
+    color: hs-color(fg-neutral-default);
 
     &:hover {
-      background: vd-rgba(vd-colour(do-rgb), $vd-opacity);
+      background: vd-rgba(hs-color(bg-go-default), $vd-opacity);
     }
   }
 
   .is-today .pika-button {
-    color: vd-colour(do);
+    color: hs-color(fg-go-default);
     font-weight: $vd-font-weight--bold;
   }
 
   .is-startrange,
   .is-endrange {
     .pika-button {
-      border: 2px solid vd-colour(do);
+      border: 2px solid hs-color(fg-go-default);
       background: $vd-datepicker-range-colour;
     }
   }
 
   .is-selected .pika-button {
-    background: vd-colour(do);
-    color: vd-colour(text-action);
+    background: hs-color(bg-go-default);
+    color: hs-color(fg-neutral-ondark-default);
     font-weight: $vd-font-weight--bold;
     border: none;
   }
@@ -331,7 +331,7 @@
     .is-endrange {
       .pika-button {
         background: $vd-datepicker-range-colour;
-        color: vd-colour(text);
+        color: hs-color(fg-neutral-default);
         font-weight: normal;
       }
     }

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

@@ -5,7 +5,7 @@ $vd-dialog-header-divider-width: 40px;
 
 // Dialog Container
 $vd-dialog-container-min-height: 170px;
-$vd-dialog-container-focus-colour: vd-colour(go);
+$vd-dialog-container-focus-colour: hs-color(fg-go-default);
 $vd-dialog-container-top-offset: vd-grid-unit(15);
 $vd-dialog-container-sizes: (
   (small 480px) (medium 600px) (standard 720px) (large 800px) (xlarge 1100px)

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

@@ -68,7 +68,7 @@
   margin: 0 auto;
   padding: var(--vd-dialog-spacing);
 
-  background: vd-colour(box);
+  background: hs-color(bg-neutral-top);
   border-radius: $vd-border-radius;
   display: flex;
   flex-direction: column;
@@ -147,7 +147,7 @@
   width: $vd-dialog-header-divider-width;
   margin: ($vd-dialog-header-margin * 2) auto 0;
   border: none;
-  border-top: 1px solid vd-colour(keyline);
+  border-top: 1px solid hs-color(border-neutral-strong);
 }
 
 // *****  Dialog Content  ***** //

package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss

@@ -2,7 +2,7 @@
 $vd-dialog-close-width: 50px;
 $vd-dialog-close-border-radius: 50%;
 $vd-dialog-close-font-size: 20px;
-$vd-dialog-close-focus-border-colour: vd-colour(go);
+$vd-dialog-close-focus-border-colour: hs-color(fg-go-default);
 $vd-dialog-close-text-font-size: 12px;
 $vd-dialog-close-text-padding: 5px;
 $vd-dialog-close-button-anchor-padding: 10px;

package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss

@@ -20,9 +20,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: vd-colour(box);
+    background: hs-color(bg-neutral-top);
     border-radius: $vd-dialog-close-border-radius;
-    color: vd-colour(supplementary--text);
+    color: hs-color(fg-supplementary-default);
     padding: $vd-dialog-close-button-anchor-padding;
     text-decoration: none;
     border: 0;
@@ -51,8 +51,8 @@
     right: vd-spacer(4);
 
     .vd-dialog-close-button {
-      background-color: vd-colour(supplementary);
-      color: vd-colour(box);
+      background-color: hs-color(bg-supplementary-default);
+      color: hs-color(bg-neutral-top);
     }
 
     .vd-dialog-close-icon {
@@ -90,7 +90,7 @@
   font-size: $vd-dialog-close-text-font-size;
 
   .vd-modal--size-full-screen & {
-    color: vd-colour(supplementary);
+    color: hs-color(bg-supplementary-default);
     font-weight: bold;
   }
 
@@ -102,8 +102,8 @@
 // Dialog Close Button 'Inverse' Modifier
 .vd-dialog-close--inverse {
   .vd-dialog-close-button {
-    background: vd-colour(supplementary);
-    color: vd-colour(text-action);
+    background: hs-color(bg-supplementary-default);
+    color: hs-color(fg-neutral-ondark-default);
   }
 
   .vd-dialog-close-icon {
@@ -111,7 +111,7 @@
   }
 
   .vd-dialog-close-label {
-    color: vd-colour(text);
+    color: hs-color(fg-neutral-default);
     opacity: 0.5;
   }
 }

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

@@ -23,23 +23,23 @@ vd-dott,
 }
 
 .vd-dott-gradient-start {
-  stop-color: vd-colour(go);
+  stop-color: hs-color(fg-go-default);
 }
 
 .vd-dott-gradient-stop {
-  stop-color: vd-colour(success);
+  stop-color: hs-color(fg-success-default);
 }
 
 .vd-dott-border:not(.vd-input--error):not(.vd-error) {
   // Overide existing borders before applying patchy border styles ourselves
   border: initial;
-  border-top: $vd-dot-border-width solid vd-colour(go);
-  border-bottom: $vd-dot-border-width solid vd-colour(success);
+  border-top: $vd-dot-border-width solid hs-color(fg-go-default);
+  border-bottom: $vd-dot-border-width solid hs-color(fg-success-default);
   // Second bg-image value, in conjunction with the background-position, ensures the right side border displays correctly
-  background-image: linear-gradient(vd-colour(go), vd-colour(success)),
-    linear-gradient(vd-colour(go), vd-colour(success));
+  background-image: linear-gradient(hs-color(fg-go-default), hs-color(fg-success-default)),
+    linear-gradient(hs-color(fg-go-default), hs-color(fg-success-default));
   background-size: $vd-dot-border-width 100%;
   background-position: 0 0, 100% 0;
   background-repeat: no-repeat;
-  box-shadow: 0 0 4px 0 vd-colour(go);
+  box-shadow: 0 0 4px 0 hs-color(fg-go-default);
 }

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

@@ -14,6 +14,6 @@
   margin: 0 0 vd-grid-unit(4);
   font-size: 16px;
   font-weight: $vd-font-weight--bold;
-  border-bottom: 1px solid vd-colour(keyline);
+  border-bottom: 1px solid hs-color(border-neutral-strong);
   width: 100%;
 }

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

@@ -2,7 +2,7 @@
   @include vd-text(mini-signpost);
 
   padding: vd-grid-unit(1) vd-grid-unit(2);
-  background-color: vd-colour(framing);
+  background-color: hs-color(border-neutral-soft);
   border-radius: $vd-border-radius;
   display: inline-block;
   vertical-align: text-top;
@@ -11,7 +11,7 @@
   &,
   &:link,
   &:visited {
-    color: vd-colour(supplementary--text) !important;
+    color: hs-color(fg-supplementary-default) !important;
   }
 }
 
@@ -31,12 +31,12 @@
 
 .vd-flag--negative,
 .vd-flag--warning {
-  background-color: vd-colour(no);
+  background-color: hs-color(bg-no-default);
 
   &,
   &:link,
   &:visited {
-    color: vd-colour(text-action) !important;
+    color: hs-color(fg-neutral-ondark-default) !important;
   }
 
   .vd-flag-chevron {

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

@@ -1,7 +1,7 @@
 .vd-header {
   display: block;
   font-weight: vd-text-weight(heading);
-  color: vd-colour(text);
+  color: hs-color(fg-neutral-default);
   margin: 0;
 }
 

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

@@ -18,7 +18,7 @@
   text-align: center;
   padding: $vd-hero-paddding-vertical $vd-hero-padding-horizontal;
   box-sizing: border-box;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
 
   .vd-hero-container & {
     @include vd-viewport-media-max(medium) {
@@ -65,10 +65,10 @@
   padding: vd-grid-unit(5);
   box-sizing: border-box;
 
-  background-color: vd-colour(box-inverse);
+  background-color: hs-color(bg-neutral-inverted-top);
 
   font-family: $vd-font-lato;
-  color: vd-colour(text-inverse);
+  color: hs-color(fg-neutral-inverted-default);
   text-align: center;
   font-size: vd-text-size(body);
 
@@ -109,6 +109,6 @@
 }
 
 .vd-hero-aux-footer {
-  color: vd-colour(keyline);
+  color: hs-color(border-neutral-strong);
   margin-top: $vd-hero-aux-content-margin;
 }

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

@@ -2,7 +2,7 @@
   margin: vd-grid-unit(5) auto;
   width: 100%;
   max-width: $vd-section-wrap-max-width;
-  border-top: 1px solid vd-colour(keyline);
+  border-top: 1px solid hs-color(border-neutral-strong);
   border-left: none;
   border-right: none;
   border-bottom: none;

package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss

@@ -3,7 +3,7 @@
 }
 
 .vd-in-page-help-section {
-  border-bottom: 1px solid vd-colour(framing);
+  border-bottom: 1px solid hs-color(border-neutral-soft);
 }
 
 .vd-in-page-help-container {

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

@@ -20,14 +20,14 @@ $vd-textarea-line-height: vd-px-unit(
 );
 
 @mixin vd-input-text() {
-  color: vd-colour(text);
+  color: hs-color(fg-neutral-default);
   font-family: $vd-font-primary;
   font-weight: $vd-font-weight--regular;
   font-size: vd-text-size(body);
   word-break: normal;
 
   &::placeholder {
-    color: vd-colour(supplementary);
+    color: hs-color(bg-supplementary-default);
     opacity: 1;
   }
 
@@ -56,7 +56,7 @@ $vd-textarea-line-height: vd-px-unit(
 
 @mixin vd-input-states() {
   box-shadow: none;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border: $vd-input-border-width solid hs-color(border-neutral-soft);
   border-radius: $vd-border-radius;
 
@@ -70,8 +70,8 @@ $vd-textarea-line-height: vd-px-unit(
 @mixin vd-input-focus() {
   &:focus,
   &.vd-focus {
-    border-color: vd-colour(go);
-    box-shadow: 0 0 $vd-shadow-blur vd-colour(go);
+    border-color: hs-color(fg-go-default);
+    box-shadow: 0 0 $vd-shadow-blur hs-color(fg-go-default);
   }
 }
 
@@ -92,11 +92,11 @@ $vd-textarea-line-height: vd-px-unit(
 }
 
 @mixin vd-input-error-styles() {
-  border-color: vd-colour(no);
+  border-color: hs-color(fg-no-default);
 
   &:focus,
   &.vd-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-input/vd-input.scss

@@ -5,7 +5,7 @@
 .vd-input-error-message-section {
   display: block;
   margin-top: $vd-input-message-margin;
-  color: vd-colour(no);
+  color: hs-color(fg-no-default);
   font-size: vd-text-size(supplementary);
 
   .vd-input-error-message-text {
@@ -23,7 +23,7 @@
 .vd-input-icon {
   position: absolute;
   top: 14px;
-  color: vd-colour(supplementary--text);
+  color: hs-color(fg-supplementary-default);
   pointer-events: none;
 }
 

package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss

@@ -3,6 +3,6 @@
   font-size: vd-text-size(supplementary);
 
   &:not(.vd-text--negative) {
-    color: vd-colour(supplementary--text);
+    color: hs-color(fg-supplementary-default);
   }
 }

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

@@ -1,11 +1,11 @@
 .vd-link {
-  color: vd-colour(go);
+  color: hs-color(fg-go-default);
   text-decoration: none;
   cursor: pointer;
   transition: color $vd-time-s;
 
   &:visited {
-    color: vd-colour(go);
+    color: hs-color(fg-go-default);
   }
 
   @include vd-hover-when-supported {
@@ -25,7 +25,7 @@
 
   @include vd-hover-when-supported {
     &:hover {
-      color: vd-colour(go) !important;
+      color: hs-color(fg-go-default) !important;
     } // required important to override a tag styles set in vd-table
   }
 }

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

@@ -10,7 +10,7 @@ $vd-i-bg-margin: vd-grid-unit(2);
   width: $vd-loader-m;
   height: $vd-loader-m;
   border-radius: 50%;
-  border: $vd-loader-border solid vd-colour(do);
+  border: $vd-loader-border solid hs-color(fg-go-default);
   border-left-color: transparent;
   @include vd-slow-rotate;
 

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

@@ -2,8 +2,8 @@
   @include vd-text(body);
 
   padding: 6px 10px;
-  color: vd-colour(supplementary--text);
-  background-color: vd-colour(framing);
+  color: hs-color(fg-supplementary-default);
+  background-color: hs-color(border-neutral-soft);
   border-radius: $vd-border-radius;
   display: inline-block;
   margin-right: vd-grid-unit(1);
@@ -24,9 +24,9 @@
 }
 
 .vd-lozenge--interactive {
-  color: vd-colour(text-action);
+  color: hs-color(fg-neutral-ondark-default);
 
-  background-color: vd-colour(supplementary);
+  background-color: hs-color(bg-supplementary-default);
 }
 
 .vd-lozenge--disabled {
@@ -35,6 +35,6 @@
 }
 
 .vd-lozenge--marked {
-  background-color: vd-colour(no);
-  color: vd-colour(text-action);
+  background-color: hs-color(bg-no-default);
+  color: hs-color(fg-neutral-ondark-default);
 }

package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss

@@ -32,8 +32,8 @@
   @include vd-input-states();
 
   &:focus-within {
-    border-color: vd-colour(go);
-    box-shadow: 0 0 $vd-shadow-blur vd-colour(go);
+    border-color: hs-color(fg-go-default);
+    box-shadow: 0 0 $vd-shadow-blur hs-color(fg-go-default);
   }
 
   .vd-lozenge {

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

@@ -9,7 +9,7 @@ $vd-multiselect-popover-input-icon-padding: vd-grid-unit(6);
 
   .vd-input-icon {
     padding-right: $vd-multiselect-popover-input-icon-padding;
-    color: vd-colour(text);
+    color: hs-color(fg-neutral-default);
   }
 
   @include vd-input-error-selectors() {

package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss

@@ -1,11 +1,11 @@
 .vd-next-stepper {
   display: block;
   padding: vd-grid-unit(6);
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   border: 1px solid hs-color(border-neutral-soft);
 
   &.vd-next-stepper--on-box {
-    background-color: vd-colour(background);
+    background-color: hs-color(bg-neutral-backdrop);
     border-color: transparent;
   }
 }

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

@@ -1 +1 @@
-$vd-colour-overlay: vd-colour(overlay);
+$vd-colour-overlay: hs-color(overlay-dark-default);

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

@@ -1,9 +1,9 @@
 .vd-panel {
   display: block;
-  background-color: vd-colour(box);
+  background-color: hs-color(bg-neutral-top);
   margin: 0 #{-$vd-section--panel-margin-h};
 }
 
 .vd-panel--dark {
-  background-color: vd-colour(background);
+  background-color: hs-color(bg-neutral-backdrop);
 }