@deephaven/components 0.60.1-beta.0 → 0.60.1-beta.5

package/dist/theme/theme-spectrum/theme-spectrum-alias.module.css

@@ -1 +1 @@
-.dh-spectrum-alias{--spectrum-alias-background-color-default: var(--dh-color-bg);--spectrum-alias-background-color-disabled: var(--dh-color-disabled-bg);--spectrum-alias-label-text-color: var(--dh-color-label-text);--spectrum-alias-text-color: var(--dh-color-text);--spectrum-alias-text-color-hover: var(--dh-color-text-hover);--spectrum-alias-text-color-disabled: var(--dh-color-text-disabled);--spectrum-alias-border-color: var(--dh-color-border);--spectrum-alias-border-color-focus: var(--dh-color-border-focus);--spectrum-alias-input-border-color-key-focus: var( --spectrum-alias-border-color-focus );--spectrum-alias-focus-color: var(--dh-color-focus);--spectrum-alias-focus-ring-color: var(--dh-color-focus-ring);--spectrum-alias-icon-color: var(--dh-color-icon-fg);--spectrum-alias-icon-color-disabled: var(--dh-color-icon-disabled-fg);--spectrum-actionbutton-background-color-disabled: var( --dh-color-action-disabled-bg );--spectrum-actionbutton-border-color-disabled: var( --dh-color-action-disabled-border );--spectrum-actionbutton-text-color-disabled: var( --dh-color-action-disabled-fg );--spectrum-body-text-color: var(--dh-color-text);--spectrum-alias-dropshadow-color: var(--dh-color-dropshadow);--spectrum-alias-background-color-modal-overlay: var( --dh-color-modal-overlay-bg );--spectrum-alias-background-color-hover-overlay: var( --dh-color-overlay-hover-bg );--spectrum-colorarea-border-color: var(--dh-color-colorpicker-border);--spectrum-colorarea-border-color-hover: var(--dh-color-colorpicker-border);--spectrum-colorarea-border-color-down: var(--dh-color-colorpicker-border);--spectrum-colorarea-border-color-key-focus: var( --dh-color-colorpicker-border );--spectrum-colorslider-border-color: var(--dh-color-colorpicker-border);--spectrum-colorslider-border-color-hover: var(--dh-color-colorpicker-border);--spectrum-colorslider-border-color-down: var(--dh-color-colorpicker-border);--spectrum-colorslider-border-color-key-focus: var( --dh-color-colorpicker-border );--spectrum-colorslider-vertical-border-color: var( --dh-color-colorpicker-border );--spectrum-colorslider-vertical-border-color-hover: var( --dh-color-colorpicker-border );--spectrum-colorslider-vertical-border-color-down: var( --dh-color-colorpicker-border );--spectrum-colorslider-vertical-border-color-key-focus: var( --dh-color-colorpicker-border );--spectrum-colorwheel-border-color: var(--dh-color-colorpicker-border);--spectrum-colorwheel-border-color-hover: var(--dh-color-colorpicker-border);--spectrum-colorwheel-border-color-down: var(--dh-color-colorpicker-border);--spectrum-colorwheel-border-color-key-focus: var( --dh-color-colorpicker-border );--spectrum-alias-highlight-active: var(--dh-color-highlight-active);--spectrum-alias-highlight-hover: var(--dh-color-highlight-hover);--spectrum-alias-highlight-invalid: var(--dh-color-highlight-invalid);--spectrum-alias-highlight-selected: var(--dh-color-highlight-selected);--spectrum-alias-highlight-selected-hover: var( --dh-color-highlight-selected-hover );--spectrum-alias-text-highlight-color: var(--dh-color-text-highlight);--spectrum-alias-background-color-quickactions: var( --dh-color-quickactions-bg );--spectrum-alias-radial-reaction-color-default: var( --dh-color-radial-reaction );--spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50);--spectrum-alias-appframe-separator-color: var( --spectrum-global-color-gray-50 );--spectrum-alias-pasteboard-background-color: var( --spectrum-global-color-gray-50 );--spectrum-tabs-compact-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-compact-vertical-rule-color: var( --spectrum-global-color-gray-200 );--spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-compact-vertical-emphasized-rule-color: var( --spectrum-global-color-gray-200 );--spectrum-tabs-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-quiet-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-well-background-color: var(--dh-color-well-bg);--spectrum-well-border-color: var(--dh-color-well-border);--spectrum-tray-background-color: var(--spectrum-global-color-gray-100);--react-spectrum-datepicker-placeholder-color: var( --spectrum-global-color-gray-600 );--spectrum-accent-background-color-default: var(--dh-color-accent-bg);--spectrum-accent-background-color-hover: var(--dh-color-accent-hover-bg);--spectrum-accent-background-color-down: var(--dh-color-accent-down-bg);--spectrum-accent-background-color-key-focus: var( --dh-color-accent-key-focus-bg );--spectrum-neutral-background-color-default: var(--dh-color-neutral-bg);--spectrum-neutral-background-color-hover: var(--dh-color-neutral-hover-bg);--spectrum-neutral-background-color-down: var(--dh-color-neutral-down-bg);--spectrum-neutral-background-color-key-focus: var( --dh-color-neutral-key-focus-bg );--spectrum-neutral-subdued-background-color-default: var( --dh-color-neutral-subdued-bg );--spectrum-neutral-subdued-background-color-hover: var( --dh-color-neutral-subdued-hover-bg );--spectrum-neutral-subdued-background-color-down: var( --dh-color-neutral-subdued-down-bg );--spectrum-neutral-subdued-background-color-key-focus: var( --dh-color-neutral-subdued-key-focus-bg );--spectrum-negative-background-color-default: var(--dh-color-negative-bg);--spectrum-negative-background-color-hover: var(--dh-color-negative-hover-bg);--spectrum-negative-background-color-down: var(--dh-color-negative-down-bg);--spectrum-negative-background-color-key-focus: var( --dh-color-negative-key-focus-bg );--spectrum-positive-background-color-default: var(--dh-color-positive-bg);--spectrum-positive-background-color-hover: var(--dh-color-positive-hover-bg);--spectrum-positive-background-color-down: var(--dh-color-positive-down-bg);--spectrum-positive-background-color-key-focus: var( --dh-color-positive-key-focus-bg );--spectrum-informative-background-color-default: var(--dh-color-info-bg);--spectrum-informative-background-color-hover: var(--dh-color-info-hover-bg);--spectrum-informative-background-color-down: var(--dh-color-info-down-bg);--spectrum-informative-background-color-key-focus: var( --dh-color-info-key-focus-bg );--spectrum-notice-background-color-default: var(--dh-color-notice-bg);--spectrum-notice-background-color-hover: var(--dh-color-notice-hover-bg);--spectrum-notice-background-color-down: var(--dh-color-notice-down-bg);--spectrum-notice-background-color-key-focus: var( --dh-color-notice-key-focus-bg );--spectrum-gray-background-color-default: var(--dh-color-gray-bg);--spectrum-red-background-color-default: var(--dh-color-red-bg);--spectrum-orange-background-color-default: var(--dh-color-orange-bg);--spectrum-yellow-background-color-default: var(--dh-color-yellow-bg);--spectrum-chartreuse-background-color-default: var(--dh-color-chartreuse-bg);--spectrum-celery-background-color-default: var(--dh-color-celery-bg);--spectrum-green-background-color-default: var(--dh-color-green-bg);--spectrum-seafoam-background-color-default: var(--dh-color-seafoam-bg);--spectrum-cyan-background-color-default: var(--dh-color-cyan-bg);--spectrum-blue-background-color-default: var(--dh-color-blue-bg);--spectrum-indigo-background-color-default: var(--dh-color-indigo-bg);--spectrum-purple-background-color-default: var(--dh-color-purple-bg);--spectrum-fuchsia-background-color-default: var(--dh-color-fuchsia-bg);--spectrum-magenta-background-color-default: var(--dh-color-magenta-bg);--spectrum-negative-visual-color: var(--dh-color-visual-negative);--spectrum-positive-visual-color: var(--dh-color-visual-positive);--spectrum-notice-visual-color: var(--dh-color-visual-notice);--spectrum-informative-visual-color: var(--dh-color-visual-info);--spectrum-gray-visual-color: var(--dh-color-visual-gray);--spectrum-red-visual-color: var(--dh-color-visual-red);--spectrum-orange-visual-color: var(--dh-color-visual-orange);--spectrum-yellow-visual-color: var(--dh-color-visual-yellow);--spectrum-chartreuse-visual-color: var(--dh-color-visual-chartreuse);--spectrum-celery-visual-color: var(--dh-color-visual-celery);--spectrum-green-visual-color: var(--dh-color-visual-green);--spectrum-seafoam-visual-color: var(--dh-color-visual-seafoam);--spectrum-cyan-visual-color: var(--dh-color-visual-cyan);--spectrum-blue-visual-color: var(--dh-color-visual-blue);--spectrum-indigo-visual-color: var(--dh-color-visual-indigo);--spectrum-purple-visual-color: var(--dh-color-visual-purple);--spectrum-fuchsia-visual-color: var(--dh-color-visual-fuchsia);--spectrum-magenta-visual-color: var(--dh-color-visual-magenta);--spectrum-textfield-background-color: var(--dh-color-input-bg);--spectrum-textfield-background-color-down: var(--dh-color-input-active-bg);--spectrum-textfield-background-color-disabled: var( --dh-color-input-disabled-bg );--spectrum-textfield-border-color: var(--dh-color-input-border);--spectrum-textfield-border-color-disabled: var( --dh-color-input-disabled-border );--spectrum-fieldbutton-background-color: var(--dh-color-selector-bg);--spectrum-fieldbutton-background-color-hover: var( --dh-color-selector-hover-bg );--spectrum-fieldbutton-background-color-disabled: var( --dh-color-input-disabled-bg );--spectrum-fieldbutton-border-color: var(--dh-color-input-border);--spectrum-fieldbutton-border-color-hover: var(--dh-color-input-hover-border);--spectrum-fieldbutton-icon-color: var(--dh-color-selector-fg);--spectrum-fieldbutton-icon-color-hover: var(--dh-color-selector-hover-fg);--spectrum-dialog-title-text-color: var(--dh-color-dialog-title-fg);--spectrum-dialog-content-text-color: var(--dh-color-dialog-fg);--spectrum-popover-background-color: var(--dh-color-popover-bg)}/*# sourceMappingURL=theme-spectrum-alias.module.css.map */
+.dh-spectrum-alias{--spectrum-alias-background-color-default: var(--dh-color-bg);--spectrum-alias-background-color-disabled: var(--dh-color-disabled-bg);--spectrum-alias-label-text-color: var(--dh-color-label-text);--spectrum-alias-text-color: var(--dh-color-text);--spectrum-alias-text-color-hover: var(--dh-color-text-hover);--spectrum-alias-text-color-disabled: var(--dh-color-text-disabled);--spectrum-alias-border-color: var(--dh-color-border);--spectrum-alias-border-color-hover: var(--dh-color-hover-border);--spectrum-alias-border-color-focus: var(--dh-color-border-focus);--spectrum-alias-input-border-color-key-focus: var( --spectrum-alias-border-color-focus );--spectrum-alias-focus-color: var(--dh-color-focus);--spectrum-alias-focus-ring-color: var(--dh-color-focus-ring);--spectrum-alias-icon-color: var(--dh-color-icon-fg);--spectrum-alias-icon-color-disabled: var(--dh-color-icon-disabled-fg);--spectrum-actionbutton-background-color-disabled: var( --dh-color-action-disabled-bg );--spectrum-actionbutton-border-color-disabled: var( --dh-color-action-disabled-border );--spectrum-actionbutton-text-color-disabled: var( --dh-color-action-disabled-fg );--spectrum-body-text-color: var(--dh-color-text);--spectrum-alias-dropshadow-color: var(--dh-color-dropshadow);--spectrum-alias-background-color-modal-overlay: var( --dh-color-modal-overlay-bg );--spectrum-alias-background-color-hover-overlay: var( --dh-color-overlay-hover-bg );--spectrum-colorarea-border-color: var(--dh-color-colorpicker-border);--spectrum-colorarea-border-color-hover: var(--dh-color-colorpicker-border);--spectrum-colorarea-border-color-down: var(--dh-color-colorpicker-border);--spectrum-colorarea-border-color-key-focus: var( --dh-color-colorpicker-border );--spectrum-colorslider-border-color: var(--dh-color-colorpicker-border);--spectrum-colorslider-border-color-hover: var(--dh-color-colorpicker-border);--spectrum-colorslider-border-color-down: var(--dh-color-colorpicker-border);--spectrum-colorslider-border-color-key-focus: var( --dh-color-colorpicker-border );--spectrum-colorslider-vertical-border-color: var( --dh-color-colorpicker-border );--spectrum-colorslider-vertical-border-color-hover: var( --dh-color-colorpicker-border );--spectrum-colorslider-vertical-border-color-down: var( --dh-color-colorpicker-border );--spectrum-colorslider-vertical-border-color-key-focus: var( --dh-color-colorpicker-border );--spectrum-colorwheel-border-color: var(--dh-color-colorpicker-border);--spectrum-colorwheel-border-color-hover: var(--dh-color-colorpicker-border);--spectrum-colorwheel-border-color-down: var(--dh-color-colorpicker-border);--spectrum-colorwheel-border-color-key-focus: var( --dh-color-colorpicker-border );--spectrum-alias-highlight-active: var(--dh-color-highlight-active);--spectrum-alias-highlight-hover: var(--dh-color-highlight-hover);--spectrum-alias-highlight-invalid: var(--dh-color-highlight-invalid);--spectrum-alias-highlight-selected: var(--dh-color-highlight-selected);--spectrum-alias-highlight-selected-hover: var( --dh-color-highlight-selected-hover );--spectrum-alias-text-highlight-color: var(--dh-color-text-highlight);--spectrum-alias-background-color-quickactions: var( --dh-color-quickactions-bg );--spectrum-alias-radial-reaction-color-default: var( --dh-color-radial-reaction );--spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50);--spectrum-alias-appframe-separator-color: var( --spectrum-global-color-gray-50 );--spectrum-alias-pasteboard-background-color: var( --spectrum-global-color-gray-50 );--spectrum-tabs-compact-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-compact-vertical-rule-color: var( --spectrum-global-color-gray-200 );--spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-compact-vertical-emphasized-rule-color: var( --spectrum-global-color-gray-200 );--spectrum-tabs-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-quiet-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var( --spectrum-global-color-blue-500 );--spectrum-well-background-color: var(--dh-color-well-bg);--spectrum-well-border-color: var(--dh-color-well-border);--spectrum-tray-background-color: var(--spectrum-global-color-gray-100);--react-spectrum-datepicker-placeholder-color: var( --spectrum-global-color-gray-600 );--spectrum-accent-background-color-default: var(--dh-color-accent-bg);--spectrum-accent-background-color-hover: var(--dh-color-accent-hover-bg);--spectrum-accent-background-color-down: var(--dh-color-accent-down-bg);--spectrum-accent-background-color-key-focus: var( --dh-color-accent-key-focus-bg );--spectrum-neutral-background-color-default: var(--dh-color-neutral-bg);--spectrum-neutral-background-color-hover: var(--dh-color-neutral-hover-bg);--spectrum-neutral-background-color-down: var(--dh-color-neutral-down-bg);--spectrum-neutral-background-color-key-focus: var( --dh-color-neutral-key-focus-bg );--spectrum-neutral-subdued-background-color-default: var( --dh-color-neutral-subdued-bg );--spectrum-neutral-subdued-background-color-hover: var( --dh-color-neutral-subdued-hover-bg );--spectrum-neutral-subdued-background-color-down: var( --dh-color-neutral-subdued-down-bg );--spectrum-neutral-subdued-background-color-key-focus: var( --dh-color-neutral-subdued-key-focus-bg );--spectrum-negative-background-color-default: var(--dh-color-negative-bg);--spectrum-negative-background-color-hover: var(--dh-color-negative-hover-bg);--spectrum-negative-background-color-down: var(--dh-color-negative-down-bg);--spectrum-negative-background-color-key-focus: var( --dh-color-negative-key-focus-bg );--spectrum-positive-background-color-default: var(--dh-color-positive-bg);--spectrum-positive-background-color-hover: var(--dh-color-positive-hover-bg);--spectrum-positive-background-color-down: var(--dh-color-positive-down-bg);--spectrum-positive-background-color-key-focus: var( --dh-color-positive-key-focus-bg );--spectrum-informative-background-color-default: var(--dh-color-info-bg);--spectrum-informative-background-color-hover: var(--dh-color-info-hover-bg);--spectrum-informative-background-color-down: var(--dh-color-info-down-bg);--spectrum-informative-background-color-key-focus: var( --dh-color-info-key-focus-bg );--spectrum-notice-background-color-default: var(--dh-color-notice-bg);--spectrum-notice-background-color-hover: var(--dh-color-notice-hover-bg);--spectrum-notice-background-color-down: var(--dh-color-notice-down-bg);--spectrum-notice-background-color-key-focus: var( --dh-color-notice-key-focus-bg );--spectrum-gray-background-color-default: var(--dh-color-gray-bg);--spectrum-red-background-color-default: var(--dh-color-red-bg);--spectrum-orange-background-color-default: var(--dh-color-orange-bg);--spectrum-yellow-background-color-default: var(--dh-color-yellow-bg);--spectrum-chartreuse-background-color-default: var(--dh-color-chartreuse-bg);--spectrum-celery-background-color-default: var(--dh-color-celery-bg);--spectrum-green-background-color-default: var(--dh-color-green-bg);--spectrum-seafoam-background-color-default: var(--dh-color-seafoam-bg);--spectrum-cyan-background-color-default: var(--dh-color-cyan-bg);--spectrum-blue-background-color-default: var(--dh-color-blue-bg);--spectrum-indigo-background-color-default: var(--dh-color-indigo-bg);--spectrum-purple-background-color-default: var(--dh-color-purple-bg);--spectrum-fuchsia-background-color-default: var(--dh-color-fuchsia-bg);--spectrum-magenta-background-color-default: var(--dh-color-magenta-bg);--spectrum-negative-visual-color: var(--dh-color-visual-negative);--spectrum-positive-visual-color: var(--dh-color-visual-positive);--spectrum-notice-visual-color: var(--dh-color-visual-notice);--spectrum-informative-visual-color: var(--dh-color-visual-info);--spectrum-gray-visual-color: var(--dh-color-visual-gray);--spectrum-red-visual-color: var(--dh-color-visual-red);--spectrum-orange-visual-color: var(--dh-color-visual-orange);--spectrum-yellow-visual-color: var(--dh-color-visual-yellow);--spectrum-chartreuse-visual-color: var(--dh-color-visual-chartreuse);--spectrum-celery-visual-color: var(--dh-color-visual-celery);--spectrum-green-visual-color: var(--dh-color-visual-green);--spectrum-seafoam-visual-color: var(--dh-color-visual-seafoam);--spectrum-cyan-visual-color: var(--dh-color-visual-cyan);--spectrum-blue-visual-color: var(--dh-color-visual-blue);--spectrum-indigo-visual-color: var(--dh-color-visual-indigo);--spectrum-purple-visual-color: var(--dh-color-visual-purple);--spectrum-fuchsia-visual-color: var(--dh-color-visual-fuchsia);--spectrum-magenta-visual-color: var(--dh-color-visual-magenta);--spectrum-textfield-background-color: var(--dh-color-input-bg);--spectrum-textfield-background-color-down: var(--dh-color-input-active-bg);--spectrum-textfield-background-color-disabled: var( --dh-color-input-disabled-bg );--spectrum-textfield-border-color: var(--dh-color-input-border);--spectrum-textfield-border-color-disabled: var( --dh-color-input-disabled-border );--spectrum-fieldbutton-background-color: var(--dh-color-selector-bg);--spectrum-fieldbutton-background-color-hover: var( --dh-color-selector-hover-bg );--spectrum-fieldbutton-background-color-disabled: var( --dh-color-input-disabled-bg );--spectrum-fieldbutton-border-color: var(--dh-color-input-border);--spectrum-fieldbutton-border-color-hover: var(--dh-color-input-hover-border);--spectrum-fieldbutton-icon-color: var(--dh-color-selector-fg);--spectrum-fieldbutton-icon-color-hover: var(--dh-color-selector-hover-fg);--spectrum-dialog-title-text-color: var(--dh-color-dialog-title-fg);--spectrum-dialog-content-text-color: var(--dh-color-dialog-fg);--spectrum-popover-background-color: var(--dh-color-popover-bg)}/*# sourceMappingURL=theme-spectrum-alias.module.css.map */

