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';


# Tokens <StorybookStatusIndicator type="deprecated" />

<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 />

## Border Radius

### Usage

<ExampleCodeBlock code={BorderRadius} />

## Colors

Our color system enables consistency and recognition across many contexts. There are 27 sets of hues
with six shades in each color set.

### Usage

<ExampleCodeBlock code={Colors} />

## Depth

Light and shadows are utilized to indicate a sense of depth. This establishes hierarchy and provides
predictability within the Canvas user interface.

### Usage

<ExampleCodeBlock code={Depth} />

## Space

This guide will help you make decisions when spacing elements in your designs using our space Tokens

### Usage

<ExampleCodeBlock code={Space} />

## Type

Typography is at the core of our interface. With it, we create clear hierarchies that guide users
through our products.

### Usage

<ExampleCodeBlock code={Type} />