@lightspeed/design-system-css 27.0.0 → 27.2.0

package/dist/index.css

@@ -1210,7 +1210,7 @@ details,
   outline: none;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -1347,7 +1347,7 @@ details,
   outline: none;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -1509,12 +1509,12 @@ details,
 .vd-autocomplete-filter-input-container .vd-select {
   padding-left: 34px;
   border-radius: 4px 0 0 4px;
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--hs-color-border-neutral-soft);
   transition: none;
 }
 .vd-autocomplete-filter-input-container .vd-lozenge-group {
   border-radius: 0 4px 4px 0;
-  border-left: 1px solid var(--vd-colour--framing);
+  border-left: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-autocomplete-filter-input-container vd-autocomplete-multi {
   width: 100%;
@@ -1533,11 +1533,11 @@ details,
 .vd-autocomplete-select-placeholder {
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px 0 0 4px;
   padding: 11px;
   padding-left: 34px;
@@ -2225,7 +2225,7 @@ a.vd-btn.disabled {
   align-items: center;
   background-color: var(--vd-colour--box);
   border-radius: 4px;
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   box-sizing: border-box;
   color: var(--vd-colour--text);
   cursor: pointer;
@@ -2298,7 +2298,7 @@ a.vd-btn.disabled {
 }
 
 .vd-card {
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   background-color: var(--vd-colour--box);
   border-radius: 5px;
 }
@@ -2516,7 +2516,7 @@ vd-carousel-frame {
   height: 24px;
   width: 24px;
   background-color: var(--vd-colour--box);
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -2525,8 +2525,8 @@ vd-carousel-frame {
   box-sizing: content-box;
   display: block;
   position: absolute;
-  border-right: 4px solid var(--vd-colour--framing);
-  border-top: 4px solid var(--vd-colour--framing);
+  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);
   transform: scaleX(-1) rotate(135deg);
   transform-origin: left top;
@@ -2667,12 +2667,12 @@ vd-carousel-frame {
   padding: 24px;
 }
 .vd-datepicker-group-item:first-child {
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--hs-color-border-neutral-soft);
 }
 @media only screen and (max-width: 768px) {
   .vd-datepicker-group-item:first-child {
     border-right: none;
-    border-bottom: 1px solid var(--vd-colour--framing);
+    border-bottom: 1px solid var(--hs-color-border-neutral-soft);
   }
 }
 .vd-datepicker-group-item .vd-datepicker-ui {
@@ -2841,7 +2841,7 @@ vd-carousel-frame {
   outline: none;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -3978,7 +3978,7 @@ vd-dott,
   cursor: text;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -4414,7 +4414,7 @@ vd-dott,
 }
 .vd-popover-list-group-header::after {
   content: "";
-  border-bottom: 2px solid var(--vd-colour--framing);
+  border-bottom: 2px solid var(--hs-color-border-neutral-soft);
   display: block;
   position: absolute;
   bottom: 0;
@@ -4448,7 +4448,7 @@ vd-dott,
 }
 .vd-popover-list-group-divider::after {
   content: "";
-  border-bottom: 2px solid var(--vd-colour--framing);
+  border-bottom: 2px solid var(--hs-color-border-neutral-soft);
   display: block;
   position: absolute;
   right: 24px;
@@ -4522,7 +4522,7 @@ vd-dott,
 
 .vd-popover-list-footer--full {
   background-color: var(--vd-colour--box);
-  border-top: 1px solid var(--vd-colour--framing);
+  border-top: 1px solid var(--hs-color-border-neutral-soft);
   display: flex;
   flex-direction: column;
   min-height: 60px;
@@ -4725,7 +4725,7 @@ vd-dott,
   width: 24px;
   border-radius: 50%;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   box-sizing: border-box;
 }
 .vd-radio-tick:after {
@@ -4907,7 +4907,7 @@ vd-section .vd-section,
 }
 
 .vd-section--panel {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
   margin: 0 24px;
 }
 .vd-section--panel:last-child {
@@ -5010,12 +5010,12 @@ vd-section .vd-section,
   font-weight: normal;
 }
 .vd-segcontrol:first-of-type .vd-segcontrol-button {
-  border-left: 2px solid var(--vd-colour--framing);
+  border-left: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px 0 0 4px;
 }
 .vd-segcontrol:last-of-type .vd-segcontrol-button {
   border-radius: 0 4px 4px 0;
-  border-right: 2px solid var(--vd-colour--framing);
+  border-right: 2px solid var(--hs-color-border-neutral-soft);
 }
 
 .vd-segcontrol--stretched {
@@ -5044,7 +5044,7 @@ vd-section .vd-section,
   align-items: center;
   background-color: var(--vd-colour--box);
   padding: 12px 20px;
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   color: var(--vd-colour--text);
   width: 100%;
   transition-duration: 0.2s;
@@ -5170,7 +5170,7 @@ vd-section .vd-section,
   height: 60px;
   box-sizing: border-box;
   background-color: var(--vd-colour--box);
-  border-top: 1px solid var(--vd-colour--framing);
+  border-top: 1px solid var(--hs-color-border-neutral-soft);
 }
 
 .vd-suggestion-query-container {
@@ -5444,7 +5444,7 @@ table {
   border-color: var(--vd-colour--keyline);
 }
 .vd-table tr {
-  border-bottom: 1px solid var(--vd-colour--framing);
+  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table tr .vd-clickable {
   display: block;
@@ -5471,10 +5471,10 @@ table {
   border-right: none;
 }
 .vd-table tr.vd-border-t {
-  border-top: 1px solid var(--vd-colour--framing);
+  border-top: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table tr.vd-border-b {
-  border-bottom: 1px solid var(--vd-colour--framing);
+  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table tr.vd-med-pad-t td, .vd-table tr.vd-med-pad-v td {
   padding-top: 8px;
@@ -5588,7 +5588,7 @@ table {
   vertical-align: bottom;
 }
 .vd-table.vd-table--data {
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table.vd-table--data tr {
   background-color: var(--vd-colour--box);
@@ -5619,14 +5619,14 @@ table {
 }
 
 .vd-table--report {
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table--report > thead th {
   padding: 16px 16px;
   background-color: var(--vd-colour--box);
 }
 .vd-table--report > thead tr {
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table--report > tbody > tr {
   border-bottom: none;
@@ -5928,7 +5928,7 @@ td.vd-show-print {
   display: block;
   padding: 24px;
   background-color: var(--vd-colour--box);
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-next-stepper.vd-next-stepper--on-box {
   background-color: var(--vd-colour--background);
@@ -5954,7 +5954,7 @@ td.vd-show-print {
 .vd-next-stepper-details {
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--vd-colour--keyline);
+  border-top: 1px solid var(--hs-color-border-neutral-strong);
   margin-top: 8px;
   padding-top: 8px;
 }
@@ -6021,7 +6021,7 @@ td.vd-show-print {
   margin-top: 16px;
 }
 .vd-id-badge.vd-id-badge--interactive-selection {
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   background-color: var(--vd-colour--box);
   border-radius: 5px;
   cursor: pointer;
@@ -6709,7 +6709,7 @@ td.vd-show-print {
 
 .vd-datatable {
   width: 100%;
-  border: 1px solid var(--vd-colour--keyline);
+  border: 1px solid var(--hs-color-border-neutral-strong);
   border-collapse: separate;
   border-spacing: 0;
   border-radius: 4px;
@@ -6742,14 +6742,14 @@ td.vd-show-print {
 }
 
 .vd-datatable-row--header {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  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);
 }
 
 .vd-datatable-row--header-sections {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  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);
@@ -6760,7 +6760,7 @@ td.vd-show-print {
 }
 
 .vd-datatable-foot.vd-sticky .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
   border-bottom-color: transparent;
 }
 .vd-datatable-foot.vd-sticky--stuck .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
@@ -6796,11 +6796,11 @@ td.vd-show-print {
   font-size: 15px;
   line-height: 1.3333333333;
   font-weight: 700;
-  border-top: 1px solid var(--vd-colour--keyline);
+  border-top: 1px solid var(--hs-color-border-neutral-strong);
 }
 
 .vd-datatable-cell--section-start {
-  border-left: 1px solid var(--vd-colour--keyline);
+  border-left: 1px solid var(--hs-color-border-neutral-strong);
 }
 
 .vd-datatable-head-cell {
@@ -6816,7 +6816,7 @@ td.vd-show-print {
   white-space: nowrap;
 }
 .vd-datatable-row--header .vd-datatable-head-cell, .vd-datatable-row--header-sections .vd-datatable-head-cell {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
 }
 .vd-datatable-row--header-sections .vd-datatable-head-cell {
   font-synthesis: none;
@@ -6832,7 +6832,7 @@ td.vd-show-print {
   font-size: 12px;
   padding: 8px;
   text-align: center;
-  border-left: 1px solid var(--vd-colour--keyline);
+  border-left: 1px solid var(--hs-color-border-neutral-strong);
 }
 .vd-datatable-row--header-sections .vd-datatable-head-cell:first-child {
   border-left: none;
@@ -6889,12 +6889,12 @@ td.vd-show-print {
   padding: 24px;
 }
 .vd-datepicker-group-item:first-child {
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--hs-color-border-neutral-soft);
 }
 @media only screen and (max-width: 768px) {
   .vd-datepicker-group-item:first-child {
     border-right: none;
-    border-bottom: 1px solid var(--vd-colour--framing);
+    border-bottom: 1px solid var(--hs-color-border-neutral-soft);
   }
 }
 .vd-datepicker-group-item .vd-datepicker-ui {
@@ -7009,7 +7009,7 @@ td.vd-show-print {
   outline: none;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -7606,7 +7606,7 @@ td.vd-show-print {
 }
 
 .vd-table-list-row {
-  border-bottom: 1px solid var(--vd-colour--framing);
+  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);

package/dist/vend-styles.css

@@ -1210,7 +1210,7 @@ details,
   outline: none;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -1347,7 +1347,7 @@ details,
   outline: none;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -1509,12 +1509,12 @@ details,
 .vd-autocomplete-filter-input-container .vd-select {
   padding-left: 34px;
   border-radius: 4px 0 0 4px;
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--hs-color-border-neutral-soft);
   transition: none;
 }
 .vd-autocomplete-filter-input-container .vd-lozenge-group {
   border-radius: 0 4px 4px 0;
-  border-left: 1px solid var(--vd-colour--framing);
+  border-left: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-autocomplete-filter-input-container vd-autocomplete-multi {
   width: 100%;
@@ -1533,11 +1533,11 @@ details,
 .vd-autocomplete-select-placeholder {
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px 0 0 4px;
   padding: 11px;
   padding-left: 34px;
@@ -2225,7 +2225,7 @@ a.vd-btn.disabled {
   align-items: center;
   background-color: var(--vd-colour--box);
   border-radius: 4px;
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   box-sizing: border-box;
   color: var(--vd-colour--text);
   cursor: pointer;
@@ -2298,7 +2298,7 @@ a.vd-btn.disabled {
 }
 
 .vd-card {
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   background-color: var(--vd-colour--box);
   border-radius: 5px;
 }
@@ -2516,7 +2516,7 @@ vd-carousel-frame {
   height: 24px;
   width: 24px;
   background-color: var(--vd-colour--box);
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   box-sizing: border-box;
 }
@@ -2525,8 +2525,8 @@ vd-carousel-frame {
   box-sizing: content-box;
   display: block;
   position: absolute;
-  border-right: 4px solid var(--vd-colour--framing);
-  border-top: 4px solid var(--vd-colour--framing);
+  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);
   transform: scaleX(-1) rotate(135deg);
   transform-origin: left top;
@@ -2667,12 +2667,12 @@ vd-carousel-frame {
   padding: 24px;
 }
 .vd-datepicker-group-item:first-child {
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--hs-color-border-neutral-soft);
 }
 @media only screen and (max-width: 768px) {
   .vd-datepicker-group-item:first-child {
     border-right: none;
-    border-bottom: 1px solid var(--vd-colour--framing);
+    border-bottom: 1px solid var(--hs-color-border-neutral-soft);
   }
 }
 .vd-datepicker-group-item .vd-datepicker-ui {
@@ -2841,7 +2841,7 @@ vd-carousel-frame {
   outline: none;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -3978,7 +3978,7 @@ vd-dott,
   cursor: text;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -4414,7 +4414,7 @@ vd-dott,
 }
 .vd-popover-list-group-header::after {
   content: "";
-  border-bottom: 2px solid var(--vd-colour--framing);
+  border-bottom: 2px solid var(--hs-color-border-neutral-soft);
   display: block;
   position: absolute;
   bottom: 0;
@@ -4448,7 +4448,7 @@ vd-dott,
 }
 .vd-popover-list-group-divider::after {
   content: "";
-  border-bottom: 2px solid var(--vd-colour--framing);
+  border-bottom: 2px solid var(--hs-color-border-neutral-soft);
   display: block;
   position: absolute;
   right: 24px;
@@ -4522,7 +4522,7 @@ vd-dott,
 
 .vd-popover-list-footer--full {
   background-color: var(--vd-colour--box);
-  border-top: 1px solid var(--vd-colour--framing);
+  border-top: 1px solid var(--hs-color-border-neutral-soft);
   display: flex;
   flex-direction: column;
   min-height: 60px;
@@ -4725,7 +4725,7 @@ vd-dott,
   width: 24px;
   border-radius: 50%;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   box-sizing: border-box;
 }
 .vd-radio-tick:after {
@@ -4907,7 +4907,7 @@ vd-section .vd-section,
 }
 
 .vd-section--panel {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
   margin: 0 24px;
 }
 .vd-section--panel:last-child {
@@ -5010,12 +5010,12 @@ vd-section .vd-section,
   font-weight: normal;
 }
 .vd-segcontrol:first-of-type .vd-segcontrol-button {
-  border-left: 2px solid var(--vd-colour--framing);
+  border-left: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px 0 0 4px;
 }
 .vd-segcontrol:last-of-type .vd-segcontrol-button {
   border-radius: 0 4px 4px 0;
-  border-right: 2px solid var(--vd-colour--framing);
+  border-right: 2px solid var(--hs-color-border-neutral-soft);
 }
 
 .vd-segcontrol--stretched {
@@ -5044,7 +5044,7 @@ vd-section .vd-section,
   align-items: center;
   background-color: var(--vd-colour--box);
   padding: 12px 20px;
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   color: var(--vd-colour--text);
   width: 100%;
   transition-duration: 0.2s;
@@ -5170,7 +5170,7 @@ vd-section .vd-section,
   height: 60px;
   box-sizing: border-box;
   background-color: var(--vd-colour--box);
-  border-top: 1px solid var(--vd-colour--framing);
+  border-top: 1px solid var(--hs-color-border-neutral-soft);
 }
 
 .vd-suggestion-query-container {
@@ -5444,7 +5444,7 @@ table {
   border-color: var(--vd-colour--keyline);
 }
 .vd-table tr {
-  border-bottom: 1px solid var(--vd-colour--framing);
+  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table tr .vd-clickable {
   display: block;
@@ -5471,10 +5471,10 @@ table {
   border-right: none;
 }
 .vd-table tr.vd-border-t {
-  border-top: 1px solid var(--vd-colour--framing);
+  border-top: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table tr.vd-border-b {
-  border-bottom: 1px solid var(--vd-colour--framing);
+  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table tr.vd-med-pad-t td, .vd-table tr.vd-med-pad-v td {
   padding-top: 8px;
@@ -5588,7 +5588,7 @@ table {
   vertical-align: bottom;
 }
 .vd-table.vd-table--data {
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table.vd-table--data tr {
   background-color: var(--vd-colour--box);
@@ -5619,14 +5619,14 @@ table {
 }
 
 .vd-table--report {
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table--report > thead th {
   padding: 16px 16px;
   background-color: var(--vd-colour--box);
 }
 .vd-table--report > thead tr {
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-table--report > tbody > tr {
   border-bottom: none;
@@ -5928,7 +5928,7 @@ td.vd-show-print {
   display: block;
   padding: 24px;
   background-color: var(--vd-colour--box);
-  border: 1px solid var(--vd-colour--framing);
+  border: 1px solid var(--hs-color-border-neutral-soft);
 }
 .vd-next-stepper.vd-next-stepper--on-box {
   background-color: var(--vd-colour--background);
@@ -5954,7 +5954,7 @@ td.vd-show-print {
 .vd-next-stepper-details {
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--vd-colour--keyline);
+  border-top: 1px solid var(--hs-color-border-neutral-strong);
   margin-top: 8px;
   padding-top: 8px;
 }
@@ -6021,7 +6021,7 @@ td.vd-show-print {
   margin-top: 16px;
 }
 .vd-id-badge.vd-id-badge--interactive-selection {
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   background-color: var(--vd-colour--box);
   border-radius: 5px;
   cursor: pointer;
@@ -6709,7 +6709,7 @@ td.vd-show-print {
 
 .vd-datatable {
   width: 100%;
-  border: 1px solid var(--vd-colour--keyline);
+  border: 1px solid var(--hs-color-border-neutral-strong);
   border-collapse: separate;
   border-spacing: 0;
   border-radius: 4px;
@@ -6742,14 +6742,14 @@ td.vd-show-print {
 }
 
 .vd-datatable-row--header {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  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);
 }
 
 .vd-datatable-row--header-sections {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  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);
@@ -6760,7 +6760,7 @@ td.vd-show-print {
 }
 
 .vd-datatable-foot.vd-sticky .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
   border-bottom-color: transparent;
 }
 .vd-datatable-foot.vd-sticky--stuck .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
@@ -6796,11 +6796,11 @@ td.vd-show-print {
   font-size: 15px;
   line-height: 1.3333333333;
   font-weight: 700;
-  border-top: 1px solid var(--vd-colour--keyline);
+  border-top: 1px solid var(--hs-color-border-neutral-strong);
 }
 
 .vd-datatable-cell--section-start {
-  border-left: 1px solid var(--vd-colour--keyline);
+  border-left: 1px solid var(--hs-color-border-neutral-strong);
 }
 
 .vd-datatable-head-cell {
@@ -6816,7 +6816,7 @@ td.vd-show-print {
   white-space: nowrap;
 }
 .vd-datatable-row--header .vd-datatable-head-cell, .vd-datatable-row--header-sections .vd-datatable-head-cell {
-  border-bottom: 1px solid var(--vd-colour--keyline);
+  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
 }
 .vd-datatable-row--header-sections .vd-datatable-head-cell {
   font-synthesis: none;
@@ -6832,7 +6832,7 @@ td.vd-show-print {
   font-size: 12px;
   padding: 8px;
   text-align: center;
-  border-left: 1px solid var(--vd-colour--keyline);
+  border-left: 1px solid var(--hs-color-border-neutral-strong);
 }
 .vd-datatable-row--header-sections .vd-datatable-head-cell:first-child {
   border-left: none;
@@ -6889,12 +6889,12 @@ td.vd-show-print {
   padding: 24px;
 }
 .vd-datepicker-group-item:first-child {
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--hs-color-border-neutral-soft);
 }
 @media only screen and (max-width: 768px) {
   .vd-datepicker-group-item:first-child {
     border-right: none;
-    border-bottom: 1px solid var(--vd-colour--framing);
+    border-bottom: 1px solid var(--hs-color-border-neutral-soft);
   }
 }
 .vd-datepicker-group-item .vd-datepicker-ui {
@@ -7009,7 +7009,7 @@ td.vd-show-print {
   outline: none;
   box-shadow: none;
   background-color: var(--vd-colour--box);
-  border: 2px solid var(--vd-colour--framing);
+  border: 2px solid var(--hs-color-border-neutral-soft);
   border-radius: 4px;
   transition-duration: 0.2s;
   transition-property: border-color, box-shadow;
@@ -7606,7 +7606,7 @@ td.vd-show-print {
 }
 
 .vd-table-list-row {
-  border-bottom: 1px solid var(--vd-colour--framing);
+  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);

package/package.json

@@ -1 +1 @@
-{"name":"@lightspeed/design-system-css","version":"27.0.0","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^27.0.0"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
+{"name":"@lightspeed/design-system-css","version":"27.2.0","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^27.2.0"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}

package/src/vend-styles/components/DataTable/DataTable.scss

@@ -7,7 +7,7 @@
 // -----------------------------------------------------------------
 .vd-datatable {
   width: 100%;
-  border: vd-border(keyline);
+  border: 1px solid hs-color(border-neutral-strong);
   border-collapse: separate;
   border-spacing: 0;
   border-radius: $vd-border-radius;
@@ -59,7 +59,7 @@
 // DATA TABLE ROWS - HEADER ROW
 // -----------------------------------------------------------------
 .vd-datatable-row--header {
-  border-bottom: vd-border(keyline);
+  border-bottom: 1px solid hs-color(border-neutral-strong);
 
   &:nth-child(odd),
   &:nth-child(even) {
@@ -68,7 +68,7 @@
 }
 
 .vd-datatable-row--header-sections {
-  border-bottom: vd-border(keyline);
+  border-bottom: 1px solid hs-color(border-neutral-strong);
 
   &:nth-child(odd),
   &:nth-child(even) {
@@ -88,7 +88,7 @@
 // Add a border at the bottom of the table footer when stuck as the table border will be scrolled out of view
 .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
   .vd-datatable-foot.vd-sticky & {
-    border-bottom: vd-border(keyline);
+    border-bottom: 1px solid hs-color(border-neutral-strong);
     border-bottom-color: transparent;
   }
 
@@ -125,12 +125,12 @@
 
   .vd-datatable-row--footer & {
     @include vd-text(label);
-    border-top: vd-border(keyline);
+    border-top: 1px solid hs-color(border-neutral-strong);
   }
 }
 
 .vd-datatable-cell--section-start {
-  border-left: vd-border(keyline);
+  border-left: 1px solid hs-color(border-neutral-strong);
 }
 
 // DATA TABLE CELLS - HEADER
@@ -141,7 +141,7 @@
 
   .vd-datatable-row--header &,
   .vd-datatable-row--header-sections & {
-    border-bottom: vd-border(keyline);
+    border-bottom: 1px solid hs-color(border-neutral-strong);
   }
 
   .vd-datatable-row--header-sections & {
@@ -149,7 +149,7 @@
     font-size: 12px;
     padding: vd-grid-unit(2);
     text-align: center;
-    border-left: vd-border(keyline);
+    border-left: 1px solid hs-color(border-neutral-strong);
 
     &:first-child {
       border-left: none;

package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss

@@ -3,7 +3,7 @@ $vd-datepicker-font-size: 15px;
 $vd-datepicker-button-colour: vd-colour(do);
 $vd-datepicker-padding: 24px;
 $vd-datepicker-background: vd-colour(box);
-$vd-datepicker-border: vd-border(framing);
+$vd-datepicker-border: 1px solid hs-color(border-neutral-soft);
 
 // Grid
 $vd-datepicker-day-spacing: 10px;

package/src/vend-styles/components/TableList/TableList.scss

@@ -168,7 +168,7 @@
 // TABLE ROWS - DEFAULT
 // -----------------------------------------------------------------
 .vd-table-list-row {
-  border-bottom: vd-border(framing);
+  border-bottom: 1px solid hs-color(border-neutral-soft);
   &.vd-table-list-row--active {
     background-color: vd-colour(go-highlight);
   }

package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss

@@ -27,13 +27,13 @@ $vd-autocomplete-filter-icon-margin: 14px;
     // right of the select in this component would need to be half that so it would look like it shares a border with
     // its neighbour.  For now this has no affect as the min measure is 1px. This goes for all of the following border
     // overrides
-    border-right: vd-border(framing, $vd-input-border-width * 0.5);
+    border-right: $vd-input-border-width * 0.5 solid hs-color(border-neutral-soft);
     transition: none;
   }
 
   .vd-lozenge-group {
     border-radius: $vd-autocomplete-filter-input-border-radius;
-    border-left: vd-border(framing, $vd-input-border-width * 0.5);
+    border-left: $vd-input-border-width * 0.5 solid hs-color(border-neutral-soft);
   }
 
   vd-autocomplete-multi {
@@ -54,7 +54,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
 
 .vd-autocomplete-select-placeholder {
   @include vd-input-states();
-  border-right: vd-border(framing, $vd-input-border-width * 0.5);
+  border-right: $vd-input-border-width * 0.5 solid hs-color(border-neutral-soft);
   border-radius: $vd-autocomplete-filter-select-border-radius;
   padding: $vd-autocomplete-filter-select-padding;
   padding-left: $vd-autocomplete-filter-select-padding-left;

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

@@ -6,7 +6,7 @@
   align-items: center;
   background-color: vd-colour(box);
   border-radius: $vd-border-radius;
-  border: vd-border(framing, 2px);
+  border: 2px solid hs-color(border-neutral-soft);
   box-sizing: border-box;
   color: vd-colour(text);
   cursor: pointer;

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

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

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

@@ -82,7 +82,7 @@
   height: $vd-checkbox-length;
   width: $vd-checkbox-length;
   background-color: vd-colour(box);
-  border: vd-border(framing);
+  border: 1px solid hs-color(border-neutral-soft);
   border-radius: $vd-border-radius;
   box-sizing: border-box;
 
@@ -91,8 +91,8 @@
     box-sizing: content-box;
     display: block;
     position: absolute;
-    border-right: vd-border(framing, $vd-checkbox-tick-thickness);
-    border-top: vd-border(framing, $vd-checkbox-tick-thickness);
+    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);
     transform: scaleX(-1) rotate(180deg + -45deg);
     transform-origin: left top;

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

@@ -3,7 +3,7 @@ $vd-datepicker-font-size: 15px;
 $vd-datepicker-button-colour: vd-colour(do);
 $vd-datepicker-padding: 24px;
 $vd-datepicker-background: vd-colour(box);
-$vd-datepicker-border: vd-border(framing);
+$vd-datepicker-border: 1px solid hs-color(border-neutral-soft);
 
 // Date picker no end date
 $vd-datepicker-range-no-end-height: 32px;

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

@@ -57,7 +57,7 @@ $vd-textarea-line-height: vd-px-unit(
 @mixin vd-input-states() {
   box-shadow: none;
   background-color: vd-colour(box);
-  border: vd-border(framing, $vd-input-border-width);
+  border: $vd-input-border-width solid hs-color(border-neutral-soft);
   border-radius: $vd-border-radius;
 
   transition-duration: $vd-time-s;

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

@@ -2,7 +2,7 @@
   display: block;
   padding: vd-grid-unit(6);
   background-color: vd-colour(box);
-  border: vd-border(framing);
+  border: 1px solid hs-color(border-neutral-soft);
 
   &.vd-next-stepper--on-box {
     background-color: vd-colour(background);
@@ -29,7 +29,7 @@
 .vd-next-stepper-details {
   display: flex;
   flex-direction: column;
-  border-top: vd-border(keyline);
+  border-top: 1px solid hs-color(border-neutral-strong);
   margin-top: vd-grid-unit(2);
   padding-top: vd-grid-unit(2);
 }

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

@@ -46,7 +46,7 @@
 
   &::after {
     content: '';
-    border-bottom: vd-border(framing, 2px);
+    border-bottom: 2px solid hs-color(border-neutral-soft);
     display: block;
     position: absolute;
     bottom: 0;
@@ -62,7 +62,7 @@
 
   &::after {
     content: '';
-    border-bottom: vd-border(framing, 2px);
+    border-bottom: 2px solid hs-color(border-neutral-soft);
     display: block;
     position: absolute;
     right: $vd-popover-spacing;
@@ -105,7 +105,7 @@
 
 .vd-popover-list-footer--full {
   background-color: vd-colour(box);
-  border-top: vd-border(framing);
+  border-top: 1px solid hs-color(border-neutral-soft);
   display: flex;
   flex-direction: column;
   min-height: 60px;

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

@@ -66,7 +66,7 @@
   width: $vd-radio-length;
   border-radius: 50%;
   background-color: vd-colour(box);
-  border: vd-border(framing, 2px);
+  border: 2px solid hs-color(border-neutral-soft);
   box-sizing: border-box;
 
   &:after {

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

@@ -73,7 +73,7 @@ vd-section,
 }
 
 .vd-section--panel {
-  border-bottom: vd-border(keyline);
+  border-bottom: 1px solid hs-color(border-neutral-strong);
   margin: 0 $vd-section--panel-margin-h;
 
   &:last-child {

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

@@ -1,12 +1,12 @@
 .vd-segcontrol {
   &:first-of-type .vd-segcontrol-button {
-    border-left: vd-border(framing, $vd-input-border-width);
+    border-left: $vd-input-border-width solid hs-color(border-neutral-soft);
     border-radius: $vd-border-radius 0 0 $vd-border-radius;
   }
 
   &:last-of-type .vd-segcontrol-button {
     border-radius: 0 $vd-border-radius $vd-border-radius 0;
-    border-right: vd-border(framing, $vd-input-border-width);
+    border-right: $vd-input-border-width solid hs-color(border-neutral-soft);
   }
 
   position: relative;
@@ -45,7 +45,7 @@
   align-items: center;
   background-color: vd-colour(box);
   padding: $vd-input-padding vd-grid-unit(5);
-  border: vd-border(framing, $vd-input-border-width);
+  border: $vd-input-border-width solid hs-color(border-neutral-soft);
   color: vd-colour(text);
   width: 100%;
   transition-duration: $vd-time-s;

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

@@ -39,7 +39,7 @@
   height: $vd-suggestion-list-footer-height;
   box-sizing: border-box;
   background-color: vd-colour(box);
-  border-top: vd-border(framing);
+  border-top: 1px solid hs-color(border-neutral-soft);
 }
 
 .vd-suggestion-query-container {

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

@@ -21,7 +21,7 @@ table {
   }
 
   tr {
-    border-bottom: vd-border(framing);
+    border-bottom: 1px solid hs-color(border-neutral-soft);
 
     .vd-clickable {
       display: block;
@@ -53,10 +53,10 @@ table {
     }
 
     &.vd-border-t {
-      border-top: vd-border(framing);
+      border-top: 1px solid hs-color(border-neutral-soft);
     }
     &.vd-border-b {
-      border-bottom: vd-border(framing);
+      border-bottom: 1px solid hs-color(border-neutral-soft);
     }
 
     &.vd-med-pad-t,
@@ -195,7 +195,7 @@ table {
   }
 
   &.vd-table--data {
-    border: vd-border(framing);
+    border: 1px solid hs-color(border-neutral-soft);
     tr {
       background-color: vd-colour(box);
     }
@@ -241,7 +241,7 @@ table {
 }
 
 .vd-table--report {
-  border: vd-border(framing);
+  border: 1px solid hs-color(border-neutral-soft);
 
   > thead {
     th {
@@ -250,7 +250,7 @@ table {
     }
 
     tr {
-      border: vd-border(framing);
+      border: 1px solid hs-color(border-neutral-soft);
     }
   }
 

package/src/vend.ui/styles/global/colour/_colour-functions.scss

@@ -1,13 +1,11 @@
 /// Get a theme based colour for a specific colour element.
 ///
+/// @ DEPRECATED
 /// @function vd-colour
 /// @param {String} $_vd-colour-element - The required element; e.g. text, background
 /// @param {String} [$_vd-colour-theme=$vd-colour-theme] @deprecated
 /// @return {Colour<String>} - The retrieved colour for the element
 @function vd-colour($_vd-colour-element, $_vd-colour-theme: _no_arg_provided_) {
-  @warn "DEPRECATED. DO NOT USE `vd-colour` scss function or any --vd-colour prefixed css variable,\n" +
-    "You should use the `hs-color` function or any --hs-color prefixed css variable.";
-
   @if ($_vd-colour-theme != _no_arg_provided_) {
     @warn "[colour-functions] Passing a theme as a second argument to vd-colour is deprecated. You should remove it.";
   }
@@ -36,6 +34,7 @@
 
 /// Generating a solid border for permitted border types (currently either keyline or framing)
 ///
+/// @ DEPRECATED
 /// @function vd-border
 /// @param {String} $_vd-border-type - The border type, either keyline or framing
 /// @param {Unit} [$_vd-border-width=1px] - The width of the border