@deephaven/components 0.49.1 → 0.49.2-theme-plugins.29

package/dist/theme/ThemeModel.js.map

@@ -0,0 +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-accent-color': '#4c7dee', // dark theme --dh-color-blue-700\n  '--dh-background-color': '#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"}

package/dist/theme/ThemeUtils.d.ts

@@ -0,0 +1,37 @@
+import { ThemeData, ThemePreloadData, ThemePreloadStyleContent, ThemeRegistrationData } from './ThemeModel';
+/**
+ * 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.
+ */
+export declare function calculatePreloadStyleContent(): ThemePreloadStyleContent;
+/**
+ * Returns an array of the active themes. The first item will always be one
+ * of the base themes. Optionally, the second item will be a custom theme.
+ */
+export declare function getActiveThemes(themeKey: string, themeRegistration: ThemeRegistrationData): [ThemeData] | [ThemeData, ThemeData];
+/**
+ * Get default base theme data.
+ */
+export declare function getDefaultBaseThemes(): ThemeData[];
+/**
+ * Get the preload data from local storage or null if it does not exist or is
+ * invalid
+ */
+export declare function getThemePreloadData(): ThemePreloadData | null;
+/**
+ * Store theme preload data in local storage.
+ * @param preloadData The preload data to set
+ */
+export declare function setThemePreloadData(preloadData: ThemePreloadData): void;
+/**
+ * Derive unique theme key from plugin root path and theme name.
+ * @param pluginName The root path of the plugin
+ * @param themeName The name of the theme
+ */
+export declare function getThemeKey(pluginName: string, themeName: string): string;
+/**
+ * Preload minimal theme variables from the cache.
+ */
+export declare function preloadTheme(): void;
+//# sourceMappingURL=ThemeUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeUtils.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeUtils.ts"],"names":[],"mappings":"AAIA,OAAO,EAIL,SAAS,EACT,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAItB;;;;GAIG;AACH,wBAAgB,4BAA4B,IAAI,wBAAwB,CAWvE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,QAAQ,EAAE,MAAM,EAChB,iBAAiB,EAAE,qBAAqB,GACvC,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CA4BtC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,EAAE,CAalD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAU7D;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"}

package/dist/theme/ThemeUtils.js

