import {StorybookInformationHighlight} from './StorybookInformationHighlight';


# Color Token Migration

<StorybookInformationHighlight
  title="Use system tokens over base tokens"
  description="The tables below provide mapping information for all token levels (base, system, brand) to help
    you migrate your usage. For most use cases, we highly recommend migrating to system tokens to make future maintaining easier."
/>

<br />

## Table of Contents

- [Base Color Mapping](#base-color-mapping)
- [Brand Color Migration](#brand-color-migration)
- [System Color Usage Guide (Recommended)](#system-color-usage-guide-recommended)
- [Migration Examples](#migration-examples)

## Base Color Mapping

Old base colors have a new base token value. Check
[these tables](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-visual-changes-base-deprecated-palette--docs)
to see visual changes.

> **Important:** Old "fruity" color tokens are deprecated and have been mapped to new palette
> colors. Note that the v3 color scale uses `oklch`, which differs from `rgb` or `hex`, so the new
> color may not be a perfect 1:1 match with the old token. It can cause **visual breaking changes**.
>
> In some cases, there may not be a direct replacement in the new palette, and the value may remain
> a deprecated token. In these situations, you may need to manually select a new color that best
> fits your needs. You can use
> [a comparison tool](https://stackblitz.com/edit/color-comparator?file=src%2FApp.tsx) to find the
> best match.

| Old Token                      | New Token                         | CSS Variable                         | System Color Replacement                                                                                  |
| ------------------------------ | --------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------- |
| `colors.cinnamon100`           | `base.red50`                      | `--cnvs-base-palette-red-50`         | sys.color.bg.critical.softer                                                                              |
| `colors.cinnamon200`           | `base.red100`                     | `--cnvs-base-palette-red-100`        | sys.color.bg.critical.soft                                                                                |
| `colors.cinnamon300`           | `base.red300`                     | `--cnvs-base-palette-red-300`        |                                                                                                           |
| `colors.cinnamon400`           | `base.red400`                     | `--cnvs-base-palette-red-400`        | sys.color.fg.critical.soft                                                                                |
| `colors.cinnamon500`           | `base.red600`                     | `--cnvs-base-palette-red-600`        | sys.color.bg.critical.default <br/> sys.color.fg.critical.default <br/> sys.color.border.critical.default |
| `colors.cinnamon600`           | `base.red700`                     | `--cnvs-base-palette-red-700`        | sys.color.bg.critical.strong <br/> sys.color.fg.critical.strong                                           |
| `colors.peach100`              | `base.coral50`                    | `--cnvs-base-palette-coral-50`       |                                                                                                           |
| `colors.peach200`              | `base.coral200`                   | `--cnvs-base-palette-coral-200`      |                                                                                                           |
| `colors.peach300`              | `base.coral300`                   | `--cnvs-base-palette-coral-300`      |                                                                                                           |
| `colors.peach400`              | `base.coral400`                   | `--cnvs-base-palette-coral-400`      |                                                                                                           |
| `colors.peach500`              | `base.coral600`                   | `--cnvs-base-palette-coral-600`      |                                                                                                           |
| `colors.peach600`              | `base.coral700`                   | `--cnvs-base-palette-coral-700`      |                                                                                                           |
| `colors.chiliMango100`         | `base.coral100`                   | `--cnvs-base-palette-coral-100`      |                                                                                                           |
| `colors.chiliMango200`         | `base.coral200`                   | `--cnvs-base-palette-coral-200`      |                                                                                                           |
| `colors.chiliMango300`         | `base.coral300`                   | `--cnvs-base-palette-coral-300`      |                                                                                                           |
| `colors.chiliMango400`         | `base.coral500`                   | `--cnvs-base-palette-coral-500`      |                                                                                                           |
| `colors.chiliMango500`         | `base.coral500`                   | `--cnvs-base-palette-coral-500`      |                                                                                                           |
| `colors.chiliMango600`         | `base.coral700`                   | `--cnvs-base-palette-coral-700`      |                                                                                                           |
| `colors.cantaloupe100`         | `base.amber50`                    | `--cnvs-base-palette-amber-50`       | sys.color.bg.caution.softer                                                                               |
| `colors.cantaloupe200`         | `base.amber200`                   | `--cnvs-base-palette-amber-200`      | sys.color.bg.caution.soft                                                                                 |
| `colors.cantaloupe300`         | `base.amber300`                   | `--cnvs-base-palette-amber-300`      |                                                                                                           |
| `colors.cantaloupe400`         | `base.amber400`                   | `--cnvs-base-palette-amber-400`      | sys.color.bg.caution.default <br/> sys.color.border.caution.default                                       |
| `colors.cantaloupe500`         | `base.amber500`                   | `--cnvs-base-palette-amber-500`      | sys.color.bg.caution.strong <br/> sys.color.fg.caution.softer                                             |
| `colors.cantaloupe600`         | `base.amber600`                   | `--cnvs-base-palette-amber-600`      | sys.color.bg.caution.stronger <br/> sys.color.border.caution.strong                                       |
| `colors.sourLemon100`          | `base.amber25`                    | `--cnvs-base-palette-amber-25`       |                                                                                                           |
| `colors.sourLemon200`          | `base.amber100`                   | `--cnvs-base-palette-amber-100`      |                                                                                                           |
| `colors.sourLemon300`          | `base.amber200`                   | `--cnvs-base-palette-amber-200`      |                                                                                                           |
| `colors.sourLemon400`          | `base.amber300`                   | `--cnvs-base-palette-amber-300`      |                                                                                                           |
| `colors.sourLemon500`          | `base.amber300`                   | `--cnvs-base-palette-amber-300`      |                                                                                                           |
| `colors.sourLemon600`          | `base.amber500`                   | `--cnvs-base-palette-amber-500`      |                                                                                                           |
| `colors.juicyPear100`          | `base.amber25`                    | `--cnvs-base-palette-amber-25`       |                                                                                                           |
| `colors.juicyPear200`          | `base.amber100`                   | `--cnvs-base-palette-amber-100`      |                                                                                                           |
| `colors.juicyPear300`          | `base.amber200`                   | `--cnvs-base-palette-amber-200`      |                                                                                                           |
| `colors.juicyPear400`          | `base.amber200`                   | `--cnvs-base-palette-amber-200`      |                                                                                                           |
| `colors.juicyPear500`          | `base.green500`                   | `--cnvs-base-palette-green-500`      |                                                                                                           |
| `colors.juicyPear600`          | `base.green700`                   | `--cnvs-base-palette-green-700`      |                                                                                                           |
| `colors.kiwi100`               | `base.green50`                    | `--cnvs-base-palette-green-50`       |                                                                                                           |
| `colors.kiwi200`               | `base.green100`                   | `--cnvs-base-palette-green-100`      |                                                                                                           |
| `colors.kiwi300`               | `base.green200`                   | `--cnvs-base-palette-green-200`      |                                                                                                           |
| `colors.kiwi400`               | `base.green500`                   | `--cnvs-base-palette-green-500`      |                                                                                                           |
| `colors.kiwi500`               | `base.green500`                   | `--cnvs-base-palette-green-500`      |                                                                                                           |
| `colors.kiwi600`               | `base.green700`                   | `--cnvs-base-palette-green-700`      |                                                                                                           |
| `colors.greenApple50`          | `base.green50`                    | `--cnvs-base-palette-green-50`       | sys.color.bg.positive.softer                                                                              |
| `colors.greenApple100`         | `base.green100`                   | `--cnvs-base-palette-green-100`      | sys.color.bg.positive.soft                                                                                |
| `colors.greenApple200`         | `base.green200`                   | `--cnvs-base-palette-green-200`      | sys.color.fg.positive.soft                                                                                |
| `colors.greenApple600`         | `base.green600`                   | `--cnvs-base-palette-green-600`      | sys.color.bg.positive.default <br/> sys.color.fg.positive.default                                         |
| `colors.greenApple700`         | `base.green700`                   | `--cnvs-base-palette-green-700`      | sys.color.bg.positive.strong <br/> sys.color.fg.positive.strong                                           |
| `colors.greenApple800`         | `base.green800`                   | `--cnvs-base-palette-green-800`      | sys.color.bg.positive.stronger <br/> sys.color.fg.positive.stronger                                       |
| `colors.watermelon100`         | `base.teal25`                     | `--cnvs-base-palette-teal-25`        |                                                                                                           |
| `colors.watermelon200`         | `base.teal100`                    | `--cnvs-base-palette-teal-100`       |                                                                                                           |
| `colors.watermelon300`         | `base.green100`                   | `--cnvs-base-palette-green-100`      |                                                                                                           |
| `colors.watermelon400`         | `base.green600`                   | `--cnvs-base-palette-green-600`      |                                                                                                           |
| `colors.watermelon500`         | `base.green700`                   | `--cnvs-base-palette-green-700`      |                                                                                                           |
| `colors.watermelon600`         | `base.green900`                   | `--cnvs-base-palette-green-900`      |                                                                                                           |
| `colors.jewel100`              | `base.teal25`                     | `--cnvs-base-palette-teal-25`        |                                                                                                           |
| `colors.jewel200`              | `base.teal200`                    | `--cnvs-base-palette-teal-200`       |                                                                                                           |
| `colors.jewel300`              | `base.teal400`                    | `--cnvs-base-palette-teal-400`       |                                                                                                           |
| `colors.jewel400`              | `base.teal500`                    | `--cnvs-base-palette-teal-500`       |                                                                                                           |
| `colors.jewel500`              | `base.teal600`                    | `--cnvs-base-palette-teal-600`       |                                                                                                           |
| `colors.jewel600`              | `base.teal700`                    | `--cnvs-base-palette-teal-700`       |                                                                                                           |
| `colors.toothpaste100`         | `base.azure50`                    | `--cnvs-base-palette-azure-50`       |                                                                                                           |
| `colors.toothpaste200`         | `base.azure200`                   | `--cnvs-base-palette-azure-200`      |                                                                                                           |
| `colors.toothpaste300`         | `base.azure300`                   | `--cnvs-base-palette-azure-300`      |                                                                                                           |
| `colors.toothpaste400`         | `base.azure500`                   | `--cnvs-base-palette-azure-500`      |                                                                                                           |
| `colors.toothpaste500`         | `base.azure700`                   | `--cnvs-base-palette-azure-700`      |                                                                                                           |
| `colors.toothpaste600`         | `base.azure800`                   | `--cnvs-base-palette-azure-800`      |                                                                                                           |
| `colors.blueberry100`          | `base.blue100`                    | `--cnvs-base-palette-blue-100`       |                                                                                                           |
| `colors.blueberry200`          | `base.blue100`                    | `--cnvs-base-palette-blue-100`       | sys.color.bg.primary.soft                                                                                 |
| `colors.blueberry300`          | `base.blue400`                    | `--cnvs-base-palette-blue-400`       | sys.color.fg.primary.soft                                                                                 |
| `colors.blueberry400`          | `base.blue600`                    | `--cnvs-base-palette-blue-600`       | sys.color.bg.primary.default <br/> sys.color.fg.primary.default <br/> sys.color.border.primary.default    |
| `colors.blueberry500`          | `base.blue700`                    | `--cnvs-base-palette-blue-700`       | sys.color.bg.primary.strong <br/> sys.color.fg.primary.strong                                             |
| `colors.blueberry600`          | `base.blue800`                    | `--cnvs-base-palette-blue-800`       | sys.color.bg.primary.stronger <br/> sys.color.text.primary.stronger                                       |
| `colors.plum100`               | `base.blue100`                    | `--cnvs-base-palette-blue-100`       |                                                                                                           |
| `colors.plum200`               | `base.blue200`                    | `--cnvs-base-palette-blue-200`       |                                                                                                           |
| `colors.plum300`               | `base.blue300`                    | `--cnvs-base-palette-blue-300`       |                                                                                                           |
| `colors.plum400`               | `base.blue400`                    | `--cnvs-base-palette-blue-400`       |                                                                                                           |
| `colors.plum500`               | `base.blue500`                    | `--cnvs-base-palette-blue-500`       |                                                                                                           |
| `colors.plum600`               | `base.blue600`                    | `--cnvs-base-palette-blue-600`       |                                                                                                           |
| `colors.berrySmoothie100`      | `base.indigo50`                   | `--cnvs-base-palette-indigo-50`      |                                                                                                           |
| `colors.berrySmoothie200`      | `base.indigo200`                  | `--cnvs-base-palette-indigo-200`     |                                                                                                           |
| `colors.berrySmoothie300`      | `base.indigo400`                  | `--cnvs-base-palette-indigo-400`     |                                                                                                           |
| `colors.berrySmoothie400`      | `base.blue500`                    | `--cnvs-base-palette-blue-500`       |                                                                                                           |
| `colors.berrySmoothie500`      | `base.blue700`                    | `--cnvs-base-palette-blue-700`       |                                                                                                           |
| `colors.berrySmoothie600`      | `base.blue800`                    | `--cnvs-base-palette-blue-800`       |                                                                                                           |
| `colors.blackberry100`         | `base.indigo25`                   | `--cnvs-base-palette-indigo-25`      |                                                                                                           |
| `colors.blackberry200`         | `base.indigo200`                  | `--cnvs-base-palette-indigo-200`     |                                                                                                           |
| `colors.blackberry300`         | `base.indigo400`                  | `--cnvs-base-palette-indigo-400`     |                                                                                                           |
| `colors.blackberry400`         | `base.indigo500`                  | `--cnvs-base-palette-indigo-500`     |                                                                                                           |
| `colors.blackberry500`         | `base.indigo700`                  | `--cnvs-base-palette-indigo-700`     |                                                                                                           |
| `colors.blackberry600`         | `base.indigo900`                  | `--cnvs-base-palette-indigo-900`     |                                                                                                           |
| `colors.islandPunch100`        | `base.purple25`                   | `--cnvs-base-palette-purple-25`      |                                                                                                           |
| `colors.islandPunch200`        | `base.purple200`                  | `--cnvs-base-palette-purple-200`     |                                                                                                           |
| `colors.islandPunch300`        | `base.purple500`                  | `--cnvs-base-palette-purple-500`     |                                                                                                           |
| `colors.islandPunch400`        | `base.purple500`                  | `--cnvs-base-palette-purple-500`     |                                                                                                           |
| `colors.islandPunch500`        | `base.purple700`                  | `--cnvs-base-palette-purple-700`     |                                                                                                           |
| `colors.islandPunch600`        | `base.purple800`                  | `--cnvs-base-palette-purple-800`     |                                                                                                           |
| `colors.grapeSoda100`          | `base.magenta50`                  | `--cnvs-base-palette-magenta-50`     |                                                                                                           |
| `colors.grapeSoda200`          | `base.magenta200`                 | `--cnvs-base-palette-magenta-200`    |                                                                                                           |
| `colors.grapeSoda300`          | `base.purple400`                  | `--cnvs-base-palette-purple-400`     |                                                                                                           |
| `colors.grapeSoda400`          | `base.purple500`                  | `--cnvs-base-palette-purple-500`     |                                                                                                           |
| `colors.grapeSoda500`          | `base.purple600`                  | `--cnvs-base-palette-purple-600`     |                                                                                                           |
| `colors.grapeSoda600`          | `base.purple800`                  | `--cnvs-base-palette-purple-800`     |                                                                                                           |
| `colors.pomegranate100`        | `base.magenta50`                  | `--cnvs-base-palette-magenta-50`     |                                                                                                           |
| `colors.pomegranate200`        | `base.magenta100`                 | `--cnvs-base-palette-magenta-100`    |                                                                                                           |
| `colors.pomegranate300`        | `base.magenta500`                 | `--cnvs-base-palette-magenta-500`    |                                                                                                           |
| `colors.pomegranate400`        | `base.magenta400`                 | `--cnvs-base-palette-magenta-400`    |                                                                                                           |
| `colors.pomegranate500`        | `base.red700`                     | `--cnvs-base-palette-red-700`        |                                                                                                           |
| `colors.pomegranate600`        | `base.red800`                     | `--cnvs-base-palette-red-800`        |                                                                                                           |
| `colors.fruitPunch100`         | `base.red25`                      | `--cnvs-base-palette-red-25`         |                                                                                                           |
| `colors.fruitPunch200`         | `base.red200`                     | `--cnvs-base-palette-red-200`        |                                                                                                           |
| `colors.fruitPunch300`         | `base.red300`                     | `--cnvs-base-palette-red-300`        |                                                                                                           |
| `colors.fruitPunch400`         | `base.red400`                     | `--cnvs-base-palette-red-400`        |                                                                                                           |
| `colors.fruitPunch500`         | `base.red400`                     | `--cnvs-base-palette-red-400`        |                                                                                                           |
| `colors.fruitPunch600`         | `base.red700`                     | `--cnvs-base-palette-red-700`        |                                                                                                           |
| `colors.rootBeer100`           | `base.coral25`                    | `--cnvs-base-palette-coral-25`       |                                                                                                           |
| `colors.rootBeer200`           | `base.coral100`                   | `--cnvs-base-palette-coral-100`      |                                                                                                           |
| `colors.rootBeer300`           | `base.coral200`                   | `--cnvs-base-palette-coral-200`      |                                                                                                           |
| `colors.rootBeer400`           | `base.coral200`                   | `--cnvs-base-palette-coral-200`      |                                                                                                           |
| `colors.rootBeer500`           | `base.amber900`                   | `--cnvs-base-palette-amber-900`      |                                                                                                           |
| `colors.rootBeer600`           | `base.amber950`                   | `--cnvs-base-palette-amber-950`      |                                                                                                           |
| `colors.toastedMarshmallow100` | `base.amber25`                    | `--cnvs-base-palette-amber-25`       |                                                                                                           |
| `colors.toastedMarshmallow200` | `base.orange100`                  | `--cnvs-base-palette-orange-100`     |                                                                                                           |
| `colors.toastedMarshmallow300` | `base.orange200`                  | `--cnvs-base-palette-orange-200`     |                                                                                                           |
| `colors.toastedMarshmallow400` | `base.orange300`                  | `--cnvs-base-palette-orange-300`     |                                                                                                           |
| `colors.toastedMarshmallow500` | `base.amber500`                   | `--cnvs-base-palette-amber-500`      |                                                                                                           |
| `colors.toastedMarshmallow600` | `base.amber600`                   | `--cnvs-base-palette-amber-600`      |                                                                                                           |
| `colors.licorice100`           | `base.slate400`                   | `--cnvs-base-palette-slate-400`      | sys.color.bg.muted.softer <br/> sys.color.fg.disabled <br/> sys.color.border.input.disabled               |
| `colors.licorice200`           | `base.slate500`                   | `--cnvs-base-palette-slate-500`      | sys.color.bg.muted.soft <br/> sys.color.fg.muted.soft <br/> sys.color.border.input.default                |
| `colors.licorice300`           | `base.slate600`                   | `--cnvs-base-palette-slate-600`      | sys.color.bg.muted.default <br/> sys.color.fg.muted.default <br/> sys.color.text.hint                     |
| `colors.licorice400`           | `base.slate700`                   | `--cnvs-base-palette-slate-700`      | sys.color.fg.muted.strong                                                                                 |
| `colors.licorice500`           | `base.slate800`                   | `--cnvs-base-palette-slate-800`      | sys.color.bg.muted.strong <br/> sys.color.fg.muted.stronger <br/> sys.color.border.input.strong           |
| `colors.licorice600`           | `base.slate900`                   | `--cnvs-base-palette-slate-900`      |                                                                                                           |
| `colors.blackPepper100`        | `base.neutral500`                 | `--cnvs-base-palette-neutral-500`    |                                                                                                           |
| `colors.blackPepper200`        | `base.neutral700`                 | `--cnvs-base-palette-neutral-700`    |                                                                                                           |
| `colors.blackPepper300`        | `base.neutral900`                 | `--cnvs-base-palette-neutral-900`    | sys.color.fg.default                                                                                      |
| `colors.blackPepper400`        | `base.neutral950`                 | `--cnvs-base-palette-neutral-950`    | sys.color.bg.contrast.default <br/> sys.color.fg.strong <br/> sys.color.border.contrast.default           |
| `colors.blackPepper500`        | `base.neutral975`                 | `--cnvs-base-palette-neutral-975`    | sys.color.bg.contrast.strong <br/> sys.color.fg.stronger <br/> sys.color.border.contrast.strong           |
| `colors.blackPepper600`        | `base.neutral1000`                | `--cnvs-base-palette-neutral-1000`   |                                                                                                           |
| `colors.frenchVanilla100`      | `base.neutral0`                   | `--cnvs-base-palette-neutral-0`      | sys.color.bg.default <br/> sys.color.fg.inverse <br/> sys.color.border.inverse                            |
| `colors.frenchVanilla200`      | `base.neutral100`                 | `--cnvs-base-palette-neutral-100`    |                                                                                                           |
| `colors.frenchVanilla300`      | `base.neutral200`                 | `--cnvs-base-palette-neutral-200`    |                                                                                                           |
| `colors.frenchVanilla400`      | `base.neutral300`                 | `--cnvs-base-palette-neutral-300`    |                                                                                                           |
| `colors.frenchVanilla500`      | `base.neutral400`                 | `--cnvs-base-palette-neutral-400`    |                                                                                                           |
| `colors.frenchVanilla600`      | `base.neutral500`                 | `--cnvs-base-palette-neutral-500`    |                                                                                                           |
| `colors.soap100`               | `base.slate25`                    | `--cnvs-base-palette-slate-25`       | sys.color.bg.alt.softer                                                                                   |
| `colors.soap200`               | `base.slate50`                    | `--cnvs-base-palette-slate-50`       | sys.color.bg.alt.soft                                                                                     |
| `colors.soap300`               | `base.slate100`                   | `--cnvs-base-palette-slate-100`      | sys.color.bg.alt.default <br/> sys.color.border.input.inverse                                             |
| `colors.soap400`               | `base.slate200`                   | `--cnvs-base-palette-slate-200`      | sys.color.bg.alt.strong <br/> sys.color.border.divider                                                    |
| `colors.soap500`               | `base.slate300`                   | `--cnvs-base-palette-slate-300`      | sys.color.bg.alt.stronger <br/> sys.color.border.container                                                |
| `colors.soap600`               | `base.slate300`                   | `--cnvs-base-palette-slate-300`      |                                                                                                           |
| `colors.coconut100`            | `base.coconut100` (deprecated)    | `--cnvs-base-palette-coconut-100`    |                                                                                                           |
| `colors.coconut200`            | `base.coconut200` (deprecated)    | `--cnvs-base-palette-coconut-200`    |                                                                                                           |
| `colors.coconut300`            | `base.coconut300` (deprecated)    | `--cnvs-base-palette-coconut-300`    |                                                                                                           |
| `colors.coconut400`            | `base.coconut400` (deprecated)    | `--cnvs-base-palette-coconut-400`    |                                                                                                           |
| `colors.coconut500`            | `base.coconut500` (deprecated)    | `--cnvs-base-palette-coconut-500`    |                                                                                                           |
| `colors.coconut600`            | `base.coconut600` (deprecated)    | `--cnvs-base-palette-coconut-600`    |                                                                                                           |
| `colors.cappuccino100`         | `base.cappuccino100` (deprecated) | `--cnvs-base-palette-cappuccino-100` |                                                                                                           |
| `colors.cappuccino200`         | `base.cappuccino200` (deprecated) | `--cnvs-base-palette-cappuccino-200` |                                                                                                           |
| `colors.cappuccino300`         | `base.cappuccino300` (deprecated) | `--cnvs-base-palette-cappuccino-300` |                                                                                                           |
| `colors.cappuccino400`         | `base.cappuccino400` (deprecated) | `--cnvs-base-palette-cappuccino-400` |                                                                                                           |
| `colors.cappuccino500`         | `base.cappuccino500` (deprecated) | `--cnvs-base-palette-cappuccino-500` |                                                                                                           |
| `colors.cappuccino600`         | `base.cappuccino600` (deprecated) | `--cnvs-base-palette-cappuccino-600` |                                                                                                           |
| `colors.dragonFruit100`        | `base.purple25`                   | `--cnvs-base-palette-purple-25`      |                                                                                                           |
| `colors.dragonFruit200`        | `base.purple100`                  | `--cnvs-base-palette-purple-100`     |                                                                                                           |
| `colors.dragonFruit300`        | `base.indigo500`                  | `--cnvs-base-palette-indigo-500`     |                                                                                                           |
| `colors.dragonFruit400`        | `base.indigo600`                  | `--cnvs-base-palette-indigo-600`     |                                                                                                           |
| `colors.dragonFruit500`        | `base.indigo700`                  | `--cnvs-base-palette-indigo-700`     |                                                                                                           |
| `colors.dragonFruit600`        | `base.indigo800`                  | `--cnvs-base-palette-indigo-800`     |                                                                                                           |

## Brand Color Migration

Brand colors move from the Emotion theme object to direct CSS variables:

| Old Token                                  | New Token                   | CSS Variable                        |
| ------------------------------------------ | --------------------------- | ----------------------------------- |
| `theme.canvas.palette.primary.lightest`    | `brand.primary.lightest`    | `--cnvs-brand-primary-lightest`     |
| `theme.canvas.palette.primary.light`       | `brand.primary.light`       | `--cnvs-brand-primary-light`        |
| `theme.canvas.palette.primary.main`        | `brand.primary.base`        | `--cnvs-brand-primary-base`         |
| `theme.canvas.palette.primary.dark`        | `brand.primary.dark`        | `--cnvs-brand-primary-dark`         |
| `theme.canvas.palette.primary.darkest`     | `brand.primary.darkest`     | `--cnvs-brand-primary-darkest`      |
| `theme.canvas.palette.primary.contrast`    | `brand.primary.accent`      | `--cnvs-brand-primary-accent`       |
| `theme.canvas.palette.error.lightest`      | `brand.error.lightest`      | `--cnvs-brand-error-lightest`       |
| `theme.canvas.palette.error.light`         | `brand.error.light`         | `--cnvs-brand-error-light`          |
| `theme.canvas.palette.error.main`          | `brand.error.base`          | `--cnvs-brand-error-base`           |
| `theme.canvas.palette.error.dark`          | `brand.error.dark`          | `--cnvs-brand-error-dark`           |
| `theme.canvas.palette.error.darkest`       | `brand.error.darkest`       | `--cnvs-brand-error-darkest`        |
| `theme.canvas.palette.error.contrast`      | `brand.error.accent`        | `--cnvs-brand-error-accent`         |
| `theme.canvas.palette.alert.lightest`      | `brand.alert.lightest`      | `--cnvs-brand-alert-lightest`       |
| `theme.canvas.palette.alert.light`         | `brand.alert.light`         | `--cnvs-brand-alert-light`          |
| `theme.canvas.palette.alert.main`          | `brand.alert.base`          | `--cnvs-brand-alert-base`           |
| `theme.canvas.palette.alert.dark`          | `brand.alert.dark`          | `--cnvs-brand-alert-dark`           |
| `theme.canvas.palette.alert.darkest`       | `brand.alert.darkest`       | `--cnvs-brand-alert-darkest`        |
| `theme.canvas.palette.alert.contrast`      | `brand.alert.accent`        | `--cnvs-brand-alert-accent`         |
| `theme.canvas.palette.success.lightest`    | `brand.success.lightest`    | `--cnvs-brand-success-lightest`     |
| `theme.canvas.palette.success.light`       | `brand.success.light`       | `--cnvs-brand-success-light`        |
| `theme.canvas.palette.success.main`        | `brand.success.base`        | `--cnvs-brand-success-base`         |
| `theme.canvas.palette.success.dark`        | `brand.success.dark`        | `--cnvs-brand-success-dark`         |
| `theme.canvas.palette.success.darkest`     | `brand.success.darkest`     | `--cnvs-brand-success-darkest`      |
| `theme.canvas.palette.success.contrast`    | `brand.success.accent`      | `--cnvs-brand-success-accent`       |
| `theme.canvas.palette.neutral.lightest`    | `brand.neutral.lightest`    | `--cnvs-brand-neutral-lightest`     |
| `theme.canvas.palette.neutral.light`       | `brand.neutral.light`       | `--cnvs-brand-neutral-light`        |
| `theme.canvas.palette.neutral.main`        | `brand.neutral.base`        | `--cnvs-brand-neutral-base`         |
| `theme.canvas.palette.neutral.dark`        | `brand.neutral.dark`        | `--cnvs-brand-neutral-dark`         |
| `theme.canvas.palette.neutral.darkest`     | `brand.neutral.darkest`     | `--cnvs-brand-neutral-darkest`      |
| `theme.canvas.palette.neutral.contrast`    | `brand.neutral.accent`      | `--cnvs-brand-neutral-accent`       |
| `theme.canvas.palette.common.focusOutline` | `brand.common.focusOutline` | `--cnvs-brand-common-focus-outline` |

## System Color Usage Guide (Recommended)

**System color tokens are organized into semantic "blocks" that represent their intended use in your
UI. Instead of referencing raw base colors, use these system tokens to ensure your application is
themeable, understandable, and consistent.**

- **Background (`system.color.bg.*`)**: For all surface and container backgrounds, including pages,
  cards, banners, and input fields. Choose the appropriate variant (`default`, `soft`, `strong`,
  etc.) based on the visual prominence and interaction state (default, hover, active, disabled).
- **Foreground (`system.color.fg.*`)**: For text and icon colors. Use variants for body text,
  headings, links, disabled states, and inverse (light-on-dark) content.
- **Border (`system.color.border.*`)**: For outlines, dividers, and input borders. Select the
  variant that matches the required emphasis or interaction state.

### Background colors

| Use Case                               |              System Token              |                                                        Old Token / React tokens                                                        | Example Usage                            |
| -------------------------------------- | :------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------- |
| **Background Colors**                  |                                        |                                                                                                                                        |                                          |
| Main page background                   |       `system.color.bg.default`        |                        `colors.frenchVanilla100` <br/> `inputColors.background` <br/> `commonColors.background`                        | Page layout base background              |
| Disabled elements                      |     `system.color.bg.primary.soft`     |                                                         `colors.blueberry200`                                                          | Disabled primary buttons                 |
| Brand default background               |   `system.color.bg.primary.default`    |                  `colors.blueberry400` <br/> `commonColors.focusBackground` <br/> `inputColors.selectionControlFill`                   | Brand banners, primary button background |
| Brand hover background                 |    `system.color.bg.primary.strong`    |                                                         `colors.blueberry500`                                                          | Primary button hover                     |
| Brand active background                |   `system.color.bg.primary.stronger`   |                                                         `colors.blueberry600`                                                          | Primary button active                    |
| Warning subtle background              |    `system.color.bg.caution.softer`    |                                                         `colors.cantaloupe100`                                                         | Soft warning banners                     |
| Warning default background             |   `system.color.bg.caution.default`    |                                                         `colors.cantaloupe400`                                                         | Toast notifications                      |
| Warning hover background               |    `system.color.bg.caution.strong`    |                                                         `colors.cantaloupe500`                                                         | Warning hover states                     |
| Warning active background              |   `system.color.bg.caution.stronger`   |                                                         `colors.cantaloupe600`                                                         | Warning active states                    |
| Error disabled background              |   `system.color.bg.critical.softer`    |                                                          `colors.cinnamon100`                                                          | Disabled error button                    |
| Error default background               |   `system.color.bg.critical.default`   |                                                          `colors.cinnamon500`                                                          | Error message background                 |
| Error hover background                 |   `system.color.bg.critical.strong`    |                                                          `colors.cinnamon600`                                                          | Delete button hover                      |
| Success surface background             |   `system.color.bg.positive.softer`    |                                                         `colors.greenApple100`                                                         | Cards showing success status             |
| Success default background             |   `system.color.bg.positive.default`   |                                                         `colors.greenApple400`                                                         | Disabled success buttons                 |
| Success hover background               |   `system.color.bg.positive.strong`    |                                                         `colors.greenApple500`                                                         | Success button hover                     |
| Success active background              |  `system.color.bg.positive.stronger`   |                                                         `colors.greenApple600`                                                         | Success button active                    |
| Muted background (subtle)              |     `system.color.bg.muted.softer`     |                                                          `colors.licorice100`                                                          | Light containers                         |
| Muted background (soft)                |      `system.color.bg.muted.soft`      |                                                          `colors.licorice200`                                                          | Form backgrounds                         |
| Muted background (default)             |    `system.color.bg.muted.default`     |                                                          `colors.licorice300`                                                          | Input fields, inactive elements          |
| Muted strong background                |     `system.color.bg.muted.strong`     |                                                          `colors.licorice500`                                                          | Switch toggles, loading indicators       |
| Disabled input background              |      `system.color.bg.alt.softer`      |                                        `colors.soap100` <br/> `inputColors.disabled.background`                                        | Disabled text input fields               |
| Alt page background                    |       `system.color.bg.alt.soft`       |                                                            `colors.soap200`                                                            | Dashboard sections                       |
| Secondary surface background           |     `system.color.bg.alt.default`      |                                          `colors.soap300` <br/> `commonColors.backgroundAlt`                                           | Card hover background                    |
| Secondary hover background             |      `system.color.bg.alt.strong`      |                                         `colors.soap400` <br/> `commonColors.hoverBackground`                                          | Hover state for modals                   |
| Secondary active background            |     `system.color.bg.alt.stronger`     |                                                            `colors.soap500`                                                            | Clicked state for surfaces               |
| Contrast background (default)          |   `system.color.bg.contrast.default`   |                                                        `colors.blackPepper400`                                                         | Tooltip background                       |
| Contrast background (strong)           |   `system.color.bg.contrast.strong`    |                                                        `colors.blackPepper500`                                                         | High-contrast text container background  |
| **Foreground Colors (text and icons)** |            **System Token**            |                                                      **Old Token / React tokens**                                                      | **Example Usage**                        |
| Body foreground                        |       `system.color.fg.default`        |                `colors.blackPepper300` <br/> `typeColors.body` <br/> `typeColors.label` <br/> `inputColors.text` <br/>                 | Paragraphs, regular content              |
| Headings                               |        `system.color.fg.strong`        |                                           `colors.blackPepper400` <br/> `typeColors.heading`                                           | Section and card headings                |
| Display titles                         |       `system.color.fg.stronger`       |                                                        `colors.blackPepper500`                                                         | Hero titles, large headings              |
| Link foreground                        |   `system.color.fg.primary.default`    | `colors.blueberry400` <br/> `iconColors.active` <br/> `statusColors.active` <br/> `typeColors.link` <br/> `typeColors.selectHighlight` | Anchor links                             |
| Link foreground hover                  |    `system.color.fg.primary.strong`    |                                                         `colors.blueberry500`                                                          | Hover state for links                    |
| Error foreground                       |   `system.color.fg.critical.default`   |                             `colors.cinnamon500` <br/> `inputColors.error.icon` <br/> `statusColors.error`                             | Error messages                           |
| Inverse (white) foreground             |       `system.color.fg.inverse`        |       `colors.frenchVanilla100` <br/> `typeColors.inverse` <br/> `typeColors.selectHighlightInverse` <br/> `iconColors.inverse`        | Text on dark backgrounds                 |
| Disabled foreground                    |       `system.color.fg.disabled`       |          `colors.licorice100` <br/> `inputColors.disabled.text` <br/> `inputColors.disabled.icon` <br/> `iconColors.disabled`          | Disabled buttons and form inputs         |
| Muted foreground (soft)                |      `system.color.fg.muted.soft`      |                   `colors.licorice200` <br/> `iconColors.standard` <br/> `inputColors.icon` <br/> `typeColors.hint`                    | Tab labels, hint text                    |
| Muted foreground (default)             |    `system.color.fg.muted.default`     |                                          `colors.licorice300` <br/> `inputColors.placeholder`                                          | Subtitle or secondary text               |
| Muted foreground (strong)              |     `system.color.fg.muted.strong`     |                                                          `colors.licorice400`                                                          | Hover state for muted elements           |
| Muted foreground (stronger)            |    `system.color.fg.muted.stronger`    |                              `colors.licorice500` <br/> `iconColors.hover` <br/> `inputColors.iconHover`                               | Active muted tabs text                   |
| **Border Colors**                      |            **System Token**            |                                                      **Old Token / React tokens**                                                      | **Example Usage**                        |
| Contrast border                        | `system.color.border.contrast.default` |                                                        `colors.blackPepper400`                                                         | Card outline, divider on light surfaces  |
| Strong contrast border                 | `system.color.border.contrast.strong`  |                                                        `colors.blackPepper500`                                                         | High-contrast outlines or focus states   |
| Primary active input border            | `system.color.border.primary.default`  |                        `colors.blueberry400` <br/> `commonColors.focusOutline` <br/> `inputColors.focusBorder`                         | Active input fields                      |
| Warning border (inner)                 | `system.color.border.caution.default`  |                          `colors.cantaloupe400` <br/> `inputColors.alert.border` <br/> `statusColors.warning`                          | Alert field inner border                 |
| Warning border (outer)                 |  `system.color.border.caution.strong`  |                                                         `colors.cantaloupe600`                                                         | Alert field box shadow                   |
| Error border                           | `system.color.border.critical.default` |                            `colors.cinnamon500` <br/> `inputColors.error.border` <br/> `statusColors.error`                            | Form field with error                    |
| Inverse surface border                 |     `system.color.border.inverse`      |                                                       `colors.frenchVanilla100`                                                        | Checkbox/radio on dark background        |
| Disabled input border                  |  `system.color.border.input.disabled`  |                                                          `colors.licorice100`                                                          | Non-editable input fields                |
| Default input border                   |  `system.color.border.input.default`   |                                            `colors.licorice200` <br/> `inputColors.border`                                             | Normal input field border                |
| Hover input border                     |   `system.color.border.input.strong`   |                                        `colors.licorice500` <br/> `inputColors.disabled.border`                                        | Input field on hover                     |
| Inverse input border                   |  `system.color.border.input.inverse`   |                                                            `colors.soap300`                                                            | Inverse theme inputs                     |
| Divider/separator border               |     `system.color.border.divider`      |                                             `colors.soap400` <br/> `commonColors.divider`                                              | Table rows, content separators           |
| Container border (card/table edge)     |    `system.color.border.container`     |                                                            `colors.soap500`                                                            | Card edge or section container border    |
| **Static Colors**                      |            **System Token**            |                                                      **Old Token / React tokens**                                                      | **Example Usage**                        |
| White                                  |      `system.color.static.white`       |                                                                                                                                        | Always white regardless of theme         |
| Black                                  |      `system.color.static.black`       |                                                                                                                                        | Always black regardless of theme         |
| Transparent                            |   `system.color.static.transparent`    |                                                                                                                                        | Invisible backgrounds                    |

## Migration Examples

**Example 1: Base Color Migration**

```javascript
// Old
import {colors} from '@workday/canvas-kit-react/tokens';
backgroundColor: colors.frenchVanilla100;

// New (Direct mapping)
import {base} from '@workday/canvas-tokens-web';
backgroundColor: cssVar(base.neutral0);
```

**Example 3: Brand Color Migration**

```javascript
// Old
import {theme} from '@emotion/react';
backgroundColor: theme.canvas.palette.primary.main;

// New
import {brand} from '@workday/canvas-tokens-web';
backgroundColor: cssVar(brand.primary.base);
```

**Example 2: System Color Migration**

```javascript
// Old
import {colors} from '@workday/canvas-kit-react/tokens';
const styles = createStyles({
  backgroundColor: colors.frenchVanilla100,
  borderColor: colors.soap500,
  color: colors.blackPepper300,
});

// New - Using semantic system tokens
import {system} from '@workday/canvas-tokens-web';
const styles = createStyles({
  backgroundColor: system.color.bg.default,
  borderColor: system.color.border.container,
  color: system.color.text.default,
});
```