@lightspeed/design-system-css 28.0.0 → 29.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. package/dist/index.css +420 -420
  2. package/dist/index.css.map +1 -1
  3. package/dist/vend-styles.css +420 -420
  4. package/package.json +1 -1
  5. package/src/vend-styles/components/Carousel/Carousel.scss +3 -3
  6. package/src/vend-styles/components/DataTable/DataTable.scss +7 -7
  7. package/src/vend-styles/components/DatePicker/DatePicker.scss +4 -4
  8. package/src/vend-styles/components/DatePicker/_DatePicker-ns.scss +5 -5
  9. package/src/vend-styles/components/LineChart/LineChart.scss +8 -8
  10. package/src/vend-styles/components/Modal/Modal.scss +1 -1
  11. package/src/vend-styles/components/ProgressBar/ProgressBar.scss +2 -2
  12. package/src/vend-styles/components/PromotionModal/PromotionModal.scss +1 -1
  13. package/src/vend-styles/components/TableList/TableList.scss +9 -9
  14. package/src/vend-styles/components/TableList/_TableList-ns.scss +1 -1
  15. package/src/vend-styles/components/UpsellPrimary/UpsellPrimary.scss +4 -4
  16. package/src/vend-styles/components/VendVideo/VendVideo.scss +3 -3
  17. package/src/vend-styles/utilities/sticky.scss +2 -2
  18. package/src/vend.ui/components/vd-action-bar/vd-action-bar-ns.scss +1 -1
  19. package/src/vend.ui/components/vd-autocomplete/vd-autocomplete.scss +1 -1
  20. package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss +1 -1
  21. package/src/vend.ui/components/vd-avatar/vd-avatar.scss +4 -4
  22. package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss +3 -3
  23. package/src/vend.ui/components/vd-badges/vd-id-badge/vd-id-badge.scss +5 -5
  24. package/src/vend.ui/components/vd-banner/vd-banner-ns.scss +2 -2
  25. package/src/vend.ui/components/vd-banner/vd-banner.scss +3 -3
  26. package/src/vend.ui/components/vd-bg/vd-bg.scss +1 -1
  27. package/src/vend.ui/components/vd-btn/_vd-btn-mixins.scss +13 -13
  28. package/src/vend.ui/components/vd-btn/vd-btn-panel.scss +8 -8
  29. package/src/vend.ui/components/vd-btn/vd-btn.scss +1 -1
  30. package/src/vend.ui/components/vd-card/vd-card-ns.scss +1 -1
  31. package/src/vend.ui/components/vd-carousel/vd-carousel.scss +3 -3
  32. package/src/vend.ui/components/vd-checkbox/vd-checkbox.scss +7 -7
  33. package/src/vend.ui/components/vd-datepicker/vd-datepicker-ns.scss +6 -6
  34. package/src/vend.ui/components/vd-datepicker/vd-datepicker.scss +8 -8
  35. package/src/vend.ui/components/vd-dialog/vd-dialog-ns.scss +1 -1
  36. package/src/vend.ui/components/vd-dialog/vd-dialog.scss +2 -2
  37. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close-ns.scss +1 -1
  38. package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss +8 -8
  39. package/src/vend.ui/components/vd-dott/vd-dott.scss +7 -7
  40. package/src/vend.ui/components/vd-fieldset/vd-fieldset.scss +1 -1
  41. package/src/vend.ui/components/vd-flag/vd-flag.scss +4 -4
  42. package/src/vend.ui/components/vd-header/vd-header.scss +1 -1
  43. package/src/vend.ui/components/vd-hero/vd-hero.scss +4 -4
  44. package/src/vend.ui/components/vd-hr/vd-hr.scss +1 -1
  45. package/src/vend.ui/components/vd-in-page-help/vd-in-page-help.scss +1 -1
  46. package/src/vend.ui/components/vd-input/vd-input-ns.scss +7 -7
  47. package/src/vend.ui/components/vd-input/vd-input.scss +2 -2
  48. package/src/vend.ui/components/vd-input-char-limit/vd-input-char-limit.scss +1 -1
  49. package/src/vend.ui/components/vd-link/vd-link.scss +3 -3
  50. package/src/vend.ui/components/vd-loader/vd-loader.scss +1 -1
  51. package/src/vend.ui/components/vd-lozenge/vd-lozenge.scss +6 -6
  52. package/src/vend.ui/components/vd-lozenge-group/vd-lozenge-group.scss +2 -2
  53. package/src/vend.ui/components/vd-multiselect-popover/vd-multiselect-popover.scss +1 -1
  54. package/src/vend.ui/components/vd-next-stepper/vd-next-stepper.scss +2 -2
  55. package/src/vend.ui/components/vd-overlay/vd-overlay-ns.scss +1 -1
  56. package/src/vend.ui/components/vd-panel/vd-panel.scss +2 -2
  57. package/src/vend.ui/components/vd-password/vd-password.scss +1 -1
  58. package/src/vend.ui/components/vd-popover/vd-popover.scss +4 -4
  59. package/src/vend.ui/components/vd-popover-list/vd-popover-list.scss +6 -6
  60. package/src/vend.ui/components/vd-radio/vd-radio.scss +7 -7
  61. package/src/vend.ui/components/vd-scrollable/vd-scrollable.scss +1 -1
  62. package/src/vend.ui/components/vd-section/vd-section.scss +3 -3
  63. package/src/vend.ui/components/vd-section-back/vd-section-back.scss +2 -2
  64. package/src/vend.ui/components/vd-segcontrol/vd-segcontrol.scss +7 -7
  65. package/src/vend.ui/components/vd-select/vd-select-inline.scss +1 -1
  66. package/src/vend.ui/components/vd-select/vd-select-ns.scss +1 -1
  67. package/src/vend.ui/components/vd-select/vd-select.scss +2 -2
  68. package/src/vend.ui/components/vd-splash/vd-splash.scss +1 -1
  69. package/src/vend.ui/components/vd-status-icon/vd-status-icon.scss +2 -2
  70. package/src/vend.ui/components/vd-suggestion/vd-suggestion-list.scss +3 -3
  71. package/src/vend.ui/components/vd-switch/vd-switch.scss +8 -8
  72. package/src/vend.ui/components/vd-table/vd-table-ns.scss +2 -2
  73. package/src/vend.ui/components/vd-table/vd-table.scss +8 -8
  74. package/src/vend.ui/components/vd-tabs/vd-tabs.scss +4 -4
  75. package/src/vend.ui/components/vd-text/vd-text.scss +4 -4
  76. package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss +3 -3
  77. package/src/vend.ui/components/vd-tooltip/vd-tooltip.scss +6 -6
  78. package/src/vend.ui/styles/global/_base-mixins.scss +1 -1
  79. package/src/vend.ui/styles/global/_helper-mixins.scss +1 -1
  80. package/src/vend.ui/styles/global/_misc.scss +2 -2
  81. package/src/vend.ui/styles/global/_normalise.scss +1 -1
  82. package/src/vend.ui/styles/global/colour/_colour-functions.scss +72 -16
  83. package/src/vend.ui/styles/global/colour/_colour-helpers.scss +2 -2
  84. package/src/vend.ui/styles/global/effects/_effects.scss +1 -1
  85. package/src/vend.ui/styles/global/text/_text-mixins.scss +1 -1
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name":"@lightspeed/design-system-css","version":"28.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":"^28.0.0"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
1
+ {"name":"@lightspeed/design-system-css","version":"29.0.1","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":"^29.0.1"},"devDependencies":{"stylelint":"^13.5.0","stylelint-scss":"^3.17.2"}}
@@ -75,7 +75,7 @@
75
75
  display: flex;
