@deephaven/components 0.60.1-beta.5 → 0.60.1-object-fetcher.6

package/css/BaseStyleSheet.css

@@ -1650,7 +1650,7 @@ pre code {
   background-color: var(--dh-color-input-bg);
   border-color: var(--dh-color-input-focus-border);
   outline: 0;
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .form-control::placeholder {
   color: var(--dh-color-input-placeholder);
@@ -1845,7 +1845,7 @@ textarea.form-control {
   border-color: var(--dh-color-positive-bg);
 }
 .was-validated .form-control:valid:focus-visible, .form-control.is-valid:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 
 .was-validated select.form-control:valid, select.form-control.is-valid {
@@ -1867,7 +1867,7 @@ textarea.form-control {
   border-color: var(--dh-color-positive-bg);
 }
 .was-validated .custom-select:valid:focus-visible, .custom-select.is-valid:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 
 .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
@@ -1890,7 +1890,7 @@ textarea.form-control {
   background-color: var(--dh-color-positive-bg);
 }
 .was-validated .custom-control-input:valid:focus-visible ~ .custom-control-label::before, .custom-control-input.is-valid:focus-visible ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
   border-color: var(--dh-color-positive-bg);
@@ -1903,7 +1903,7 @@ textarea.form-control {
   border-color: var(--dh-color-positive-bg);
 }
 .was-validated .custom-file-input:valid:focus-visible ~ .custom-file-label, .custom-file-input.is-valid:focus-visible ~ .custom-file-label {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 
 .invalid-feedback {
@@ -1952,7 +1952,7 @@ textarea.form-control {
   border-color: var(--dh-color-negative-bg);
 }
 .was-validated .form-control:invalid:focus-visible, .form-control.is-invalid:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 
 .was-validated select.form-control:invalid, select.form-control.is-invalid {
@@ -1974,7 +1974,7 @@ textarea.form-control {
   border-color: var(--dh-color-negative-bg);
 }
 .was-validated .custom-select:invalid:focus-visible, .custom-select.is-invalid:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 
 .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
@@ -1997,7 +1997,7 @@ textarea.form-control {
   background-color: var(--dh-color-negative-bg);
 }
 .was-validated .custom-control-input:invalid:focus-visible ~ .custom-control-label::before, .custom-control-input.is-invalid:focus-visible ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
   border-color: var(--dh-color-negative-bg);
@@ -2010,7 +2010,7 @@ textarea.form-control {
   border-color: var(--dh-color-negative-bg);
 }
 .was-validated .custom-file-input:invalid:focus-visible ~ .custom-file-label, .custom-file-input.is-invalid:focus-visible ~ .custom-file-label {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 
 .form-inline {
@@ -2096,7 +2096,7 @@ textarea.form-control {
 }
 .btn:focus, .btn.focus {
   outline: 0;
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .btn.disabled, .btn:disabled {
   opacity: 0.65;
@@ -2126,7 +2126,7 @@ fieldset:disabled a.btn {
   color: var(--dh-color-accent-contrast);
   background-color: var(--dh-color-accent-hover-bg);
   border-color: var(--dh-color-accent-hover-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.5);
 }
 .btn-primary.disabled, .btn-primary:disabled {
   color: var(--dh-color-text-disabled);
@@ -2140,7 +2140,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-accent-down-bg);
 }
 .btn-primary:not(:disabled):not(.disabled):active:focus-visible, .btn-primary:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-primary.dropdown-toggle:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.5);
 }
 
 .btn-secondary {
@@ -2160,7 +2160,7 @@ fieldset:disabled a.btn {
   color: var(--dh-color-neutral-contrast);
   background-color: var(--dh-color-neutral-hover-bg);
   border-color: var(--dh-color-neutral-hover-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-neutral-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-neutral-hsl), 0.5);
 }
 .btn-secondary.disabled, .btn-secondary:disabled {
   color: var(--dh-color-text-disabled);
@@ -2174,7 +2174,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-neutral-down-bg);
 }
 .btn-secondary:not(:disabled):not(.disabled):active:focus-visible, .btn-secondary:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-secondary.dropdown-toggle:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-neutral-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-neutral-hsl), 0.5);
 }
 
 .btn-success {
@@ -2194,7 +2194,7 @@ fieldset:disabled a.btn {
   color: var(--dh-color-positive-contrast);
   background-color: var(--dh-color-positive-hover-bg);
   border-color: var(--dh-color-positive-hover-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-positive-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-positive-hsl), 0.5);
 }
 .btn-success.disabled, .btn-success:disabled {
   color: var(--dh-color-text-disabled);
@@ -2208,7 +2208,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-positive-down-bg);
 }
 .btn-success:not(:disabled):not(.disabled):active:focus-visible, .btn-success:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-success.dropdown-toggle:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-positive-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-positive-hsl), 0.5);
 }
 
 .btn-info {
@@ -2228,7 +2228,7 @@ fieldset:disabled a.btn {
   color: var(--dh-color-info-contrast);
   background-color: var(--dh-color-info-hover-bg);
   border-color: var(--dh-color-info-hover-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-info-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-info-hsl), 0.5);
 }
 .btn-info.disabled, .btn-info:disabled {
   color: var(--dh-color-text-disabled);
@@ -2242,7 +2242,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-info-down-bg);
 }
 .btn-info:not(:disabled):not(.disabled):active:focus-visible, .btn-info:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-info.dropdown-toggle:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-info-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-info-hsl), 0.5);
 }
 
 .btn-warning {
@@ -2262,7 +2262,7 @@ fieldset:disabled a.btn {
   color: var(--dh-color-notice-contrast);
   background-color: var(--dh-color-notice-hover-bg);
   border-color: var(--dh-color-notice-hover-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-notice-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-notice-hsl), 0.5);
 }
 .btn-warning.disabled, .btn-warning:disabled {
   color: var(--dh-color-text-disabled);
@@ -2276,7 +2276,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-notice-down-bg);
 }
 .btn-warning:not(:disabled):not(.disabled):active:focus-visible, .btn-warning:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-warning.dropdown-toggle:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-notice-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-notice-hsl), 0.5);
 }
 
 .btn-danger {
@@ -2296,7 +2296,7 @@ fieldset:disabled a.btn {
   color: var(--dh-color-negative-contrast);
   background-color: var(--dh-color-negative-hover-bg);
   border-color: var(--dh-color-negative-hover-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-negative-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-negative-hsl), 0.5);
 }
 .btn-danger.disabled, .btn-danger:disabled {
   color: var(--dh-color-text-disabled);
@@ -2310,7 +2310,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-negative-down-bg);
 }
 .btn-danger:not(:disabled):not(.disabled):active:focus-visible, .btn-danger:not(:disabled):not(.disabled).active:focus-visible, .show > .btn-danger.dropdown-toggle:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-negative-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-negative-hsl), 0.5);
 }
 
 .btn-outline-primary {
@@ -2323,7 +2323,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-accent-hover-bg);
 }
 .btn-outline-primary:focus, .btn-outline-primary.focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.5);
 }
 .btn-outline-primary.disabled, .btn-outline-primary:disabled {
   color: var(--dh-color-text-disabled);
@@ -2337,7 +2337,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-accent-down-bg);
 }
 .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.5);
 }
 
 .btn-outline-secondary {
@@ -2350,7 +2350,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-neutral-hover-bg);
 }
 .btn-outline-secondary:focus, .btn-outline-secondary.focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-neutral-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-neutral-hsl), 0.5);
 }
 .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
   color: var(--dh-color-text-disabled);
