Skip to content

Commit 5e7846b

Browse files
bminglesbmingles
committed
Moved styleguide color utils
#1634
1 parent 13663d9 commit 5e7846b

2 files changed

Lines changed: 78 additions & 101 deletions

File tree

‎packages/code-studio/src/styleguide/ThemeColors.tsx‎

Lines changed: 6 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -16,106 +16,13 @@ import {
1616
INVALID_COLOR_BORDER_STYLE,
1717
} from './colorUtils';
1818

19-
// Group names are extracted from var names via a regex capture group. Most of
20-
// them work pretty well, but some need to be remapped to a more appropriate
21-
// group.
22-
const reassignVarGroups: Record<string, string> = {
23-
'--dh-color-black': 'gray',
24-
'--dh-color-white': 'gray',
25-
// Semantic
26-
'--dh-color-visual-positive': 'Visual Status',
27-
'--dh-color-visual-negative': 'Visual Status',
28-
'--dh-color-visual-notice': 'Visual Status',
29-
'--dh-color-visual-info': 'Visual Status',
30-
// Editor
31-
'--dh-color-editor-bg': 'editor',
32-
'--dh-color-editor-fg': 'editor',
33-
'--dh-color-editor-context-menu-bg': 'menus',
34-
'--dh-color-editor-context-menu-fg': 'menus',
35-
'--dh-color-editor-menu-selection-bg': 'menus',
36-
// Grid
37-
'--dh-color-grid-bg': 'grid',
38-
'--dh-color-grid-number-positive': 'Data Types',
39-
'--dh-color-grid-number-negative': 'Data Types',
40-
'--dh-color-grid-number-zero': 'Data Types',
41-
'--dh-color-grid-date': 'Data Types',
42-
'--dh-color-grid-string-null': 'Data Types',
43-
};
44-
45-
// Mappings of variable groups to rename
46-
const renameGroups = {
47-
palette: {
48-
black: 'gray',
49-
white: 'gray',
50-
},
51-
editor: {
52-
line: 'editor',
53-
comment: 'code',
54-
string: 'code',
55-
number: 'code',
56-
delimiter: 'code',
57-
identifier: 'code',
58-
keyword: 'code',
59-
operator: 'code',
60-
storage: 'code',
61-
predefined: 'code',
62-
selection: 'state',
63-
focus: 'state',
64-
},
65-
chart: {
66-
axis: 'Chart',
67-
bg: 'Chart',
68-
grid: 'Chart',
69-
plot: 'Chart',
70-
title: 'Chart',
71-
active: 'Data',
72-
trend: 'Data',
73-
area: 'Data',
74-
range: 'Data',
75-
line: 'Deprecated',
76-
},
77-
grid: { data: 'Data Bars', context: 'Context Menu' },
78-
semantic: {
79-
positive: 'status',
80-
negative: 'status',
81-
notice: 'status',
82-
info: 'status',
83-
well: 'wells',
84-
},
85-
};
86-
8719
const swatchDataGroups = {
88-
'Theme Color Palette': buildColorGroups(
89-
palette,
90-
1,
91-
reassignVarGroups,
92-
renameGroups.palette
93-
),
94-
'Semantic Colors': buildColorGroups(
95-
semantic,
96-
1,
97-
reassignVarGroups,
98-
renameGroups.semantic
99-
),
100-
'Chart Colors': buildColorGroups(
101-
chart,
102-
2,
103-
reassignVarGroups,
104-
renameGroups.chart
105-
),
106-
'Editor Colors': buildColorGroups(
107-
semanticEditor,
108-
2,
109-
reassignVarGroups,
110-
renameGroups.editor
111-
),
112-
'Grid Colors': buildColorGroups(
113-
semanticGrid,
114-
2,
115-
reassignVarGroups,
116-
renameGroups.grid
117-
),
118-
'Component Colors': buildColorGroups(components, 1, reassignVarGroups),
20+
'Theme Color Palette': buildColorGroups('palette', palette, 1),
21+
'Semantic Colors': buildColorGroups('semantic', semantic, 1),
22+
'Chart Colors': buildColorGroups('chart', chart, 2),
23+
'Editor Colors': buildColorGroups('editor', semanticEditor, 2),
24+
'Grid Colors': buildColorGroups('grid', semanticGrid, 2),
25+
'Component Colors': buildColorGroups('component', components, 1),
11926
};
12027