@@ -0,0 +1,100 @@
+import Log from '@deephaven/log';
+import { assertNotNull } from '@deephaven/utils';
+import darkTheme from "../../scss/theme_default_dark.scss?inline.js";
+import lightTheme from "../../scss/theme_default_light.scss?inline.js";
+import { DEFAULT_DARK_THEME_KEY, DEFAULT_LIGHT_THEME_KEY, DEFAULT_PRELOAD_DATA_VARIABLES, THEME_CACHE_LOCAL_STORAGE_KEY } from "./ThemeModel.js";
+var log = Log.module('ThemeUtils');
+
+/**
+ * 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.
+ */
+export function calculatePreloadStyleContent() {
+  var bodyStyle = getComputedStyle(document.body);
+
+  // Calculate the current preload variables. If the variable is not set, use
+  // the default value.
+  var pairs = Object.entries(DEFAULT_PRELOAD_DATA_VARIABLES).map(_ref => {
+    var [key, defaultValue] = _ref;
+    return "".concat(key, ":").concat(bodyStyle.getPropertyValue(key) || defaultValue);
+  });
+  return ":root{".concat(pairs.join(';'), "}");
+}
+
+/**
+ * Returns an array of the active themes. The first item will always be one
+ * of the base themes. Optionally, the second item will be a custom theme.
+ */
+export function getActiveThemes(themeKey, themeRegistration) {
+  var _custom$baseThemeKey;
+  var custom = themeRegistration.custom.find(theme => theme.themeKey === themeKey);
+  var baseThemeKey = (_custom$baseThemeKey = custom === null || custom === void 0 ? void 0 : custom.baseThemeKey) !== null && _custom$baseThemeKey !== void 0 ? _custom$baseThemeKey : themeKey;
+  var base = themeRegistration.base.find(theme => theme.themeKey === baseThemeKey);
+  if (base == null) {
+    log.error("No registered base theme found for theme key: '".concat(baseThemeKey, "'"));
+    base = themeRegistration.base.find(theme => theme.themeKey === DEFAULT_DARK_THEME_KEY);
+    assertNotNull(base, "Default base theme '".concat(DEFAULT_DARK_THEME_KEY, "' is not registered"));
+  }
+  log.debug('Applied themes:', base.themeKey, custom === null || custom === void 0 ? void 0 : custom.themeKey);
+  return custom == null ? [base] : [base, custom];
+}
+
+/**
+ * Get default base theme data.
+ */
+export function getDefaultBaseThemes() {
+  return [{
+    name: 'Default Dark',
+    themeKey: DEFAULT_DARK_THEME_KEY,
+    styleContent: darkTheme
+  }, {
+    name: 'Default Light',
+    themeKey: DEFAULT_LIGHT_THEME_KEY,
+    styleContent: lightTheme
+  }];
+}
+
+/**
+ * Get the preload data from local storage or null if it does not exist or is
+ * invalid
+ */
+export function getThemePreloadData() {
+  var data = localStorage.getItem(THEME_CACHE_LOCAL_STORAGE_KEY);
+  try {
+    return data == null ? null : JSON.parse(data);
+  } catch (_unused) {
+    // ignore
+  }
+  return null;
+}
+
+/**
+ * Store theme preload data in local storage.
+ * @param preloadData The preload data to set
+ */
+export function setThemePreloadData(preloadData) {
+  localStorage.setItem(THEME_CACHE_LOCAL_STORAGE_KEY, JSON.stringify(preloadData));
+}
+
+/**
+ * Derive unique theme key from plugin root path and theme name.
+ * @param pluginName The root path of the plugin
+ * @param themeName The name of the theme
+ */
+export function getThemeKey(pluginName, themeName) {
+  return "".concat(pluginName, "_").concat(themeName);
+}
+
+/**
+ * Preload minimal theme variables from the cache.
+ */
+export function preloadTheme() {
+  var _getThemePreloadData$, _getThemePreloadData;
+  var preloadStyleContent = (_getThemePreloadData$ = (_getThemePreloadData = getThemePreloadData()) === null || _getThemePreloadData === void 0 ? void 0 : _getThemePreloadData.preloadStyleContent) !== null && _getThemePreloadData$ !== void 0 ? _getThemePreloadData$ : calculatePreloadStyleContent();
+  log.debug('Preloading theme content:', "'".concat(preloadStyleContent, "'"));
+  var style = document.createElement('style');
+  style.innerHTML = preloadStyleContent;
+  document.head.appendChild(style);
+}
+//# sourceMappingURL=ThemeUtils.js.map

