@lightspeed/design-system-css 31.0.0 → 32.0.0

package/dist/index.css

@@ -22,10 +22,13 @@
     --hs-color-bg-supplementary-default-rgb: 91, 131, 172;
     --hs-color-bg-supplementary-soft: #3c6996;
     --hs-color-bg-supplementary-strong: #284563;
+    --hs-color-border-go-default: #477bff;
     --hs-color-border-neutral-inverted-soft: #e7e5e8;
     --hs-color-border-neutral-inverted-strong: #c9c7ca;
     --hs-color-border-neutral-soft: #27252a;
     --hs-color-border-neutral-strong: #37353a;
+    --hs-color-border-no-default: #eb4f29;
+    --hs-color-border-success-default: #15bf20;
     --hs-color-fg-go-default: #477bff;
     --hs-color-fg-neutral-default: #e7e5e8;
     --hs-color-fg-neutral-inverted-default: #0b0b0b;
@@ -33,44 +36,47 @@
     --hs-color-fg-no-default: #eb4f29;
     --hs-color-fg-success-default: #15bf20;
     --hs-color-fg-supplementary-default: #5b83ac;
-    --hs-color-overlay-dark-default: rgba(43, 54, 61, 0.6509803922);
+    --hs-color-overlay-neutral-strong: rgba(43, 54, 61, 0.6509803922);
     --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23E7E5E8" points="10,0 0,10 20,10"/><polygon fill="%23E7E5E8" points="0,36 20,36 10,46 "/></svg>');
   }
   .vd-theme--use-dark-mode.vd-theme--unified {
-    --hs-color-bg-go-default: #4e3aff;
-    --hs-color-bg-go-default-rgb: 78, 58, 255;
-    --hs-color-bg-go-highlight-default: rgba(141, 155, 254, 0.1607843137);
-    --hs-color-bg-go-soft: #3f09e2;
-    --hs-color-bg-go-strong: #6369fd;
+    --hs-color-bg-go-default: #3a1afe;
+    --hs-color-bg-go-default-rgb: 58, 26, 254;
+    --hs-color-bg-go-highlight-default: rgba(134, 157, 255, 0.1607843137);
+    --hs-color-bg-go-soft: #4b59fd;
+    --hs-color-bg-go-strong: #2b13c7;
     --hs-color-bg-neutral-backdrop: #161619;
     --hs-color-bg-neutral-dark-default: black;
-    --hs-color-bg-neutral-edge: #1f1f22;
+    --hs-color-bg-neutral-edge: #1e1e21;
     --hs-color-bg-neutral-inverted-backdrop: #f1f2f7;
     --hs-color-bg-neutral-inverted-top: white;
     --hs-color-bg-neutral-top: #242427;
     --hs-color-bg-neutral-top-rgb: 36, 36, 39;
-    --hs-color-bg-no-default: #ba2c25;
-    --hs-color-bg-no-default-rgb: 186, 44, 37;
-    --hs-color-bg-no-soft: #9d090d;
-    --hs-color-bg-no-strong: #d6483e;
-    --hs-color-bg-success-default: #2e7c31;
-    --hs-color-bg-supplementary-default: #466c96;
-    --hs-color-bg-supplementary-default-rgb: 70, 108, 150;
-    --hs-color-bg-supplementary-soft: #30557d;
-    --hs-color-bg-supplementary-strong: #5c83af;
+    --hs-color-bg-no-default: #ac1b18;
+    --hs-color-bg-no-default-rgb: 172, 27, 24;
+    --hs-color-bg-no-soft: #c83a31;
+    --hs-color-bg-no-strong: #850609;
+    --hs-color-bg-success-default: #18661e;
+    --hs-color-bg-supplementary-default: #365b85;
+    --hs-color-bg-supplementary-default-rgb: 54, 91, 133;
+    --hs-color-bg-supplementary-soft: #5177a2;
+    --hs-color-bg-supplementary-strong: #193f66;
+    --hs-color-border-go-default: #869dff;
     --hs-color-border-neutral-inverted-soft: #e3e4e9;
-    --hs-color-border-neutral-inverted-strong: #c9cacf;
-    --hs-color-border-neutral-soft: #333337;
-    --hs-color-border-neutral-strong: #3d3d41;
-    --hs-color-fg-go-default: #acb9ff;
-    --hs-color-fg-neutral-default: white;
+    --hs-color-border-neutral-inverted-strong: #a4a4a8;
+    --hs-color-border-neutral-soft: #525256;
+    --hs-color-border-neutral-strong: #747478;
+    --hs-color-border-no-default: #f67a6c;
+    --hs-color-border-success-default: #6abb6a;
+    --hs-color-fg-go-default: #a9bbfc;
+    --hs-color-fg-neutral-default: #e3e4e9;
     --hs-color-fg-neutral-inverted-default: #29292c;
     --hs-color-fg-neutral-ondark-default: white;
     --hs-color-fg-no-default: #fda396;
     --hs-color-fg-success-default: #86d586;
     --hs-color-fg-supplementary-default: #99c2f1;
-    --hs-color-overlay-dark-default: rgba(0, 0, 0, 0.5019607843);
-    --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23FFFFFF" points="10,0 0,10 20,10"/><polygon fill="%23FFFFFF" points="0,36 20,36 10,46 "/></svg>');
+    --hs-color-overlay-neutral-strong: rgba(0, 0, 0, 0.5019607843);
+    --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23E3E4E9" points="10,0 0,10 20,10"/><polygon fill="%23E3E4E9" points="0,36 20,36 10,46 "/></svg>');
   }
 }
 :root,
