From f47ca67fb6feccad675356a9d614a0c9d8f302b4 Mon Sep 17 00:00:00 2001 From: atanasster Date: Wed, 30 Sep 2020 19:03:34 -0400 Subject: [PATCH] feat: add skyline color token --- .../src/tutorial/design/tokens/colors.mdx | 56 +++++- .../SkylineColor/SkylineColor.stories.tsx | 61 +++++++ .../src/Colors/SkylineColor/SkylineColor.tsx | 171 ++++++++++++++++++ .../src/Colors/SkylineColor/index.ts | 1 + ui/design-tokens/src/Colors/index.ts | 1 + .../TableContainer/TableContainer.tsx | 1 + ui/design-tokens/src/types.ts | 4 + 7 files changed, 294 insertions(+), 1 deletion(-) create mode 100644 ui/design-tokens/src/Colors/SkylineColor/SkylineColor.stories.tsx create mode 100644 ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx create mode 100644 ui/design-tokens/src/Colors/SkylineColor/index.ts diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx index 0598aa0f2..f22b8b86b 100644 --- a/examples/stories/src/tutorial/design/tokens/colors.mdx +++ b/examples/stories/src/tutorial/design/tokens/colors.mdx @@ -41,6 +41,7 @@ import { PrimerColorPalette, SeedsColorPalette, SeekColorPalette, + SkylineColorPalette, } from '@component-controls/design-tokens'; # Overview @@ -1608,4 +1609,57 @@ import { SeekColorPalette } from '@component-controls/design-tokens'; '@sk-pink': '#e60278', '@sk-green': '#157e00', }} -/> \ No newline at end of file +/> + + +## SkylineColor + +The [SkylineColor](/api/design-tokens-colors-skylinecolor--overview) component displays the color as a row, with color name, custom columns for contrast checks scss variable name and color block. + +Design inspired from [Skyline](https://skyline.benevity.org/design-language/color/#hues). + +``` +import { SkylineColorPalette } from '@component-controls/design-tokens'; + + +``` + + diff --git a/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.stories.tsx b/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.stories.tsx new file mode 100644 index 000000000..d50d40cf3 --- /dev/null +++ b/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.stories.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { ControlTypes } from '@component-controls/core'; +import { SkylineColor, SkylineColorPalette } from './SkylineColor'; +import { ColorProps } from '../../types'; + +export default { + title: 'Design Tokens/Colors/SkylineColor', + component: SkylineColor, +}; + +export const overview = ({ name, color }: ColorProps) => ( + +); + +overview.controls = { + name: 'Gray 600', + color: { + type: ControlTypes.OBJECT, + value: { + value: { type: ControlTypes.COLOR, value: '#757575' }, + description: + 'Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.', + scss: 'get-gray(600)', + }, + }, +}; + +export const palette = () => ( + +); diff --git a/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx b/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx new file mode 100644 index 000000000..17127f500 --- /dev/null +++ b/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx @@ -0,0 +1,171 @@ +/** @jsx jsx */ +import { FC } from 'react'; +import { jsx } from 'theme-ui'; +import { CopyContainer } from '@component-controls/components'; +import tinycolor from 'tinycolor2'; +import { CheckIcon, XIcon } from '@primer/octicons-react'; + +import { colorToStr, mostReadable } from '../utils'; +import { ColorBlockProps, ColorValue, colorContrast } from '../../types'; +import { TableContainerProps, TableContainer } from '../../components'; + +/** + * Color item displaying as a row, with color name, custom columns for contrast checks scss variable name and color block. + * Design inspired from [Skyline](https://skyline.benevity.org/design-language/color/#hues). + */ + +export const SkylineColor: FC = props => ( + + + + +
+); + +const PassTag: FC<{ contrast: number }> = ({ contrast }) => { + const pass = contrast > colorContrast.small.ratio; + return ( +
+ {pass ? ( + + ) : ( + + )} +
{pass ? 'Yes' : 'No'}
+
+ ); +}; + +export type ContrastColor = { + name: string; + color: string; +}; + +export type ContrastColors = ContrastColor[]; + +export const defaultContrastColors: ContrastColors = [ + { name: 'Use on White', color: '#ffffff' }, + { name: 'Use on Gray 200', color: '#f5f5f5' }, +]; +export type SkylineColorProps = { + contrastColors?: ContrastColors; +} & ColorBlockProps; + +const BaseSkylineColor: FC = ({ + name, + color, + contrastColors = defaultContrastColors, +}) => { + const colorObj: ColorValue = + typeof color === 'string' ? { value: color } : color; + const { value: colorValue, name: colorName = name, scss } = colorObj; + const { hex } = colorToStr(colorValue); + const textColor = mostReadable(hex); + const contrasts = contrastColors.map(contrastColor => + tinycolor.readability(hex, contrastColor.color), + ); + return ( + + +
{colorName}
+ + {contrasts.map((contrastRatio, index) => ( + + + + ))} + + {scss && ( + + + {scss} + + + )} + + + +
+
{hex}
+
+ + + + ); +}; + +/** + * + * palette displayed with SkylineColor items + * using a css flex display direction column + */ +export const SkylineColorPalette: FC<{ contrastColors?: ContrastColors } & Omit< + TableContainerProps, + 'children' | 'columns' +>> = ({ contrastColors = defaultContrastColors, ...props }) => ( + ({ title: contrastColor.name })), + { title: 'Scss', sx: { width: '30%' } }, + { title: 'Example' }, + ]} + sx={{ + border: 'none', + '& > tbody > tr > td': { + p: 2, + }, + '& > thead > tr > th': { + textAlign: 'left', + fontSize: 1, + fontWeight: 'heading', + py: 2, + }, + }} + {...props} + > + {({ name, value }) => ( + + )} + +); diff --git a/ui/design-tokens/src/Colors/SkylineColor/index.ts b/ui/design-tokens/src/Colors/SkylineColor/index.ts new file mode 100644 index 000000000..5f4d41677 --- /dev/null +++ b/ui/design-tokens/src/Colors/SkylineColor/index.ts @@ -0,0 +1 @@ +export * from './SkylineColor'; diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts index cac6231f4..78b2824ed 100644 --- a/ui/design-tokens/src/Colors/index.ts +++ b/ui/design-tokens/src/Colors/index.ts @@ -28,3 +28,4 @@ export * from './PhotonColor'; export * from './PrimerColor'; export * from './SeedsColor'; export * from './SeekColor'; +export * from './SkylineColor'; diff --git a/ui/design-tokens/src/components/TableContainer/TableContainer.tsx b/ui/design-tokens/src/components/TableContainer/TableContainer.tsx index ac236e502..220ec21d3 100644 --- a/ui/design-tokens/src/components/TableContainer/TableContainer.tsx +++ b/ui/design-tokens/src/components/TableContainer/TableContainer.tsx @@ -50,6 +50,7 @@ export const TableContainer: FC = ({ sx={{ mx: 1, textOverflow: 'ellipsis', + whiteSpace: 'nowrap', fontSize: 1, ...column.sx, }} diff --git a/ui/design-tokens/src/types.ts b/ui/design-tokens/src/types.ts index c050e44ac..f1086128d 100644 --- a/ui/design-tokens/src/types.ts +++ b/ui/design-tokens/src/types.ts @@ -24,6 +24,10 @@ export type ColorValue = * sass variable name ex: $text-input */ sass?: string; + /** + * scss variable name ex: $text-input + */ + scss?: string; /** * css class name ex text-input or --pf-global--link--Color */