From 3cfdfb78e865e8acc94192a0ecedc3a27786321b Mon Sep 17 00:00:00 2001 From: atanasster Date: Mon, 21 Sep 2020 22:21:23 -0400 Subject: [PATCH] feat: added backpack color palette --- .../src/tutorial/design/tokens/colors.mdx | 41 +++++- .../ColorBlock7/ColorBlock7.stories.tsx | 61 +++++++++ .../src/Colors/ColorBlock7/ColorBlock7.tsx | 129 ++++++++++++++++++ .../src/Colors/ColorBlock7/index.ts | 1 + ui/design-tokens/src/Colors/index.ts | 1 + ui/design-tokens/src/Colors/types.ts | 4 +- 6 files changed, 234 insertions(+), 3 deletions(-) create mode 100644 ui/design-tokens/src/Colors/ColorBlock7/ColorBlock7.stories.tsx create mode 100644 ui/design-tokens/src/Colors/ColorBlock7/ColorBlock7.tsx create mode 100644 ui/design-tokens/src/Colors/ColorBlock7/index.ts diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx index 1f9c233f2..29d432dbe 100644 --- a/examples/stories/src/tutorial/design/tokens/colors.mdx +++ b/examples/stories/src/tutorial/design/tokens/colors.mdx @@ -8,8 +8,15 @@ tags: order: 1 author: atanasster --- -import { ColorBlock1Palette, ColorBlock2Palette, ColorBlock3Palette, - ColorBlock4Palette, ColorBlock5Palette, ColorBlock6Palette } from '@component-controls/design-tokens'; +import { + ColorBlock1Palette, + ColorBlock2Palette, + ColorBlock3Palette, + ColorBlock4Palette, + ColorBlock5Palette, + ColorBlock6Palette, + ColorBlock7Palette, +} from '@component-controls/design-tokens'; # Overview @@ -205,4 +212,34 @@ import { ColorBlock6Palette } from '@component-controls/design-tokens'; "Da' juice": { value: '#6554C0', name: 'P300' }, Critical: { value: '#f94d32', name: 'Red400' }, }} +/> + +## ColorBlock7 (Backpack) + +The [ColorBlock7](/api/design-tokens-colors-colorblock7--overview) component displays a color block and color aliases for various standard is Pantone, CMYK. If specified, will display the dark color as a bottom-right side triangle. + +``` +import { ColorBlock7Palette } from '@component-controls/design-tokens'; + + +``` + + \ No newline at end of file diff --git a/ui/design-tokens/src/Colors/ColorBlock7/ColorBlock7.stories.tsx b/ui/design-tokens/src/Colors/ColorBlock7/ColorBlock7.stories.tsx new file mode 100644 index 000000000..351effe24 --- /dev/null +++ b/ui/design-tokens/src/Colors/ColorBlock7/ColorBlock7.stories.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { ColorBlock7, ColorBlock7Palette } from './ColorBlock7'; +import { ColorProps } from '../types'; + +export default { + title: 'Design Tokens/Colors/ColorBlock7', + component: ColorBlock7, +}; + +export const overview = ({ name, color }: ColorProps) => ( + +); + +overview.controls = { + name: { type: 'text', value: 'Brand' }, + color: { + type: 'object', + value: { + value: { type: 'color', value: '#084eb2' }, + dark: { + type: 'object', + value: { + value: { type: 'color', value: '#cddff8' }, + name: { type: 'text', value: 'Blue800' }, + }, + }, + name: { type: 'text', value: 'Blue400' }, + }, + }, +}; + +export const name = () => ( + +); + +export const rgb = () => ; + +export const rgba = () => ( + +); + +export const hsl = () => ( + +); + +export const hsla = () => ( + +); + +export const palette = () => ( + +); diff --git a/ui/design-tokens/src/Colors/ColorBlock7/ColorBlock7.tsx b/ui/design-tokens/src/Colors/ColorBlock7/ColorBlock7.tsx new file mode 100644 index 000000000..09cbca2f3 --- /dev/null +++ b/ui/design-tokens/src/Colors/ColorBlock7/ColorBlock7.tsx @@ -0,0 +1,129 @@ +/** @jsx jsx */ +import { FC } from 'react'; +import { jsx, Box } from 'theme-ui'; +import { CopyContainer } from '@component-controls/components'; +import simpleColorConverter from 'simple-color-converter'; +import { colorToStr, mostReadable } from '../utils'; +import { ColorBlockProps, ColorValue } from '../types'; +import { GridContainerProps, GridContainer } from '../GridContainer'; + +/** + * Color item displaying the color as a block and color aliases for various standard is Pantone, CMYK. + * If specified, will display the dark color as a bottom-right side triangle. + * Design inspired from [Backpack](https://backpack.github.io/guidelines/colors). + */ +export const ColorBlock7: FC = ({ name, color, sx }) => { + const colorObj: ColorValue = + typeof color === 'string' ? { value: color, name: '' } : color; + const { value: colorValue, name: colorName, dark } = colorObj; + const darkColorObj: ColorValue | undefined = + typeof dark === 'string' ? { value: dark, name: dark } : dark; + const { value: darkValue, name: darkName } = darkColorObj || {}; + const { hex, rgba } = colorToStr(colorValue); + const textColor = mostReadable(hex); + const { color: cmyk } = new simpleColorConverter({ + rgba, + to: 'cmyk', + }); + const { color: pantone } = new simpleColorConverter({ + rgba, + to: 'pantone', + }); + return ( + + + + + {typeof darkValue !== 'undefined' && ( + + )} + {`${name || hex} ${ + typeof darkName !== 'string' ? colorName : '' + }`} +
+ {typeof darkName !== 'string' ? ( +
+
+ {`RGB ${rgba.r}, ${rgba.g}, ${rgba.b}${ + rgba.a !== 1 ? `, ${rgba.a}` : '' + }`} +
+
{`HEX ${hex}`}
+
{`CMYK: ${cmyk.c}, ${cmyk.m}, ${cmyk.y}, ${cmyk.k}`}
+
{`${ + pantone ? `PMS ${pantone}` : '--' + }`}
+
+ ) : ( +
+
{`light: ${colorName}`}
+
{`dark: ${darkName}`}
+
+ )} +
+ + + + + ); +}; + +/** + * + * palette displayed with ColorBlock6 items + * using a css grid for the dsplay + */ +export const ColorBlock7Palette: FC> = props => ( + + {({ name, value }) => ( + + )} + +); diff --git a/ui/design-tokens/src/Colors/ColorBlock7/index.ts b/ui/design-tokens/src/Colors/ColorBlock7/index.ts new file mode 100644 index 000000000..a5537f2a3 --- /dev/null +++ b/ui/design-tokens/src/Colors/ColorBlock7/index.ts @@ -0,0 +1 @@ +export * from './ColorBlock7'; diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts index 42d51dd0f..171faeee3 100644 --- a/ui/design-tokens/src/Colors/index.ts +++ b/ui/design-tokens/src/Colors/index.ts @@ -4,3 +4,4 @@ export * from './ColorBlock3'; export * from './ColorBlock4'; export * from './ColorBlock5'; export * from './ColorBlock6'; +export * from './ColorBlock7'; diff --git a/ui/design-tokens/src/Colors/types.ts b/ui/design-tokens/src/Colors/types.ts index d559b6ef1..d50f083af 100644 --- a/ui/design-tokens/src/Colors/types.ts +++ b/ui/design-tokens/src/Colors/types.ts @@ -1,7 +1,9 @@ import { FC, ReactNode } from 'react'; import { SxProps } from 'theme-ui'; -export type ColorValue = string | { name: string; value: string }; +export type ColorValue = + | string + | { name?: string; value: string; dark?: ColorValue }; export interface ColorProps { /** * name of the color, If none, or same as the color value, some color blocks will not display it