@@ -97,10 +103,13 @@
   --hs-color-bg-supplementary-default-rgb: 50, 87, 125;
   --hs-color-bg-supplementary-soft: #3c6996;
   --hs-color-bg-supplementary-strong: #284563;
+  --hs-color-border-go-default: #3f32f5;
   --hs-color-border-neutral-inverted-soft: #27252a;
   --hs-color-border-neutral-inverted-strong: #37353a;
   --hs-color-border-neutral-soft: #e7e5e8;
   --hs-color-border-neutral-strong: #c9c7ca;
+  --hs-color-border-no-default: #bb2a1a;
+  --hs-color-border-success-default: #0e7b1d;
   --hs-color-fg-go-default: #3f32f5;
   --hs-color-fg-neutral-default: #27252a;
   --hs-color-fg-neutral-inverted-default: #ffffff;
@@ -108,7 +117,7 @@
   --hs-color-fg-no-default: #bb2a1a;
   --hs-color-fg-success-default: #0e7b1d;
   --hs-color-fg-supplementary-default: #32577d;
-  --hs-color-overlay-dark-default: rgba(0, 0, 0, 0.3490196078);
+  --hs-color-overlay-neutral-strong: rgba(0, 0, 0, 0.3490196078);
   --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%2327252A" points="10,0 0,10 20,10"/><polygon fill="%2327252A" points="0,36 20,36 10,46 "/></svg>');
   --vd-colour--solar: #E6B03D;
   --vd-colour--mars: #ED6B44;
