@workday/canvas-kit-docs/dist/mdx/tokens/TokenMigrationMappingSystem.mdx

Documentation components of Canvas Kit components

import {StorybookInformationHighlight} from './StorybookInformationHighlight';


# System Token Migration

## Space

- Use `system.size.*` tokens for width or height properties.
- Use `system.gap.*` tokens for outer spacing, like `gap` or `margin` properties.
- Use `system.padding.*` tokens for inner spacing, like `padding` properties.

| Old Token    | v2/v3 Token         |  v4 Token :: Size  |  v4 Token :: Gap  |  v4 Token :: Padding  | Raw Value |
| ------------ | ------------------- | :----------------: | :---------------: | :-------------------: | --------- |
| `space.zero` | `system.space.zero` |    `base.size0`    | `system.gap.none` | `system.padding.none` | `0`       |
| `space.xxxs` | `system.space.x1`   |   `base.size50`    |  `system.gap.xs`  | `system.padding.xxs`  | `4px`     |
| `space.xxs`  | `system.space.x2`   |   `base.size100`   |  `system.gap.sm`  |  `system.padding.xs`  | `8px`     |
| `space.xs`   | `system.space.x3`   |   `base.size150`   |         -         |  `system.padding.sm`  | `12px`    |
| `space.s`    | `system.space.x4`   | `system.size.xxxs` |  `system.gap.md`  |  `system.padding.md`  | `16px`    |
| `space.m`    | `system.space.x6`   |  `system.size.xs`  |  `system.gap.lg`  |  `system.padding.xl`  | `24px`    |
| `space.l`    | `system.space.x8`   |  `system.size.sm`  |  `system.gap.xl`  | `system.padding.xxl`  | `32px`    |
| `space.xl`   | `system.space.x10`  |  `system.size.md`  |         -         |           -           | `40px`    |
| `space.xxl`  | `system.space.x16`  | `system.size.xxl`  | `system.gap.xxl`  |           -           | `64px`    |
| `space.xxxl` | `system.space.x20`  |  `base.size1000`   |         -         |           -           | `80px`    |

**Example migration**

```javascript
// Old
import {space} from '@workday/canvas-kit-react/tokens';
const styles = createStyles({
  padding: space.l,
  margin: space.m,
});

// New
import {system} from '@workday/canvas-tokens-web';
const styles = createStyles({
  padding: system.padding.xxl,
  margin: system.gap.lg,
});
```

## Shape (Border Radius) Token Migration

| Old Token             | v2/v3 Token          | v4 Token            | Raw Value |
| --------------------- | -------------------- | ------------------- | --------- |
| `borderRadius.zero`   | `system.shape.zero`  | `system.shape.none` | `0`       |
| `borderRadius.s`      | `system.shape.half`  | `px2rem(2)`         | `2px`     |
| `borderRadius.m`      | `system.shape.x1`    | `system.shape.sm`   | `4px`     |
| `borderRadius.l`      | `system.shape.x2`    | `system.shape.md`   | `8px`     |
| `borderRadius.circle` | `system.shape.round` | `system.shape.full` | `1000px`  |

**Example migration**

```javascript
// Old
borderRadius: borderRadius.m;

// New
borderRadius: system.shape.sm;
```

## Typography Token Migration

### Font Family

| Old Token                                | New Token                   |
| ---------------------------------------- | --------------------------- |
| `type.properties.fontFamilies.default`   | `system.fontFamily.default` |
| `type.properties.fontFamilies.monospace` | `system.fontFamily.mono`    |

### Font Size

| Old Token                       | v2/v3 Token                      | v4 Token                     |
| ------------------------------- | -------------------------------- | ---------------------------- |
| `type.properties.fontSizes[10]` | `system.fontSize.subtext.small`  | `system.fontSize.subtext.sm` |
| `type.properties.fontSizes[12]` | `system.fontSize.subtext.medium` | `system.fontSize.subtext.md` |
| `type.properties.fontSizes[14]` | `system.fontSize.subtext.large`  | `system.fontSize.subtext.lg` |
| `type.properties.fontSizes[16]` | `system.fontSize.body.small`     | `system.fontSize.body.sm`    |
| `type.properties.fontSizes[18]` | `system.fontSize.body.medium`    | `system.fontSize.body.md`    |
| `type.properties.fontSizes[20]` | `system.fontSize.body.large`     | `system.fontSize.body.lg`    |
| `type.properties.fontSizes[24]` | `system.fontSize.heading.small`  | `system.fontSize.heading.sm` |
| `type.properties.fontSizes[28]` | `system.fontSize.heading.medium` | `system.fontSize.heading.md` |
| `type.properties.fontSizes[32]` | `system.fontSize.heading.large`  | `system.fontSize.heading.lg` |
| `type.properties.fontSizes[40]` | `system.fontSize.title.small`    | `system.fontSize.title.sm`   |
| `type.properties.fontSizes[48]` | `system.fontSize.title.medium`   | `system.fontSize.title.md`   |
| `type.properties.fontSizes[56]` | `system.fontSize.title.large`    | `system.fontSize.title.lg`   |

### Font Weight Mappings

| Old Token                             | New Token                  |
| ------------------------------------- | -------------------------- |
| `type.properties.fontWeights.regular` | `system.fontWeight.normal` |
| `type.properties.fontWeights.medium`  | `system.fontWeight.medium` |
| `type.properties.fontWeights.bold`    | `system.fontWeight.bold`   |

### Type Levels (Recommended)

Use complete type level tokens for consistency:

```javascript
// Old
import { type } from '@workday/canvas-kit-react/tokens';
...type.levels.body.medium

// New
import { system } from '@workday/canvas-tokens-web';
...system.type.body.md
```

### Type Variants → Text Colors

Type variants are replaced with semantic text color tokens:

| Old Token              | v2/v3 Token                          | v4 Token                           |
| ---------------------- | ------------------------------------ | ---------------------------------- |
| `type.variant.error`   | `system.color.text.critical.default` | `system.color.fg.critical.default` |
| `type.variant.hint`    | `system.color.text.hint`             | `system.color.fg.muted.default`    |
| `type.variant.inverse` | `system.color.text.inverse`          | `system.color.fg.inverse`          |

### Depth (Shadow) Token Migration

```javascript
// Old depth tokens → New system depth tokens
depth[1] → system.depth[1]
depth[2] → system.depth[2]
// ... etc

// Important: Use boxShadow property (not depth)
// Old
const styles = createStyles({
  ...depth[1]
});

// New
const styles = createStyles({
  boxShadow: system.depth[1],
});
```