package/dist/theme/ThemeUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeUtils.js","names":["Log","assertNotNull","darkTheme","lightTheme","DEFAULT_DARK_THEME_KEY","DEFAULT_LIGHT_THEME_KEY","DEFAULT_PRELOAD_DATA_VARIABLES","THEME_CACHE_LOCAL_STORAGE_KEY","log","module","calculatePreloadStyleContent","bodyStyle","getComputedStyle","document","body","pairs","Object","entries","map","key","defaultValue","getPropertyValue","join","getActiveThemes","themeKey","themeRegistration","custom","find","theme","baseThemeKey","base","error","debug","getDefaultBaseThemes","name","styleContent","getThemePreloadData","data","localStorage","getItem","JSON","parse","setThemePreloadData","preloadData","setItem","stringify","getThemeKey","pluginName","themeName","preloadTheme","preloadStyleContent","style","createElement","innerHTML","head","appendChild"],"sources":["../../src/theme/ThemeUtils.ts"],"sourcesContent":["import Log from '@deephaven/log';\nimport { assertNotNull } from '@deephaven/utils';\nimport darkTheme from '../../scss/theme_default_dark.scss?inline';\nimport lightTheme from '../../scss/theme_default_light.scss?inline';\nimport {\n  DEFAULT_DARK_THEME_KEY,\n  DEFAULT_LIGHT_THEME_KEY,\n  DEFAULT_PRELOAD_DATA_VARIABLES,\n  ThemeData,\n  ThemePreloadData,\n  ThemePreloadStyleContent,\n  ThemeRegistrationData,\n  THEME_CACHE_LOCAL_STORAGE_KEY,\n} from './ThemeModel';\n\nconst log = Log.module('ThemeUtils');\n\n/**\n * Creates a string containing preload style content for the current theme.\n * This resolves the current values of a few CSS variables that can be used\n * to style the page before the theme is loaded on next page load.\n */\nexport function calculatePreloadStyleContent(): ThemePreloadStyleContent {\n  const bodyStyle = getComputedStyle(document.body);\n\n  // Calculate the current preload variables. If the variable is not set, use\n  // the default value.\n  const pairs = Object.entries(DEFAULT_PRELOAD_DATA_VARIABLES).map(\n    ([key, defaultValue]) =>\n      `${key}:${bodyStyle.getPropertyValue(key) || defaultValue}`\n  );\n\n  return `:root{${pairs.join(';')}}`;\n}\n\n/**\n * Returns an array of the active themes. The first item will always be one\n * of the base themes. Optionally, the second item will be a custom theme.\n */\nexport function getActiveThemes(\n  themeKey: string,\n  themeRegistration: ThemeRegistrationData\n): [ThemeData] | [ThemeData, ThemeData] {\n  const custom = themeRegistration.custom.find(\n    theme => theme.themeKey === themeKey\n  );\n\n  const baseThemeKey = custom?.baseThemeKey ?? themeKey;\n\n  let base = themeRegistration.base.find(\n    theme => theme.themeKey === baseThemeKey\n  );\n\n  if (base == null) {\n    log.error(\n      `No registered base theme found for theme key: '${baseThemeKey}'`\n    );\n    base = themeRegistration.base.find(\n      theme => theme.themeKey === DEFAULT_DARK_THEME_KEY\n    );\n\n    assertNotNull(\n      base,\n      `Default base theme '${DEFAULT_DARK_THEME_KEY}' is not registered`\n    );\n  }\n\n  log.debug('Applied themes:', base.themeKey, custom?.themeKey);\n\n  return custom == null ? [base] : [base, custom];\n}\n\n/**\n * Get default base theme data.\n */\nexport function getDefaultBaseThemes(): ThemeData[] {\n  return [\n    {\n      name: 'Default Dark',\n      themeKey: DEFAULT_DARK_THEME_KEY,\n      styleContent: darkTheme,\n    },\n    {\n      name: 'Default Light',\n      themeKey: DEFAULT_LIGHT_THEME_KEY,\n      styleContent: lightTheme,\n    },\n  ];\n}\n\n/**\n * Get the preload data from local storage or null if it does not exist or is\n * invalid\n */\nexport function getThemePreloadData(): ThemePreloadData | null {\n  const data = localStorage.getItem(THEME_CACHE_LOCAL_STORAGE_KEY);\n\n  try {\n    return data == null ? null : JSON.parse(data);\n  } catch {\n    // ignore\n  }\n\n  return null;\n}\n\n/**\n * Store theme preload data in local storage.\n * @param preloadData The preload data to set\n */\nexport function setThemePreloadData(preloadData: ThemePreloadData): void {\n  localStorage.setItem(\n    THEME_CACHE_LOCAL_STORAGE_KEY,\n    JSON.stringify(preloadData)\n  );\n}\n\n/**\n * Derive unique theme key from plugin root path and theme name.\n * @param pluginName The root path of the plugin\n * @param themeName The name of the theme\n */\nexport function getThemeKey(pluginName: string, themeName: string): string {\n  return `${pluginName}_${themeName}`;\n}\n\n/**\n * Preload minimal theme variables from the cache.\n */\nexport function preloadTheme(): void {\n  const preloadStyleContent =\n    getThemePreloadData()?.preloadStyleContent ??\n    calculatePreloadStyleContent();\n\n  log.debug('Preloading theme content:', `'${preloadStyleContent}'`);\n\n  const style = document.createElement('style');\n  style.innerHTML = preloadStyleContent;\n  document.head.appendChild(style);\n}\n"],"mappings":"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"}

package/dist/theme/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ThemeContext';
+export * from './ThemeModel';
+export * from './ThemeUtils';
+export * from './useInitializeThemeContextValue';
+export * from './useTheme';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,kCAAkC,CAAC;AACjD,cAAc,YAAY,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,6 @@
+export * from "./ThemeContext.js";
+export * from "./ThemeModel.js";
+export * from "./ThemeUtils.js";
+export * from "./useInitializeThemeContextValue.js";
+export * from "./useTheme.js";
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/theme/index.ts"],"sourcesContent":["export * from './ThemeContext';\nexport * from './ThemeModel';\nexport * from './ThemeUtils';\nexport * from './useInitializeThemeContextValue';\nexport * from './useTheme';\n"],"mappings":""}

package/dist/theme/useInitializeThemeContextValue.d.ts

@@ -0,0 +1,7 @@
+import { ThemeContextValue } from './ThemeContext';
+/**
+ * Initialize a `ThemeContextValue`.
+ */
+export declare function useInitializeThemeContextValue(): ThemeContextValue;
+export default useInitializeThemeContextValue;
+//# sourceMappingURL=useInitializeThemeContextValue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInitializeThemeContextValue.d.ts","sourceRoot":"","sources":["../../src/theme/useInitializeThemeContextValue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAWnD;;GAEG;AACH,wBAAgB,8BAA8B,IAAI,iBAAiB,CAsDlE;AAED,eAAe,8BAA8B,CAAC"}

package/dist/theme/useInitializeThemeContextValue.js

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Log from '@deephaven/log';
+import { DEFAULT_DARK_THEME_KEY } from "./ThemeModel.js";
+import { calculatePreloadStyleContent, getActiveThemes, getThemePreloadData, setThemePreloadData } from "./ThemeUtils.js";
+var log = Log.module('useInitializeThemeContextValue');
+
+/**
+ * Initialize a `ThemeContextValue`.
+ */
+export function useInitializeThemeContextValue() {
+  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;
+  });
+  var [themeRegistration, setThemeRegistration] = useState(null);
+  var activeThemes = useMemo(() => themeRegistration == null ? null : getActiveThemes(selectedThemeKey, themeRegistration), [selectedThemeKey, themeRegistration]);
+
+  /**
+   * Register the given custom themes with the cache and activate theming.
+   */
+  var registerThemes = useCallback(themeRegistrationData => {
+    log.debug('Registering themes', themeRegistrationData);
+    setThemeRegistration(themeRegistrationData);
+  }, []);
+
+  // Once themes are activated, cache the preload data for next time page is
+  // refreshed.
+  useEffect(() => {
+    if (activeThemes == null) {
+      return;
+    }
+    log.debug('Active themes:', activeThemes.map(theme => theme.themeKey));
+    setThemePreloadData({
+      themeKey: selectedThemeKey,
+      preloadStyleContent: calculatePreloadStyleContent()
+    });
+  }, [activeThemes, selectedThemeKey, themeRegistration]);
+  return useMemo(() => ({
+    activeThemes,
+    selectedThemeKey,
+    registerThemes,
+    setSelectedThemeKey
+  }), [activeThemes, registerThemes, selectedThemeKey]);
+}
+export default useInitializeThemeContextValue;
+//# sourceMappingURL=useInitializeThemeContextValue.js.map

