@deephaven/components 0.58.1-beta.9 → 0.59.0

package/dist/theme/theme-light/theme-light-semantic.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-light/theme-light-semantic.css"],"names":[],"mappings":"AAEA,MAEE,gDACA,uDACA,wDACA,6CAEA,yDACA,iDAEA,oDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,0DACA,0DACA,0DACA,0DACA,0DAEA,oDACA,4DAEA,mDACA,qDACA,uDACA,uDACA,qDAWA,0DACA,4DAEA,kEACA,gEACA,oEACA,oEACA,kEACA,oEAGA,yDACA,8DACA,sEACA,0DACA,+DACA,yDACA,2DACA,6DACA,+DACA,6DACA,6DACA,uDACA,gEACA,6DAEA,8DACA,4DACA,6DACA,0DAGA,2CACA,2DACA,2DACA,2CACA,mDACA,kDACA,+DACA,6DAGA,kDACA,0CACA,mDACA,oEACA,gDAGA,iEACA,mEAGA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,6DACA,6DACA,6DACA,6DACA,6DAGA,sDACA,wDACA,uDACA,4DACA,qEAGA,6CACA,6CACA,2CACA,iDACA,kDACA,yDACA,iDACA,+CACA,mDACA,6CACA,iDACA,iDACA,mDACA,mDAGA,2CACA,kDACA,6CAGA,yEACA,wEACA,yEACA,2EACA,mFAMA,uEAGA,kEACA,wEACA,yEAGA,0DACA,sDACA,sDACA,0DACA,yEAGA,wDACA,sDACA,qDACA,0DACA,uEAEA,wDACA,8DACA,6DACA,kEAGA,0DACA,wDACA,uDACA,4DACA,yEAGA,kDACA,mDACA,kDACA,uDACA,iEAGA,sDACA,uDACA,sDACA,4DACA,qEAGA,6DACA,iEACA,yEACA,6DACA,mEACA,6DACA,+DACA,iEACA,mEACA,iEACA,iEACA,2DACA,mEACA,iEAEA,qEACA,qEACA,iEACA,6DAGA","file":"theme-light-semantic.css","sourcesContent":["/* stylelint-disable custom-property-empty-line-before */\n/* stylelint-disable alpha-value-notation */\n:root {\n  /* HSL base colors */\n  --dh-color-bg-hsl: var(--dh-color-gray-300-hsl);\n  --dh-color-content-bg-hsl: var(--dh-color-gray-50-hsl);\n  --dh-color-surface-bg-hsl: var(--dh-color-gray-200-hsl);\n  --dh-color-fg-hsl: var(--dh-color-black-hsl);\n\n  --dh-color-disabled-bg-hsl: var(--dh-color-gray-200-hsl);\n  --dh-color-scrollbar-hsl: var(--dh-color-fg-hsl);\n\n  --dh-color-accent-hsl: var(--dh-color-blue-900-hsl);\n  --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);\n  --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);\n  --dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl);\n  --dh-color-accent-400-hsl: var(--dh-color-blue-400-hsl);\n  --dh-color-accent-500-hsl: var(--dh-color-blue-500-hsl);\n  --dh-color-accent-600-hsl: var(--dh-color-blue-600-hsl);\n  --dh-color-accent-700-hsl: var(--dh-color-blue-700-hsl);\n  --dh-color-accent-800-hsl: var(--dh-color-blue-800-hsl);\n  --dh-color-accent-900-hsl: var(--dh-color-blue-900-hsl);\n  --dh-color-accent-1000-hsl: var(--dh-color-blue-1000-hsl);\n  --dh-color-accent-1100-hsl: var(--dh-color-blue-1100-hsl);\n  --dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl);\n  --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);\n  --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);\n\n  --dh-color-border-hsl: var(--dh-color-gray-700-hsl);\n  --dh-color-border-focus-hsl: var(--dh-color-accent-800-hsl);\n\n  --dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);\n  --dh-color-neutral-hsl: var(--dh-color-gray-500-hsl);\n  --dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);\n  --dh-color-positive-hsl: var(--dh-color-green-900-hsl);\n  --dh-color-negative-hsl: var(--dh-color-red-800-hsl);\n\n  /*\n   * Contrast Colors\n   *\n   * Note that React Spectrum guidance suggests that background colors containing\n   * yellow, orange, chartreuse or cyan should use a dark contrast color. All\n   * others should use light. Therefore, these should stay in sync with the \n   * --dh-color-xxx-hsl values above.\n   * https://spectrum.adobe.com/page/using-color/#Solid-color-background-with-black-or-white\n   */\n  --dh-color-contrast-dark-hsl: var(--dh-color-gray-50-hsl);\n  --dh-color-contrast-light-hsl: var(--dh-color-gray-900-hsl);\n\n  --dh-color-accent-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n  --dh-color-info-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n  --dh-color-negative-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n  --dh-color-neutral-contrast-hsl: var(--dh-color-contrast-light-hsl);\n  --dh-color-notice-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n  --dh-color-positive-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n\n  /* Visual HSL */\n  --dh-color-visual-blue-hsl: var(--dh-color-blue-900-hsl);\n  --dh-color-visual-celery-hsl: var(--dh-color-celery-1000-hsl);\n  --dh-color-visual-chartreuse-hsl: var(--dh-color-chartreuse-1100-hsl);\n  --dh-color-visual-cyan-hsl: var(--dh-color-cyan-1100-hsl);\n  --dh-color-visual-fuchsia-hsl: var(--dh-color-fuchsia-900-hsl);\n  --dh-color-visual-gray-hsl: var(--dh-color-gray-600-hsl);\n  --dh-color-visual-green-hsl: var(--dh-color-green-900-hsl);\n  --dh-color-visual-indigo-hsl: var(--dh-color-indigo-900-hsl);\n  --dh-color-visual-magenta-hsl: var(--dh-color-magenta-900-hsl);\n  --dh-color-visual-orange-hsl: var(--dh-color-orange-800-hsl);\n  --dh-color-visual-purple-hsl: var(--dh-color-purple-800-hsl);\n  --dh-color-visual-red-hsl: var(--dh-color-red-800-hsl);\n  --dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl);\n  --dh-color-visual-yellow-hsl: var(--dh-color-yellow-700-hsl);\n\n  --dh-color-visual-positive-hsl: var(--dh-color-green-800-hsl);\n  --dh-color-visual-negative-hsl: var(--dh-color-red-800-hsl);\n  --dh-color-visual-notice-hsl: var(--dh-color-yellow-700-hsl);\n  --dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);\n\n  /* General */\n  --dh-color-bg: hsl(var(--dh-color-bg-hsl));\n  --dh-color-content-bg: hsl(var(--dh-color-content-bg-hsl));\n  --dh-color-surface-bg: hsl(var(--dh-color-surface-bg-hsl));\n  --dh-color-fg: hsl(var(--dh-color-fg-hsl));\n  --dh-color-border: hsl(var(--dh-color-border-hsl));\n  --dh-color-hover-border: var(--dh-color-gray-900);\n  --dh-color-border-focus: hsl(var(--dh-color-border-focus-hsl));\n  --dh-color-disabled-bg: hsl(var(--dh-color-disabled-bg-hsl));\n\n  /* Text */\n  --dh-color-heading-text: var(--dh-color-gray-900);\n  --dh-color-text: var(--dh-color-gray-800);\n  --dh-color-text-disabled: var(--dh-color-gray-400);\n  --dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.15);\n  --dh-color-text-hover: var(--dh-color-gray-900);\n\n  /* Contrast Base */\n  --dh-color-contrast-dark: hsl(var(--dh-color-contrast-dark-hsl));\n  --dh-color-contrast-light: hsl(var(--dh-color-contrast-light-hsl));\n\n  /** Accent Colors */\n  --dh-color-accent-100: hsl(var(--dh-color-accent-100-hsl));\n  --dh-color-accent-200: hsl(var(--dh-color-accent-200-hsl));\n  --dh-color-accent-300: hsl(var(--dh-color-accent-300-hsl));\n  --dh-color-accent-400: hsl(var(--dh-color-accent-400-hsl));\n  --dh-color-accent-500: hsl(var(--dh-color-accent-500-hsl));\n  --dh-color-accent-600: hsl(var(--dh-color-accent-600-hsl));\n  --dh-color-accent-700: hsl(var(--dh-color-accent-700-hsl));\n  --dh-color-accent-800: hsl(var(--dh-color-accent-800-hsl));\n  --dh-color-accent-900: hsl(var(--dh-color-accent-900-hsl));\n  --dh-color-accent-1000: hsl(var(--dh-color-accent-1000-hsl));\n  --dh-color-accent-1100: hsl(var(--dh-color-accent-1100-hsl));\n  --dh-color-accent-1200: hsl(var(--dh-color-accent-1200-hsl));\n  --dh-color-accent-1300: hsl(var(--dh-color-accent-1300-hsl));\n  --dh-color-accent-1400: hsl(var(--dh-color-accent-1400-hsl));\n\n  /* Accent */\n  --dh-color-accent-bg: hsl(var(--dh-color-accent-hsl));\n  --dh-color-accent-hover-bg: var(--dh-color-accent-1000);\n  --dh-color-accent-down-bg: var(--dh-color-accent-1100);\n  --dh-color-accent-key-focus-bg: var(--dh-color-accent-1000);\n  --dh-color-accent-contrast: hsl(var(--dh-color-accent-contrast-hsl));\n\n  /* Background Defaults */\n  --dh-color-gray-bg: var(--dh-color-gray-700);\n  --dh-color-blue-bg: var(--dh-color-blue-700);\n  --dh-color-red-bg: var(--dh-color-red-700);\n  --dh-color-orange-bg: var(--dh-color-orange-800);\n  --dh-color-yellow-bg: var(--dh-color-yellow-1000);\n  --dh-color-chartreuse-bg: var(--dh-color-chartreuse-900);\n  --dh-color-celery-bg: var(--dh-color-celery-800);\n  --dh-color-green-bg: var(--dh-color-green-700);\n  --dh-color-seafoam-bg: var(--dh-color-seafoam-700);\n  --dh-color-cyan-bg: var(--dh-color-cyan-700);\n  --dh-color-indigo-bg: var(--dh-color-indigo-700);\n  --dh-color-purple-bg: var(--dh-color-purple-700);\n  --dh-color-fuchsia-bg: var(--dh-color-fuchsia-700);\n  --dh-color-magenta-bg: var(--dh-color-magenta-700);\n\n  /* Focus */\n  --dh-color-focus: var(--dh-color-blue-800);\n  --dh-color-focus-border: var(--dh-color-blue-800);\n  --dh-color-focus-ring: var(--dh-color-focus);\n\n  /* Highlight */\n  --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.15);\n  --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.08);\n  --dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15);\n  --dh-color-highlight-selected: hsla(var(--dh-color-visual-blue-hsl), 0.07);\n  --dh-color-highlight-selected-hover: hsla(\n    var(--dh-color-visual-blue-hsl),\n    0.13\n  );\n\n  /* Keyboard selected */\n  --dh-color-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);\n\n  /* Shadows / Overlays */\n  --dh-color-dropshadow: hsla(var(--dh-color-true-black-hsl), 0.25);\n  --dh-color-overlay-modal-bg: hsla(var(--dh-color-visual-gray-hsl), 0.6);\n  --dh-color-overlay-hover-bg: hsla(var(--dh-color-visual-gray-hsl), 0.08);\n\n  /* Negative */\n  --dh-color-negative-bg: hsl(var(--dh-color-negative-hsl));\n  --dh-color-negative-hover-bg: var(--dh-color-red-900);\n  --dh-color-negative-down-bg: var(--dh-color-red-1000);\n  --dh-color-negative-key-focus-bg: var(--dh-color-red-900);\n  --dh-color-negative-contrast: hsl(var(--dh-color-negative-contrast-hsl));\n\n  /* Neutral */\n  --dh-color-neutral-bg: hsl(var(--dh-color-neutral-hsl));\n  --dh-color-neutral-hover-bg: var(--dh-color-gray-400);\n  --dh-color-neutral-down-bg: var(--dh-color-gray-300);\n  --dh-color-neutral-key-focus-bg: var(--dh-color-gray-400);\n  --dh-color-neutral-contrast: hsl(var(--dh-color-neutral-contrast-hsl));\n\n  --dh-color-neutral-subdued-bg: var(--dh-color-gray-400);\n  --dh-color-neutral-subdued-hover-bg: var(--dh-color-gray-300);\n  --dh-color-neutral-subdued-down-bg: var(--dh-color-gray-200);\n  --dh-color-neutral-subdued-key-focus-bg: var(--dh-color-gray-300);\n\n  /* Positive */\n  --dh-color-positive-bg: hsl(var(--dh-color-positive-hsl));\n  --dh-color-positive-hover-bg: var(--dh-color-green-800);\n  --dh-color-positive-down-bg: var(--dh-color-green-700);\n  --dh-color-positive-key-focus-bg: var(--dh-color-green-800);\n  --dh-color-positive-contrast: hsl(var(--dh-color-positive-contrast-hsl));\n\n  /* Informative */\n  --dh-color-info-bg: hsl(var(--dh-color-info-hsl));\n  --dh-color-info-hover-bg: var(--dh-color-cyan-900);\n  --dh-color-info-down-bg: var(--dh-color-cyan-800);\n  --dh-color-info-key-focus-bg: var(--dh-color-cyan-900);\n  --dh-color-info-contrast: hsl(var(--dh-color-info-contrast-hsl));\n\n  /* Notice */\n  --dh-color-notice-bg: hsl(var(--dh-color-notice-hsl));\n  --dh-color-notice-hover-bg: var(--dh-color-yellow-900);\n  --dh-color-notice-down-bg: var(--dh-color-yellow-800);\n  --dh-color-notice-key-focus-bg: var(--dh-color-yellow-1000);\n  --dh-color-notice-contrast: hsl(var(--dh-color-notice-contrast-hsl));\n\n  /* Visual Colors */\n  --dh-color-visual-blue: hsl(var(--dh-color-visual-blue-hsl));\n  --dh-color-visual-celery: hsl(var(--dh-color-visual-celery-hsl));\n  --dh-color-visual-chartreuse: hsl(var(--dh-color-visual-chartreuse-hsl));\n  --dh-color-visual-cyan: hsl(var(--dh-color-visual-cyan-hsl));\n  --dh-color-visual-fuchsia: hsl(var(--dh-color-visual-fuchsia-hsl));\n  --dh-color-visual-gray: hsl(var(--dh-color-visual-gray-hsl));\n  --dh-color-visual-green: hsl(var(--dh-color-visual-green-hsl));\n  --dh-color-visual-indigo: hsl(var(--dh-color-visual-indigo-hsl));\n  --dh-color-visual-magenta: hsl(var(--dh-color-visual-magenta-hsl));\n  --dh-color-visual-orange: hsl(var(--dh-color-visual-orange-hsl));\n  --dh-color-visual-purple: hsl(var(--dh-color-visual-purple-hsl));\n  --dh-color-visual-red: hsl(var(--dh-color-visual-red-hsl));\n  --dh-color-visual-seafoam: hsl(var(--dh-color-visual-seafoam-hsl));\n  --dh-color-visual-yellow: hsl(var(--dh-color-visual-yellow-hsl));\n\n  --dh-color-visual-positive: hsl(var(--dh-color-visual-positive-hsl));\n  --dh-color-visual-negative: hsl(var(--dh-color-visual-negative-hsl));\n  --dh-color-visual-notice: hsl(var(--dh-color-visual-notice-hsl));\n  --dh-color-visual-info: hsl(var(--dh-color-visual-info-hsl));\n\n  /* Editing */\n  --dh-color-modified: var(--dh-color-orange-800);\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-light/theme-light-semantic.css"],"names":[],"mappings":"AAEA,MAEE,gDACA,wDACA,gEACA,wDACA,6CAEA,yDACA,iDAEA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,0DACA,0DACA,0DACA,0DACA,0DACA,sDAEA,oDACA,4DAEA,mDACA,qDACA,uDACA,uDACA,qDAWA,0DACA,4DAEA,kEACA,gEACA,oEACA,oEACA,kEACA,oEAGA,yDACA,8DACA,sEACA,0DACA,+DACA,yDACA,2DACA,6DACA,+DACA,6DACA,8DACA,uDACA,gEACA,6DAEA,8DACA,4DACA,6DACA,0DAGA,2CACA,2DACA,2EACA,2DACA,2CACA,mDACA,kDACA,+DACA,6DAGA,kDACA,0CACA,mDACA,oEACA,gDAGA,iEACA,mEAGA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,6DACA,6DACA,6DACA,6DACA,6DAGA,sDACA,wDACA,uDACA,4DACA,qEAGA,6CACA,6CACA,2CACA,iDACA,kDACA,yDACA,iDACA,+CACA,mDACA,6CACA,iDACA,iDACA,mDACA,mDAGA,2CACA,kDACA,6CAGA,wEACA,wEACA,yEACA,sEACA,4EAGA,uEAGA,kEACA,wEACA,yEAGA,0DACA,sDACA,sDACA,0DACA,yEAGA,wDACA,sDACA,qDACA,0DACA,uEAEA,wDACA,8DACA,6DACA,kEAGA,0DACA,wDACA,uDACA,4DACA,yEAGA,kDACA,mDACA,kDACA,uDACA,iEAGA,sDACA,uDACA,sDACA,4DACA,qEAGA,6DACA,iEACA,yEACA,6DACA,mEACA,6DACA,+DACA,iEACA,mEACA,iEACA,iEACA,2DACA,mEACA,iEAEA,qEACA,qEACA,iEACA,6DAGA","file":"theme-light-semantic.css","sourcesContent":["/* stylelint-disable custom-property-empty-line-before */\n/* stylelint-disable alpha-value-notation */\n:root {\n  /* HSL base colors */\n  --dh-color-bg-hsl: var(--dh-color-gray-300-hsl);\n  --dh-color-content-bg-hsl: var(--dh-color-gray-100-hsl);\n  --dh-color-subdued-content-bg-hsl: var(--dh-color-gray-200-hsl);\n  --dh-color-surface-bg-hsl: var(--dh-color-gray-200-hsl);\n  --dh-color-fg-hsl: var(--dh-color-black-hsl);\n\n  --dh-color-disabled-bg-hsl: var(--dh-color-gray-200-hsl);\n  --dh-color-scrollbar-hsl: var(--dh-color-fg-hsl);\n\n  --dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);\n  --dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);\n  --dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl);\n  --dh-color-accent-400-hsl: var(--dh-color-blue-400-hsl);\n  --dh-color-accent-500-hsl: var(--dh-color-blue-500-hsl);\n  --dh-color-accent-600-hsl: var(--dh-color-blue-600-hsl);\n  --dh-color-accent-700-hsl: var(--dh-color-blue-700-hsl);\n  --dh-color-accent-800-hsl: var(--dh-color-blue-800-hsl);\n  --dh-color-accent-900-hsl: var(--dh-color-blue-900-hsl);\n  --dh-color-accent-1000-hsl: var(--dh-color-blue-1000-hsl);\n  --dh-color-accent-1100-hsl: var(--dh-color-blue-1100-hsl);\n  --dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl);\n  --dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);\n  --dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);\n  --dh-color-accent-hsl: var(--dh-color-accent-900-hsl);\n\n  --dh-color-border-hsl: var(--dh-color-gray-700-hsl);\n  --dh-color-border-focus-hsl: var(--dh-color-accent-800-hsl);\n\n  --dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);\n  --dh-color-neutral-hsl: var(--dh-color-gray-400-hsl);\n  --dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);\n  --dh-color-positive-hsl: var(--dh-color-green-900-hsl);\n  --dh-color-negative-hsl: var(--dh-color-red-800-hsl);\n\n  /*\n   * Contrast Colors\n   *\n   * Note that React Spectrum guidance suggests that background colors containing\n   * yellow, orange, chartreuse or cyan should use a dark contrast color. All\n   * others should use light. Therefore, these should stay in sync with the \n   * --dh-color-xxx-hsl values above.\n   * https://spectrum.adobe.com/page/using-color/#Solid-color-background-with-black-or-white\n   */\n  --dh-color-contrast-dark-hsl: var(--dh-color-gray-50-hsl);\n  --dh-color-contrast-light-hsl: var(--dh-color-gray-900-hsl);\n\n  --dh-color-accent-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n  --dh-color-info-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n  --dh-color-negative-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n  --dh-color-neutral-contrast-hsl: var(--dh-color-contrast-light-hsl);\n  --dh-color-notice-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n  --dh-color-positive-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n\n  /* Visual HSL */\n  --dh-color-visual-blue-hsl: var(--dh-color-blue-900-hsl);\n  --dh-color-visual-celery-hsl: var(--dh-color-celery-1000-hsl);\n  --dh-color-visual-chartreuse-hsl: var(--dh-color-chartreuse-1100-hsl);\n  --dh-color-visual-cyan-hsl: var(--dh-color-cyan-1100-hsl);\n  --dh-color-visual-fuchsia-hsl: var(--dh-color-fuchsia-900-hsl);\n  --dh-color-visual-gray-hsl: var(--dh-color-gray-600-hsl);\n  --dh-color-visual-green-hsl: var(--dh-color-green-900-hsl);\n  --dh-color-visual-indigo-hsl: var(--dh-color-indigo-900-hsl);\n  --dh-color-visual-magenta-hsl: var(--dh-color-magenta-900-hsl);\n  --dh-color-visual-orange-hsl: var(--dh-color-orange-800-hsl);\n  --dh-color-visual-purple-hsl: var(--dh-color-purple-1000-hsl);\n  --dh-color-visual-red-hsl: var(--dh-color-red-800-hsl);\n  --dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl);\n  --dh-color-visual-yellow-hsl: var(--dh-color-yellow-700-hsl);\n\n  --dh-color-visual-positive-hsl: var(--dh-color-green-800-hsl);\n  --dh-color-visual-negative-hsl: var(--dh-color-red-800-hsl);\n  --dh-color-visual-notice-hsl: var(--dh-color-yellow-700-hsl);\n  --dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);\n\n  /* General */\n  --dh-color-bg: hsl(var(--dh-color-bg-hsl));\n  --dh-color-content-bg: hsl(var(--dh-color-content-bg-hsl));\n  --dh-color-subdued-content-bg: hsl(var(--dh-color-subdued-content-bg-hsl));\n  --dh-color-surface-bg: hsl(var(--dh-color-surface-bg-hsl));\n  --dh-color-fg: hsl(var(--dh-color-fg-hsl));\n  --dh-color-border: hsl(var(--dh-color-border-hsl));\n  --dh-color-hover-border: var(--dh-color-gray-900);\n  --dh-color-border-focus: hsl(var(--dh-color-border-focus-hsl));\n  --dh-color-disabled-bg: hsl(var(--dh-color-disabled-bg-hsl));\n\n  /* Text */\n  --dh-color-heading-text: var(--dh-color-gray-900);\n  --dh-color-text: var(--dh-color-gray-800);\n  --dh-color-text-disabled: var(--dh-color-gray-700);\n  --dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.15);\n  --dh-color-text-hover: var(--dh-color-gray-900);\n\n  /* Contrast Base */\n  --dh-color-contrast-dark: hsl(var(--dh-color-contrast-dark-hsl));\n  --dh-color-contrast-light: hsl(var(--dh-color-contrast-light-hsl));\n\n  /** Accent Colors */\n  --dh-color-accent-100: hsl(var(--dh-color-accent-100-hsl));\n  --dh-color-accent-200: hsl(var(--dh-color-accent-200-hsl));\n  --dh-color-accent-300: hsl(var(--dh-color-accent-300-hsl));\n  --dh-color-accent-400: hsl(var(--dh-color-accent-400-hsl));\n  --dh-color-accent-500: hsl(var(--dh-color-accent-500-hsl));\n  --dh-color-accent-600: hsl(var(--dh-color-accent-600-hsl));\n  --dh-color-accent-700: hsl(var(--dh-color-accent-700-hsl));\n  --dh-color-accent-800: hsl(var(--dh-color-accent-800-hsl));\n  --dh-color-accent-900: hsl(var(--dh-color-accent-900-hsl));\n  --dh-color-accent-1000: hsl(var(--dh-color-accent-1000-hsl));\n  --dh-color-accent-1100: hsl(var(--dh-color-accent-1100-hsl));\n  --dh-color-accent-1200: hsl(var(--dh-color-accent-1200-hsl));\n  --dh-color-accent-1300: hsl(var(--dh-color-accent-1300-hsl));\n  --dh-color-accent-1400: hsl(var(--dh-color-accent-1400-hsl));\n\n  /* Accent */\n  --dh-color-accent-bg: hsl(var(--dh-color-accent-hsl));\n  --dh-color-accent-hover-bg: var(--dh-color-accent-1000);\n  --dh-color-accent-down-bg: var(--dh-color-accent-1100);\n  --dh-color-accent-key-focus-bg: var(--dh-color-accent-1000);\n  --dh-color-accent-contrast: hsl(var(--dh-color-accent-contrast-hsl));\n\n  /* Background Defaults */\n  --dh-color-gray-bg: var(--dh-color-gray-700);\n  --dh-color-blue-bg: var(--dh-color-blue-700);\n  --dh-color-red-bg: var(--dh-color-red-700);\n  --dh-color-orange-bg: var(--dh-color-orange-800);\n  --dh-color-yellow-bg: var(--dh-color-yellow-1000);\n  --dh-color-chartreuse-bg: var(--dh-color-chartreuse-900);\n  --dh-color-celery-bg: var(--dh-color-celery-800);\n  --dh-color-green-bg: var(--dh-color-green-700);\n  --dh-color-seafoam-bg: var(--dh-color-seafoam-700);\n  --dh-color-cyan-bg: var(--dh-color-cyan-700);\n  --dh-color-indigo-bg: var(--dh-color-indigo-700);\n  --dh-color-purple-bg: var(--dh-color-purple-700);\n  --dh-color-fuchsia-bg: var(--dh-color-fuchsia-700);\n  --dh-color-magenta-bg: var(--dh-color-magenta-700);\n\n  /* Focus */\n  --dh-color-focus: var(--dh-color-blue-800);\n  --dh-color-focus-border: var(--dh-color-blue-800);\n  --dh-color-focus-ring: var(--dh-color-focus);\n\n  /* Highlight */\n  --dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.2);\n  --dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.15);\n  --dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15);\n  --dh-color-highlight-selected: hsla(var(--dh-color-accent-hsl), 0.25);\n  --dh-color-highlight-selected-hover: hsla(var(--dh-color-accent-hsl), 0.35);\n\n  /* Keyboard selected */\n  --dh-color-keyboard-selected-bg: hsla(var(--dh-color-accent-hsl), 0.5);\n\n  /* Shadows / Overlays */\n  --dh-color-dropshadow: hsla(var(--dh-color-true-black-hsl), 0.25);\n  --dh-color-overlay-modal-bg: hsla(var(--dh-color-visual-gray-hsl), 0.6);\n  --dh-color-overlay-hover-bg: hsla(var(--dh-color-visual-gray-hsl), 0.08);\n\n  /* Negative */\n  --dh-color-negative-bg: hsl(var(--dh-color-negative-hsl));\n  --dh-color-negative-hover-bg: var(--dh-color-red-900);\n  --dh-color-negative-down-bg: var(--dh-color-red-1000);\n  --dh-color-negative-key-focus-bg: var(--dh-color-red-900);\n  --dh-color-negative-contrast: hsl(var(--dh-color-negative-contrast-hsl));\n\n  /* Neutral */\n  --dh-color-neutral-bg: hsl(var(--dh-color-neutral-hsl));\n  --dh-color-neutral-hover-bg: var(--dh-color-gray-300);\n  --dh-color-neutral-down-bg: var(--dh-color-gray-100);\n  --dh-color-neutral-key-focus-bg: var(--dh-color-gray-300);\n  --dh-color-neutral-contrast: hsl(var(--dh-color-neutral-contrast-hsl));\n\n  --dh-color-neutral-subdued-bg: var(--dh-color-gray-400);\n  --dh-color-neutral-subdued-hover-bg: var(--dh-color-gray-300);\n  --dh-color-neutral-subdued-down-bg: var(--dh-color-gray-200);\n  --dh-color-neutral-subdued-key-focus-bg: var(--dh-color-gray-300);\n\n  /* Positive */\n  --dh-color-positive-bg: hsl(var(--dh-color-positive-hsl));\n  --dh-color-positive-hover-bg: var(--dh-color-green-800);\n  --dh-color-positive-down-bg: var(--dh-color-green-700);\n  --dh-color-positive-key-focus-bg: var(--dh-color-green-800);\n  --dh-color-positive-contrast: hsl(var(--dh-color-positive-contrast-hsl));\n\n  /* Informative */\n  --dh-color-info-bg: hsl(var(--dh-color-info-hsl));\n  --dh-color-info-hover-bg: var(--dh-color-cyan-900);\n  --dh-color-info-down-bg: var(--dh-color-cyan-800);\n  --dh-color-info-key-focus-bg: var(--dh-color-cyan-900);\n  --dh-color-info-contrast: hsl(var(--dh-color-info-contrast-hsl));\n\n  /* Notice */\n  --dh-color-notice-bg: hsl(var(--dh-color-notice-hsl));\n  --dh-color-notice-hover-bg: var(--dh-color-yellow-900);\n  --dh-color-notice-down-bg: var(--dh-color-yellow-800);\n  --dh-color-notice-key-focus-bg: var(--dh-color-yellow-1000);\n  --dh-color-notice-contrast: hsl(var(--dh-color-notice-contrast-hsl));\n\n  /* Visual Colors */\n  --dh-color-visual-blue: hsl(var(--dh-color-visual-blue-hsl));\n  --dh-color-visual-celery: hsl(var(--dh-color-visual-celery-hsl));\n  --dh-color-visual-chartreuse: hsl(var(--dh-color-visual-chartreuse-hsl));\n  --dh-color-visual-cyan: hsl(var(--dh-color-visual-cyan-hsl));\n  --dh-color-visual-fuchsia: hsl(var(--dh-color-visual-fuchsia-hsl));\n  --dh-color-visual-gray: hsl(var(--dh-color-visual-gray-hsl));\n  --dh-color-visual-green: hsl(var(--dh-color-visual-green-hsl));\n  --dh-color-visual-indigo: hsl(var(--dh-color-visual-indigo-hsl));\n  --dh-color-visual-magenta: hsl(var(--dh-color-visual-magenta-hsl));\n  --dh-color-visual-orange: hsl(var(--dh-color-visual-orange-hsl));\n  --dh-color-visual-purple: hsl(var(--dh-color-visual-purple-hsl));\n  --dh-color-visual-red: hsl(var(--dh-color-visual-red-hsl));\n  --dh-color-visual-seafoam: hsl(var(--dh-color-visual-seafoam-hsl));\n  --dh-color-visual-yellow: hsl(var(--dh-color-visual-yellow-hsl));\n\n  --dh-color-visual-positive: hsl(var(--dh-color-visual-positive-hsl));\n  --dh-color-visual-negative: hsl(var(--dh-color-visual-negative-hsl));\n  --dh-color-visual-notice: hsl(var(--dh-color-visual-notice-hsl));\n  --dh-color-visual-info: hsl(var(--dh-color-visual-info-hsl));\n\n  /* Editing */\n  --dh-color-modified: var(--dh-color-green-700);\n}\n"]}

