/
SolidColor.tsx
82 lines (79 loc) · 2.09 KB
/
SolidColor.tsx
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/** @jsx jsx */
import { FC } from 'react';
import { jsx, Theme } from 'theme-ui';
import { CopyContainer } from '@component-controls/components';
import { colorToStr } from '../utils';
import { ColorBlockProps, ColorValue } from '../../types';
import { GridContainerProps, GridContainer } from '../../components';
/**
* Color item displaying the color as a block. The CSS class, HEX value, and SASS name are placed above the color block.
* Design inspired by [Solid](https://solid.buzzfeed.com/colors.html).
*/
export const SolidColor: FC<ColorBlockProps> = ({ name, color }) => {
const colorObj: ColorValue =
typeof color === 'string' ? { value: color } : color;
const { value: colorValue, sass, css } = colorObj;
const { hex } = colorToStr(colorValue);
return (
<div
sx={{
display: 'flex',
flexDirection: 'column',
minWidth: 180,
maxWidth: 450,
}}
>
<div
sx={{
display: 'flex',
flexDirection: 'column',
lineHeight: '16px',
justifyContent: 'space-between',
py: 1,
}}
>
<div
sx={{
my: 2,
fontSize: 2,
fontWeight: 'bold',
color: 'primary',
}}
>
{css && (
<CopyContainer value={css} name={name || css}>
{css}
</CopyContainer>
)}
</div>
<div sx={{ fontSize: 1, color: 'mutedText' }}>
{`${hex}${sass ? `, ${sass}` : ''}`}
</div>
</div>
<CopyContainer
value={hex}
name={name || css}
sx={{
bg: colorValue,
height: 50,
border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
}}
/>
</div>
);
};
/**
*
* palette displayed with SolidColor items
* using a css grid for the dsplay
*/
export const SolidColorPalette: FC<Omit<
GridContainerProps,
'children'
>> = props => (
<GridContainer {...props}>
{({ name, value }) => (
<SolidColor key={`color_item_${name}}`} name={name} color={value} />
)}
</GridContainer>
);