@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
@@ -275,10 +275,10 @@ body {
275
275
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
276
276
  font-size: 15px;
277
277
  line-height: normal;
278
- color: var(--vd-colour--text);
278
+ color: var(--hs-color-fg-neutral-default);
279
279
  padding: 0;
280
280
  margin: 0;
281
- background-color: var(--vd-colour--background);
281
+ background-color: var(--hs-color-bg-neutral-backdrop);
282
282
  }
283
283
 
284
284
  a:link {
@@ -454,19 +454,19 @@ details,
454
454
  }
455
455
 
456
456
  .vd-colour-do {
457
- color: var(--vd-colour--do);
457
+ color: var(--hs-color-fg-go-default);
458
458
  }
459
459
 
460
460
  .vd-colour-go {
461
- color: var(--vd-colour--go);
461
+ color: var(--hs-color-fg-go-default);
462
462
  }
463
463
 
464
464
  .vd-colour-no {
465
- color: var(--vd-colour--no);
465
+ color: var(--hs-color-fg-no-default);
466
466
  }
467
467
 
468
468
  .vd-colour-supplementary {
469
- color: var(--vd-colour--supplementary);
469
+ color: var(--hs-color-fg-supplementary-default);
470
470
  }
471
471
 
472
472
  .vd-switch-input, .vd-radio-input, .vd-checkbox-input {
@@ -513,7 +513,7 @@ details,
513
513
 
514
514
  @keyframes vd-blink-highlight {
515
515
  20%, 70% {
516
- background-color: var(--vd-colour--go-highlight);
516
+ background-color: var(--hs-color-bg-go-highlight-default);
517
517
  }
518
518
  }
519
519
  @keyframes vd-shake {
@@ -1191,14 +1191,14 @@ details,
1191
1191
  position: relative;
1192
1192
  }
1193
1193
  .vd-select-container.vd-error .vd-select {
1194
- border-color: var(--vd-colour--no);
1194
+ border-color: var(--hs-color-fg-no-default);
1195
1195
  }
1196
1196
  .vd-select-container.vd-error .vd-select:focus {
1197
- box-shadow: 0 0 3px var(--vd-colour--no);
1197
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
1198
1198
  }
1199
1199
 
1200
1200
  .vd-select {
1201
- color: var(--vd-colour--text);
1201
+ color: var(--hs-color-fg-neutral-default);
1202
1202
  font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
1203
1203
  font-weight: 400;
1204
1204
  font-size: 15px;
@@ -1209,7 +1209,7 @@ details,
1209
1209
  box-sizing: border-box;
1210
1210
  outline: none;
1211
1211
  box-shadow: none;
1212
- background-color: var(--vd-colour--box);
1212
+ background-color: var(--hs-color-bg-neutral-top);
1213
1213
  border: 2px solid var(--hs-color-border-neutral-soft);
1214
1214
  border-radius: 4px;
1215
1215
  transition-duration: 0.2s;
@@ -1219,10 +1219,10 @@ details,
1219
1219
  background-repeat: no-repeat;
1220
1220
  background-size: 8px 20px;
1221
1221
  background-position: calc(100% - 14px) 10px;
1222
- background-image: var(--vd-colour--select-arrows-bg);
1222
+ background-image: var(--hs-color-select-arrows-bg);
1223
1223
  }
1224
1224
  .vd-select::placeholder {
1225
- color: var(--vd-colour--supplementary);
1225
+ color: var(--hs-color-bg-supplementary-default);
1226
1226
  opacity: 1;
1227
1227
  }
1228
1228
  .vd-select:placeholder-shown {
@@ -1238,14 +1238,14 @@ details,
1238
1238
  }
1239
1239
  }
1240
1240
  .vd-select:focus, .vd-select.vd-focus {
1241
- border-color: var(--vd-colour--go);
1242
- box-shadow: 0 0 3px var(--vd-colour--go);
1241
+ border-color: var(--hs-color-fg-go-default);
1242
+ box-shadow: 0 0 3px var(--hs-color-fg-go-default);
1243
1243
  }
1244
1244
  .vd-select.vd-input--error, .vd-select.vd-error, .vd-select.ng-invalid.ng-dirty, .ng-submitted .vd-select.ng-invalid {
1245
- border-color: var(--vd-colour--no);
1245
+ border-color: var(--hs-color-fg-no-default);
1246
1246
  }
1247
1247
  .vd-select.vd-input--error:focus, .vd-select.vd-input--error.vd-focus, .vd-select.vd-error:focus, .vd-select.vd-error.vd-focus, .vd-select.ng-invalid.ng-dirty:focus, .vd-select.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-select.ng-invalid:focus, .ng-submitted .vd-select.ng-invalid.vd-focus {
1248
- box-shadow: 0 0 3px var(--vd-colour--no);
1248
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
1249
1249
  }
1250
1250
 
1251
1251
  .vd-select-group {
@@ -1318,7 +1318,7 @@ details,
1318
1318
  }
1319
1319
 
1320
1320
  .vd-select-inline--placeholder {
1321
- color: var(--vd-colour--supplementary);
1321
+ color: var(--hs-color-bg-supplementary-default);
1322
1322
  }
1323
1323
 
1324
1324
  .vd-select-inline-text {
@@ -1335,7 +1335,7 @@ details,
1335
1335
 
1336
1336
  .vd-input {
1337
1337
  cursor: text;
1338
- color: var(--vd-colour--text);
1338
+ color: var(--hs-color-fg-neutral-default);
1339
1339
  font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
1340
1340
  font-weight: 400;
1341
1341
  font-size: 15px;
@@ -1346,14 +1346,14 @@ details,
1346
1346
  box-sizing: border-box;
1347
1347
  outline: none;
1348
1348
  box-shadow: none;
1349
- background-color: var(--vd-colour--box);
1349
+ background-color: var(--hs-color-bg-neutral-top);
1350
1350
  border: 2px solid var(--hs-color-border-neutral-soft);
1351
1351
  border-radius: 4px;
1352
1352
  transition-duration: 0.2s;
1353
1353
  transition-property: border-color, box-shadow;
1354
1354
  }
1355
1355
  .vd-input::placeholder {
1356
- color: var(--vd-colour--supplementary);
1356
+ color: var(--hs-color-bg-supplementary-default);
1357
1357
  opacity: 1;
1358
1358
  }
1359
1359
  .vd-input:placeholder-shown {
@@ -1369,20 +1369,20 @@ details,
1369
1369
  }
1370
1370
  }
1371
1371
  .vd-input:focus, .vd-input.vd-focus {
1372
- border-color: var(--vd-colour--go);
1373
- box-shadow: 0 0 3px var(--vd-colour--go);
1372
+ border-color: var(--hs-color-fg-go-default);
1373
+ box-shadow: 0 0 3px var(--hs-color-fg-go-default);
1374
1374
  }
1375
1375
  .vd-input.vd-input--error, .vd-input.vd-error, .vd-input.ng-invalid.ng-dirty, .ng-submitted .vd-input.ng-invalid {
1376
- border-color: var(--vd-colour--no);
1376
+ border-color: var(--hs-color-fg-no-default);
1377
1377
  }
1378
1378
  .vd-input.vd-input--error:focus, .vd-input.vd-input--error.vd-focus, .vd-input.vd-error:focus, .vd-input.vd-error.vd-focus, .vd-input.ng-invalid.ng-dirty:focus, .vd-input.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-input.ng-invalid:focus, .ng-submitted .vd-input.ng-invalid.vd-focus {
1379
- box-shadow: 0 0 3px var(--vd-colour--no);
1379
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
1380
1380
  }
1381
1381
 
1382
1382
  .vd-input-error-message-section {
1383
1383
  display: block;
1384
1384
  margin-top: 8px;
1385
- color: var(--vd-colour--no);
1385
+ color: var(--hs-color-fg-no-default);
1386
1386
  font-size: 12px;
1387
1387
  }
1388
1388
  .vd-input-error-message-section .vd-input-error-message-text {
@@ -1400,7 +1400,7 @@ details,
1400
1400
  .vd-input-icon {
1401
1401
  position: absolute;
1402
1402
  top: 14px;
1403
- color: var(--vd-colour--supplementary--text);
1403
+ color: var(--hs-color-fg-supplementary-default);
1404
1404
  pointer-events: none;
1405
1405
  }
1406
1406
 
@@ -1440,10 +1440,10 @@ details,
1440
1440
  display: flex;
1441
1441
  }
1442
1442
  .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input {
1443
- border-color: var(--vd-colour--no);
1443
+ border-color: var(--hs-color-fg-no-default);
1444
1444
  }
1445
1445
  .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input:focus, .vd-autocomplete-input-container.vd-input--error .vd-autocomplete-input.vd-focus, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input:focus, .vd-autocomplete-input-container.vd-error .vd-autocomplete-input.vd-focus, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input:focus, .vd-autocomplete-input-container.ng-invalid.ng-dirty .vd-autocomplete-input.vd-focus, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input:focus, .ng-submitted .vd-autocomplete-input-container.ng-invalid .vd-autocomplete-input.vd-focus {
1446
- box-shadow: 0 0 3px var(--vd-colour--no);
1446
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
1447
1447
  }
1448
1448
 
1449
1449
  .vd-autocomplete-input-typeahead {
@@ -1452,7 +1452,7 @@ details,
1452
1452
  padding: 11px 14px;
1453
1453
  box-sizing: border-box;
1454
1454
  outline: none;
1455
- color: var(--vd-colour--text);
1455
+ color: var(--hs-color-fg-neutral-default);
1456
1456
  font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
1457
1457
  font-weight: 400;
1458
1458
  font-size: 15px;
@@ -1461,7 +1461,7 @@ details,
1461
1461
  top: 1px;
1462
1462
  left: 1px;
1463
1463
  opacity: 1;
1464
- color: var(--vd-colour--supplementary--text);
1464
+ color: var(--hs-color-fg-supplementary-default);
1465
1465
  pointer-events: none;
1466
1466
  user-select: none;
1467
1467
  text-align: left;
@@ -1469,7 +1469,7 @@ details,
1469
1469
  white-space: nowrap;
1470
1470
  }
1471
1471
  .vd-autocomplete-input-typeahead::placeholder {
1472
- color: var(--vd-colour--supplementary);
1472
+ color: var(--hs-color-bg-supplementary-default);
1473
1473
  opacity: 1;
1474
1474
  }
1475
1475
  .vd-autocomplete-input-typeahead:placeholder-shown {
@@ -1496,10 +1496,10 @@ details,
1496
1496
  display: block;
1497
1497
  }
1498
1498
  .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi, .vd-autocomplete-filter.vd-error vd-autocomplete-multi, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi {
1499
- border-color: var(--vd-colour--no);
1499
+ border-color: var(--hs-color-fg-no-default);
1500
1500
  }
1501
1501
  .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi:focus, .vd-autocomplete-filter.vd-input--error vd-autocomplete-multi.vd-focus, .vd-autocomplete-filter.vd-error vd-autocomplete-multi:focus, .vd-autocomplete-filter.vd-error vd-autocomplete-multi.vd-focus, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi:focus, .vd-autocomplete-filter.ng-invalid.ng-dirty vd-autocomplete-multi.vd-focus, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi:focus, .ng-submitted .vd-autocomplete-filter.ng-invalid vd-autocomplete-multi.vd-focus {
1502
- box-shadow: 0 0 3px var(--vd-colour--no);
1502
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
1503
1503
  }
1504
1504
 