package/dist/theme/theme-spectrum/theme-spectrum-overrides.css

@@ -1 +1 @@
-[class^=spectrum]{font-family:var(--font-family-sans-serif) !important}label[class^=spectrum-]{margin-bottom:0}.svg-inline--fa[class*=spectrum-Icon--sizeS]{--spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size)}.action-button-icon-with-tooltip{padding-right:var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85))}/*# sourceMappingURL=theme-spectrum-overrides.css.map */
+[class^=spectrum]{font-family:var(--font-family-sans-serif) !important}label[class^=spectrum-]{margin-bottom:0}.svg-inline--fa[class*=spectrum-Icon--sizeS]{--spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size)}.action-button-icon-with-tooltip{padding-right:var(--spectrum-actionbutton-icon-padding-x, var(--spectrum-global-dimension-size-85))}[class^=spectrum-Table-headCell]{--dh-table-header-cell-background-color: transparent;background:var(--dh-table-header-cell-background-color)}[class*=spectrum-Table--quiet]{--spectrum-alias-background-color-default: transparent}button[class^=spectrum-Button]{--spectrum-button-primary-text-gap: var(--spectrum-global-dimension-size-75);padding-bottom:calc(var(--spectrum-global-dimension-size-50) - 1px);padding-top:calc(var(--spectrum-global-dimension-size-50))}button[class^=spectrum-Button] svg{padding-bottom:var(--spectrum-global-dimension-size-25)}span[class^=spectrum-Checkbox-label],span[class^=spectrum-Radio-label]{margin-top:var(--spectrum-global-dimension-size-85)}/*# sourceMappingURL=theme-spectrum-overrides.css.map */

