/
BeelineColor.tsx
117 lines (115 loc) · 3.15 KB
/
BeelineColor.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/** @jsx jsx */
import { FC } from 'react';
import { jsx, Theme } from 'theme-ui';
import { CopyContainer } from '@component-controls/components';
import simpleColorConverter from 'simple-color-converter';
import { colorToStr } from '../utils';
import { ColorBlockProps } from '../../types';
import { GridContainerProps, GridContainer } from '../../components';
/**
* Color item displaying the color as a block with values for rgb and Pantone colors.
* Design inspired by [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
*/
export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
const colorValue = typeof color === 'string' ? color : color.value;
const { hex, rgba } = colorToStr(colorValue);
const { color: pantone } = new simpleColorConverter({
rgba,
to: 'pantone',
});
return (
<div
sx={{
display: 'flex',
flexDirection: 'column',
bg: 'background',
minWidth: 120,
maxWidth: 320,
border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
borderRadius: 1,
boxShadow: (t: Theme) => `0 1px 2px 0 ${t.colors?.shadow}`,
}}
>
<CopyContainer value={hex} name={name} sx={{ px: 2, pt: 2 }}>
<div
sx={{
bg: colorValue,
':after': {
content: '""',
display: 'block',
paddingBottom: '60%',
},
}}
/>
</CopyContainer>
<div
sx={{
display: 'flex',
flexDirection: 'column',
p: 2,
fontSize: 2,
}}
>
<div
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<div sx={{ pb: 2, fontSize: 3 }}>{name || hex}</div>
</div>
<div sx={{ fontSize: 0 }}>
<div
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<div sx={{ fontWeight: 'bold', mr: 1 }}>HEX:</div>
<div>{hex}</div>
</div>
<div
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<div sx={{ fontWeight: 'bold', mr: 1 }}>RGB:</div>
<div>
{`rgb(${rgba.r},${rgba.g},${rgba.b}${
rgba.a !== 1 ? `,${rgba.a}` : ''
})`}
</div>
</div>
<div
sx={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
}}
>
<div sx={{ fontWeight: 'bold', mr: 1 }}>Pantone:</div>
<div>{pantone || '--'}:</div>
</div>
</div>
</div>
</div>
);
};
/**
*
* palette displayed with BeelineColor items
* using a css grid for the dsplay
*/
export const BeelineColorPalette: FC<Omit<
GridContainerProps,
'children'
>> = props => (
<GridContainer width={170} gap={3} {...props}>
{({ name, value }) => (
<BeelineColor key={`color_item_${name}}`} name={name} color={value} />
)}
</GridContainer>
);