-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
Palette.js
58 lines (53 loc) · 1.31 KB
/
Palette.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/** @jsx jsx */
import { jsx } from '@emotion/core';
import { Fragment } from 'react';
import { Grid, Cell } from '@arch-ui/layout';
import { colors } from '@arch-ui/theme';
const Swatch = ({ color, name, prefix }) => (
<div
style={{ backgroundColor: color }}
css={{
borderRadius: 2,
boxSizing: 'border-box',
color: 'white',
textShadow: '1px 1px 1px rgba(0,0,0,0.1)',
fontWeight: 500,
paddingBottom: '100%',
position: 'relative',
}}
>
<code css={{ position: 'absolute', left: 8, top: 8 }}>
{prefix}.{name}
</code>
</div>
);
const Hue = ({ heading, group }) => {
const groupList = Object.keys(group).reverse();
return (
<Fragment>
<h4>{heading}</h4>
<Grid>
{groupList.map(k => {
const clr = group[k];
return (
<Cell key={k}>
<Swatch prefix={heading.slice(0, 1)} color={clr} name={k} />
</Cell>
);
})}
</Grid>
</Fragment>
);
};
const PaletteGuide = () => {
return (
<Fragment>
<h2>Palette</h2>
<Hue heading="Reds" group={colors.R} />
<Hue heading="Greens" group={colors.G} />
<Hue heading="Blues" group={colors.B} />
<Hue heading="Yellows" group={colors.Y} />
</Fragment>
);
};
export default PaletteGuide;