package/dist/theme/theme-spectrum/theme-spectrum-overrides.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-overrides.css"],"names":[],"mappings":"AAAA,kBAGE,qDAIF,wBACE,gBAGF,6CAKE,oEAQF,iCACE","file":"theme-spectrum-overrides.css","sourcesContent":["[class^='spectrum'] {\n  /* --font-family-sans-serif is defined in Bootstrap's _root.scss. We want\n  Spectrum to use the same default font-family */\n  font-family: var(--font-family-sans-serif) !important;\n}\n\n/* Override _reboot.scss */\nlabel[class^='spectrum-'] {\n  margin-bottom: 0;\n}\n\n.svg-inline--fa[class*='spectrum-Icon--sizeS'] {\n  /* \n  Resize fontawesome icons used inside a spectrum icon wrapper to match\n  our icon size. Spectrum icons are 18px by default, but our icons are built on a 16px grid.\n  */\n  --spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size);\n}\n\n/** \n * Spectrum action button icons only include right padding if the the icon is \n * the only child. In cases where we add a <Tooltip>, we have to manually add \n * the right padding ourselves to keep the icon centered.\n */\n.action-button-icon-with-tooltip {\n  padding-right: var(\n    --spectrum-actionbutton-icon-padding-x,\n    var(--spectrum-global-dimension-size-85)\n  );\n}\n"]}
+{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-overrides.css"],"names":[],"mappings":"AAAA,kBAGE,qDAIF,wBACE,gBAGF,6CAKE,oEAQF,iCACE,oGAMF,iCAME,qDACA,wDAIF,+BAEE,uDAGF,+BAEE,6EAGA,oEACA,2DAGF,mCAEE,wDAGF,uEAKE","file":"theme-spectrum-overrides.css","sourcesContent":["[class^='spectrum'] {\n  /* --font-family-sans-serif is defined in Bootstrap's _root.scss. We want\n  Spectrum to use the same default font-family */\n  font-family: var(--font-family-sans-serif) !important;\n}\n\n/* Override _reboot.scss */\nlabel[class^='spectrum-'] {\n  margin-bottom: 0;\n}\n\n.svg-inline--fa[class*='spectrum-Icon--sizeS'] {\n  /* \n  Resize fontawesome icons used inside a spectrum icon wrapper to match\n  our icon size. Spectrum icons are 18px by default, but our icons are built on a 16px grid.\n  */\n  --spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size);\n}\n\n/** \n * Spectrum action button icons only include right padding if the the icon is \n * the only child. In cases where we add a <Tooltip>, we have to manually add \n * the right padding ourselves to keep the icon centered.\n */\n.action-button-icon-with-tooltip {\n  padding-right: var(\n    --spectrum-actionbutton-icon-padding-x,\n    var(--spectrum-global-dimension-size-85)\n  );\n}\n\n[class^='spectrum-Table-headCell'] {\n  /* \n  Tables are styled with the assumption that the header is the same color as the bg\n  which means they look bad against any other background color, instead just inherit the bg.\n  There is also no variable exposed for this, so we have to target the class directly.\n */\n  --dh-table-header-cell-background-color: transparent;\n  background: var(--dh-table-header-cell-background-color);\n}\n\n/* Table */\n[class*='spectrum-Table--quiet'] {\n  /* Quiet shouldn't assume a bg color */\n  --spectrum-alias-background-color-default: transparent;\n}\n\nbutton[class^='spectrum-Button'] {\n  /* make the icon closer to the text */\n  --spectrum-button-primary-text-gap: var(--spectrum-global-dimension-size-75);\n\n  /* Center the text vertically. We use a different font then spectrum so we require different custom centering */\n  padding-bottom: calc(var(--spectrum-global-dimension-size-50) - 1px);\n  padding-top: calc(var(--spectrum-global-dimension-size-50));\n}\n\nbutton[class^='spectrum-Button'] svg {\n  /* our icons are smaller, center them too */\n  padding-bottom: var(--spectrum-global-dimension-size-25);\n}\n\nspan[class^='spectrum-Checkbox-label'],\nspan[class^='spectrum-Radio-label'] {\n  /* I have no idea why these spectrum labels aren't centered,\n   but this fixes it. Maybe difference in font baselines.\n   */\n  margin-top: var(--spectrum-global-dimension-size-85);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.58.1-beta.9+ed41c424",
+  "version": "0.59.0",
   "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.58.1-beta.9+ed41c424",
-    "@deephaven/log": "^0.58.1-beta.9+ed41c424",
-    "@deephaven/react-hooks": "^0.58.1-beta.9+ed41c424",
-    "@deephaven/utils": "^0.58.1-beta.9+ed41c424",
+    "@deephaven/icons": "^0.59.0",
+    "@deephaven/log": "^0.59.0",
+    "@deephaven/react-hooks": "^0.59.0",
+    "@deephaven/utils": "^0.59.0",
     "@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.58.1-beta.9+ed41c424"
+    "@deephaven/mocks": "^0.59.0"
   },
   "files": [
     "dist",
@@ -66,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed41c424de75fcba8751a70b54a189957f979e97"
+  "gitHead": "9d2fcaeb5b6ffd624df9eab1cfea6ce0a183a803"
 }