76
76
  flex-direction: row;
77
77
  justify-content: space-between;
78
- background-color: vd-colour(box);
78
+ background-color: hs-color(bg-neutral-top);
79
79
  padding-top: 8px;
80
80
  height: auto;
81
81
  }
@@ -104,11 +104,11 @@
104
104
  width: 8px;
105
105
  height: 8px;
106
106
  border-radius: 50%;
107
- background-color: vd-colour(keyline);
107
+ background-color: hs-color(border-neutral-strong);
108
108
  }
109
109
  }
110
110
 
111
111
  .vd-carousel-paginator-indicator--active::before {
112
- background-color: vd-colour(do);
112
+ background-color: hs-color(bg-go-default);
113
113
  }
114
114
  }
@@ -49,10 +49,10 @@
49
49
  // -----------------------------------------------------------------
50
50
  .vd-datatable-row {
51
51
  &:nth-child(odd) {
52
- background-color: vd-colour(background);
52
+ background-color: hs-color(bg-neutral-backdrop);
53
53
  }
54
54
  &:nth-child(even) {
55
- background-color: vd-colour(box);
55
+ background-color: hs-color(bg-neutral-top);
56
56
  }
57
57
  }
58
58
 
@@ -63,7 +63,7 @@
63
63
 
64
64
  &:nth-child(odd),
