@deephaven/components 0.55.0 → 0.55.1-alpha-theme-spectrum.17

package/dist/shortcuts/GlobalShortcuts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalShortcuts.d.ts","sourceRoot":"","sources":["../../src/shortcuts/GlobalShortcuts.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;;;;;;CA0CrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"GlobalShortcuts.d.ts","sourceRoot":"","sources":["../../src/shortcuts/GlobalShortcuts.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;;;;;;;;CAwDrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/shortcuts/GlobalShortcuts.js

@@ -41,6 +41,20 @@ var GLOBAL_SHORTCUTS = {
     shortcut: [KEY.ESCAPE],
     macShortcut: [KEY.ESCAPE],
     isEditable: false
+  }),
+  NEXT: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.NEXT',
+    name: 'Next',
+    shortcut: [KEY.ENTER],
+    macShortcut: [KEY.ENTER],
+    isEditable: false
+  }),
+  PREVIOUS: ShortcutRegistry.createAndAdd({
+    id: 'GLOBAL.PREVIOUS',
+    name: 'Previous',
+    shortcut: [MODIFIER.SHIFT, KEY.ENTER],
+    macShortcut: [MODIFIER.SHIFT, KEY.ENTER],
+    isEditable: false
   })
 };
 export default GLOBAL_SHORTCUTS;

package/dist/shortcuts/GlobalShortcuts.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalShortcuts.js","names":["ShortcutRegistry","MODIFIER","KEY","GLOBAL_SHORTCUTS","COPY","createAndAdd","id","name","shortcut","CTRL","C","macShortcut","CMD","isEditable","PASTE","V","SAVE","S","SELECT_ALL","A","LINKER","L","LINKER_CLOSE","ESCAPE"],"sources":["../../src/shortcuts/GlobalShortcuts.ts"],"sourcesContent":["import ShortcutRegistry from './ShortcutRegistry';\nimport { MODIFIER, KEY } from './Shortcut';\n\nconst GLOBAL_SHORTCUTS = {\n  COPY: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.COPY',\n    name: 'Copy',\n    shortcut: [MODIFIER.CTRL, KEY.C],\n    macShortcut: [MODIFIER.CMD, KEY.C],\n    isEditable: false,\n  }),\n  PASTE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PASTE',\n    name: 'Paste',\n    shortcut: [MODIFIER.CTRL, KEY.V],\n    macShortcut: [MODIFIER.CMD, KEY.V],\n    isEditable: false,\n  }),\n  SAVE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SAVE',\n    name: 'Save',\n    shortcut: [MODIFIER.CTRL, KEY.S],\n    macShortcut: [MODIFIER.CMD, KEY.S],\n    isEditable: false,\n  }),\n  SELECT_ALL: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SELECT_ALL',\n    name: 'Select All',\n    shortcut: [MODIFIER.CTRL, KEY.A],\n    macShortcut: [MODIFIER.CMD, KEY.A],\n    isEditable: false,\n  }),\n  LINKER: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER',\n    name: 'Linker',\n    shortcut: [MODIFIER.CTRL, KEY.L],\n    macShortcut: [MODIFIER.CMD, KEY.L],\n  }),\n  LINKER_CLOSE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER_CLOSE',\n    name: 'Close Linker Overlay',\n    shortcut: [KEY.ESCAPE],\n    macShortcut: [KEY.ESCAPE],\n    isEditable: false,\n  }),\n};\n\nexport default GLOBAL_SHORTCUTS;\n"],"mappings":"OAAOA,gBAAgB;AAAA,SACdC,QAAQ,EAAEC,GAAG;AAEtB,IAAMC,gBAAgB,GAAG;EACvBC,IAAI,EAAEJ,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACQ,CAAC,CAAC;IAChCC,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACQ,CAAC,CAAC;IAClCG,UAAU,EAAE;EACd,CAAC,CAAC;EACFC,KAAK,EAAEd,gBAAgB,CAACK,YAAY,CAAC;IACnCC,EAAE,EAAE,cAAc;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACa,CAAC,CAAC;IAChCJ,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACa,CAAC,CAAC;IAClCF,UAAU,EAAE;EACd,CAAC,CAAC;EACFG,IAAI,EAAEhB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACe,CAAC,CAAC;IAChCN,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACe,CAAC,CAAC;IAClCJ,UAAU,EAAE;EACd,CAAC,CAAC;EACFK,UAAU,EAAElB,gBAAgB,CAACK,YAAY,CAAC;IACxCC,EAAE,EAAE,mBAAmB;IACvBC,IAAI,EAAE,YAAY;IAClBC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACiB,CAAC,CAAC;IAChCR,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACiB,CAAC,CAAC;IAClCN,UAAU,EAAE;EACd,CAAC,CAAC;EACFO,MAAM,EAAEpB,gBAAgB,CAACK,YAAY,CAAC;IACpCC,EAAE,EAAE,eAAe;IACnBC,IAAI,EAAE,QAAQ;IACdC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACmB,CAAC,CAAC;IAChCV,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACmB,CAAC;EACnC,CAAC,CAAC;EACFC,YAAY,EAAEtB,gBAAgB,CAACK,YAAY,CAAC;IAC1CC,EAAE,EAAE,qBAAqB;IACzBC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE,CAACN,GAAG,CAACqB,MAAM,CAAC;IACtBZ,WAAW,EAAE,CAACT,GAAG,CAACqB,MAAM,CAAC;IACzBV,UAAU,EAAE;EACd,CAAC;AACH,CAAC;AAED,eAAeV,gBAAgB"}
+{"version":3,"file":"GlobalShortcuts.js","names":["ShortcutRegistry","MODIFIER","KEY","GLOBAL_SHORTCUTS","COPY","createAndAdd","id","name","shortcut","CTRL","C","macShortcut","CMD","isEditable","PASTE","V","SAVE","S","SELECT_ALL","A","LINKER","L","LINKER_CLOSE","ESCAPE","NEXT","ENTER","PREVIOUS","SHIFT"],"sources":["../../src/shortcuts/GlobalShortcuts.ts"],"sourcesContent":["import ShortcutRegistry from './ShortcutRegistry';\nimport { MODIFIER, KEY } from './Shortcut';\n\nconst GLOBAL_SHORTCUTS = {\n  COPY: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.COPY',\n    name: 'Copy',\n    shortcut: [MODIFIER.CTRL, KEY.C],\n    macShortcut: [MODIFIER.CMD, KEY.C],\n    isEditable: false,\n  }),\n  PASTE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PASTE',\n    name: 'Paste',\n    shortcut: [MODIFIER.CTRL, KEY.V],\n    macShortcut: [MODIFIER.CMD, KEY.V],\n    isEditable: false,\n  }),\n  SAVE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SAVE',\n    name: 'Save',\n    shortcut: [MODIFIER.CTRL, KEY.S],\n    macShortcut: [MODIFIER.CMD, KEY.S],\n    isEditable: false,\n  }),\n  SELECT_ALL: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.SELECT_ALL',\n    name: 'Select All',\n    shortcut: [MODIFIER.CTRL, KEY.A],\n    macShortcut: [MODIFIER.CMD, KEY.A],\n    isEditable: false,\n  }),\n  LINKER: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER',\n    name: 'Linker',\n    shortcut: [MODIFIER.CTRL, KEY.L],\n    macShortcut: [MODIFIER.CMD, KEY.L],\n  }),\n  LINKER_CLOSE: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.LINKER_CLOSE',\n    name: 'Close Linker Overlay',\n    shortcut: [KEY.ESCAPE],\n    macShortcut: [KEY.ESCAPE],\n    isEditable: false,\n  }),\n  NEXT: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.NEXT',\n    name: 'Next',\n    shortcut: [KEY.ENTER],\n    macShortcut: [KEY.ENTER],\n    isEditable: false,\n  }),\n  PREVIOUS: ShortcutRegistry.createAndAdd({\n    id: 'GLOBAL.PREVIOUS',\n    name: 'Previous',\n    shortcut: [MODIFIER.SHIFT, KEY.ENTER],\n    macShortcut: [MODIFIER.SHIFT, KEY.ENTER],\n    isEditable: false,\n  }),\n};\n\nexport default GLOBAL_SHORTCUTS;\n"],"mappings":"OAAOA,gBAAgB;AAAA,SACdC,QAAQ,EAAEC,GAAG;AAEtB,IAAMC,gBAAgB,GAAG;EACvBC,IAAI,EAAEJ,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACQ,CAAC,CAAC;IAChCC,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACQ,CAAC,CAAC;IAClCG,UAAU,EAAE;EACd,CAAC,CAAC;EACFC,KAAK,EAAEd,gBAAgB,CAACK,YAAY,CAAC;IACnCC,EAAE,EAAE,cAAc;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACa,CAAC,CAAC;IAChCJ,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACa,CAAC,CAAC;IAClCF,UAAU,EAAE;EACd,CAAC,CAAC;EACFG,IAAI,EAAEhB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACe,CAAC,CAAC;IAChCN,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACe,CAAC,CAAC;IAClCJ,UAAU,EAAE;EACd,CAAC,CAAC;EACFK,UAAU,EAAElB,gBAAgB,CAACK,YAAY,CAAC;IACxCC,EAAE,EAAE,mBAAmB;IACvBC,IAAI,EAAE,YAAY;IAClBC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACiB,CAAC,CAAC;IAChCR,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACiB,CAAC,CAAC;IAClCN,UAAU,EAAE;EACd,CAAC,CAAC;EACFO,MAAM,EAAEpB,gBAAgB,CAACK,YAAY,CAAC;IACpCC,EAAE,EAAE,eAAe;IACnBC,IAAI,EAAE,QAAQ;IACdC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACmB,CAAC,CAAC;IAChCV,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACmB,CAAC;EACnC,CAAC,CAAC;EACFC,YAAY,EAAEtB,gBAAgB,CAACK,YAAY,CAAC;IAC1CC,EAAE,EAAE,qBAAqB;IACzBC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE,CAACN,GAAG,CAACqB,MAAM,CAAC;IACtBZ,WAAW,EAAE,CAACT,GAAG,CAACqB,MAAM,CAAC;IACzBV,UAAU,EAAE;EACd,CAAC,CAAC;EACFW,IAAI,EAAExB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACN,GAAG,CAACuB,KAAK,CAAC;IACrBd,WAAW,EAAE,CAACT,GAAG,CAACuB,KAAK,CAAC;IACxBZ,UAAU,EAAE;EACd,CAAC,CAAC;EACFa,QAAQ,EAAE1B,gBAAgB,CAACK,YAAY,CAAC;IACtCC,EAAE,EAAE,iBAAiB;IACrBC,IAAI,EAAE,UAAU;IAChBC,QAAQ,EAAE,CAACP,QAAQ,CAAC0B,KAAK,EAAEzB,GAAG,CAACuB,KAAK,CAAC;IACrCd,WAAW,EAAE,CAACV,QAAQ,CAAC0B,KAAK,EAAEzB,GAAG,CAACuB,KAAK,CAAC;IACxCZ,UAAU,EAAE;EACd,CAAC;AACH,CAAC;AAED,eAAeV,gBAAgB"}