1505
1505
  .vd-autocomplete-filter-input-container {
@@ -1532,7 +1532,7 @@ details,
1532
1532
 
1533
1533
  .vd-autocomplete-select-placeholder {
1534
1534
  box-shadow: none;
1535
- background-color: var(--vd-colour--box);
1535
+ background-color: var(--hs-color-bg-neutral-top);
1536
1536
  border: 2px solid var(--hs-color-border-neutral-soft);
1537
1537
  border-radius: 4px;
1538
1538
  transition-duration: 0.2s;
@@ -1544,14 +1544,14 @@ details,
1544
1544
  text-transform: capitalize;
1545
1545
  }
1546
1546
  .vd-autocomplete-select-placeholder:focus, .vd-autocomplete-select-placeholder.vd-focus {
1547
- border-color: var(--vd-colour--go);
1548
- box-shadow: 0 0 3px var(--vd-colour--go);
1547
+ border-color: var(--hs-color-fg-go-default);
1548
+ box-shadow: 0 0 3px var(--hs-color-fg-go-default);
1549
1549
  }
1550
1550
  .vd-autocomplete-select-placeholder.vd-input--error, .vd-autocomplete-select-placeholder.vd-error, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid {
1551
- border-color: var(--vd-colour--no);
1551
+ border-color: var(--hs-color-fg-no-default);
1552
1552
  }
1553
1553
  .vd-autocomplete-select-placeholder.vd-input--error:focus, .vd-autocomplete-select-placeholder.vd-input--error.vd-focus, .vd-autocomplete-select-placeholder.vd-error:focus, .vd-autocomplete-select-placeholder.vd-error.vd-focus, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty:focus, .vd-autocomplete-select-placeholder.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid:focus, .ng-submitted .vd-autocomplete-select-placeholder.ng-invalid.vd-focus {
1554
- box-shadow: 0 0 3px var(--vd-colour--no);
1554
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
1555
1555
  }
1556
1556
 
1557
1557
  .vd-autocomplete-filter-icon {
@@ -1559,7 +1559,7 @@ details,
1559
1559
  z-index: 1;
1560
1560
  margin-left: 14px;
1561
1561
  margin-top: 14px;
1562
- color: var(--vd-colour--supplementary);
1562
+ color: var(--hs-color-bg-supplementary-default);
1563
1563
  }
1564
1564
 
1565
1565
  .vd-autocomplete-filter-button-label {
@@ -1571,7 +1571,7 @@ details,
1571
1571
  align-items: center;
1572
1572
  justify-content: space-between;
1573
1573
  min-height: 45px;
1574
- background-color: var(--vd-colour--framing);
1574
+ background-color: var(--hs-color-border-neutral-soft);
1575
1575
  }
1576
1576
  @media only screen and (max-width: 768px) {
1577
1577
  .vd-action-bar {
@@ -1602,7 +1602,7 @@ details,
1602
1602
  }
1603
1603
 
1604
1604
  .vd-avatar {
1605
- background-color: var(--vd-colour--framing);
1605
+ background-color: var(--hs-color-border-neutral-soft);
1606
1606
  background-repeat: no-repeat;
1607
1607
  background-size: cover;
1608
1608
  background-position: center;
@@ -1625,10 +1625,10 @@ details,
1625
1625
  .vd-avatar.vd-avatar--deleted-image {
1626
1626
  opacity: 0.35;
1627
1627
  filter: grayscale(100%);
1628
- background-color: var(--vd-colour--no);
1628
+ background-color: var(--hs-color-bg-no-default);
1629
1629
  }
1630
1630
  .vd-avatar .deleted-state-icon {
1631
- color: var(--vd-colour--box);
1631
+ color: var(--hs-color-bg-neutral-top);
1632
1632
  }
1633
1633
 
1634
1634
  .vd-avatar--initials {
@@ -1643,7 +1643,7 @@ details,
1643
1643
  font-weight: 700;
1644
1644
  word-wrap: normal;
1645
1645
  word-break: normal;
1646
- color: var(--vd-colour--text-action);
1646
+ color: var(--hs-color-fg-neutral-ondark-default);
1647
1647
  text-align: center;
1648
1648
  }
1649
1649
  .vd-avatar--initials.vd-avatar--x-small {
@@ -1701,7 +1701,7 @@ details,
1701
1701
  background-repeat: no-repeat;
1702
1702
  background-size: cover;
1703
1703
  background-position: center center;
1704
- background-color: var(--vd-colour--framing);
1704
+ background-color: var(--hs-color-border-neutral-soft);
1705
1705
  position: relative;
1706
1706
  }
1707
1707
  .vd-avatar-multi-tile[vd-lazy-load*="placeholder.svg"] {
@@ -1709,7 +1709,7 @@ details,
1709
1709
  }
1710
1710
 
1711
1711
  .vd-avatar-multi-tile--remainder {
1712
- background-color: var(--vd-colour--keyline);
1712
+ background-color: var(--hs-color-border-neutral-strong);
1713
1713
  }
1714
1714
 
1715
1715
  .vd-avatar-multi-count {
@@ -1744,7 +1744,7 @@ details,
1744
1744
  }
1745
1745
  .vd-avatar-multi-tile {
1746
1746
  flex: 1 1 50%;
1747
- border: 2px solid var(--vd-colour--box);
1747
+ border: 2px solid var(--hs-color-bg-neutral-top);
1748
1748
  border-radius: 5px;
1749
1749
  }
1750
1750
  }
@@ -1815,8 +1815,8 @@ details,
1815
1815
 
1816
1816
  .vd-banner--info,
1817
1817
  .vd-banner--activation {
1818
- background-color: var(--vd-colour--supplementary);
1819
- color: var(--vd-colour--text-action);
1818
+ background-color: var(--hs-color-bg-supplementary-default);
1819
+ color: var(--hs-color-fg-neutral-ondark-default);
1820
1820
  border: none;
1821
1821
  border-left: none;
1822
1822
  border-right: none;
@@ -1831,13 +1831,13 @@ details,
1831
1831
  .vd-banner--activation .vd-link:visited,
1832
1832
  .vd-banner--activation .vd-btn--link,
1833
1833
  .vd-banner--activation .vd-btn--link:hover {
1834
- color: var(--vd-colour--text-action);
1834
+ color: var(--hs-color-fg-neutral-ondark-default);
1835
1835
  text-decoration: underline;
1836
1836
  }
1837
1837
 
1838
1838
  .vd-banner--negative {
1839
- background-color: var(--vd-colour--no);
1840
- color: var(--vd-colour--text-action);
1839
+ background-color: var(--hs-color-fg-no-default);
1840
+ color: var(--hs-color-fg-neutral-ondark-default);
1841
1841
  border: none;
1842
1842
  border-left: none;
1843
1843
  border-right: none;
@@ -1847,13 +1847,13 @@ details,
1847
1847
  .vd-banner--negative .vd-link:visited,
1848
1848
  .vd-banner--negative .vd-btn--link,
1849
1849
  .vd-banner--negative .vd-btn--link:hover {
1850
- color: var(--vd-colour--text-action);
1850
+ color: var(--hs-color-fg-neutral-ondark-default);
1851
1851
  text-decoration: underline;
1852
1852
  }
1853
1853
 
1854
1854
  .vd-banner--success {
1855
- background-color: var(--vd-colour--success);
1856
- color: var(--vd-colour--text-action);
1855
+ background-color: var(--hs-color-fg-success-default);
1856
+ color: var(--hs-color-fg-neutral-ondark-default);
1857
1857
  border: none;
1858
1858
  border-left: none;
1859
1859
  border-right: none;
@@ -1863,7 +1863,7 @@ details,
1863
1863
  .vd-banner--success .vd-link:visited,
1864
1864
  .vd-banner--success .vd-btn--link,
1865
1865
  .vd-banner--success .vd-btn--link:hover {
1866
- color: var(--vd-colour--text-action);
1866
+ color: var(--hs-color-fg-neutral-ondark-default);
1867
1867
  text-decoration: underline;
1868
1868
  }
1869
1869
 
@@ -1883,7 +1883,7 @@ details,
1883
1883
  }
1884
1884
 
1885
1885
  .vd-bg--upsell {
1886
- background: var(--vd-colour--background) url("//vendfrontendassets.freetls.fastly.net/images/backgrounds/dashboard-upsell-bg-v1.svg");
1886
+ background: var(--hs-color-bg-neutral-backdrop) url("//vendfrontendassets.freetls.fastly.net/images/backgrounds/dashboard-upsell-bg-v1.svg");
1887
1887
  }
1888
1888
 
1889
1889
  .vd-body {
@@ -1938,235 +1938,235 @@ a.vd-btn.disabled {
1938
1938
  }
1939
1939
 
1940
1940
  .vd-btn--do {
1941
- background-color: var(--vd-colour--do);
1942
- color: var(--vd-colour--text-action);
1941
+ background-color: var(--hs-color-bg-go-default);
1942
+ color: var(--hs-color-fg-neutral-ondark-default);
1943
1943
  }
1944
1944
  @media (hover: hover) {
1945
1945
  .vd-btn--do:hover {
1946
- color: var(--vd-colour--text-action);
1947
- background-color: var(--vd-colour--do-lighter);
1946
+ color: var(--hs-color-fg-neutral-ondark-default);
1947
+ background-color: var(--hs-color-bg-go-soft);
1948
1948
  }
1949
1949
  }
1950
1950
  .vd-btn--do:active, .vd-btn--do.vd-btn--active {
1951
- color: var(--vd-colour--text-action);
1952
- background-color: var(--vd-colour--do-darker);
1953
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--do-rgb), 0.35);
1951
+ color: var(--hs-color-fg-neutral-ondark-default);
1952
+ background-color: var(--hs-color-bg-go-strong);
1953
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1954
1954
  }
1955
1955
  .vd-btn--do:focus {
1956
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--do-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--do-rgb), 0.6);
1956
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1957
1957
  }
1958
1958
 
1959
1959
  .vd-btn--icon-do {
1960
1960
  background-color: transparent;
1961
1961
  padding: 12px 14px;
1962
- color: var(--vd-colour--supplementary);
1962
+ color: var(--hs-color-fg-supplementary-default);
1963
1963
  }
1964
1964
  @media (hover: hover) {
1965
1965
  .vd-btn--icon-do:hover {
1966
- color: var(--vd-colour--text-action);
1967
- background-color: var(--vd-colour--do);
1966
+ color: var(--hs-color-fg-neutral-ondark-default);
1967
+ background-color: var(--hs-color-bg-go-default);
1968
1968
  }
1969
1969
  }
1970
1970
  .vd-btn--icon-do:active, .vd-btn--icon-do.vd-btn--active {
1971
- color: var(--vd-colour--text-action);
1972
- background-color: var(--vd-colour--do-darker);
1973
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--do-rgb), 0.35);
1971
+ color: var(--hs-color-fg-neutral-ondark-default);
1972
+ background-color: var(--hs-color-bg-go-strong);
1973
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1974
1974
  }
1975
1975
  .vd-btn--icon-do:focus {
1976
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--do-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--do-rgb), 0.6);
1976
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1977
1977
  }
1978
1978
 
1979
1979
  .vd-btn--text-do {
1980
1980
  background-color: transparent;
1981
- color: var(--vd-colour--do);
1981
+ color: var(--hs-color-fg-go-default);
1982
1982
  }
1983
1983
  @media (hover: hover) {
1984
1984
  .vd-btn--text-do:hover {
1985
- color: var(--vd-colour--text-action);
1986
- background-color: var(--vd-colour--do);
1985
+ color: var(--hs-color-fg-neutral-ondark-default);
1986
+ background-color: var(--hs-color-bg-go-default);
1987
1987
  }
1988
1988
  }
1989
1989
  .vd-btn--text-do:active, .vd-btn--text-do.vd-btn--active {
1990
- color: var(--vd-colour--text-action);
1991
- background-color: var(--vd-colour--do-darker);
1992
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--do-rgb), 0.35);
1990
+ color: var(--hs-color-fg-neutral-ondark-default);
1991
+ background-color: var(--hs-color-bg-go-strong);
1992
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
1993
1993
  }
1994
1994
  .vd-btn--text-do:focus {
1995
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--do-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--do-rgb), 0.6);
1995
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
1996
1996
  }
1997
1997
 
1998
1998
  .vd-btn--supplementary {
1999
- background-color: var(--vd-colour--supplementary);
2000
- color: var(--vd-colour--text-action);
1999
+ background-color: var(--hs-color-bg-supplementary-default);
2000
+ color: var(--hs-color-fg-neutral-ondark-default);
2001
2001
  }
2002
2002
  @media (hover: hover) {
2003
2003
  .vd-btn--supplementary:hover {
2004
- color: var(--vd-colour--text-action);
2005
- background-color: var(--vd-colour--supplementary-lighter);
2004
+ color: var(--hs-color-fg-neutral-ondark-default);
2005
+ background-color: var(--hs-color-bg-supplementary-soft);
2006
2006
  }
2007
2007
  }
2008
2008
  .vd-btn--supplementary:active, .vd-btn--supplementary.vd-btn--active {
2009
- color: var(--vd-colour--text-action);
2010
- background-color: var(--vd-colour--supplementary-darker);
2011
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--supplementary-rgb), 0.35);
2009
+ color: var(--hs-color-fg-neutral-ondark-default);
2010
+ background-color: var(--hs-color-bg-supplementary-strong);
2011
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2012
2012
  }
2013
2013
  .vd-btn--supplementary:focus {
2014
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--supplementary-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--supplementary-rgb), 0.6);
2014
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2015
2015
  }
2016
2016
 
2017
2017
  .vd-btn--icon-supplementary {
2018
2018
  background-color: transparent;
2019
2019
  padding: 12px 14px;
2020
- color: var(--vd-colour--supplementary);
2020
+ color: var(--hs-color-fg-supplementary-default);
2021
2021
  }
2022
2022
  @media (hover: hover) {
2023
2023
  .vd-btn--icon-supplementary:hover {
2024
- color: var(--vd-colour--text-action);
2025
- background-color: var(--vd-colour--supplementary);
2024
+ color: var(--hs-color-fg-neutral-ondark-default);
2025
+ background-color: var(--hs-color-bg-supplementary-default);
2026
2026
  }
2027
2027
  }
2028
2028
  .vd-btn--icon-supplementary:active, .vd-btn--icon-supplementary.vd-btn--active {
2029
- color: var(--vd-colour--text-action);
2030
- background-color: var(--vd-colour--supplementary-darker);
2031
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--supplementary-rgb), 0.35);
2029
+ color: var(--hs-color-fg-neutral-ondark-default);
2030
+ background-color: var(--hs-color-bg-supplementary-strong);
2031
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2032
2032
  }
2033
2033
  .vd-btn--icon-supplementary:focus {
2034
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--supplementary-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--supplementary-rgb), 0.6);
2034
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2035
2035
  }
2036
2036
 
2037
2037
  .vd-btn--text-supplementary {
2038
2038
  background-color: transparent;
2039
- color: var(--vd-colour--supplementary);
2039
+ color: var(--hs-color-fg-supplementary-default);
2040
2040
  }
2041
2041
  @media (hover: hover) {
2042
2042
  .vd-btn--text-supplementary:hover {
2043
- color: var(--vd-colour--text-action);
2044
- background-color: var(--vd-colour--supplementary);
2043
+ color: var(--hs-color-fg-neutral-ondark-default);
2044
+ background-color: var(--hs-color-bg-supplementary-default);
2045
2045
  }
2046
2046
  }
2047
2047
  .vd-btn--text-supplementary:active, .vd-btn--text-supplementary.vd-btn--active {
2048
- color: var(--vd-colour--text-action);
2049
- background-color: var(--vd-colour--supplementary-darker);
2050
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--supplementary-rgb), 0.35);
2048
+ color: var(--hs-color-fg-neutral-ondark-default);
2049
+ background-color: var(--hs-color-bg-supplementary-strong);
2050
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35);
2051
2051
  }
2052
2052
  .vd-btn--text-supplementary:focus {
2053
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--supplementary-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--supplementary-rgb), 0.6);
2053
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-supplementary-default-rgb), 0.6);
2054
2054
  }
2055
2055
 
2056
2056
  .vd-btn--no {
2057
- background-color: var(--vd-colour--no);
2058
- color: var(--vd-colour--text-action);
2057
+ background-color: var(--hs-color-bg-no-default);
2058
+ color: var(--hs-color-fg-neutral-ondark-default);
2059
2059
  }
2060
2060
  @media (hover: hover) {
2061
2061
  .vd-btn--no:hover {
2062
- color: var(--vd-colour--text-action);
2063
- background-color: var(--vd-colour--no-lighter);
2062
+ color: var(--hs-color-fg-neutral-ondark-default);
2063
+ background-color: var(--hs-color-bg-no-soft);
2064
2064
  }
2065
2065
  }
2066
2066
  .vd-btn--no:active, .vd-btn--no.vd-btn--active {
2067
- color: var(--vd-colour--text-action);
2068
- background-color: var(--vd-colour--no-darker);
2069
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--no-rgb), 0.35);
2067
+ color: var(--hs-color-fg-neutral-ondark-default);
2068
+ background-color: var(--hs-color-bg-no-strong);
2069
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2070
2070
  }
2071
2071
  .vd-btn--no:focus {
2072
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--no-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--no-rgb), 0.6);
2072
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2073
2073
  }
2074
2074
 
2075
2075
  .vd-btn--icon-no {
2076
2076
  background-color: transparent;
2077
2077
  padding: 12px 14px;
2078
- color: var(--vd-colour--supplementary);
2078
+ color: var(--hs-color-fg-supplementary-default);
2079
2079
  }
2080
2080
  @media (hover: hover) {
2081
2081
  .vd-btn--icon-no:hover {
2082
- color: var(--vd-colour--text-action);
2083
- background-color: var(--vd-colour--no);
2082
+ color: var(--hs-color-fg-neutral-ondark-default);
2083
+ background-color: var(--hs-color-bg-no-default);
2084
2084
  }
2085
2085
  }
2086
2086
  .vd-btn--icon-no:active, .vd-btn--icon-no.vd-btn--active {
2087
- color: var(--vd-colour--text-action);
2088
- background-color: var(--vd-colour--no-darker);
2089
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--no-rgb), 0.35);
2087
+ color: var(--hs-color-fg-neutral-ondark-default);
2088
+ background-color: var(--hs-color-bg-no-strong);
2089
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2090
2090
  }
2091
2091
  .vd-btn--icon-no:focus {
2092
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--no-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--no-rgb), 0.6);
2092
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2093
2093
  }
2094
2094
 
2095
2095
  .vd-btn--text-no {
2096
2096
  background-color: transparent;
2097
- color: var(--vd-colour--no);
2097
+ color: var(--hs-color-fg-no-default);
2098
2098
  }
2099
2099
  @media (hover: hover) {
2100
2100
  .vd-btn--text-no:hover {
2101
- color: var(--vd-colour--text-action);
2102
- background-color: var(--vd-colour--no);
2101
+ color: var(--hs-color-fg-neutral-ondark-default);
2102
+ background-color: var(--hs-color-bg-no-default);
2103
2103
  }
2104
2104
  }
2105
2105
  .vd-btn--text-no:active, .vd-btn--text-no.vd-btn--active {
2106
- color: var(--vd-colour--text-action);
2107
- background-color: var(--vd-colour--no-darker);
2108
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--no-rgb), 0.35);
2106
+ color: var(--hs-color-fg-neutral-ondark-default);
2107
+ background-color: var(--hs-color-bg-no-strong);
2108
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-no-default-rgb), 0.35);
2109
2109
  }
2110
2110
  .vd-btn--text-no:focus {
2111
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--no-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--no-rgb), 0.6);
2111
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-no-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-no-default-rgb), 0.6);
2112
2112
  }
2113
2113
 
2114
2114
  .vd-btn--go {
2115
- background-color: var(--vd-colour--go);
2116
- color: var(--vd-colour--text-action);
2115
+ background-color: var(--hs-color-bg-go-default);
2116
+ color: var(--hs-color-fg-neutral-ondark-default);
2117
2117
  }
2118
2118
  @media (hover: hover) {
2119
2119
  .vd-btn--go:hover {
2120
- color: var(--vd-colour--text-action);
2121
- background-color: var(--vd-colour--go-lighter);
2120
+ color: var(--hs-color-fg-neutral-ondark-default);
2121
+ background-color: var(--hs-color-bg-go-soft);
2122
2122
  }
2123
2123
  }
2124
2124
  .vd-btn--go:active, .vd-btn--go.vd-btn--active {
2125
- color: var(--vd-colour--text-action);
2126
- background-color: var(--vd-colour--go-darker);
2127
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
2125
+ color: var(--hs-color-fg-neutral-ondark-default);
2126
+ background-color: var(--hs-color-bg-go-strong);
2127
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2128
2128
  }
2129
2129
  .vd-btn--go:focus {
2130
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--go-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--go-rgb), 0.6);
2130
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2131
2131
  }
2132
2132
 
2133
2133
  .vd-btn--icon-go {
2134
2134
  background-color: transparent;
2135
2135
  padding: 12px 14px;
2136
- color: var(--vd-colour--go);
2136
+ color: var(--hs-color-fg-go-default);
2137
2137
  }
2138
2138
  @media (hover: hover) {
2139
2139
  .vd-btn--icon-go:hover {
2140
- color: var(--vd-colour--text-action);
2141
- background-color: var(--vd-colour--go);
2140
+ color: var(--hs-color-fg-neutral-ondark-default);
2141
+ background-color: var(--hs-color-bg-go-default);
2142
2142
  }
2143
2143
  }
2144
2144
  .vd-btn--icon-go:active, .vd-btn--icon-go.vd-btn--active {
2145
- color: var(--vd-colour--text-action);
2146
- background-color: var(--vd-colour--go-darker);
2147
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
2145
+ color: var(--hs-color-fg-neutral-ondark-default);
2146
+ background-color: var(--hs-color-bg-go-strong);
2147
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2148
2148
  }