@@ -2364,7 +2364,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-neutral-down-bg);
 }
 .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-secondary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-neutral-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-neutral-hsl), 0.5);
 }
 
 .btn-outline-success {
@@ -2377,7 +2377,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-positive-hover-bg);
 }
 .btn-outline-success:focus, .btn-outline-success.focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-positive-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-positive-hsl), 0.5);
 }
 .btn-outline-success.disabled, .btn-outline-success:disabled {
   color: var(--dh-color-text-disabled);
@@ -2391,7 +2391,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-positive-down-bg);
 }
 .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-success.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-positive-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-positive-hsl), 0.5);
 }
 
 .btn-outline-info {
@@ -2404,7 +2404,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-info-hover-bg);
 }
 .btn-outline-info:focus, .btn-outline-info.focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-info-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-info-hsl), 0.5);
 }
 .btn-outline-info.disabled, .btn-outline-info:disabled {
   color: var(--dh-color-text-disabled);
@@ -2418,7 +2418,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-info-down-bg);
 }
 .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-info.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-info-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-info-hsl), 0.5);
 }
 
 .btn-outline-warning {
@@ -2431,7 +2431,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-notice-hover-bg);
 }
 .btn-outline-warning:focus, .btn-outline-warning.focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-notice-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-notice-hsl), 0.5);
 }
 .btn-outline-warning.disabled, .btn-outline-warning:disabled {
   color: var(--dh-color-text-disabled);
@@ -2445,7 +2445,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-notice-down-bg);
 }
 .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-warning.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-notice-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-notice-hsl), 0.5);
 }
 
 .btn-outline-danger {
@@ -2458,7 +2458,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-negative-hover-bg);
 }
 .btn-outline-danger:focus, .btn-outline-danger.focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-negative-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-negative-hsl), 0.5);
 }
 .btn-outline-danger.disabled, .btn-outline-danger:disabled {
   color: var(--dh-color-text-disabled);
@@ -2472,7 +2472,7 @@ fieldset:disabled a.btn {
   border-color: var(--dh-color-negative-down-bg);
 }
 .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-danger.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-negative-bg) 50%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-negative-hsl), 0.5);
 }
 
 .btn-link {
@@ -3107,7 +3107,7 @@ input[type=button].btn-block {
   background-color: var(--dh-color-input-fg);
 }
 .custom-control-input:focus ~ .custom-control-label::before {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
   border-color: var(--dh-color-input-focus-border);
@@ -3231,7 +3231,7 @@ input[type=button].btn-block {
 .custom-select:focus {
   border-color: var(--dh-color-input-focus-border);
   outline: 0;
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .custom-select:focus::-ms-value {
   color: var(--dh-color-input-fg);
@@ -3289,7 +3289,7 @@ input[type=button].btn-block {
 }
 .custom-file-input:focus ~ .custom-file-label {
   border-color: var(--dh-color-input-focus-border);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label {
   background-color: var(--dh-color-input-disabled-bg);
@@ -3345,13 +3345,13 @@ input[type=button].btn-block {
   outline: 0;
 }
 .custom-range:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 1px var(--dh-color-black, #1a171a), 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 1px var(--dh-color-black, #1a171a), 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .custom-range:focus::-moz-range-thumb {
-  box-shadow: 0 0 0 1px var(--dh-color-black, #1a171a), 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 1px var(--dh-color-black, #1a171a), 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .custom-range:focus::-ms-thumb {
-  box-shadow: 0 0 0 1px var(--dh-color-black, #1a171a), 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 1px var(--dh-color-black, #1a171a), 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .custom-range::-moz-focus-outer {
   border: 0;
@@ -8076,11 +8076,11 @@ html {
 }
 
 .text-black-50 {
-  color: color-mix(in srgb, var(--dh-color-bg) 50%, transparent) !important;
+  color: hsla(var(--dh-color-bg-hsl), 0.5) !important;
 }
 
 .text-white-50 {
-  color: color-mix(in srgb, var(--dh-color-fg) 50%, transparent) !important;
+  color: hsla(var(--dh-color-fg-hsl), 0.5) !important;
 }
 
 .svg-inline--fa {
@@ -8096,7 +8096,7 @@ body {
   padding: 0;
   overscroll-behavior: none;
   -ms-scroll-chaining: none;
-  scrollbar-color: color-mix(in srgb, var(--dh-color-fg) 10%, transparent) color-mix(in srgb, var(--dh-color-bg) 10%, transparent);
+  scrollbar-color: hsla(var(--dh-color-fg-hsl), 0.1) hsla(var(--dh-color-bg-hsl), 0.1);
 }
 
 #root .app {
@@ -8149,14 +8149,14 @@ a.custom-link:focus::after,
   content: "";
   box-sizing: content-box;
   position: absolute;
-  background: color-mix(in srgb, var(--dh-color-accent) 10%, transparent);
+  background: hsla(var(--dh-color-accent-hsl), 0.1);
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 4px;
   border: 1px solid var(--dh-color-accent-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 
 /********** BUTTONS *********/
@@ -8209,16 +8209,16 @@ span.btn-disabled-wrapper .btn:disabled {
   border-radius: 4px;
 }
 .btn-link:not(.btn-link-icon):focus {
-  background: color-mix(in srgb, var(--dh-color-accent) 10%, transparent);
+  background: hsla(var(--dh-color-accent-hsl), 0.1);
   border: 1px solid var(--dh-color-accent-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .btn-link:not(.btn-link-icon):hover {
-  background: color-mix(in srgb, var(--dh-color-accent) 15%, transparent);
+  background: hsla(var(--dh-color-accent-hsl), 0.15);
 }
 .btn-link:not(.btn-link-icon):active {
   content: "";
-  background: color-mix(in srgb, var(--dh-color-accent) 30%, transparent);
+  background: hsla(var(--dh-color-accent-hsl), 0.3);
 }
 
 .btn.btn-cancelable:hover {
@@ -8282,16 +8282,16 @@ span.btn-disabled-wrapper .btn:disabled {
   box-shadow: none;
 }
 .btn-link-icon:focus::after {
-  background: color-mix(in srgb, var(--dh-color-accent) 10%, transparent);
+  background: hsla(var(--dh-color-accent-hsl), 0.1);
   border: 1px solid var(--dh-color-accent-bg);
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .btn-link-icon:hover::after {
-  background: color-mix(in srgb, var(--dh-color-accent) 15%, transparent);
+  background: hsla(var(--dh-color-accent-hsl), 0.15);
 }
 .btn-link-icon:active::after {
   content: "";
-  background: color-mix(in srgb, var(--dh-color-accent) 30%, transparent);
+  background: hsla(var(--dh-color-accent-hsl), 0.3);
 }
 
 .btn-icon {
@@ -8445,7 +8445,7 @@ form label small {
 }
 
 .form-control.btn:focus-visible {
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 
 .form-control:disabled {
@@ -8613,7 +8613,7 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: color-mix(in srgb, var(--dh-color-scrollbar) 18%, transparent);
+  background: hsla(var(--dh-color-scrollbar-hsl), 0.18);
   border-radius: 0;
 }
 
@@ -8623,23 +8623,23 @@ input[type=number]::-webkit-inner-spin-button {
 }
 
 ::-webkit-scrollbar-corner {
-  background: color-mix(in srgb, var(--dh-color-bg) 10%, transparent);
+  background: hsla(var(--dh-color-bg-hsl), 0.1);
 }
 
 ::-webkit-scrollbar-track:horizontal {
-  border-top: 1px solid color-mix(in srgb, var(--dh-color-scrollbar) 15%, transparent);
+  border-top: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
 }
 
 ::-webkit-scrollbar-track:vertical {
-  border-left: 1px solid color-mix(in srgb, var(--dh-color-scrollbar) 15%, transparent);
+  border-left: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: color-mix(in srgb, var(--dh-color-scrollbar) 25%, transparent);
+  background: hsla(var(--dh-color-scrollbar-hsl), 0.25);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background: color-mix(in srgb, var(--dh-color-scrollbar) 35%, transparent);
+  background: hsla(var(--dh-color-scrollbar-hsl), 0.35);
 }
 
 /********** Monaco Overides *********/
@@ -8670,11 +8670,11 @@ input[type=number]::-webkit-inner-spin-button {
 .monaco-editor .find-widget :focus:not(.input) {
   outline: 0;
   border: 1px solid var(--dh-color-input-focus-border) !important;
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35);
 }
 .monaco-editor .find-widget .monaco-checkbox:focus {
   border: none !important;
-  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--dh-color-accent) 35%, transparent), 0 0 0 1px var(--dh-color-input-focus-border);
+  box-shadow: 0 0 0 0.2rem hsla(var(--dh-color-accent-hsl), 0.35), 0 0 0 1px var(--dh-color-input-focus-border);
 }
 .monaco-editor .monaco-inputbox {
   border-radius: 4px;