@deephaven/components 0.55.1-beta.6 → 0.55.1-beta.8

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

@@ -1 +1 @@
-.dh-spectrum-alias{--spectrum-alias-background-color-default: var(--dh-color-background);--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-background-default );--spectrum-accent-background-color-hover: var( --dh-color-accent-background-hover );--spectrum-accent-background-color-down: var( --dh-color-accent-background-down );--spectrum-accent-background-color-key-focus: var( --dh-color-accent-background-key-focus );--spectrum-neutral-background-color-default: var(--dh-neutral-default-bg);--spectrum-neutral-background-color-hover: var(--dh-neutral-hover-bg);--spectrum-neutral-background-color-down: var(--dh-neutral-down-bg);--spectrum-neutral-background-color-key-focus: var(--dh-neutral-key-focus-bg);--spectrum-neutral-subdued-background-color-default: var( --dh-neutral-subdued-default-bg );--spectrum-neutral-subdued-background-color-hover: var( --dh-neutral-subdued-hover-bg );--spectrum-neutral-subdued-background-color-down: var( --dh-neutral-subdued-down-bg );--spectrum-neutral-subdued-background-color-key-focus: var( --dh-neutral-subdued-key-focus-bg );--spectrum-negative-background-color-default: var( --dh-color-negative-default-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-default-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-default-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-default-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-default-gray-bg);--spectrum-red-background-color-default: var(--dh-color-default-red-bg);--spectrum-orange-background-color-default: var(--dh-color-default-orange-bg);--spectrum-yellow-background-color-default: var(--dh-color-default-yellow-bg);--spectrum-chartreuse-background-color-default: var( --dh-color-default-chartreuse-bg );--spectrum-celery-background-color-default: var(--dh-color-default-celery-bg);--spectrum-green-background-color-default: var(--dh-color-default-green-bg);--spectrum-seafoam-background-color-default: var( --dh-color-default-seafoam-bg );--spectrum-cyan-background-color-default: var(--dh-color-default-cyan-bg);--spectrum-blue-background-color-default: var(--dh-color-default-blue-bg);--spectrum-indigo-background-color-default: var(--dh-color-default-indigo-bg);--spectrum-purple-background-color-default: var(--dh-color-default-purple-bg);--spectrum-fuchsia-background-color-default: var( --dh-color-default-fuchsia-bg );--spectrum-magenta-background-color-default: var( --dh-color-default-magenta-bg )}/*# sourceMappingURL=theme-spectrum-alias.module.css.map */
+.dh-spectrum-alias{--spectrum-alias-background-color-default: var(--dh-color-background);--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-default-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-default-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-default-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-default-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-default-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-default-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-default-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-default-gray-bg);--spectrum-red-background-color-default: var(--dh-color-default-red-bg);--spectrum-orange-background-color-default: var(--dh-color-default-orange-bg);--spectrum-yellow-background-color-default: var(--dh-color-default-yellow-bg);--spectrum-chartreuse-background-color-default: var( --dh-color-default-chartreuse-bg );--spectrum-celery-background-color-default: var(--dh-color-default-celery-bg);--spectrum-green-background-color-default: var(--dh-color-default-green-bg);--spectrum-seafoam-background-color-default: var( --dh-color-default-seafoam-bg );--spectrum-cyan-background-color-default: var(--dh-color-default-cyan-bg);--spectrum-blue-background-color-default: var(--dh-color-default-blue-bg);--spectrum-indigo-background-color-default: var(--dh-color-default-indigo-bg);--spectrum-purple-background-color-default: var(--dh-color-default-purple-bg);--spectrum-fuchsia-background-color-default: var( --dh-color-default-fuchsia-bg );--spectrum-magenta-background-color-default: var( --dh-color-default-magenta-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,mBACE,sEAGA,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,wFAGA,oFAGA,kFAGA,4FAKA,0EACA,sEACA,oEACA,8EAEA,4FAGA,wFAGA,sFAGA,gGAKA,oFAGA,8EACA,4EACA,wFAKA,oFAGA,8EACA,4EACA,wFAKA,mFAGA,6EACA,2EACA,uFAKA,8EACA,0EACA,wEACA,oFAKA,0EACA,wEACA,8EACA,8EACA,wFAGA,8EACA,4EACA,kFAGA,0EACA,0EACA,8EACA,8EACA,kFAGA","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  --spectrum-alias-background-color-default: var(--dh-color-background);\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(\n    --dh-color-accent-background-default\n  );\n  --spectrum-accent-background-color-hover: var(\n    --dh-color-accent-background-hover\n  );\n  --spectrum-accent-background-color-down: var(\n    --dh-color-accent-background-down\n  );\n  --spectrum-accent-background-color-key-focus: var(\n    --dh-color-accent-background-key-focus\n  );\n\n  /* Neutral */\n  --spectrum-neutral-background-color-default: var(--dh-neutral-default-bg);\n  --spectrum-neutral-background-color-hover: var(--dh-neutral-hover-bg);\n  --spectrum-neutral-background-color-down: var(--dh-neutral-down-bg);\n  --spectrum-neutral-background-color-key-focus: var(--dh-neutral-key-focus-bg);\n\n  --spectrum-neutral-subdued-background-color-default: var(\n    --dh-neutral-subdued-default-bg\n  );\n  --spectrum-neutral-subdued-background-color-hover: var(\n    --dh-neutral-subdued-hover-bg\n  );\n  --spectrum-neutral-subdued-background-color-down: var(\n    --dh-neutral-subdued-down-bg\n  );\n  --spectrum-neutral-subdued-background-color-key-focus: var(\n    --dh-neutral-subdued-key-focus-bg\n  );\n\n  /* Negative */\n  --spectrum-negative-background-color-default: var(\n    --dh-color-negative-default-bg\n  );\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(\n    --dh-color-positive-default-bg\n  );\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(\n    --dh-color-info-default-bg\n  );\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-default-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-default-gray-bg);\n  --spectrum-red-background-color-default: var(--dh-color-default-red-bg);\n  --spectrum-orange-background-color-default: var(--dh-color-default-orange-bg);\n  --spectrum-yellow-background-color-default: var(--dh-color-default-yellow-bg);\n  --spectrum-chartreuse-background-color-default: var(\n    --dh-color-default-chartreuse-bg\n  );\n  --spectrum-celery-background-color-default: var(--dh-color-default-celery-bg);\n  --spectrum-green-background-color-default: var(--dh-color-default-green-bg);\n  --spectrum-seafoam-background-color-default: var(\n    --dh-color-default-seafoam-bg\n  );\n  --spectrum-cyan-background-color-default: var(--dh-color-default-cyan-bg);\n  --spectrum-blue-background-color-default: var(--dh-color-default-blue-bg);\n  --spectrum-indigo-background-color-default: var(--dh-color-default-indigo-bg);\n  --spectrum-purple-background-color-default: var(--dh-color-default-purple-bg);\n  --spectrum-fuchsia-background-color-default: var(\n    --dh-color-default-fuchsia-bg\n  );\n  --spectrum-magenta-background-color-default: var(\n    --dh-color-default-magenta-bg\n  );\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-alias.module.css"],"names":[],"mappings":"AAEA,mBACE,sEAGA,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,8EACA,0EACA,wEACA,oFAKA,kFAGA,4EACA,0EACA,sFAIA,kGAGA,8FAGA,4FAGA,sGAKA,oFAGA,8EACA,4EACA,wFAKA,oFAGA,8EACA,4EACA,wFAKA,mFAGA,6EACA,2EACA,uFAKA,8EACA,0EACA,wEACA,oFAKA,0EACA,wEACA,8EACA,8EACA,wFAGA,8EACA,4EACA,kFAGA,0EACA,0EACA,8EACA,8EACA,kFAGA","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  --spectrum-alias-background-color-default: var(--dh-color-background);\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-default-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(\n    --dh-color-neutral-default-bg\n  );\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-default-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(\n    --dh-color-negative-default-bg\n  );\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(\n    --dh-color-positive-default-bg\n  );\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(\n    --dh-color-info-default-bg\n  );\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-default-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-default-gray-bg);\n  --spectrum-red-background-color-default: var(--dh-color-default-red-bg);\n  --spectrum-orange-background-color-default: var(--dh-color-default-orange-bg);\n  --spectrum-yellow-background-color-default: var(--dh-color-default-yellow-bg);\n  --spectrum-chartreuse-background-color-default: var(\n    --dh-color-default-chartreuse-bg\n  );\n  --spectrum-celery-background-color-default: var(--dh-color-default-celery-bg);\n  --spectrum-green-background-color-default: var(--dh-color-default-green-bg);\n  --spectrum-seafoam-background-color-default: var(\n    --dh-color-default-seafoam-bg\n  );\n  --spectrum-cyan-background-color-default: var(--dh-color-default-cyan-bg);\n  --spectrum-blue-background-color-default: var(--dh-color-default-blue-bg);\n  --spectrum-indigo-background-color-default: var(--dh-color-default-indigo-bg);\n  --spectrum-purple-background-color-default: var(--dh-color-default-purple-bg);\n  --spectrum-fuchsia-background-color-default: var(\n    --dh-color-default-fuchsia-bg\n  );\n  --spectrum-magenta-background-color-default: var(\n    --dh-color-default-magenta-bg\n  );\n}\n"]}