2149
2149
  .vd-btn--icon-go:focus {
2150
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--go-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--go-rgb), 0.6);
2150
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2151
2151
  }
2152
2152
 
2153
2153
  .vd-btn--text-go {
2154
2154
  background-color: transparent;
2155
- color: var(--vd-colour--go);
2155
+ color: var(--hs-color-fg-go-default);
2156
2156
  }
2157
2157
  @media (hover: hover) {
2158
2158
  .vd-btn--text-go:hover {
2159
- color: var(--vd-colour--text-action);
2160
- background-color: var(--vd-colour--go);
2159
+ color: var(--hs-color-fg-neutral-ondark-default);
2160
+ background-color: var(--hs-color-bg-go-default);
2161
2161
  }
2162
2162
  }
2163
2163
  .vd-btn--text-go:active, .vd-btn--text-go.vd-btn--active {
2164
- color: var(--vd-colour--text-action);
2165
- background-color: var(--vd-colour--go-darker);
2166
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
2164
+ color: var(--hs-color-fg-neutral-ondark-default);
2165
+ background-color: var(--hs-color-bg-go-strong);
2166
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2167
2167
  }
2168
2168
  .vd-btn--text-go:focus {
2169
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--go-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--go-rgb), 0.6);
2169
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2170
2170
  }
2171
2171
 
2172
2172
  .vd-btn--link {
@@ -2181,7 +2181,7 @@ a.vd-btn.disabled {
2181
2181
  text-decoration: underline;
2182
2182
  }
2183
2183
  .vd-btn--link:hover, .vd-btn--link:focus {
2184
- color: var(--vd-colour--go);
2184
+ color: var(--hs-color-fg-go-default);
2185
2185
  }
2186
2186
 
2187
2187
  .vd-btn--jumbo {
@@ -2223,11 +2223,11 @@ a.vd-btn.disabled {
2223
2223
  line-height: 1.3333333333;
2224
2224
  font-weight: 700;
2225
2225
  align-items: center;
2226
- background-color: var(--vd-colour--box);
2226
+ background-color: var(--hs-color-bg-neutral-top);
2227
2227
  border-radius: 4px;
2228
2228
  border: 2px solid var(--hs-color-border-neutral-soft);
2229
2229
  box-sizing: border-box;
2230
- color: var(--vd-colour--text);
2230
+ color: var(--hs-color-fg-neutral-default);
2231
2231
  cursor: pointer;
2232
2232
  display: flex;
2233
2233
  flex-direction: column;
@@ -2250,26 +2250,26 @@ a.vd-btn.disabled {
2250
2250
  filter: grayscale(100%);
2251
2251
  }
2252
2252
  .vd-btn-panel:focus {
2253
- border-color: var(--vd-colour--go);
2254
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
2253
+ border-color: var(--hs-color-fg-go-default);
2254
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2255
2255
  }
2256
2256
  .vd-btn-panel:hover {
2257
- border-color: var(--vd-colour--go-lighter);
2258
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--go-rgb), 0.35);
2257
+ border-color: var(--hs-color-bg-go-soft);
2258
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2259
2259
  }
2260
2260
  .vd-btn-panel:active {
2261
- background-color: rgba(var(--vd-colour--box-rgb), 0.2);
2261
+ background-color: rgba(var(--hs-color-bg-neutral-top), 0.2);
2262
2262
  }
2263
2263
 
2264
2264
  .vd-btn-panel--selected {
2265
- border-color: var(--vd-colour--do);
2265
+ border-color: var(--hs-color-fg-go-default);
2266
2266
  }
2267
2267
  .vd-btn-panel--selected:focus, .vd-btn-panel--selected:hover {
2268
- border-color: var(--vd-colour--do-lighter);
2269
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--do-rgb), 0.35);
2268
+ border-color: var(--hs-color-bg-go-soft);
2269
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
2270
2270
  }
2271
2271
  .vd-btn-panel--selected:active {
2272
- border-color: var(--vd-colour--do-darker);
2272
+ border-color: var(--hs-color-bg-go-strong);
2273
2273
  }
2274
2274
 
