Skip to content

Commit 0ab0c93

Browse files
dsmmckendsmmcken
authored
feat: adjust display of theme palette in styleguide (#1745)
Note: contains no color or app changes. - display styleguide as theme palette in a grid (shows in e2e) - re-order blue to be after cyan in code - group content-subdued-bg with content-bg (triggers a e2e change)
1 parent af5f5f4 commit 0ab0c93

11 files changed

Lines changed: 181 additions & 105 deletions

‎packages/code-studio/src/styleguide/ThemeColors.module.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
1+
.themeColorsPalette {
2+
display: grid;
3+
grid-template-columns: repeat(15, 1fr);
4+
gap: 1px;
5+
align-items: center;
6+
7+
.swatch {
8+
display: flex;
9+
aspect-ratio: 4/3;
10+
align-items: start;
11+
justify-content: end;
12+
}
13+
}
14+
115
.themeColors {
216
--swatch-height: 35px;
317
--column-gap: 14px;
@@ -33,7 +47,12 @@
3347
white-space: nowrap;
3448
text-overflow: ellipsis;
3549
}
50+
}
51+
}
3652

53+
.themeColors,
54+
.themeColorsPalette {
55+
.swatch {
3756
// hide copy swatch button until hover
3857
button {
3958
opacity: 0;

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

Lines changed: 112 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable react/jsx-props-no-spreading */
2-
import React, { useMemo } from 'react';
2+
import React, { Fragment, useMemo } from 'react';
33
import cl from 'classnames';
44
import { CopyButton, Tooltip, useTheme } from '@deephaven/components';
55
import { ColorUtils } from '@deephaven/utils';
@@ -34,66 +34,122 @@ export function ThemeColors(): JSX.Element {
3434

3535
return (
3636
<>
37-
{Object.entries(swatchDataGroups).map(([label, data], i) => (
38-
<div key={label} {...sampleSectionIdAndClasses(label)}>
39-
<h2 className="ui-title">{label}</h2>
40-
<div className={styles.themeColors}>
41-
{Object.entries(data).map(([group, swatchData]) => (
42-
<div
43-
key={group}
44-
// This is the secret sauce for filling columns. The height of
45-
// each swatch group spans multiple rows (the number of swatches
46-
// + 1 for the label). This causes the grid to create rows
47-
// based on the swatch height (35px), and each swatch (also the
48-
// group label) neatly fits in a grid cell. The grid will put a
49-
// group in each column and then wrap back around to the first
50-
// until all groups are placed.
51-
style={{ gridRow: `span ${swatchData.length + 1}` }}
52-
>
53-
<span className={cl(styles.label, styles.capitalize)}>
54-
{group}
55-
</span>
56-
{swatchData.map(({ isLabel, name, value, note }) =>
57-
isLabel === true ? (
58-
<span key={name} className={styles.label}>
59-
{name}
60-
</span>
61-
) : (
62-
<div
63-
key={name}
64-
className={styles.swatch}
65-
style={{
66-
backgroundColor: value,
67-
border:
68-
value === '' && name.length > 0
69-
? INVALID_COLOR_BORDER_STYLE
70-
: undefined,
71-
color: `var(--dh-color-${contrastColor(value)})`,
72-
}}
73-
>
74-
<Tooltip interactive>
75-
<div>{name}</div>
76-
<div>{value}</div>
77-
<div>{ColorUtils.normalizeCssColor(value, true)}</div>
78-
</Tooltip>
79-
<span>{name.replace('--dh-color-', '')}</span>
80-
{name.endsWith('-hue') || note != null ? (
81-
<span>{note ?? value}</span>
82-
) : null}
83-
<CopyButton
84-
copy={name}
37+
{Object.entries(swatchDataGroups).map(([label, data], i) => {
38+
if (label === 'Theme Color Palette') {
39+
return (
40+
<div key={label} {...sampleSectionIdAndClasses(label)}>
41+
<h2 className="ui-title">{label}</h2>
42+
43+
<div className={styles.themeColorsPalette}>
44+
{Object.entries(data).map(([group, swatchData], index) => (
45+
<Fragment key={group}>
46+
{(index === 0 || index === 1) &&
47+
swatchData.map(({ name }, j) => (
48+
<div
49+
style={{
50+
gridColumnStart: j + 2,
51+
textAlign: 'center',
52+
}}
53+
className="mt-3"
54+
key={name}
55+
>
56+
{name.split('-').pop()}
57+
</div>
58+
))}
59+
<div className="text-right pr-2">{group}</div>
60+
{swatchData.map(({ name, value }) => (
61+
<div
62+
key={name}
8563
style={{
64+
backgroundColor: value,
65+
border:
66+
value === '' && name.length > 0
67+
? INVALID_COLOR_BORDER_STYLE
68+
: undefined,
8669
color: `var(--dh-color-${contrastColor(value)})`,
8770
}}
88-
/>
89-
</div>
90-
)
91-
)}
71+
className={cl(styles.swatch, 'px-0')}
72+
>
73+
<Tooltip interactive>
74+
<div>{name}</div>
75+
<div>{value}</div>
76+
<div>{ColorUtils.normalizeCssColor(value, true)}</div>
77+
</Tooltip>
78+
<CopyButton
79+
copy={name}
80+
style={{
81+
color: `var(--dh-color-${contrastColor(value)})`,
82+
}}
83+
/>
84+
</div>
85+
))}
86+
</Fragment>
87+
))}
9288
</div>
93-
))}
89+
</div>
90+
);
91+
}
92+
return (
93+
<div key={label} {...sampleSectionIdAndClasses(label)}>
94+
<h2 className="ui-title">{label}</h2>
95+
<div className={styles.themeColors}>
96+
{Object.entries(data).map(([group, swatchData]) => (
97+
<div
98+
key={group}
99+
// This is the secret sauce for filling columns. The height of
100+
// each swatch group spans multiple rows (the number of swatches
101+
// + 1 for the label). This causes the grid to create rows
102+
// based on the swatch height (35px), and each swatch (also the
103+
// group label) neatly fits in a grid cell. The grid will put a
104+
// group in each column and then wrap back around to the first
105+
// until all groups are placed.
106+
style={{ gridRow: `span ${swatchData.length + 1}` }}
107+
>
108+
<span className={cl(styles.label, styles.capitalize)}>
109+
{group}
110+
</span>
111+
{swatchData.map(({ isLabel, name, value, note }) =>
112+
isLabel === true ? (
113+
<span key={name} className={styles.label}>
114+
{name}
115+
</span>
116+
) : (
117+
<div
118+
key={name}
119+
className={styles.swatch}
120+
style={{
121+
backgroundColor: value,
122+
border:
123+
value === '' && name.length > 0
124+
? INVALID_COLOR_BORDER_STYLE
125+
: undefined,
126+
color: `var(--dh-color-${contrastColor(value)})`,
127+
}}
128+
>
129+
<Tooltip interactive>
130+
<div>{name}</div>
131+
<div>{value}</div>
132+
<div>{ColorUtils.normalizeCssColor(value, true)}</div>
133+
</Tooltip>
134+
<span>{name.replace('--dh-color-', '')}</span>
135+
{name.endsWith('-hue') || note != null ? (
136+
<span>{note ?? value}</span>
137+
) : null}
138+
<CopyButton
139+
copy={name}
140+
style={{
141+
color: `var(--dh-color-${contrastColor(value)})`,
142+
}}
143+
/>
144+
</div>
145+
)
146+
)}
147+
</div>
148+
))}
149+
</div>
94150
</div>
95-
</div>
96-
))}
151+
);
152+
})}
97153
</>
98154
);
99155
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
1414
'--dh-color-surface-bg': 'General',
1515
'--dh-color-fg': 'General',
1616
'--dh-color-content-bg': 'General',
17+
'--dh-color-subdued-content-bg': 'General',
1718
'--dh-color-dropshadow': 'General',
1819
'--dh-color-keyboard-selected-bg': 'Misc',
1920
'--dh-color-hover-border': 'Misc',
@@ -22,7 +23,6 @@ const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
2223
'--dh-color-visual-notice': 'Visual Status',
2324
'--dh-color-visual-info': 'Visual Status',
2425
'--dh-color-gray-bg': 'Default Background',
25-
'--dh-color-blue-bg': 'Default Background',
2626
'--dh-color-red-bg': 'Default Background',
2727
'--dh-color-orange-bg': 'Default Background',
2828
'--dh-color-yellow-bg': 'Default Background',
@@ -31,6 +31,7 @@ const REASSIGN_VARIABLE_GROUPS: Record<string, string> = {
3131
'--dh-color-green-bg': 'Default Background',
3232
'--dh-color-seafoam-bg': 'Default Background',
3333
'--dh-color-cyan-bg': 'Default Background',
34+
'--dh-color-blue-bg': 'Default Background',
3435
'--dh-color-indigo-bg': 'Default Background',
3536
'--dh-color-purple-bg': 'Default Background',
3637
'--dh-color-fuchsia-bg': 'Default Background',

‎packages/components/src/theme/theme-dark/theme-dark-palette.css‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,6 @@
2323
--dh-color-true-black-hsl: 0deg, 0%, 0%;
2424
--dh-color-true-white-hsl: 0deg, 0%, 100%;
2525

26-
/* Blue HSL components */
27-
--dh-color-blue-100-hsl: 222deg, 65.3%, 19.2%;
28-
--dh-color-blue-200-hsl: 222deg, 66.2%, 25.5%;
29-
--dh-color-blue-300-hsl: 222deg, 64.8%, 32.4%;
30-
--dh-color-blue-400-hsl: 222deg, 63.2%, 39.4%;
31-
--dh-color-blue-500-hsl: 222deg, 60.7%, 46.9%;
32-
--dh-color-blue-600-hsl: 222deg, 68.2%, 54.3%;
33-
--dh-color-blue-700-hsl: 222deg, 82.7%, 61.6%;
34-
--dh-color-blue-800-hsl: 222deg, 93.8%, 68.4%;
35-
--dh-color-blue-900-hsl: 222deg, 100%, 74.3%;
36-
--dh-color-blue-1000-hsl: 222deg, 100%, 79.6%;
37-
--dh-color-blue-1100-hsl: 221deg, 100%, 84.3%;
38-
--dh-color-blue-1200-hsl: 221deg, 100%, 89%;
39-
--dh-color-blue-1300-hsl: 222deg, 100%, 92.9%;
40-
--dh-color-blue-1400-hsl: 224deg, 100%, 96.3%;
41-
4226
/* Reds HSL components */
4327
--dh-color-red-100-hsl: 346deg, 54.3%, 18%;
4428
--dh-color-red-200-hsl: 345deg, 55%, 23.5%;
@@ -167,6 +151,22 @@
167151
--dh-color-cyan-1300-hsl: 186deg, 91.6%, 81.4%;
168152
--dh-color-cyan-1400-hsl: 186deg, 100%, 89.6%;
169153

154+
/* Blue HSL components */
155+
--dh-color-blue-100-hsl: 222deg, 65.3%, 19.2%;
156+
--dh-color-blue-200-hsl: 222deg, 66.2%, 25.5%;
157+
--dh-color-blue-300-hsl: 222deg, 64.8%, 32.4%;
158+
--dh-color-blue-400-hsl: 222deg, 63.2%, 39.4%;
159+
--dh-color-blue-500-hsl: 222deg, 60.7%, 46.9%;
160+
--dh-color-blue-600-hsl: 222deg, 68.2%, 54.3%;
161+
--dh-color-blue-700-hsl: 222deg, 82.7%, 61.6%;
162+
--dh-color-blue-800-hsl: 222deg, 93.8%, 68.4%;
163+
--dh-color-blue-900-hsl: 222deg, 100%, 74.3%;
164+
--dh-color-blue-1000-hsl: 222deg, 100%, 79.6%;
165+
--dh-color-blue-1100-hsl: 221deg, 100%, 84.3%;
166+
--dh-color-blue-1200-hsl: 221deg, 100%, 89%;
167+
--dh-color-blue-1300-hsl: 222deg, 100%, 92.9%;
168+
--dh-color-blue-1400-hsl: 224deg, 100%, 96.3%;
169+
170170
/* Indigo HSL components */
171171
--dh-color-indigo-100-hsl: 237deg, 58.1%, 24.3%;
172172
--dh-color-indigo-200-hsl: 236deg, 51.9%, 30.2%;
@@ -252,22 +252,6 @@
252252
--dh-color-black: hsl(var(--dh-color-black-hsl));
253253
--dh-color-white: hsl(var(--dh-color-white-hsl));
254254

255-
/* Blue */
256-
--dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
257-
--dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
258-
--dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
259-
--dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
260-
--dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
261-
--dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
262-
--dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
263-
--dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
264-
--dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
265-
--dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
266-
--dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
267-
--dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
268-
--dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
269-
--dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
270-
271255
/* Red */
272256
--dh-color-red-100: hsl(var(--dh-color-red-100-hsl));
273257
--dh-color-red-200: hsl(var(--dh-color-red-200-hsl));
@@ -396,6 +380,22 @@
396380
--dh-color-cyan-1300: hsl(var(--dh-color-cyan-1300-hsl));
397381
--dh-color-cyan-1400: hsl(var(--dh-color-cyan-1400-hsl));
398382

383+
/* Blue */
384+
--dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
385+
--dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
386+
--dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
387+
--dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
388+
--dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
389+
--dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
390+
--dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
391+
--dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
392+
--dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
393+
--dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
394+
--dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
395+
--dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
396+
--dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
397+
--dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
398+
399399
/* Indigo */
400400
--dh-color-indigo-100: hsl(var(--dh-color-indigo-100-hsl));
401401
--dh-color-indigo-200: hsl(var(--dh-color-indigo-200-hsl));

‎packages/components/src/theme/theme-light/theme-light-palette.css‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -227,22 +227,6 @@
227227
--dh-color-black: hsl(var(--dh-color-black-hsl));
228228
--dh-color-white: hsl(var(--dh-color-white-hsl));
229229

230-
/* Blue */
231-
--dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
232-
--dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
233-
--dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
234-
--dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
235-
--dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
236-
--dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
237-
--dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
238-
--dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
239-
--dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
240-
--dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
241-
--dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
242-
--dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
243-
--dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
244-
--dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
245-
246230
/* Red */
247231
--dh-color-red-100: hsl(var(--dh-color-red-100-hsl));
248232
--dh-color-red-200: hsl(var(--dh-color-red-200-hsl));
@@ -371,6 +355,22 @@
371355
--dh-color-cyan-1300: hsl(var(--dh-color-cyan-1300-hsl));
372356
--dh-color-cyan-1400: hsl(var(--dh-color-cyan-1400-hsl));
373357

358+
/* Blue */
359+
--dh-color-blue-100: hsl(var(--dh-color-blue-100-hsl));
360+
--dh-color-blue-200: hsl(var(--dh-color-blue-200-hsl));
361+
--dh-color-blue-300: hsl(var(--dh-color-blue-300-hsl));
362+
--dh-color-blue-400: hsl(var(--dh-color-blue-400-hsl));
363+
--dh-color-blue-500: hsl(var(--dh-color-blue-500-hsl));
364+
--dh-color-blue-600: hsl(var(--dh-color-blue-600-hsl));
365+
--dh-color-blue-700: hsl(var(--dh-color-blue-700-hsl));
366+
--dh-color-blue-800: hsl(var(--dh-color-blue-800-hsl));
367+
--dh-color-blue-900: hsl(var(--dh-color-blue-900-hsl));
368+
--dh-color-blue-1000: hsl(var(--dh-color-blue-1000-hsl));
369+
--dh-color-blue-1100: hsl(var(--dh-color-blue-1100-hsl));
370+
--dh-color-blue-1200: hsl(var(--dh-color-blue-1200-hsl));
371+
--dh-color-blue-1300: hsl(var(--dh-color-blue-1300-hsl));
372+
--dh-color-blue-1400: hsl(var(--dh-color-blue-1400-hsl));
373+
374374
/* Indigo */
375375
--dh-color-indigo-100: hsl(var(--dh-color-indigo-100-hsl));
376376
--dh-color-indigo-200: hsl(var(--dh-color-indigo-200-hsl));

‎tests/styleguide.spec.ts-snapshots/semantic-colors-chromium-linux.png‎

-591 Bytes
Loading

‎tests/styleguide.spec.ts-snapshots/semantic-colors-firefox-linux.png‎

-815 Bytes
Loading

‎tests/styleguide.spec.ts-snapshots/semantic-colors-webkit-linux.png‎

-751 Bytes
Loading

‎tests/styleguide.spec.ts-snapshots/theme-color-palette-chromium-linux.png‎

-234 KB
Loading

‎tests/styleguide.spec.ts-snapshots/theme-color-palette-firefox-linux.png‎

-300 KB
Loading

0 commit comments

Comments
 (0)
⚡