65
65
  &:nth-child(even) {
66
- background-color: vd-colour(box);
66
+ background-color: hs-color(bg-neutral-top);
67
67
  }
68
68
  }
69
69
 
@@ -72,7 +72,7 @@
72
72
 
73
73
  &:nth-child(odd),
74
74
  &:nth-child(even) {
75
- background-color: vd-colour(framing);
75
+ background-color: hs-color(border-neutral-soft);
76
76
  }
77
77
  }
78
78
 
@@ -81,7 +81,7 @@
81
81
  .vd-datatable-row--footer {
82
82
  &:nth-child(odd),
83
83
  &:nth-child(even) {
84
- background-color: vd-colour(framing);
84
+ background-color: hs-color(border-neutral-soft);
85
85
  }
86
86
  }
87
87
 
@@ -93,7 +93,7 @@
93
93
  }
94
94
 
95
95
  .vd-datatable-foot.vd-sticky--stuck & {
96
- border-bottom-color: vd-colour(keyline);
96
+ border-bottom-color: hs-color(border-neutral-strong);
97
97
  border-radius: 0;
98
98
  }
99
99
  }
@@ -109,7 +109,7 @@
109
109
  left: 0;
110
110
  width: 100%;
111
111
  height: 30px;
112
- box-shadow: inset 0 -30px 40px -48px vd-colour(shadow);
112
+ box-shadow: inset 0 -30px 40px -48px hs-color(overlay-dark-default);
113
113
  }
114
114
  }
115
115
 
@@ -182,8 +182,8 @@
182
182
  .react-datepicker__day--range-end,
183
183
  .react-datepicker__day--selected {
184
184
  .vd-datepicker-day-button {
185
- background: vd-colour(do);
186
- color: vd-colour(box);
185
+ background: hs-color(bg-go-default);
186
+ color: hs-color(bg-neutral-top);
187
187
  font-weight: $vd-font-weight--bold;
188
188
  border: none;
189
189
  }
@@ -191,7 +191,7 @@
191
191
 
192
192
  .react-datepicker__day:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
193
193
  .vd-datepicker-day-button:hover {
194
- background: vd-rgba(vd-colour(do-rgb), 0.35);
194
+ background: vd-rgba(hs-color(bg-go-default-rgb), 0.35);
195
195
  }
196
196
  }
197
197
 
@@ -202,7 +202,7 @@
202
202
 
203
203
  // Highlight today
204
204
  .react-datepicker__day--today {
205
- color: vd-colour(do);
205
+ color: hs-color(fg-go-default);
206
206
  font-weight: $vd-font-weight--bold;
207
207
  }
208
208
 
@@ -1,13 +1,13 @@
1
1
  // Date picker general
2
2
  $vd-datepicker-font-size: 15px;
3
- $vd-datepicker-button-colour: vd-colour(do);
3
+ $vd-datepicker-button-colour: hs-color(fg-go-default);
4
4
  $vd-datepicker-padding: 24px;
5
- $vd-datepicker-background: vd-colour(box);
5
+ $vd-datepicker-background: hs-color(bg-neutral-top);
6
6
  $vd-datepicker-border: 1px solid hs-color(border-neutral-soft);
7
7
 
8
8
  // Grid
9
9
  $vd-datepicker-day-spacing: 10px;
10
- $vd-datepicker-range-colour: vd-colour(do-highlight);
10
+ $vd-datepicker-range-colour: hs-color(bg-go-highlight-default);
11
11
 