package/dist/theme/theme-svg.css

@@ -0,0 +1 @@
+:root{--dh-svg-icon-close-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='currentColor' d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E");--dh-svg-icon-maximise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M3 3v10h10V3H3zm9 9H4V4h8v8z'/%3E%3C/svg%3E");--dh-svg-icon-minimise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M14 8v1H3V8h11z'/%3E%3C/svg%3E");--dh-svg-icon-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z'/%3E%3C/svg%3E");--dh-svg-icon-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z'/%3E%3C/svg%3E");--dh-svg-icon-tab-dropdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z'/%3E%3C/svg%3E");--dh-svg-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='m256 278.624 116.672 116.704 22.656 -22.624L278.624 256l116.704 -116.672 -22.624 -22.656L256 233.376 139.328 116.672l-22.624 22.656L233.376 256l-116.672 116.672 22.624 22.656L256 278.624z'/%3E%3C/svg%3E");--dh-svg-icon-search-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z'/%3E%3C/svg%3E");--dh-svg-icon-selector-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='currentColor' d='M9.99 1.01A1 1 0 0 0 8.283.303L5 3.586 1.717.303A1 1 0 1 0 .303 1.717l3.99 3.98a1 1 0 0 0 1.414 0l3.99-3.98a.997.997 0 0 0 .293-.707z'/%3E%3C/svg%3E");--dh-svg-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z'/%3E%3C/svg%3E");--dh-svg-icon-select-indicator: var(--dh-svg-icon-selector-caret);--dh-svg-icon-select-indicator-hover: var(--dh-svg-icon-selector-caret);--dh-svg-icon-select-indicator-disabled: var(--dh-svg-icon-selector-caret)}/*# sourceMappingURL=theme-svg.css.map */