package/dist/theme/useInitializeThemeContextValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInitializeThemeContextValue.js","names":["useCallback","useEffect","useMemo","useState","Log","DEFAULT_DARK_THEME_KEY","calculatePreloadStyleContent","getActiveThemes","getThemePreloadData","setThemePreloadData","log","module","useInitializeThemeContextValue","selectedThemeKey","setSelectedThemeKey","themeKey","themeRegistration","setThemeRegistration","activeThemes","registerThemes","themeRegistrationData","debug","map","theme","preloadStyleContent"],"sources":["../../src/theme/useInitializeThemeContextValue.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport Log from '@deephaven/log';\nimport { ThemeContextValue } from './ThemeContext';\nimport { DEFAULT_DARK_THEME_KEY, ThemeRegistrationData } from './ThemeModel';\nimport {\n  calculatePreloadStyleContent,\n  getActiveThemes,\n  getThemePreloadData,\n  setThemePreloadData,\n} from './ThemeUtils';\n\nconst log = Log.module('useInitializeThemeContextValue');\n\n/**\n * Initialize a `ThemeContextValue`.\n */\nexport function useInitializeThemeContextValue(): ThemeContextValue {\n  const [selectedThemeKey, setSelectedThemeKey] = useState<string>(\n    () => getThemePreloadData()?.themeKey ?? DEFAULT_DARK_THEME_KEY\n  );\n\n  const [themeRegistration, setThemeRegistration] =\n    useState<ThemeRegistrationData | null>(null);\n\n  const activeThemes = useMemo(\n    () =>\n      themeRegistration == null\n        ? null\n        : getActiveThemes(selectedThemeKey, themeRegistration),\n    [selectedThemeKey, themeRegistration]\n  );\n\n  /**\n   * Register the given custom themes with the cache and activate theming.\n   */\n  const registerThemes = useCallback(\n    (themeRegistrationData: ThemeRegistrationData) => {\n      log.debug('Registering themes', themeRegistrationData);\n      setThemeRegistration(themeRegistrationData);\n    },\n    []\n  );\n\n  // Once themes are activated, cache the preload data for next time page is\n  // refreshed.\n  useEffect(() => {\n    if (activeThemes == null) {\n      return;\n    }\n\n    log.debug(\n      'Active themes:',\n      activeThemes.map(theme => theme.themeKey)\n    );\n\n    setThemePreloadData({\n      themeKey: selectedThemeKey,\n      preloadStyleContent: calculatePreloadStyleContent(),\n    });\n  }, [activeThemes, selectedThemeKey, themeRegistration]);\n\n  return useMemo(\n    () => ({\n      activeThemes,\n      selectedThemeKey,\n      registerThemes,\n      setSelectedThemeKey,\n    }),\n    [activeThemes, registerThemes, selectedThemeKey]\n  );\n}\n\nexport default useInitializeThemeContextValue;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACjE,OAAOC,GAAG,MAAM,gBAAgB;AAAC,SAExBC,sBAAsB;AAAA,SAE7BC,4BAA4B,EAC5BC,eAAe,EACfC,mBAAmB,EACnBC,mBAAmB;AAGrB,IAAMC,GAAG,GAAGN,GAAG,CAACO,MAAM,CAAC,gCAAgC,CAAC;;AAExD;AACA;AACA;AACA,OAAO,SAASC,8BAA8B,GAAsB;EAClE,IAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGX,QAAQ,CACtD;IAAA;IAAA,wDAAMK,mBAAmB,EAAE,yDAArB,qBAAuBO,QAAQ,yEAAIV,sBAAsB;EAAA,EAChE;EAED,IAAM,CAACW,iBAAiB,EAAEC,oBAAoB,CAAC,GAC7Cd,QAAQ,CAA+B,IAAI,CAAC;EAE9C,IAAMe,YAAY,GAAGhB,OAAO,CAC1B,MACEc,iBAAiB,IAAI,IAAI,GACrB,IAAI,GACJT,eAAe,CAACM,gBAAgB,EAAEG,iBAAiB,CAAC,EAC1D,CAACH,gBAAgB,EAAEG,iBAAiB,CAAC,CACtC;;EAED;AACF;AACA;EACE,IAAMG,cAAc,GAAGnB,WAAW,CAC/BoB,qBAA4C,IAAK;IAChDV,GAAG,CAACW,KAAK,CAAC,oBAAoB,EAAED,qBAAqB,CAAC;IACtDH,oBAAoB,CAACG,qBAAqB,CAAC;EAC7C,CAAC,EACD,EAAE,CACH;;EAED;EACA;EACAnB,SAAS,CAAC,MAAM;IACd,IAAIiB,YAAY,IAAI,IAAI,EAAE;MACxB;IACF;IAEAR,GAAG,CAACW,KAAK,CACP,gBAAgB,EAChBH,YAAY,CAACI,GAAG,CAACC,KAAK,IAAIA,KAAK,CAACR,QAAQ,CAAC,CAC1C;IAEDN,mBAAmB,CAAC;MAClBM,QAAQ,EAAEF,gBAAgB;MAC1BW,mBAAmB,EAAElB,4BAA4B;IACnD,CAAC,CAAC;EACJ,CAAC,EAAE,CAACY,YAAY,EAAEL,gBAAgB,EAAEG,iBAAiB,CAAC,CAAC;EAEvD,OAAOd,OAAO,CACZ,OAAO;IACLgB,YAAY;IACZL,gBAAgB;IAChBM,cAAc;IACdL;EACF,CAAC,CAAC,EACF,CAACI,YAAY,EAAEC,cAAc,EAAEN,gBAAgB,CAAC,CACjD;AACH;AAEA,eAAeD,8BAA8B"}

package/dist/theme/useTheme.d.ts

@@ -0,0 +1,7 @@
+import { ThemeContextValue } from './ThemeContext';
+/**
+ * Hook to get the current `ThemeContextValue`.
+ */
+export declare function useTheme(): ThemeContextValue;
+export default useTheme;
+//# sourceMappingURL=useTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/theme/useTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE;;GAEG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAK5C;AAED,eAAe,QAAQ,CAAC"}

package/dist/theme/useTheme.js

@@ -0,0 +1,10 @@
+import { useContextOrThrow } from '@deephaven/react-hooks';
+import { ThemeContext } from "./ThemeContext.js";
+/**
+ * Hook to get the current `ThemeContextValue`.
+ */
+export function useTheme() {
+  return useContextOrThrow(ThemeContext, 'No ThemeContext value found. Component must be wrapped in a ThemeContext.Provider');
+}
+export default useTheme;
+//# sourceMappingURL=useTheme.js.map

package/dist/theme/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","names":["useContextOrThrow","ThemeContext","useTheme"],"sources":["../../src/theme/useTheme.ts"],"sourcesContent":["import { useContextOrThrow } from '@deephaven/react-hooks';\nimport { ThemeContext, ThemeContextValue } from './ThemeContext';\n\n/**\n * Hook to get the current `ThemeContextValue`.\n */\nexport function useTheme(): ThemeContextValue {\n  return useContextOrThrow(\n    ThemeContext,\n    'No ThemeContext value found. Component must be wrapped in a ThemeContext.Provider'\n  );\n}\n\nexport default useTheme;\n"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,wBAAwB;AAAC,SAClDC,YAAY;AAErB;AACA;AACA;AACA,OAAO,SAASC,QAAQ,GAAsB;EAC5C,OAAOF,iBAAiB,CACtBC,YAAY,EACZ,mFAAmF,CACpF;AACH;AAEA,eAAeC,QAAQ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deephaven/components",
-  "version": "0.49.1",
+  "version": "0.49.2-theme-plugins.29+dec7d960",
   "description": "Deephaven React component library",
   "author": "Deephaven Data Labs LLC",
   "license": "Apache-2.0",
@@ -24,10 +24,10 @@
   },
   "dependencies": {
     "@adobe/react-spectrum": "^3.29.0",
-    "@deephaven/icons": "^0.49.0",
-    "@deephaven/log": "^0.49.0",
-    "@deephaven/react-hooks": "^0.49.0",
-    "@deephaven/utils": "^0.49.0",
+    "@deephaven/icons": "^0.49.2-theme-plugins.29+dec7d960",
+    "@deephaven/log": "^0.49.2-theme-plugins.29+dec7d960",
+    "@deephaven/react-hooks": "^0.49.2-theme-plugins.29+dec7d960",
+    "@deephaven/utils": "^0.49.2-theme-plugins.29+dec7d960",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-spectrum/theme-default": "^3.5.1",
@@ -51,7 +51,7 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
-    "@deephaven/mocks": "^0.49.0"
+    "@deephaven/mocks": "^0.49.2-theme-plugins.29+dec7d960"
   },
   "files": [
     "dist",
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d14b58ca26fc5bdae33c60673aba4732262cc1f3"
+  "gitHead": "dec7d960df0ebffe5b4da380c0aa68f692df0514"
 }

