@deephaven/components 0.55.1-beta.1 → 0.55.1-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/BaseStyleSheet.css +62 -16
- package/css/BaseStyleSheet.css.map +1 -1
- package/dist/Button.d.ts.map +1 -1
- package/dist/Button.js +26 -2
- package/dist/Button.js.map +1 -1
- package/dist/ComboBox.css +20 -0
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.d.ts.map +1 -1
- package/dist/ComboBox.js +2 -4
- package/dist/ComboBox.js.map +1 -1
- package/dist/CustomTimeSelect.css +15 -2
- package/dist/CustomTimeSelect.css.map +1 -1
- package/dist/CustomTimeSelect.d.ts.map +1 -1
- package/dist/CustomTimeSelect.js +2 -5
- package/dist/CustomTimeSelect.js.map +1 -1
- package/dist/LoadingSpinner.css +2 -8
- package/dist/LoadingSpinner.css.map +1 -1
- package/dist/SearchInput.css +28 -12
- package/dist/SearchInput.css.map +1 -1
- package/dist/SearchInput.d.ts +10 -1
- package/dist/SearchInput.d.ts.map +1 -1
- package/dist/SearchInput.js +73 -7
- package/dist/SearchInput.js.map +1 -1
- package/dist/shortcuts/GlobalShortcuts.d.ts +2 -0
- package/dist/shortcuts/GlobalShortcuts.d.ts.map +1 -1
- package/dist/shortcuts/GlobalShortcuts.js +14 -0
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
- package/dist/theme/ThemeModel.d.ts +12 -6
- package/dist/theme/ThemeModel.d.ts.map +1 -1
- package/dist/theme/ThemeModel.js +18 -3
- package/dist/theme/ThemeModel.js.map +1 -1
- package/dist/theme/ThemePicker.d.ts +4 -0
- package/dist/theme/ThemePicker.d.ts.map +1 -0
- package/dist/theme/ThemePicker.js +25 -0
- package/dist/theme/ThemePicker.js.map +1 -0
- package/dist/theme/ThemeProvider.d.ts +3 -1
- package/dist/theme/ThemeProvider.d.ts.map +1 -1
- package/dist/theme/ThemeProvider.js +16 -9
- package/dist/theme/ThemeProvider.js.map +1 -1
- package/dist/theme/ThemeUtils.d.ts +37 -5
- package/dist/theme/ThemeUtils.d.ts.map +1 -1
- package/dist/theme/ThemeUtils.js +91 -33
- package/dist/theme/ThemeUtils.js.map +1 -1
- package/dist/theme/index.d.ts +1 -0
- package/dist/theme/index.d.ts.map +1 -1
- package/dist/theme/index.js +1 -0
- package/dist/theme/index.js.map +1 -1
- package/dist/theme/theme-dark/theme-dark-components.css +1 -1
- package/dist/theme/theme-dark/theme-dark-components.css.map +1 -1
- package/dist/theme/theme-dark/theme-dark-palette.css +1 -1
- package/dist/theme/theme-dark/theme-dark-palette.css.map +1 -1
- package/dist/theme/theme-dark/theme-dark-semantic-chart.css +1 -1
- package/dist/theme/theme-dark/theme-dark-semantic-chart.css.map +1 -1
- package/dist/theme/theme-dark/theme-dark-semantic-grid.css +1 -1
- package/dist/theme/theme-dark/theme-dark-semantic-grid.css.map +1 -1
- package/dist/theme/theme-dark/theme-dark-semantic.css +1 -1
- package/dist/theme/theme-dark/theme-dark-semantic.css.map +1 -1
- package/dist/theme/theme-light/theme-light-palette.css +1 -1
- package/dist/theme/theme-light/theme-light-palette.css.map +1 -1
- package/dist/theme/theme-spectrum/index.d.ts +1 -0
- package/dist/theme/theme-spectrum/index.d.ts.map +1 -1
- package/dist/theme/theme-spectrum/index.js +3 -3
- package/dist/theme/theme-spectrum/index.js.map +1 -1
- package/dist/theme/theme-spectrum/theme-spectrum-alias.module.css +1 -1
- package/dist/theme/theme-spectrum/theme-spectrum-alias.module.css.map +1 -1
- package/dist/theme/theme-spectrum/theme-spectrum-overrides.css +1 -0
- package/dist/theme/theme-spectrum/theme-spectrum-overrides.css.map +1 -0
- package/dist/theme/theme-svg.css +1 -0
- package/dist/theme/theme-svg.css.map +1 -0
- package/package.json +7 -7
- package/scss/BaseStyleSheet.scss +102 -23
- package/scss/util.scss +27 -0
- package/dist/theme/theme-spectrum/theme-spectrum-overrides.module.css +0 -1
- package/dist/theme/theme-spectrum/theme-spectrum-overrides.module.css.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--dh-color-accent: var(--dh-color-blue-700);--dh-color-border: var(--dh-color-gray-500);--dh-color-background: var(--dh-color-
|
|
1
|
+
:root{--dh-color-background-hsl: var(--dh-color-black-hsl);--dh-color-foreground-hsl: var(--dh-color-white-hsl);--dh-color-accent-hsl: var(--dh-color-blue-600-hsl);--dh-color-accent-100-hsl: var(--dh-color-blue-100-hsl);--dh-color-accent-200-hsl: var(--dh-color-blue-200-hsl);--dh-color-accent-300-hsl: var(--dh-color-blue-300-hsl);--dh-color-accent-400-hsl: var(--dh-color-blue-400-hsl);--dh-color-accent-500-hsl: var(--dh-color-blue-500-hsl);--dh-color-accent-600-hsl: var(--dh-color-blue-600-hsl);--dh-color-accent-700-hsl: var(--dh-color-blue-700-hsl);--dh-color-accent-800-hsl: var(--dh-color-blue-800-hsl);--dh-color-accent-900-hsl: var(--dh-color-blue-900-hsl);--dh-color-accent-1000-hsl: var(--dh-color-blue-1000-hsl);--dh-color-accent-1100-hsl: var(--dh-color-blue-1100-hsl);--dh-color-accent-1200-hsl: var(--dh-color-blue-1200-hsl);--dh-color-accent-1300-hsl: var(--dh-color-blue-1300-hsl);--dh-color-accent-1400-hsl: var(--dh-color-blue-1400-hsl);--dh-color-info-hsl: var(--dh-color-cyan-1000-hsl);--dh-color-neutral-hsl: var(--dh-color-gray-500-hsl);--dh-color-notice-hsl: var(--dh-color-yellow-1000-hsl);--dh-color-positive-hsl: var(--dh-color-green-900-hsl);--dh-color-negative-hsl: var(--dh-color-red-600-hsl);--dh-color-contrast-dark-hsl: var(--dh-color-gray-50-hsl);--dh-color-contrast-light-hsl: var(--dh-color-gray-900-hsl);--dh-color-accent-contrast-hsl: var(--dh-color-contrast-light-hsl);--dh-color-info-contrast-hsl: var(--dh-color-contrast-dark-hsl);--dh-color-negative-contrast-hsl: var(--dh-color-contrast-light-hsl);--dh-color-neutral-contrast-hsl: var(--dh-color-contrast-light-hsl);--dh-color-notice-contrast-hsl: var(--dh-color-contrast-dark-hsl);--dh-color-positive-contrast-hsl: var(--dh-color-contrast-light-hsl);--dh-color-visual-blue-hsl: var(--dh-color-blue-600-hsl);--dh-color-visual-celery-hsl: var(--dh-color-celery-1000-hsl);--dh-color-visual-chartreuse-hsl: var(--dh-color-chartreuse-1100-hsl);--dh-color-visual-cyan-hsl: var(--dh-color-cyan-1100-hsl);--dh-color-visual-fuchsia-hsl: var(--dh-color-fuchsia-900-hsl);--dh-color-visual-gray-hsl: var(--dh-color-gray-600-hsl);--dh-color-visual-green-hsl: var(--dh-color-green-1100-hsl);--dh-color-visual-indigo-hsl: var(--dh-color-indigo-900-hsl);--dh-color-visual-magenta-hsl: var(--dh-color-magenta-900-hsl);--dh-color-visual-orange-hsl: var(--dh-color-orange-900-hsl);--dh-color-visual-purple-hsl: var(--dh-color-purple-900-hsl);--dh-color-visual-red-hsl: var(--dh-color-red-800-hsl);--dh-color-visual-seafoam-hsl: var(--dh-color-seafoam-1100-hsl);--dh-color-visual-yellow-hsl: var(--dh-color-yellow-1200-hsl);--dh-color-visual-positive-hsl: var(--dh-color-green-1100-hsl);--dh-color-visual-negative-hsl: var(--dh-color-red-800-hsl);--dh-color-visual-notice-hsl: var(--dh-color-yellow-1200-hsl);--dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);--dh-color-border: var(--dh-color-gray-500);--dh-color-background: hsl(var(--dh-color-background-hsl));--dh-color-foreground: hsl(var(--dh-color-foreground-hsl));--dh-color-content-background: var(--dh-color-gray-100);--dh-color-heading-text: var(--dh-color-gray-900);--dh-color-text: var(--dh-color-gray-800);--dh-color-text-disabled: var(--dh-color-gray-400);--dh-color-text-highlight: hsla(var(--dh-color-blue-700-hsl), 0.3);--dh-color-contrast-dark: hsl(var(--dh-color-contrast-dark-hsl));--dh-color-contrast-light: hsl(var(--dh-color-contrast-light-hsl));--dh-color-accent-100: hsl(var(--dh-color-accent-100-hsl));--dh-color-accent-200: hsl(var(--dh-color-accent-200-hsl));--dh-color-accent-300: hsl(var(--dh-color-accent-300-hsl));--dh-color-accent-400: hsl(var(--dh-color-accent-400-hsl));--dh-color-accent-500: hsl(var(--dh-color-accent-500-hsl));--dh-color-accent-600: hsl(var(--dh-color-accent-600-hsl));--dh-color-accent-700: hsl(var(--dh-color-accent-700-hsl));--dh-color-accent-800: hsl(var(--dh-color-accent-800-hsl));--dh-color-accent-900: hsl(var(--dh-color-accent-900-hsl));--dh-color-accent-1000: hsl(var(--dh-color-accent-1000-hsl));--dh-color-accent-1100: hsl(var(--dh-color-accent-1100-hsl));--dh-color-accent-1200: hsl(var(--dh-color-accent-1200-hsl));--dh-color-accent-1300: hsl(var(--dh-color-accent-1300-hsl));--dh-color-accent-1400: hsl(var(--dh-color-accent-1400-hsl));--dh-color-accent-default-bg: hsl(var(--dh-color-accent-hsl));--dh-color-accent-hover-bg: var(--dh-color-accent-500);--dh-color-accent-down-bg: var(--dh-color-accent-400);--dh-color-accent-key-focus-bg: var(--dh-color-accent-500);--dh-color-accent-contrast: var(--dh-color-accent-contrast-hsl);--dh-color-default-gray-bg: var(--dh-color-gray-700);--dh-color-default-blue-bg: var(--dh-color-blue-700);--dh-color-default-red-bg: var(--dh-color-red-700);--dh-color-default-orange-bg: var(--dh-color-orange-800);--dh-color-default-yellow-bg: var(--dh-color-yellow-1000);--dh-color-default-chartreuse-bg: var(--dh-color-chartreuse-900);--dh-color-default-celery-bg: var(--dh-color-celery-800);--dh-color-default-green-bg: var(--dh-color-green-700);--dh-color-default-seafoam-bg: var(--dh-color-seafoam-700);--dh-color-default-cyan-bg: var(--dh-color-cyan-700);--dh-color-default-indigo-bg: var(--dh-color-indigo-700);--dh-color-default-purple-bg: var(--dh-color-purple-700);--dh-color-default-fuchsia-bg: var(--dh-color-fuchsia-700);--dh-color-default-magenta-bg: var(--dh-color-magenta-700);--dh-color-focus: var(--dh-color-blue-800);--dh-color-focus-border: var(--dh-color-blue-800);--dh-color-focus-ring: var(--dh-color-focus);--dh-color-highlight-active: hsla(var(--dh-color-visual-gray-hsl), 0.15);--dh-color-highlight-hover: hsla(var(--dh-color-visual-gray-hsl), 0.08);--dh-color-highlight-invalid: hsla(var(--dh-color-visual-red-hsl), 0.15);--dh-color-highlight-selected: hsla(var(--dh-color-visual-blue-hsl), 0.13);--dh-color-highlight-selected-hover: hsla( var(--dh-color-visual-blue-hsl), 0.2 );--dh-color-dropshadow: hsla(var(--dh-color-visual-gray-hsl), 0.8);--dh-color-overlay-modal-bg: hsla(var(--dh-color-visual-gray-hsl), 0.6);--dh-color-overlay-hover-bg: hsla(var(--dh-color-visual-gray-hsl), 0.08);--dh-color-negative-default-bg: hsl(var(--dh-color-negative-hsl));--dh-color-negative-hover-bg: var(--dh-color-red-500);--dh-color-negative-down-bg: var(--dh-color-red-400);--dh-color-negative-key-focus-bg: var(--dh-color-red-500);--dh-color-negative-contrast: hsl(var(--dh-color-negative-contrast-hsl));--dh-color-neutral-default-bg: hsl(var(--dh-color-neutral-hsl));--dh-color-neutral-hover-bg: var(--dh-color-gray-400);--dh-color-neutral-down-bg: var(--dh-color-gray-300);--dh-color-neutral-key-focus-bg: var(--dh-color-gray-400);--dh-color-neutral-contrast: hsl(var(--dh-color-neutral-contrast-hsl));--dh-color-neutral-subdued-default-bg: var(--dh-color-gray-400);--dh-color-neutral-subdued-hover-bg: var(--dh-color-gray-300);--dh-color-neutral-subdued-down-bg: var(--dh-color-gray-200);--dh-color-neutral-subdued-key-focus-bg: var(--dh-color-gray-300);--dh-color-positive-default-bg: hsl(var(--dh-color-positive-hsl));--dh-color-positive-hover-bg: var(--dh-color-green-800);--dh-color-positive-down-bg: var(--dh-color-green-700);--dh-color-positive-key-focus-bg: var(--dh-color-green-800);--dh-color-positive-contrast: hsl(var(--dh-color-positive-contrast-hsl));--dh-color-info-default-bg: hsl(var(--dh-color-info-hsl));--dh-color-info-hover-bg: var(--dh-color-cyan-900);--dh-color-info-down-bg: var(--dh-color-cyan-800);--dh-color-info-key-focus-bg: var(--dh-color-cyan-900);--dh-color-info-contrast: hsl(var(--dh-color-info-contrast-hsl));--dh-color-notice-default-bg: hsl(var(--dh-color-notice-hsl));--dh-color-notice-hover-bg: var(--dh-color-yellow-900);--dh-color-notice-down-bg: var(--dh-color-yellow-800);--dh-color-notice-key-focus-bg: var(--dh-color-yellow-1000);--dh-color-notice-contrast: hsl(var(--dh-color-notice-contrast-hsl));--dh-color-visual-blue: hsl(var(--dh-color-visual-blue-hsl));--dh-color-visual-celery: hsl(var(--dh-color-visual-celery-hsl));--dh-color-visual-chartreuse: hsl(var(--dh-color-visual-chartreuse-hsl));--dh-color-visual-cyan: hsl(var(--dh-color-visual-cyan-hsl));--dh-color-visual-fuchsia: hsl(var(--dh-color-visual-fuchsia-hsl));--dh-color-visual-gray: hsl(var(--dh-color-visual-gray-hsl));--dh-color-visual-green: hsl(var(--dh-color-visual-green-hsl));--dh-color-visual-indigo: hsl(var(--dh-color-visual-indigo-hsl));--dh-color-visual-magenta: hsl(var(--dh-color-visual-magenta-hsl));--dh-color-visual-orange: hsl(var(--dh-color-visual-orange-hsl));--dh-color-visual-purple: hsl(var(--dh-color-visual-purple-hsl));--dh-color-visual-red: hsl(var(--dh-color-visual-red-hsl));--dh-color-visual-seafoam: hsl(var(--dh-color-visual-seafoam-hsl));--dh-color-visual-yellow: hsl(var(--dh-color-visual-yellow-hsl));--dh-color-visual-positive: hsl(var(--dh-color-visual-positive-hsl));--dh-color-visual-negative: hsl(var(--dh-color-visual-negative-hsl));--dh-color-visual-notice: hsl(var(--dh-color-visual-notice-hsl));--dh-color-visual-info: hsl(var(--dh-color-visual-info-hsl));--dh-color-well-bg: hsla(var(--dh-color-visual-gray-hsl), 0.02);--dh-color-well-border: hsla(var(--dh-color-visual-gray-hsl), 0.05)}/*# sourceMappingURL=theme-dark-semantic.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-dark/theme-dark-semantic.css"],"names":[],"mappings":"AAEA,MAEE,4CACA,4CACA,6CACA,6CACA,wDAGA,kDACA,0CACA,mDACA,yEAGA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,gDACA,kDACA,kDACA,kDACA,kDACA,kDAGA,iEACA,+DACA,8DACA,mEAGA,qDACA,qDACA,mDACA,yDACA,0DACA,iEACA,yDACA,uDACA,2DACA,qDACA,yDACA,yDACA,2DACA,2DAGA,2CACA,kDACA,6CAGA,2EACA,2EACA,4EACA,8EACA,qFAQA,iEACA,yEACA,4EAGA,wDACA,sDACA,qDACA,0DAGA,kDACA,gDACA,+CACA,oDAEA,0DACA,wDACA,uDACA,4DAGA,0DACA,wDACA,uDACA,4DAGA,sDACA,mDACA,kDACA,uDAGA,0DACA,uDACA,sDACA,4DAGA,iDACA,sDACA,8DACA,kDACA,uDACA,iDACA,oDACA,qDACA,uDACA,qDACA,qDACA,+CACA,wDACA,sDAEA,uDACA,oDACA,sDACA,kDAGA,+DACA","file":"theme-dark-semantic.css","sourcesContent":["/* stylelint-disable custom-property-empty-line-before */\n/* stylelint-disable alpha-value-notation */\n:root {\n /* General */\n --dh-color-accent: var(--dh-color-blue-700);\n --dh-color-border: var(--dh-color-gray-500);\n --dh-color-background: var(--dh-color-black);\n --dh-color-foreground: var(--dh-color-white);\n --dh-color-content-background: var(--dh-color-gray-100);\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-hue), 83%, 62%, 0.3);\n\n /** Accent Colors */\n --dh-color-accent-100: var(--dh-color-blue-100);\n --dh-color-accent-200: var(--dh-color-blue-200);\n --dh-color-accent-300: var(--dh-color-blue-300);\n --dh-color-accent-400: var(--dh-color-blue-400);\n --dh-color-accent-500: var(--dh-color-blue-500);\n --dh-color-accent-600: var(--dh-color-blue-600);\n --dh-color-accent-700: var(--dh-color-blue-700);\n --dh-color-accent-800: var(--dh-color-blue-800);\n --dh-color-accent-900: var(--dh-color-blue-900);\n --dh-color-accent-1000: var(--dh-color-blue-1000);\n --dh-color-accent-1100: var(--dh-color-blue-1100);\n --dh-color-accent-1200: var(--dh-color-blue-1200);\n --dh-color-accent-1300: var(--dh-color-blue-1300);\n --dh-color-accent-1400: var(--dh-color-blue-1400);\n\n /* Accent Background */\n --dh-color-accent-background-default: var(--dh-color-accent-600);\n --dh-color-accent-background-hover: var(--dh-color-accent-500);\n --dh-color-accent-background-down: var(--dh-color-accent-400);\n --dh-color-accent-background-key-focus: var(--dh-color-accent-500);\n\n /* Background Defaults */\n --dh-color-default-gray-bg: var(--dh-color-gray-700);\n --dh-color-default-blue-bg: var(--dh-color-blue-700);\n --dh-color-default-red-bg: var(--dh-color-red-700);\n --dh-color-default-orange-bg: var(--dh-color-orange-800);\n --dh-color-default-yellow-bg: var(--dh-color-yellow-1000);\n --dh-color-default-chartreuse-bg: var(--dh-color-chartreuse-900);\n --dh-color-default-celery-bg: var(--dh-color-celery-800);\n --dh-color-default-green-bg: var(--dh-color-green-700);\n --dh-color-default-seafoam-bg: var(--dh-color-seafoam-700);\n --dh-color-default-cyan-bg: var(--dh-color-cyan-700);\n --dh-color-default-indigo-bg: var(--dh-color-indigo-700);\n --dh-color-default-purple-bg: var(--dh-color-purple-700);\n --dh-color-default-fuchsia-bg: var(--dh-color-fuchsia-700);\n --dh-color-default-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-gray-hue), 0%, 94%, 0.15);\n --dh-color-highlight-hover: hsla(var(--dh-color-gray-hue), 0%, 100%, 0.08);\n --dh-color-highlight-invalid: hsla(var(--dh-color-red-hue), 80%, 48%, 0.15);\n --dh-color-highlight-selected: hsla(var(--dh-color-blue-hue), 83%, 62%, 0.13);\n --dh-color-highlight-selected-hover: hsla(\n var(--dh-color-blue-hue),\n 83%,\n 62%,\n 0.2\n );\n\n /* Shadows / Overlays */\n --dh-color-dropshadow: hsla(var(--dh-color-gray-hue), 0, 0, 0.8);\n --dh-color-overlay-modal-bg: hsla(var(--dh-color-gray-hue), 0%, 0%, 0.6);\n --dh-color-overlay-hover-bg: hsla(var(--dh-color-gray-hue), 0%, 100%, 0.08);\n\n /* Negative Background */\n --dh-color-negative-default-bg: var(--dh-color-red-600);\n --dh-color-negative-hover-bg: var(--dh-color-red-500);\n --dh-color-negative-down-bg: var(--dh-color-red-400);\n --dh-color-negative-key-focus-bg: var(--dh-color-red-500);\n\n /* Neutral */\n --dh-neutral-default-bg: var(--dh-color-gray-500);\n --dh-neutral-hover-bg: var(--dh-color-gray-400);\n --dh-neutral-down-bg: var(--dh-color-gray-300);\n --dh-neutral-key-focus-bg: var(--dh-color-gray-400);\n\n --dh-neutral-subdued-default-bg: var(--dh-color-gray-400);\n --dh-neutral-subdued-hover-bg: var(--dh-color-gray-300);\n --dh-neutral-subdued-down-bg: var(--dh-color-gray-200);\n --dh-neutral-subdued-key-focus-bg: var(--dh-color-gray-300);\n\n /* Positive */\n --dh-color-positive-default-bg: var(--dh-color-green-900);\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\n /* Informative */\n --dh-color-info-default-bg: var(--dh-color-cyan-1000);\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\n /* Notice */\n --dh-color-notice-default-bg: var(--dh-color-yellow-1000);\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\n /* Visual Colors */\n --dh-color-visual-blue: var(--dh-color-blue-700);\n --dh-color-visual-celery: var(--dh-color-celery-1000);\n --dh-color-visual-chartreuse: var(--dh-color-chartreuse-1100);\n --dh-color-visual-cyan: var(--dh-color-cyan-1100);\n --dh-color-visual-fuchsia: var(--dh-color-fuchsia-900);\n --dh-color-visual-gray: var(--dh-color-gray-600);\n --dh-color-visual-green: var(--dh-color-green-1100);\n --dh-color-visual-indigo: var(--dh-color-indigo-900);\n --dh-color-visual-magenta: var(--dh-color-magenta-900);\n --dh-color-visual-orange: var(--dh-color-orange-900);\n --dh-color-visual-purple: var(--dh-color-purple-900);\n --dh-color-visual-red: var(--dh-color-red-800);\n --dh-color-visual-seafoam: var(--dh-color-seafoam-1100);\n --dh-color-visual-yellow: var(--dh-color-yellow-1200);\n\n --dh-color-visual-positive: var(--dh-color-green-1100);\n --dh-color-visual-negative: var(--dh-color-red-800);\n --dh-color-visual-notice: var(--dh-color-yellow-1200);\n --dh-color-visual-info: var(--dh-color-cyan-1100);\n\n /* Wells */\n --dh-color-well-bg: hsla(var(--dh-color-gray-hue) 0% 92% 0.02);\n --dh-color-well-border: hsla(var(--dh-color-gray-hue) 0% 94% 0.05);\n}\n"]}
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-dark/theme-dark-semantic.css"],"names":[],"mappings":"AAEA,MAEE,qDACA,qDAEA,oDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,0DACA,0DACA,0DACA,0DACA,0DAEA,mDACA,qDACA,uDACA,uDACA,qDAWA,0DACA,4DAEA,mEACA,gEACA,qEACA,oEACA,kEACA,qEAGA,yDACA,8DACA,sEACA,0DACA,+DACA,yDACA,4DACA,6DACA,+DACA,6DACA,6DACA,uDACA,gEACA,8DAEA,+DACA,4DACA,8DACA,0DAGA,4CACA,2DACA,2DACA,wDAGA,kDACA,0CACA,mDACA,mEAGA,iEACA,mEAGA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,2DACA,6DACA,6DACA,6DACA,6DACA,6DAGA,8DACA,uDACA,sDACA,2DACA,gEAGA,qDACA,qDACA,mDACA,yDACA,0DACA,iEACA,yDACA,uDACA,2DACA,qDACA,yDACA,yDACA,2DACA,2DAGA,2CACA,kDACA,6CAGA,yEACA,wEACA,yEACA,2EACA,kFAMA,kEACA,wEACA,yEAGA,kEACA,sDACA,qDACA,0DACA,yEAGA,gEACA,sDACA,qDACA,0DACA,uEAEA,gEACA,8DACA,6DACA,kEAGA,kEACA,wDACA,uDACA,4DACA,yEAGA,0DACA,mDACA,kDACA,uDACA,iEAGA,8DACA,uDACA,sDACA,4DACA,qEAGA,6DACA,iEACA,yEACA,6DACA,mEACA,6DACA,+DACA,iEACA,mEACA,iEACA,iEACA,2DACA,mEACA,iEAEA,qEACA,qEACA,iEACA,6DAGA,gEACA","file":"theme-dark-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-background-hsl: var(--dh-color-black-hsl);\n --dh-color-foreground-hsl: var(--dh-color-white-hsl);\n\n --dh-color-accent-hsl: var(--dh-color-blue-600-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-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-600-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-light-hsl);\n --dh-color-info-contrast-hsl: var(--dh-color-contrast-dark-hsl);\n --dh-color-negative-contrast-hsl: var(--dh-color-contrast-light-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-light-hsl);\n\n /* Visual HSL */\n --dh-color-visual-blue-hsl: var(--dh-color-blue-600-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-1100-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-900-hsl);\n --dh-color-visual-purple-hsl: var(--dh-color-purple-900-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-1200-hsl);\n\n --dh-color-visual-positive-hsl: var(--dh-color-green-1100-hsl);\n --dh-color-visual-negative-hsl: var(--dh-color-red-800-hsl);\n --dh-color-visual-notice-hsl: var(--dh-color-yellow-1200-hsl);\n --dh-color-visual-info-hsl: var(--dh-color-cyan-1100-hsl);\n\n /* General */\n --dh-color-border: var(--dh-color-gray-500);\n --dh-color-background: hsl(var(--dh-color-background-hsl));\n --dh-color-foreground: hsl(var(--dh-color-foreground-hsl));\n --dh-color-content-background: var(--dh-color-gray-100);\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.3);\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 Background */\n --dh-color-accent-default-bg: hsl(var(--dh-color-accent-hsl));\n --dh-color-accent-hover-bg: var(--dh-color-accent-500);\n --dh-color-accent-down-bg: var(--dh-color-accent-400);\n --dh-color-accent-key-focus-bg: var(--dh-color-accent-500);\n --dh-color-accent-contrast: var(--dh-color-accent-contrast-hsl);\n\n /* Background Defaults */\n --dh-color-default-gray-bg: var(--dh-color-gray-700);\n --dh-color-default-blue-bg: var(--dh-color-blue-700);\n --dh-color-default-red-bg: var(--dh-color-red-700);\n --dh-color-default-orange-bg: var(--dh-color-orange-800);\n --dh-color-default-yellow-bg: var(--dh-color-yellow-1000);\n --dh-color-default-chartreuse-bg: var(--dh-color-chartreuse-900);\n --dh-color-default-celery-bg: var(--dh-color-celery-800);\n --dh-color-default-green-bg: var(--dh-color-green-700);\n --dh-color-default-seafoam-bg: var(--dh-color-seafoam-700);\n --dh-color-default-cyan-bg: var(--dh-color-cyan-700);\n --dh-color-default-indigo-bg: var(--dh-color-indigo-700);\n --dh-color-default-purple-bg: var(--dh-color-purple-700);\n --dh-color-default-fuchsia-bg: var(--dh-color-fuchsia-700);\n --dh-color-default-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.13);\n --dh-color-highlight-selected-hover: hsla(\n var(--dh-color-visual-blue-hsl),\n 0.2\n );\n\n /* Shadows / Overlays */\n --dh-color-dropshadow: hsla(var(--dh-color-visual-gray-hsl), 0.8);\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 Background */\n --dh-color-negative-default-bg: hsl(var(--dh-color-negative-hsl));\n --dh-color-negative-hover-bg: var(--dh-color-red-500);\n --dh-color-negative-down-bg: var(--dh-color-red-400);\n --dh-color-negative-key-focus-bg: var(--dh-color-red-500);\n --dh-color-negative-contrast: hsl(var(--dh-color-negative-contrast-hsl));\n\n /* Neutral */\n --dh-color-neutral-default-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-default-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-default-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-default-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-default-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 /* Wells */\n --dh-color-well-bg: hsla(var(--dh-color-visual-gray-hsl), 0.02);\n --dh-color-well-border: hsla(var(--dh-color-visual-gray-hsl), 0.05);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--dh-color-gray-900: #000;--dh-color-gray-800: #222;--dh-color-gray-700: #464646;--dh-color-gray-600: #6d6d6d;--dh-color-gray-500: #909090;--dh-color-gray-400: #b1b1b1;--dh-color-gray-300: #d5d5d5;--dh-color-gray-200: #e6e6e6;--dh-color-gray-100: #f8f8f8;--dh-color-gray-75: #fdfdfd;--dh-color-gray-50: #fff;--dh-color-blue-100: #112451;--dh-color-blue-200: #16306c;--dh-color-blue-300: #1d3d88;--dh-color-blue-400: #254ba4;--dh-color-blue-500: #2f5bc0;--dh-color-blue-600: #3b6bda;--dh-color-blue-700: #4c7dee;--dh-color-blue-800: #6390fa;--dh-color-blue-900: #7ca4ff;--dh-color-blue-1000: #97b7ff;--dh-color-blue-1100: #afc9ff;--dh-color-blue-1200: #c7d9ff;--dh-color-blue-1300: #dbe6ff;--dh-color-blue-1400: #ecf1ff;--dh-color-seafoam-100: #1f2925;--dh-color-seafoam-200: #263630;--dh-color-seafoam-300: #2f463e;--dh-color-seafoam-400: #37574b;--dh-color-seafoam-500: #3e6959;--dh-color-seafoam-600: #447b68;--dh-color-seafoam-700: #488f78;--dh-color-seafoam-800: #4ca387;--dh-color-seafoam-900: #4fb797;--dh-color-seafoam-1000: #54cba6;--dh-color-seafoam-1100: #5edeb7;--dh-color-seafoam-1200: #78edc7;--dh-color-seafoam-1300: #9ef8d7;--dh-color-seafoam-1400: #cbfce8;--dh-color-black: var(--dh-color-gray-50);--dh-color-white: var(--dh-color-gray-75);--dh-color-
|
|
1
|
+
:root{--dh-color-gray-900: #000;--dh-color-gray-800: #222;--dh-color-gray-700: #464646;--dh-color-gray-600: #6d6d6d;--dh-color-gray-500: #909090;--dh-color-gray-400: #b1b1b1;--dh-color-gray-300: #d5d5d5;--dh-color-gray-200: #e6e6e6;--dh-color-gray-100: #f8f8f8;--dh-color-gray-75: #fdfdfd;--dh-color-gray-50: #fff;--dh-color-blue-100: #112451;--dh-color-blue-200: #16306c;--dh-color-blue-300: #1d3d88;--dh-color-blue-400: #254ba4;--dh-color-blue-500: #2f5bc0;--dh-color-blue-600: #3b6bda;--dh-color-blue-700: #4c7dee;--dh-color-blue-800: #6390fa;--dh-color-blue-900: #7ca4ff;--dh-color-blue-1000: #97b7ff;--dh-color-blue-1100: #afc9ff;--dh-color-blue-1200: #c7d9ff;--dh-color-blue-1300: #dbe6ff;--dh-color-blue-1400: #ecf1ff;--dh-color-seafoam-100: #1f2925;--dh-color-seafoam-200: #263630;--dh-color-seafoam-300: #2f463e;--dh-color-seafoam-400: #37574b;--dh-color-seafoam-500: #3e6959;--dh-color-seafoam-600: #447b68;--dh-color-seafoam-700: #488f78;--dh-color-seafoam-800: #4ca387;--dh-color-seafoam-900: #4fb797;--dh-color-seafoam-1000: #54cba6;--dh-color-seafoam-1100: #5edeb7;--dh-color-seafoam-1200: #78edc7;--dh-color-seafoam-1300: #9ef8d7;--dh-color-seafoam-1400: #cbfce8;--dh-color-black: var(--dh-color-gray-50);--dh-color-white: var(--dh-color-gray-75);--dh-color-background: var(--dh-color-white);--dh-color-foreground: var(--dh-color-black);--dh-color-grid-bg: var(--dh-color-background)}/*# sourceMappingURL=theme-light-palette.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-light/theme-light-palette.css"],"names":[],"mappings":"AAAA,MAEE,0BACA,0BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,yBAGA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,8BACA,8BACA,8BACA,8BACA,8BAGA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,iCACA,iCACA,iCACA,iCACA,iCAGA,0CACA,0CACA,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-light/theme-light-palette.css"],"names":[],"mappings":"AAAA,MAEE,0BACA,0BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,yBAGA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,8BACA,8BACA,8BACA,8BACA,8BAGA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,iCACA,iCACA,iCACA,iCACA,iCAGA,0CACA,0CACA,6CACA,6CACA","file":"theme-light-palette.css","sourcesContent":[":root {\n /* Grays */\n --dh-color-gray-900: #000;\n --dh-color-gray-800: #222;\n --dh-color-gray-700: #464646;\n --dh-color-gray-600: #6d6d6d;\n --dh-color-gray-500: #909090;\n --dh-color-gray-400: #b1b1b1;\n --dh-color-gray-300: #d5d5d5;\n --dh-color-gray-200: #e6e6e6;\n --dh-color-gray-100: #f8f8f8;\n --dh-color-gray-75: #fdfdfd;\n --dh-color-gray-50: #fff;\n\n /* Blues */\n --dh-color-blue-100: #112451;\n --dh-color-blue-200: #16306c;\n --dh-color-blue-300: #1d3d88;\n --dh-color-blue-400: #254ba4;\n --dh-color-blue-500: #2f5bc0;\n --dh-color-blue-600: #3b6bda;\n --dh-color-blue-700: #4c7dee;\n --dh-color-blue-800: #6390fa;\n --dh-color-blue-900: #7ca4ff;\n --dh-color-blue-1000: #97b7ff;\n --dh-color-blue-1100: #afc9ff;\n --dh-color-blue-1200: #c7d9ff;\n --dh-color-blue-1300: #dbe6ff;\n --dh-color-blue-1400: #ecf1ff;\n\n /* Seafoam */\n --dh-color-seafoam-100: #1f2925;\n --dh-color-seafoam-200: #263630;\n --dh-color-seafoam-300: #2f463e;\n --dh-color-seafoam-400: #37574b;\n --dh-color-seafoam-500: #3e6959;\n --dh-color-seafoam-600: #447b68;\n --dh-color-seafoam-700: #488f78;\n --dh-color-seafoam-800: #4ca387;\n --dh-color-seafoam-900: #4fb797;\n --dh-color-seafoam-1000: #54cba6;\n --dh-color-seafoam-1100: #5edeb7;\n --dh-color-seafoam-1200: #78edc7;\n --dh-color-seafoam-1300: #9ef8d7;\n --dh-color-seafoam-1400: #cbfce8;\n\n /* Semantic */\n --dh-color-black: var(--dh-color-gray-50);\n --dh-color-white: var(--dh-color-gray-75);\n --dh-color-background: var(--dh-color-white);\n --dh-color-foreground: var(--dh-color-black);\n --dh-color-grid-bg: var(--dh-color-background);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-spectrum/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/theme-spectrum/index.ts"],"names":[],"mappings":"AAIA,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,0BAA0B;;CAGtC,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
|
|
@@ -4,8 +4,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
|
|
|
4
4
|
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
5
5
|
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
6
6
|
import palette from "./theme-spectrum-palette.module.css";
|
|
7
|
-
import alias from "./theme-spectrum-alias.module.css";
|
|
8
|
-
import
|
|
7
|
+
import alias from "./theme-spectrum-alias.module.css"; // don't import as module, so that classes can be used directly
|
|
8
|
+
import "./theme-spectrum-overrides.css";
|
|
9
9
|
/**
|
|
10
10
|
* Spectrum theme variables are exported as a map of css class names. The keys
|
|
11
11
|
* come from css classes in the imported css modules. The values are generated
|
|
@@ -17,6 +17,6 @@ import overrides from "./theme-spectrum-overrides.module.css";
|
|
|
17
17
|
* 'dh-spectrum-alias': '_dh-spectrum-alias_18mbe_1',
|
|
18
18
|
* }
|
|
19
19
|
*/
|
|
20
|
-
export var themeSpectrumClassesCommon = _objectSpread(_objectSpread(
|
|
20
|
+
export var themeSpectrumClassesCommon = _objectSpread(_objectSpread({}, palette), alias);
|
|
21
21
|
export default themeSpectrumClassesCommon;
|
|
22
22
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["palette","alias","
|
|
1
|
+
{"version":3,"file":"index.js","names":["palette","alias","themeSpectrumClassesCommon","_objectSpread"],"sources":["../../../src/theme/theme-spectrum/index.ts"],"sourcesContent":["import palette from './theme-spectrum-palette.module.css';\nimport alias from './theme-spectrum-alias.module.css';\n\n// don't import as module, so that classes can be used directly\nimport './theme-spectrum-overrides.css';\n\n/**\n * Spectrum theme variables are exported as a map of css class names. The keys\n * come from css classes in the imported css modules. The values are generated\n * by Vite.\n *\n * e.g.\n * {\n * 'dh-spectrum-palette': '_dh-spectrum-palette_abr16_1',\n * 'dh-spectrum-alias': '_dh-spectrum-alias_18mbe_1',\n * }\n */\nexport const themeSpectrumClassesCommon = {\n ...palette,\n ...alias,\n};\n\nexport default themeSpectrumClassesCommon;\n"],"mappings":";;;;;OAAOA,OAAO;AAAA,OACPC,KAAK,2CAEZ;AAAA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,0BAA0B,GAAAC,aAAA,CAAAA,aAAA,KAClCH,OAAO,GACPC,KAAK,CACT;AAED,eAAeC,0BAA0B"}
|
|
@@ -1 +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(
|
|
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-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 */
|
|
@@ -1 +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,
|
|
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,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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[class^=spectrum]{font-family:var(--font-family-sans-serif) !important}.svg-inline--fa[class*=spectrum-Icon--sizeS]{--spectrum-alias-workflow-icon-size: var(--dh-svg-inline-icon-size)}/*# sourceMappingURL=theme-spectrum-overrides.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-overrides.css"],"names":[],"mappings":"AAAA,kBAGE,qDAGF,6CAKE","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.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"]}
|
|
@@ -0,0 +1 @@
|
|
|
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 */
|
|
@@ -0,0 +1 @@
|
|
|
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deephaven/components",
|
|
3
|
-
"version": "0.55.1-beta.
|
|
3
|
+
"version": "0.55.1-beta.11+5e2be64b",
|
|
4
4
|
"description": "Deephaven React component library",
|
|
5
5
|
"author": "Deephaven Data Labs LLC",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@adobe/react-spectrum": "^3.29.0",
|
|
28
|
-
"@deephaven/icons": "^0.55.1-beta.
|
|
29
|
-
"@deephaven/log": "^0.55.1-beta.
|
|
30
|
-
"@deephaven/react-hooks": "^0.55.1-beta.
|
|
31
|
-
"@deephaven/utils": "^0.55.1-beta.
|
|
28
|
+
"@deephaven/icons": "^0.55.1-beta.11+5e2be64b",
|
|
29
|
+
"@deephaven/log": "^0.55.1-beta.11+5e2be64b",
|
|
30
|
+
"@deephaven/react-hooks": "^0.55.1-beta.11+5e2be64b",
|
|
31
|
+
"@deephaven/utils": "^0.55.1-beta.11+5e2be64b",
|
|
32
32
|
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
|
33
33
|
"@fortawesome/react-fontawesome": "^0.2.0",
|
|
34
34
|
"@react-spectrum/theme-default": "^3.5.1",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"react-dom": "^17.x"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
|
-
"@deephaven/mocks": "^0.55.1-beta.
|
|
55
|
+
"@deephaven/mocks": "^0.55.1-beta.11+5e2be64b"
|
|
56
56
|
},
|
|
57
57
|
"files": [
|
|
58
58
|
"dist",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "5e2be64bfa93c5aff8aa936d3de476eccde0a6e7"
|
|
69
69
|
}
|
package/scss/BaseStyleSheet.scss
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
// Import our custom variables and bootstrap
|
|
2
2
|
// Can be imported directly by Vite since it resolves bootstrap to node_modules/bootstrap
|
|
3
3
|
@import './custom.scss';
|
|
4
|
+
@import './util.scss';
|
|
4
5
|
@import 'bootstrap/scss/bootstrap';
|
|
5
6
|
|
|
7
|
+
:root {
|
|
8
|
+
--dh-svg-inline-icon-size: 16px;
|
|
9
|
+
--scrollbar-color: 255, 255, 255;
|
|
10
|
+
}
|
|
11
|
+
|
|
6
12
|
//Various non-variable css overides
|
|
7
13
|
//Overide default size from 16px to 14px. We need density.
|
|
8
14
|
html {
|
|
@@ -14,7 +20,7 @@ html {
|
|
|
14
20
|
// and look best at that size. Default icon size back to 16px
|
|
15
21
|
// vertical alignment changed to best match icon set against 14px text
|
|
16
22
|
.svg-inline--fa {
|
|
17
|
-
font-size:
|
|
23
|
+
font-size: var(--dh-svg-inline-icon-size);
|
|
18
24
|
vertical-align: -3px;
|
|
19
25
|
}
|
|
20
26
|
|
|
@@ -392,6 +398,16 @@ form label small {
|
|
|
392
398
|
.form-control.focus {
|
|
393
399
|
border: 1px solid $primary;
|
|
394
400
|
}
|
|
401
|
+
|
|
402
|
+
.form-control.is-invalid,
|
|
403
|
+
.form-control.is-invalid:focus {
|
|
404
|
+
border-color: var(--dh-color-form-control-error);
|
|
405
|
+
background-image: var(--dh-svg-icon-error);
|
|
406
|
+
}
|
|
407
|
+
.form-control.is-invalid:focus {
|
|
408
|
+
box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
|
|
409
|
+
}
|
|
410
|
+
|
|
395
411
|
.form-control.btn:focus {
|
|
396
412
|
box-shadow: $input-btn-focus-box-shadow;
|
|
397
413
|
}
|
|
@@ -450,9 +466,41 @@ form label small {
|
|
|
450
466
|
cursor: not-allowed;
|
|
451
467
|
}
|
|
452
468
|
|
|
469
|
+
.custom-select {
|
|
470
|
+
$caret-size: 10px 6px;
|
|
471
|
+
$error-size: 16px;
|
|
472
|
+
|
|
473
|
+
background-image: var(--dh-svg-icon-select-indicator);
|
|
474
|
+
background-size: $caret-size;
|
|
475
|
+
|
|
476
|
+
&:hover {
|
|
477
|
+
background-image: var(--dh-svg-icon-select-indicator-hover);
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
&.is-invalid,
|
|
481
|
+
&.is-invalid:focus {
|
|
482
|
+
border-color: var(--dh-color-form-control-error);
|
|
483
|
+
background-size: $caret-size, $error-size;
|
|
484
|
+
background-image: var(--dh-svg-icon-select-indicator),
|
|
485
|
+
var(--dh-svg-icon-error);
|
|
486
|
+
}
|
|
487
|
+
&.is-invalid:hover {
|
|
488
|
+
background-image: var(--dh-svg-icon-select-indicator-hover),
|
|
489
|
+
var(--dh-svg-icon-error);
|
|
490
|
+
}
|
|
491
|
+
&.is-invalid:focus {
|
|
492
|
+
box-shadow: 0 0 0 0.2rem var(--dh-color-form-control-error-shadow);
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
|
|
453
496
|
.custom-select:disabled {
|
|
454
497
|
border-color: $black;
|
|
455
498
|
cursor: not-allowed;
|
|
499
|
+
background-image: var(--dh-svg-icon-select-indicator-disabled);
|
|
500
|
+
&.is-invalid {
|
|
501
|
+
background-image: var(--dh-svg-icon-select-indicator-disabled),
|
|
502
|
+
var(--dh-svg-icon-error);
|
|
503
|
+
}
|
|
456
504
|
}
|
|
457
505
|
|
|
458
506
|
input[type='number'] {
|
|
@@ -481,11 +529,8 @@ input[type='number']::-webkit-inner-spin-button {
|
|
|
481
529
|
}
|
|
482
530
|
|
|
483
531
|
.input-group > .input-group-append.cb-dropdown > .btn {
|
|
484
|
-
color: $gray-400;
|
|
485
532
|
border: 1px solid $gray-400;
|
|
486
|
-
|
|
487
|
-
color: $foreground;
|
|
488
|
-
}
|
|
533
|
+
|
|
489
534
|
&:focus {
|
|
490
535
|
border-color: $input-focus-border-color;
|
|
491
536
|
}
|
|
@@ -656,12 +701,6 @@ input[type='number']::-webkit-inner-spin-button {
|
|
|
656
701
|
background: rgba(var(--scrollbar-color), 0.35);
|
|
657
702
|
}
|
|
658
703
|
|
|
659
|
-
/* stylelint-disable no-descending-specificity */
|
|
660
|
-
:root {
|
|
661
|
-
--scrollbar-color: 255, 255, 255;
|
|
662
|
-
}
|
|
663
|
-
/* stylelint-enable no-descending-specificity */
|
|
664
|
-
|
|
665
704
|
// used in inverted color sections, like light modals
|
|
666
705
|
.theme-bg-light {
|
|
667
706
|
--scrollbar-color: 0, 0, 0;
|
|
@@ -740,29 +779,68 @@ input[type='number']::-webkit-inner-spin-button {
|
|
|
740
779
|
//Moz specific hacks
|
|
741
780
|
/* stylelint-disable-next-line function-url-quotes */
|
|
742
781
|
@-moz-document url-prefix() {
|
|
743
|
-
|
|
744
|
-
|
|
782
|
+
$caret-position: right $custom-select-padding-x;
|
|
783
|
+
$error-position: right (1 + $custom-select-padding-x);
|
|
784
|
+
$svg-caret: var(--dh-svg-icon-select-indicator);
|
|
785
|
+
$svg-caret-hover: var(--dh-svg-icon-select-indicator-hover);
|
|
786
|
+
$svg-error: var(--dh-svg-icon-error);
|
|
787
|
+
|
|
788
|
+
//Selection box in mozilla loses default styling on options list if you apply a background color other then #FFF or inherit...
|
|
789
|
+
//Hack: turn the background to inherit, then apply a background gradient that is inputbg color to inputbg color
|
|
745
790
|
//for crossbrowser consistency this gradient is stacked bellow the svg used to get a caret (indicator) looking the same
|
|
746
791
|
.custom-select {
|
|
747
792
|
background-color: inherit !important;
|
|
748
793
|
color: $foreground;
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
background-size:
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
794
|
+
// bg image, size and position for 2 layers
|
|
795
|
+
background-image: $svg-caret, solid-gradient($input-bg);
|
|
796
|
+
background-size:
|
|
797
|
+
10px 6px,
|
|
798
|
+
cover;
|
|
799
|
+
background-position-x: $caret-position, center;
|
|
800
|
+
background-position-y:
|
|
801
|
+
bottom 50%,
|
|
755
802
|
center;
|
|
803
|
+
background-repeat: no-repeat;
|
|
804
|
+
|
|
756
805
|
//make the dotted duplicate focus line on firefox go away
|
|
757
806
|
&:-moz-focusring {
|
|
758
807
|
color: rgba(0, 0, 0, 0%);
|
|
759
808
|
text-shadow: 0 0 0 $foreground !important;
|
|
760
809
|
}
|
|
810
|
+
|
|
811
|
+
&:hover {
|
|
812
|
+
background-image: $svg-caret-hover, solid-gradient($input-bg);
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
&.is-invalid,
|
|
816
|
+
&.is-invalid:focus {
|
|
817
|
+
// bg image, size and position for 3 layers
|
|
818
|
+
background-image: $svg-caret, $svg-error, solid-gradient($input-bg);
|
|
819
|
+
background-size:
|
|
820
|
+
10px 6px,
|
|
821
|
+
16px,
|
|
822
|
+
cover;
|
|
823
|
+
background-position-x: $caret-position, $error-position, center;
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
&.is-invalid:hover {
|
|
827
|
+
background-image: $svg-caret-hover, $svg-error, solid-gradient($input-bg);
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
&:disabled {
|
|
831
|
+
background-image: $svg-caret, solid-gradient($input-disabled-bg);
|
|
832
|
+
|
|
833
|
+
&.is-invalid {
|
|
834
|
+
background-image: $svg-caret, $svg-error,
|
|
835
|
+
solid-gradient($input-disabled-bg);
|
|
836
|
+
}
|
|
837
|
+
}
|
|
761
838
|
}
|
|
762
839
|
|
|
763
840
|
.console-creator .custom-select {
|
|
764
|
-
background-image:
|
|
765
|
-
|
|
841
|
+
background-image: var(--dh-svg-icon-select-indicator),
|
|
842
|
+
solid-gradient($gray-700);
|
|
843
|
+
|
|
766
844
|
&:-moz-focusring {
|
|
767
845
|
color: rgba(0, 0, 0, 0%);
|
|
768
846
|
text-shadow: 0 0 0 $foreground !important;
|
|
@@ -770,8 +848,9 @@ input[type='number']::-webkit-inner-spin-button {
|
|
|
770
848
|
}
|
|
771
849
|
|
|
772
850
|
.modal-dialog.theme-bg-light .custom-select {
|
|
773
|
-
background-image:
|
|
774
|
-
|
|
851
|
+
background-image: var(--dh-svg-icon-select-indicator),
|
|
852
|
+
solid-gradient($gray-200);
|
|
853
|
+
|
|
775
854
|
&:-moz-focusring {
|
|
776
855
|
color: rgba(0, 0, 0, 0%);
|
|
777
856
|
text-shadow: 0 0 0 $background !important;
|
package/scss/util.scss
CHANGED
|
@@ -1,3 +1,24 @@
|
|
|
1
|
+
// Setup a mask-image for an inline svg
|
|
2
|
+
@mixin icon-image-mask($mask-image, $size: 16px) {
|
|
3
|
+
background-size: $size;
|
|
4
|
+
background-color: var(--dh-color-foreground);
|
|
5
|
+
mask-image: $mask-image;
|
|
6
|
+
mask-position: center center;
|
|
7
|
+
mask-repeat: no-repeat;
|
|
8
|
+
mask-size: $size;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Caret icon for pickers, dropdowns, select, etc.
|
|
12
|
+
@mixin caret-icon() {
|
|
13
|
+
$width: 10px;
|
|
14
|
+
$height: 6px;
|
|
15
|
+
@include icon-image-mask(var(--dh-svg-icon-selector-caret), $width $height);
|
|
16
|
+
|
|
17
|
+
background-color: var(--dh-color-selector-fg);
|
|
18
|
+
width: $width;
|
|
19
|
+
height: $height;
|
|
20
|
+
}
|
|
21
|
+
|
|
1
22
|
/// Utilty for increasing specificity by repeating a given selector n number of
|
|
2
23
|
/// times.
|
|
3
24
|
///
|
|
@@ -26,3 +47,9 @@
|
|
|
26
47
|
|
|
27
48
|
@return $result;
|
|
28
49
|
}
|
|
50
|
+
|
|
51
|
+
// Linear gradient with same start and end color. Useful for certain scenarios
|
|
52
|
+
// where we need a solid background image layer.
|
|
53
|
+
@function solid-gradient($color) {
|
|
54
|
+
@return linear-gradient(0deg, $color, $color);
|
|
55
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[class^=spectrum]{font-family:var(--font-family-sans-serif) !important}/*# sourceMappingURL=theme-spectrum-overrides.module.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/theme/theme-spectrum/theme-spectrum-overrides.module.css"],"names":[],"mappings":"AAAA,kBAGE","file":"theme-spectrum-overrides.module.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"]}
|