12
12
  // Button
13
13
  $vd-datepicker-button-radius: 50%;
@@ -16,8 +16,8 @@ $vd-datepicker-button-size: 30px;
16
16
  // Button next / prev
17
17
  $vd-datepicker-next-prev-button-width: 26px;
18
18
  $vd-datepicker-next-prev-button-icon-size: 7px;
19
- $vd-datepicker-next-prev-arrow-border-enabled: 3px solid vd-colour(text);
20
- $vd-datepicker-next-prev-arrow-border-disabled: 3px solid vd-colour(framing);
19
+ $vd-datepicker-next-prev-arrow-border-enabled: 3px solid hs-color(fg-neutral-default);
20
+ $vd-datepicker-next-prev-arrow-border-disabled: 3px solid hs-color(border-neutral-soft);
21
21
 
22
22
  // Date range picker granularity input
23
23
  $vd-datepicker-range-granularity-input-width: 153px;
@@ -16,7 +16,7 @@ $chart-bg: #fafafa;
16
16
  }
17
17
 
18
18
  .tick line {
19
- stroke: vd-colour(framing);
19
+ stroke: hs-color(border-neutral-soft);
20
20
  stroke-width: 1px;
21
21
  fill: transparent;
22
22
  }
@@ -32,13 +32,13 @@ $chart-bg: #fafafa;
32
32
  }
33
33
 
34
34
  .vd-grid-zero-tick {
35
- stroke: vd-colour(keyline);
35
+ stroke: hs-color(border-neutral-strong);
36
36
  }
37
37
 
38
38
  .vd-line {
39
39
  fill: transparent;
40
40
  stroke-width: 2px;
41
- stroke: vd-colour(keyline);
41
+ stroke: hs-color(border-neutral-strong);
42
42
  }
43
43
 
44
44
  .vd-line-with-fill {
@@ -54,8 +54,8 @@ $chart-bg: #fafafa;
54
54
  }
55
55
 
56
56
  .vd-plot-point {
57
- fill: vd-colour(do);
58
- stroke: vd-colour(box);
57
+ fill: hs-color(fg-go-default);
58
+ stroke: hs-color(bg-neutral-top);
59
59
  stroke-width: 2px;
60
60
  }
61
61
 
@@ -71,7 +71,7 @@ $chart-bg: #fafafa;
71
71
 
72
72
  .vd-line-wrapper-main {
73
73
  .vd-line {
74
- stroke: vd-colour(supplementary);
74
+ stroke: hs-color(bg-supplementary-default);
75
75
  }
76
76
  }
77
77
 
@@ -84,12 +84,12 @@ $chart-bg: #fafafa;
84
84
 
85
85
  .vd-line-label {
86
86
  @include vd-text(mini-signpost);
87
- fill: vd-colour(keyline);
87
+ fill: hs-color(border-neutral-strong);
88
88
  }
89
89
  .vd-axis {
90
90
  .tick text {
91
91
  @include vd-text(mini-copy);
92
- fill: vd-colour(text);
92
+ fill: hs-color(fg-neutral-default);
93
93
  }
94
94
  }
95
95
  }
@@ -7,7 +7,7 @@
7
7
  margin: 0 auto;
8
8
  padding: 0;
9
9
 
10
- background: vd-colour(box);
10
+ background: hs-color(bg-neutral-top);
11
11
  border-radius: $vd-border-radius;
12
12
 
13
13
  width: calc(90% - #{$vd-dialog-close-width});
@@ -9,13 +9,13 @@
9
9
  height: 10px;
10
10
  width: 100%;
11
11
  border-radius: 5px;
12
- background-color: vd-colour(framing);
12
+ background-color: hs-color(border-neutral-soft);
13
13
  overflow: hidden;
14
14
  }
15
15
 
16
16
  .vs-progress-bar {
17
17
  height: 100%;
18
18
  width: 0%;
19
- background-color: vd-colour(do);
19
+ background-color: hs-color(bg-go-default);
20
20
  transition: width 0.6s ease;
21
21
  }
@@ -24,7 +24,7 @@
24
24
  display: flex;
