From 0302957c756ff7988e01a9ea70ef38c801fddc52 Mon Sep 17 00:00:00 2001 From: Brian Ingles Date: Tue, 10 Oct 2023 14:03:33 -0500 Subject: [PATCH] Re-organized base themes #1542 --- packages/components/src/theme/ThemeUtils.test.ts | 2 +- packages/components/src/theme/ThemeUtils.ts | 9 ++++----- .../theme/__snapshots__/ThemeProvider.test.tsx.snap | 3 +++ packages/components/src/theme/theme-dark/index.ts | 11 +++++++++++ .../theme-dark-palette.css} | 0 .../src/theme/theme-dark/theme-dark-semantic-grid.css | 3 +++ .../theme-dark-semantic.css} | 1 - packages/components/src/theme/theme-light/index.ts | 5 +++++ .../theme-light-palette.css} | 0 9 files changed, 27 insertions(+), 7 deletions(-) create mode 100644 packages/components/src/theme/theme-dark/index.ts rename packages/components/src/theme/{theme_default_dark_palette.css => theme-dark/theme-dark-palette.css} (100%) create mode 100644 packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css rename packages/components/src/theme/{theme_default_dark_semantic.css => theme-dark/theme-dark-semantic.css} (98%) create mode 100644 packages/components/src/theme/theme-light/index.ts rename packages/components/src/theme/{theme_default_light.css => theme-light/theme-light-palette.css} (100%) diff --git a/packages/components/src/theme/ThemeUtils.test.ts b/packages/components/src/theme/ThemeUtils.test.ts index ba44b1741b..89a143778b 100644 --- a/packages/components/src/theme/ThemeUtils.test.ts +++ b/packages/components/src/theme/ThemeUtils.test.ts @@ -191,7 +191,7 @@ describe('getDefaultBaseThemes', () => { { name: 'Default Dark', themeKey: 'default-dark', - styleContent: 'test-file-stub\ntest-file-stub', + styleContent: 'test-file-stub\ntest-file-stub\ntest-file-stub', }, { name: 'Default Light', diff --git a/packages/components/src/theme/ThemeUtils.ts b/packages/components/src/theme/ThemeUtils.ts index bb23f130df..f1bb6fd6b2 100644 --- a/packages/components/src/theme/ThemeUtils.ts +++ b/packages/components/src/theme/ThemeUtils.ts @@ -12,9 +12,8 @@ import { assertNotNull, ColorUtils } from '@deephaven/utils'; // }, // ], // }, -import darkThemePalette from './theme_default_dark_palette.css?inline'; -import darkThemeSemantic from './theme_default_dark_semantic.css?inline'; -import lightTheme from './theme_default_light.css?inline'; +import { themeDark } from './theme-dark'; +import { themeLight } from './theme-light'; import { DEFAULT_DARK_THEME_KEY, DEFAULT_LIGHT_THEME_KEY, @@ -117,12 +116,12 @@ export function getDefaultBaseThemes(): ThemeData[] { { name: 'Default Dark', themeKey: DEFAULT_DARK_THEME_KEY, - styleContent: [darkThemePalette, darkThemeSemantic].join('\n'), + styleContent: themeDark, }, { name: 'Default Light', themeKey: DEFAULT_LIGHT_THEME_KEY, - styleContent: lightTheme, + styleContent: themeLight, }, ]; } diff --git a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap index 4bc0492915..2bc0a73b41 100644 --- a/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap +++ b/packages/components/src/theme/__snapshots__/ThemeProvider.test.tsx.snap @@ -22,6 +22,7 @@ exports[`ThemeProvider setSelectedThemeKey: [ [Object] ] should change selected data-theme-key="default-dark" > test-file-stub +test-file-stub test-file-stub
diff --git a/packages/components/src/theme/theme-dark/index.ts b/packages/components/src/theme/theme-dark/index.ts new file mode 100644 index 0000000000..7690a8d792 --- /dev/null +++ b/packages/components/src/theme/theme-dark/index.ts @@ -0,0 +1,11 @@ +import themeDarkPalette from './theme-dark-palette.css?inline'; +import themeDarkSemantic from './theme-dark-semantic.css?inline'; +import themeDarkSemanticGrid from './theme-dark-semantic-grid.css?inline'; + +export const themeDark = [ + themeDarkPalette, + themeDarkSemantic, + themeDarkSemanticGrid, +].join('\n'); + +export default themeDark; diff --git a/packages/components/src/theme/theme_default_dark_palette.css b/packages/components/src/theme/theme-dark/theme-dark-palette.css similarity index 100% rename from packages/components/src/theme/theme_default_dark_palette.css rename to packages/components/src/theme/theme-dark/theme-dark-palette.css diff --git a/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css b/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css new file mode 100644 index 0000000000..20cdf034de --- /dev/null +++ b/packages/components/src/theme/theme-dark/theme-dark-semantic-grid.css @@ -0,0 +1,3 @@ +:root { + --dh-color-grid-background: var(--dh-color-background); +} diff --git a/packages/components/src/theme/theme_default_dark_semantic.css b/packages/components/src/theme/theme-dark/theme-dark-semantic.css similarity index 98% rename from packages/components/src/theme/theme_default_dark_semantic.css rename to packages/components/src/theme/theme-dark/theme-dark-semantic.css index 92084f746e..34bea973d8 100644 --- a/packages/components/src/theme/theme_default_dark_semantic.css +++ b/packages/components/src/theme/theme-dark/theme-dark-semantic.css @@ -5,7 +5,6 @@ --dh-color-border: var(--dh-color-gray-500); --dh-color-background: var(--dh-color-black); --dh-color-foreground: var(--dh-color-white); - --dh-color-grid-background: var(--dh-color-background); --dh-color-content-background: var(--dh-color-gray-100); /* Text */ diff --git a/packages/components/src/theme/theme-light/index.ts b/packages/components/src/theme/theme-light/index.ts new file mode 100644 index 0000000000..b6c7d42258 --- /dev/null +++ b/packages/components/src/theme/theme-light/index.ts @@ -0,0 +1,5 @@ +import themeLightPalette from './theme-light-palette.css?inline'; + +export const themeLight = themeLightPalette; + +export default themeLight; diff --git a/packages/components/src/theme/theme_default_light.css b/packages/components/src/theme/theme-light/theme-light-palette.css similarity index 100% rename from packages/components/src/theme/theme_default_light.css rename to packages/components/src/theme/theme-light/theme-light-palette.css