Canvas Design Tokens

https://github.com/workday/canvas-tokens
Admin
Workday Canvas Tokens provides design token infrastructure for various platforms and formats,...
Tokens:5,989
Snippets:52
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Canvas Tokens Web Package

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/GettingStarted.mdx

Command to install the `@workday/canvas-tokens-web` package using npm. This package provides Canvas design tokens for web applications.

```sh
npm install @workday/canvas-tokens-web
```

--------------------------------

### Integrate Canvas Tokens in Storybook

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/GettingStarted.mdx

Example of importing Canvas design token CSS variables into a Storybook `preview.ts` file. This ensures the tokens are available in every story within Storybook.

```ts
// .storybook/preview.ts
import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
```

--------------------------------

### Start Storybook Locally

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Launches the Storybook development server, allowing developers to view token documentation and visual tests in a local browser environment.

```sh
yarn storybook
```

--------------------------------

### Initialize Project Repository

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Clones the Canvas Tokens repository from GitHub and installs its dependencies using Yarn, preparing the project for local development.

```sh
git clone https://github.com/workday/canvas-tokens.git
yarn install
```

--------------------------------

### Import Canvas Tokens CSS Variables

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/GettingStarted.mdx

Examples of importing Canvas design token CSS variables into an application. These imports should be at the top-level to prevent duplicate imports and avoid unintentional overwrites.

```css
/* index.css */
@import '@workday/canvas-tokens-web/css/base/_variables.css';
@import '@workday/canvas-tokens-web/css/system/_variables.css';
@import '@workday/canvas-tokens-web/css/brand/_variables.css';
```

```ts
// index.ts
import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
```

--------------------------------

### Updating Base Branch and Installing Dependencies

Source: https://github.com/workday/canvas-tokens/blob/main/CONTRIBUTING.md

Commands to ensure your local branch is up-to-date with the latest changes from the upstream 'main' branch and to install or update project dependencies using Yarn before starting development.

```sh
# pull the latest updates from the main branch
git pull upstream main
# install dependencies
yarn install
```

--------------------------------

### Create .env File from Example

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Copies the content of the `.env.example` file to a new `.env` file. This new file is ignored by Git and is used to store sensitive environment variables, such as GitHub personal access tokens.

```sh
cat .env.example > .env
```

--------------------------------

### Example Pull Request Description Format

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Provides a template for structuring pull request descriptions, including sections for linking to issues, summarizing changes, and specifying the release category for changelog generation.

```md
## Issue

Resolves #1234

## Summary

Description of the changes

## Release Category

Infrastructure
```

--------------------------------

### Use Canvas Tokens in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/GettingStarted.mdx

Demonstrates how to use Canvas design tokens as CSS variables within a CSS stylesheet to apply styling, referencing the imported variables.

```css
.card {
  padding: var(--cnvs-sys-space-x4);
}
```

--------------------------------

### Apply System Shadow Color Tokens

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorShadow.stories.mdx

This section illustrates how to integrate Workday Canvas system shadow color tokens into your stylesheets. It provides examples for both TypeScript, utilizing the `@workday/canvas-tokens-web` package, and direct CSS variable usage.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  boxShadow: `0 0 0 var(${system.color.shadow['1']})`,
};
```

```css
// styles.css
.card-text {
  boxshadow: 0 0 0 var(--cnvs-sys-color-shadow-1);
}
```

--------------------------------

### Apply Depth Token in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Depth.stories.mdx

Illustrates applying depth styles directly using CSS variables. This example shows how depth tokens can be consumed as CSS, Sass, or Less variables for direct styling.

```css
// styles.css
.card {
  background-color: var(--cnvs-sys-depth-2);
}
```

--------------------------------

### Use Canvas Tokens in JavaScript/TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/GettingStarted.mdx

Shows how to import and use Canvas design tokens as JavaScript variables, referencing CSS variable names for styling. This requires the CSS variables to also be imported.

```ts
import {system} from '@workday/canvas-tokens-web';

const cardStyles = {
  padding: `var(${system.space.x4})`,
};
```

--------------------------------

### Consume System Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Overview.stories.mdx

This example demonstrates how to import and use Workday Canvas System Tokens within a TypeScript or JavaScript application. It shows importing necessary CSS variable files and the `system` object, then applying token values like `depth[2]` and `space.x4` wrapped in `var()` for CSS properties.

```ts
// styles.ts
import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';
import {system} from '@workday/canvas-tokens-web';