25
25
  justify-content: space-between;
26
26
  flex-flow: row wrap;
27
- box-shadow: inset 0 -1px vd-colour(keyline);
27
+ box-shadow: inset 0 -1px hs-color(border-neutral-strong);
28
28
  }
29
29
 
30
30
  .pm-products-search-open {
@@ -11,7 +11,7 @@
11
11
  display: flex;
12
12
  padding-top: 6px;
13
13
  padding-bottom: 6px;
14
- border-bottom: 1px solid vd-colour(keyline);
14
+ border-bottom: 1px solid hs-color(border-neutral-strong);
15
15
  justify-content: space-between;
16
16
  align-items: center;
17
17
  min-height: 60px;
@@ -93,7 +93,7 @@
93
93
  }
94
94
 
95
95
  .vd-table-list-toggle-icon {
96
- color: vd-colour(supplementary);
96
+ color: hs-color(bg-supplementary-default);
97
97
  transition: transform 50ms ease-in-out 0s;
98
98
  width: 16px;
99
99
  height: 16px;
@@ -170,7 +170,7 @@
170
170
  .vd-table-list-row {
171
171
  border-bottom: 1px solid hs-color(border-neutral-soft);
172
172
  &.vd-table-list-row--active {
173
- background-color: vd-colour(go-highlight);
173
+ background-color: hs-color(bg-go-highlight-default);
174
174
  }
175
175
  }
176
176
 
@@ -179,14 +179,14 @@
179
179
  .vd-table-list-row--expandable {
180
180
  &:hover {
181
181
  cursor: pointer;
182
- background-color: vd-colour(go-highlight);
182
+ background-color: hs-color(bg-go-highlight-default);
183
183
  }
184
184
  }
185
185
 
186
186
  // TABLE ROWS - EXPANDED ROW
187
187
  // -----------------------------------------------------------------
188
188
  .vd-table-list-row--expanded {
189
- background: vd-colour(box);
189
+ background: hs-color(bg-neutral-top);
190
190
  box-shadow: $vd-table-list-expanded-shadow;
191
191
 
192
192
  .vd-table-list-cell:first-child {
@@ -202,8 +202,8 @@
202
202
  // TABLE ROWS - ACTIONS ROW (FOR THINGS SUCH AS HIGHLIGHTING ITEMS SELECTED)
203
203
  // -----------------------------------------------------------------
204
204
  .vd-table-list-row--actions {
205
- background-color: vd-colour(framing);
206
- border-bottom: 1px solid vd-colour(keyline);
205
+ background-color: hs-color(border-neutral-soft);
206
+ border-bottom: 1px solid hs-color(border-neutral-strong);
207
207
  }
208
208
 
209
209
  // TABLE ROWS - EXPANDED ROW CONTENT
@@ -212,7 +212,7 @@
212
212
  display: none; // @todo Perhaps not required
213
213
 
214
214
  > .vd-table-list-cell {
215
- background: vd-colour(box);
215
+ background: hs-color(bg-neutral-top);
216
216
  padding: 0;
217
217
 
218
218
  &:first-child {
@@ -236,7 +236,7 @@
236
236
  // TABLE ROWS - HEADER ROW
237
237
  // -----------------------------------------------------------------
238
238
  .vd-table-list-row--header {
239
- border-bottom-color: vd-colour(keyline);
239
+ border-bottom-color: hs-color(border-neutral-strong);
240
240
  }
241
241
 
242
242
  // TABLE ROWS - EXPANDED ROW INNARDS
@@ -11,5 +11,5 @@
11
11
  }
12
12
  }
13
13
 
14
- $vd-table-list-expanded-shadow: 0 10px 12px -2px vd-colour(shadow);
14
+ $vd-table-list-expanded-shadow: 0 10px 12px -2px hs-color(overlay-dark-default);
15
15
  $vd-table-list-max-height-for-vcentering: 50px;
@@ -12,9 +12,9 @@
12
12
  position: absolute;
13
13
  width: 100%;
14
14
  height: 100%;
15
- color: vd-colour(box);
16
- background: vd-colour(box)
17
- linear-gradient(to left, vd-colour(box) 50%, $vd-upsell-background-colour 50%) no-repeat;
15
+ color: hs-color(bg-neutral-top);
16
+ background: hs-color(bg-neutral-top)
17
+ linear-gradient(to left, hs-color(bg-neutral-top) 50%, $vd-upsell-background-colour 50%) no-repeat;
18
18
  }
19
19
 
20
20
  .vd-upsell-primary-background-inner {
@@ -28,7 +28,7 @@
28
28
 
29
29
  .vd-upsell-primary-upper {
30
30
  position: relative;
31
- background-color: vd-colour(box);
31
+ background-color: hs-color(bg-neutral-top);
32
32
  }
33
33
 
34
34
  .vd-upsell-primary-background svg {
@@ -12,7 +12,7 @@
12
12
  bottom: 0;
13
13
  margin: auto;
14
14
  .vd-video-play-button {
15
- background-color: vd-colour(background);
15
+ background-color: hs-color(bg-neutral-backdrop);
16
16
  width: 80px;
17
17
  height: 80px;
18
18
  border-radius: 50%;
@@ -21,10 +21,10 @@
21
21
  }
22
22
  }
23
23
  .vd-video-play-button:hover {
24
- background-color: vd-colour(supplementary);
24
+ background-color: hs-color(bg-supplementary-default);
25
25
  }
26
26
  .vd-video-play-button:active {
27
- background-color: vd-colour(supplementary);
27
+ background-color: hs-color(bg-supplementary-default);
28
28
  }
29
29
  }
30
30
  .vd-video-thumbnail-image {
@@ -10,7 +10,7 @@
10
10
 
11
11
  &.vd-sticky--stuck {
12
12
  box-shadow: 0 $vd-sticky-shadow-x $vd-sticky-shadow-blur $vd-sticky-shadow-spread
13
- vd-colour(shadow);
13
+ hs-color(overlay-dark-default);
14
14
  }
15
15
  }
16
16
 
@@ -19,7 +19,7 @@
19
19
 
20
20
  &.vd-sticky--stuck {
21
21
  box-shadow: 0 (-$vd-sticky-shadow-x) $vd-sticky-shadow-blur $vd-sticky-shadow-spread
22
- vd-colour(shadow);
22
+ hs-color(overlay-dark-default);
23
23
  }
24
24
  }
25
25
 
@@ -1,3 +1,3 @@
1
- $vd-action-bar-background-colour: vd-colour(framing);
1
+ $vd-action-bar-background-colour: hs-color(border-neutral-soft);
2
2
  $vd-action-bar--inline-padding: vd-grid-unit(2) vd-grid-unit(6);
3
3
  $vd-action-bar--min-height: 45px;
@@ -17,7 +17,7 @@
17
17
  top: 1px;
18
18
  left: 1px;
19
19
  opacity: 1;
20
- color: vd-colour(supplementary--text);
20
+ color: hs-color(fg-supplementary-default);
21
21
  pointer-events: none;
22
22
  user-select: none;
23
23
  text-align: left;
@@ -66,7 +66,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
66
66
  z-index: 1;
67
67
  margin-left: $vd-autocomplete-filter-icon-margin;
68
68
  margin-top: $vd-autocomplete-filter-icon-margin;
69
- color: vd-colour(supplementary);
69
+ color: hs-color(bg-supplementary-default);
70
70
  }