package/dist/theme/theme-spectrum/theme-spectrum-alias.module.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-alias.module.css"],"names":[],"mappings":"AAEA,mBAEE,8DACA,wEAEA,8DACA,kDACA,8DACA,oEACA,sDACA,kEACA,0FAGA,oDACA,8DACA,qDACA,uEAEA,wFAGA,wFAGA,kFAKA,iDAGA,8DACA,oFAGA,oFAKA,sEACA,4EACA,2EACA,kFAGA,wEACA,8EACA,6EACA,oFAGA,mFAGA,yFAGA,wFAGA,6FAGA,uEACA,6EACA,4EACA,mFAKA,oEACA,kEACA,sEACA,wEACA,sFAIA,sEACA,kFAGA,kFAIA,6EACA,kFAGA,qFAKA,2FAGA,qFAGA,+GAGA,gGAGA,8FAGA,4GAGA,qHAGA,oGAGA,6GAKA,0DACA,0DAGA,wEAEA,uFAKA,sEACA,0EACA,wEACA,oFAKA,wEACA,4EACA,0EACA,sFAIA,0FAGA,8FAGA,4FAGA,sGAKA,0EACA,8EACA,4EACA,wFAKA,0EACA,8EACA,4EACA,wFAKA,yEACA,6EACA,2EACA,uFAKA,sEACA,0EACA,wEACA,oFAKA,kEACA,gEACA,sEACA,sEACA,8EACA,sEACA,oEACA,wEACA,kEACA,kEACA,sEACA,sEACA,wEACA,wEAGA,kEACA,kEACA,8DACA,iEAGA,0DACA,wDACA,8DACA,8DACA,sEACA,8DACA,4DACA,gEACA,0DACA,0DACA,8DACA,8DACA,gEACA,gEAKA,gEACA,4EACA,oFAGA,gEACA,oFAKA,qEACA,mFAGA,sFAGA,kEACA,8EACA,+DACA,2EAGA,oEACA,gEAGA","file":"theme-spectrum-alias.module.css","sourcesContent":["/* stylelint-disable custom-property-empty-line-before */\n/* stylelint-disable alpha-value-notation */\n.dh-spectrum-alias {\n  /*********** Override variables in spectrum-global.css **********************/\n  --spectrum-alias-background-color-default: var(--dh-color-bg);\n  --spectrum-alias-background-color-disabled: var(--dh-color-disabled-bg);\n\n  --spectrum-alias-label-text-color: var(--dh-color-label-text);\n  --spectrum-alias-text-color: var(--dh-color-text);\n  --spectrum-alias-text-color-hover: var(--dh-color-text-hover);\n  --spectrum-alias-text-color-disabled: var(--dh-color-text-disabled);\n  --spectrum-alias-border-color: var(--dh-color-border);\n  --spectrum-alias-border-color-focus: var(--dh-color-border-focus);\n  --spectrum-alias-input-border-color-key-focus: var(\n    --spectrum-alias-border-color-focus\n  );\n  --spectrum-alias-focus-color: var(--dh-color-focus);\n  --spectrum-alias-focus-ring-color: var(--dh-color-focus-ring);\n  --spectrum-alias-icon-color: var(--dh-color-icon-fg);\n  --spectrum-alias-icon-color-disabled: var(--dh-color-icon-disabled-fg);\n\n  --spectrum-actionbutton-background-color-disabled: var(\n    --dh-color-action-disabled-bg\n  );\n  --spectrum-actionbutton-border-color-disabled: var(\n    --dh-color-action-disabled-border\n  );\n  --spectrum-actionbutton-text-color-disabled: var(\n    --dh-color-action-disabled-fg\n  );\n\n  /*********** Override variables in spectrum-darkest.css *********************/\n  --spectrum-body-text-color: var(--dh-color-text);\n\n  /* Shadows / Overlays */\n  --spectrum-alias-dropshadow-color: var(--dh-color-dropshadow);\n  --spectrum-alias-background-color-modal-overlay: var(\n    --dh-color-modal-overlay-bg\n  );\n  --spectrum-alias-background-color-hover-overlay: var(\n    --dh-color-overlay-hover-bg\n  );\n\n  /* Color Picker Borders */\n  --spectrum-colorarea-border-color: var(--dh-color-colorpicker-border);\n  --spectrum-colorarea-border-color-hover: var(--dh-color-colorpicker-border);\n  --spectrum-colorarea-border-color-down: var(--dh-color-colorpicker-border);\n  --spectrum-colorarea-border-color-key-focus: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-border-color: var(--dh-color-colorpicker-border);\n  --spectrum-colorslider-border-color-hover: var(--dh-color-colorpicker-border);\n  --spectrum-colorslider-border-color-down: var(--dh-color-colorpicker-border);\n  --spectrum-colorslider-border-color-key-focus: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-vertical-border-color: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-vertical-border-color-hover: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-vertical-border-color-down: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-vertical-border-color-key-focus: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorwheel-border-color: var(--dh-color-colorpicker-border);\n  --spectrum-colorwheel-border-color-hover: var(--dh-color-colorpicker-border);\n  --spectrum-colorwheel-border-color-down: var(--dh-color-colorpicker-border);\n  --spectrum-colorwheel-border-color-key-focus: var(\n    --dh-color-colorpicker-border\n  );\n\n  /* Highlight */\n  --spectrum-alias-highlight-active: var(--dh-color-highlight-active);\n  --spectrum-alias-highlight-hover: var(--dh-color-highlight-hover);\n  --spectrum-alias-highlight-invalid: var(--dh-color-highlight-invalid);\n  --spectrum-alias-highlight-selected: var(--dh-color-highlight-selected);\n  --spectrum-alias-highlight-selected-hover: var(\n    --dh-color-highlight-selected-hover\n  );\n\n  --spectrum-alias-text-highlight-color: var(--dh-color-text-highlight);\n  --spectrum-alias-background-color-quickactions: var(\n    --dh-color-quickactions-bg\n  );\n  --spectrum-alias-radial-reaction-color-default: var(\n    --dh-color-radial-reaction\n  );\n\n  --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50);\n  --spectrum-alias-appframe-separator-color: var(\n    --spectrum-global-color-gray-50\n  );\n  --spectrum-alias-pasteboard-background-color: var(\n    --spectrum-global-color-gray-50\n  );\n\n  /* Tabs */\n  --spectrum-tabs-compact-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-compact-vertical-rule-color: var(\n    --spectrum-global-color-gray-200\n  );\n  --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-compact-vertical-emphasized-rule-color: var(\n    --spectrum-global-color-gray-200\n  );\n  --spectrum-tabs-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-quiet-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n\n  /* Wells */\n  --spectrum-well-background-color: var(--dh-color-well-bg);\n  --spectrum-well-border-color: var(--dh-color-well-border);\n\n  /* PATCH: This is missing in Spectrum css */\n  --spectrum-tray-background-color: var(--spectrum-global-color-gray-100);\n\n  --react-spectrum-datepicker-placeholder-color: var(\n    --spectrum-global-color-gray-600\n  ); /* 4.8:1 contrast ratio */\n\n  /* Accent */\n  --spectrum-accent-background-color-default: var(--dh-color-accent-bg);\n  --spectrum-accent-background-color-hover: var(--dh-color-accent-hover-bg);\n  --spectrum-accent-background-color-down: var(--dh-color-accent-down-bg);\n  --spectrum-accent-background-color-key-focus: var(\n    --dh-color-accent-key-focus-bg\n  );\n\n  /* Neutral */\n  --spectrum-neutral-background-color-default: var(--dh-color-neutral-bg);\n  --spectrum-neutral-background-color-hover: var(--dh-color-neutral-hover-bg);\n  --spectrum-neutral-background-color-down: var(--dh-color-neutral-down-bg);\n  --spectrum-neutral-background-color-key-focus: var(\n    --dh-color-neutral-key-focus-bg\n  );\n\n  --spectrum-neutral-subdued-background-color-default: var(\n    --dh-color-neutral-subdued-bg\n  );\n  --spectrum-neutral-subdued-background-color-hover: var(\n    --dh-color-neutral-subdued-hover-bg\n  );\n  --spectrum-neutral-subdued-background-color-down: var(\n    --dh-color-neutral-subdued-down-bg\n  );\n  --spectrum-neutral-subdued-background-color-key-focus: var(\n    --dh-color-neutral-subdued-key-focus-bg\n  );\n\n  /* Negative */\n  --spectrum-negative-background-color-default: var(--dh-color-negative-bg);\n  --spectrum-negative-background-color-hover: var(--dh-color-negative-hover-bg);\n  --spectrum-negative-background-color-down: var(--dh-color-negative-down-bg);\n  --spectrum-negative-background-color-key-focus: var(\n    --dh-color-negative-key-focus-bg\n  );\n\n  /* Positive */\n  --spectrum-positive-background-color-default: var(--dh-color-positive-bg);\n  --spectrum-positive-background-color-hover: var(--dh-color-positive-hover-bg);\n  --spectrum-positive-background-color-down: var(--dh-color-positive-down-bg);\n  --spectrum-positive-background-color-key-focus: var(\n    --dh-color-positive-key-focus-bg\n  );\n\n  /* Informative */\n  --spectrum-informative-background-color-default: var(--dh-color-info-bg);\n  --spectrum-informative-background-color-hover: var(--dh-color-info-hover-bg);\n  --spectrum-informative-background-color-down: var(--dh-color-info-down-bg);\n  --spectrum-informative-background-color-key-focus: var(\n    --dh-color-info-key-focus-bg\n  );\n\n  /* Notice */\n  --spectrum-notice-background-color-default: var(--dh-color-notice-bg);\n  --spectrum-notice-background-color-hover: var(--dh-color-notice-hover-bg);\n  --spectrum-notice-background-color-down: var(--dh-color-notice-down-bg);\n  --spectrum-notice-background-color-key-focus: var(\n    --dh-color-notice-key-focus-bg\n  );\n\n  /* Default Background */\n  --spectrum-gray-background-color-default: var(--dh-color-gray-bg);\n  --spectrum-red-background-color-default: var(--dh-color-red-bg);\n  --spectrum-orange-background-color-default: var(--dh-color-orange-bg);\n  --spectrum-yellow-background-color-default: var(--dh-color-yellow-bg);\n  --spectrum-chartreuse-background-color-default: var(--dh-color-chartreuse-bg);\n  --spectrum-celery-background-color-default: var(--dh-color-celery-bg);\n  --spectrum-green-background-color-default: var(--dh-color-green-bg);\n  --spectrum-seafoam-background-color-default: var(--dh-color-seafoam-bg);\n  --spectrum-cyan-background-color-default: var(--dh-color-cyan-bg);\n  --spectrum-blue-background-color-default: var(--dh-color-blue-bg);\n  --spectrum-indigo-background-color-default: var(--dh-color-indigo-bg);\n  --spectrum-purple-background-color-default: var(--dh-color-purple-bg);\n  --spectrum-fuchsia-background-color-default: var(--dh-color-fuchsia-bg);\n  --spectrum-magenta-background-color-default: var(--dh-color-magenta-bg);\n\n  /* Visual levels */\n  --spectrum-negative-visual-color: var(--dh-color-visual-negative);\n  --spectrum-positive-visual-color: var(--dh-color-visual-positive);\n  --spectrum-notice-visual-color: var(--dh-color-visual-notice);\n  --spectrum-informative-visual-color: var(--dh-color-visual-info);\n\n  /* Visual */\n  --spectrum-gray-visual-color: var(--dh-color-visual-gray);\n  --spectrum-red-visual-color: var(--dh-color-visual-red);\n  --spectrum-orange-visual-color: var(--dh-color-visual-orange);\n  --spectrum-yellow-visual-color: var(--dh-color-visual-yellow);\n  --spectrum-chartreuse-visual-color: var(--dh-color-visual-chartreuse);\n  --spectrum-celery-visual-color: var(--dh-color-visual-celery);\n  --spectrum-green-visual-color: var(--dh-color-visual-green);\n  --spectrum-seafoam-visual-color: var(--dh-color-visual-seafoam);\n  --spectrum-cyan-visual-color: var(--dh-color-visual-cyan);\n  --spectrum-blue-visual-color: var(--dh-color-visual-blue);\n  --spectrum-indigo-visual-color: var(--dh-color-visual-indigo);\n  --spectrum-purple-visual-color: var(--dh-color-visual-purple);\n  --spectrum-fuchsia-visual-color: var(--dh-color-visual-fuchsia);\n  --spectrum-magenta-visual-color: var(--dh-color-visual-magenta);\n\n  /*********** Override component specific variables **************************/\n\n  /* Textfield */\n  --spectrum-textfield-background-color: var(--dh-color-input-bg);\n  --spectrum-textfield-background-color-down: var(--dh-color-input-active-bg);\n  --spectrum-textfield-background-color-disabled: var(\n    --dh-color-input-disabled-bg\n  );\n  --spectrum-textfield-border-color: var(--dh-color-input-border);\n  --spectrum-textfield-border-color-disabled: var(\n    --dh-color-input-disabled-border\n  );\n\n  /* Fieldbutton */\n  --spectrum-fieldbutton-background-color: var(--dh-color-selector-bg);\n  --spectrum-fieldbutton-background-color-hover: var(\n    --dh-color-selector-hover-bg\n  );\n  --spectrum-fieldbutton-background-color-disabled: var(\n    --dh-color-input-disabled-bg\n  );\n  --spectrum-fieldbutton-border-color: var(--dh-color-input-border);\n  --spectrum-fieldbutton-border-color-hover: var(--dh-color-input-hover-border);\n  --spectrum-fieldbutton-icon-color: var(--dh-color-selector-fg);\n  --spectrum-fieldbutton-icon-color-hover: var(--dh-color-selector-hover-fg);\n\n  /* Dialogs */\n  --spectrum-dialog-title-text-color: var(--dh-color-dialog-title-fg);\n  --spectrum-dialog-content-text-color: var(--dh-color-dialog-fg);\n\n  /* Popovers */\n  --spectrum-popover-background-color: var(--dh-color-popover-bg);\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-alias.module.css"],"names":[],"mappings":"AAEA,mBAEE,8DACA,wEAEA,8DACA,kDACA,8DACA,oEACA,sDACA,kEACA,kEACA,0FAGA,oDACA,8DACA,qDACA,uEAEA,wFAGA,wFAGA,kFAKA,iDAGA,8DACA,oFAGA,oFAKA,sEACA,4EACA,2EACA,kFAGA,wEACA,8EACA,6EACA,oFAGA,mFAGA,yFAGA,wFAGA,6FAGA,uEACA,6EACA,4EACA,mFAKA,oEACA,kEACA,sEACA,wEACA,sFAIA,sEACA,kFAGA,kFAIA,6EACA,kFAGA,qFAKA,2FAGA,qFAGA,+GAGA,gGAGA,8FAGA,4GAGA,qHAGA,oGAGA,6GAKA,0DACA,0DAGA,wEAEA,uFAKA,sEACA,0EACA,wEACA,oFAKA,wEACA,4EACA,0EACA,sFAIA,0FAGA,8FAGA,4FAGA,sGAKA,0EACA,8EACA,4EACA,wFAKA,0EACA,8EACA,4EACA,wFAKA,yEACA,6EACA,2EACA,uFAKA,sEACA,0EACA,wEACA,oFAKA,kEACA,gEACA,sEACA,sEACA,8EACA,sEACA,oEACA,wEACA,kEACA,kEACA,sEACA,sEACA,wEACA,wEAGA,kEACA,kEACA,8DACA,iEAGA,0DACA,wDACA,8DACA,8DACA,sEACA,8DACA,4DACA,gEACA,0DACA,0DACA,8DACA,8DACA,gEACA,gEAKA,gEACA,4EACA,oFAGA,gEACA,oFAKA,qEACA,mFAGA,sFAGA,kEACA,8EACA,+DACA,2EAGA,oEACA,gEAGA","file":"theme-spectrum-alias.module.css","sourcesContent":["/* stylelint-disable custom-property-empty-line-before */\n/* stylelint-disable alpha-value-notation */\n.dh-spectrum-alias {\n  /*********** Override variables in spectrum-global.css **********************/\n  --spectrum-alias-background-color-default: var(--dh-color-bg);\n  --spectrum-alias-background-color-disabled: var(--dh-color-disabled-bg);\n\n  --spectrum-alias-label-text-color: var(--dh-color-label-text);\n  --spectrum-alias-text-color: var(--dh-color-text);\n  --spectrum-alias-text-color-hover: var(--dh-color-text-hover);\n  --spectrum-alias-text-color-disabled: var(--dh-color-text-disabled);\n  --spectrum-alias-border-color: var(--dh-color-border);\n  --spectrum-alias-border-color-hover: var(--dh-color-hover-border);\n  --spectrum-alias-border-color-focus: var(--dh-color-border-focus);\n  --spectrum-alias-input-border-color-key-focus: var(\n    --spectrum-alias-border-color-focus\n  );\n  --spectrum-alias-focus-color: var(--dh-color-focus);\n  --spectrum-alias-focus-ring-color: var(--dh-color-focus-ring);\n  --spectrum-alias-icon-color: var(--dh-color-icon-fg);\n  --spectrum-alias-icon-color-disabled: var(--dh-color-icon-disabled-fg);\n\n  --spectrum-actionbutton-background-color-disabled: var(\n    --dh-color-action-disabled-bg\n  );\n  --spectrum-actionbutton-border-color-disabled: var(\n    --dh-color-action-disabled-border\n  );\n  --spectrum-actionbutton-text-color-disabled: var(\n    --dh-color-action-disabled-fg\n  );\n\n  /*********** Override variables in spectrum-darkest.css *********************/\n  --spectrum-body-text-color: var(--dh-color-text);\n\n  /* Shadows / Overlays */\n  --spectrum-alias-dropshadow-color: var(--dh-color-dropshadow);\n  --spectrum-alias-background-color-modal-overlay: var(\n    --dh-color-modal-overlay-bg\n  );\n  --spectrum-alias-background-color-hover-overlay: var(\n    --dh-color-overlay-hover-bg\n  );\n\n  /* Color Picker Borders */\n  --spectrum-colorarea-border-color: var(--dh-color-colorpicker-border);\n  --spectrum-colorarea-border-color-hover: var(--dh-color-colorpicker-border);\n  --spectrum-colorarea-border-color-down: var(--dh-color-colorpicker-border);\n  --spectrum-colorarea-border-color-key-focus: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-border-color: var(--dh-color-colorpicker-border);\n  --spectrum-colorslider-border-color-hover: var(--dh-color-colorpicker-border);\n  --spectrum-colorslider-border-color-down: var(--dh-color-colorpicker-border);\n  --spectrum-colorslider-border-color-key-focus: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-vertical-border-color: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-vertical-border-color-hover: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-vertical-border-color-down: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorslider-vertical-border-color-key-focus: var(\n    --dh-color-colorpicker-border\n  );\n  --spectrum-colorwheel-border-color: var(--dh-color-colorpicker-border);\n  --spectrum-colorwheel-border-color-hover: var(--dh-color-colorpicker-border);\n  --spectrum-colorwheel-border-color-down: var(--dh-color-colorpicker-border);\n  --spectrum-colorwheel-border-color-key-focus: var(\n    --dh-color-colorpicker-border\n  );\n\n  /* Highlight */\n  --spectrum-alias-highlight-active: var(--dh-color-highlight-active);\n  --spectrum-alias-highlight-hover: var(--dh-color-highlight-hover);\n  --spectrum-alias-highlight-invalid: var(--dh-color-highlight-invalid);\n  --spectrum-alias-highlight-selected: var(--dh-color-highlight-selected);\n  --spectrum-alias-highlight-selected-hover: var(\n    --dh-color-highlight-selected-hover\n  );\n\n  --spectrum-alias-text-highlight-color: var(--dh-color-text-highlight);\n  --spectrum-alias-background-color-quickactions: var(\n    --dh-color-quickactions-bg\n  );\n  --spectrum-alias-radial-reaction-color-default: var(\n    --dh-color-radial-reaction\n  );\n\n  --spectrum-alias-appframe-border-color: var(--spectrum-global-color-gray-50);\n  --spectrum-alias-appframe-separator-color: var(\n    --spectrum-global-color-gray-50\n  );\n  --spectrum-alias-pasteboard-background-color: var(\n    --spectrum-global-color-gray-50\n  );\n\n  /* Tabs */\n  --spectrum-tabs-compact-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-compact-vertical-rule-color: var(\n    --spectrum-global-color-gray-200\n  );\n  --spectrum-tabs-compact-vertical-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-compact-vertical-emphasized-rule-color: var(\n    --spectrum-global-color-gray-200\n  );\n  --spectrum-tabs-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-quiet-compact-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-quiet-compact-vertical-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-quiet-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n  --spectrum-tabs-quiet-vertical-emphasized-selection-indicator-color: var(\n    --spectrum-global-color-blue-500\n  );\n\n  /* Wells */\n  --spectrum-well-background-color: var(--dh-color-well-bg);\n  --spectrum-well-border-color: var(--dh-color-well-border);\n\n  /* PATCH: This is missing in Spectrum css */\n  --spectrum-tray-background-color: var(--spectrum-global-color-gray-100);\n\n  --react-spectrum-datepicker-placeholder-color: var(\n    --spectrum-global-color-gray-600\n  ); /* 4.8:1 contrast ratio */\n\n  /* Accent */\n  --spectrum-accent-background-color-default: var(--dh-color-accent-bg);\n  --spectrum-accent-background-color-hover: var(--dh-color-accent-hover-bg);\n  --spectrum-accent-background-color-down: var(--dh-color-accent-down-bg);\n  --spectrum-accent-background-color-key-focus: var(\n    --dh-color-accent-key-focus-bg\n  );\n\n  /* Neutral */\n  --spectrum-neutral-background-color-default: var(--dh-color-neutral-bg);\n  --spectrum-neutral-background-color-hover: var(--dh-color-neutral-hover-bg);\n  --spectrum-neutral-background-color-down: var(--dh-color-neutral-down-bg);\n  --spectrum-neutral-background-color-key-focus: var(\n    --dh-color-neutral-key-focus-bg\n  );\n\n  --spectrum-neutral-subdued-background-color-default: var(\n    --dh-color-neutral-subdued-bg\n  );\n  --spectrum-neutral-subdued-background-color-hover: var(\n    --dh-color-neutral-subdued-hover-bg\n  );\n  --spectrum-neutral-subdued-background-color-down: var(\n    --dh-color-neutral-subdued-down-bg\n  );\n  --spectrum-neutral-subdued-background-color-key-focus: var(\n    --dh-color-neutral-subdued-key-focus-bg\n  );\n\n  /* Negative */\n  --spectrum-negative-background-color-default: var(--dh-color-negative-bg);\n  --spectrum-negative-background-color-hover: var(--dh-color-negative-hover-bg);\n  --spectrum-negative-background-color-down: var(--dh-color-negative-down-bg);\n  --spectrum-negative-background-color-key-focus: var(\n    --dh-color-negative-key-focus-bg\n  );\n\n  /* Positive */\n  --spectrum-positive-background-color-default: var(--dh-color-positive-bg);\n  --spectrum-positive-background-color-hover: var(--dh-color-positive-hover-bg);\n  --spectrum-positive-background-color-down: var(--dh-color-positive-down-bg);\n  --spectrum-positive-background-color-key-focus: var(\n    --dh-color-positive-key-focus-bg\n  );\n\n  /* Informative */\n  --spectrum-informative-background-color-default: var(--dh-color-info-bg);\n  --spectrum-informative-background-color-hover: var(--dh-color-info-hover-bg);\n  --spectrum-informative-background-color-down: var(--dh-color-info-down-bg);\n  --spectrum-informative-background-color-key-focus: var(\n    --dh-color-info-key-focus-bg\n  );\n\n  /* Notice */\n  --spectrum-notice-background-color-default: var(--dh-color-notice-bg);\n  --spectrum-notice-background-color-hover: var(--dh-color-notice-hover-bg);\n  --spectrum-notice-background-color-down: var(--dh-color-notice-down-bg);\n  --spectrum-notice-background-color-key-focus: var(\n    --dh-color-notice-key-focus-bg\n  );\n\n  /* Default Background */\n  --spectrum-gray-background-color-default: var(--dh-color-gray-bg);\n  --spectrum-red-background-color-default: var(--dh-color-red-bg);\n  --spectrum-orange-background-color-default: var(--dh-color-orange-bg);\n  --spectrum-yellow-background-color-default: var(--dh-color-yellow-bg);\n  --spectrum-chartreuse-background-color-default: var(--dh-color-chartreuse-bg);\n  --spectrum-celery-background-color-default: var(--dh-color-celery-bg);\n  --spectrum-green-background-color-default: var(--dh-color-green-bg);\n  --spectrum-seafoam-background-color-default: var(--dh-color-seafoam-bg);\n  --spectrum-cyan-background-color-default: var(--dh-color-cyan-bg);\n  --spectrum-blue-background-color-default: var(--dh-color-blue-bg);\n  --spectrum-indigo-background-color-default: var(--dh-color-indigo-bg);\n  --spectrum-purple-background-color-default: var(--dh-color-purple-bg);\n  --spectrum-fuchsia-background-color-default: var(--dh-color-fuchsia-bg);\n  --spectrum-magenta-background-color-default: var(--dh-color-magenta-bg);\n\n  /* Visual levels */\n  --spectrum-negative-visual-color: var(--dh-color-visual-negative);\n  --spectrum-positive-visual-color: var(--dh-color-visual-positive);\n  --spectrum-notice-visual-color: var(--dh-color-visual-notice);\n  --spectrum-informative-visual-color: var(--dh-color-visual-info);\n\n  /* Visual */\n  --spectrum-gray-visual-color: var(--dh-color-visual-gray);\n  --spectrum-red-visual-color: var(--dh-color-visual-red);\n  --spectrum-orange-visual-color: var(--dh-color-visual-orange);\n  --spectrum-yellow-visual-color: var(--dh-color-visual-yellow);\n  --spectrum-chartreuse-visual-color: var(--dh-color-visual-chartreuse);\n  --spectrum-celery-visual-color: var(--dh-color-visual-celery);\n  --spectrum-green-visual-color: var(--dh-color-visual-green);\n  --spectrum-seafoam-visual-color: var(--dh-color-visual-seafoam);\n  --spectrum-cyan-visual-color: var(--dh-color-visual-cyan);\n  --spectrum-blue-visual-color: var(--dh-color-visual-blue);\n  --spectrum-indigo-visual-color: var(--dh-color-visual-indigo);\n  --spectrum-purple-visual-color: var(--dh-color-visual-purple);\n  --spectrum-fuchsia-visual-color: var(--dh-color-visual-fuchsia);\n  --spectrum-magenta-visual-color: var(--dh-color-visual-magenta);\n\n  /*********** Override component specific variables **************************/\n\n  /* Textfield */\n  --spectrum-textfield-background-color: var(--dh-color-input-bg);\n  --spectrum-textfield-background-color-down: var(--dh-color-input-active-bg);\n  --spectrum-textfield-background-color-disabled: var(\n    --dh-color-input-disabled-bg\n  );\n  --spectrum-textfield-border-color: var(--dh-color-input-border);\n  --spectrum-textfield-border-color-disabled: var(\n    --dh-color-input-disabled-border\n  );\n\n  /* Fieldbutton */\n  --spectrum-fieldbutton-background-color: var(--dh-color-selector-bg);\n  --spectrum-fieldbutton-background-color-hover: var(\n    --dh-color-selector-hover-bg\n  );\n  --spectrum-fieldbutton-background-color-disabled: var(\n    --dh-color-input-disabled-bg\n  );\n  --spectrum-fieldbutton-border-color: var(--dh-color-input-border);\n  --spectrum-fieldbutton-border-color-hover: var(--dh-color-input-hover-border);\n  --spectrum-fieldbutton-icon-color: var(--dh-color-selector-fg);\n  --spectrum-fieldbutton-icon-color-hover: var(--dh-color-selector-hover-fg);\n\n  /* Dialogs */\n  --spectrum-dialog-title-text-color: var(--dh-color-dialog-title-fg);\n  --spectrum-dialog-content-text-color: var(--dh-color-dialog-fg);\n\n  /* Popovers */\n  --spectrum-popover-background-color: var(--dh-color-popover-bg);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.60.1-beta.0+f0ae0553",
+  "version": "0.60.1-beta.5+b047fa36",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -25,10 +25,10 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "^3.29.0",
-    "@deephaven/icons": "^0.60.1-beta.0+f0ae0553",
-    "@deephaven/log": "^0.60.1-beta.0+f0ae0553",
-    "@deephaven/react-hooks": "^0.60.1-beta.0+f0ae0553",
-    "@deephaven/utils": "^0.60.1-beta.0+f0ae0553",
+    "@deephaven/icons": "^0.60.1-beta.5+b047fa36",
+    "@deephaven/log": "^0.60.1-beta.5+b047fa36",
+    "@deephaven/react-hooks": "^0.60.1-beta.5+b047fa36",
+    "@deephaven/utils": "^0.60.1-beta.5+b047fa36",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-spectrum/theme-default": "^3.5.1",
@@ -52,7 +52,7 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
-    "@deephaven/mocks": "^0.60.1-beta.0+f0ae0553"
+    "@deephaven/mocks": "^0.60.1-beta.5+b047fa36"
   },
   "files": [
     "dist",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f0ae05534532a30472bb426cfa82f9d41b1bca75"
+  "gitHead": "b047fa36de3a285be925736ef73722a60d1d9ed7"
 }