package/dist/theme/theme-svg.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/theme/theme-svg.scss"],"names":[],"mappings":"AAqCA,MAEE,2jBACA,6LACA,gLACA,8OACA,yOACA,mPACA,2VAEA,qSACA,2SAGA,8RAOA,kEACA,wEACA","file":"theme-svg.css","sourcesContent":["/* stylelint-disable custom-property-empty-line-before */\n\n/** \n * Create a SVG data url from given viewBox and path. Fill is explicitly set so \n * that it can be easily replaced via ThemeUtils.calculateInlineSVGOverrides()\n */\n@function inline-svg-url($viewBox, $path) {\n  @return url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='#{$viewBox}'%3E%3Cpath fill='currentColor' d='#{$path}'/%3E%3C/svg%3E\");\n}\n\n/* Golden layout */\n$svg-path-close-tab: '0 0 320 512',\n  'M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z';\n$svg-path-maximise: '0 0 16 16', 'M3 3v10h10V3H3zm9 9H4V4h8v8z';\n$svg-path-minimise: '0 0 16 16', 'M14 8v1H3V8h11z';\n$svg-path-next: '0 0 16 16',\n  'M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z';\n$svg-path-prev: '0 0 16 16',\n  'M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z';\n$svg-path-tab-dropdown: '0 0 16 16',\n  'M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z';\n$svg-path-close: '0 0 512 512',\n  'm256 278.624 116.672 116.704 22.656 -22.624L278.624 256l116.704 -116.672 -22.624 -22.656L256 233.376 139.328 116.672l-22.624 22.656L233.376 256l-116.672 116.672 22.624 22.656L256 278.624z';\n\n$svg-path-search-cancel: '0 0 16 16',\n  'M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z';\n$svg-path-down-caret: '0 0 10 6',\n  'M9.99 1.01A1 1 0 0 0 8.283.303L5 3.586 1.717.303A1 1 0 1 0 .303 1.717l3.99 3.98a1 1 0 0 0 1.414 0l3.99-3.98a.997.997 0 0 0 .293-.707z';\n\n$svg-path-error: '0 0 16 16',\n  'M7.56 1h.88l6.54 12.26-.44.74H1.44L1 13.26 7.56 1zM8 2.28 2.28 13H13.7L8 2.28zM8.625 12v-1h-1.25v1h1.25zm-1.25-2V6h1.25v4h-1.25z';\n\n/**\n * CSS variables containing inline SVGs. These all should have an explicit \n * `fill='...'` attribute set so that they can be easily replaced via \n * ThemeUtils.calculateInlineSVGOverrides()\n */\n:root {\n  /* Golden layout */\n  --dh-svg-icon-close-tab: #{inline-svg-url($svg-path-close-tab...)};\n  --dh-svg-icon-maximise: #{inline-svg-url($svg-path-maximise...)};\n  --dh-svg-icon-minimise: #{inline-svg-url($svg-path-minimise...)};\n  --dh-svg-icon-next: #{inline-svg-url($svg-path-next...)};\n  --dh-svg-icon-prev: #{inline-svg-url($svg-path-prev...)};\n  --dh-svg-icon-tab-dropdown: #{inline-svg-url($svg-path-tab-dropdown...)};\n  --dh-svg-icon-close: #{inline-svg-url($svg-path-close...)};\n\n  --dh-svg-icon-search-cancel: #{inline-svg-url($svg-path-search-cancel...)};\n  --dh-svg-icon-selector-caret: #{inline-svg-url($svg-path-down-caret...)};\n\n  /* Bootstrap form input error icon */\n  --dh-svg-icon-error: #{inline-svg-url($svg-path-error...)};\n\n  /* \n   * Bootstrap select indicators can't use image masks, so we need an icon for\n   * for each state so that ThemeUtils.calculateInlineSVGOverrides() can set\n   * the icon color for each state.\n   */\n  --dh-svg-icon-select-indicator: var(--dh-svg-icon-selector-caret);\n  --dh-svg-icon-select-indicator-hover: var(--dh-svg-icon-selector-caret);\n  --dh-svg-icon-select-indicator-disabled: var(--dh-svg-icon-selector-caret);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.55.1-beta.6+c0cc9667",
+  "version": "0.55.1-beta.8+1e40d3e5",
   "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.55.1-beta.6+c0cc9667",
-    "@deephaven/log": "^0.55.1-beta.6+c0cc9667",
-    "@deephaven/react-hooks": "^0.55.1-beta.6+c0cc9667",
-    "@deephaven/utils": "^0.55.1-beta.6+c0cc9667",
+    "@deephaven/icons": "^0.55.1-beta.8+1e40d3e5",
+    "@deephaven/log": "^0.55.1-beta.8+1e40d3e5",
+    "@deephaven/react-hooks": "^0.55.1-beta.8+1e40d3e5",
+    "@deephaven/utils": "^0.55.1-beta.8+1e40d3e5",
     "@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.55.1-beta.6+c0cc9667"
+    "@deephaven/mocks": "^0.55.1-beta.8+1e40d3e5"
   },
   "files": [
     "dist",
@@ -65,5 +65,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c0cc9667b70d8d21668c1d2bcfabe231cc3236bb"
+  "gitHead": "1e40d3e5a1078c555d55aa0a00c66a8b95dadfee"
 }

