diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx index acb5b6785..2291c2351 100644 --- a/examples/stories/src/tutorial/design/tokens/colors.mdx +++ b/examples/stories/src/tutorial/design/tokens/colors.mdx @@ -18,6 +18,7 @@ import { BackpackColorPalette, BaseWebColorPalette, BoltColorPalette, + CanvasColorPalette, } from '@component-controls/design-tokens'; # Overview @@ -338,4 +339,56 @@ import { BoltColorPalette } from '@component-controls/design-tokens'; Black: { value: '#151619', varName: 'var(--bolt-color-black)' }, White: { value: '#ffffff', varName: 'var(--bolt-color-white)' }, }} +/> + +## CanvasColor + +The [CanvasColor](/api/design-tokens-colors-canvascolor--overview) component displays the color as a row, with color, name, sass variable name and hex value. + +Design inspired from [Canvas Design System](https://canvas.hubspot.com/styles/colors). + +``` +import { CanvasColorPalette } from '@component-controls/design-tokens'; + + +``` + + \ No newline at end of file diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx index 936858550..146637512 100644 --- a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx +++ b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx @@ -17,18 +17,19 @@ export const BaseWebColor: FC = ({ name, color }) => { const textColor = mostReadable(hex); return ( - - + + = ({ name, color }) => { color: textColor, mr: 3, }} - > - - {name} - -
{hex.toUpperCase()}
+ /> + + + {name} - +
{hex.toUpperCase()}
+ ); }; diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx new file mode 100644 index 000000000..8237ed5d8 --- /dev/null +++ b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { CanvasColor, CanvasColorPalette } from './CanvasColor'; +import { ColorProps } from '../types'; + +export default { + title: 'Design Tokens/Colors/CanvasColor', + component: CanvasColor, +}; + +export const overview = ({ name, color }: ColorProps) => ( + +); + +overview.controls = { + name: { type: 'text', value: 'Primary' }, + color: { + type: 'object', + value: { + name: { type: 'text', value: 'LORAX' }, + sass: { type: 'text', value: '$color-lorax' }, + value: { type: 'color', value: '#ff7a59' }, + }, + }, +}; + +export const palette = () => ( + +); diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx new file mode 100644 index 000000000..9c0b1d899 --- /dev/null +++ b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx @@ -0,0 +1,104 @@ +/** @jsx jsx */ +import { FC } from 'react'; +import { jsx, Box, Theme } from 'theme-ui'; +import { CopyContainer } from '@component-controls/components'; +import { colorToStr, mostReadable } from '../utils'; +import { ColorBlockProps, ColorValue } from '../types'; +import { FlexContainerProps, FlexContainer } from '../FlexContainer'; + +/** + * Color item displaying as a row, with color, name, sass variable name and hex value + * Design inspired from [Canvas Design System](https://canvas.hubspot.com/styles/colors). + */ + +export const CanvasColor: FC = ({ name, color }) => { + const colorObj: ColorValue = + typeof color === 'string' ? { value: color } : color; + const { value: colorValue, name: colorName, sass } = colorObj; + + const { hex } = colorToStr(colorValue); + const textColor = mostReadable(hex); + return ( + + `1px solid ${t.colors?.shadow}`, + bg: 'background', + }} + > + + + {name} + + + +
+
+ {colorName} +
{hex}
+
+
{sass}
+
+ + + + ); +}; + +/** + * + * palette displayed with CanvasColor items + * using a css flex display direction column + */ +export const CanvasColorPalette: FC> = props => ( + + {({ name, value, hover }) => ( + + )} + +); diff --git a/ui/design-tokens/src/Colors/CanvasColor/index.ts b/ui/design-tokens/src/Colors/CanvasColor/index.ts new file mode 100644 index 000000000..66c79a843 --- /dev/null +++ b/ui/design-tokens/src/Colors/CanvasColor/index.ts @@ -0,0 +1 @@ +export * from './CanvasColor'; diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts index 63666f37a..21cec9a6f 100644 --- a/ui/design-tokens/src/Colors/index.ts +++ b/ui/design-tokens/src/Colors/index.ts @@ -7,3 +7,4 @@ export * from './AudiDSColor'; export * from './BackpackColor'; export * from './BaseWebColor'; export * from './BoltColor'; +export * from './CanvasColor'; diff --git a/ui/design-tokens/src/Colors/types.ts b/ui/design-tokens/src/Colors/types.ts index 1a48808d6..130f33a2a 100644 --- a/ui/design-tokens/src/Colors/types.ts +++ b/ui/design-tokens/src/Colors/types.ts @@ -2,7 +2,13 @@ import { FC, ReactNode } from 'react'; export type ColorValue = | string - | { name?: string; value: string; dark?: ColorValue; varName?: string }; + | { + name?: string; + value: string; + dark?: ColorValue; + varName?: string; + sass?: string; + }; export interface ColorProps { /** * name of the color, If none, or same as the color value, some color blocks will not display it