Skip to content

Commit 8553fd1

Browse files
atanassteratanasster
committed
feat: added biteable x color token
1 parent c303439 commit 8553fd1

File tree

5 files changed

+192
-0
lines changed

5 files changed

+192
-0
lines changed

‎examples/stories/src/tutorial/design/tokens/colors.mdx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import {
4545
SolidColorPalette,
4646
UniformColorPalette,
4747
VanillaColorPalette,
48+
XColorPalette,
4849
} from '@component-controls/design-tokens';
4950

5051
# Overview
@@ -1803,4 +1804,39 @@ import { VanillaColorPalette } from '@component-controls/design-tokens';
18031804
sass: '$color-navigation-background',
18041805
},
18051806
}}
1807+
/>
1808+
1809+
1810+
## XColor
1811+
1812+
The [XColor](/api/design-tokens-colors-xcolor--overview) component displays the color as a cirlce with the variable name, hev, rgb, cmyk and pantone values below.
1813+
1814+
Design inspired from Biteable's Design System [X](https://x.biteable.com/brand/).
1815+
1816+
```
1817+
import { XColorPalette } from '@component-controls/design-tokens';
1818+
1819+
<XColorPalette
1820+
palette={{
1821+
'Dame Tangerine': '#FF5000',
1822+
'Señor Purple': '#5F285A',
1823+
'Baron Von Teal': '#1DE9B6',
1824+
'Agent Cyan': '#18FFFF',
1825+
'Madam Yellow': '#FFF500',
1826+
'Pastor Pink': '#FF96B4',
1827+
'Brigadier Blue': '#000A47',
1828+
}}
1829+
/>
1830+
```
1831+
1832+
<XColorPalette
1833+
palette={{
1834+
'Dame Tangerine': '#FF5000',
1835+
'Señor Purple': '#5F285A',
1836+
'Baron Von Teal': '#1DE9B6',
1837+
'Agent Cyan': '#18FFFF',
1838+
'Madam Yellow': '#FFF500',
1839+
'Pastor Pink': '#FF96B4',
1840+
'Brigadier Blue': '#000A47',
1841+
}}
18061842
/>

‎ui/design-tokens/src/Colors/XColor/XColor.stories.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { ControlTypes } from '@component-controls/core';
3+
import { XColor, XColorPalette } from './XColor';
4+
import { ColorProps } from '../../types';
5+
6+
export default {
7+
title: 'Design Tokens/Colors/XColor',
8+
component: XColor,
9+
};
10+
11+
export const overview = ({ name, color }: ColorProps) => (
12+
<XColor name={name} color={color} />
13+
);
14+
15+
overview.controls = {
16+
name: 'Lady Black',
17+
color: { type: ControlTypes.COLOR, value: '#3C3C3B' },
18+
};
19+
20+
export const palette = () => (
21+
<XColorPalette
22+
palette={{
23+
'Dame Tangerine': '#FF5000',
24+
'Señor Purple': '#5F285A',
25+
'Baron Von Teal': '#1DE9B6',
26+
'Agent Cyan': '#18FFFF',
27+
'Madam Yellow': '#FFF500',
28+
'Pastor Pink': '#FF96B4',
29+
'Brigadier Blue': '#000A47',
30+
}}
31+
/>
32+
);

‎ui/design-tokens/src/Colors/XColor/XColor.tsx

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/** @jsx jsx */
2+
import { FC } from 'react';
3+
import { jsx, Theme } from 'theme-ui';
4+
import { CopyContainer } from '@component-controls/components';
5+
import simpleColorConverter from 'simple-color-converter';
6+
import { colorToStr } from '../utils';
7+
import { ColorBlockProps, ColorValue } from '../../types';
8+
import { GridContainerProps, GridContainer } from '../../components';
9+
10+
/**
11+
* Color item displaying the color as a cirlce with the variable name, hev, rgb, cmyk and pantone values below.
12+
* Design inspired from Biteable's Design System [X](https://x.biteable.com/brand/).
13+
*/
14+
export const XColor: FC<ColorBlockProps> = ({ name, color }) => {
15+
const colorObj: ColorValue =
16+
typeof color === 'string' ? { value: color } : color;
17+
const { value: colorValue, name: colorName = name } = colorObj;
18+
19+
const { hex, rgba } = colorToStr(colorValue);
20+
const { color: cmyk } = new simpleColorConverter({
21+
rgba,
22+
to: 'cmyk',
23+
});
24+
const { color: pantone } = new simpleColorConverter({
25+
rgba,
26+
to: 'pantone',
27+
});
28+
return (
29+
<div
30+
sx={{
31+
px: 2,
32+
display: 'flex',
33+
flexDirection: 'column',
34+
alignItems: 'center',
35+
minWidth: 120,
36+
maxWidth: 320,
37+
fontSize: 2,
38+
}}
39+
>
40+
<CopyContainer value={hex} name={name} sx={{ px: 2, pt: 2 }}>
41+
<div
42+
sx={{
43+
border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
44+
width: 80,
45+
height: 80,
46+
bg: colorValue,
47+
borderRadius: '50%',
48+
}}
49+
/>
50+
</CopyContainer>
51+
<div sx={{ textAlign: 'center', mt: 1, mb: 2, fontWeight: 'heading' }}>
52+
{colorName}
53+
</div>
54+
<div
55+
sx={{
56+
width: '100%',
57+
display: 'flex',
58+
flexDirection: 'row',
59+
alignItems: 'center',
60+
justifyContent: 'space-between',
61+
}}
62+
>
63+
<div>HEX</div>
64+
<div>{hex.split('#')[1].toUpperCase()}</div>
65+
</div>
66+
<div
67+
sx={{
68+
width: '100%',
69+
display: 'flex',
70+
flexDirection: 'row',
71+
alignItems: 'center',
72+
justifyContent: 'space-between',
73+
}}
74+
>
75+
<div>RGB</div>
76+
<div>
77+
{`${rgba.r},${rgba.g},${rgba.b}${rgba.a !== 1 ? `,${rgba.a}` : ''}`}
78+
</div>
79+
</div>
80+
<div
81+
sx={{
82+
width: '100%',
83+
display: 'flex',
84+
flexDirection: 'row',
85+
alignItems: 'center',
86+
justifyContent: 'space-between',
87+
}}
88+
>
89+
<div>CMYK</div>
90+
<div>{`${cmyk.c},${cmyk.m},${cmyk.y},${cmyk.k}`}</div>
91+
</div>
92+
<div
93+
sx={{
94+
width: '100%',
95+
display: 'flex',
96+
flexDirection: 'row',
97+
alignItems: 'center',
98+
justifyContent: 'space-between',
99+
}}
100+
>
101+
<div>Pantone</div>
102+
<div>{pantone}</div>
103+
</div>
104+
</div>
105+
);
106+
};
107+
108+
/**
109+
*
110+
* palette displayed with XColor items
111+
* using a css grid for the dsplay
112+
*/
113+
export const XColorPalette: FC<Omit<
114+
GridContainerProps,
115+
'children'
116+
>> = props => (
117+
<GridContainer width={180} gap={2} {...props}>
118+
{({ name, value }) => (
119+
<XColor key={`color_item_${name}}`} name={name} color={value} />
120+
)}
121+
</GridContainer>
122+
);

‎ui/design-tokens/src/Colors/XColor/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './XColor';

‎ui/design-tokens/src/Colors/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ export * from './SkylineColor';
3232
export * from './SolidColor';
3333
export * from './UniformColor';
3434
export * from './VanillaColor';
35+
export * from './XColor';

0 commit comments

Comments
 (0)