const styles = {
  boxShadow: `var(${system.depth[2]})`,
  padding: `var(${system.space.x4})`
};
```

--------------------------------

### Applying System Background Color Tokens in Stylesheets

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorBackground.stories.mdx

This section demonstrates how to integrate and utilize system background color tokens within your application's stylesheets. Examples are provided for both TypeScript and standard CSS, showing how to reference the default background color token.

```typescript
// 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);
}
```

--------------------------------

### CSS Usage of System Static Color Tokens

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorStatic.stories.mdx

This example illustrates the direct application of Workday Canvas system static color tokens in a CSS stylesheet. It shows how to reference a token as a CSS custom property (`--cnvs-sys-color-static-blue-soft`) for styling an element's background.

```css
// styles.css
.info-card {
  background-color: var(--cnvs-sys-color-static-blue-soft);
}
```

--------------------------------

### Using Workday Canvas System Border Color Tokens

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorBorder.stories.mdx

Examples demonstrating how to apply Workday Canvas system border color tokens in both TypeScript and CSS to define border styles for UI elements.

```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);
}
```

--------------------------------

### Consume Base Tokens in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/base/Base.stories.mdx

This example shows how to use Canvas base tokens directly as CSS variables. It imports the necessary CSS variables and applies them to a `.button` class for `background-color` and `color`.

```css
// styles.css
@import '@workday/canvas-tokens-web/css/base/_variables.css';

.button {
  background-color: var(--cnvs-base-palette-blueberry-400);
  color: var(--cnvs-base-palette-french-vanilla-100);
}
```

--------------------------------

### Consume Brand Tokens in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/brand/Brand.stories.mdx

Brand tokens can also be consumed directly as CSS, Sass, or Less variables. This example demonstrates applying the same styles as the TypeScript example using direct CSS variable references.

```css
// styles.css
@import '@workday/canvas-tokens-web/css/base/_variables.css';
@import '@workday/canvas-tokens-web/css/brand/_variables.css';

.button {
  background-color: var(--cnvs-brand-primary-base);
  color: var(--cnvs-brand-primary-accent);
}
```

--------------------------------

### Using Workday Canvas Space Tokens Directly in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Space.stories.mdx

This example illustrates how Workday Canvas system space tokens can be directly consumed as CSS variables within a stylesheet. It shows applying layout styles such as `display`, `gap`, and `padding` using the `--cnvs-sys-space-x1` and `--cnvs-sys-space-x2` CSS variables. This method provides a direct way to apply consistent spacing without requiring JavaScript/TypeScript imports.

```css
// styles.css
.card {
  display: grid;
  gap: var(--cnvs-sys-space-x1);
  padding: var(--cnvs-sys-space-x2);
}
```

--------------------------------

### Consume Base Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/base/Base.stories.mdx

This example demonstrates how to import and use Canvas base tokens in a TypeScript file, referencing CSS variables for styling. It shows applying `backgroundColor` and `color` using token values from the `base` object.

```typescript
// styles.ts
import '@workday/canvas-tokens-web/css/base/_variables.css';
import {base} from '@workday/canvas-tokens-web';

const styles = {
  backgroundColor: `var(${base.blueberry400})`,
  color: `var(${base.frenchVanilla100})`,
};
```

--------------------------------

### Applying System Icon Color Tokens in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorIcon.stories.mdx

This example illustrates the direct application of a system icon color token using a CSS custom property. The `--cnvs-sys-color-icon-default` variable represents the default icon color, which can be used in any CSS rule.

```css
// styles.css
.icon {
  color: var(--cnvs-sys-color-icon-default);
}
```

--------------------------------

### Consume System Tokens in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Overview.stories.mdx

This example illustrates how to directly use Workday Canvas System Tokens as CSS variables. It includes `@import` statements for the base and system CSS variable files, then applies specific token values like `--cnvs-sys-depth-2` and `--cnvs-sys-space-x4` to CSS properties within a `.card` class.

```css
// styles.css
@import '@workday/canvas-tokens-web/css/base/_variables.css';
@import '@workday/canvas-tokens-web/css/system/_variables.css';

.card {
  background-color: var(--cnvs-sys-depth-2);
  padding: var(--cnvs-sys-space-x4);
}
```

--------------------------------

### Consume Brand Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/brand/Brand.stories.mdx

Brand tokens can be consumed as a JavaScript / TypeScript object. Each token value references the CSS variable from a base token, requiring those CSS variables to be imported. CSS custom properties need to be wrapped in `var()` to be valid. The example imports CSS variables directly for clarity, but a top-level import is generally recommended to avoid redundancy.

```ts
// styles.ts
import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
import {brand} from '@workday/canvas-tokens-web';

