From d1fca6c8436f9d1e1c67bca00c05aa8a9d273079 Mon Sep 17 00:00:00 2001 From: Alan B Smith Date: Wed, 3 Apr 2024 17:13:10 -0600 Subject: [PATCH] docs: Add system color stories [skip release] (#102) This PR adds initial system color token docs [category:Documentation] --- .../components/ColorGrid.tsx | 83 ++++++++++++++++--- .../system/ColorBackground.stories.mdx | 57 +++++++++++++ .../stories/system/ColorBorder.stories.mdx | 46 ++++++++++ .../system/ColorForeground.stories.mdx | 42 ++++++++++ .../stories/system/ColorIcon.stories.mdx | 45 ++++++++++ .../stories/system/ColorStatic.stories.mdx | 35 ++++++++ .../stories/system/ColorText.stories.mdx | 43 ++++++++++ .../system/examples/Color/Background.tsx | 57 +++++++++++++ .../stories/system/examples/Color/Border.tsx | 49 +++++++++++ .../system/examples/Color/Foreground.tsx | 34 ++++++++ .../stories/system/examples/Color/Icon.tsx | 41 +++++++++ .../stories/system/examples/Color/Static.tsx | 16 ++++ .../stories/system/examples/Color/Text.tsx | 34 ++++++++ 13 files changed, 570 insertions(+), 12 deletions(-) create mode 100644 packages/canvas-tokens-docs/stories/system/ColorBackground.stories.mdx create mode 100644 packages/canvas-tokens-docs/stories/system/ColorBorder.stories.mdx create mode 100644 packages/canvas-tokens-docs/stories/system/ColorForeground.stories.mdx create mode 100644 packages/canvas-tokens-docs/stories/system/ColorIcon.stories.mdx create mode 100644 packages/canvas-tokens-docs/stories/system/ColorStatic.stories.mdx create mode 100644 packages/canvas-tokens-docs/stories/system/ColorText.stories.mdx create mode 100644 packages/canvas-tokens-docs/stories/system/examples/Color/Background.tsx create mode 100644 packages/canvas-tokens-docs/stories/system/examples/Color/Border.tsx create mode 100644 packages/canvas-tokens-docs/stories/system/examples/Color/Foreground.tsx create mode 100644 packages/canvas-tokens-docs/stories/system/examples/Color/Icon.tsx create mode 100644 packages/canvas-tokens-docs/stories/system/examples/Color/Static.tsx create mode 100644 packages/canvas-tokens-docs/stories/system/examples/Color/Text.tsx diff --git a/packages/canvas-tokens-docs/components/ColorGrid.tsx b/packages/canvas-tokens-docs/components/ColorGrid.tsx index 175086d..d87901d 100644 --- a/packages/canvas-tokens-docs/components/ColorGrid.tsx +++ b/packages/canvas-tokens-docs/components/ColorGrid.tsx @@ -1,6 +1,48 @@ import * as React from 'react'; import {TokenGrid, formatJSVar} from './TokenGrid'; +const sortMap: Record = { + softer: 0, + soft: 1, + default: 2, + strong: 3, + stronger: 4, +}; + +export function sortSystemColorPalette(a: ColorSwatch, b: ColorSwatch) { + const aLevel = a.cssVar.split('-').at(-1) || ''; + const bLevel = b.cssVar.split('-').at(-1) || ''; + const first = aLevel in sortMap ? sortMap[aLevel] : Infinity; + const second = bLevel in sortMap ? sortMap[bLevel] : Infinity; + return first - second; +} + +export function buildPalette(prefix: string, tokens: Record) { + return Object.entries(tokens).map(([value, varName]) => + buildColorSwatch(varName, `${prefix}.${value}`) + ); +} + +export function buildPaletteGroup( + prefix: string, + tokens: object, + sortFn?: (a: ColorSwatch, b: ColorSwatch) => number +) { + return Object.entries(tokens) + .map(([key, value]) => { + if (typeof value === 'string') { + return buildColorSwatch(value, `${prefix}.${key}`); + } else { + const palette = buildPalette(`${prefix}.${key}`, value); + if (sortFn) { + return palette.sort(sortFn); + } + return palette; + } + }) + .flat(); +} + export interface ColorSwatch { /** The name of the CSS variable */ cssVar: string; @@ -21,9 +63,12 @@ export function buildColorSwatch(varName: string, jsVarName: string): ColorSwatc }; } +type VariableType = 'css' | 'javascript' | 'all'; + interface ColorGridProps { name: string; palette: ColorSwatch[]; + variableType?: VariableType; } /** transform 'camelCase' names into 'spaced case' */ @@ -43,25 +88,39 @@ function getSwatchStyles(token: ColorSwatch) { return {[property]: `var(${token.cssVar})`}; } +function getHeadings(type: VariableType) { + const defaultHeadings = ['Swatch', 'Value']; + if (type === 'css') { + defaultHeadings.splice(1, 0, 'CSS Variable'); + } else if (type === 'javascript') { + defaultHeadings.splice(1, 0, 'JS Variable'); + } else { + defaultHeadings.splice(1, 0, 'CSS Variable', 'JS Variable'); + } + return defaultHeadings; +} + /** A configuration of TokenGrid to quickly build tables for colors */ -export function ColorGrid(props: ColorGridProps) { +export function ColorGrid({name, variableType = 'all', palette}: ColorGridProps) { return ( - + {token => ( <> - - {token.cssVar} - - - {token.jsVar} - + {variableType === 'css' || + ('all' && ( + + {token.cssVar} + + ))} + {variableType === 'javascript' || + ('all' && ( + + {token.jsVar} + + ))} {token.value} diff --git a/packages/canvas-tokens-docs/stories/system/ColorBackground.stories.mdx b/packages/canvas-tokens-docs/stories/system/ColorBackground.stories.mdx new file mode 100644 index 0000000..a95611b --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/ColorBackground.stories.mdx @@ -0,0 +1,57 @@ +import {Meta, Unstyled} from '@storybook/blocks'; + +import { + BackgroundColors, + BackgroundAlternateColors, + BackgroundMutedColors, + BackgroundContrastColors, + BackgroundStatusColors, +} from "./examples/Color/Background" + + + + + +# System Background Color Tokens + +System background color tokens provide values for surfaces. + +## Usage + +```ts +// styles.ts +import {system} from '@workday/canvas-tokens-web'; + +const styles = { + backgroundColor: `var(${system.color.bg.default})`, +}; +``` + +```css +// styles.css +.card { + background-color: var(--cnvs-sys-color-bg-default); +} +``` + +## Tokens + + + +--- + + + +--- + + + +--- + + + +--- + + + + \ No newline at end of file diff --git a/packages/canvas-tokens-docs/stories/system/ColorBorder.stories.mdx b/packages/canvas-tokens-docs/stories/system/ColorBorder.stories.mdx new file mode 100644 index 0000000..4dd893b --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/ColorBorder.stories.mdx @@ -0,0 +1,46 @@ +import {Meta, Unstyled} from '@storybook/blocks'; +import {BorderColors, BorderContrastColors, BorderInputColors, BorderStatusColors } from './examples/Color/Border'; + + + + + +# System Border Color Tokens + +System border color tokens provide values to create clear delineations between content. + +## Usage + +```ts +// styles.ts +import {system} from '@workday/canvas-tokens-web'; + +const styles = { + borderColor: `var(${system.color.border.container})`, +}; +``` + +```css +// styles.css +.card { + border-color: var(--cnvs-sys-color-border-container); +} +``` + +## Tokens + + + +--- + + + +--- + + + +--- + + + + diff --git a/packages/canvas-tokens-docs/stories/system/ColorForeground.stories.mdx b/packages/canvas-tokens-docs/stories/system/ColorForeground.stories.mdx new file mode 100644 index 0000000..f2123b5 --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/ColorForeground.stories.mdx @@ -0,0 +1,42 @@ +import {Meta, Unstyled} from '@storybook/blocks'; + +import { ForegroundColors, ForegroundStatusColors} from './examples/Color/Foreground'; + + + + + +# System Foreground Color Tokens + +System foreground color tokens provide values for foreground elements. + +## Usage + +```ts +// styles.ts +import {system} from '@workday/canvas-tokens-web'; + +const styles = { + color: `var(${system.color.fg.default})`, +}; +``` + +```css +// styles.css +.card { + color: var(--cnvs-sys-color-fg-default); +} +``` + +## Tokens + + + +--- + + + +--- + + + diff --git a/packages/canvas-tokens-docs/stories/system/ColorIcon.stories.mdx b/packages/canvas-tokens-docs/stories/system/ColorIcon.stories.mdx new file mode 100644 index 0000000..61125ac --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/ColorIcon.stories.mdx @@ -0,0 +1,45 @@ +import {Meta, Unstyled} from '@storybook/blocks'; +import {IconColors, IconPrimaryColors, IconStatusColors} from './examples/Color/Icon'; + + + + + +# System Icon Color Tokens + +System icon color tokens provide values for icons. + +## Usage + +```ts +// styles.ts +import {system} from '@workday/canvas-tokens-web'; + +const styles = { + color: `var(${system.color.icon.default})`, +}; +``` + +```css +// styles.css +.icon { + color: var(--cnvs-sys-color-icon-default); +} +``` + +## Tokens + + + +--- + + + +--- + + + +--- + + + diff --git a/packages/canvas-tokens-docs/stories/system/ColorStatic.stories.mdx b/packages/canvas-tokens-docs/stories/system/ColorStatic.stories.mdx new file mode 100644 index 0000000..e0aab0b --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/ColorStatic.stories.mdx @@ -0,0 +1,35 @@ +import {Meta, Unstyled} from '@storybook/blocks'; + +import { StaticColors } from "./examples/Color/Static" + + + + + +# System Static Color Tokens + +System static color tokens provide consistent color values. + +## Usage + +```ts +// styles.ts +import {system} from '@workday/canvas-tokens-web'; + +const styles = { + backgroundColor: `var(${system.color.static.blue.soft})`, +}; +``` + +```css +// styles.css +.info-card { + background-color: var(--cnvs-sys-color-static-blue-soft); +} +``` + +## Tokens + + + + diff --git a/packages/canvas-tokens-docs/stories/system/ColorText.stories.mdx b/packages/canvas-tokens-docs/stories/system/ColorText.stories.mdx new file mode 100644 index 0000000..4413f12 --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/ColorText.stories.mdx @@ -0,0 +1,43 @@ +import {Meta, Unstyled} from '@storybook/blocks'; + +import { TextColors, TextStatusColors } from "./examples/Color/Text" + + + + + +# System Text Color Tokens + +System text color tokens provide values for typography. + +## Usage + +```ts +// styles.ts +import {system} from '@workday/canvas-tokens-web'; + +const styles = { + color: `var(${system.color.text.default})`, +}; +``` + +```css +// styles.css +.card-text { + color: var(--cnvs-sys-color-text-default); +} +``` + +--- + +## Tokens + + + +--- + + + +--- + + \ No newline at end of file diff --git a/packages/canvas-tokens-docs/stories/system/examples/Color/Background.tsx b/packages/canvas-tokens-docs/stories/system/examples/Color/Background.tsx new file mode 100644 index 0000000..4eb6e71 --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/examples/Color/Background.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; +import {system} from '@workday/canvas-tokens-web'; + +import { + buildPalette, + buildPaletteGroup, + ColorGrid, + sortSystemColorPalette, +} from '../../../../components/ColorGrid'; + +const backgroundPalette = buildPalette('system.color.bg', { + default: system.color.bg.default, + transparent: system.color.bg.transparent, + translucent: system.color.bg.translucent, + overlay: system.color.bg.overlay, +}).sort(sortSystemColorPalette); + +export const BackgroundColors = () => ( + +); + +const alternatePalette = buildPalette('system.color.bg.alt', system.color.bg.alt).sort( + sortSystemColorPalette +); + +export const BackgroundAlternateColors = () => ( + +); + +const mutedPalette = buildPalette('system.color.bg.muted', system.color.bg.muted).sort( + sortSystemColorPalette +); + +export const BackgroundMutedColors = () => ( + +); + +const contrastPalette = buildPalette('system.color.bg.contrast', system.color.bg.contrast).sort( + sortSystemColorPalette +); + +export const BackgroundContrastColors = () => ( + +); +const statusPalettes = buildPaletteGroup( + 'system.color.bg', + { + positive: system.color.bg.positive, + caution: system.color.bg.caution, + critical: system.color.bg.critical, + }, + sortSystemColorPalette +); + +export const BackgroundStatusColors = () => ( + +); diff --git a/packages/canvas-tokens-docs/stories/system/examples/Color/Border.tsx b/packages/canvas-tokens-docs/stories/system/examples/Color/Border.tsx new file mode 100644 index 0000000..23b15c2 --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/examples/Color/Border.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import {system} from '@workday/canvas-tokens-web'; + +import { + buildPalette, + buildPaletteGroup, + ColorGrid, + sortSystemColorPalette, +} from '../../../../components/ColorGrid'; + +const borderPalette = buildPalette('system.color.border', { + container: system.color.border.container, + divider: system.color.border.divider, + primary: system.color.border.primary.default, + inverse: system.color.border.inverse, + transparent: system.color.border.transparent, +}).sort(sortSystemColorPalette); + +export const BorderColors = () => ; + +const contrastPalette = buildPalette( + 'system.color.border.contrast', + system.color.border.contrast +).sort(sortSystemColorPalette); + +export const BorderContrastColors = () => ( + +); + +const inputPalette = buildPalette('system.color.border.input', system.color.border.input).sort( + sortSystemColorPalette +); + +export const BorderInputColors = () => ( + +); + +const statusPalettes = buildPaletteGroup( + 'system.color.border', + { + caution: system.color.border.caution, + critical: system.color.border.critical, + }, + sortSystemColorPalette +); + +export const BorderStatusColors = () => ( + +); diff --git a/packages/canvas-tokens-docs/stories/system/examples/Color/Foreground.tsx b/packages/canvas-tokens-docs/stories/system/examples/Color/Foreground.tsx new file mode 100644 index 0000000..dece8a8 --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/examples/Color/Foreground.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import {system} from '@workday/canvas-tokens-web'; + +import { + buildPalette, + buildPaletteGroup, + ColorGrid, + sortSystemColorPalette, +} from '../../../../components/ColorGrid'; + +const foregroundPalette = buildPalette('system.color.fg', { + default: system.color.fg.default, + strong: system.color.fg.strong, + stronger: system.color.fg.stronger, + disabled: system.color.fg.disabled, + inverse: system.color.fg.inverse, +}).sort(sortSystemColorPalette); + +export const ForegroundColors = () => ( + +); + +const statusPalettes = buildPaletteGroup( + 'system.color.fg', + { + caution: system.color.fg.caution, + critical: system.color.fg.critical, + }, + sortSystemColorPalette +); + +export const ForegroundStatusColors = () => ( + +); diff --git a/packages/canvas-tokens-docs/stories/system/examples/Color/Icon.tsx b/packages/canvas-tokens-docs/stories/system/examples/Color/Icon.tsx new file mode 100644 index 0000000..99d3ea8 --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/examples/Color/Icon.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; +import {system} from '@workday/canvas-tokens-web'; + +import { + buildPalette, + buildPaletteGroup, + ColorGrid, + sortSystemColorPalette, +} from '../../../../components/ColorGrid'; + +const iconPalette = buildPalette('system.color.icon', { + default: system.color.icon.default, + soft: system.color.icon.soft, + strong: system.color.icon.strong, + inverse: system.color.icon.inverse, +}).sort(sortSystemColorPalette); + +export const IconColors = () => ; + +const iconPrimaryPalette = buildPalette( + 'system.color.icon.primary', + system.color.icon.primary +).sort(sortSystemColorPalette); + +export const IconPrimaryColors = () => ( + +); + +const iconStatusPalettes = buildPaletteGroup( + 'system.color.icon', + { + positive: system.color.icon.positive, + caution: system.color.icon.caution, + critical: system.color.icon.critical, + }, + sortSystemColorPalette +); + +export const IconStatusColors = () => ( + +); diff --git a/packages/canvas-tokens-docs/stories/system/examples/Color/Static.tsx b/packages/canvas-tokens-docs/stories/system/examples/Color/Static.tsx new file mode 100644 index 0000000..d6dbd1e --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/examples/Color/Static.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {system} from '@workday/canvas-tokens-web'; + +import { + buildPaletteGroup, + ColorGrid, + sortSystemColorPalette, +} from '../../../../components/ColorGrid'; + +const staticPalettes = buildPaletteGroup( + 'system.color.static', + system.color.static, + sortSystemColorPalette +); + +export const StaticColors = () => ; diff --git a/packages/canvas-tokens-docs/stories/system/examples/Color/Text.tsx b/packages/canvas-tokens-docs/stories/system/examples/Color/Text.tsx new file mode 100644 index 0000000..4b732ce --- /dev/null +++ b/packages/canvas-tokens-docs/stories/system/examples/Color/Text.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import {system} from '@workday/canvas-tokens-web'; + +import { + buildPalette, + buildPaletteGroup, + ColorGrid, + sortSystemColorPalette, +} from '../../../../components/ColorGrid'; + +const textPalette = buildPalette('system.color.text', { + default: system.color.text.default, + strong: system.color.text.strong, + stronger: system.color.text.stronger, + hint: system.color.text.hint, + disabled: system.color.text.disabled, + inverse: system.color.text.inverse, +}).sort(sortSystemColorPalette); + +export const TextColors = () => ; + +const statusPalettes = buildPaletteGroup( + 'system.color.text', + { + primary: system.color.text.primary, + caution: system.color.text.caution, + critical: system.color.text.critical, + }, + sortSystemColorPalette +); + +export const TextStatusColors = () => ( + +);