12128
export function ThemeColors(): JSX.Element {

‎packages/code-studio/src/styleguide/colorUtils.ts‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,75 @@ import { ColorUtils } from '@deephaven/utils';
33
export const INVALID_COLOR_BORDER_STYLE =
44
'2px solid var(--dh-color-notice-default-bg)';
55

6+
// Group names are extracted from var names via a regex capture group. Most of
7+
// them work pretty well, but some need to be remapped to a more appropriate
8+
// group.
9+
const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
10+
'--dh-color-black': 'gray',
11+
'--dh-color-white': 'gray',
12+
// Semantic
13+
'--dh-color-visual-positive': 'Visual Status',
14+
'--dh-color-visual-negative': 'Visual Status',
15+
'--dh-color-visual-notice': 'Visual Status',
16+
'--dh-color-visual-info': 'Visual Status',
17+
// Editor
18+
'--dh-color-editor-bg': 'editor',
19+
'--dh-color-editor-fg': 'editor',
20+
'--dh-color-editor-context-menu-bg': 'menus',
21+
'--dh-color-editor-context-menu-fg': 'menus',
22+
'--dh-color-editor-menu-selection-bg': 'menus',
23+
// Grid
24+
'--dh-color-grid-bg': 'grid',
25+
'--dh-color-grid-number-positive': 'Data Types',
26+
'--dh-color-grid-number-negative': 'Data Types',
27+
'--dh-color-grid-number-zero': 'Data Types',
28+
'--dh-color-grid-date': 'Data Types',
29+
'--dh-color-grid-string-null': 'Data Types',
30+
} as const;
31+
32+
// Mappings of variable groups to rename
33+
const RENAME_VARIABLE_GROUPS = {
34+
palette: {
35+
black: 'gray',
36+
white: 'gray',
37+
},
38+
editor: {
39+
line: 'editor',
40+
comment: 'code',
41+
string: 'code',
42+
number: 'code',
43+
delimiter: 'code',
44+
identifier: 'code',
45+
keyword: 'code',
46+
operator: 'code',
47+
storage: 'code',
48+
predefined: 'code',
49+
selection: 'state',
50+
focus: 'state',
51+
},
52+
chart: {
53+
axis: 'Chart',
54+
bg: 'Chart',
55+
grid: 'Chart',
56+
plot: 'Chart',
57+
title: 'Chart',
58+
active: 'Data',
59+
trend: 'Data',
60+
area: 'Data',
61+
range: 'Data',
62+
line: 'Deprecated',
63+
},
64+
grid: { data: 'Data Bars', context: 'Context Menu' },
65+
semantic: {
66+
positive: 'status',
67+
negative: 'status',
68+
notice: 'status',
69+
info: 'status',
70+
well: 'wells',
71+
},
72+
component: {},
73+
} satisfies Record<string, Record<string, string>>;
74+
675
/** Return black or white contrast color */
776
export function contrastColor(color: string): 'black' | 'white' {
877
const rgba = ColorUtils.parseRgba(ColorUtils.asRgbOrRgbaString(color) ?? '');
@@ -57,11 +126,12 @@ export function extractColorVars(
57126

58127
/** Group color data based on capture group value */
59128
export function buildColorGroups(
129+
groupKey: keyof typeof RENAME_VARIABLE_GROUPS,
60130
styleText: string,
61131
captureGroupI: number,
62-
reassignVarGroups: Record<string, string> = {},
63-
groupRemap: Record<string, string> = {}
132+
reassignVarGroups: Record<string, string> = REASSIGN_VARIABLE_GROUPS
64133
): Record<string, { name: string; value: string }[]> {
134+
const groupRemap: Record<string, string> = RENAME_VARIABLE_GROUPS[groupKey];
65135
const swatchData = extractColorVars(styleText);
66136

67137
const groupData = swatchData.reduce(

0 commit comments

Comments
 (0)
⚡