const styles = {
  backgroundColor: `var(${brand.primary.base})`,
  color: `var(${brand.primary.accent})`,
};
```

--------------------------------

### Forking Repository with GitHub CLI

Source: https://github.com/workday/canvas-tokens/blob/main/CONTRIBUTING.md

Demonstrates how to fork the Workday/canvas-tokens repository using the GitHub CLI tool, which is a prerequisite for making contributions.

```sh
gh fork repo Workday/canvas-tokens
```

--------------------------------

### Build and Serve Static Storybook

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Compiles Storybook into a static application and then serves it locally, which is useful for debugging issues related to the static build of the documentation.

```sh
yarn build-storybook
yarn serve-storybook
```

--------------------------------

### Cloning and Configuring Git Remotes

Source: https://github.com/workday/canvas-tokens/blob/main/CONTRIBUTING.md

Instructions for cloning the forked repository locally, renaming the default 'origin' remote to 'upstream' to track the main repository, and setting your personal fork as the new 'origin' remote for pushing changes.

```sh
# clone the repo
gh repo clone Workday/canvas-tokens
# change the directory
cd canvas-tokens
# rename the origin remote to upstream
git remote rename origin upstream
# set the origin remote to your fork
git remote add origin git@github.com:[your-username]/canvas-tokens.git
```

--------------------------------

### Publish Package to npm

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Publishes the `@workday/canvas-tokens` package to the npm registry. This process requires an authenticated npm token to be configured.

```sh
yarn release
```

--------------------------------

### Build Canvas Design Tokens

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Executes the build process for all design tokens within the `@workday/canvas-tokens` package, generating the necessary output files for consumption.

```sh
yarn build:tokens
```

--------------------------------

### Apply System Text Color Token in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorText.stories.mdx

Demonstrates how to import and use a system text color token (`system.color.text.default`) from `@workday/canvas-tokens-web` in a TypeScript file for styling purposes.

```typescript
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  color: `var(${system.color.text.default})`,
};
```

--------------------------------

### Create Pull Request for Token Updates

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Initiates a pull request to merge the `tokens-studio-sync` branch into a specified target branch (defaulting to `main`), consolidating token configuration updates. It will fail if a PR already exists.

```sh
yarn tokens-config create-pull
```

```sh
yarn yarn tokens-config create-pull prerelease/major
```

--------------------------------

### TypeScript Usage of System Static Color Tokens

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorStatic.stories.mdx

This snippet demonstrates how to import and utilize Workday Canvas system static color tokens within a TypeScript file. It shows accessing a specific color token (`blue.soft`) and applying it as a CSS variable for a background color.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  backgroundColor: `var(${system.color.static.blue.soft})`,
};
```

--------------------------------

### Creating a Pull Request with GitHub CLI

Source: https://github.com/workday/canvas-tokens/blob/main/CONTRIBUTING.md

Command to initiate the creation of a pull request from your current branch using the GitHub CLI tool, streamlining the submission process.

```sh
gh pr create
```

--------------------------------

### Apply Default Foreground Color in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorForeground.stories.mdx

Demonstrates how to apply the default system foreground color token using the `@workday/canvas-tokens-web` library in a TypeScript file.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  color: `var(${system.color.fg.default})`,
};
```

--------------------------------

### Sync Token Configurations Manually

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Fetches and updates token configurations from the Canvas Tokens Studio repository. By default, it syncs base, brand, and system tokens, but can be specified to sync only a particular type.

```sh
yarn tokens-config sync
```

```sh
# only sync base tokens
yarn tokens-config sync base
```

--------------------------------

### Run Unit Tests

Source: https://github.com/workday/canvas-tokens/blob/main/MAINTAINING.md

Executes all unit tests using Jest to verify the internal logic and functionality of the project components.

```sh
yarn test
```

--------------------------------

### Apply Font Size Tokens in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Type.stories.mdx

Shows how to consume font size tokens as CSS variables. This allows for direct application of font size styles in CSS, Sass, or Less.

```css
// styles.css
h2 {
  font-size: var(--cnvs-sys-font-size-heading-small);
}
```

--------------------------------

### Using System Icon Color Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorIcon.stories.mdx

This snippet demonstrates how to import and apply a system icon color token within a TypeScript stylesheet. It utilizes the `@workday/canvas-tokens-web` package to access the default icon color token, `system.color.icon.default`, and applies it as a CSS variable.

```typescript
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  color: `var(${system.color.icon.default})`,
};
```

--------------------------------

### Using Workday Canvas Space Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Space.stories.mdx

This snippet demonstrates how to import and utilize Workday Canvas system space tokens within a TypeScript file. The tokens are consumed as properties of the `system.space` object from `@workday/canvas-tokens-web` and are used to define CSS properties like `gap` and `padding` with `var()` to reference their underlying CSS variables. This approach requires the corresponding base CSS variables to be imported into the application.

```typescript
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  display: 'grid',
  gap: `var(${system.space.x1})`,
  padding: `var(${system.space.x2})`,
};
```

--------------------------------

### Apply Type Level Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Type.stories.mdx

Demonstrates how to consume system type level tokens as a JavaScript/TypeScript object to define heading and body styles. These tokens compose lower-level type tokens into predefined levels.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const headingStyles = {
  ...system.type.levels.heading.small,
}

const bodyStyles = {
  minWidth: 48rem;
  ...system.type.levels.body.small,
};
```