71
71
 
72
72
  .vd-autocomplete-filter-button-label {
@@ -1,5 +1,5 @@
1
1
  .vd-avatar {
2
- background-color: vd-colour(framing);
2
+ background-color: hs-color(border-neutral-soft);
3
3
  background-repeat: no-repeat;
4
4
  background-size: cover;
5
5
  background-position: center;
@@ -24,11 +24,11 @@
24
24
 
25
25
  &.vd-avatar--deleted-image {
26
26
  @include disabled();
27
- background-color: vd-colour(no);
27
+ background-color: hs-color(bg-no-default);
28
28
  }
29
29
 
30
30
  .deleted-state-icon {
31
- color: vd-colour(box);
31
+ color: hs-color(bg-neutral-top);
32
32
  }
33
33
  }
34
34
 
@@ -37,7 +37,7 @@
37
37
 
38
38
  word-wrap: normal;
39
39
  word-break: normal;
40
- color: vd-colour(text-action);
40
+ color: hs-color(fg-neutral-ondark-default);
41
41
  text-align: center;
42
42
 
43
43
  &.vd-avatar--x-small {
@@ -9,7 +9,7 @@
9
9
  background-repeat: no-repeat;
10
10
  background-size: cover;
11
11
  background-position: center center;
12
- background-color: vd-colour(framing);
12
+ background-color: hs-color(border-neutral-soft);
13
13
  position: relative;
14
14
 
15
15
  // Ensure placeholder backgrounds are the same size regardless of tile size
@@ -19,7 +19,7 @@
19
19
  }
20
20
 
21
21
  .vd-avatar-multi-tile--remainder {
22
- background-color: vd-colour(keyline);
22
+ background-color: hs-color(border-neutral-strong);
23
23
  }
24
24
 
25
25
  .vd-avatar-multi-count {
@@ -64,7 +64,7 @@
64
64
 
65
65
  .vd-avatar-multi-tile {
66
66
  flex: 1 1 50%;
67
- border: ($vd-avatar-multi-size-gap * 0.5) solid vd-colour(box);
67
+ border: ($vd-avatar-multi-size-gap * 0.5) solid hs-color(bg-neutral-top);
68
68
  border-radius: 5px;
69
69
  }
70
70
  }
@@ -37,12 +37,12 @@
37
37
  &:active,
38
38
  &:focus {
39
39
  outline: none;
40
- background-color: vd-colour(go-highlight);
40
+ background-color: hs-color(bg-go-highlight-default);
41
41
  }
42
42
  }