package/dist/theme/SpectrumThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpectrumThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/SpectrumThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAInD,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAgB,EAChB,KAAsB,EACtB,WAAW,GACZ,EAAE,0BAA0B,GAAG,GAAG,CAAC,OAAO,CAW1C"}
+{"version":3,"file":"SpectrumThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/SpectrumThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAInD,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC;AAED;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,QAAgB,EAChB,KAAsB,EACtB,WAAW,GACZ,EAAE,0BAA0B,GAAG,GAAG,CAAC,OAAO,CAgB1C"}

package/dist/theme/SpectrumThemeProvider.js

@@ -22,6 +22,7 @@ export function SpectrumThemeProvider(_ref) {
   // won't be needed if https://github.com/adobe/react-spectrum/pull/2669 is merged
   var [id] = useState(isPortal ? shortid() : null);
   return /*#__PURE__*/_jsx(Provider, {
+    UNSAFE_className: "spectrum-theme-provider",
     theme: theme,
     colorScheme: colorScheme,
     "data-unique-id": id,

package/dist/theme/SpectrumThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpectrumThemeProvider.js","names":["useState","Provider","shortid","themeDHDefault","jsx","_jsx","SpectrumThemeProvider","_ref","children","isPortal","theme","colorScheme","id"],"sources":["../../src/theme/SpectrumThemeProvider.tsx"],"sourcesContent":["import { ReactNode, useState } from 'react';\nimport { Provider } from '@adobe/react-spectrum';\nimport type { Theme } from '@react-types/provider';\nimport shortid from 'shortid';\nimport { themeDHDefault } from '../SpectrumUtils';\n\nexport interface SpectrumThemeProviderProps {\n  children: ReactNode;\n  isPortal?: boolean;\n  theme?: Theme;\n  colorScheme?: 'light' | 'dark';\n}\n\n/**\n * Wrapper around React Spectrum's theme Provider that provides DH mappings of\n * Spectrum's theme variables to DH's theme variables. Also exposes an optional\n * `isPortal` prop that if provided, adds a unique `data-unique-id` attribute to\n * the Provider. This is needed to force the Provider to render the theme wrapper\n * inside of portals.\n */\nexport function SpectrumThemeProvider({\n  children,\n  isPortal = false,\n  theme = themeDHDefault,\n  colorScheme,\n}: SpectrumThemeProviderProps): JSX.Element {\n  // a unique ID is used per provider to force it to render the theme wrapper element inside portals\n  // based on https://github.com/adobe/react-spectrum/issues/1697#issuecomment-999827266\n  // won't be needed if https://github.com/adobe/react-spectrum/pull/2669 is merged\n  const [id] = useState(isPortal ? shortid() : null);\n\n  return (\n    <Provider theme={theme} colorScheme={colorScheme} data-unique-id={id}>\n      {children}\n    </Provider>\n  );\n}\n"],"mappings":"AAAA,SAAoBA,QAAQ,QAAQ,OAAO;AAC3C,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,OAAOC,OAAO,MAAM,SAAS;AAAC,SACrBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAAC,IAAA,EAKO;EAAA,IALN;IACpCC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,KAAK,GAAGP,cAAc;IACtBQ;EAC0B,CAAC,GAAAJ,IAAA;EAC3B;EACA;EACA;EACA,IAAM,CAACK,EAAE,CAAC,GAAGZ,QAAQ,CAACS,QAAQ,GAAGP,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC;EAElD,oBACEG,IAAA,CAACJ,QAAQ;IAACS,KAAK,EAAEA,KAAM;IAACC,WAAW,EAAEA,WAAY;IAAC,kBAAgBC,EAAG;IAAAJ,QAAA,EAClEA;EAAQ,CACD,CAAC;AAEf"}
+{"version":3,"file":"SpectrumThemeProvider.js","names":["useState","Provider","shortid","themeDHDefault","jsx","_jsx","SpectrumThemeProvider","_ref","children","isPortal","theme","colorScheme","id","UNSAFE_className"],"sources":["../../src/theme/SpectrumThemeProvider.tsx"],"sourcesContent":["import { ReactNode, useState } from 'react';\nimport { Provider } from '@adobe/react-spectrum';\nimport type { Theme } from '@react-types/provider';\nimport shortid from 'shortid';\nimport { themeDHDefault } from '../SpectrumUtils';\n\nexport interface SpectrumThemeProviderProps {\n  children: ReactNode;\n  isPortal?: boolean;\n  theme?: Theme;\n  colorScheme?: 'light' | 'dark';\n}\n\n/**\n * Wrapper around React Spectrum's theme Provider that provides DH mappings of\n * Spectrum's theme variables to DH's theme variables. Also exposes an optional\n * `isPortal` prop that if provided, adds a unique `data-unique-id` attribute to\n * the Provider. This is needed to force the Provider to render the theme wrapper\n * inside of portals.\n */\nexport function SpectrumThemeProvider({\n  children,\n  isPortal = false,\n  theme = themeDHDefault,\n  colorScheme,\n}: SpectrumThemeProviderProps): JSX.Element {\n  // a unique ID is used per provider to force it to render the theme wrapper element inside portals\n  // based on https://github.com/adobe/react-spectrum/issues/1697#issuecomment-999827266\n  // won't be needed if https://github.com/adobe/react-spectrum/pull/2669 is merged\n  const [id] = useState(isPortal ? shortid() : null);\n\n  return (\n    <Provider\n      UNSAFE_className=\"spectrum-theme-provider\"\n      theme={theme}\n      colorScheme={colorScheme}\n      data-unique-id={id}\n    >\n      {children}\n    </Provider>\n  );\n}\n"],"mappings":"AAAA,SAAoBA,QAAQ,QAAQ,OAAO;AAC3C,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,OAAOC,OAAO,MAAM,SAAS;AAAC,SACrBC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAAC,IAAA,EAKO;EAAA,IALN;IACpCC,QAAQ;IACRC,QAAQ,GAAG,KAAK;IAChBC,KAAK,GAAGP,cAAc;IACtBQ;EAC0B,CAAC,GAAAJ,IAAA;EAC3B;EACA;EACA;EACA,IAAM,CAACK,EAAE,CAAC,GAAGZ,QAAQ,CAACS,QAAQ,GAAGP,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC;EAElD,oBACEG,IAAA,CAACJ,QAAQ;IACPY,gBAAgB,EAAC,yBAAyB;IAC1CH,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA,WAAY;IACzB,kBAAgBC,EAAG;IAAAJ,QAAA,EAElBA;EAAQ,CACD,CAAC;AAEf"}

package/dist/theme/ThemeModel.d.ts

@@ -1,16 +1,22 @@
 export type BaseThemeType = 'dark' | 'light';
 export type BaseThemeKey = `default-${BaseThemeType}`;
-export type ThemePreloadStyleContent = `:root{${string}`;
+export type CssVariableStyleContent = `:root{${string}`;
+export type ThemeCssVariableName = `--dh-${string}`;
+export type ThemePreloadColorVariable = '--dh-color-accent-contrast' | '--dh-color-accent-bg' | '--dh-color-accent-hover-bg' | '--dh-color-accent-down-bg' | '--dh-color-accent-key-focus-bg' | '--dh-color-negative-bg' | '--dh-color-loading-spinner-primary' | '--dh-color-loading-spinner-secondary' | '--dh-color-bg' | '--dh-color-fg' | '--dh-color-input-bg' | '--dh-color-input-fg' | '--dh-color-input-disabled-bg' | '--dh-color-input-border' | '--dh-color-input-placeholder' | '--dh-color-input-focus-border' | '--dh-color-login-form-bg' | '--dh-color-login-status-message' | '--dh-color-login-logo-bg' | '--dh-color-login-footer-fg' | '--dh-color-random-area-plot-animation-fg-fill' | '--dh-color-random-area-plot-animation-fg-stroke' | '--dh-color-random-area-plot-animation-bg' | '--dh-color-random-area-plot-animation-grid';
+export type ThemeIconsRequiringManualColorChanges = '--dh-svg-icon-select-indicator' | '--dh-svg-icon-select-indicator-hover' | '--dh-svg-icon-select-indicator-disabled' | '--dh-svg-icon-error';
 export declare const DEFAULT_DARK_THEME_KEY = "default-dark";
 export declare const DEFAULT_LIGHT_THEME_KEY = "default-light";
-export declare const DEFAULT_PRELOAD_DATA_VARIABLES: {
-    '--dh-color-accent': string;
-    '--dh-color-background': string;
-};
+export declare const DEFAULT_PRELOAD_DATA_VARIABLES: Record<ThemePreloadColorVariable, string>;
+/**
+ * Some inline SVGs require manually updating their fill color via
+ * `updateSVGFillColors`. This object maps these variables to their respective
+ * fill color variables.
+ */
+export declare const SVG_ICON_MANUAL_COLOR_MAP: Record<ThemeIconsRequiringManualColorChanges, string>;
 export declare const THEME_CACHE_LOCAL_STORAGE_KEY = "deephaven.themeCache";
 export interface ThemePreloadData {
     themeKey: string;
-    preloadStyleContent?: ThemePreloadStyleContent;
+    preloadStyleContent?: CssVariableStyleContent;
 }
 export interface ThemeData {
     baseThemeKey?: BaseThemeKey;

package/dist/theme/ThemeModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeModel.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,WAAW,aAAa,EAAE,CAAC;AACtD,MAAM,MAAM,wBAAwB,GAAG,SAAS,MAAM,EAAE,CAAC;AAEzD,eAAO,MAAM,sBAAsB,iBAAwC,CAAC;AAC5E,eAAO,MAAM,uBAAuB,kBAAyC,CAAC;AAG9E,eAAO,MAAM,8BAA8B;;;CAGC,CAAC;AAE7C,eAAO,MAAM,6BAA6B,yBAAyB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;CAChD;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB"}
+{"version":3,"file":"ThemeModel.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeModel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,WAAW,aAAa,EAAE,CAAC;AACtD,MAAM,MAAM,uBAAuB,GAAG,SAAS,MAAM,EAAE,CAAC;AACxD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,MAAM,EAAE,CAAC;AAEpD,MAAM,MAAM,yBAAyB,GACjC,4BAA4B,GAC5B,sBAAsB,GACtB,4BAA4B,GAC5B,2BAA2B,GAC3B,gCAAgC,GAChC,wBAAwB,GACxB,oCAAoC,GACpC,sCAAsC,GACtC,eAAe,GACf,eAAe,GACf,qBAAqB,GACrB,qBAAqB,GACrB,8BAA8B,GAC9B,yBAAyB,GACzB,8BAA8B,GAC9B,+BAA+B,GAI/B,0BAA0B,GAC1B,iCAAiC,GACjC,0BAA0B,GAC1B,4BAA4B,GAC5B,+CAA+C,GAC/C,iDAAiD,GACjD,0CAA0C,GAC1C,4CAA4C,CAAC;AAEjD,MAAM,MAAM,qCAAqC,GAC7C,gCAAgC,GAChC,sCAAsC,GACtC,yCAAyC,GACzC,qBAAqB,CAAC;AAE1B,eAAO,MAAM,sBAAsB,iBAAwC,CAAC;AAC5E,eAAO,MAAM,uBAAuB,kBAAyC,CAAC;AA2B9E,eAAO,MAAM,8BAA8B,EAAE,MAAM,CACjD,yBAAyB,EACzB,MAAM,CA+BP,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAC5C,qCAAqC,EACrC,MAAM,CAMP,CAAC;AAEF,eAAO,MAAM,6BAA6B,yBAAyB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;CAC/C;AAED,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB"}

package/dist/theme/ThemeModel.js

@@ -1,12 +1,76 @@
 export var DEFAULT_DARK_THEME_KEY = 'default-dark';
 export var DEFAULT_LIGHT_THEME_KEY = 'default-light';
 
+// Hex versions of some of the default dark theme color palette needed for
+// preload defaults.
+var DEFAULT_DARK_THEME_PALETTE = {
+  blue: {
+    500: '#2f5bc0',
+    400: '#254ba4',
+    600: '#3b6bda' // accent color
+  },
+
+  red: {
+    600: '#c73f61'
+  },
+  gray: {
+    50: '#1a171a',
+    75: '#211f22',
+    300: '#373438',
+    400: '#403e41',
+    500: '#5b5a5c',
+    600: '#929192',
+    700: '#c0bfbf',
+    800: '#f0f0ee',
+    900: '#fcfcfa'
+  }
+};
+
 // Css properties that are used in preload data with default values.
 export var DEFAULT_PRELOAD_DATA_VARIABLES = {
-  '--dh-color-accent': '#4c7dee',
-  // dark theme --dh-color-blue-700
-  '--dh-color-background': '#1a171a' // dark theme --dh-color-gray-50
+  '--dh-color-accent-contrast': DEFAULT_DARK_THEME_PALETTE.gray[900],
+  '--dh-color-accent-bg': DEFAULT_DARK_THEME_PALETTE.blue[600],
+  '--dh-color-accent-hover-bg': DEFAULT_DARK_THEME_PALETTE.blue[500],
+  '--dh-color-accent-down-bg': DEFAULT_DARK_THEME_PALETTE.blue[400],
+  '--dh-color-accent-key-focus-bg': DEFAULT_DARK_THEME_PALETTE.blue[500],
+  '--dh-color-negative-bg': DEFAULT_DARK_THEME_PALETTE.red[600],
+  '--dh-color-loading-spinner-primary': DEFAULT_DARK_THEME_PALETTE.blue[600],
+  '--dh-color-loading-spinner-secondary': "".concat(DEFAULT_DARK_THEME_PALETTE.gray[800], "80"),
+  // 50% opacity
+  '--dh-color-bg': DEFAULT_DARK_THEME_PALETTE.gray[50],
+  '--dh-color-fg': DEFAULT_DARK_THEME_PALETTE.gray[800],
+  '--dh-color-input-bg': DEFAULT_DARK_THEME_PALETTE.gray[500],
+  '--dh-color-input-fg': DEFAULT_DARK_THEME_PALETTE.gray[800],
+  '--dh-color-input-disabled-bg': DEFAULT_DARK_THEME_PALETTE.gray[300],
+  '--dh-color-input-border': DEFAULT_DARK_THEME_PALETTE.gray[600],
+  '--dh-color-input-placeholder': DEFAULT_DARK_THEME_PALETTE.gray[600],
+  '--dh-color-input-focus-border': "".concat(DEFAULT_DARK_THEME_PALETTE.blue[600], "d9"),
+  // 85% opacity
+  // Preloading login specific variables should only be needed in DHE. Including
+  // them for now until we have a way for DHE to configure them. To be addressed
+  // by #1679
+  '--dh-color-login-form-bg': DEFAULT_DARK_THEME_PALETTE.gray[400],
+  '--dh-color-login-status-message': DEFAULT_DARK_THEME_PALETTE.gray[600],
+  '--dh-color-login-logo-bg': DEFAULT_DARK_THEME_PALETTE.gray[900],
+  '--dh-color-login-footer-fg': DEFAULT_DARK_THEME_PALETTE.gray[700],
+  '--dh-color-random-area-plot-animation-fg-fill': "".concat(DEFAULT_DARK_THEME_PALETTE.blue[600], "14"),
+  // .08 opacity
+  '--dh-color-random-area-plot-animation-fg-stroke': "".concat(DEFAULT_DARK_THEME_PALETTE.blue[600], "33"),
+  // .2 opacity
+  '--dh-color-random-area-plot-animation-bg': DEFAULT_DARK_THEME_PALETTE.gray[75],
+  '--dh-color-random-area-plot-animation-grid': DEFAULT_DARK_THEME_PALETTE.gray[300]
 };
 
+/**
+ * Some inline SVGs require manually updating their fill color via
+ * `updateSVGFillColors`. This object maps these variables to their respective
+ * fill color variables.
+ */
+export var SVG_ICON_MANUAL_COLOR_MAP = {
+  '--dh-svg-icon-select-indicator': '--dh-color-selector-fg',
+  '--dh-svg-icon-select-indicator-hover': '--dh-color-selector-hover-fg',
+  '--dh-svg-icon-select-indicator-disabled': '--dh-color-selector-disabled-fg',
+  '--dh-svg-icon-error': '--dh-color-form-control-error'
+};
 export var THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';
 //# sourceMappingURL=ThemeModel.js.map

package/dist/theme/ThemeModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeModel.js","names":["DEFAULT_DARK_THEME_KEY","DEFAULT_LIGHT_THEME_KEY","DEFAULT_PRELOAD_DATA_VARIABLES","THEME_CACHE_LOCAL_STORAGE_KEY"],"sources":["../../src/theme/ThemeModel.ts"],"sourcesContent":["export type BaseThemeType = 'dark' | 'light';\nexport type BaseThemeKey = `default-${BaseThemeType}`;\nexport type ThemePreloadStyleContent = `:root{${string}`;\n\nexport const DEFAULT_DARK_THEME_KEY = 'default-dark' satisfies BaseThemeKey;\nexport const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;\n\n// Css properties that are used in preload data with default values.\nexport const DEFAULT_PRELOAD_DATA_VARIABLES = {\n  '--dh-color-accent': '#4c7dee', // dark theme --dh-color-blue-700\n  '--dh-color-background': '#1a171a', // dark theme --dh-color-gray-50\n} satisfies Record<`--dh-${string}`, string>;\n\nexport const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';\n\nexport interface ThemePreloadData {\n  themeKey: string;\n  preloadStyleContent?: ThemePreloadStyleContent;\n}\n\nexport interface ThemeData {\n  baseThemeKey?: BaseThemeKey;\n  themeKey: string;\n  name: string;\n  styleContent: string;\n}\n\nexport interface ThemeRegistrationData {\n  base: ThemeData[];\n  custom: ThemeData[];\n}\n"],"mappings":"AAIA,OAAO,IAAMA,sBAAsB,GAAG,cAAqC;AAC3E,OAAO,IAAMC,uBAAuB,GAAG,eAAsC;;AAE7E;AACA,OAAO,IAAMC,8BAA8B,GAAG;EAC5C,mBAAmB,EAAE,SAAS;EAAE;EAChC,uBAAuB,EAAE,SAAS,CAAE;AACtC,CAA4C;;AAE5C,OAAO,IAAMC,6BAA6B,GAAG,sBAAsB"}
+{"version":3,"file":"ThemeModel.js","names":["DEFAULT_DARK_THEME_KEY","DEFAULT_LIGHT_THEME_KEY","DEFAULT_DARK_THEME_PALETTE","blue","red","gray","DEFAULT_PRELOAD_DATA_VARIABLES","concat","SVG_ICON_MANUAL_COLOR_MAP","THEME_CACHE_LOCAL_STORAGE_KEY"],"sources":["../../src/theme/ThemeModel.ts"],"sourcesContent":["export type BaseThemeType = 'dark' | 'light';\nexport type BaseThemeKey = `default-${BaseThemeType}`;\nexport type CssVariableStyleContent = `:root{${string}`;\nexport type ThemeCssVariableName = `--dh-${string}`;\n\nexport type ThemePreloadColorVariable =\n  | '--dh-color-accent-contrast'\n  | '--dh-color-accent-bg'\n  | '--dh-color-accent-hover-bg'\n  | '--dh-color-accent-down-bg'\n  | '--dh-color-accent-key-focus-bg'\n  | '--dh-color-negative-bg'\n  | '--dh-color-loading-spinner-primary'\n  | '--dh-color-loading-spinner-secondary'\n  | '--dh-color-bg'\n  | '--dh-color-fg'\n  | '--dh-color-input-bg'\n  | '--dh-color-input-fg'\n  | '--dh-color-input-disabled-bg'\n  | '--dh-color-input-border'\n  | '--dh-color-input-placeholder'\n  | '--dh-color-input-focus-border'\n  // Preloading login specific variables should only be needed in DHE. Including\n  // them for now until we have a way for DHE to configure them. To be addressed\n  // by #1679\n  | '--dh-color-login-form-bg'\n  | '--dh-color-login-status-message'\n  | '--dh-color-login-logo-bg'\n  | '--dh-color-login-footer-fg'\n  | '--dh-color-random-area-plot-animation-fg-fill'\n  | '--dh-color-random-area-plot-animation-fg-stroke'\n  | '--dh-color-random-area-plot-animation-bg'\n  | '--dh-color-random-area-plot-animation-grid';\n\nexport type ThemeIconsRequiringManualColorChanges =\n  | '--dh-svg-icon-select-indicator'\n  | '--dh-svg-icon-select-indicator-hover'\n  | '--dh-svg-icon-select-indicator-disabled'\n  | '--dh-svg-icon-error';\n\nexport const DEFAULT_DARK_THEME_KEY = 'default-dark' satisfies BaseThemeKey;\nexport const DEFAULT_LIGHT_THEME_KEY = 'default-light' satisfies BaseThemeKey;\n\n// Hex versions of some of the default dark theme color palette needed for\n// preload defaults.\nconst DEFAULT_DARK_THEME_PALETTE = {\n  blue: {\n    500: '#2f5bc0',\n    400: '#254ba4',\n    600: '#3b6bda', // accent color\n  },\n  red: {\n    600: '#c73f61',\n  },\n  gray: {\n    50: '#1a171a',\n    75: '#211f22',\n    300: '#373438',\n    400: '#403e41',\n    500: '#5b5a5c',\n    600: '#929192',\n    700: '#c0bfbf',\n    800: '#f0f0ee',\n    900: '#fcfcfa',\n  },\n} as const;\n\n// Css properties that are used in preload data with default values.\nexport const DEFAULT_PRELOAD_DATA_VARIABLES: Record<\n  ThemePreloadColorVariable,\n  string\n> = {\n  '--dh-color-accent-contrast': DEFAULT_DARK_THEME_PALETTE.gray[900],\n  '--dh-color-accent-bg': DEFAULT_DARK_THEME_PALETTE.blue[600],\n  '--dh-color-accent-hover-bg': DEFAULT_DARK_THEME_PALETTE.blue[500],\n  '--dh-color-accent-down-bg': DEFAULT_DARK_THEME_PALETTE.blue[400],\n  '--dh-color-accent-key-focus-bg': DEFAULT_DARK_THEME_PALETTE.blue[500],\n  '--dh-color-negative-bg': DEFAULT_DARK_THEME_PALETTE.red[600],\n  '--dh-color-loading-spinner-primary': DEFAULT_DARK_THEME_PALETTE.blue[600],\n  '--dh-color-loading-spinner-secondary': `${DEFAULT_DARK_THEME_PALETTE.gray[800]}80`, // 50% opacity\n  '--dh-color-bg': DEFAULT_DARK_THEME_PALETTE.gray[50],\n  '--dh-color-fg': DEFAULT_DARK_THEME_PALETTE.gray[800],\n  '--dh-color-input-bg': DEFAULT_DARK_THEME_PALETTE.gray[500],\n  '--dh-color-input-fg': DEFAULT_DARK_THEME_PALETTE.gray[800],\n  '--dh-color-input-disabled-bg': DEFAULT_DARK_THEME_PALETTE.gray[300],\n  '--dh-color-input-border': DEFAULT_DARK_THEME_PALETTE.gray[600],\n  '--dh-color-input-placeholder': DEFAULT_DARK_THEME_PALETTE.gray[600],\n  '--dh-color-input-focus-border': `${DEFAULT_DARK_THEME_PALETTE.blue[600]}d9`, // 85% opacity\n  // Preloading login specific variables should only be needed in DHE. Including\n  // them for now until we have a way for DHE to configure them. To be addressed\n  // by #1679\n  '--dh-color-login-form-bg': DEFAULT_DARK_THEME_PALETTE.gray[400],\n  '--dh-color-login-status-message': DEFAULT_DARK_THEME_PALETTE.gray[600],\n  '--dh-color-login-logo-bg': DEFAULT_DARK_THEME_PALETTE.gray[900],\n  '--dh-color-login-footer-fg': DEFAULT_DARK_THEME_PALETTE.gray[700],\n  '--dh-color-random-area-plot-animation-fg-fill': `${DEFAULT_DARK_THEME_PALETTE.blue[600]}14`, // .08 opacity\n  '--dh-color-random-area-plot-animation-fg-stroke': `${DEFAULT_DARK_THEME_PALETTE.blue[600]}33`, // .2 opacity\n  '--dh-color-random-area-plot-animation-bg':\n    DEFAULT_DARK_THEME_PALETTE.gray[75],\n  '--dh-color-random-area-plot-animation-grid':\n    DEFAULT_DARK_THEME_PALETTE.gray[300],\n};\n\n/**\n * Some inline SVGs require manually updating their fill color via\n * `updateSVGFillColors`. This object maps these variables to their respective\n * fill color variables.\n */\nexport const SVG_ICON_MANUAL_COLOR_MAP: Record<\n  ThemeIconsRequiringManualColorChanges,\n  string\n> = {\n  '--dh-svg-icon-select-indicator': '--dh-color-selector-fg',\n  '--dh-svg-icon-select-indicator-hover': '--dh-color-selector-hover-fg',\n  '--dh-svg-icon-select-indicator-disabled': '--dh-color-selector-disabled-fg',\n  '--dh-svg-icon-error': '--dh-color-form-control-error',\n};\n\nexport const THEME_CACHE_LOCAL_STORAGE_KEY = 'deephaven.themeCache';\n\nexport interface ThemePreloadData {\n  themeKey: string;\n  preloadStyleContent?: CssVariableStyleContent;\n}\n\nexport interface ThemeData {\n  baseThemeKey?: BaseThemeKey;\n  themeKey: string;\n  name: string;\n  styleContent: string;\n}\n\nexport interface ThemeRegistrationData {\n  base: ThemeData[];\n  custom: ThemeData[];\n}\n"],"mappings":"AAwCA,OAAO,IAAMA,sBAAsB,GAAG,cAAqC;AAC3E,OAAO,IAAMC,uBAAuB,GAAG,eAAsC;;AAE7E;AACA;AACA,IAAMC,0BAA0B,GAAG;EACjCC,IAAI,EAAE;IACJ,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS,CAAE;EAClB,CAAC;;EACDC,GAAG,EAAE;IACH,GAAG,EAAE;EACP,CAAC;EACDC,IAAI,EAAE;IACJ,EAAE,EAAE,SAAS;IACb,EAAE,EAAE,SAAS;IACb,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,SAAS;IACd,GAAG,EAAE;EACP;AACF,CAAU;;AAEV;AACA,OAAO,IAAMC,8BAGZ,GAAG;EACF,4BAA4B,EAAEJ,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EAClE,sBAAsB,EAAEH,0BAA0B,CAACC,IAAI,CAAC,GAAG,CAAC;EAC5D,4BAA4B,EAAED,0BAA0B,CAACC,IAAI,CAAC,GAAG,CAAC;EAClE,2BAA2B,EAAED,0BAA0B,CAACC,IAAI,CAAC,GAAG,CAAC;EACjE,gCAAgC,EAAED,0BAA0B,CAACC,IAAI,CAAC,GAAG,CAAC;EACtE,wBAAwB,EAAED,0BAA0B,CAACE,GAAG,CAAC,GAAG,CAAC;EAC7D,oCAAoC,EAAEF,0BAA0B,CAACC,IAAI,CAAC,GAAG,CAAC;EAC1E,sCAAsC,KAAAI,MAAA,CAAKL,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC,OAAI;EAAE;EACrF,eAAe,EAAEH,0BAA0B,CAACG,IAAI,CAAC,EAAE,CAAC;EACpD,eAAe,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EACrD,qBAAqB,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EAC3D,qBAAqB,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EAC3D,8BAA8B,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EACpE,yBAAyB,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EAC/D,8BAA8B,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EACpE,+BAA+B,KAAAE,MAAA,CAAKL,0BAA0B,CAACC,IAAI,CAAC,GAAG,CAAC,OAAI;EAAE;EAC9E;EACA;EACA;EACA,0BAA0B,EAAED,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EAChE,iCAAiC,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EACvE,0BAA0B,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EAChE,4BAA4B,EAAEH,0BAA0B,CAACG,IAAI,CAAC,GAAG,CAAC;EAClE,+CAA+C,KAAAE,MAAA,CAAKL,0BAA0B,CAACC,IAAI,CAAC,GAAG,CAAC,OAAI;EAAE;EAC9F,iDAAiD,KAAAI,MAAA,CAAKL,0BAA0B,CAACC,IAAI,CAAC,GAAG,CAAC,OAAI;EAAE;EAChG,0CAA0C,EACxCD,0BAA0B,CAACG,IAAI,CAAC,EAAE,CAAC;EACrC,4CAA4C,EAC1CH,0BAA0B,CAACG,IAAI,CAAC,GAAG;AACvC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMG,yBAGZ,GAAG;EACF,gCAAgC,EAAE,wBAAwB;EAC1D,sCAAsC,EAAE,8BAA8B;EACtE,yCAAyC,EAAE,iCAAiC;EAC5E,qBAAqB,EAAE;AACzB,CAAC;AAED,OAAO,IAAMC,6BAA6B,GAAG,sBAAsB"}

package/dist/theme/ThemePicker.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function ThemePicker(): JSX.Element | null;
+export default ThemePicker;
+//# sourceMappingURL=ThemePicker.d.ts.map

package/dist/theme/ThemePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../src/theme/ThemePicker.tsx"],"names":[],"mappings":";AAIA,wBAAgB,WAAW,IAAI,GAAG,CAAC,OAAO,GAAG,IAAI,CAoBhD;AAED,eAAe,WAAW,CAAC"}

package/dist/theme/ThemePicker.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { Item, Picker } from '@adobe/react-spectrum';
+import useTheme from "./useTheme.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ThemePicker() {
+  var {
+    selectedThemeKey,
+    setSelectedThemeKey,
+    themes
+  } = useTheme();
+  var onSelectionChange = useCallback(key => {
+    setSelectedThemeKey(key);
+  }, [setSelectedThemeKey]);
+  return /*#__PURE__*/_jsx(Picker, {
+    label: "Pick a color scheme",
+    items: themes,
+    selectedKey: selectedThemeKey,
+    onSelectionChange: onSelectionChange,
+    children: item => /*#__PURE__*/_jsx(Item, {
+      children: item.name
+    }, item.themeKey)
+  });
+}
+export default ThemePicker;
+//# sourceMappingURL=ThemePicker.js.map

package/dist/theme/ThemePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePicker.js","names":["useCallback","Item","Picker","useTheme","jsx","_jsx","ThemePicker","selectedThemeKey","setSelectedThemeKey","themes","onSelectionChange","key","label","items","selectedKey","children","item","name","themeKey"],"sources":["../../src/theme/ThemePicker.tsx"],"sourcesContent":["import { Key, useCallback } from 'react';\nimport { Item, Picker } from '@adobe/react-spectrum';\nimport useTheme from './useTheme';\n\nexport function ThemePicker(): JSX.Element | null {\n  const { selectedThemeKey, setSelectedThemeKey, themes } = useTheme();\n\n  const onSelectionChange = useCallback(\n    (key: Key) => {\n      setSelectedThemeKey(key as string);\n    },\n    [setSelectedThemeKey]\n  );\n\n  return (\n    <Picker\n      label=\"Pick a color scheme\"\n      items={themes}\n      selectedKey={selectedThemeKey}\n      onSelectionChange={onSelectionChange}\n    >\n      {item => <Item key={item.themeKey}>{item.name}</Item>}\n    </Picker>\n  );\n}\n\nexport default ThemePicker;\n"],"mappings":"AAAA,SAAcA,WAAW,QAAQ,OAAO;AACxC,SAASC,IAAI,EAAEC,MAAM,QAAQ,uBAAuB;AAAC,OAC9CC,QAAQ;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEf,OAAO,SAASC,WAAWA,CAAA,EAAuB;EAChD,IAAM;IAAEC,gBAAgB;IAAEC,mBAAmB;IAAEC;EAAO,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAEpE,IAAMO,iBAAiB,GAAGV,WAAW,CAClCW,GAAQ,IAAK;IACZH,mBAAmB,CAACG,GAAa,CAAC;EACpC,CAAC,EACD,CAACH,mBAAmB,CACtB,CAAC;EAED,oBACEH,IAAA,CAACH,MAAM;IACLU,KAAK,EAAC,qBAAqB;IAC3BC,KAAK,EAAEJ,MAAO;IACdK,WAAW,EAAEP,gBAAiB;IAC9BG,iBAAiB,EAAEA,iBAAkB;IAAAK,QAAA,EAEpCC,IAAI,iBAAIX,IAAA,CAACJ,IAAI;MAAAc,QAAA,EAAsBC,IAAI,CAACC;IAAI,GAAzBD,IAAI,CAACE,QAA2B;EAAC,CAC/C,CAAC;AAEb;AAEA,eAAeZ,WAAW"}

package/dist/theme/ThemeProvider.d.ts

@@ -1,8 +1,10 @@
 import { ReactNode } from 'react';
 import { ThemeData } from './ThemeModel';
+import './theme-svg.scss';
 export interface ThemeContextValue {
     activeThemes: ThemeData[] | null;
     selectedThemeKey: string;
+    themes: ThemeData[];
     setSelectedThemeKey: (themeKey: string) => void;
 }
 export declare const ThemeContext: import("react").Context<ThemeContextValue | null>;
@@ -10,6 +12,6 @@ export interface ThemeProviderProps {
     themes: ThemeData[] | null;
     children: ReactNode;
 }
-export declare function ThemeProvider({ themes, children, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ themes: customThemes, children, }: ThemeProviderProps): JSX.Element | null;
 export default ThemeProvider;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,MAAM,OAAO,CAAC;AAE/E,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAUjE,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAID,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAMjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkElC;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAgC,MAAM,OAAO,CAAC;AAE/E,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAC;AAUjE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,mBAAmB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAID,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E,MAAM,WAAW,kBAAkB;IAMjC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EAAE,YAAY,EACpB,QAAQ,GACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6EzC;AAED,eAAe,aAAa,CAAC"}

package/dist/theme/ThemeProvider.js

@@ -1,8 +1,9 @@
 import { createContext, useEffect, useMemo, useState } from 'react';
 import Log from '@deephaven/log';
 import { DEFAULT_DARK_THEME_KEY } from "./ThemeModel.js";
-import { calculatePreloadStyleContent, getActiveThemes, getDefaultBaseThemes, getThemePreloadData, setThemePreloadData } from "./ThemeUtils.js";
+import { calculatePreloadStyleContent, getActiveThemes, getDefaultBaseThemes, getThemePreloadData, setThemePreloadData, overrideSVGFillColors } from "./ThemeUtils.js";
 import { SpectrumThemeProvider } from "./SpectrumThemeProvider.js";
+import "./theme-svg.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -10,29 +11,35 @@ var log = Log.module('ThemeProvider');
 export var ThemeContext = /*#__PURE__*/createContext(null);
 export function ThemeProvider(_ref) {
   var {
-    themes,
+    themes: customThemes,
     children
   } = _ref;
   var baseThemes = useMemo(() => getDefaultBaseThemes(), []);
+  var [value, setValue] = useState(null);
   var [selectedThemeKey, setSelectedThemeKey] = useState(() => {
     var _getThemePreloadData$, _getThemePreloadData;
     return (_getThemePreloadData$ = (_getThemePreloadData = getThemePreloadData()) === null || _getThemePreloadData === void 0 ? void 0 : _getThemePreloadData.themeKey) !== null && _getThemePreloadData$ !== void 0 ? _getThemePreloadData$ : DEFAULT_DARK_THEME_KEY;
   });
 
   // Calculate active themes once a non-null themes array is provided.
-  var activeThemes = useMemo(() => themes == null ? null : getActiveThemes(selectedThemeKey, {
+  var activeThemes = useMemo(() => customThemes == null ? null : getActiveThemes(selectedThemeKey, {
     base: baseThemes,
-    custom: themes !== null && themes !== void 0 ? themes : []
-  }), [baseThemes, selectedThemeKey, themes]);
+    custom: customThemes !== null && customThemes !== void 0 ? customThemes : []
+  }), [baseThemes, selectedThemeKey, customThemes]);
+  var themes = useMemo(() => [...baseThemes, ...(customThemes !== null && customThemes !== void 0 ? customThemes : [])], [baseThemes, customThemes]);
   useEffect(function updateThemePreloadData() {
     // Don't update preload data until themes have been loaded and activated
-    if (activeThemes == null || themes == null) {
+    if (activeThemes == null || customThemes == null) {
       return;
     }
+
+    // Override fill color for certain inline SVGs (the originals are provided
+    // by theme-svg.scss)
+    overrideSVGFillColors();
     var preloadStyleContent = calculatePreloadStyleContent();
     log.debug2('updateThemePreloadData:', {
       active: activeThemes.map(theme => theme.themeKey),
-      all: themes.map(theme => theme.themeKey),
+      custom: customThemes.map(theme => theme.themeKey),
       preloadStyleContent,
       selectedThemeKey
     });
@@ -40,13 +47,16 @@ export function ThemeProvider(_ref) {
       themeKey: selectedThemeKey,
       preloadStyleContent
     });
+  }, [activeThemes, selectedThemeKey, customThemes]);
+  useEffect(() => {
+    setValue({
+      activeThemes,
+      selectedThemeKey,
+      themes,
+      setSelectedThemeKey
+    });
   }, [activeThemes, selectedThemeKey, themes]);
-  var value = useMemo(() => ({
-    activeThemes,
-    selectedThemeKey,
-    setSelectedThemeKey
-  }), [activeThemes, selectedThemeKey]);
-  return /*#__PURE__*/_jsxs(ThemeContext.Provider, {
+  return value == null ? null : /*#__PURE__*/_jsxs(ThemeContext.Provider, {
     value: value,
     children: [activeThemes == null ? null : /*#__PURE__*/_jsx(_Fragment, {
       children: activeThemes.map(theme => /*#__PURE__*/_jsx("style", {

package/dist/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":["createContext","useEffect","useMemo","useState","Log","DEFAULT_DARK_THEME_KEY","calculatePreloadStyleContent","getActiveThemes","getDefaultBaseThemes","getThemePreloadData","setThemePreloadData","SpectrumThemeProvider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","module","ThemeContext","ThemeProvider","_ref","themes","children","baseThemes","selectedThemeKey","setSelectedThemeKey","_getThemePreloadData$","_getThemePreloadData","themeKey","activeThemes","base","custom","updateThemePreloadData","preloadStyleContent","debug2","active","map","theme","all","value","Provider","styleContent"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { DEFAULT_DARK_THEME_KEY, ThemeData } from './ThemeModel';\nimport {\n  calculatePreloadStyleContent,\n  getActiveThemes,\n  getDefaultBaseThemes,\n  getThemePreloadData,\n  setThemePreloadData,\n} from './ThemeUtils';\nimport { SpectrumThemeProvider } from './SpectrumThemeProvider';\n\nexport interface ThemeContextValue {\n  activeThemes: ThemeData[] | null;\n  selectedThemeKey: string;\n  setSelectedThemeKey: (themeKey: string) => void;\n}\n\nconst log = Log.module('ThemeProvider');\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport interface ThemeProviderProps {\n  /*\n   * Additional themes to load in addition to the base themes. If no additional\n   * themes are to be loaded, this must be set to an empty array in order to\n   * tell the provider to activate the base themes.\n   */\n  themes: ThemeData[] | null;\n  children: ReactNode;\n}\n\nexport function ThemeProvider({\n  themes,\n  children,\n}: ThemeProviderProps): JSX.Element {\n  const baseThemes = useMemo(() => getDefaultBaseThemes(), []);\n\n  const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n    () => getThemePreloadData()?.themeKey ?? DEFAULT_DARK_THEME_KEY\n  );\n\n  // Calculate active themes once a non-null themes array is provided.\n  const activeThemes = useMemo(\n    () =>\n      themes == null\n        ? null\n        : getActiveThemes(selectedThemeKey, {\n            base: baseThemes,\n            custom: themes ?? [],\n          }),\n    [baseThemes, selectedThemeKey, themes]\n  );\n\n  useEffect(\n    function updateThemePreloadData() {\n      // Don't update preload data until themes have been loaded and activated\n      if (activeThemes == null || themes == null) {\n        return;\n      }\n\n      const preloadStyleContent = calculatePreloadStyleContent();\n\n      log.debug2('updateThemePreloadData:', {\n        active: activeThemes.map(theme => theme.themeKey),\n        all: themes.map(theme => theme.themeKey),\n        preloadStyleContent,\n        selectedThemeKey,\n      });\n\n      setThemePreloadData({\n        themeKey: selectedThemeKey,\n        preloadStyleContent,\n      });\n    },\n    [activeThemes, selectedThemeKey, themes]\n  );\n\n  const value = useMemo(\n    () => ({\n      activeThemes,\n      selectedThemeKey,\n      setSelectedThemeKey,\n    }),\n    [activeThemes, selectedThemeKey]\n  );\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {activeThemes == null ? null : (\n        <>\n          {activeThemes.map(theme => (\n            <style data-theme-key={theme.themeKey} key={theme.themeKey}>\n              {theme.styleContent}\n            </style>\n          ))}\n        </>\n      )}\n      <SpectrumThemeProvider>{children}</SpectrumThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n"],"mappings":"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"}
+{"version":3,"file":"ThemeProvider.js","names":["createContext","useEffect","useMemo","useState","Log","DEFAULT_DARK_THEME_KEY","calculatePreloadStyleContent","getActiveThemes","getDefaultBaseThemes","getThemePreloadData","setThemePreloadData","overrideSVGFillColors","SpectrumThemeProvider","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","log","module","ThemeContext","ThemeProvider","_ref","themes","customThemes","children","baseThemes","value","setValue","selectedThemeKey","setSelectedThemeKey","_getThemePreloadData$","_getThemePreloadData","themeKey","activeThemes","base","custom","updateThemePreloadData","preloadStyleContent","debug2","active","map","theme","Provider","styleContent"],"sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, ReactNode, useEffect, useMemo, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { DEFAULT_DARK_THEME_KEY, ThemeData } from './ThemeModel';\nimport {\n  calculatePreloadStyleContent,\n  getActiveThemes,\n  getDefaultBaseThemes,\n  getThemePreloadData,\n  setThemePreloadData,\n  overrideSVGFillColors,\n} from './ThemeUtils';\nimport { SpectrumThemeProvider } from './SpectrumThemeProvider';\nimport './theme-svg.scss';\n\nexport interface ThemeContextValue {\n  activeThemes: ThemeData[] | null;\n  selectedThemeKey: string;\n  themes: ThemeData[];\n  setSelectedThemeKey: (themeKey: string) => void;\n}\n\nconst log = Log.module('ThemeProvider');\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\nexport interface ThemeProviderProps {\n  /*\n   * Additional themes to load in addition to the base themes. If no additional\n   * themes are to be loaded, this must be set to an empty array in order to\n   * tell the provider to activate the base themes.\n   */\n  themes: ThemeData[] | null;\n  children: ReactNode;\n}\n\nexport function ThemeProvider({\n  themes: customThemes,\n  children,\n}: ThemeProviderProps): JSX.Element | null {\n  const baseThemes = useMemo(() => getDefaultBaseThemes(), []);\n\n  const [value, setValue] = useState<ThemeContextValue | null>(null);\n\n  const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n    () => getThemePreloadData()?.themeKey ?? DEFAULT_DARK_THEME_KEY\n  );\n\n  // Calculate active themes once a non-null themes array is provided.\n  const activeThemes = useMemo(\n    () =>\n      customThemes == null\n        ? null\n        : getActiveThemes(selectedThemeKey, {\n            base: baseThemes,\n            custom: customThemes ?? [],\n          }),\n    [baseThemes, selectedThemeKey, customThemes]\n  );\n\n  const themes = useMemo(\n    () => [...baseThemes, ...(customThemes ?? [])],\n    [baseThemes, customThemes]\n  );\n\n  useEffect(\n    function updateThemePreloadData() {\n      // Don't update preload data until themes have been loaded and activated\n      if (activeThemes == null || customThemes == null) {\n        return;\n      }\n\n      // Override fill color for certain inline SVGs (the originals are provided\n      // by theme-svg.scss)\n      overrideSVGFillColors();\n\n      const preloadStyleContent = calculatePreloadStyleContent();\n\n      log.debug2('updateThemePreloadData:', {\n        active: activeThemes.map(theme => theme.themeKey),\n        custom: customThemes.map(theme => theme.themeKey),\n        preloadStyleContent,\n        selectedThemeKey,\n      });\n\n      setThemePreloadData({\n        themeKey: selectedThemeKey,\n        preloadStyleContent,\n      });\n    },\n    [activeThemes, selectedThemeKey, customThemes]\n  );\n\n  useEffect(() => {\n    setValue({\n      activeThemes,\n      selectedThemeKey,\n      themes,\n      setSelectedThemeKey,\n    });\n  }, [activeThemes, selectedThemeKey, themes]);\n\n  return value == null ? null : (\n    <ThemeContext.Provider value={value}>\n      {activeThemes == null ? null : (\n        <>\n          {activeThemes.map(theme => (\n            <style data-theme-key={theme.themeKey} key={theme.themeKey}>\n              {theme.styleContent}\n            </style>\n          ))}\n        </>\n      )}\n      <SpectrumThemeProvider>{children}</SpectrumThemeProvider>\n    </ThemeContext.Provider>\n  );\n}\n\nexport default ThemeProvider;\n"],"mappings":"AAAA,SAASA,aAAa,EAAaC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAC9E,OAAOC,GAAG,MAAM,gBAAgB;AAAC,SACxBC,sBAAsB;AAAA,SAE7BC,4BAA4B,EAC5BC,eAAe,EACfC,oBAAoB,EACpBC,mBAAmB,EACnBC,mBAAmB,EACnBC,qBAAqB;AAAA,SAEdC,qBAAqB;AAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAU9B,IAAMC,GAAG,GAAGf,GAAG,CAACgB,MAAM,CAAC,eAAe,CAAC;AAEvC,OAAO,IAAMC,YAAY,gBAAGrB,aAAa,CAA2B,IAAI,CAAC;AAYzE,OAAO,SAASsB,aAAaA,CAAAC,IAAA,EAGc;EAAA,IAHb;IAC5BC,MAAM,EAAEC,YAAY;IACpBC;EACkB,CAAC,GAAAH,IAAA;EACnB,IAAMI,UAAU,GAAGzB,OAAO,CAAC,MAAMM,oBAAoB,CAAC,CAAC,EAAE,EAAE,CAAC;EAE5D,IAAM,CAACoB,KAAK,EAAEC,QAAQ,CAAC,GAAG1B,QAAQ,CAA2B,IAAI,CAAC;EAElE,IAAM,CAAC2B,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG5B,QAAQ,CACtD;IAAA,IAAA6B,qBAAA,EAAAC,oBAAA;IAAA,QAAAD,qBAAA,IAAAC,oBAAA,GAAMxB,mBAAmB,CAAC,CAAC,cAAAwB,oBAAA,uBAArBA,oBAAA,CAAuBC,QAAQ,cAAAF,qBAAA,cAAAA,qBAAA,GAAI3B,sBAAsB;EAAA,CACjE,CAAC;;EAED;EACA,IAAM8B,YAAY,GAAGjC,OAAO,CAC1B,MACEuB,YAAY,IAAI,IAAI,GAChB,IAAI,GACJlB,eAAe,CAACuB,gBAAgB,EAAE;IAChCM,IAAI,EAAET,UAAU;IAChBU,MAAM,EAAEZ,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI;EAC1B,CAAC,CAAC,EACR,CAACE,UAAU,EAAEG,gBAAgB,EAAEL,YAAY,CAC7C,CAAC;EAED,IAAMD,MAAM,GAAGtB,OAAO,CACpB,MAAM,CAAC,GAAGyB,UAAU,EAAE,IAAIF,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAE,CAAC,CAAC,EAC9C,CAACE,UAAU,EAAEF,YAAY,CAC3B,CAAC;EAEDxB,SAAS,CACP,SAASqC,sBAAsBA,CAAA,EAAG;IAChC;IACA,IAAIH,YAAY,IAAI,IAAI,IAAIV,YAAY,IAAI,IAAI,EAAE;MAChD;IACF;;IAEA;IACA;IACAd,qBAAqB,CAAC,CAAC;IAEvB,IAAM4B,mBAAmB,GAAGjC,4BAA4B,CAAC,CAAC;IAE1Da,GAAG,CAACqB,MAAM,CAAC,yBAAyB,EAAE;MACpCC,MAAM,EAAEN,YAAY,CAACO,GAAG,CAACC,KAAK,IAAIA,KAAK,CAACT,QAAQ,CAAC;MACjDG,MAAM,EAAEZ,YAAY,CAACiB,GAAG,CAACC,KAAK,IAAIA,KAAK,CAACT,QAAQ,CAAC;MACjDK,mBAAmB;MACnBT;IACF,CAAC,CAAC;IAEFpB,mBAAmB,CAAC;MAClBwB,QAAQ,EAAEJ,gBAAgB;MAC1BS;IACF,CAAC,CAAC;EACJ,CAAC,EACD,CAACJ,YAAY,EAAEL,gBAAgB,EAAEL,YAAY,CAC/C,CAAC;EAEDxB,SAAS,CAAC,MAAM;IACd4B,QAAQ,CAAC;MACPM,YAAY;MACZL,gBAAgB;MAChBN,MAAM;MACNO;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACI,YAAY,EAAEL,gBAAgB,EAAEN,MAAM,CAAC,CAAC;EAE5C,OAAOI,KAAK,IAAI,IAAI,GAAG,IAAI,gBACzBV,KAAA,CAACG,YAAY,CAACuB,QAAQ;IAAChB,KAAK,EAAEA,KAAM;IAAAF,QAAA,GACjCS,YAAY,IAAI,IAAI,GAAG,IAAI,gBAC1BrB,IAAA,CAAAE,SAAA;MAAAU,QAAA,EACGS,YAAY,CAACO,GAAG,CAACC,KAAK,iBACrB7B,IAAA;QAAO,kBAAgB6B,KAAK,CAACT,QAAS;QAAAR,QAAA,EACnCiB,KAAK,CAACE;MAAY,GADuBF,KAAK,CAACT,QAE3C,CACR;IAAC,CACF,CACH,eACDpB,IAAA,CAACF,qBAAqB;MAAAc,QAAA,EAAEA;IAAQ,CAAwB,CAAC;EAAA,CACpC,CACxB;AACH;AAEA,eAAeJ,aAAa"}

package/dist/theme/ThemeUtils.d.ts

@@ -1,15 +1,24 @@
-import { ThemeData, ThemePreloadData, ThemePreloadStyleContent, ThemeRegistrationData } from './ThemeModel';
+import { ThemeData, ThemePreloadData, CssVariableStyleContent, ThemeRegistrationData, ThemeCssVariableName } from './ThemeModel';
 export declare const CSS_VAR_EXPRESSION_PREFIX = "var(--";
 export declare const TMP_CSS_PROP_PREFIX = "dh-tmp";
 export declare const NON_WHITESPACE_REGEX: RegExp;
 export declare const WHITESPACE_REGEX: RegExp;
 export type VarExpressionResolver = (varExpression: string) => string;
 /**
- * Creates a string containing preload style content for the current theme.
- * This resolves the current values of a few CSS variables that can be used
- * to style the page before the theme is loaded on next page load.
+ * Resolves the current values of CSS variables we want to preload. Preloading
+ * happens before themes are fully loaded so that we can style things like the
+ * loading spinner and background color which are shown to the user early on in
+ * the app lifecycle.
  */
-export declare function calculatePreloadStyleContent(): ThemePreloadStyleContent;
+export declare function calculatePreloadStyleContent(): CssVariableStyleContent;
+/**
+ * Create a resolver function for calculating the value of a css variable based
+ * on a given element's computed style. If the variable resolves to '', we check
+ * DEFAULT_PRELOAD_DATA_VARIABLES for a default value, and if one does not exist,
+ * return ''.
+ * @param el Element to resolve css variables against
+ */
+export declare function createCssVariableResolver(el: Element): (varName: ThemeCssVariableName) => string;
 /**
  * Extracts all css variable expressions from the given record and returns
  * a set of unique expressions.
@@ -57,11 +66,18 @@ export declare function getThemePreloadData(): ThemePreloadData | null;
  * @returns An array of [start, end] index pairs for each expression
  */
 export declare function getExpressionRanges(value: string): [number, number][];
+/**
+ * Replace the `fill='...'` attribute in the given SVG content with the given
+ * color string.
+ * @param svgContent Inline SVG content to replace the fill color in
+ * @param fillColor The color to replace the fill color with
+ */
+export declare function replaceSVGFillColor(svgContent: string, fillColor: string): string;
 /**
  * Make a copy of the given object replacing any css variable expressions
  * contained in its prop values with values resolved from the given HTML element.
- * Variables that resolve to color strings will also be normalized to rgb or
- * rgba color strings.
+ * Variables that resolve to color strings will also be normalized to 8 digit
+ * hex values (or optionally 6 digit hex if `isAlphaOptional` is true).
  *
  * Note that the browser will force a reflow when calling `getComputedStyle` if
  * css properties have changed. In order to avoid a reflow for every property
@@ -74,8 +90,10 @@ export declare function getExpressionRanges(value: string): [number, number][];
  * @param record An object whose values may contain css var expressions
  * @param targetElement The element to resolve css variables against. Defaults
  * to document.body
+ * @param isAlphaOptional If true, the alpha value will be dropped from resolved
+ * 8 character hex colors if it is 'ff'. Defaults to false.
  */
-export declare function resolveCssVariablesInRecord<T extends Record<string, string>>(record: T, targetElement?: HTMLElement): T;
+export declare function resolveCssVariablesInRecord<T extends Record<string, string>>(record: T, targetElement?: HTMLElement, isAlphaOptional?: boolean): T;
 /**
  * Resolve css variable expressions in the given string using the
  * given resolver and replace the original expressions with the resolved values.
@@ -99,4 +117,20 @@ export declare function getThemeKey(pluginName: string, themeName: string): stri
  * Preload minimal theme variables from the cache.
  */
 export declare function preloadTheme(): void;
+/**
+ * Inline SVGs cannot depend on dynamic CSS variables, so we have to statically
+ * update them if we want to change their color.
+ *
+ * This function:
+ * 1. Clears any previous overrides
+ * 2. Resolves CSS variables containing inline SVG urls
+ * 3. Resolves mapped color variables and replaces the `fill='...'` attribute with the result
+ * 4. Sets the original CSS variable to the new replaced value
+ *
+ * Note that it is preferable to use inline SVGs as background-mask values and
+ * just change the background color instead of relying on this util, but this
+ * is not always possible. e.g. <select> elements don't support pseudo elements,
+ * so there's not a good way to set icons via masks.
+ */
+export declare function overrideSVGFillColors(): void;
 //# sourceMappingURL=ThemeUtils.d.ts.map

package/dist/theme/ThemeUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeUtils.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeUtils.ts"],"names":[],"mappings":"AAgBA,OAAO,EAIL,SAAS,EACT,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAItB,eAAO,MAAM,yBAAyB,WAAW,CAAC;AAClD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAC5C,eAAO,MAAM,oBAAoB,QAAO,CAAC;AACzC,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,4BAA4B,IAAI,wBAAwB,CAWvE;AAED;;;;GAIG;AACH,wBAAgB,qCAAqC,CACnD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,GAAG,CAAC,MAAM,CAAC,CAcb;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,iBAAiB,EAAE,qBAAqB,GACvC,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CA+BtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,EAAE,CAalD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAU7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAiCrE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1E,MAAM,EAAE,CAAC,EACT,aAAa,GAAE,WAA2B,GACzC,CAAC,CA2CH;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,MAAM,GACZ,MAAM,CAyBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAKvE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAEzE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAUnC"}
+{"version":3,"file":"ThemeUtils.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeUtils.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,SAAS,EACT,gBAAgB,EAChB,uBAAuB,EAEvB,qBAAqB,EAGrB,oBAAoB,EAErB,MAAM,cAAc,CAAC;AAItB,eAAO,MAAM,yBAAyB,WAAW,CAAC;AAClD,eAAO,MAAM,mBAAmB,WAAW,CAAC;AAC5C,eAAO,MAAM,oBAAoB,QAAO,CAAC;AACzC,eAAO,MAAM,gBAAgB,QAAO,CAAC;AAErC,MAAM,MAAM,qBAAqB,GAAG,CAAC,aAAa,EAAE,MAAM,KAAK,MAAM,CAAC;AAEtE;;;;;GAKG;AACH,wBAAgB,4BAA4B,IAAI,uBAAuB,CAUtE;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,EAAE,EAAE,OAAO,GACV,CAAC,OAAO,EAAE,oBAAoB,KAAK,MAAM,CAkB3C;AAED;;;;GAIG;AACH,wBAAgB,qCAAqC,CACnD,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,GAAG,CAAC,MAAM,CAAC,CAcb;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,iBAAiB,EAAE,qBAAqB,GACvC,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CA+BtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,EAAE,CAgBlD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAU7D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAiCrE;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,MAAM,CAKR;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC1E,MAAM,EAAE,CAAC,EACT,aAAa,GAAE,WAA2B,EAC1C,eAAe,UAAQ,GACtB,CAAC,CA2CH;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,qBAAqB,EAC/B,KAAK,EAAE,MAAM,GACZ,MAAM,CAyBR;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAKvE;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAEzE;AAED;;GAEG;AACH,wBAAgB,YAAY,IAAI,IAAI,CAWnC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAkB5C"}