@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
66 lines (41 loc) • 1.97 kB
text/mdx
import {ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
import Overview from './examples/Overview';
<InformationHighlight variant="caution" className="sb-unstyled" cs={{p: {margin: 0}}}>
<InformationHighlight.Icon />
<InformationHighlight.Body>
The tokens documented below are deprecated and will be removed in a future release. You must
migrate to the new Canvas Tokens Web package to ensure continued support and access to the
latest tokens.
</InformationHighlight.Body>
<InformationHighlight.Link href="/canvas-kit/?path=/docs/guides-tokens-migration-overview--docs">
See migration guide
</InformationHighlight.Link>
</InformationHighlight>
Tokens are the smallest pieces of our Design System with the primary function of storing UI
information. They enable building components and patterns with consistency across our platforms.
<ExampleCodeBlock code={Overview} />
<br />
<ExampleCodeBlock code={BorderRadius} />
Our color system enables consistency and recognition across many contexts. There are 27 sets of hues
with six shades in each color set.
<ExampleCodeBlock code={Colors} />
Light and shadows are utilized to indicate a sense of depth. This establishes hierarchy and provides
predictability within the Canvas user interface.
<ExampleCodeBlock code={Depth} />
This guide will help you make decisions when spacing elements in your designs using our space Tokens
<ExampleCodeBlock code={Space} />
Typography is at the core of our interface. With it, we create clear hierarchies that guide users
through our products.
<ExampleCodeBlock code={Type} />