43
43
 
44
44
  &.vd-id-badge--current {
45
- border-color: vd-colour(do);
45
+ border-color: hs-color(fg-go-default);
46
46
  }
47
47
 
48
48
  &.vd-id-badge--small {
@@ -78,7 +78,7 @@
78
78
  outline: none;
79
79
 
80
80
  .vd-id-badge__header-title {
81
- color: vd-colour(go);
81
+ color: hs-color(fg-go-default);
82
82
  }
83
83
  }
84
84
  }
@@ -133,7 +133,7 @@
133
133
  justify-content: center;
134
134
  flex: 1;
135
135
  word-break: break-word;
136
- color: vd-colour(text);
136
+ color: hs-color(fg-neutral-default);
137
137
  @include vd-text(body);
138
138
  }
139
139
 
@@ -146,7 +146,7 @@
146
146
  }
147
147
 
148
148
  .vd-id-badge__image {
149
- background-color: vd-colour(framing);
149
+ background-color: hs-color(border-neutral-soft);
150
150
  background-repeat: no-repeat;
151
151
  background-size: contain;
152
152
  background-position: center;
@@ -1,7 +1,7 @@
1
1
  @mixin vd-banner(
2
2
  $primary-colour,
3
- $text-colour: vd-colour(text-action),
4
- $anchor-colour: vd-colour(text-action)
3
+ $text-colour: hs-color(fg-neutral-ondark-default),
4
+ $anchor-colour: hs-color(fg-neutral-ondark-default)
5
5
  ) {
6
6
  background-color: $primary-colour;
7
7
  color: $text-colour;
@@ -66,13 +66,13 @@
66
66
 
67
67
  .vd-banner--info,
68
68
  .vd-banner--activation {
69
- @include vd-banner(vd-colour(supplementary));
69
+ @include vd-banner(hs-color(bg-supplementary-default));
70
70
  }
71
71
  .vd-banner--negative {
72
- @include vd-banner(vd-colour(no));
72
+ @include vd-banner(hs-color(fg-no-default));
73
73
  }
74
74
  .vd-banner--success {
75
- @include vd-banner(vd-colour(success));
75
+ @include vd-banner(hs-color(fg-success-default));
76
76
  }
77
77
 
78
78
  @include vd-viewport-media-max(medium) {
@@ -1,4 +1,4 @@
1
1
  .vd-bg--upsell {
2
- background: vd-colour(background)
2
+ background: hs-color(bg-neutral-backdrop)
3
3
  url('#{$vd-images-cdn-path}backgrounds/dashboard-upsell-bg-v1.svg');
4
4
  }
@@ -21,7 +21,7 @@
21
21
  //
22
22
  @mixin vd-btn-shadow($_vd-colour-name) {
23
23
  box-shadow: 0 0 $vd-shadow-blur $vd-shadow-spread
24
- vd-rgba(vd-colour(#{$_vd-colour-name}-rgb), $vd-opacity);
24
+ vd-rgba(hs-get-action-color(#{$_vd-colour-name}-rgb, bg), $vd-opacity);
25
25
  }
26
26
 
27
27
  // Applies a box shadow with an outline in the provided primary colour.
@@ -31,9 +31,9 @@
31
31
  // @param {String} $_vd-colour-name - the button colour to use for the outline.
32
32
  //
33
33
  @mixin vd-btn-outline-shadow($_vd-colour-name) {
34
- $_vd-requested-color: vd-colour(#{$_vd-colour-name}-rgb);
34
+ $_vd-requested-color: hs-get-action-color(#{$_vd-colour-name}-rgb, bg);
35
35
 
36
- box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(vd-colour(box-rgb), 0.8),
36
+ box-shadow: 0 0 0 $vd-shadow-spread vd-rgba(hs-color(bg-neutral-top-rgb), 0.8),
37
37
  0 0 $vd-shadow-blur #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, $vd-opacity),
38
38
  0 0 0 #{$vd-shadow-spread + 1} vd-rgba($_vd-requested-color, 0.6);
39
39
  }
@@ -47,19 +47,19 @@
47
47
  @mixin vd-btn-states($_vd-colour-name, $_vd-use-default-hover: false) {
48
48
  @include vd-hover-when-supported {
49
49
  &:hover {
50
- color: vd-colour(text-action);
50
+ color: hs-color(fg-neutral-ondark-default);
51
51
  @if ($_vd-use-default-hover) {
52
- background-color: vd-colour(#{$_vd-colour-name});
52
+ background-color: hs-get-action-color($_vd-colour-name, bg);
53
53
  } @else {
54
- background-color: vd-colour(#{$_vd-colour-name}-lighter);
54
+ background-color: hs-get-action-color(#{$_vd-colour-name}-lighter, bg);
55
55
  }
56
56
  }
57
57
  }
58
58
 
59
59
  &:active,
60
60
  &.vd-btn--active {
61
- color: vd-colour(text-action);
62
- background-color: vd-colour(#{$_vd-colour-name}-darker);
61
+ color: hs-color(fg-neutral-ondark-default);
62
+ background-color: hs-get-action-color(#{$_vd-colour-name}-darker, bg);
63
63
  @include vd-btn-shadow($_vd-colour-name);
64
64
  }
65
65
 
@@ -77,8 +77,8 @@
77
77
  // @param {String} $_vd-colour-name - the button colour.
78
78
  //
79
79
  @mixin vd-btn($_vd-colour-name) {
80
- background-color: vd-colour($_vd-colour-name);
81
- color: vd-colour(text-action);
80
+ background-color: hs-get-action-color($_vd-colour-name, bg);
81
+ color: hs-color(fg-neutral-ondark-default);
82
82
 
83
83
  @include vd-btn-states($_vd-colour-name);
84
84
  }
@@ -94,7 +94,7 @@
94
94
  //
95
95
  @mixin vd-btn-text($_vd-colour-name) {
96
96
  background-color: transparent;
97
- color: vd-colour($_vd-colour-name);
97
+ color: hs-get-action-color($_vd-colour-name, fg);
98
98
 
99
99
  @include vd-btn-states($_vd-colour-name, true);
100
100
  }
@@ -112,9 +112,9 @@
112
112
 
113
113
  // Button icons with a "go" category have different colour when resting
114
114
  @if ($_vd-colour-name == go) {
115
- color: vd-colour($_vd-colour-name);
115
+ color: hs-get-action-color($_vd-colour-name, fg);
116
116
  } @else {
117
- color: vd-colour(supplementary);
117
+ color: hs-color(fg-supplementary-default);
118
118
  }
119
119
 
120
120
  @include vd-btn-states($_vd-colour-name, true);