package/scss/BaseStyleSheet.scss

@@ -129,8 +129,13 @@ button:focus {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-top: 3px;
-  padding-bottom: 5px;
+  // match spectrum button custom padding
+  padding: 4px 14px 3px 14px;
+  gap: 6px;
+
+  .svg-inline--fa {
+    padding-bottom: 2px;
+  }
 }
 
 .btn-sm {
@@ -162,8 +167,8 @@ span.btn-disabled-wrapper {
   min-width: unset;
   padding: $spacer-1;
 
-  svg {
-    margin-right: $spacer-1;
+  .svg-inline--fa {
+    align-self: center;
   }
 
   &:not(.btn-link-icon) {
@@ -214,9 +219,6 @@ span.btn-disabled-wrapper {
 
 .btn-spinner {
   padding: $btn-padding-y 1rem;
-  .fa-layers {
-    margin-right: 0.5rem;
-  }
 }
 
 .btn-link.no-underline,
@@ -235,10 +237,6 @@ span.btn-disabled-wrapper {
   padding-left: $spacer-1;
   padding-right: $spacer-1;
 
-  svg {
-    margin-right: 0;
-  }
-
   &::after {
     content: '';
     box-sizing: border-box;
@@ -339,6 +337,10 @@ span.btn-disabled-wrapper {
   color: var(--dh-color-action-fg);
   font-weight: $font-weight-normal;
 
+  .svg-inline--fa {
+    align-self: center;
+  }
+
   &.active {
     border-color: var(--dh-color-action-active-border);
     background: var(--dh-color-action-active-bg);

package/scss/bootstrap_overrides.scss

@@ -9,6 +9,9 @@ $green: var(--dh-color-visual-green);
 $blue: var(--dh-color-visual-blue);
 $purple: var(--dh-color-visual-purple);
 
+// Fallback colors are used if theme isn't loaded
+// this is required for error messages if the API doesn't load
+
 //Define our Gray scale
 $gray-100: var(--dh-color-gray-900, #fcfcfa);
 $gray-200: var(--dh-color-gray-800);
@@ -31,8 +34,8 @@ $interfaceblue: var(--dh-color-accent-bg);
 $interfacewhite: $white;
 $interfaceblack: $black;
 $content-bg: var(--dh-color-content-bg, #2d2a2e);
-$background: var(--dh-color-bg);
-$foreground: var(--dh-color-fg);
+$background: var(--dh-color-bg, #1a171a);
+$foreground: var(--dh-color-fg, #f0f0ee);
 
 // Extend default Bootstrap $grays map
 $grays-custom: (
@@ -93,7 +96,6 @@ $body-color: $interfacewhite;
 $primary: var(--dh-color-accent-bg);
 $primary-hover: var(--dh-color-accent-hover-bg);
 $primary-dark: var(--dh-color-accent-down-bg);
-$primary-light: var(--dh-color-accent-1100);
 $secondary: var(--dh-color-neutral-bg);
 $secondary-hover: var(--dh-color-neutral-hover-bg);
 $success: $green;
@@ -112,7 +114,6 @@ $mid: var(--dh-color-gray-mid);
 
 $semantic-colors: (
   'primary-hover': $primary-hover,
-  'primary-light': $primary-light,
   'primary-dark': $primary-dark,
   'mid': $mid,
   'content-bg': $interfacegray,
@@ -180,9 +181,10 @@ $input-btn-focus-color: hsla(var(--dh-color-accent-hsl), 0.35);
 $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)).
-// The padding-y value has to be in rem to match units. Using 0.4214rem with 1.3
-// line height gets us to 31.99px vs Spectrum's 32px.
-$input-btn-padding-y: 0.4214rem;
+// The padding-y value has to be in rem to match units as it is a SASS calc.
+// Using 0.42145rem with 1.3 line height gets us to spectrum's 32px.
+/* stylelint-disable-next-line number-max-precision */
+$input-btn-padding-y: 0.42145rem;
 
 //checkbox
 $custom-control-indicator-bg: var(--dh-color-input-bg);
@@ -241,7 +243,7 @@ $tooltip-box-shadow: 0 0.1rem 1.5rem 0.1rem var(--dh-color-tooltip-box-shadow);
 $dropdown-bg: $gray-600;
 $dropdown-link-color: $foreground;
 $dropdown-link-hover-color: $foreground;
-$dropdown-link-hover-bg: $primary;
+$dropdown-link-hover-bg: var(--dh-color-item-list-hover-bg);
 $dropdown-divider-bg: $gray-700;
 
 //context menus