2275
2275
  .vd-btn-panel-group {
@@ -2299,7 +2299,7 @@ a.vd-btn.disabled {
2299
2299
 
2300
2300
  .vd-card {
2301
2301
  border: 2px solid var(--hs-color-border-neutral-soft);
2302
- background-color: var(--vd-colour--box);
2302
+ background-color: var(--hs-color-bg-neutral-top);
2303
2303
  border-radius: 5px;
2304
2304
  }
2305
2305
  .vd-card.vd-card--active {
@@ -2313,7 +2313,7 @@ a.vd-btn.disabled {
2313
2313
  right: 1em;
2314
2314
  content: "";
2315
2315
  bottom: 0;
2316
- box-shadow: 0 0.1em 4em 0 var(--vd-colour--shadow);
2316
+ box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-dark-default);
2317
2317
  }
2318
2318
 
2319
2319
  vd-carousel {
@@ -2397,7 +2397,7 @@ vd-carousel-frame {
2397
2397
  display: flex;
2398
2398
  flex-direction: row;
2399
2399
  justify-content: space-between;
2400
- background-color: var(--vd-colour--box);
2400
+ background-color: var(--hs-color-bg-neutral-top);
2401
2401
  height: 72px;
2402
2402
  }
2403
2403
 
@@ -2425,11 +2425,11 @@ vd-carousel-frame {
2425
2425
  width: 8px;
2426
2426
  height: 8px;
2427
2427
  border-radius: 50%;
2428
- background-color: var(--vd-colour--keyline);
2428
+ background-color: var(--hs-color-border-neutral-strong);
2429
2429
  }
2430
2430
 
2431
2431
  .vd-carousel-paginator-indicator--active::before {
2432
- background-color: var(--vd-colour--do);
2432
+ background-color: var(--hs-color-bg-go-default);
2433
2433
  }
2434
2434
 
2435
2435
  @keyframes vd-checkbox-checked {
@@ -2515,7 +2515,7 @@ vd-carousel-frame {
2515
2515
  position: relative;
2516
2516
  height: 24px;
2517
2517
  width: 24px;
2518
- background-color: var(--vd-colour--box);
2518
+ background-color: var(--hs-color-bg-neutral-top);
2519
2519
  border: 1px solid var(--hs-color-border-neutral-soft);
2520
2520
  border-radius: 4px;
2521
2521
  box-sizing: border-box;
@@ -2527,7 +2527,7 @@ vd-carousel-frame {
2527
2527
  position: absolute;
2528
2528
  border-right: 4px solid var(--hs-color-border-neutral-soft);
2529
2529
  border-top: 4px solid var(--hs-color-border-neutral-soft);
2530
- border-color: var(--vd-colour--framing);
2530
+ border-color: var(--hs-color-border-neutral-soft);
2531
2531
  transform: scaleX(-1) rotate(135deg);
2532
2532
  transform-origin: left top;
2533
2533
  height: 11px;
@@ -2543,18 +2543,18 @@ vd-carousel-frame {
2543
2543
  }
2544
2544
 
2545
2545
  .vd-checkbox-input:focus-visible + .vd-checkbox-tick {
2546
- box-shadow: 0 0 0 2px rgba(var(--vd-colour--box-rgb), 0.8), 0 0 3px 3px rgba(var(--vd-colour--do-rgb), 0.35), 0 0 0 3px rgba(var(--vd-colour--do-rgb), 0.6);
2546
+ box-shadow: 0 0 0 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.8), 0 0 3px 3px rgba(var(--hs-color-bg-go-default-rgb), 0.35), 0 0 0 3px rgba(var(--hs-color-bg-go-default-rgb), 0.6);
2547
2547
  }
2548
2548
 
2549
2549
  .vd-checkbox-input:checked + .vd-checkbox-tick {
2550
2550
  transition: background-color 0.8s;
2551
- background-color: var(--vd-colour--do);
2552
- border-color: var(--vd-colour--do);
2551
+ background-color: var(--hs-color-bg-go-default);
2552
+ border-color: var(--hs-color-fg-go-default);
2553
2553
  }
2554
2554
  .vd-checkbox-input:checked + .vd-checkbox-tick:after {
2555
2555
  opacity: 1;
2556
2556
  animation: vd-checkbox-checked 0.8s;
2557
- border-color: var(--vd-colour--text-action);
2557
+ border-color: var(--hs-color-fg-neutral-ondark-default);
2558
2558
  box-sizing: content-box;
2559
2559
  backface-visibility: hidden;
2560
2560
  }
@@ -2579,11 +2579,11 @@ vd-carousel-frame {
2579
2579
  }
2580
2580
 
2581
2581
  .vd-checkbox--mixed .vd-checkbox-tick {
2582
- border: 2px solid var(--vd-colour--do);
2582
+ border: 2px solid var(--hs-color-fg-go-default);
2583
2583
  }
2584
2584
 
2585
2585
  .vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
2586
- background-color: var(--vd-colour--do);
2586
+ background-color: var(--hs-color-bg-go-default);
2587
2587
  border: none;
2588
2588
  top: 9px;
2589
2589
  left: 6px;
@@ -2697,7 +2697,7 @@ vd-carousel-frame {
2697
2697
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
2698
2698
  font-size: 15px;
2699
2699
  line-height: normal;
2700
- color: var(--vd-colour--text);
2700
+ color: var(--hs-color-fg-neutral-default);
2701
2701
  font-size: 15px;
2702
2702
  }
2703
2703
  .vd-datepicker table,
@@ -2757,7 +2757,7 @@ vd-carousel-frame {
2757
2757
  .vd-datepicker .pika-table abbr,
2758
2758
  .vd-datepicker-range .pika-table abbr {
2759
2759
  font-weight: 700;
2760
- color: var(--vd-colour--text);
2760
+ color: var(--hs-color-fg-neutral-default);
2761
2761
  }
2762
2762
  .vd-datepicker .pika-title,
2763
2763
  .vd-datepicker-range .pika-title {
@@ -2780,7 +2780,7 @@ vd-carousel-frame {
2780
2780
  border-left: 4px solid transparent;
2781
2781
  border-right: 4px solid transparent;
2782
2782
  z-index: 100;
2783
- border-bottom: 5px solid var(--vd-colour--text);
2783
+ border-bottom: 5px solid var(--hs-color-fg-neutral-default);
2784
2784
  right: 37px;
2785
2785
  }
2786
2786
  .vd-datepicker .pika-title .pika-label:nth-child(even):after,
@@ -2794,7 +2794,7 @@ vd-carousel-frame {
2794
2794
  border-left: 4px solid transparent;
2795
2795
  border-right: 4px solid transparent;
2796
2796
  z-index: 100;
2797
- border-top: 5px solid var(--vd-colour--text);
2797
+ border-top: 5px solid var(--hs-color-fg-neutral-default);
2798
2798
  top: 10px;
2799
2799
  right: 37px;
2800
2800
  }
@@ -2809,7 +2809,7 @@ vd-carousel-frame {
2809
2809
  border-left: 4px solid transparent;
2810
2810
  border-right: 4px solid transparent;
2811
2811
  z-index: 100;
2812
- border-bottom: 5px solid var(--vd-colour--text);
2812
+ border-bottom: 5px solid var(--hs-color-fg-neutral-default);
2813
2813
  right: 110px;
2814
2814
  }
2815
2815
  .vd-datepicker .pika-title .pika-label:nth-child(odd):after,
@@ -2823,13 +2823,13 @@ vd-carousel-frame {
2823
2823
  border-left: 4px solid transparent;
2824
2824
  border-right: 4px solid transparent;
2825
2825
  z-index: 100;
2826
- border-top: 5px solid var(--vd-colour--text);
2826
+ border-top: 5px solid var(--hs-color-fg-neutral-default);
2827
2827
  top: 10px;
2828
2828
  right: 110px;
2829
2829
  }
2830
2830
  .vd-datepicker .pika-title .pika-select,
2831
2831
  .vd-datepicker-range .pika-title .pika-select {
2832
- color: var(--vd-colour--text);
2832
+ color: var(--hs-color-fg-neutral-default);
2833
2833
  font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
2834
2834
  font-weight: 400;
2835
2835
  font-size: 15px;
@@ -2840,7 +2840,7 @@ vd-carousel-frame {
2840
2840
  box-sizing: border-box;
2841
2841
  outline: none;
2842
2842
  box-shadow: none;
2843
- background-color: var(--vd-colour--box);
2843
+ background-color: var(--hs-color-bg-neutral-top);
2844
2844
  border: 2px solid var(--hs-color-border-neutral-soft);
2845
2845
  border-radius: 4px;
2846
2846
  transition-duration: 0.2s;
@@ -2852,7 +2852,7 @@ vd-carousel-frame {
2852
2852
  }
2853
2853
  .vd-datepicker .pika-title .pika-select::placeholder,
2854
2854
  .vd-datepicker-range .pika-title .pika-select::placeholder {
2855
- color: var(--vd-colour--supplementary);
2855
+ color: var(--hs-color-bg-supplementary-default);
2856
2856
  opacity: 1;
2857
2857
  }
2858
2858
  .vd-datepicker .pika-title .pika-select:placeholder-shown,
@@ -2873,15 +2873,15 @@ vd-carousel-frame {
2873
2873
  .vd-datepicker .pika-title .pika-select:focus, .vd-datepicker .pika-title .pika-select.vd-focus,
2874
2874
  .vd-datepicker-range .pika-title .pika-select:focus,
2875
2875
  .vd-datepicker-range .pika-title .pika-select.vd-focus {
2876
- border-color: var(--vd-colour--go);
2877
- box-shadow: 0 0 3px var(--vd-colour--go);
2876
+ border-color: var(--hs-color-fg-go-default);
2877
+ box-shadow: 0 0 3px var(--hs-color-fg-go-default);
2878
2878
  }
2879
2879
  .vd-datepicker .pika-title .pika-select.vd-input--error, .vd-datepicker .pika-title .pika-select.vd-error, .vd-datepicker .pika-title .pika-select.ng-invalid.ng-dirty, .ng-submitted .vd-datepicker .pika-title .pika-select.ng-invalid,
2880
2880
  .vd-datepicker-range .pika-title .pika-select.vd-input--error,
2881
2881
  .vd-datepicker-range .pika-title .pika-select.vd-error,
2882
2882
  .vd-datepicker-range .pika-title .pika-select.ng-invalid.ng-dirty,
2883
2883
  .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid {
2884
- border-color: var(--vd-colour--no);
2884
+ border-color: var(--hs-color-fg-no-default);
2885
2885
  }
2886
2886
  .vd-datepicker .pika-title .pika-select.vd-input--error:focus, .vd-datepicker .pika-title .pika-select.vd-input--error.vd-focus, .vd-datepicker .pika-title .pika-select.vd-error:focus, .vd-datepicker .pika-title .pika-select.vd-error.vd-focus, .vd-datepicker .pika-title .pika-select.ng-invalid.ng-dirty:focus, .vd-datepicker .pika-title .pika-select.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-datepicker .pika-title .pika-select.ng-invalid:focus, .ng-submitted .vd-datepicker .pika-title .pika-select.ng-invalid.vd-focus,
2887
2887
  .vd-datepicker-range .pika-title .pika-select.vd-input--error:focus,
@@ -2892,13 +2892,13 @@ vd-carousel-frame {
2892
2892
  .vd-datepicker-range .pika-title .pika-select.ng-invalid.ng-dirty.vd-focus,
2893
2893
  .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid:focus,
2894
2894
  .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid.vd-focus {
2895
- box-shadow: 0 0 3px var(--vd-colour--no);
2895
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
2896
2896
  }
2897
2897
  .vd-datepicker .pika-title .pika-select-month,
2898
2898
  .vd-datepicker-range .pika-title .pika-select-month {
2899
2899
  top: -15px;
2900
2900
  position: absolute;
2901
- background: var(--vd-colour--box);
2901
+ background: var(--hs-color-bg-neutral-top);
2902
2902
  width: 110px;
2903
2903
  left: 29px;
2904
2904
  }
@@ -2906,7 +2906,7 @@ vd-carousel-frame {
2906
2906
  .vd-datepicker-range .pika-title .pika-select-year {
2907
2907
  top: -15px;
2908
2908
  position: absolute;
2909
- background: var(--vd-colour--box);
2909
+ background: var(--hs-color-bg-neutral-top);
2910
2910
  width: 72px;
2911
2911
  right: 29px;
2912
2912
  }
@@ -2931,15 +2931,15 @@ vd-carousel-frame {
2931
2931
  position: absolute;
2932
2932
  width: 7px;
2933
2933
  height: 7px;
2934
- border-right: 3px solid var(--vd-colour--text);
2935
- border-top: 3px solid var(--vd-colour--text);
2934
+ border-right: 3px solid var(--hs-color-fg-neutral-default);
2935
+ border-top: 3px solid var(--hs-color-fg-neutral-default);
2936
2936
  box-sizing: initial;
2937
2937
  transform: rotate(225deg);
2938
2938
  }
2939
2939
  .vd-datepicker .pika-title .pika-prev.is-disabled:before,
2940
2940
  .vd-datepicker-range .pika-title .pika-prev.is-disabled:before {
2941
- border-right: 3px solid var(--vd-colour--framing);
2942
- border-top: 3px solid var(--vd-colour--framing);
2941
+ border-right: 3px solid var(--hs-color-border-neutral-soft);
2942
+ border-top: 3px solid var(--hs-color-border-neutral-soft);
2943
2943
  }
2944
2944
  .vd-datepicker .pika-title .pika-next,
2945
2945
  .vd-datepicker-range .pika-title .pika-next {
@@ -2955,15 +2955,15 @@ vd-carousel-frame {
2955
2955
  position: absolute;
2956
2956
  width: 7px;
2957
2957
  height: 7px;
2958
- border-right: 3px solid var(--vd-colour--text);
2959
- border-top: 3px solid var(--vd-colour--text);
2958
+ border-right: 3px solid var(--hs-color-fg-neutral-default);
2959
+ border-top: 3px solid var(--hs-color-fg-neutral-default);
2960
2960
  box-sizing: initial;
2961
2961
  transform: rotate(45deg);
2962
2962
  }
2963
2963
  .vd-datepicker .pika-title .pika-next.is-disabled:before,
2964
2964
  .vd-datepicker-range .pika-title .pika-next.is-disabled:before {
2965
- border-right: 3px solid var(--vd-colour--framing);
2966
- border-top: 3px solid var(--vd-colour--framing);
2965
+ border-right: 3px solid var(--hs-color-border-neutral-soft);
2966
+ border-top: 3px solid var(--hs-color-border-neutral-soft);
2967
2967
  }
2968
2968
  .vd-datepicker .is-disabled,
2969
2969
  .vd-datepicker-range .is-disabled {
@@ -2971,11 +2971,11 @@ vd-carousel-frame {
2971
2971
  }
2972
2972
  .vd-datepicker .is-inrange,
2973
2973
  .vd-datepicker-range .is-inrange {
2974
- background-color: var(--vd-colour--do-highlight);
2974
+ background-color: var(--hs-color-bg-go-highlight-default);
2975
2975
  }
2976
2976
  .vd-datepicker .is-inrange .pika-button,
2977
2977
  .vd-datepicker-range .is-inrange .pika-button {
2978
- background-color: var(--vd-colour--do-highlight);
2978
+ background-color: var(--hs-color-bg-go-highlight-default);
2979
2979
  border-radius: 0;
2980
2980
  }
2981
2981
  .vd-datepicker .is-inrange .pika-button:hover,
@@ -2984,11 +2984,11 @@ vd-carousel-frame {
2984
2984
  }
2985
2985
  .vd-datepicker .is-startrange,
2986
2986
  .vd-datepicker-range .is-startrange {
2987
- background-image: linear-gradient(to right, transparent 50%, var(--vd-colour--do-highlight) 50%);
2987
+ background-image: linear-gradient(to right, transparent 50%, var(--hs-color-bg-go-highlight-default) 50%);
2988
2988
  }
2989
2989
  .vd-datepicker .is-endrange,
2990
2990
  .vd-datepicker-range .is-endrange {
2991
- background-image: linear-gradient(to right, var(--vd-colour--do-highlight) 50%, transparent 50%);
2991
+ background-image: linear-gradient(to right, var(--hs-color-bg-go-highlight-default) 50%, transparent 50%);
2992
2992
  }
2993
2993
  .vd-datepicker .is-selected.is-startrange.is-endrange,
2994
2994
  .vd-datepicker-range .is-selected.is-startrange.is-endrange {
@@ -3003,34 +3003,34 @@ vd-carousel-frame {
3003
3003
  .vd-datepicker-range .pika-button {
3004
3004
  font-size: 15px;
3005
3005
  cursor: pointer;
3006
- background: var(--vd-colour--box);
3006
+ background: var(--hs-color-bg-neutral-top);
3007
3007
  width: 30px;
3008
3008
  height: 30px;
3009
3009
  border: none;
3010
3010
  border-radius: 50%;
3011
3011
  padding: 3px;
3012
- color: var(--vd-colour--text);
3012
+ color: var(--hs-color-fg-neutral-default);
3013
3013
  }
3014
3014
  .vd-datepicker .pika-button:hover,
3015
3015
  .vd-datepicker-range .pika-button:hover {
3016
- background: rgba(var(--vd-colour--do-rgb), 0.35);
3016
+ background: rgba(var(--hs-color-bg-go-default), 0.35);
3017
3017
  }
3018
3018
  .vd-datepicker .is-today .pika-button,
3019
3019
  .vd-datepicker-range .is-today .pika-button {
3020
- color: var(--vd-colour--do);
3020
+ color: var(--hs-color-fg-go-default);
3021
3021
  font-weight: 700;
3022
3022
  }
3023
3023
  .vd-datepicker .is-startrange .pika-button,
3024
3024
  .vd-datepicker .is-endrange .pika-button,
3025
3025
  .vd-datepicker-range .is-startrange .pika-button,
3026
3026
  .vd-datepicker-range .is-endrange .pika-button {
3027
- border: 2px solid var(--vd-colour--do);
3028
- background: var(--vd-colour--do-highlight);
3027
+ border: 2px solid var(--hs-color-fg-go-default);
3028
+ background: var(--hs-color-bg-go-highlight-default);
3029
3029
  }
3030
3030
  .vd-datepicker .is-selected .pika-button,
3031
3031
  .vd-datepicker-range .is-selected .pika-button {
3032
- background: var(--vd-colour--do);
3033
- color: var(--vd-colour--text-action);
3032
+ background: var(--hs-color-bg-go-default);
3033
+ color: var(--hs-color-fg-neutral-ondark-default);
3034
3034
  font-weight: 700;
3035
3035
  border: none;
3036
3036
  }
@@ -3041,8 +3041,8 @@ vd-carousel-frame {
3041
3041
  }
3042
3042
  .vd-datepicker-range-no-end .vd-datepicker-end-picker .is-startrange .pika-button,
3043
3043
  .vd-datepicker-range-no-end .vd-datepicker-end-picker .is-endrange .pika-button {
3044
- background: var(--vd-colour--do-highlight);
3045
- color: var(--vd-colour--text);
3044
+ background: var(--hs-color-bg-go-highlight-default);
3045
+ color: var(--hs-color-fg-neutral-default);
3046
3046
  font-weight: normal;
3047
3047
  }
3048
3048
 
@@ -3111,7 +3111,7 @@ vd-carousel-frame {
3111
3111
  box-sizing: border-box;
3112
3112
  margin: 0 auto;
3113
3113
  padding: var(--vd-dialog-spacing);
3114
- background: var(--vd-colour--box);
3114
+ background: var(--hs-color-bg-neutral-top);
3115
3115
  border-radius: 4px;
3116
3116
  display: flex;
3117
3117
  flex-direction: column;
@@ -3198,7 +3198,7 @@ vd-carousel-frame {
3198
3198
  width: 40px;
3199
3199
  margin: 20px auto 0;
3200
3200
  border: none;
3201
- border-top: 1px solid var(--vd-colour--keyline);
3201
+ border-top: 1px solid var(--hs-color-border-neutral-strong);
3202
3202
  }
3203
3203
 
3204
3204
  .vd-dialog-content {
@@ -3274,9 +3274,9 @@ vd-carousel-frame {
3274
3274
  display: flex;
3275
3275
  align-items: center;
3276
3276
  justify-content: center;
3277
- background: var(--vd-colour--box);
3277
+ background: var(--hs-color-bg-neutral-top);
3278
3278
  border-radius: 50%;
3279
- color: var(--vd-colour--supplementary--text);
3279
+ color: var(--hs-color-fg-supplementary-default);
3280
3280
  padding: 10px;
3281
3281
  text-decoration: none;
3282
3282
  border: 0;
@@ -3292,15 +3292,15 @@ vd-carousel-frame {
3292
3292
  }
3293
3293
  .vd-dialog-close:focus {
3294
3294
  outline: 0;
3295
- box-shadow: 0 0 3px 1px var(--vd-colour--go);
3295
+ box-shadow: 0 0 3px 1px var(--hs-color-fg-go-default);
3296
3296
  }
3297
3297
  .vd-modal--size-full-screen .vd-dialog-close {
3298
3298
  top: 16px;
3299
3299
  right: 16px;
3300
3300
  }
3301
3301
  .vd-modal--size-full-screen .vd-dialog-close .vd-dialog-close-button {
3302
- background-color: var(--vd-colour--supplementary);
3303
- color: var(--vd-colour--box);
3302
+ background-color: var(--hs-color-bg-supplementary-default);
3303
+ color: var(--hs-color-bg-neutral-top);
3304
3304
  }
3305
3305
  .vd-modal--size-full-screen .vd-dialog-close .vd-dialog-close-icon {
3306
3306
  opacity: 1;
@@ -3336,7 +3336,7 @@ vd-carousel-frame {
3336
3336
  font-size: 12px;
3337
3337
  }
3338
3338
  .vd-modal--size-full-screen .vd-dialog-close-label {
3339
- color: var(--vd-colour--supplementary);
3339
+ color: var(--hs-color-bg-supplementary-default);
3340
3340
  font-weight: bold;
3341
3341
  }
3342
3342
  @media only screen and (max-width: 768px) {
@@ -3346,14 +3346,14 @@ vd-carousel-frame {
3346
3346
  }
3347
3347
 
3348
3348
  .vd-dialog-close--inverse .vd-dialog-close-button {
3349
- background: var(--vd-colour--supplementary);
3350
- color: var(--vd-colour--text-action);
3349
+ background: var(--hs-color-bg-supplementary-default);
3350
+ color: var(--hs-color-fg-neutral-ondark-default);
3351
3351
  }
3352
3352
  .vd-dialog-close--inverse .vd-dialog-close-icon {
3353
3353
  opacity: 1;
3354
3354
  }
3355
3355
  .vd-dialog-close--inverse .vd-dialog-close-label {
3356
- color: var(--vd-colour--text);
3356
+ color: var(--hs-color-fg-neutral-default);
3357
3357
  opacity: 0.5;
3358
3358
  }
3359
3359
 
@@ -3373,22 +3373,22 @@ vd-dott,
3373
3373
  }
3374
3374
 
3375
3375
  .vd-dott-gradient-start {
3376
- stop-color: var(--vd-colour--go);
3376
+ stop-color: var(--hs-color-fg-go-default);
3377
3377
  }
3378
3378
 
3379
3379
  .vd-dott-gradient-stop {
3380
- stop-color: var(--vd-colour--success);
3380
+ stop-color: var(--hs-color-fg-success-default);
3381
3381
  }
3382
3382
 
3383
3383
  .vd-dott-border:not(.vd-input--error):not(.vd-error) {
3384
3384
  border: initial;
3385
- border-top: 2px solid var(--vd-colour--go);
3386
- border-bottom: 2px solid var(--vd-colour--success);
3387
- background-image: linear-gradient(var(--vd-colour--go), var(--vd-colour--success)), linear-gradient(var(--vd-colour--go), var(--vd-colour--success));
3385
+ border-top: 2px solid var(--hs-color-fg-go-default);
3386
+ border-bottom: 2px solid var(--hs-color-fg-success-default);
3387
+ background-image: linear-gradient(var(--hs-color-fg-go-default), var(--hs-color-fg-success-default)), linear-gradient(var(--hs-color-fg-go-default), var(--hs-color-fg-success-default));
3388
3388
  background-size: 2px 100%;
3389
3389
  background-position: 0 0, 100% 0;
3390
3390
  background-repeat: no-repeat;
3391
- box-shadow: 0 0 4px 0 var(--vd-colour--go);
3391
+ box-shadow: 0 0 4px 0 var(--hs-color-fg-go-default);
3392
3392
  }
3393
3393
 
3394
3394
  .vd-dropdown-input {
@@ -3399,10 +3399,10 @@ vd-dott,
3399
3399
  }
3400
3400
 
3401
3401
  .vd-dropdown-input-container.vd-input--error .vd-dropdown-input, .vd-dropdown-input-container.vd-error .vd-dropdown-input, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input {
3402
- border-color: var(--vd-colour--no);
3402
+ border-color: var(--hs-color-fg-no-default);
3403
3403
  }
3404
3404
  .vd-dropdown-input-container.vd-input--error .vd-dropdown-input:focus, .vd-dropdown-input-container.vd-input--error .vd-dropdown-input.vd-focus, .vd-dropdown-input-container.vd-error .vd-dropdown-input:focus, .vd-dropdown-input-container.vd-error .vd-dropdown-input.vd-focus, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input:focus, .vd-dropdown-input-container.ng-invalid.ng-dirty .vd-dropdown-input.vd-focus, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input:focus, .ng-submitted .vd-dropdown-input-container.ng-invalid .vd-dropdown-input.vd-focus {
3405
- box-shadow: 0 0 3px var(--vd-colour--no);
3405
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
3406
3406
  }
3407
3407
 
3408
3408
  .vd-expandable-content {
@@ -3515,7 +3515,7 @@ vd-dott,
3515
3515
  margin: 0 0 16px;
3516
3516
  font-size: 16px;
3517
3517
  font-weight: 700;
3518
- border-bottom: 1px solid var(--vd-colour--keyline);
3518
+ border-bottom: 1px solid var(--hs-color-border-neutral-strong);
3519
3519
  width: 100%;
3520
3520
  }
3521
3521
 
@@ -3531,14 +3531,14 @@ vd-dott,
3531
3531
  font-weight: 900;
3532
3532
  text-transform: uppercase;
3533
3533
  padding: 4px 8px;
3534
- background-color: var(--vd-colour--framing);
3534
+ background-color: var(--hs-color-border-neutral-soft);
3535
3535
  border-radius: 4px;
3536
3536
  display: inline-block;
3537
3537
  vertical-align: text-top;
3538
3538
  overflow: hidden;
3539
3539
  }
3540
3540
  .vd-flag, .vd-flag:link, .vd-flag:visited {
3541
- color: var(--vd-colour--supplementary--text) !important;
3541
+ color: var(--hs-color-fg-supplementary-default) !important;
3542
3542
  }
3543
3543
 
3544
3544
  .vd-flag-chevron {
@@ -3556,13 +3556,13 @@ vd-dott,
3556
3556
 
3557
3557
  .vd-flag--negative,
3558
3558
  .vd-flag--warning {
3559
- background-color: var(--vd-colour--no);
3559
+ background-color: var(--hs-color-bg-no-default);
3560
3560
  }
3561
3561
  .vd-flag--negative, .vd-flag--negative:link, .vd-flag--negative:visited,
3562
3562
  .vd-flag--warning,
3563
3563
  .vd-flag--warning:link,
3564
3564
  .vd-flag--warning:visited {
3565
- color: var(--vd-colour--text-action) !important;
3565
+ color: var(--hs-color-fg-neutral-ondark-default) !important;
3566
3566
  }
3567
3567
  .vd-flag--negative .vd-flag-chevron,
3568
3568
  .vd-flag--warning .vd-flag-chevron {
@@ -3629,7 +3629,7 @@ vd-dott,
3629
3629
  .vd-header {
3630
3630
  display: block;
3631
3631
  font-weight: 700;
3632
- color: var(--vd-colour--text);
3632
+ color: var(--hs-color-fg-neutral-default);
3633
3633
  margin: 0;
3634
3634
  }
3635
3635
 
@@ -3681,7 +3681,7 @@ vd-dott,
3681
3681
  text-align: center;
3682
3682
  padding: 48px 20px;
3683
3683
  box-sizing: border-box;
3684
- background-color: var(--vd-colour--box);
3684
+ background-color: var(--hs-color-bg-neutral-top);
3685
3685
  }
3686
3686
  @media only screen and (max-width: 1000px) {
3687
3687
  .vd-hero-container .vd-hero {
@@ -3707,7 +3707,7 @@ vd-dott,
3707
3707
  word-break: break-word;
3708
3708
  font-weight: 700;
3709
3709
  margin: 0;
3710
- color: var(--vd-colour--text);
3710
+ color: var(--hs-color-fg-neutral-default);
3711
3711
  line-height: 1.2;
3712
3712
  font-synthesis: none;
3713
3713
  text-rendering: optimizeLegibility;
@@ -3742,9 +3742,9 @@ vd-dott,
3742
3742
  justify-content: center;
3743
3743
  padding: 20px;
3744
3744
  box-sizing: border-box;
3745
- background-color: var(--vd-colour--box-inverse);
3745
+ background-color: var(--hs-color-bg-neutral-inverted-top);
3746
3746
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
3747
- color: var(--vd-colour--text-inverse);
3747
+ color: var(--hs-color-fg-neutral-inverted-default);
3748
3748
  text-align: center;
3749
3749
  font-size: 15px;
3750
3750
  }
@@ -3794,7 +3794,7 @@ vd-dott,
3794
3794
  }
3795
3795
 
3796
3796
  .vd-hero-aux-footer {
3797
- color: var(--vd-colour--keyline);
3797
+ color: var(--hs-color-border-neutral-strong);
3798
3798
  margin-top: 12px;
3799
3799
  }
3800
3800
 
@@ -3802,7 +3802,7 @@ vd-dott,
3802
3802
  margin: 20px auto;
3803
3803
  width: 100%;
3804
3804
  max-width: 1100px;
3805
- border-top: 1px solid var(--vd-colour--keyline);
3805
+ border-top: 1px solid var(--hs-color-border-neutral-strong);
3806
3806
  border-left: none;
3807
3807
  border-right: none;
3808
3808
  border-bottom: none;
@@ -3818,7 +3818,7 @@ vd-dott,
3818
3818
  font-size: 12px;
3819
3819
  }
3820
3820
  .vd-countdown:not(.vd-text--negative) {
3821
- color: var(--vd-colour--supplementary--text);
3821
+ color: var(--hs-color-fg-supplementary-default);
3822
3822
  }
3823
3823
 
3824
3824
  .vd-in-page-help {
@@ -3826,7 +3826,7 @@ vd-dott,
3826
3826
  }
3827
3827
 
3828
3828
  .vd-in-page-help-section {
3829
- border-bottom: 1px solid var(--vd-colour--framing);
3829
+ border-bottom: 1px solid var(--hs-color-border-neutral-soft);
3830
3830
  }
3831
3831
 
3832
3832
  .vd-in-page-help-container {
@@ -3882,13 +3882,13 @@ vd-dott,
3882
3882
  }
3883
3883
 
3884
3884
  .vd-link {
3885
- color: var(--vd-colour--go);
3885
+ color: var(--hs-color-fg-go-default);
3886
3886
  text-decoration: none;
3887
3887
  cursor: pointer;
3888
3888
  transition: color 0.2s;
3889
3889
  }
3890
3890
  .vd-link:visited {
3891
- color: var(--vd-colour--go);
3891
+ color: var(--hs-color-fg-go-default);
3892
3892
  }
3893
3893
  @media (hover: hover) {
3894
3894
  .vd-link:hover {
@@ -3905,7 +3905,7 @@ vd-dott,
3905
3905
  }
3906
3906
  @media (hover: hover) {
3907
3907
  .vd-link--secondary:hover {
3908
- color: var(--vd-colour--go) !important;
3908
+ color: var(--hs-color-fg-go-default) !important;
3909
3909
  }
3910
3910
  }
3911
3911
 
@@ -3920,8 +3920,8 @@ vd-dott,
3920
3920
  line-height: 1.3333333333;
3921
3921
  font-weight: 400;
3922
3922
  padding: 6px 10px;
3923
- color: var(--vd-colour--supplementary--text);
3924
- background-color: var(--vd-colour--framing);
3923
+ color: var(--hs-color-fg-supplementary-default);
3924
+ background-color: var(--hs-color-border-neutral-soft);
3925
3925
  border-radius: 4px;
3926
3926
  display: inline-block;
3927
3927
  margin-right: 4px;
@@ -3939,8 +3939,8 @@ vd-dott,
3939
3939
  }
3940
3940
 
3941
3941
  .vd-lozenge--interactive {
3942
- color: var(--vd-colour--text-action);
3943
- background-color: var(--vd-colour--supplementary);
3942
+ color: var(--hs-color-fg-neutral-ondark-default);
3943
+ background-color: var(--hs-color-bg-supplementary-default);
3944
3944
  }
3945
3945
 
3946
3946
  .vd-lozenge--disabled {
@@ -3950,8 +3950,8 @@ vd-dott,
3950
3950
  }
3951
3951
 
3952
3952
  .vd-lozenge--marked {
3953
- background-color: var(--vd-colour--no);
3954
- color: var(--vd-colour--text-action);
3953
+ background-color: var(--hs-color-bg-no-default);
3954
+ color: var(--hs-color-fg-neutral-ondark-default);
3955
3955
  }
3956
3956
 
3957
3957
  @keyframes vd-lozenge-group-already-added {
@@ -3977,25 +3977,25 @@ vd-dott,
3977
3977
  align-items: center;
3978
3978
  cursor: text;
3979
3979
  box-shadow: none;
3980
- background-color: var(--vd-colour--box);
3980
+ background-color: var(--hs-color-bg-neutral-top);
3981
3981
  border: 2px solid var(--hs-color-border-neutral-soft);
3982
3982
  border-radius: 4px;
3983
3983
  transition-duration: 0.2s;
3984
3984
  transition-property: border-color, box-shadow;
3985
3985
  }
3986
3986
  .vd-lozenge-group:focus, .vd-lozenge-group.vd-focus {
3987
- border-color: var(--vd-colour--go);
3988
- box-shadow: 0 0 3px var(--vd-colour--go);
3987
+ border-color: var(--hs-color-fg-go-default);
3988
+ box-shadow: 0 0 3px var(--hs-color-fg-go-default);
3989
3989
  }
3990
3990
  .vd-lozenge-group.vd-input--error, .vd-lozenge-group.vd-error, .vd-lozenge-group.ng-invalid.ng-dirty, .ng-submitted .vd-lozenge-group.ng-invalid {
3991
- border-color: var(--vd-colour--no);
3991
+ border-color: var(--hs-color-fg-no-default);
3992
3992
  }
3993
3993
  .vd-lozenge-group.vd-input--error:focus, .vd-lozenge-group.vd-input--error.vd-focus, .vd-lozenge-group.vd-error:focus, .vd-lozenge-group.vd-error.vd-focus, .vd-lozenge-group.ng-invalid.ng-dirty:focus, .vd-lozenge-group.ng-invalid.ng-dirty.vd-focus, .ng-submitted .vd-lozenge-group.ng-invalid:focus, .ng-submitted .vd-lozenge-group.ng-invalid.vd-focus {
3994
- box-shadow: 0 0 3px var(--vd-colour--no);
3994
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
3995
3995
  }
3996
3996
  .vd-lozenge-group:focus-within {
3997
- border-color: var(--vd-colour--go);
3998
- box-shadow: 0 0 3px var(--vd-colour--go);
3997
+ border-color: var(--hs-color-fg-go-default);
3998
+ box-shadow: 0 0 3px var(--hs-color-fg-go-default);
3999
3999
  }
4000
4000
  .vd-lozenge-group .vd-lozenge {
4001
4001
  margin-left: 4px;
@@ -4008,7 +4008,7 @@ vd-dott,
4008
4008
  animation-fill-mode: both;
4009
4009
  }
4010
4010
  .vd-lozenge-group .vd-lozenge-group-input {
4011
- color: var(--vd-colour--text);
4011
+ color: var(--hs-color-fg-neutral-default);
4012
4012
  font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
4013
4013
  font-weight: 400;
4014
4014
  font-size: 15px;
@@ -4023,7 +4023,7 @@ vd-dott,
4023
4023
  flex-grow: 1;
4024
4024
  }
4025
4025
  .vd-lozenge-group .vd-lozenge-group-input::placeholder {
4026
- color: var(--vd-colour--supplementary);
4026
+ color: var(--hs-color-bg-supplementary-default);
4027
4027
  opacity: 1;
4028
4028
  }
4029
4029
  .vd-lozenge-group .vd-lozenge-group-input:placeholder-shown {
@@ -4045,7 +4045,7 @@ vd-dott,
4045
4045
  width: 20px;
4046
4046
  height: 20px;
4047
4047
  border-radius: 50%;
4048
- border: 2px solid var(--vd-colour--do);
4048
+ border: 2px solid var(--hs-color-fg-go-default);
4049
4049
  border-left-color: transparent;
4050
4050
  animation: vd-rotate 1s ease-in-out infinite;
4051
4051
  }
@@ -4129,7 +4129,7 @@ vd-dott,
4129
4129
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
4130
4130
  font-size: 15px;
4131
4131
  line-height: normal;
4132
- color: var(--vd-colour--text);
4132
+ color: var(--hs-color-fg-neutral-default);
4133
4133
  position: absolute;
4134
4134
  z-index: 410;
4135
4135
  }
@@ -4150,7 +4150,7 @@ vd-dott,
4150
4150
 
4151
4151
  .vd-overlay--visible {
4152
4152
  visibility: visible;
4153
- background-color: var(--vd-colour--overlay);
4153
+ background-color: var(--hs-color-overlay-dark-default);
4154
4154
  pointer-events: auto;
4155
4155
  }
4156
4156
 
@@ -4166,12 +4166,12 @@ vd-dott,
4166
4166
 
4167
4167
  .vd-panel {
4168
4168
  display: block;
4169
- background-color: var(--vd-colour--box);
4169
+ background-color: var(--hs-color-bg-neutral-top);
4170
4170
  margin: 0 -24px;
4171
4171
  }
4172
4172
 
4173
4173
  .vd-panel--dark {
4174
- background-color: var(--vd-colour--background);
4174
+ background-color: var(--hs-color-bg-neutral-backdrop);
4175
4175
  }
4176
4176
 
4177
4177
  .vd-popover-container {
@@ -4182,7 +4182,7 @@ vd-dott,
4182
4182
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
4183
4183
  font-size: 15px;
4184
4184
  line-height: normal;
4185
- color: var(--vd-colour--text);
4185
+ color: var(--hs-color-fg-neutral-default);
4186
4186
  display: none;
4187
4187
  position: relative;
4188
4188
  z-index: 300;
@@ -4249,8 +4249,8 @@ vd-dott,
4249
4249
  .vd-popover {
4250
4250
  position: relative;
4251
4251
  border-radius: 5px;
4252
- filter: drop-shadow(0 4px 5px var(--vd-colour--shadow));
4253
- background-color: var(--vd-colour--box);
4252
+ filter: drop-shadow(0 4px 5px var(--hs-color-overlay-dark-default));
4253
+ background-color: var(--hs-color-bg-neutral-top);
4254
4254
  }
4255
4255
  .vd-popover-tether-pinned-bottom .vd-popover {
4256
4256
  margin-bottom: 12px;
@@ -4263,7 +4263,7 @@ vd-dott,
4263
4263
  position: relative;
4264
4264
  box-sizing: border-box;
4265
4265
  border-radius: 5px;
4266
- background-color: var(--vd-colour--box);
4266
+ background-color: var(--hs-color-bg-neutral-top);
4267
4267
  z-index: 1;
4268
4268
  padding: 24px;
4269
4269
  max-height: calc(50vh - 40px);
@@ -4284,11 +4284,11 @@ vd-dott,
4284
4284
  position: absolute;
4285
4285
  height: 12px;
4286
4286
  width: 12px;
4287
- background-color: var(--vd-colour--box);
4287
+ background-color: var(--hs-color-bg-neutral-top);
4288
4288
  transform: rotate(45deg);
4289
4289
  }
4290
4290
  .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top .vd-popover-actions:not(:empty) ~ .vd-popover-beak {
4291
- background-color: var(--vd-colour--framing);
4291
+ background-color: var(--hs-color-border-neutral-soft);
4292
4292
  }
4293
4293
  .vd-popover-tether-pinned .vd-popover-beak {
4294
4294
  display: none;
@@ -4343,13 +4343,13 @@ vd-dott,
4343
4343
  }
4344
4344
  .vd-multiselect-popover-container .vd-input-icon {
4345
4345
  padding-right: 24px;
4346
- color: var(--vd-colour--text);
4346
+ color: var(--hs-color-fg-neutral-default);
4347
4347
  }
4348
4348
  .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input {
4349
- border-color: var(--vd-colour--no);
4349
+ border-color: var(--hs-color-fg-no-default);
4350
4350
  }
4351
4351
  .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.vd-input--error .vd-multiselect-popover-input.vd-focus, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.vd-error .vd-multiselect-popover-input.vd-focus, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input:focus, .vd-multiselect-popover-container.ng-invalid.ng-dirty .vd-multiselect-popover-input.vd-focus, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input:focus, .ng-submitted .vd-multiselect-popover-container.ng-invalid .vd-multiselect-popover-input.vd-focus {
4352
- box-shadow: 0 0 3px var(--vd-colour--no);
4352
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
4353
4353
  }
4354
4354
 
4355
4355
  .vd-multiselect-popover-content-container {
@@ -4470,7 +4470,7 @@ vd-dott,
4470
4470
  text-decoration: none;
4471
4471
  }
4472
4472
  .vd-popover-list-item.vd-popover-list-item--active, .vd-popover-list-item:hover, .vd-popover-list-item:focus {
4473
- background-color: var(--vd-colour--go-highlight);
4473
+ background-color: var(--hs-color-bg-go-highlight-default);
4474
4474
  }
4475
4475
 
4476
4476
  .vd-popover-list-item--disabled {
@@ -4521,7 +4521,7 @@ vd-dott,
4521
4521
  }
4522
4522
 
4523
4523
  .vd-popover-list-footer--full {
4524
- background-color: var(--vd-colour--box);
4524
+ background-color: var(--hs-color-bg-neutral-top);
4525
4525
  border-top: 1px solid var(--hs-color-border-neutral-soft);
4526
4526
  display: flex;
4527
4527
  flex-direction: column;
@@ -4539,9 +4539,9 @@ vd-dott,
4539
4539
  font-size: 15px;
4540
4540
  line-height: 1.3333333333;
4541
4541
  font-weight: 700;
4542
- background-color: var(--vd-colour--box);
4542
+ background-color: var(--hs-color-bg-neutral-top);
4543
4543
  border: 0;
4544
- color: var(--vd-colour--do);
4544
+ color: var(--hs-color-fg-go-default);
4545
4545
  cursor: pointer;
4546
4546
  flex: 1 0 100%;
4547
4547
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@@ -4552,11 +4552,11 @@ vd-dott,
4552
4552
  }
4553
4553
  @media (hover: hover) {
4554
4554
  .vd-popover-list-footer-action:hover {
4555
- background-color: var(--vd-colour--go-highlight);
4555
+ background-color: var(--hs-color-bg-go-highlight-default);
4556
4556
  }
4557
4557
  }
4558
4558
  .vd-popover-list-footer-action:active, .vd-popover-list-footer-action:focus {
4559
- background-color: var(--vd-colour--go-highlight);
4559
+ background-color: var(--hs-color-bg-go-highlight-default);
4560
4560
  }
4561
4561
 
4562
4562
  .vd-popover-list-separator {
@@ -4583,7 +4583,7 @@ vd-dott,
4583
4583
  word-break: break-word;
4584
4584
  font-weight: 700;
4585
4585
  margin: 0;
4586
- color: var(--vd-colour--text);
4586
+ color: var(--hs-color-fg-neutral-default);
4587
4587
  line-height: 1.25;
4588
4588
  font-synthesis: none;
4589
4589
  text-rendering: optimizeLegibility;
@@ -4724,7 +4724,7 @@ vd-dott,
4724
4724
  height: 24px;
4725
4725
  width: 24px;
4726
4726
  border-radius: 50%;
4727
- background-color: var(--vd-colour--box);
4727
+ background-color: var(--hs-color-bg-neutral-top);
4728
4728
  border: 2px solid var(--hs-color-border-neutral-soft);
4729
4729
  box-sizing: border-box;
4730
4730
  }
@@ -4735,7 +4735,7 @@ vd-dott,
4735
4735
  height: 8px;
4736
4736
  width: 8px;
4737
4737
  border-radius: 50%;
4738
- background-color: var(--vd-colour--framing);
4738
+ background-color: var(--hs-color-border-neutral-soft);
4739
4739
  opacity: 0;
4740
4740
  left: 6px;
4741
4741
  top: 6px;
@@ -4748,13 +4748,13 @@ vd-dott,
4748
4748
 
4749
4749
  .vd-radio-input:checked + .vd-radio-tick {
4750
4750
  transition: background-color 0.8s;
4751
- background-color: var(--vd-colour--do);
4752
- border-color: var(--vd-colour--do);
4751
+ background-color: var(--hs-color-bg-go-default);
4752
+ border-color: var(--hs-color-fg-go-default);
4753
4753
  }
4754
4754
  .vd-radio-input:checked + .vd-radio-tick:after {
4755
4755
  opacity: 1;
4756
4756
  animation: vd-radio-checked 0.8s;
4757
- background-color: var(--vd-colour--text-action);
4757
+ background-color: var(--hs-color-fg-neutral-ondark-default);
4758
4758
  box-sizing: content-box;
4759
4759
  backface-visibility: hidden;
4760
4760
  }
@@ -4771,7 +4771,7 @@ vd-dott,
4771
4771
  .vd-radio.vd-disabled .vd-radio-input:hover:checked + .vd-radio-tick:after,
4772
4772
  .vd-radio-input:disabled:hover:checked + .vd-radio-tick:after {
4773
4773
  opacity: 1;
4774
- background-color: var(--vd-colour--box);
4774
+ background-color: var(--hs-color-bg-neutral-top);
4775
4775
  }
4776
4776
  .vd-radio.vd-disabled .vd-radio-input ~ .vd-radio-label,
4777
4777
  .vd-radio-input:disabled ~ .vd-radio-label {
@@ -4784,7 +4784,7 @@ vd-dott,
4784
4784
  }
4785
4785
 
4786
4786
  .vd-radio:focus-within {
4787
- box-shadow: 0 0 5px 2px var(--vd-colour--go);
4787
+ box-shadow: 0 0 5px 2px var(--hs-color-fg-go-default);
4788
4788
  }
4789
4789
 
4790
4790
  .vd-scrollable-container {
@@ -4816,7 +4816,7 @@ vd-dott,
4816
4816
  }
4817
4817
  .vd-scrollable-indicator::before {
4818
4818
  content: "";
4819
- box-shadow: 0 0 30px var(--vd-colour--shadow);
4819
+ box-shadow: 0 0 30px var(--hs-color-overlay-dark-default);
4820
4820
  border-radius: 100%;
4821
4821
  width: 100%;
4822
4822
  height: 100%;
@@ -4898,12 +4898,12 @@ vd-section .vd-section,
4898
4898
 
4899
4899
  .vd-section--secondary,
4900
4900
  .vd-section--secondary .vd-section-container {
4901
- background-color: var(--vd-colour--framing);
4901
+ background-color: var(--hs-color-border-neutral-soft);
4902
4902
  }
4903
4903
 
4904
4904
  .vd-section--tertiary,
4905
4905
  .vd-section--tertiary .vd-section-container {
4906
- background-color: var(--vd-colour--box);
4906
+ background-color: var(--hs-color-bg-neutral-top);
4907
4907
  }
4908
4908
 
4909
4909
  .vd-section--panel {
@@ -4930,7 +4930,7 @@ vd-section .vd-section,
4930
4930
  right: 1em;
4931
4931
  content: "";
4932
4932
  bottom: 0;
4933
- box-shadow: 0 0.1em 4em 0 var(--vd-colour--shadow);
4933
+ box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-dark-default);
4934
4934
  }
4935
4935
  .vd-section--fixed::after {
4936
4936
  animation: vd-fade-in 0.2s ease-in-out;
@@ -4944,7 +4944,7 @@ vd-section .vd-section,
4944
4944
 
4945
4945
  .vd-section--action-bar,
4946
4946
  .vd-section--action-bar .vd-section-container {
4947
- background-color: var(--vd-colour--framing);
4947
+ background-color: var(--hs-color-border-neutral-soft);
4948
4948
  }
4949
4949
  .vd-section--action-bar .vd-section-wrap {
4950
4950
  min-height: 45px;
@@ -4982,7 +4982,7 @@ vd-section .vd-section,
4982
4982
  }
4983
4983
  .vd-section-back .vd-section-back-icon {
4984
4984
  display: block;
4985
- color: var(--vd-colour--keyline);
4985
+ color: var(--hs-color-border-neutral-strong);
4986
4986
  font-size: 24px;
4987
4987
  transition-duration: 0.2s;
4988
4988
  transition-property: margin-left, padding-right, color;
@@ -4990,7 +4990,7 @@ vd-section .vd-section,
4990
4990
  .vd-section-back:hover .vd-section-back-icon {
4991
4991
  margin-left: -2px;
4992
4992
  padding-right: 2px;
4993
- color: var(--vd-colour--do);
4993
+ color: var(--hs-color-fg-go-default);
4994
4994
  }
4995
4995
  @media only screen and (max-width: 1000px) {
4996
4996
  .vd-section-back {
@@ -5023,13 +5023,13 @@ vd-section .vd-section,
5023
5023
  }
5024
5024
 
5025
5025
  .vd-segcontrol--selected .vd-segcontrol-button {
5026
- border-color: var(--vd-colour--do) !important;
5026
+ border-color: var(--hs-color-fg-go-default) !important;
5027
5027
  z-index: 3;
5028
5028
  }
5029
5029
 
5030
5030
  .vd-segcontrol:not(.vd-segcontrol--selected):not(.vd-segcontrol--disabled):hover .vd-segcontrol-input:not(:disabled) ~ .vd-segcontrol-button {
5031
5031
  z-index: 2;
5032
- border-color: var(--vd-colour--keyline);
5032
+ border-color: var(--hs-color-border-neutral-strong);
5033
5033
  cursor: pointer;
5034
5034
  }
5035
5035
 
@@ -5042,10 +5042,10 @@ vd-section .vd-section,
5042
5042
  flex-direction: column;
5043
5043
  justify-content: flex-start;
5044
5044
  align-items: center;
5045
- background-color: var(--vd-colour--box);
5045
+ background-color: var(--hs-color-bg-neutral-top);
5046
5046
  padding: 12px 20px;
5047
5047
  border: 2px solid var(--hs-color-border-neutral-soft);
5048
- color: var(--vd-colour--text);
5048
+ color: var(--hs-color-fg-neutral-default);
5049
5049
  width: 100%;
5050
5050
  transition-duration: 0.2s;
5051
5051
  transition-property: background, border;
@@ -5056,7 +5056,7 @@ vd-section .vd-section,
5056
5056
  position: absolute;
5057
5057
  }
5058
5058
  .vd-segcontrol-input:checked + .vd-segcontrol-button {
5059
- color: var(--vd-colour--text);
5059
+ color: var(--hs-color-fg-neutral-default);
5060
5060
  }
5061
5061
  .vd-segcontrol-input:disabled + .vd-segcontrol-button {
5062
5062
  opacity: 0.35;
@@ -5066,8 +5066,8 @@ vd-section .vd-section,
5066
5066
  }
5067
5067
 
5068
5068
  .vd-segcontrol:active .vd-segcontrol-input + .vd-segcontrol-button {
5069
- background-color: rgba(var(--vd-colour--box-rgb), 0.2);
5070
- box-shadow: 0 0 3px 2px rgba(var(--vd-colour--box-rgb), 0.35);
5069
+ background-color: rgba(var(--hs-color-bg-neutral-top-rgb), 0.2);
5070
+ box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-neutral-top-rgb), 0.35);
5071
5071
  }
5072
5072
 
5073
5073
  .vd-segcontrol--panel {
@@ -5079,7 +5079,7 @@ vd-section .vd-section,
5079
5079
  }
5080
5080
 
5081
5081
  .vd-splash-fullscreen-container {
5082
- border: 20px solid var(--vd-colour--overlay);
5082
+ border: 20px solid var(--hs-color-overlay-dark-default);
5083
5083
  box-sizing: border-box;
5084
5084
  display: block;
5085
5085
  position: fixed;
@@ -5100,7 +5100,7 @@ vd-section .vd-section,
5100
5100
  display: flex;
5101
5101
  justify-content: center;
5102
5102
  align-items: center;
5103
- background: var(--vd-colour--box);
5103
+ background: var(--hs-color-bg-neutral-top);
5104
5104
  overflow: auto;
5105
5105
  animation: vd-fade-in 0.5s ease-in-out;
5106
5106
  animation-fill-mode: forwards;
@@ -5129,7 +5129,7 @@ vd-section .vd-section,
5129
5129
 
5130
5130
  .vd-status-icon {
5131
5131
  border-radius: 50%;
5132
- background-color: var(--vd-colour--do);
5132
+ background-color: var(--hs-color-bg-go-default);
5133
5133
  width: 8px;
5134
5134
  height: 8px;
5135
5135
  display: inline-block;
@@ -5137,7 +5137,7 @@ vd-section .vd-section,
5137
5137
  }
5138
5138
 
5139
5139
  .vd-status-icon--negative {
5140
- background-color: var(--vd-colour--no);
5140
+ background-color: var(--hs-color-bg-no-default);
5141
5141
  }
5142
5142
 
5143
5143
  .vd-suggestions-popover .vd-popover-content {
@@ -5169,7 +5169,7 @@ vd-section .vd-section,
5169
5169
  right: 0;
5170
5170
  height: 60px;
5171
5171
  box-sizing: border-box;
5172
- background-color: var(--vd-colour--box);
5172
+ background-color: var(--hs-color-bg-neutral-top);
5173
5173
  border-top: 1px solid var(--hs-color-border-neutral-soft);
5174
5174
  }
5175
5175
 
@@ -5201,8 +5201,8 @@ vd-section .vd-section,
5201
5201
  margin-right: -16px !important;
5202
5202
  }
5203
5203
  .vd-suggestion-clear.vd-suggestion-clear--active {
5204
- color: var(--vd-colour--text-action);
5205
- background-color: var(--vd-colour--supplementary-lighter);
5204
+ color: var(--hs-color-fg-neutral-ondark-default);
5205
+ background-color: var(--hs-color-bg-supplementary-soft);
5206
5206
  }
5207
5207
 
5208
5208
  .vd-switch {
@@ -5227,8 +5227,8 @@ vd-section .vd-section,
5227
5227
  height: 36px;
5228
5228
  border-radius: 36px;
5229
5229
  box-sizing: border-box;
5230
- border: 2px solid var(--vd-colour--do);
5231
- background-color: var(--vd-colour--box);
5230
+ border: 2px solid var(--hs-color-fg-go-default);
5231
+ background-color: var(--hs-color-bg-neutral-top);
5232
5232
  transition: background-color 0.5s ease-in-out;
5233
5233
  }
5234
5234
  .vd-switch--small .vd-switch-track {
@@ -5240,7 +5240,7 @@ vd-section .vd-section,
5240
5240
  box-sizing: border-box;
5241
5241
  display: inline-block;
5242
5242
  position: absolute;
5243
- color: var(--vd-colour--text-action);
5243
+ color: var(--hs-color-fg-neutral-ondark-default);
5244
5244
  top: 8px;
5245
5245
  left: 10px;
5246
5246
  opacity: 0;
@@ -5258,7 +5258,7 @@ vd-section .vd-section,
5258
5258
  position: absolute;
5259
5259
  top: 8px;
5260
5260
  left: 41px;
5261
- color: var(--vd-colour--do);
5261
+ color: var(--hs-color-fg-go-default);
5262
5262
  opacity: 1;
5263
5263
  transition: opacity 0.54s ease-in-out;
5264
5264
  }
@@ -5272,8 +5272,8 @@ vd-section .vd-section,
5272
5272
  float: left;
5273
5273
  border-radius: inherit;
5274
5274
  box-sizing: border-box;
5275
- border: 2px solid var(--vd-colour--do);
5276
- background-color: var(--vd-colour--box);
5275
+ border: 2px solid var(--hs-color-fg-go-default);
5276
+ background-color: var(--hs-color-bg-neutral-top);
5277
5277
  pointer-events: none;
5278
5278
  width: 36px;
5279
5279
  height: 36px;
@@ -5287,7 +5287,7 @@ vd-section .vd-section,
5287
5287
  }
5288
5288
 
5289
5289
  .vd-switch-input:checked + .vd-switch-track {
5290
- background-color: var(--vd-colour--do);
5290
+ background-color: var(--hs-color-bg-go-default);
5291
5291
  }
5292
5292
  .vd-switch-input:checked + .vd-switch-track .vd-switch-icon {
5293
5293
  opacity: 1;
@@ -5303,7 +5303,7 @@ vd-section .vd-section,
5303
5303
  }
5304
5304
 
5305
5305
  .vd-switch-input:focus + .vd-switch-track {
5306
- box-shadow: 0 0 5px 2px var(--vd-colour--go);
5306
+ box-shadow: 0 0 5px 2px var(--hs-color-fg-go-default);
5307
5307
  }
5308
5308
 
5309
5309
  .vd-switch-input:disabled + .vd-switch-track {
@@ -5336,7 +5336,7 @@ vd-section .vd-section,
5336
5336
  gap: 16px 32px;
5337
5337
  padding: 0;
5338
5338
  margin: 0;
5339
- box-shadow: inset 0 -1px var(--vd-colour--keyline);
5339
+ box-shadow: inset 0 -1px var(--hs-color-border-neutral-strong);
5340
5340
  }
5341
5341
 
5342
5342
  .vd-tabs-container--overflow {
@@ -5355,16 +5355,16 @@ vd-section .vd-section,
5355
5355
 
5356
5356
  .vd-tab {
5357
5357
  display: inline-block;
5358
- color: var(--vd-colour--text);
5358
+ color: var(--hs-color-fg-neutral-default);
5359
5359
  }
5360
5360
  .vd-tab.vd-tab--active .vd-tab-button {
5361
- border-bottom-color: var(--vd-colour--do);
5362
- color: var(--vd-colour--do);
5361
+ border-bottom-color: var(--hs-color-fg-go-default);
5362
+ color: var(--hs-color-fg-go-default);
5363
5363
  }
5364
5364
  @media (hover: hover) {
5365
5365
  .vd-tab:hover:not(.vd-tab--disabled) .vd-tab-button {
5366
- border-bottom-color: var(--vd-colour--do);
5367
- color: var(--vd-colour--do);
5366
+ border-bottom-color: var(--hs-color-fg-go-default);
5367
+ color: var(--hs-color-fg-go-default);
5368
5368
  }
5369
5369
  .vd-tab:hover:not(.vd-tab--active) .vd-tab-button {
5370
5370
  cursor: pointer;
@@ -5441,7 +5441,7 @@ table {
5441
5441
  padding: 16px 40px 16px;
5442
5442
  }
5443
5443
  .vd-table thead tr {
5444
- border-color: var(--vd-colour--keyline);
5444
+ border-color: var(--hs-color-border-neutral-strong);
5445
5445
  }
5446
5446
  .vd-table tr {
5447
5447
  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
@@ -5500,18 +5500,18 @@ table {
5500
5500
  @media (hover: hover) {
5501
5501
  .vd-table tr.vd-expandable:hover:not(.vd-expandable--nt) {
5502
5502
  cursor: pointer;
5503
- background-color: var(--vd-colour--go-highlight);
5503
+ background-color: var(--hs-color-bg-go-highlight-default);
5504
5504
  }
5505
5505
  }
5506
5506
  .vd-table tr.vd-expandable + tr:not(.vd-expandable), .vd-table tr.vd-expandable.vd-expandable--expanded {
5507
- background: var(--vd-colour--box);
5507
+ background: var(--hs-color-bg-neutral-top);
5508
5508
  }
5509
5509
  .vd-table tr.vd-expandable + tr:not(.vd-expandable) > td:first-child::before, .vd-table tr.vd-expandable.vd-expandable--expanded > td:first-child::before {
5510
5510
  content: "";
5511
5511
  top: -1px;
5512
5512
  left: 0;
5513
5513
  width: 4px;
5514
- background-color: var(--vd-colour--do);
5514
+ background-color: var(--hs-color-fg-go-default);
5515
5515
  bottom: 0;
5516
5516
  z-index: 1;
5517
5517
  position: absolute;
@@ -5591,7 +5591,7 @@ table {
5591
5591
  border: 1px solid var(--hs-color-border-neutral-soft);
5592
5592
  }
5593
5593
  .vd-table.vd-table--data tr {
5594
- background-color: var(--vd-colour--box);
5594
+ background-color: var(--hs-color-bg-neutral-top);
5595
5595
  }
5596
5596
 
5597
5597
  .vd-table--compact thead th {
@@ -5623,7 +5623,7 @@ table {
5623
5623
  }
5624
5624
  .vd-table--report > thead th {
5625
5625
  padding: 16px 16px;
5626
- background-color: var(--vd-colour--box);
5626
+ background-color: var(--hs-color-bg-neutral-top);
5627
5627
  }
5628
5628
  .vd-table--report > thead tr {
5629
5629
  border: 1px solid var(--hs-color-border-neutral-soft);
@@ -5632,10 +5632,10 @@ table {
5632
5632
  border-bottom: none;
5633
5633
  }
5634
5634
  .vd-table--report > tbody > tr:nth-child(odd) {
5635
- background-color: var(--vd-colour--background);
5635
+ background-color: var(--hs-color-bg-neutral-backdrop);
5636
5636
  }
5637
5637
  .vd-table--report > tbody > tr:nth-child(even) {
5638
- background-color: var(--vd-colour--box);
5638
+ background-color: var(--hs-color-bg-neutral-top);
5639
5639
  }
5640
5640
  .vd-table--report > tbody > tr > td {
5641
5641
  padding: 16px 16px;
@@ -5651,10 +5651,10 @@ table {
5651
5651
  margin-bottom: 0;
5652
5652
  }
5653
5653
  .vd-table--report.vd-table--report--nested > tbody > tr:nth-child(odd) {
5654
- background-color: var(--vd-colour--background);
5654
+ background-color: var(--hs-color-bg-neutral-backdrop);
5655
5655
  }
5656
5656
  .vd-table--report.vd-table--report--nested > tbody > tr:nth-child(even) {
5657
- background-color: var(--vd-colour--box);
5657
+ background-color: var(--hs-color-bg-neutral-top);
5658
5658
  }
5659
5659
  .vd-table--report.vd-table--report--nested > tbody > tr > td:first-child {
5660
5660
  padding-left: 13px;
@@ -5664,19 +5664,19 @@ table {
5664
5664
  }
5665
5665
 
5666
5666
  .vd-text--secondary {
5667
- color: var(--vd-colour--supplementary--text);
5667
+ color: var(--hs-color-fg-supplementary-default);
5668
5668
  }
5669
5669
 
5670
5670
  .vd-text--success {
5671
- color: var(--vd-colour--do);
5671
+ color: var(--hs-color-fg-go-default);
5672
5672
  }
5673
5673
 
5674
5674
  .vd-text--negative {
5675
- color: var(--vd-colour--no);
5675
+ color: var(--hs-color-fg-no-default);
5676
5676
  }
5677
5677
 
5678
5678
  .vd-text--disabled {
5679
- color: var(--vd-colour--text);
5679
+ color: var(--hs-color-fg-neutral-default);
5680
5680
  opacity: 0.35;
5681
5681
  }
5682
5682
 
@@ -5708,7 +5708,7 @@ table {
5708
5708
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
5709
5709
  font-size: 15px;
5710
5710
  line-height: normal;
5711
- color: var(--vd-colour--text);
5711
+ color: var(--hs-color-fg-neutral-default);
5712
5712
  position: fixed;
5713
5713
  right: 0;
5714
5714
  left: 0;
@@ -5736,7 +5736,7 @@ table {
5736
5736
  padding: 24px 76px 24px 40px;
5737
5737
  border-radius: 4px;
5738
5738
  box-sizing: border-box;
5739
- color: var(--vd-colour--text-action);
5739
+ color: var(--hs-color-fg-neutral-ondark-default);
5740
5740
  text-align: center;
5741
5741
  font-weight: 700;
5742
5742
  transition: opacity ease-in-out 0.5s;
@@ -5758,25 +5758,25 @@ table {
5758
5758
  }
5759
5759
 
5760
5760
  .vd-toast-notification--success {
5761
- background-color: var(--vd-colour--success);
5761
+ background-color: var(--hs-color-bg-success-default);
5762
5762
  }
5763
5763
 
5764
5764
  .vd-toast-notification--negative {
5765
- background-color: var(--vd-colour--no);
5765
+ background-color: var(--hs-color-bg-no-default);
5766
5766
  }
5767
5767
 
5768
5768
  .vd-popover--tooltip {
5769
- border-color: var(--vd-colour--framing-inverse);
5770
- background-color: var(--vd-colour--box-inverse);
5771
- color: var(--vd-colour--text-inverse);
5769
+ border-color: var(--hs-color-border-neutral-inverted-soft);
5770
+ background-color: var(--hs-color-bg-neutral-inverted-top);
5771
+ color: var(--hs-color-fg-neutral-inverted-default);
5772
5772
  }
5773
5773
  .vd-popover--tooltip .vd-popover-content {
5774
- background-color: var(--vd-colour--box-inverse);
5774
+ background-color: var(--hs-color-bg-neutral-inverted-top);
5775
5775
  padding: 8px;
5776
5776
  }
5777
5777
  .vd-popover--tooltip .vd-popover-beak {
5778
- background-color: var(--vd-colour--box-inverse);
5779
- border-color: var(--vd-colour--framing-inverse);
5778
+ background-color: var(--hs-color-bg-neutral-inverted-top);
5779
+ border-color: var(--hs-color-border-neutral-inverted-soft);
5780
5780
  }
5781
5781
 
5782
5782
  @media only screen and (max-width: 480px) {
@@ -5927,11 +5927,11 @@ td.vd-show-print {
5927
5927
  .vd-next-stepper {
5928
5928
  display: block;
5929
5929
  padding: 24px;
5930
- background-color: var(--vd-colour--box);
5930
+ background-color: var(--hs-color-bg-neutral-top);
5931
5931
  border: 1px solid var(--hs-color-border-neutral-soft);
5932
5932
  }
5933
5933
  .vd-next-stepper.vd-next-stepper--on-box {
5934
- background-color: var(--vd-colour--background);
5934
+ background-color: var(--hs-color-bg-neutral-backdrop);
5935
5935
  border-color: transparent;
5936
5936
  }
5937
5937
 
@@ -6022,7 +6022,7 @@ td.vd-show-print {
6022
6022
  }
6023
6023
  .vd-id-badge.vd-id-badge--interactive-selection {
6024
6024
  border: 2px solid var(--hs-color-border-neutral-soft);
6025
- background-color: var(--vd-colour--box);
6025
+ background-color: var(--hs-color-bg-neutral-top);
6026
6026
  border-radius: 5px;
6027
6027
  cursor: pointer;
6028
6028
  }
@@ -6031,10 +6031,10 @@ td.vd-show-print {
6031
6031
  }
6032
6032
  .vd-id-badge.vd-id-badge--interactive-selection:hover, .vd-id-badge.vd-id-badge--interactive-selection:active, .vd-id-badge.vd-id-badge--interactive-selection:focus {
6033
6033
  outline: none;
6034
- background-color: var(--vd-colour--go-highlight);
6034
+ background-color: var(--hs-color-bg-go-highlight-default);
6035
6035
  }
6036
6036
  .vd-id-badge.vd-id-badge--current {
6037
- border-color: var(--vd-colour--do);
6037
+ border-color: var(--hs-color-fg-go-default);
6038
6038
  }
6039
6039
  .vd-id-badge.vd-id-badge--small .vd-id-badge__content {
6040
6040
  padding: 8px;
@@ -6059,7 +6059,7 @@ td.vd-show-print {
6059
6059
  outline: none;
6060
6060
  }
6061
6061
  .vd-id-badge.vd-id-badge--interactive-action:hover .vd-id-badge__header-title, .vd-id-badge.vd-id-badge--interactive-action:active .vd-id-badge__header-title, .vd-id-badge.vd-id-badge--interactive-action:focus .vd-id-badge__header-title {
6062
- color: var(--vd-colour--go);
6062
+ color: var(--hs-color-fg-go-default);
6063
6063
  }
6064
6064
  .vd-id-badge.vd-id-badge--x-small .vd-id-badge__content {
6065
6065
  padding: 8px;
@@ -6100,7 +6100,7 @@ td.vd-show-print {
6100
6100
  justify-content: center;
6101
6101
  flex: 1;
6102
6102
  word-break: break-word;
6103
- color: var(--vd-colour--text);
6103
+ color: var(--hs-color-fg-neutral-default);
6104
6104
  font-synthesis: none;
6105
6105
  text-rendering: optimizeLegibility;
6106
6106
  -webkit-font-smoothing: antialiased;
@@ -6137,7 +6137,7 @@ td.vd-show-print {
6137
6137
  }
6138
6138
 
6139
6139
  .vd-id-badge__image {
6140
- background-color: var(--vd-colour--framing);
6140
+ background-color: var(--hs-color-border-neutral-soft);
6141
6141
  background-repeat: no-repeat;
6142
6142
  background-size: contain;
6143
6143
  background-position: center;
@@ -6182,7 +6182,7 @@ td.vd-show-print {
6182
6182
  }
6183
6183
 
6184
6184
  .vd-password-strength-meter[data-value="4"] {
6185
- background-color: var(--vd-colour--success);
6185
+ background-color: var(--hs-color-bg-success-default);
6186
6186
  width: 100%;
6187
6187
  }
6188
6188
 
@@ -6735,28 +6735,28 @@ td.vd-show-print {
6735
6735
  }
6736
6736
 
6737
6737
  .vd-datatable-row:nth-child(odd) {
6738
- background-color: var(--vd-colour--background);
6738
+ background-color: var(--hs-color-bg-neutral-backdrop);
6739
6739
  }
6740
6740
  .vd-datatable-row:nth-child(even) {
6741
- background-color: var(--vd-colour--box);
6741
+ background-color: var(--hs-color-bg-neutral-top);
6742
6742
  }
6743
6743
 
6744
6744
  .vd-datatable-row--header {
6745
6745
  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
6746
6746
  }
6747
6747
  .vd-datatable-row--header:nth-child(odd), .vd-datatable-row--header:nth-child(even) {
6748
- background-color: var(--vd-colour--box);
6748
+ background-color: var(--hs-color-bg-neutral-top);
6749
6749
  }
6750
6750
 
6751
6751
  .vd-datatable-row--header-sections {
6752
6752
  border-bottom: 1px solid var(--hs-color-border-neutral-strong);
6753
6753
  }
6754
6754
  .vd-datatable-row--header-sections:nth-child(odd), .vd-datatable-row--header-sections:nth-child(even) {
6755
- background-color: var(--vd-colour--framing);
6755
+ background-color: var(--hs-color-border-neutral-soft);
6756
6756
  }
6757
6757
 
6758
6758
  .vd-datatable-row--footer:nth-child(odd), .vd-datatable-row--footer:nth-child(even) {
6759
- background-color: var(--vd-colour--framing);
6759
+ background-color: var(--hs-color-border-neutral-soft);
6760
6760
  }
6761
6761
 
6762
6762
  .vd-datatable-foot.vd-sticky .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
@@ -6764,7 +6764,7 @@ td.vd-show-print {
6764
6764
  border-bottom-color: transparent;
6765
6765
  }
6766
6766
  .vd-datatable-foot.vd-sticky--stuck .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
6767
- border-bottom-color: var(--vd-colour--keyline);
6767
+ border-bottom-color: var(--hs-color-border-neutral-strong);
6768
6768
  border-radius: 0;
6769
6769
  }
6770
6770
 
@@ -6778,7 +6778,7 @@ td.vd-show-print {
6778
6778
  left: 0;
6779
6779
  width: 100%;
6780
6780
  height: 30px;
6781
- box-shadow: inset 0 -30px 40px -48px var(--vd-colour--shadow);
6781
+ box-shadow: inset 0 -30px 40px -48px var(--hs-color-overlay-dark-default);
6782
6782
  }
6783
6783
 
6784
6784
  .vd-datatable-cell {
@@ -6918,7 +6918,7 @@ td.vd-show-print {
6918
6918
  font-family: lato, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
6919
6919
  font-size: 15px;
6920
6920
  line-height: normal;
6921
- color: var(--vd-colour--text);
6921
+ color: var(--hs-color-fg-neutral-default);
6922
6922
  font-size: 15px;
6923
6923
  position: relative;
6924
6924
  margin-top: 8px;
@@ -6965,8 +6965,8 @@ td.vd-show-print {
6965
6965
  position: absolute;
6966
6966
  width: 7px;
6967
6967
  height: 7px;
6968
- border-right: 3px solid var(--vd-colour--text);
6969
- border-top: 3px solid var(--vd-colour--text);
6968
+ border-right: 3px solid var(--hs-color-fg-neutral-default);
6969
+ border-top: 3px solid var(--hs-color-fg-neutral-default);
6970
6970
  box-sizing: initial;
6971
6971
  transform: rotate(225deg);
6972
6972
  }
@@ -6980,8 +6980,8 @@ td.vd-show-print {
6980
6980
  position: absolute;
6981
6981
  width: 7px;
6982
6982
  height: 7px;
6983
- border-right: 3px solid var(--vd-colour--text);
6984
- border-top: 3px solid var(--vd-colour--text);
6983
+ border-right: 3px solid var(--hs-color-fg-neutral-default);
6984
+ border-top: 3px solid var(--hs-color-fg-neutral-default);
6985
6985
  box-sizing: initial;
6986
6986
  transform: rotate(45deg);
6987
6987
  }
@@ -6997,7 +6997,7 @@ td.vd-show-print {
6997
6997
 
6998
6998
  .react-datepicker__month-select,
6999
6999
  .react-datepicker__year-select {
7000
- color: var(--vd-colour--text);
7000
+ color: var(--hs-color-fg-neutral-default);
7001
7001
  font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
7002
7002
  font-weight: 400;
7003
7003
  font-size: 15px;
@@ -7008,7 +7008,7 @@ td.vd-show-print {
7008
7008
  box-sizing: border-box;
7009
7009
  outline: none;
7010
7010
  box-shadow: none;
7011
- background-color: var(--vd-colour--box);
7011
+ background-color: var(--hs-color-bg-neutral-top);
7012
7012
  border: 2px solid var(--hs-color-border-neutral-soft);
7013
7013
  border-radius: 4px;
7014
7014
  transition-duration: 0.2s;
@@ -7018,12 +7018,12 @@ td.vd-show-print {
7018
7018
  background-repeat: no-repeat;
7019
7019
  background-size: 8px 20px;
7020
7020
  background-position: calc(100% - 14px) 10px;
7021
- background-image: var(--vd-colour--select-arrows-bg);
7021
+ background-image: var(--hs-color-select-arrows-bg);
7022
7022
  padding-right: 12px;
7023
7023
  }
7024
7024
  .react-datepicker__month-select::placeholder,
7025
7025
  .react-datepicker__year-select::placeholder {
7026
- color: var(--vd-colour--supplementary);
7026
+ color: var(--hs-color-bg-supplementary-default);
7027
7027
  opacity: 1;
7028
7028
  }
7029
7029
  .react-datepicker__month-select:placeholder-shown,
@@ -7044,15 +7044,15 @@ td.vd-show-print {
7044
7044
  .react-datepicker__month-select:focus, .react-datepicker__month-select.vd-focus,
7045
7045
  .react-datepicker__year-select:focus,
7046
7046
  .react-datepicker__year-select.vd-focus {
7047
- border-color: var(--vd-colour--go);
7048
- box-shadow: 0 0 3px var(--vd-colour--go);
7047
+ border-color: var(--hs-color-fg-go-default);
7048
+ box-shadow: 0 0 3px var(--hs-color-fg-go-default);
7049
7049
  }
7050
7050
  .react-datepicker__month-select.vd-input--error, .react-datepicker__month-select.vd-error, .react-datepicker__month-select.ng-invalid.ng-dirty, .ng-submitted .react-datepicker__month-select.ng-invalid,
7051
7051
  .react-datepicker__year-select.vd-input--error,
7052
7052
  .react-datepicker__year-select.vd-error,
7053
7053
  .react-datepicker__year-select.ng-invalid.ng-dirty,
7054
7054
  .ng-submitted .react-datepicker__year-select.ng-invalid {
7055
- border-color: var(--vd-colour--no);
7055
+ border-color: var(--hs-color-fg-no-default);
7056
7056
  }
7057
7057
  .react-datepicker__month-select.vd-input--error:focus, .react-datepicker__month-select.vd-input--error.vd-focus, .react-datepicker__month-select.vd-error:focus, .react-datepicker__month-select.vd-error.vd-focus, .react-datepicker__month-select.ng-invalid.ng-dirty:focus, .react-datepicker__month-select.ng-invalid.ng-dirty.vd-focus, .ng-submitted .react-datepicker__month-select.ng-invalid:focus, .ng-submitted .react-datepicker__month-select.ng-invalid.vd-focus,
7058
7058
  .react-datepicker__year-select.vd-input--error:focus,
@@ -7063,7 +7063,7 @@ td.vd-show-print {
7063
7063
  .react-datepicker__year-select.ng-invalid.ng-dirty.vd-focus,
7064
7064
  .ng-submitted .react-datepicker__year-select.ng-invalid:focus,
7065
7065
  .ng-submitted .react-datepicker__year-select.ng-invalid.vd-focus {
7066
- box-shadow: 0 0 3px var(--vd-colour--no);
7066
+ box-shadow: 0 0 3px var(--hs-color-fg-no-default);
7067
7067
  }
7068
7068
 
7069
7069
  .react-datepicker__month-select {
@@ -7098,7 +7098,7 @@ td.vd-show-print {
7098
7098
  .vd-datepicker-day-button {
7099
7099
  box-sizing: border-box;
7100
7100
  padding: 3px;
7101
- background: var(--vd-colour--box);
7101
+ background: var(--hs-color-bg-neutral-top);
7102
7102
  width: 30px;
7103
7103
  height: 30px;
7104
7104
  border: none;
@@ -7117,14 +7117,14 @@ td.vd-show-print {
7117
7117
  .react-datepicker__day--range-start .vd-datepicker-day-button,
7118
7118
  .react-datepicker__day--range-end .vd-datepicker-day-button,
7119
7119
  .react-datepicker__day--selected .vd-datepicker-day-button {
7120
- background: var(--vd-colour--do);
7121
- color: var(--vd-colour--box);
7120
+ background: var(--hs-color-bg-go-default);
7121
+ color: var(--hs-color-bg-neutral-top);
7122
7122
  font-weight: 700;
7123
7123
  border: none;
7124
7124
  }
7125
7125
 
7126
7126
  .react-datepicker__day:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button:hover {
7127
- background: rgba(var(--vd-colour--do-rgb), 0.35);
7127
+ background: rgba(var(--hs-color-bg-go-default-rgb), 0.35);
7128
7128
  }
7129
7129
 
7130
7130
  .react-datepicker__day--outside-month {
@@ -7132,15 +7132,15 @@ td.vd-show-print {
7132
7132
  }
7133
7133
 
7134
7134
  .react-datepicker__day--today {
7135
- color: var(--vd-colour--do);
7135
+ color: var(--hs-color-fg-go-default);
7136
7136
  font-weight: 700;
7137
7137
  }
7138
7138
 
7139
7139
  .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) {
7140
- background-color: var(--vd-colour--do-highlight);
7140
+ background-color: var(--hs-color-bg-go-highlight-default);
7141
7141
  }
7142
7142
  .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button {
7143
- background-color: var(--vd-colour--do-highlight);
7143
+ background-color: var(--hs-color-bg-go-highlight-default);
7144
7144
  border-radius: 0;
7145
7145
  }
7146
7146
  .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end):not(.react-datepicker__day--selected) .vd-datepicker-day-button:hover {
@@ -7154,11 +7154,11 @@ td.vd-show-print {
7154
7154
  }
7155
7155
 
7156
7156
  .react-datepicker__day--range-start {
7157
- background-image: linear-gradient(to right, transparent 50%, var(--vd-colour--do-highlight) 50%);
7157
+ background-image: linear-gradient(to right, transparent 50%, var(--hs-color-bg-go-highlight-default) 50%);
7158
7158
  }
7159
7159
 
7160
7160
  .react-datepicker__day--range-end {
7161
- background-image: linear-gradient(to right, var(--vd-colour--do-highlight) 50%, transparent 50%);
7161
+ background-image: linear-gradient(to right, var(--hs-color-bg-go-highlight-default) 50%, transparent 50%);
7162
7162
  }
7163
7163
 
7164
7164
  .react-datepicker__day--range-start.react-datepicker__day--range-end {
@@ -7195,14 +7195,14 @@ td.vd-show-print {
7195
7195
  height: 10px;
7196
7196
  width: 100%;
7197
7197
  border-radius: 5px;
7198
- background-color: var(--vd-colour--framing);
7198
+ background-color: var(--hs-color-border-neutral-soft);
7199
7199
  overflow: hidden;
7200
7200
  }
7201
7201
 
7202
7202
  .vs-progress-bar {
7203
7203
  height: 100%;
7204
7204
  width: 0%;
7205
- background-color: var(--vd-colour--do);
7205
+ background-color: var(--hs-color-bg-go-default);
7206
7206
  transition: width 0.6s ease;
7207
7207
  }
7208
7208
 
@@ -7220,7 +7220,7 @@ td.vd-show-print {
7220
7220
  .vd-line-graph-container .vd-grid.vd-y .tick line,
7221
7221
  .vd-line-graph-container .vd-axis.vd-y .tick line,
7222
7222
  .vd-line-graph-container .vd-axis.vd-x .tick line {
7223
- stroke: var(--vd-colour--framing);
7223
+ stroke: var(--hs-color-border-neutral-soft);
7224
7224
  stroke-width: 1px;
7225
7225
  fill: transparent;
7226
7226
  }
@@ -7232,12 +7232,12 @@ td.vd-show-print {
7232
7232
  stroke: none;
7233
7233
  }
7234
7234
  .vd-line-graph-container .vd-grid-zero-tick {
7235
- stroke: var(--vd-colour--keyline);
7235
+ stroke: var(--hs-color-border-neutral-strong);
7236
7236
  }
7237
7237
  .vd-line-graph-container .vd-line {
7238
7238
  fill: transparent;
7239
7239
  stroke-width: 2px;
7240
- stroke: var(--vd-colour--keyline);
7240
+ stroke: var(--hs-color-border-neutral-strong);
7241
7241
  }
7242
7242
  .vd-line-graph-container .vd-line-with-fill {
7243
7243
  fill: transparent;
@@ -7250,8 +7250,8 @@ td.vd-show-print {
7250
7250
  stroke-width: 0;
7251
7251
  }
7252
7252
  .vd-line-graph-container .vd-plot-point {
7253
- fill: var(--vd-colour--do);
7254
- stroke: var(--vd-colour--box);
7253
+ fill: var(--hs-color-fg-go-default);
7254
+ stroke: var(--hs-color-bg-neutral-top);
7255
7255
  stroke-width: 2px;
7256
7256
  }
7257
7257
  .vd-line-graph-container .vd-plot-point-with-fill {
@@ -7263,7 +7263,7 @@ td.vd-show-print {
7263
7263
  fill: transparent;
7264
7264
  }
7265
7265
  .vd-line-graph-container .vd-line-wrapper-main .vd-line {
7266
- stroke: var(--vd-colour--supplementary);
7266
+ stroke: var(--hs-color-bg-supplementary-default);
7267
7267
  }
7268
7268
  .vd-line-graph-container .vd-line-wrapper-secondary .vd-plot-point {
7269
7269
  stroke: none;
@@ -7280,7 +7280,7 @@ td.vd-show-print {
7280
7280
  line-height: 1.2;
7281
7281
  font-weight: 900;
7282
7282
  text-transform: uppercase;
7283
- fill: var(--vd-colour--keyline);
7283
+ fill: var(--hs-color-border-neutral-strong);
7284
7284
  }
7285
7285
  .vd-line-graph-container .vd-axis .tick text {
7286
7286
  font-synthesis: none;
@@ -7292,7 +7292,7 @@ td.vd-show-print {
7292
7292
  font-size: 10px;
7293
7293
  line-height: 1.2;
7294
7294
  font-weight: 400;
7295
- fill: var(--vd-colour--text);
7295
+ fill: var(--hs-color-fg-neutral-default);
7296
7296
  }
7297
7297
 
7298
7298
  .vd-chart-popover {
@@ -7311,7 +7311,7 @@ td.vd-show-print {
7311
7311
  box-sizing: border-box;
7312
7312
  margin: 0 auto;
7313
7313
  padding: 0;
7314
- background: var(--vd-colour--box);
7314
+ background: var(--hs-color-bg-neutral-top);
7315
7315
  border-radius: 4px;
7316
7316
  width: calc(90% - 50px);
7317
7317
  pointer-events: auto;
@@ -7488,7 +7488,7 @@ td.vd-show-print {
7488
7488
  display: flex;
7489
7489
  padding-top: 6px;
7490
7490
  padding-bottom: 6px;
7491
- border-bottom: 1px solid var(--vd-colour--keyline);
7491
+ border-bottom: 1px solid var(--hs-color-border-neutral-strong);
7492
7492
  justify-content: space-between;
7493
7493
  align-items: center;
7494
7494
  min-height: 60px;
@@ -7552,7 +7552,7 @@ td.vd-show-print {
7552
7552
  }
7553
7553
 
7554
7554
  .vd-table-list-toggle-icon {
7555
- color: var(--vd-colour--supplementary);
7555
+ color: var(--hs-color-bg-supplementary-default);
7556
7556
  transition: transform 50ms ease-in-out 0s;
7557
7557
  width: 16px;
7558
7558
  height: 16px;
@@ -7609,24 +7609,24 @@ td.vd-show-print {
7609
7609
  border-bottom: 1px solid var(--hs-color-border-neutral-soft);
7610
7610
  }
7611
7611
  .vd-table-list-row.vd-table-list-row--active {
7612
- background-color: var(--vd-colour--go-highlight);
7612
+ background-color: var(--hs-color-bg-go-highlight-default);
7613
7613
  }
7614
7614
 
7615
7615
  .vd-table-list-row--expandable:hover {
7616
7616
  cursor: pointer;
7617
- background-color: var(--vd-colour--go-highlight);
7617
+ background-color: var(--hs-color-bg-go-highlight-default);
7618
7618
  }
7619
7619
 
7620
7620
  .vd-table-list-row--expanded {
7621
- background: var(--vd-colour--box);
7622
- box-shadow: 0 10px 12px -2px var(--vd-colour--shadow);
7621
+ background: var(--hs-color-bg-neutral-top);
7622
+ box-shadow: 0 10px 12px -2px var(--hs-color-overlay-dark-default);
7623
7623
  }
7624
7624
  .vd-table-list-row--expanded .vd-table-list-cell:first-child::before {
7625
7625
  content: "";
7626
7626
  top: -1px;
7627
7627
  left: 0;
7628
7628
  width: 4px;
7629
- background-color: var(--vd-colour--do);
7629
+ background-color: var(--hs-color-fg-go-default);
7630
7630
  bottom: 0;
7631
7631
  z-index: 1;
7632
7632
  position: absolute;
@@ -7636,15 +7636,15 @@ td.vd-show-print {
7636
7636
  }
7637
7637
 
7638
7638
  .vd-table-list-row--actions {
7639
- background-color: var(--vd-colour--framing);
7640
- border-bottom: 1px solid var(--vd-colour--keyline);
7639
+ background-color: var(--hs-color-border-neutral-soft);
7640
+ border-bottom: 1px solid var(--hs-color-border-neutral-strong);
7641
7641
  }
7642
7642
 
7643
7643
  .vd-table-list-row--expanded-content {
7644
7644
  display: none;
7645
7645
  }
7646
7646
  .vd-table-list-row--expanded-content > .vd-table-list-cell {
7647
- background: var(--vd-colour--box);
7647
+ background: var(--hs-color-bg-neutral-top);
7648
7648
  padding: 0;
7649
7649
  }
7650
7650
  .vd-table-list-row--expanded-content > .vd-table-list-cell:first-child::before {
@@ -7652,7 +7652,7 @@ td.vd-show-print {
7652
7652
  top: -1px;
7653
7653
  left: 0;
7654
7654
  width: 4px;
7655
- background-color: var(--vd-colour--do);
7655
+ background-color: var(--hs-color-fg-go-default);
7656
7656
  bottom: 0;
7657
7657
  z-index: 1;
7658
7658
  position: absolute;
@@ -7660,7 +7660,7 @@ td.vd-show-print {
7660
7660
  .vd-table-list-row--expanded-content > .vd-table-list-cell:first-child::after {
7661
7661
  content: "";
7662
7662
  pointer-events: none;
7663
- box-shadow: 0 10px 12px -2px var(--vd-colour--shadow);
7663
+ box-shadow: 0 10px 12px -2px var(--hs-color-overlay-dark-default);
7664
7664
  position: absolute;
7665
7665
  left: 0;
7666
7666
  top: 0;
@@ -7670,7 +7670,7 @@ td.vd-show-print {
7670
7670
  }
7671
7671
 
7672
7672
  .vd-table-list-row--header {
7673
- border-bottom-color: var(--vd-colour--keyline);
7673
+ border-bottom-color: var(--hs-color-border-neutral-strong);
7674
7674
  }
7675
7675
 
7676
7676
  .vd-table-list-expanded-container {
@@ -7744,8 +7744,8 @@ td.vd-show-print {
7744
7744
  position: absolute;
7745
7745
  width: 100%;
7746
7746
  height: 100%;
7747
- color: var(--vd-colour--box);
7748
- background: var(--vd-colour--box) linear-gradient(to left, var(--vd-colour--box) 50%, #e9f6e8 50%) no-repeat;
7747
+ color: var(--hs-color-bg-neutral-top);
7748
+ background: var(--hs-color-bg-neutral-top) linear-gradient(to left, var(--hs-color-bg-neutral-top) 50%, #e9f6e8 50%) no-repeat;
7749
7749
  }
7750
7750
 
7751
7751
  .vd-upsell-primary-background-inner {
@@ -7759,7 +7759,7 @@ td.vd-show-print {
7759
7759
 
7760
7760
  .vd-upsell-primary-upper {
7761
7761
  position: relative;
7762
- background-color: var(--vd-colour--box);
7762
+ background-color: var(--hs-color-bg-neutral-top);
7763
7763
  }
7764
7764
 
7765
7765
  .vd-upsell-primary-background svg {
@@ -7856,7 +7856,7 @@ td.vd-show-print {
7856
7856
  display: flex;
7857
7857
  justify-content: space-between;
7858
7858
  flex-flow: row wrap;
7859
- box-shadow: inset 0 -1px var(--vd-colour--keyline);
7859
+ box-shadow: inset 0 -1px var(--hs-color-border-neutral-strong);
7860
7860
  }
7861
7861
 
7862
7862
  .pm-products-search-open {
@@ -7942,7 +7942,7 @@ td.vd-show-print {
7942
7942
  display: flex;
7943
7943
  flex-direction: row;
7944
7944
  justify-content: space-between;
7945
- background-color: var(--vd-colour--box);
7945
+ background-color: var(--hs-color-bg-neutral-top);
7946
7946
  padding-top: 8px;
7947
7947
  height: auto;
7948
7948
  }
@@ -7969,10 +7969,10 @@ td.vd-show-print {
7969
7969
  width: 8px;
7970
7970
  height: 8px;
7971
7971
  border-radius: 50%;
7972
- background-color: var(--vd-colour--keyline);
7972
+ background-color: var(--hs-color-border-neutral-strong);
7973
7973
  }
7974
7974
  .vd-carousel-wrapper .vd-carousel-paginator-indicator--active::before {
7975
- background-color: var(--vd-colour--do);
7975
+ background-color: var(--hs-color-bg-go-default);
7976
7976
  }
7977
7977
 
7978
7978
  .vd-video-thumbnail-container {
@@ -7989,7 +7989,7 @@ td.vd-show-print {
7989
7989
  margin: auto;
7990
7990
  }
7991
7991
  .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button {
7992
- background-color: var(--vd-colour--background);
7992
+ background-color: var(--hs-color-bg-neutral-backdrop);
7993
7993
  width: 80px;
7994
7994
  height: 80px;
7995
7995
  border-radius: 50%;
@@ -7998,10 +7998,10 @@ td.vd-show-print {
7998
7998
  transform: translateX(3px);
7999
7999
  }
8000
8000
  .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button:hover {
8001
- background-color: var(--vd-colour--supplementary);
8001
+ background-color: var(--hs-color-bg-supplementary-default);
8002
8002
  }
8003
8003
  .vd-video-thumbnail-container .vd-video-play-button-container .vd-video-play-button:active {
8004
- background-color: var(--vd-colour--supplementary);
8004
+ background-color: var(--hs-color-bg-supplementary-default);
8005
8005
  }
8006
8006
  .vd-video-thumbnail-container .vd-video-thumbnail-image {
8007
8007
  position: absolute;
@@ -8035,14 +8035,14 @@ td.vd-show-print {
8035
8035
  top: 0;
8036
8036
  }
8037
8037
  .vd-sticky--top.vd-sticky--stuck {
8038
- box-shadow: 0 20px 40px -20px var(--vd-colour--shadow);
8038
+ box-shadow: 0 20px 40px -20px var(--hs-color-overlay-dark-default);
8039
8039
  }
8040
8040
 
8041
8041
  .vd-sticky--bottom {
8042
8042
  bottom: 0;
8043
8043
  }
8044
8044
  .vd-sticky--bottom.vd-sticky--stuck {
8045
- box-shadow: 0 -20px 40px -20px var(--vd-colour--shadow);
8045
+ box-shadow: 0 -20px 40px -20px var(--hs-color-overlay-dark-default);
8046
8046
  }
8047
8047
 
8048
8048
  .vd-sticky--stuck {