Skip to content

Commit 581ccff

Browse files
authored
fix(theming): update palette color values (#1795)
1 parent f385e68 commit 581ccff

File tree

5 files changed

+697
-615
lines changed

5 files changed

+697
-615
lines changed
Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
/**
2+
* Copyright Zendesk, Inc.
3+
*
4+
* Use of this source code is governed under the Apache License, Version 2.0
5+
* found at http://www.apache.org/licenses/LICENSE-2.0.
6+
*/
7+
8+
import React, { FC } from 'react';
9+
import { StoryFn } from '@storybook/react';
10+
import styled from 'styled-components';
11+
import { readableColor } from 'polished';
12+
import { IGardenTheme, PALETTE, getColor, mediaQuery } from '@zendeskgarden/react-theming';
13+
import { Grid } from '@zendeskgarden/react-grid';
14+
15+
const StyledColorHex = styled.figcaption`
16+
margin-left: auto;
17+
font-size: ${p => p.theme.fontSizes.sm};
18+
`;
19+
20+
const StyledColorPalette = styled.div`
21+
margin-top: ${p => p.theme.space.md};
22+
margin-bottom: ${p => p.theme.space.xl};
23+
`;
24+
25+
const StyledColorSwatch = styled.figure<{ color: string }>`
26+
display: flex;
27+
align-items: center;
28+
margin: 0;
29+
background-color: ${p => p.color};
30+
padding: ${p => p.theme.space.sm};
31+
color: ${p =>
32+
readableColor(
33+
p.color,
34+
getColor({ theme: p.theme, variable: 'foreground.default' }),
35+
getColor({ theme: p.theme, variable: 'background.default' })
36+
)};
37+
`;
38+
39+
const StyledColorTitle = styled.b`
40+
white-space: nowrap;
41+
font-size: ${p => p.theme.fontSizes.md};
42+
font-weight: ${p => p.theme.fontWeights.semibold};
43+
`;
44+
45+
const StyledCol = styled(Grid.Col)`
46+
${p => mediaQuery('down', 'xs', p.theme)} {
47+
margin-top: ${p => p.theme.space.md};
48+
}
49+
`;
50+
51+
const StyledRow = styled(Grid.Row)`
52+
& + & {
53+
margin-top: ${p => p.theme.space.md};
54+
}
55+
`;
56+
57+
const StyledList = styled.ul`
58+
padding: 0;
59+
list-style: none;
60+
61+
& > li:first-child ${StyledColorSwatch} {
62+
border-top-left-radius: ${p => p.theme.space.sm};
63+
border-top-right-radius: ${p => p.theme.space.sm};
64+
}
65+
66+
& > li:last-child ${StyledColorSwatch} {
67+
border-bottom-left-radius: ${p => p.theme.space.sm};
68+
border-bottom-right-radius: ${p => p.theme.space.sm};
69+
}
70+
`;
71+
72+
const Hue: FC<{ hue: string }> = ({ hue }) => {
73+
const colors = (PALETTE as any)[hue];
74+
75+
return (
76+
<StyledList>
77+
{Object.keys(colors).map(shade => {
78+
const color = colors[shade as any];
79+
const title = `${hue}-${shade}`;
80+
81+
return (
82+
<li key={shade}>
83+
<StyledColorSwatch color={color}>
84+
<StyledColorTitle>{title}</StyledColorTitle>
85+
<StyledColorHex>{color}</StyledColorHex>
86+
</StyledColorSwatch>
87+
</li>
88+
);
89+
})}
90+
</StyledList>
91+
);
92+
};
93+
94+
interface IArgs {
95+
palette: IGardenTheme['palette'];
96+
}
97+
98+
export const PaletteStory: StoryFn<IArgs> = ({ palette }) => {
99+
const hues = Object.keys(palette).filter(
100+
hue => hue !== 'black' && hue !== 'white' && hue !== 'product'
101+
);
102+
// Convert the given list of `hues` to column pairs
103+
const rows = hues.reduce((retVal: string[][], currentValue, index, array) => {
104+
if (index % 2 === 0) {
105+
const pair: string[] = array.slice(index, index + 2);
106+
107+
retVal.push(pair);
108+
}
109+
110+
return retVal;
111+
}, []);
112+
113+
return (
114+
<StyledColorPalette>
115+
<Grid>
116+
{rows.map((row, index) => {
117+
const hue1 = row[0];
118+
const hue2 = row[1];
119+
120+
return (
121+
<StyledRow key={index}>
122+
<Grid.Col sm>
123+
<Hue hue={hue1} />
124+
</Grid.Col>
125+
<StyledCol sm>{hue2 && <Hue hue={hue2} />}</StyledCol>
126+
</StyledRow>
127+
);
128+
})}
129+
</Grid>
130+
</StyledColorPalette>
131+
);
132+
};

packages/theming/demo/utilities.stories.mdx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
22
import { ThemeProvider, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
3+
import { PaletteStory } from './stories/PaletteStory';
34
import { ArrowStylesStory } from './stories/ArrowStylesStory';
45
import { MenuStylesStory } from './stories/MenuStylesStory';
56
import { GetColorStory } from './stories/GetColorStory';
@@ -18,6 +19,21 @@ import README from '../README.md';
1819

1920
# Demo
2021

22+
## PALETTE
23+
24+
<Canvas>
25+
<Story
26+
name="PALETTE"
27+
args={{ palette: PALETTE }}
28+
argTypes={{
29+
palette: { control: { type: 'object' }, name: 'PALETTE' },
30+
theme: { control: false }
31+
}}
32+
>
33+
{args => <PaletteStory {...args} />}
34+
</Story>
35+
</Canvas>
36+
2137
## arrowStyles()
2238

2339
<Canvas>

0 commit comments

Comments
 (0)