package/scss/BaseStyleSheet.scss

@@ -20,7 +20,7 @@ html {
 
 body {
   min-height: 100%;
-  background-color: $background;
+  background-color: var(--dh-background-color);
   color: $foreground;
   margin: 0;
   padding: 0;
@@ -30,7 +30,7 @@ body {
 }
 
 #root {
-  background-color: $background;
+  background-color: var(--dh-background-color);
 
   .app {
     height: 100vh;
@@ -174,7 +174,8 @@ span.btn-disabled-wrapper {
 
 .btn-spinner {
   padding: $btn-padding-y 1rem;
-  .fa-layers {
+  .fa-layers,
+  .loading-spinner {
     margin-right: 0.5rem;
   }
 }
@@ -255,7 +256,9 @@ span.btn-disabled-wrapper {
     border-radius: 2px;
     margin-bottom: 2px;
     filter: saturate(0%);
-    transition: filter 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    transition:
+      filter 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
     pointer-events: none;
   }
 
@@ -712,7 +715,8 @@ input[type='number']::-webkit-inner-spin-button {
 
     .monaco-checkbox:focus {
       border: none !important;
-      box-shadow: $input-btn-focus-box-shadow,
+      box-shadow:
+        $input-btn-focus-box-shadow,
         0 0 0 1px $input-focus-border-color; //can't use regular border due to position of checkbox
     }
   }
@@ -746,7 +750,9 @@ input[type='number']::-webkit-inner-spin-button {
       linear-gradient(0deg, $input-bg, $input-bg);
     background-size: $custom-select-bg-size, cover;
     background-repeat: no-repeat;
-    background-position: bottom 50% right $custom-select-padding-x, center;
+    background-position:
+      bottom 50% right $custom-select-padding-x,
+      center;
     //make the dotted duplicate focus line on firefox go away
     &:-moz-focusring {
       color: rgba(0, 0, 0, 0%);
@@ -835,11 +841,18 @@ input[type='number']::-webkit-inner-spin-button {
 /// used by marching ants animation
 @keyframes march {
   from {
-    background-position: 0 top, 0 bottom, left 0, right 0;
+    background-position:
+      0 top,
+      0 bottom,
+      left 0,
+      right 0;
   }
 
   to {
-    background-position: $ant-size top, $ant-size bottom, left $ant-size,
+    background-position:
+      $ant-size top,
+      $ant-size bottom,
+      left $ant-size,
       right $ant-size;
   }
 }

package/scss/bootstrap_overrides.scss

@@ -95,8 +95,15 @@ $theme-color-interval: 9%;
 $yiq-contrasted-threshold: 180;
 
 // Override fonts
-$font-family-sans-serif: 'Fira Sans', -apple-system, blinkmacsystemfont,
-  'Segoe UI', 'Roboto', 'Helvetica Neue', arial, sans-serif; //fira sans then native system ui fallbacks
+$font-family-sans-serif:
+  'Fira Sans',
+  -apple-system,
+  blinkmacsystemfont,
+  'Segoe UI',
+  'Roboto',
+  'Helvetica Neue',
+  arial,
+  sans-serif; //fira sans then native system ui fallbacks
 $font-family-monospace: 'Fira Mono', menlo, monaco, consolas, 'Liberation Mono',
   'Courier New', monospace;
 $font-family-base: $font-family-sans-serif;
@@ -126,8 +133,11 @@ $box-shadow-900: 0 0.1rem 1rem rgba(0, 0, 0, 45%); //darkest shadow for $black p
 //Override Btn
 $btn-border-radius: 4rem;
 $btn-padding-x: 1.5rem;
-$btn-transition: color 0.12s ease-in-out, background-color 0.12s ease-in-out,
-  border-color 0.12s ease-in-out, box-shadow 0.12s ease-in-out; //default 0.15 is too long
+$btn-transition:
+  color 0.12s ease-in-out,
+  background-color 0.12s ease-in-out,
+  border-color 0.12s ease-in-out,
+  box-shadow 0.12s ease-in-out; //default 0.15 is too long
 $btn-border-width: 2px;
 
 //Override Inputs

package/scss/new_variables.scss

@@ -20,9 +20,16 @@ $ant-thickness: 1px;
     linear-gradient(to right, $color-2 50%, $color-1 50%),
     linear-gradient(to bottom, $color-2 50%, $color-1 50%),
     linear-gradient(to bottom, $color-2 50%, $color-1 50%);
-  background-size: $ant-size $ant-thickness, $ant-size $ant-thickness,
-    $ant-thickness $ant-size, $ant-thickness $ant-size;
-  background-position: 0 top, 0 bottom, left 0, right 0;
+  background-size:
+    $ant-size $ant-thickness,
+    $ant-size $ant-thickness,
+    $ant-thickness $ant-size,
+    $ant-thickness $ant-size;
+  background-position:
+    0 top,
+    0 bottom,
+    left 0,
+    right 0;
   background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
   animation: march 0.5s;
   animation-timing-function: linear;

package/scss/theme_default_dark.scss

@@ -0,0 +1,54 @@
+:root {
+  /* Grays */
+  --dh-color-gray-900: #fcfcfa;
+  --dh-color-gray-800: #f0f0ee;
+  --dh-color-gray-700: #c0bfbf;
+  --dh-color-gray-600: #929192;
+  --dh-color-gray-500: #5b5a5c;
+  --dh-color-gray-400: #403e41;
+  --dh-color-gray-300: #373438;
+  --dh-color-gray-200: #322f33;
+  --dh-color-gray-100: #2d2a2e;
+  --dh-color-gray-75: #211f22;
+  --dh-color-gray-50: #1a171a;
+
+  /* Blues */
+  --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;
+
+  /* Seafoam */
+  --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;
+
+  /* Semantic */
+  --dh-color-black: var(--dh-color-gray-50);
+  --dh-color-white: var(--dh-color-gray-800);
+  --dh-accent-color: var(--dh-color-blue-700);
+  --dh-background-color: var(--dh-color-black);
+  --dh-foreground-color: var(--dh-color-white);
+  --dh-grid-background-color: var(--dh-background-color);
+}

package/scss/theme_default_light.scss

@@ -0,0 +1,54 @@
+:root {
+  /* Grays */
+  --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;
+
+  /* Blues */
+  --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;
+
+  /* Seafoam */
+  --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;
+
+  /* Semantic */
+  --dh-color-black: var(--dh-color-gray-50);
+  --dh-color-white: var(--dh-color-gray-75);
+  --dh-accent-color: var(--dh-color-blue-700);
+  --dh-background-color: var(--dh-color-white);
+  --dh-foreground-color: var(--dh-color-black);
+  --dh-grid-background-color: var(--dh-background-color);
+}