Moved styleguide color utils

#1634
deephaven · Nov 30, 2023 · 5e7846b · 5e7846b
1 parent 13663d9
commit 5e7846b
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 101 deletions.
diff --git a/packages/code-studio/src/styleguide/ThemeColors.tsx b/packages/code-studio/src/styleguide/ThemeColors.tsx
@@ -16,106 +16,13 @@ import {
  INVALID_COLOR_BORDER_STYLE,
 } from './colorUtils';
 
-// Group names are extracted from var names via a regex capture group. Most of
-// them work pretty well, but some need to be remapped to a more appropriate
-// group.
-const reassignVarGroups: Record<string, string> = {
- '--dh-color-black': 'gray',
- '--dh-color-white': 'gray',
- // Semantic
- '--dh-color-visual-positive': 'Visual Status',
- '--dh-color-visual-negative': 'Visual Status',
- '--dh-color-visual-notice': 'Visual Status',
- '--dh-color-visual-info': 'Visual Status',
- // Editor
- '--dh-color-editor-bg': 'editor',
- '--dh-color-editor-fg': 'editor',
- '--dh-color-editor-context-menu-bg': 'menus',
- '--dh-color-editor-context-menu-fg': 'menus',
- '--dh-color-editor-menu-selection-bg': 'menus',
- // Grid
- '--dh-color-grid-bg': 'grid',
- '--dh-color-grid-number-positive': 'Data Types',
- '--dh-color-grid-number-negative': 'Data Types',
- '--dh-color-grid-number-zero': 'Data Types',
- '--dh-color-grid-date': 'Data Types',
- '--dh-color-grid-string-null': 'Data Types',
-};
-
-// Mappings of variable groups to rename
-const renameGroups = {
- palette: {
- black: 'gray',
- white: 'gray',
- },
- editor: {
- line: 'editor',
- comment: 'code',
- string: 'code',
- number: 'code',
- delimiter: 'code',
- identifier: 'code',
- keyword: 'code',
- operator: 'code',
- storage: 'code',
- predefined: 'code',
- selection: 'state',
- focus: 'state',
- },
- chart: {
- axis: 'Chart',
- bg: 'Chart',
- grid: 'Chart',
- plot: 'Chart',
- title: 'Chart',
- active: 'Data',
- trend: 'Data',
- area: 'Data',
- range: 'Data',
- line: 'Deprecated',
- },
- grid: { data: 'Data Bars', context: 'Context Menu' },
- semantic: {
- positive: 'status',
- negative: 'status',
- notice: 'status',
- info: 'status',
- well: 'wells',
- },
-};
-
 const swatchDataGroups = {
- 'Theme Color Palette': buildColorGroups(
- palette,
- 1,
- reassignVarGroups,
- renameGroups.palette
- ),
- 'Semantic Colors': buildColorGroups(
- semantic,
- 1,
- reassignVarGroups,
- renameGroups.semantic
- ),
- 'Chart Colors': buildColorGroups(
- chart,
- 2,
- reassignVarGroups,
- renameGroups.chart
- ),
- 'Editor Colors': buildColorGroups(
- semanticEditor,
- 2,
- reassignVarGroups,
- renameGroups.editor
- ),
- 'Grid Colors': buildColorGroups(
- semanticGrid,
- 2,
- reassignVarGroups,
- renameGroups.grid
- ),
- 'Component Colors': buildColorGroups(components, 1, reassignVarGroups),
+ 'Theme Color Palette': buildColorGroups('palette', palette, 1),
+ 'Semantic Colors': buildColorGroups('semantic', semantic, 1),
+ 'Chart Colors': buildColorGroups('chart', chart, 2),
+ 'Editor Colors': buildColorGroups('editor', semanticEditor, 2),
+ 'Grid Colors': buildColorGroups('grid', semanticGrid, 2),
+ 'Component Colors': buildColorGroups('component', components, 1),
 };
 
 export function ThemeColors(): JSX.Element {

diff --git a/packages/code-studio/src/styleguide/colorUtils.ts b/packages/code-studio/src/styleguide/colorUtils.ts
@@ -3,6 +3,75 @@ import { ColorUtils } from '@deephaven/utils';
 export const INVALID_COLOR_BORDER_STYLE =
  '2px solid var(--dh-color-notice-default-bg)';
 
+// Group names are extracted from var names via a regex capture group. Most of
+// them work pretty well, but some need to be remapped to a more appropriate
+// group.
+const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
+ '--dh-color-black': 'gray',
+ '--dh-color-white': 'gray',
+ // Semantic
+ '--dh-color-visual-positive': 'Visual Status',
+ '--dh-color-visual-negative': 'Visual Status',
+ '--dh-color-visual-notice': 'Visual Status',
+ '--dh-color-visual-info': 'Visual Status',
+ // Editor
+ '--dh-color-editor-bg': 'editor',
+ '--dh-color-editor-fg': 'editor',
+ '--dh-color-editor-context-menu-bg': 'menus',
+ '--dh-color-editor-context-menu-fg': 'menus',
+ '--dh-color-editor-menu-selection-bg': 'menus',
+ // Grid
+ '--dh-color-grid-bg': 'grid',
+ '--dh-color-grid-number-positive': 'Data Types',
+ '--dh-color-grid-number-negative': 'Data Types',
+ '--dh-color-grid-number-zero': 'Data Types',
+ '--dh-color-grid-date': 'Data Types',
+ '--dh-color-grid-string-null': 'Data Types',
+} as const;
+
+// Mappings of variable groups to rename
+const RENAME_VARIABLE_GROUPS = {
+ palette: {
+ black: 'gray',
+ white: 'gray',
+ },
+ editor: {
+ line: 'editor',
+ comment: 'code',
+ string: 'code',
+ number: 'code',
+ delimiter: 'code',
+ identifier: 'code',
+ keyword: 'code',
+ operator: 'code',
+ storage: 'code',
+ predefined: 'code',
+ selection: 'state',
+ focus: 'state',
+ },
+ chart: {
+ axis: 'Chart',
+ bg: 'Chart',
+ grid: 'Chart',
+ plot: 'Chart',
+ title: 'Chart',
+ active: 'Data',
+ trend: 'Data',
+ area: 'Data',
+ range: 'Data',
+ line: 'Deprecated',
+ },
+ grid: { data: 'Data Bars', context: 'Context Menu' },
+ semantic: {
+ positive: 'status',
+ negative: 'status',
+ notice: 'status',
+ info: 'status',
+ well: 'wells',
+ },
+ component: {},
+} satisfies Record<string, Record<string, string>>;
+
 /** Return black or white contrast color */
 export function contrastColor(color: string): 'black' | 'white' {
  const rgba = ColorUtils.parseRgba(ColorUtils.asRgbOrRgbaString(color) ?? '');
@@ -57,11 +126,12 @@ export function extractColorVars(
 
 /** Group color data based on capture group value */
 export function buildColorGroups(
+ groupKey: keyof typeof RENAME_VARIABLE_GROUPS,
  styleText: string,
  captureGroupI: number,
- reassignVarGroups: Record<string, string> = {},
- groupRemap: Record<string, string> = {}
+ reassignVarGroups: Record<string, string> = REASSIGN_VARIABLE_GROUPS
 ): Record<string, { name: string; value: string }[]> {
+ const groupRemap: Record<string, string> = RENAME_VARIABLE_GROUPS[groupKey];
  const swatchData = extractColorVars(styleText);
 
  const groupData = swatchData.reduce(