package/scss/BaseStyleSheet.scss

@@ -1,7 +1,6 @@
 // Import our custom variables and bootstrap
 // Can be imported directly by Vite since it resolves bootstrap to node_modules/bootstrap
 @import './custom.scss';
-@import './util.scss';
 @import './bootstrap_imports.scss';
 
 :root {
@@ -24,10 +23,10 @@ html {
 
 // override
 .text-black-50 {
-  color: background-opacity(50) !important;
+  color: bg-opacity(50) !important;
 }
 .text-white-50 {
-  color: foreground-opacity(50) !important;
+  color: fg-opacity(50) !important;
 }
 
 // deephaven-icons are designed on a 16px grid
@@ -46,7 +45,7 @@ body {
   padding: 0;
   overscroll-behavior: none;
   -ms-scroll-chaining: none;
-  scrollbar-color: foreground-opacity(10) background-opacity(10); //applies to firefox only
+  scrollbar-color: fg-opacity(10) bg-opacity(10); //applies to firefox only
 }
 
 #root {
@@ -662,7 +661,7 @@ input[type='number']::-webkit-inner-spin-button {
 
 // style the same as monaco scrollbar
 ::-webkit-scrollbar-thumb {
-  background: hsla(var(--dh-color-scrollbar-hsl), 0.18);
+  background: color-mix(in srgb, var(--dh-color-scrollbar) 18%, transparent);
   border-radius: 0;
 }
 
@@ -672,23 +671,25 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 ::-webkit-scrollbar-corner {
-  background: background-opacity(10);
+  background: bg-opacity(10);
 }
 
 ::-webkit-scrollbar-track:horizontal {
-  border-top: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
+  border-top: 1px solid
+    color-mix(in srgb, var(--dh-color-scrollbar) 15%, transparent);
 }
 
 ::-webkit-scrollbar-track:vertical {
-  border-left: 1px solid hsla(var(--dh-color-scrollbar-hsl), 0.15);
+  border-left: 1px solid
+    color-mix(in srgb, var(--dh-color-scrollbar) 15%, transparent);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: hsla(var(--dh-color-scrollbar-hsl), 0.25);
+  background: color-mix(in srgb, var(--dh-color-scrollbar) 25%, transparent);
 }
 
 ::-webkit-scrollbar-thumb:active {
-  background: hsla(var(--dh-color-scrollbar-hsl), 0.35);
+  background: color-mix(in srgb, var(--dh-color-scrollbar) 35%, transparent);
 }
 
 /********** Monaco Overides *********/

package/scss/bootstrap_override_mixins_buttons.scss

@@ -9,7 +9,11 @@
   // DH Customization: Convert semantic value to css variables
   $background: var(--dh-color-#{$semantic-value}-bg);
   $border: var(--dh-color-#{$semantic-value}-bg);
-  $boxshadow-color: hsla(var(--dh-color-#{$semantic-value}-hsl), 0.5);
+  $boxshadow-color: color-mix(
+    in srgb,
+    var(--dh-color-#{$semantic-value}-bg) 50%,
+    transparent
+  );
   $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
   $hover-border: var(--dh-color-#{$semantic-value}-hover-bg);
   $active-background: var(--dh-color-#{$semantic-value}-down-bg);
@@ -76,7 +80,11 @@
   $semantic-value: map.get($bootstrap-dh-semantic-map, $bootstrap-value) or '';
 
   $color: var(--dh-color-#{$semantic-value}-bg);
-  $boxshadow-color: hsla(var(--dh-color-#{$semantic-value}-hsl), 0.5);
+  $boxshadow-color: color-mix(
+    in srgb,
+    var(--dh-color-#{$semantic-value}-bg) 50%,
+    transparent
+  );
   $hover-color: color-yiq($semantic-value);
   $hover-background: var(--dh-color-#{$semantic-value}-hover-bg);
   $active-background: var(--dh-color-#{$semantic-value}-down-bg);

package/scss/bootstrap_overrides.scss

@@ -177,7 +177,11 @@ $input-placeholder-color: var(--dh-color-input-placeholder);
 $input-focus-border-color: var(--dh-color-input-focus-border);
 
 $input-btn-focus-width: 0.2rem;
-$input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);
+$input-btn-focus-color: color-mix(
+  in srgb,
+  var(--dh-color-accent) 35%,
+  transparent
+);
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
 $input-btn-line-height: 1.3;
 // Bootstrap uses a calc expression to determine the input height (calc(line-height + 2*padding-y + border)).

package/scss/custom.scss

@@ -13,3 +13,4 @@
 
 //New variables come after imports
 @import './new_variables.scss';
+@import './util.scss';

package/scss/new_variables.scss

@@ -51,23 +51,7 @@ $ant-thickness: 1px;
   }
 }
 
-@function hsla-opacity($semantic-name, $i: 100) {
-  @return hsla(var(--dh-color-#{$semantic-name}-hsl), math.div($i, 100));
-}
-
-@function accent-opacity($i: 100) {
-  @return hsla-opacity('accent', $i);
-}
-
-@function background-opacity($i: 100) {
-  @return hsla-opacity('bg', $i);
-}
-
-@function foreground-opacity($i: 100) {
-  @return hsla-opacity('fg', $i);
-}
-
-$focus-bg-transparency: 0.12;
-$hover-bg-transparency: 0.14;
-$active-bg-transparency: 0.28;
-$exception-transparency: 0.13;
+$focus-bg-transparency: 12%;
+$hover-bg-transparency: 14%;
+$active-bg-transparency: 28%;
+$exception-transparency: 13%;

package/scss/util.scss

@@ -53,3 +53,32 @@
 @function solid-gradient($color) {
   @return linear-gradient(0deg, $color, $color);
 }
+
+@function color-mix-opacity($semantic-name, $i: 100) {
+  @return color-mix(
+    in srgb,
+    /* if $i doesn't contain a % sign, add one */
+      var(--dh-color-#{$semantic-name}) #{$i}#{if(unit($i) == '%', '', '%')},
+    transparent
+  );
+}
+
+@function accent-opacity($i: 100) {
+  @return color-mix-opacity('accent', $i);
+}
+
+@function negative-opacity($i: 100) {
+  @return color-mix-opacity('negative', $i);
+}
+
+@function black-opacity($i: 100) {
+  @return color-mix-opacity('black', $i);
+}
+
+@function bg-opacity($i: 100) {
+  @return color-mix-opacity('bg', $i);
+}
+
+@function fg-opacity($i: 100) {
+  @return color-mix-opacity('fg', $i);
+}