@@ -120,40 +129,43 @@
 }
 
 .vd-theme--unified, .vd-theme--light.vd-theme--unified {
-  --hs-color-bg-go-default: #480afd;
-  --hs-color-bg-go-default-rgb: 72, 10, 253;
-  --hs-color-bg-go-highlight-default: rgba(189, 199, 252, 0.1607843137);
-  --hs-color-bg-go-soft: #5855fc;
-  --hs-color-bg-go-strong: #3607c6;
+  --hs-color-bg-go-default: #3a1afe;
+  --hs-color-bg-go-default-rgb: 58, 26, 254;
+  --hs-color-bg-go-highlight-default: rgba(185, 200, 252, 0.1607843137);
+  --hs-color-bg-go-soft: #4b59fd;
+  --hs-color-bg-go-strong: #2b13c7;
   --hs-color-bg-neutral-backdrop: #f1f2f7;
-  --hs-color-bg-neutral-dark-default: #1f1f22;
+  --hs-color-bg-neutral-dark-default: #1e1e21;
   --hs-color-bg-neutral-edge: #e3e4e9;
   --hs-color-bg-neutral-inverted-backdrop: #161619;
-  --hs-color-bg-neutral-inverted-top: #333337;
+  --hs-color-bg-neutral-inverted-top: #242427;
   --hs-color-bg-neutral-top: white;
   --hs-color-bg-neutral-top-rgb: 255, 255, 255;
   --hs-color-bg-no-default: #ac1b18;
   --hs-color-bg-no-default-rgb: 172, 27, 24;
   --hs-color-bg-no-soft: #c83a31;
-  --hs-color-bg-no-strong: #8a0509;
-  --hs-color-bg-success-default: #247028;
-  --hs-color-bg-supplementary-default: #3a608a;
-  --hs-color-bg-supplementary-default-rgb: 58, 96, 138;
+  --hs-color-bg-no-strong: #850609;
+  --hs-color-bg-success-default: #18661e;
+  --hs-color-bg-supplementary-default: #365b85;
+  --hs-color-bg-supplementary-default-rgb: 54, 91, 133;
   --hs-color-bg-supplementary-soft: #5177a2;
-  --hs-color-bg-supplementary-strong: #244971;
-  --hs-color-border-neutral-inverted-soft: #525256;
-  --hs-color-border-neutral-inverted-strong: #69696d;
-  --hs-color-border-neutral-soft: #e3e4e9;
-  --hs-color-border-neutral-strong: #c9cacf;
-  --hs-color-fg-go-default: #480afd;
-  --hs-color-fg-neutral-default: #1f1f22;
+  --hs-color-bg-supplementary-strong: #193f66;
+  --hs-color-border-go-default: #4142fd;
+  --hs-color-border-neutral-inverted-soft: #3d3d41;
+  --hs-color-border-neutral-inverted-strong: #525256;
+  --hs-color-border-neutral-soft: #c9cacf;
+  --hs-color-border-neutral-strong: #98989c;
+  --hs-color-border-no-default: #ba2c25;
+  --hs-color-border-success-default: #257429;
+  --hs-color-fg-go-default: #3217e3;
+  --hs-color-fg-neutral-default: #1e1e21;
   --hs-color-fg-neutral-inverted-default: white;
   --hs-color-fg-neutral-ondark-default: white;
-  --hs-color-fg-no-default: #ac1b18;
-  --hs-color-fg-success-default: #247028;
-  --hs-color-fg-supplementary-default: #3a608a;
-  --hs-color-overlay-dark-default: rgba(0, 0, 0, 0.5019607843);
-  --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%231F1F22" points="10,0 0,10 20,10"/><polygon fill="%231F1F22" points="0,36 20,36 10,46 "/></svg>');
+  --hs-color-fg-no-default: #990108;
+  --hs-color-fg-success-default: #06560f;
+  --hs-color-fg-supplementary-default: #264b73;
+  --hs-color-overlay-neutral-strong: rgba(0, 0, 0, 0.5019607843);
+  --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%231E1E21" points="10,0 0,10 20,10"/><polygon fill="%231E1E21" points="0,36 20,36 10,46 "/></svg>');
 }
 
 .vd-theme--dark {
@@ -179,10 +191,13 @@
   --hs-color-bg-supplementary-default-rgb: 91, 131, 172;
   --hs-color-bg-supplementary-soft: #3c6996;
   --hs-color-bg-supplementary-strong: #284563;
+  --hs-color-border-go-default: #477bff;
   --hs-color-border-neutral-inverted-soft: #e7e5e8;
   --hs-color-border-neutral-inverted-strong: #c9c7ca;
   --hs-color-border-neutral-soft: #27252a;
   --hs-color-border-neutral-strong: #37353a;
+  --hs-color-border-no-default: #eb4f29;
+  --hs-color-border-success-default: #15bf20;
   --hs-color-fg-go-default: #477bff;
   --hs-color-fg-neutral-default: #e7e5e8;
   --hs-color-fg-neutral-inverted-default: #0b0b0b;
@@ -190,44 +205,47 @@
   --hs-color-fg-no-default: #eb4f29;
   --hs-color-fg-success-default: #15bf20;
   --hs-color-fg-supplementary-default: #5b83ac;
-  --hs-color-overlay-dark-default: rgba(43, 54, 61, 0.6509803922);
+  --hs-color-overlay-neutral-strong: rgba(43, 54, 61, 0.6509803922);
   --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23E7E5E8" points="10,0 0,10 20,10"/><polygon fill="%23E7E5E8" points="0,36 20,36 10,46 "/></svg>');
 }
 .vd-theme--dark.vd-theme--unified {
-  --hs-color-bg-go-default: #4e3aff;
-  --hs-color-bg-go-default-rgb: 78, 58, 255;
-  --hs-color-bg-go-highlight-default: rgba(141, 155, 254, 0.1607843137);
-  --hs-color-bg-go-soft: #3f09e2;
-  --hs-color-bg-go-strong: #6369fd;
+  --hs-color-bg-go-default: #3a1afe;
+  --hs-color-bg-go-default-rgb: 58, 26, 254;
+  --hs-color-bg-go-highlight-default: rgba(134, 157, 255, 0.1607843137);
+  --hs-color-bg-go-soft: #4b59fd;
+  --hs-color-bg-go-strong: #2b13c7;
   --hs-color-bg-neutral-backdrop: #161619;
   --hs-color-bg-neutral-dark-default: black;
-  --hs-color-bg-neutral-edge: #1f1f22;
+  --hs-color-bg-neutral-edge: #1e1e21;
   --hs-color-bg-neutral-inverted-backdrop: #f1f2f7;
   --hs-color-bg-neutral-inverted-top: white;
   --hs-color-bg-neutral-top: #242427;
   --hs-color-bg-neutral-top-rgb: 36, 36, 39;
-  --hs-color-bg-no-default: #ba2c25;
-  --hs-color-bg-no-default-rgb: 186, 44, 37;
-  --hs-color-bg-no-soft: #9d090d;
-  --hs-color-bg-no-strong: #d6483e;
-  --hs-color-bg-success-default: #2e7c31;
-  --hs-color-bg-supplementary-default: #466c96;
-  --hs-color-bg-supplementary-default-rgb: 70, 108, 150;
-  --hs-color-bg-supplementary-soft: #30557d;
-  --hs-color-bg-supplementary-strong: #5c83af;
+  --hs-color-bg-no-default: #ac1b18;
+  --hs-color-bg-no-default-rgb: 172, 27, 24;
+  --hs-color-bg-no-soft: #c83a31;
+  --hs-color-bg-no-strong: #850609;
+  --hs-color-bg-success-default: #18661e;
+  --hs-color-bg-supplementary-default: #365b85;
+  --hs-color-bg-supplementary-default-rgb: 54, 91, 133;
+  --hs-color-bg-supplementary-soft: #5177a2;
+  --hs-color-bg-supplementary-strong: #193f66;
+  --hs-color-border-go-default: #869dff;
   --hs-color-border-neutral-inverted-soft: #e3e4e9;
-  --hs-color-border-neutral-inverted-strong: #c9cacf;
-  --hs-color-border-neutral-soft: #333337;
-  --hs-color-border-neutral-strong: #3d3d41;
-  --hs-color-fg-go-default: #acb9ff;
-  --hs-color-fg-neutral-default: white;
+  --hs-color-border-neutral-inverted-strong: #a4a4a8;
+  --hs-color-border-neutral-soft: #525256;
+  --hs-color-border-neutral-strong: #747478;
+  --hs-color-border-no-default: #f67a6c;
+  --hs-color-border-success-default: #6abb6a;
+  --hs-color-fg-go-default: #a9bbfc;
+  --hs-color-fg-neutral-default: #e3e4e9;
   --hs-color-fg-neutral-inverted-default: #29292c;
   --hs-color-fg-neutral-ondark-default: white;
   --hs-color-fg-no-default: #fda396;
   --hs-color-fg-success-default: #86d586;
   --hs-color-fg-supplementary-default: #99c2f1;
-  --hs-color-overlay-dark-default: rgba(0, 0, 0, 0.5019607843);
-  --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23FFFFFF" points="10,0 0,10 20,10"/><polygon fill="%23FFFFFF" points="0,36 20,36 10,46 "/></svg>');
+  --hs-color-overlay-neutral-strong: rgba(0, 0, 0, 0.5019607843);
+  --hs-color-select-arrows-bg: url('data:image/svg+xml,<svg width="20" height="46" xmlns="http://www.w3.org/2000/svg"><polygon fill="%23E3E4E9" points="10,0 0,10 20,10"/><polygon fill="%23E3E4E9" points="0,36 20,36 10,46 "/></svg>');
 }
 
 body {
@@ -1154,10 +1172,10 @@ details,
   position: relative;
 }
 .vd-select-container.vd-error .vd-select {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .vd-select-container.vd-error .vd-select:focus {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .vd-select {
@@ -1185,7 +1203,7 @@ details,
   background-image: var(--hs-color-select-arrows-bg);
 }
 .vd-select::placeholder {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
   opacity: 1;
 }
 .vd-select:placeholder-shown {
@@ -1201,14 +1219,14 @@ details,
   }
 }
 .vd-select:focus, .vd-select.vd-focus {
-  border-color: var(--hs-color-fg-go-default);
-  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
+  box-shadow: 0 0 3px var(--hs-color-border-go-default);
 }
 .vd-select.vd-input--error, .vd-select.vd-error, .vd-select.ng-invalid.ng-dirty, .ng-submitted .vd-select.ng-invalid {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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 {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .vd-select-group {
@@ -1316,7 +1334,7 @@ details,
   transition-property: border-color, box-shadow;
 }
 .vd-input::placeholder {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
   opacity: 1;
 }
 .vd-input:placeholder-shown {
@@ -1332,14 +1350,14 @@ details,
   }
 }
 .vd-input:focus, .vd-input.vd-focus {
-  border-color: var(--hs-color-fg-go-default);
-  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
+  box-shadow: 0 0 3px var(--hs-color-border-go-default);
 }
 .vd-input.vd-input--error, .vd-input.vd-error, .vd-input.ng-invalid.ng-dirty, .ng-submitted .vd-input.ng-invalid {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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 {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .vd-input-error-message-section {
@@ -1403,10 +1421,10 @@ details,
   display: flex;
 }
 .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 {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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 {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .vd-autocomplete-input-typeahead {
@@ -1432,7 +1450,7 @@ details,
   white-space: nowrap;
 }
 .vd-autocomplete-input-typeahead::placeholder {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
   opacity: 1;
 }
 .vd-autocomplete-input-typeahead:placeholder-shown {
@@ -1459,10 +1477,10 @@ details,
   display: block;
 }
 .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 {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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 {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .vd-autocomplete-filter-input-container {
@@ -1507,14 +1525,14 @@ details,
   text-transform: capitalize;
 }
 .vd-autocomplete-select-placeholder:focus, .vd-autocomplete-select-placeholder.vd-focus {
-  border-color: var(--hs-color-fg-go-default);
-  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
+  box-shadow: 0 0 3px var(--hs-color-border-go-default);
 }
 .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 {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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 {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .vd-autocomplete-filter-icon {
@@ -1522,7 +1540,7 @@ details,
   z-index: 1;
   margin-left: 14px;
   margin-top: 14px;
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
 }
 
 .vd-autocomplete-filter-button-label {
@@ -1534,7 +1552,7 @@ details,
   align-items: center;
   justify-content: space-between;
   min-height: 45px;
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
 }
 @media only screen and (max-width: 768px) {
   .vd-action-bar {
@@ -1565,7 +1583,7 @@ details,
 }
 
 .vd-avatar {
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -1664,7 +1682,7 @@ details,
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
   position: relative;
 }
 .vd-avatar-multi-tile[vd-lazy-load*="placeholder.svg"] {
@@ -1799,7 +1817,7 @@ details,
 }
 
 .vd-banner--negative {
-  background-color: var(--hs-color-fg-no-default);
+  background-color: var(--hs-color-bg-no-default);
   color: var(--hs-color-fg-neutral-ondark-default);
   border: none;
   border-left: none;
@@ -1815,7 +1833,7 @@ details,
 }
 
 .vd-banner--success {
-  background-color: var(--hs-color-fg-success-default);
+  background-color: var(--hs-color-bg-success-default);
   color: var(--hs-color-fg-neutral-ondark-default);
   border: none;
   border-left: none;
@@ -2213,7 +2231,7 @@ a.vd-btn.disabled {
   filter: grayscale(100%);
 }
 .vd-btn-panel:focus {
-  border-color: var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
   box-shadow: 0 0 3px 2px rgba(var(--hs-color-bg-go-default-rgb), 0.35);
 }
 .vd-btn-panel:hover {
@@ -2225,7 +2243,7 @@ a.vd-btn.disabled {
 }
 
 .vd-btn-panel--selected {
-  border-color: var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
 }
 .vd-btn-panel--selected:focus, .vd-btn-panel--selected:hover {
   border-color: var(--hs-color-bg-go-soft);
@@ -2276,7 +2294,7 @@ a.vd-btn.disabled {
   right: 1em;
   content: "";
   bottom: 0;
-  box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-dark-default);
+  box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-neutral-strong);
 }
 
 vd-carousel {
@@ -2512,7 +2530,7 @@ vd-carousel-frame {
 .vd-checkbox-input:checked + .vd-checkbox-tick {
   transition: background-color 0.8s;
   background-color: var(--hs-color-bg-go-default);
-  border-color: var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-bg-go-default);
 }
 .vd-checkbox-input:checked + .vd-checkbox-tick:after {
   opacity: 1;
@@ -2542,7 +2560,7 @@ vd-carousel-frame {
 }
 
 .vd-checkbox--mixed .vd-checkbox-tick {
-  border: 2px solid var(--hs-color-fg-go-default);
+  border: 2px solid var(--hs-color-bg-go-default);
 }
 
 .vd-checkbox--mixed .vd-checkbox-input:not(:checked) + .vd-checkbox-tick:after {
@@ -2815,7 +2833,7 @@ vd-carousel-frame {
 }
 .vd-datepicker .pika-title .pika-select::placeholder,
 .vd-datepicker-range .pika-title .pika-select::placeholder {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
   opacity: 1;
 }
 .vd-datepicker .pika-title .pika-select:placeholder-shown,
@@ -2836,15 +2854,15 @@ vd-carousel-frame {
 .vd-datepicker .pika-title .pika-select:focus, .vd-datepicker .pika-title .pika-select.vd-focus,
 .vd-datepicker-range .pika-title .pika-select:focus,
 .vd-datepicker-range .pika-title .pika-select.vd-focus {
-  border-color: var(--hs-color-fg-go-default);
-  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
+  box-shadow: 0 0 3px var(--hs-color-border-go-default);
 }
 .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,
 .vd-datepicker-range .pika-title .pika-select.vd-input--error,
 .vd-datepicker-range .pika-title .pika-select.vd-error,
 .vd-datepicker-range .pika-title .pika-select.ng-invalid.ng-dirty,
 .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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,
 .vd-datepicker-range .pika-title .pika-select.vd-input--error:focus,
@@ -2855,7 +2873,7 @@ vd-carousel-frame {
 .vd-datepicker-range .pika-title .pika-select.ng-invalid.ng-dirty.vd-focus,
 .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid:focus,
 .ng-submitted .vd-datepicker-range .pika-title .pika-select.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 .vd-datepicker .pika-title .pika-select-month,
 .vd-datepicker-range .pika-title .pika-select-month {
@@ -3299,7 +3317,7 @@ vd-carousel-frame {
   font-size: 12px;
 }
 .vd-modal--size-full-screen .vd-dialog-close-label {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
   font-weight: bold;
 }
 @media only screen and (max-width: 768px) {
@@ -3345,13 +3363,13 @@ vd-dott,
 
 .vd-dott-border:not(.vd-input--error):not(.vd-error) {
   border: initial;
-  border-top: 2px solid var(--hs-color-fg-go-default);
-  border-bottom: 2px solid var(--hs-color-fg-success-default);
-  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));
+  border-top: 2px solid var(--hs-color-border-go-default);
+  border-bottom: 2px solid var(--hs-color-border-success-default);
+  background-image: linear-gradient(var(--hs-color-border-go-default), var(--hs-color-border-success-default)), linear-gradient(var(--hs-color-border-go-default), var(--hs-color-border-success-default));
   background-size: 2px 100%;
   background-position: 0 0, 100% 0;
   background-repeat: no-repeat;
-  box-shadow: 0 0 4px 0 var(--hs-color-fg-go-default);
+  box-shadow: 0 0 4px 0 var(--hs-color-border-go-default);
 }
 
 .vd-dropdown-input {
@@ -3362,10 +3380,10 @@ vd-dott,
 }
 
 .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 {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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 {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .vd-expandable-content {
@@ -3494,7 +3512,7 @@ vd-dott,
   font-weight: 900;
   text-transform: uppercase;
   padding: 4px 8px;
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
   border-radius: 4px;
   display: inline-block;
   vertical-align: text-top;
@@ -3884,7 +3902,7 @@ vd-dott,
   font-weight: 400;
   padding: 6px 10px;
   color: var(--hs-color-fg-supplementary-default);
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
   border-radius: 4px;
   display: inline-block;
   margin-right: 4px;
@@ -3947,18 +3965,18 @@ vd-dott,
   transition-property: border-color, box-shadow;
 }
 .vd-lozenge-group:focus, .vd-lozenge-group.vd-focus {
-  border-color: var(--hs-color-fg-go-default);
-  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
+  box-shadow: 0 0 3px var(--hs-color-border-go-default);
 }
 .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 {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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 {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 .vd-lozenge-group:focus-within {
-  border-color: var(--hs-color-fg-go-default);
-  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
+  box-shadow: 0 0 3px var(--hs-color-border-go-default);
 }
 .vd-lozenge-group .vd-lozenge {
   margin-left: 4px;
@@ -3986,7 +4004,7 @@ vd-dott,
   flex-grow: 1;
 }
 .vd-lozenge-group .vd-lozenge-group-input::placeholder {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
   opacity: 1;
 }
 .vd-lozenge-group .vd-lozenge-group-input:placeholder-shown {
@@ -4113,7 +4131,7 @@ vd-dott,
 
 .vd-overlay--visible {
   visibility: visible;
-  background-color: var(--hs-color-overlay-dark-default);
+  background-color: var(--hs-color-overlay-neutral-strong);
   pointer-events: auto;
 }
 
@@ -4212,7 +4230,7 @@ vd-dott,
 .vd-popover {
   position: relative;
   border-radius: 5px;
-  filter: drop-shadow(0 4px 5px var(--hs-color-overlay-dark-default));
+  filter: drop-shadow(0 4px 5px var(--hs-color-overlay-neutral-strong));
   background-color: var(--hs-color-bg-neutral-top);
 }
 .vd-popover-tether-pinned-bottom .vd-popover {
@@ -4251,7 +4269,7 @@ vd-dott,
   transform: rotate(45deg);
 }
 .vd-popover-tether-element-attached-bottom.vd-popover-tether-target-attached-top .vd-popover-actions:not(:empty) ~ .vd-popover-beak {
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
 }
 .vd-popover-tether-pinned .vd-popover-beak {
   display: none;
@@ -4309,10 +4327,10 @@ vd-dott,
   color: var(--hs-color-fg-neutral-default);
 }
 .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 {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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 {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .vd-multiselect-popover-content-container {
@@ -4712,7 +4730,7 @@ vd-dott,
 .vd-radio-input:checked + .vd-radio-tick {
   transition: background-color 0.8s;
   background-color: var(--hs-color-bg-go-default);
-  border-color: var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-bg-go-default);
 }
 .vd-radio-input:checked + .vd-radio-tick:after {
   opacity: 1;
@@ -4779,7 +4797,7 @@ vd-dott,
 }
 .vd-scrollable-indicator::before {
   content: "";
-  box-shadow: 0 0 30px var(--hs-color-overlay-dark-default);
+  box-shadow: 0 0 30px var(--hs-color-overlay-neutral-strong);
   border-radius: 100%;
   width: 100%;
   height: 100%;
@@ -4861,7 +4879,7 @@ vd-section .vd-section,
 
 .vd-section--secondary,
 .vd-section--secondary .vd-section-container {
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
 }
 
 .vd-section--tertiary,
@@ -4893,7 +4911,7 @@ vd-section .vd-section,
   right: 1em;
   content: "";
   bottom: 0;
-  box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-dark-default);
+  box-shadow: 0 0.1em 4em 0 var(--hs-color-overlay-neutral-strong);
 }
 .vd-section--fixed::after {
   animation: vd-fade-in 0.2s ease-in-out;
@@ -4907,7 +4925,7 @@ vd-section .vd-section,
 
 .vd-section--action-bar,
 .vd-section--action-bar .vd-section-container {
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
 }
 .vd-section--action-bar .vd-section-wrap {
   min-height: 45px;
@@ -4986,7 +5004,7 @@ vd-section .vd-section,
 }
 
 .vd-segcontrol--selected .vd-segcontrol-button {
-  border-color: var(--hs-color-fg-go-default) !important;
+  border-color: var(--hs-color-border-go-default) !important;
   z-index: 3;
 }
 
@@ -5042,7 +5060,7 @@ vd-section .vd-section,
 }
 
 .vd-splash-fullscreen-container {
-  border: 20px solid var(--hs-color-overlay-dark-default);
+  border: 20px solid var(--hs-color-overlay-neutral-strong);
   box-sizing: border-box;
   display: block;
   position: fixed;
@@ -5190,7 +5208,7 @@ vd-section .vd-section,
   height: 36px;
   border-radius: 36px;
   box-sizing: border-box;
-  border: 2px solid var(--hs-color-fg-go-default);
+  border: 2px solid var(--hs-color-bg-go-default);
   background-color: var(--hs-color-bg-neutral-top);
   transition: background-color 0.5s ease-in-out;
 }
@@ -5235,7 +5253,7 @@ vd-section .vd-section,
   float: left;
   border-radius: inherit;
   box-sizing: border-box;
-  border: 2px solid var(--hs-color-fg-go-default);
+  border: 2px solid var(--hs-color-bg-go-default);
   background-color: var(--hs-color-bg-neutral-top);
   pointer-events: none;
   width: 36px;
@@ -5474,7 +5492,7 @@ table {
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--hs-color-fg-go-default);
+  background-color: var(--hs-color-border-go-default);
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -5997,7 +6015,7 @@ td.vd-show-print {
   background-color: var(--hs-color-bg-go-highlight-default);
 }
 .vd-id-badge.vd-id-badge--current {
-  border-color: var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
 }
 .vd-id-badge.vd-id-badge--small .vd-id-badge__content {
   padding: 8px;
@@ -6100,7 +6118,7 @@ td.vd-show-print {
 }
 
 .vd-id-badge__image {
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
@@ -6715,11 +6733,11 @@ td.vd-show-print {
   border-bottom: 1px solid var(--hs-color-border-neutral-strong);
 }
 .vd-datatable-row--header-sections:nth-child(odd), .vd-datatable-row--header-sections:nth-child(even) {
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
 }
 
 .vd-datatable-row--footer:nth-child(odd), .vd-datatable-row--footer:nth-child(even) {
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
 }
 
 .vd-datatable-foot.vd-sticky .vd-datatable-row--footer:last-of-type .vd-datatable-cell {
@@ -6741,7 +6759,7 @@ td.vd-show-print {
   left: 0;
   width: 100%;
   height: 30px;
-  box-shadow: inset 0 -30px 40px -48px var(--hs-color-overlay-dark-default);
+  box-shadow: inset 0 -30px 40px -48px var(--hs-color-overlay-neutral-strong);
 }
 
 .vd-datatable-cell {
@@ -6986,7 +7004,7 @@ td.vd-show-print {
 }
 .react-datepicker__month-select::placeholder,
 .react-datepicker__year-select::placeholder {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
   opacity: 1;
 }
 .react-datepicker__month-select:placeholder-shown,
@@ -7007,15 +7025,15 @@ td.vd-show-print {
 .react-datepicker__month-select:focus, .react-datepicker__month-select.vd-focus,
 .react-datepicker__year-select:focus,
 .react-datepicker__year-select.vd-focus {
-  border-color: var(--hs-color-fg-go-default);
-  box-shadow: 0 0 3px var(--hs-color-fg-go-default);
+  border-color: var(--hs-color-border-go-default);
+  box-shadow: 0 0 3px var(--hs-color-border-go-default);
 }
 .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,
 .react-datepicker__year-select.vd-input--error,
 .react-datepicker__year-select.vd-error,
 .react-datepicker__year-select.ng-invalid.ng-dirty,
 .ng-submitted .react-datepicker__year-select.ng-invalid {
-  border-color: var(--hs-color-fg-no-default);
+  border-color: var(--hs-color-border-no-default);
 }
 .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,
 .react-datepicker__year-select.vd-input--error:focus,
@@ -7026,7 +7044,7 @@ td.vd-show-print {
 .react-datepicker__year-select.ng-invalid.ng-dirty.vd-focus,
 .ng-submitted .react-datepicker__year-select.ng-invalid:focus,
 .ng-submitted .react-datepicker__year-select.ng-invalid.vd-focus {
-  box-shadow: 0 0 3px var(--hs-color-fg-no-default);
+  box-shadow: 0 0 3px var(--hs-color-border-no-default);
 }
 
 .react-datepicker__month-select {
@@ -7158,7 +7176,7 @@ td.vd-show-print {
   height: 10px;
   width: 100%;
   border-radius: 5px;
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
   overflow: hidden;
 }
 
@@ -7213,7 +7231,7 @@ td.vd-show-print {
   stroke-width: 0;
 }
 .vd-line-graph-container .vd-plot-point {
-  fill: var(--hs-color-fg-go-default);
+  fill: var(--hs-color-bg-go-default);
   stroke: var(--hs-color-bg-neutral-top);
   stroke-width: 2px;
 }
@@ -7515,7 +7533,7 @@ td.vd-show-print {
 }
 
 .vd-table-list-toggle-icon {
-  color: var(--hs-color-bg-supplementary-default);
+  color: var(--hs-color-fg-supplementary-default);
   transition: transform 50ms ease-in-out 0s;
   width: 16px;
   height: 16px;
@@ -7582,14 +7600,14 @@ td.vd-show-print {
 
 .vd-table-list-row--expanded {
   background: var(--hs-color-bg-neutral-top);
-  box-shadow: 0 10px 12px -2px var(--hs-color-overlay-dark-default);
+  box-shadow: 0 10px 12px -2px var(--hs-color-overlay-neutral-strong);
 }
 .vd-table-list-row--expanded .vd-table-list-cell:first-child::before {
   content: "";
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--hs-color-fg-go-default);
+  background-color: var(--hs-color-border-go-default);
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -7599,7 +7617,7 @@ td.vd-show-print {
 }
 
 .vd-table-list-row--actions {
-  background-color: var(--hs-color-border-neutral-soft);
+  background-color: var(--hs-color-bg-neutral-edge);
   border-bottom: 1px solid var(--hs-color-border-neutral-strong);
 }
 
@@ -7615,7 +7633,7 @@ td.vd-show-print {
   top: -1px;
   left: 0;
   width: 4px;
-  background-color: var(--hs-color-fg-go-default);
+  background-color: var(--hs-color-border-go-default);
   bottom: 0;
   z-index: 1;
   position: absolute;
@@ -7623,7 +7641,7 @@ td.vd-show-print {
 .vd-table-list-row--expanded-content > .vd-table-list-cell:first-child::after {
   content: "";
   pointer-events: none;
-  box-shadow: 0 10px 12px -2px var(--hs-color-overlay-dark-default);
+  box-shadow: 0 10px 12px -2px var(--hs-color-overlay-neutral-strong);
   position: absolute;
   left: 0;
   top: 0;
@@ -7998,14 +8016,14 @@ td.vd-show-print {
   top: 0;
 }
 .vd-sticky--top.vd-sticky--stuck {
-  box-shadow: 0 20px 40px -20px var(--hs-color-overlay-dark-default);
+  box-shadow: 0 20px 40px -20px var(--hs-color-overlay-neutral-strong);
 }
 
 .vd-sticky--bottom {
   bottom: 0;
 }
 .vd-sticky--bottom.vd-sticky--stuck {
-  box-shadow: 0 -20px 40px -20px var(--hs-color-overlay-dark-default);
+  box-shadow: 0 -20px 40px -20px var(--hs-color-overlay-neutral-strong);
 }
 
 .vd-sticky--stuck {