--------------------------------

### Apply Font Weight Tokens in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Type.stories.mdx

Illustrates how to consume font weight tokens as CSS variables. This method enables direct application of font weight styles in CSS, Sass, or Less.

```css
// styles.css
.bold {
  font-weight: var(--cnvs-sys-font-weight-bold);
}
```

--------------------------------

### Committing and Pushing Changes with Conventional Commits

Source: https://github.com/workday/canvas-tokens/blob/main/CONTRIBUTING.md

Steps to stage your modifications, create a commit message adhering to conventional commit standards (e.g., 'fix(web): Fixes release action' for automated changelog generation), and push your committed changes to your remote fork.

```sh
# stage your changes
git add .
# create a commit
git commit -m "fix(web): Fixes release action"
# push your changes
git push
```

--------------------------------

### Consume Shape Tokens in TypeScript/JavaScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Shape.stories.mdx

Demonstrates how to import and use system shape tokens as a JavaScript/TypeScript object, referencing CSS variables from `@workday/canvas-tokens-web`. This method allows programmatic access to token values.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  borderRadius: `var(${system.shape.x2})`,
};
```

--------------------------------

### Creating a New Git Branch

Source: https://github.com/workday/canvas-tokens/blob/main/CONTRIBUTING.md

Command to create a new Git branch, conventionally named after the GitHub issue number (e.g., 'ISSUE-4'), where you will implement your changes.

```sh
git checkout -b ISSUE-4
```

--------------------------------

### Apply Font Weight Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Type.stories.mdx

Demonstrates how to consume font weight tokens as a JavaScript/TypeScript object. These tokens are useful for adjusting font weight without overwriting other font styles.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  fontWeight: `var(${system.fontWeight.bold})`,
};
```

--------------------------------

### Apply Default Foreground Color in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorForeground.stories.mdx

Shows how to apply the default system foreground color token directly in a CSS stylesheet using a CSS variable.

```css
// styles.css
.card {
  color: var(--cnvs-sys-color-fg-default);
}
```

--------------------------------

### Apply Font Family Tokens in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Type.stories.mdx

Demonstrates how to consume font family tokens as CSS variables. This method allows for direct application of font family styles in CSS, Sass, or Less.

```css
// styles.css
code {
  font-family: var(--cnvs-sys-font-family-mono);
}
```

--------------------------------

### Apply Depth Token in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Depth.stories.mdx

Demonstrates how to consume a system depth token as a JavaScript/TypeScript object. The token value references a CSS variable from a base token, requiring those CSS variables to be imported in the application.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  boxShadow: `var(${system.depth[2]})`,
};
```

--------------------------------

### Apply Font Size Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Type.stories.mdx

Illustrates how to consume font size tokens as a JavaScript/TypeScript object. These tokens are designed for adjusting font size independently of other font styles.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  fontSize: `var(${system.fontSize.heading.small})`,
};
```

--------------------------------

### Apply Shape Tokens using CSS Variables

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Shape.stories.mdx

Illustrates applying shape tokens directly as CSS variables in a stylesheet. This method is suitable for direct styling within CSS, showing the equivalent usage to the JavaScript object method.

```css
// styles.css
.card {
  border-radius: var(--cnvs-sys-shape-x2);
}
```

--------------------------------

### Apply Font Family Tokens in TypeScript

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Type.stories.mdx

Shows how to consume font family tokens as a JavaScript/TypeScript object. These tokens are useful for adjusting the font family without affecting other font styles.

```ts
// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  fontFamily: `var(${system.fontFamily.mono})`,
};
```

--------------------------------

### Apply System Text Color Token in CSS

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/ColorText.stories.mdx

Illustrates how to use a CSS custom property (`--cnvs-sys-color-text-default`) to apply a system text color token in a CSS stylesheet.

```css
// styles.css
.card-text {
  color: var(--cnvs-sys-color-text-default);
}
```

--------------------------------

### Apply Type Level Tokens using CSS Classes in TSX

Source: https://github.com/workday/canvas-tokens/blob/main/packages/canvas-tokens-docs/stories/system/Type.stories.mdx

Illustrates how to apply type level tokens as CSS classes in a TSX component. In CSS, type level tokens are represented as classes rather than variables, providing a direct way to apply predefined styles.

```tsx
<h2 className="cnvs-sys-type-heading-small">Heading</h2>
<p className="cnvs-sys-type-body-small">Body text</p>
```
Tokens:
Raw