package/scss/BaseStyleSheet.scss

@@ -1,6 +1,7 @@
 // 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/scss/bootstrap';
 
 :root {
@@ -397,6 +398,16 @@ form label small {
 .form-control.focus {
   border: 1px solid $primary;
 }
+
+.form-control.is-invalid,
+.form-control.is-invalid:focus {
+  border-color: var(--dh-color-form-control-error);
+  background-image: var(--dh-svg-icon-error);
+}
+.form-control.is-invalid:focus {
+  box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
+}
+
 .form-control.btn:focus {
   box-shadow: $input-btn-focus-box-shadow;
 }
@@ -455,9 +466,41 @@ form label small {
   cursor: not-allowed;
 }
 
+.custom-select {
+  $caret-size: 10px 6px;
+  $error-size: 16px;
+
+  background-image: var(--dh-svg-icon-select-indicator);
+  background-size: $caret-size;
+
+  &:hover {
+    background-image: var(--dh-svg-icon-select-indicator-hover);
+  }
+
+  &.is-invalid,
+  &.is-invalid:focus {
+    border-color: var(--dh-color-form-control-error);
+    background-size: $caret-size, $error-size;
+    background-image: var(--dh-svg-icon-select-indicator),
+      var(--dh-svg-icon-error);
+  }
+  &.is-invalid:hover {
+    background-image: var(--dh-svg-icon-select-indicator-hover),
+      var(--dh-svg-icon-error);
+  }
+  &.is-invalid:focus {
+    box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
+  }
+}
+
 .custom-select:disabled {
   border-color: $black;
   cursor: not-allowed;
+  background-image: var(--dh-svg-icon-select-indicator-disabled);
+  &.is-invalid {
+    background-image: var(--dh-svg-icon-select-indicator-disabled),
+      var(--dh-svg-icon-error);
+  }
 }
 
 input[type='number'] {
@@ -486,11 +529,8 @@ input[type='number']::-webkit-inner-spin-button {
 }
 
 .input-group > .input-group-append.cb-dropdown > .btn {
-  color: $gray-400;
   border: 1px solid $gray-400;
-  &:hover {
-    color: $foreground;
-  }
+
   &:focus {
     border-color: $input-focus-border-color;
   }
@@ -739,29 +779,68 @@ input[type='number']::-webkit-inner-spin-button {
 //Moz specific hacks
 /* stylelint-disable-next-line function-url-quotes */
 @-moz-document url-prefix() {
-  //Selection box in mozilla loses default styling on options list if you apply a background color other then #FFF or inheirt...
-  //Hack: turn the background to inheirt, then apply a background gradient that is inputbg color to inputbg color
+  $caret-position: right $custom-select-padding-x;
+  $error-position: right (1 + $custom-select-padding-x);
+  $svg-caret: var(--dh-svg-icon-select-indicator);
+  $svg-caret-hover: var(--dh-svg-icon-select-indicator-hover);
+  $svg-error: var(--dh-svg-icon-error);
+
+  //Selection box in mozilla loses default styling on options list if you apply a background color other then #FFF or inherit...
+  //Hack: turn the background to inherit, then apply a background gradient that is inputbg color to inputbg color
   //for crossbrowser consistency this gradient is stacked bellow the svg used to get a caret (indicator) looking the same
   .custom-select {
     background-color: inherit !important;
     color: $foreground;
-    background-image: escape-svg($custom-select-indicator),
-      linear-gradient(0deg, $input-bg, $input-bg);
-    background-size: $custom-select-bg-size, cover;
-    background-repeat: no-repeat;
-    background-position:
-      bottom 50% right $custom-select-padding-x,
+    // bg image, size and position for 2 layers
+    background-image: $svg-caret, solid-gradient($input-bg);
+    background-size:
+      10px 6px,
+      cover;
+    background-position-x: $caret-position, center;
+    background-position-y:
+      bottom 50%,
       center;
+    background-repeat: no-repeat;
+
     //make the dotted duplicate focus line on firefox go away
     &:-moz-focusring {
       color: rgba(0, 0, 0, 0%);
       text-shadow: 0 0 0 $foreground !important;
     }
+
+    &:hover {
+      background-image: $svg-caret-hover, solid-gradient($input-bg);
+    }
+
+    &.is-invalid,
+    &.is-invalid:focus {
+      // bg image, size and position for 3 layers
+      background-image: $svg-caret, $svg-error, solid-gradient($input-bg);
+      background-size:
+        10px 6px,
+        16px,
+        cover;
+      background-position-x: $caret-position, $error-position, center;
+    }
+
+    &.is-invalid:hover {
+      background-image: $svg-caret-hover, $svg-error, solid-gradient($input-bg);
+    }
+
+    &:disabled {
+      background-image: $svg-caret, solid-gradient($input-disabled-bg);
+
+      &.is-invalid {
+        background-image: $svg-caret, $svg-error,
+          solid-gradient($input-disabled-bg);
+      }
+    }
   }
 
   .console-creator .custom-select {
-    background-image: escape-svg($custom-select-indicator),
-      linear-gradient(0deg, $gray-700, $gray-700);
+    background-image: var(--dh-svg-icon-select-indicator),
+      solid-gradient($gray-700);
+
     &:-moz-focusring {
       color: rgba(0, 0, 0, 0%);
       text-shadow: 0 0 0 $foreground !important;
@@ -769,8 +848,9 @@ input[type='number']::-webkit-inner-spin-button {
   }
 
   .modal-dialog.theme-bg-light .custom-select {
-    background-image: escape-svg($custom-select-indicator),
-      linear-gradient(0deg, $gray-200, $gray-200);
+    background-image: var(--dh-svg-icon-select-indicator),
+      solid-gradient($gray-200);
+
     &:-moz-focusring {
       color: rgba(0, 0, 0, 0%);
       text-shadow: 0 0 0 $background !important;

package/scss/util.scss

@@ -1,3 +1,24 @@
+// Setup a mask-image for an inline svg
+@mixin icon-image-mask($mask-image, $size: 16px) {
+  background-size: $size;
+  background-color: var(--dh-color-foreground);
+  mask-image: $mask-image;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+  mask-size: $size;
+}
+
+// Caret icon for pickers, dropdowns, select, etc.
+@mixin caret-icon() {
+  $width: 10px;
+  $height: 6px;
+  @include icon-image-mask(var(--dh-svg-icon-selector-caret), $width $height);
+
+  background-color: var(--dh-color-selector-fg);
+  width: $width;
+  height: $height;
+}
+
 /// Utilty for increasing specificity by repeating a given selector n number of
 /// times.
 ///
@@ -26,3 +47,9 @@
 
   @return $result;
 }
+
+// Linear gradient with same start and end color. Useful for certain scenarios
+// where we need a solid background image layer.
+@function solid-gradient($color) {
+  @return linear-gradient(0deg, $color, $color);
+}