@workday/canvas-kit-docs 14.0.0-alpha.1156-next.0 → 14.0.0-alpha.1162-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es6/index.d.ts +2 -0
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +2 -0
- package/dist/es6/lib/AIIndicator.d.ts +2 -0
- package/dist/es6/lib/AIIndicator.d.ts.map +1 -0
- package/dist/es6/lib/AIIndicator.js +12 -0
- package/dist/es6/lib/DownloadLLMFile.d.ts +7 -0
- package/dist/es6/lib/DownloadLLMFile.d.ts.map +1 -0
- package/dist/es6/lib/DownloadLLMFile.js +45 -0
- package/dist/es6/lib/docs.js +6964 -3870
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.d.ts +2 -0
- package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.d.ts.map +1 -0
- package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.js +7 -0
- package/dist/mdx/labs-react/ai-assistant-ingress-button/AiAssistantIngressButton.mdx +35 -0
- package/dist/mdx/labs-react/ai-assistant-ingress-button/examples/Basic.tsx +16 -0
- package/dist/mdx/labs-react/ai-assistant-ingress-button/examples/Inverse.tsx +24 -0
- package/dist/mdx/react/tabs/examples/DynamicTabs.tsx +5 -2
- package/dist/mdx/react/tokens/Tokens.mdx +7 -6
- package/dist/mdx/tokens/TokenMigrationCodemod.mdx +217 -0
- package/dist/mdx/tokens/TokenMigrationFinal.mdx +201 -0
- package/dist/mdx/tokens/TokenMigrationInstall.mdx +130 -0
- package/dist/mdx/tokens/TokenMigrationMappingColors.mdx +230 -0
- package/dist/mdx/tokens/TokenMigrationMappingSystem.mdx +287 -0
- package/dist/mdx/tokens/TokenMigrationOverview.mdx +148 -0
- package/index.ts +2 -0
- package/lib/AIIndicator.tsx +22 -0
- package/lib/DownloadLLMFile.tsx +69 -0
- package/package.json +7 -7
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import {StorybookInformationHighlight} from './StorybookInformationHighlight';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
# Installation & Setup
|
|
5
|
+
|
|
6
|
+
If you are migrating from the old raw values tokens (`@workday/canvas-kit-react/tokens`), you should
|
|
7
|
+
now use `@workday/canvas-tokens-web` for CSS variable tokens, and pair it with the
|
|
8
|
+
`@workday/canvas-kit-styling` package for utilities that help you consume these tokens in your
|
|
9
|
+
application.
|
|
10
|
+
|
|
11
|
+
<StorybookInformationHighlight
|
|
12
|
+
emphasis="high"
|
|
13
|
+
title="Canvas Tokens v2"
|
|
14
|
+
description="Check out the new v2 tokens package to explore the updated token structure and see how the new CSS variable tokens look in practice. Learn more about how tokens are organized, how to use them in your application, and the benefits of migrating to the new system."
|
|
15
|
+
link="https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs"
|
|
16
|
+
linkText="View the Docs"
|
|
17
|
+
isExternal
|
|
18
|
+
/>
|
|
19
|
+
|
|
20
|
+
<br />
|
|
21
|
+
|
|
22
|
+
## Install the New Package
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @workday/canvas-tokens-web
|
|
26
|
+
# or
|
|
27
|
+
yarn add @workday/canvas-tokens-web
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Import CSS Variables
|
|
31
|
+
|
|
32
|
+
Import the variables at the top level of your application:
|
|
33
|
+
|
|
34
|
+
**In your root CSS file:**
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
@import '@workday/canvas-tokens-web/css/base/_variables.css';
|
|
38
|
+
@import '@workday/canvas-tokens-web/css/system/_variables.css';
|
|
39
|
+
@import '@workday/canvas-tokens-web/css/brand/_variables.css';
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**OR**
|
|
43
|
+
|
|
44
|
+
**In you root App JavaScript/TypeScript file:**
|
|
45
|
+
|
|
46
|
+
```javascript
|
|
47
|
+
import '@workday/canvas-tokens-web/css/base/_variables.css';
|
|
48
|
+
import '@workday/canvas-tokens-web/css/system/_variables.css';
|
|
49
|
+
import '@workday/canvas-tokens-web/css/brand/_variables.css';
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Updating Your Styling Approach
|
|
53
|
+
|
|
54
|
+
<br />
|
|
55
|
+
|
|
56
|
+
### Styles
|
|
57
|
+
|
|
58
|
+
<StorybookInformationHighlight
|
|
59
|
+
title="How To Customize Styles"
|
|
60
|
+
description="There are multiple ways to customize styles for components within Canvas Kit. The approach you choose will depend on your use case."
|
|
61
|
+
link="/?path=/docs/styling-guides-customizing-styles--docs"
|
|
62
|
+
linkText="Styling utilities"
|
|
63
|
+
/>
|
|
64
|
+
|
|
65
|
+
If you're not already using `createStyles`, migrate from style props to the styling functions:
|
|
66
|
+
|
|
67
|
+
**Old style props approach**
|
|
68
|
+
|
|
69
|
+
```javascript
|
|
70
|
+
// as style props (old)
|
|
71
|
+
import {space, colors} from '@workday/canvas-kit-react/tokens';
|
|
72
|
+
<Component padding={space.s} color={colors.blackPeppers400}>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
**Within Canvas styling functions**
|
|
76
|
+
|
|
77
|
+
If you are using Canvas styling functions, such as `createStyles` or `createStencil`, it is not
|
|
78
|
+
required to wrap tokens with `var()`. You can still use it to provide value fallback.
|
|
79
|
+
|
|
80
|
+
```javascript
|
|
81
|
+
import {createStyles, cssVar} from '@workday/canvas-kit-styling';
|
|
82
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
83
|
+
|
|
84
|
+
//
|
|
85
|
+
const styles = createStyles({
|
|
86
|
+
padding: system.space.x4, // not required in most cases
|
|
87
|
+
color: cssVar(system.color.fg.default, '#000') // used to provide fallback
|
|
88
|
+
})
|
|
89
|
+
|
|
90
|
+
<Component cs={styles}>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
**Within non-Canvas functions or objects**
|
|
94
|
+
|
|
95
|
+
In all functions or objects that doesn't use Canvas styling functionality it is required to wrap
|
|
96
|
+
variable with `var()`. The `cssVar` function from `@workday/canvas-kit-styling` automatially wraps
|
|
97
|
+
variables and returns a string as `var($token)`.
|
|
98
|
+
|
|
99
|
+
```javascript
|
|
100
|
+
import {cssVar} from '@workday/canvas-kit-styling';
|
|
101
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
102
|
+
|
|
103
|
+
<Component style={{
|
|
104
|
+
padding: cssVar(system.space.x4),
|
|
105
|
+
color: cssVar(system.color.fg.default)
|
|
106
|
+
}}>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Calculations
|
|
110
|
+
|
|
111
|
+
<StorybookInformationHighlight
|
|
112
|
+
title="Calculation Functions"
|
|
113
|
+
description="Calc functions are useful for doing basic math operations with CSS calc() and variables. They will also wrap variables automatically in var()."
|
|
114
|
+
link="/?path=/docs/styling-utilities--docs#calc-functions"
|
|
115
|
+
linkText="See all utilities"
|
|
116
|
+
/>
|
|
117
|
+
|
|
118
|
+
```js
|
|
119
|
+
import {calc} from '@workday/canvas-kit-styling';
|
|
120
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
121
|
+
|
|
122
|
+
const styles = {
|
|
123
|
+
// returns 'calc(var(--cnvs-sys-space-x1) + 0.125rem)'
|
|
124
|
+
padding: calc.add(system.space.x1, '0.125rem'),
|
|
125
|
+
// returns 'calc(var(--cnvs-sys-space-x1) - 0.125rem)'
|
|
126
|
+
margin: calc.subtract(system.space.x1, '0.125rem'),
|
|
127
|
+
// returns 'calc(var(--cnvs-sys-space-x4) * 3)'
|
|
128
|
+
maxWidth: calc.multiply(system.space.x4, 3),
|
|
129
|
+
};
|
|
130
|
+
```
|
|
@@ -0,0 +1,230 @@
|
|
|
1
|
+
import {StorybookInformationHighlight} from './StorybookInformationHighlight';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
# Color Token Migration
|
|
5
|
+
|
|
6
|
+
<StorybookInformationHighlight
|
|
7
|
+
title="Use system tokens over base tokens"
|
|
8
|
+
description="The tables below provide mapping information for all token levels (base, system, brand) to help
|
|
9
|
+
you migrate your usage. For most use cases, we highly recommend migrating to system tokens to make future maintaining easier."
|
|
10
|
+
/>
|
|
11
|
+
|
|
12
|
+
<br />
|
|
13
|
+
|
|
14
|
+
## Table of Contents
|
|
15
|
+
|
|
16
|
+
- [Base Color Mapping](#base-color-mapping)
|
|
17
|
+
- [Brand Color Migration](#brand-color-migration)
|
|
18
|
+
- [System Color Usage Guide (Recommended)](#system-color-usage-guide-recommended)
|
|
19
|
+
- [Migration Examples](#migration-examples)
|
|
20
|
+
|
|
21
|
+
## Base Color Mapping
|
|
22
|
+
|
|
23
|
+
Base colors have a direct 1:1 mapping - simply replace `colors` with `base`:
|
|
24
|
+
|
|
25
|
+
| Old Token | New Token | CSS Variable |
|
|
26
|
+
| ------------------------------ | ---------------------------- | --------------------------------------------- |
|
|
27
|
+
| `colors.cinnamon100` | `base.cinnamon100` | `--cnvs-base-palette-cinnamon-100` |
|
|
28
|
+
| `colors.cinnamon200` | `base.cinnamon200` | `--cnvs-base-palette-cinnamon-200` |
|
|
29
|
+
| `colors.cinnamon300` | `base.cinnamon300` | `--cnvs-base-palette-cinnamon-300` |
|
|
30
|
+
| `colors.cinnamon400` | `base.cinnamon400` | `--cnvs-base-palette-cinnamon-400` |
|
|
31
|
+
| `colors.cinnamon500` | `base.cinnamon500` | `--cnvs-base-palette-cinnamon-500` |
|
|
32
|
+
| `colors.cinnamon600` | `base.cinnamon600` | `--cnvs-base-palette-cinnamon-600` |
|
|
33
|
+
| `colors.peach100` | `base.peach100` | `--cnvs-base-palette-peach-100` |
|
|
34
|
+
| `colors.peach400` | `base.peach400` | `--cnvs-base-palette-peach-400` |
|
|
35
|
+
| `colors.chiliMango400` | `base.chiliMango400` | `--cnvs-base-palette-chili-mango-400` |
|
|
36
|
+
| `colors.cantaloupe400` | `base.cantaloupe400` | `--cnvs-base-palette-cantaloupe-400` |
|
|
37
|
+
| `colors.sourLemon400` | `base.sourLemon400` | `--cnvs-base-palette-sour-lemon-400` |
|
|
38
|
+
| `colors.juicyPear400` | `base.juicyPear400` | `--cnvs-base-palette-juicy-pear-400` |
|
|
39
|
+
| `colors.kiwi400` | `base.kiwi400` | `--cnvs-base-palette-kiwi-400` |
|
|
40
|
+
| `colors.greenApple400` | `base.greenApple400` | `--cnvs-base-palette-green-apple-400` |
|
|
41
|
+
| `colors.watermelon400` | `base.watermelon400` | `--cnvs-base-palette-watermelon-400` |
|
|
42
|
+
| `colors.jewel400` | `base.jewel400` | `--cnvs-base-palette-jewel-400` |
|
|
43
|
+
| `colors.toothpaste400` | `base.toothpaste400` | `--cnvs-base-palette-toothpaste-400` |
|
|
44
|
+
| `colors.blueberry400` | `base.blueberry400` | `--cnvs-base-palette-blueberry-400` |
|
|
45
|
+
| `colors.plum400` | `base.plum400` | `--cnvs-base-palette-plum-400` |
|
|
46
|
+
| `colors.berrySmoothie400` | `base.berrySmoothie400` | `--cnvs-base-palette-berry-smoothie-400` |
|
|
47
|
+
| `colors.blackberry400` | `base.blackberry400` | `--cnvs-base-palette-blackberry-400` |
|
|
48
|
+
| `colors.islandPunch400` | `base.islandPunch400` | `--cnvs-base-palette-island-punch-400` |
|
|
49
|
+
| `colors.grapeSoda400` | `base.grapeSoda400` | `--cnvs-base-palette-grape-soda-400` |
|
|
50
|
+
| `colors.pomegranate400` | `base.pomegranate400` | `--cnvs-base-palette-pomegranate-400` |
|
|
51
|
+
| `colors.fruitPunch400` | `base.fruitPunch400` | `--cnvs-base-palette-fruit-punch-400` |
|
|
52
|
+
| `colors.rootBeer400` | `base.rootBeer400` | `--cnvs-base-palette-root-beer-400` |
|
|
53
|
+
| `colors.toastedMarshmallow400` | `base.toastedMarshmallow400` | `--cnvs-base-palette-toasted-marshmallow-400` |
|
|
54
|
+
| `colors.cappuccino400` | `base.cappuccino400` | `--cnvs-base-palette-cappuccino-400` |
|
|
55
|
+
| `colors.licorice400` | `base.licorice400` | `--cnvs-base-palette-licorice-400` |
|
|
56
|
+
| `colors.blackPepper100` | `base.blackPepper100` | `--cnvs-base-palette-black-pepper-100` |
|
|
57
|
+
| `colors.blackPepper200` | `base.blackPepper200` | `--cnvs-base-palette-black-pepper-200` |
|
|
58
|
+
| `colors.blackPepper300` | `base.blackPepper300` | `--cnvs-base-palette-black-pepper-300` |
|
|
59
|
+
| `colors.blackPepper400` | `base.blackPepper400` | `--cnvs-base-palette-black-pepper-400` |
|
|
60
|
+
| `colors.blackPepper500` | `base.blackPepper500` | `--cnvs-base-palette-black-pepper-500` |
|
|
61
|
+
| `colors.blackPepper600` | `base.blackPepper600` | `--cnvs-base-palette-black-pepper-600` |
|
|
62
|
+
| `colors.frenchVanilla100` | `base.frenchVanilla100` | `--cnvs-base-palette-french-vanilla-100` |
|
|
63
|
+
| `colors.licorice200` | `base.licorice200` | `--cnvs-base-palette-licorice-200` |
|
|
64
|
+
| `colors.soap200` | `base.soap200` | `--cnvs-base-palette-soap-200` |
|
|
65
|
+
| `colors.soap300` | `base.soap300` | `--cnvs-base-palette-soap-300` |
|
|
66
|
+
| `colors.soap400` | `base.soap400` | `--cnvs-base-palette-soap-400` |
|
|
67
|
+
| `colors.soap500` | `base.soap500` | `--cnvs-base-palette-soap-500` |
|
|
68
|
+
| `colors.soap600` | `base.soap600` | `--cnvs-base-palette-soap-600` |
|
|
69
|
+
|
|
70
|
+
## Brand Color Migration
|
|
71
|
+
|
|
72
|
+
Brand colors move from the Emotion theme object to direct CSS variables:
|
|
73
|
+
|
|
74
|
+
| Old Token | New Token | CSS Variable |
|
|
75
|
+
| ------------------------------------------ | --------------------------- | ----------------------------------- |
|
|
76
|
+
| `theme.canvas.palette.primary.lightest` | `brand.primary.lightest` | `--cnvs-brand-primary-lightest` |
|
|
77
|
+
| `theme.canvas.palette.primary.light` | `brand.primary.light` | `--cnvs-brand-primary-light` |
|
|
78
|
+
| `theme.canvas.palette.primary.main` | `brand.primary.base` | `--cnvs-brand-primary-base` |
|
|
79
|
+
| `theme.canvas.palette.primary.dark` | `brand.primary.dark` | `--cnvs-brand-primary-dark` |
|
|
80
|
+
| `theme.canvas.palette.primary.darkest` | `brand.primary.darkest` | `--cnvs-brand-primary-darkest` |
|
|
81
|
+
| `theme.canvas.palette.primary.contrast` | `brand.primary.accent` | `--cnvs-brand-primary-accent` |
|
|
82
|
+
| `theme.canvas.palette.error.lightest` | `brand.error.lightest` | `--cnvs-brand-error-lightest` |
|
|
83
|
+
| `theme.canvas.palette.error.light` | `brand.error.light` | `--cnvs-brand-error-light` |
|
|
84
|
+
| `theme.canvas.palette.error.main` | `brand.error.base` | `--cnvs-brand-error-base` |
|
|
85
|
+
| `theme.canvas.palette.error.dark` | `brand.error.dark` | `--cnvs-brand-error-dark` |
|
|
86
|
+
| `theme.canvas.palette.error.darkest` | `brand.error.darkest` | `--cnvs-brand-error-darkest` |
|
|
87
|
+
| `theme.canvas.palette.error.contrast` | `brand.error.accent` | `--cnvs-brand-error-accent` |
|
|
88
|
+
| `theme.canvas.palette.alert.lightest` | `brand.alert.lightest` | `--cnvs-brand-alert-lightest` |
|
|
89
|
+
| `theme.canvas.palette.alert.light` | `brand.alert.light` | `--cnvs-brand-alert-light` |
|
|
90
|
+
| `theme.canvas.palette.alert.main` | `brand.alert.base` | `--cnvs-brand-alert-base` |
|
|
91
|
+
| `theme.canvas.palette.alert.dark` | `brand.alert.dark` | `--cnvs-brand-alert-dark` |
|
|
92
|
+
| `theme.canvas.palette.alert.darkest` | `brand.alert.darkest` | `--cnvs-brand-alert-darkest` |
|
|
93
|
+
| `theme.canvas.palette.alert.contrast` | `brand.alert.accent` | `--cnvs-brand-alert-accent` |
|
|
94
|
+
| `theme.canvas.palette.success.lightest` | `brand.success.lightest` | `--cnvs-brand-success-lightest` |
|
|
95
|
+
| `theme.canvas.palette.success.light` | `brand.success.light` | `--cnvs-brand-success-light` |
|
|
96
|
+
| `theme.canvas.palette.success.main` | `brand.success.base` | `--cnvs-brand-success-base` |
|
|
97
|
+
| `theme.canvas.palette.success.dark` | `brand.success.dark` | `--cnvs-brand-success-dark` |
|
|
98
|
+
| `theme.canvas.palette.success.darkest` | `brand.success.darkest` | `--cnvs-brand-success-darkest` |
|
|
99
|
+
| `theme.canvas.palette.success.contrast` | `brand.success.accent` | `--cnvs-brand-success-accent` |
|
|
100
|
+
| `theme.canvas.palette.neutral.lightest` | `brand.neutral.lightest` | `--cnvs-brand-neutral-lightest` |
|
|
101
|
+
| `theme.canvas.palette.neutral.light` | `brand.neutral.light` | `--cnvs-brand-neutral-light` |
|
|
102
|
+
| `theme.canvas.palette.neutral.main` | `brand.neutral.base` | `--cnvs-brand-neutral-base` |
|
|
103
|
+
| `theme.canvas.palette.neutral.dark` | `brand.neutral.dark` | `--cnvs-brand-neutral-dark` |
|
|
104
|
+
| `theme.canvas.palette.neutral.darkest` | `brand.neutral.darkest` | `--cnvs-brand-neutral-darkest` |
|
|
105
|
+
| `theme.canvas.palette.neutral.contrast` | `brand.neutral.accent` | `--cnvs-brand-neutral-accent` |
|
|
106
|
+
| `theme.canvas.palette.common.focusOutline` | `brand.common.focusOutline` | `--cnvs-brand-common-focus-outline` |
|
|
107
|
+
|
|
108
|
+
## System Color Usage Guide (Recommended)
|
|
109
|
+
|
|
110
|
+
**System color tokens are organized into semantic "blocks" that represent their intended use in your
|
|
111
|
+
UI. Instead of referencing raw base colors, use these system tokens to ensure your application is
|
|
112
|
+
themeable, understandable, and consistent.**
|
|
113
|
+
|
|
114
|
+
- **Background (`system.color.bg.*`)**: For all surface and container backgrounds, including pages,
|
|
115
|
+
cards, banners, and input fields. Choose the appropriate variant (`default`, `soft`, `strong`,
|
|
116
|
+
etc.) based on the visual prominence and interaction state (default, hover, active, disabled).
|
|
117
|
+
- **Foreground (`system.color.fg.*`)**: For text and icon colors. Use variants for body text,
|
|
118
|
+
headings, links, disabled states, and inverse (light-on-dark) content.
|
|
119
|
+
- **Border (`system.color.border.*`)**: For outlines, dividers, and input borders. Select the
|
|
120
|
+
variant that matches the required emphasis or interaction state.
|
|
121
|
+
|
|
122
|
+
### Background colors
|
|
123
|
+
|
|
124
|
+
| Use Case | System Token | Old Token / React tokens | Example Usage |
|
|
125
|
+
| -------------------------------------- | :------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------- |
|
|
126
|
+
| **Background Colors** | | | |
|
|
127
|
+
| Main page background | `system.color.bg.default` | `colors.frenchVanilla100` <br/> `inputColors.background` <br/> `commonColors.background` | Page layout base background |
|
|
128
|
+
| Disabled elements | `system.color.bg.primary.soft` | `colors.blueberry200` | Disabled primary buttons |
|
|
129
|
+
| Brand default background | `system.color.bg.primary.default` | `colors.blueberry400` <br/> `commonColors.focusBackground` <br/> `inputColors.selectionControlFill` | Brand banners, primary button background |
|
|
130
|
+
| Brand hover background | `system.color.bg.primary.strong` | `colors.blueberry500` | Primary button hover |
|
|
131
|
+
| Brand active background | `system.color.bg.primary.stronger` | `colors.blueberry600` | Primary button active |
|
|
132
|
+
| Warning subtle background | `system.color.bg.caution.softer` | `colors.cantaloupe100` | Soft warning banners |
|
|
133
|
+
| Warning default background | `system.color.bg.caution.default` | `colors.cantaloupe400` | Toast notifications |
|
|
134
|
+
| Warning hover background | `system.color.bg.caution.strong` | `colors.cantaloupe500` | Warning hover states |
|
|
135
|
+
| Warning active background | `system.color.bg.caution.stronger` | `colors.cantaloupe600` | Warning active states |
|
|
136
|
+
| Error disabled background | `system.color.bg.critical.softer` | `colors.cinnamon100` | Disabled error button |
|
|
137
|
+
| Error default background | `system.color.bg.critical.default` | `colors.cinnamon500` | Error message background |
|
|
138
|
+
| Error hover background | `system.color.bg.critical.strong` | `colors.cinnamon600` | Delete button hover |
|
|
139
|
+
| Success surface background | `system.color.bg.positive.softer` | `colors.greenApple100` | Cards showing success status |
|
|
140
|
+
| Success default background | `system.color.bg.positive.default` | `colors.greenApple400` | Disabled success buttons |
|
|
141
|
+
| Success hover background | `system.color.bg.positive.strong` | `colors.greenApple500` | Success button hover |
|
|
142
|
+
| Success active background | `system.color.bg.positive.stronger` | `colors.greenApple600` | Success button active |
|
|
143
|
+
| Muted background (subtle) | `system.color.bg.muted.softer` | `colors.licorice100` | Light containers |
|
|
144
|
+
| Muted background (soft) | `system.color.bg.muted.soft` | `colors.licorice200` | Form backgrounds |
|
|
145
|
+
| Muted background (default) | `system.color.bg.muted.default` | `colors.licorice300` | Input fields, inactive elements |
|
|
146
|
+
| Muted strong background | `system.color.bg.muted.strong` | `colors.licorice500` | Switch toggles, loading indicators |
|
|
147
|
+
| Disabled input background | `system.color.bg.alt.softer` | `colors.soap100` <br/> `inputColors.disabled.background` | Disabled text input fields |
|
|
148
|
+
| Alt page background | `system.color.bg.alt.soft` | `colors.soap200` | Dashboard sections |
|
|
149
|
+
| Secondary surface background | `system.color.bg.alt.default` | `colors.soap300` <br/> `commonColors.backgroundAlt` | Card hover background |
|
|
150
|
+
| Secondary hover background | `system.color.bg.alt.strong` | `colors.soap400` <br/> `commonColors.hoverBackground` | Hover state for modals |
|
|
151
|
+
| Secondary active background | `system.color.bg.alt.stronger` | `colors.soap500` | Clicked state for surfaces |
|
|
152
|
+
| Contrast background (default) | `system.color.bg.contrast.default` | `colors.blackPepper400` | Tooltip background |
|
|
153
|
+
| Contrast background (strong) | `system.color.bg.contrast.strong` | `colors.blackPepper500` | High-contrast text container background |
|
|
154
|
+
| **Foreground Colors (text and icons)** | **System Token** | **Old Token / React tokens** | **Example Usage** |
|
|
155
|
+
| Body foreground | `system.color.fg.default` | `colors.blackPepper300` <br/> `typeColors.body` <br/> `typeColors.label` <br/> `inputColors.text` <br/> | Paragraphs, regular content |
|
|
156
|
+
| Headings | `system.color.fg.strong` | `colors.blackPepper400` <br/> `typeColors.heading` | Section and card headings |
|
|
157
|
+
| Display titles | `system.color.fg.stronger` | `colors.blackPepper500` | Hero titles, large headings |
|
|
158
|
+
| Link foreground | `system.color.fg.primary.default` | `colors.blueberry400` <br/> `iconColors.active` <br/> `statusColors.active` <br/> `typeColors.link` <br/> `typeColors.selectHighlight` | Anchor links |
|
|
159
|
+
| Link foreground hover | `system.color.fg.primary.strong` | `colors.blueberry500` | Hover state for links |
|
|
160
|
+
| Error foreground | `system.color.fg.critical.default` | `colors.cinnamon500` <br/> `inputColors.error.icon` <br/> `statusColors.error` | Error messages |
|
|
161
|
+
| Inverse (white) foreground | `system.color.fg.inverse` | `colors.frenchVanilla100` <br/> `typeColors.inverse` <br/> `typeColors.selectHighlightInverse` <br/> `iconColors.inverse` | Text on dark backgrounds |
|
|
162
|
+
| Disabled foreground | `system.color.fg.disabled` | `colors.licorice100` <br/> `inputColors.disabled.text` <br/> `inputColors.disabled.icon` <br/> `iconColors.disabled` | Disabled buttons and form inputs |
|
|
163
|
+
| Muted foreground (soft) | `system.color.fg.muted.soft` | `colors.licorice200` <br/> `iconColors.standard` <br/> `inputColors.icon` <br/> `typeColors.hint` | Tab labels, hint text |
|
|
164
|
+
| Muted foreground (default) | `system.color.fg.muted.default` | `colors.licorice300` <br/> `inputColors.placeholder` | Subtitle or secondary text |
|
|
165
|
+
| Muted foreground (strong) | `system.color.fg.muted.strong` | `colors.licorice400` | Hover state for muted elements |
|
|
166
|
+
| Muted foreground (stronger) | `system.color.fg.muted.stronger` | `colors.licorice500` <br/> `iconColors.hover` <br/> `inputColors.iconHover` | Active muted tabs text |
|
|
167
|
+
| **Border Colors** | **System Token** | **Old Token / React tokens** | **Example Usage** |
|
|
168
|
+
| Contrast border | `system.color.border.contrast.default` | `colors.blackPepper400` | Card outline, divider on light surfaces |
|
|
169
|
+
| Strong contrast border | `system.color.border.contrast.strong` | `colors.blackPepper500` | High-contrast outlines or focus states |
|
|
170
|
+
| Primary active input border | `system.color.border.primary.default` | `colors.blueberry400` <br/> `commonColors.focusOutline` <br/> `inputColors.focusBorder` | Active input fields |
|
|
171
|
+
| Warning border (inner) | `system.color.border.caution.default` | `colors.cantaloupe400` <br/> `inputColors.alert.border` <br/> `statusColors.warning` | Alert field inner border |
|
|
172
|
+
| Warning border (outer) | `system.color.border.caution.strong` | `colors.cantaloupe600` | Alert field box shadow |
|
|
173
|
+
| Error border | `system.color.border.critical.default` | `colors.cinnamon500` <br/> `inputColors.error.border` <br/> `statusColors.error` | Form field with error |
|
|
174
|
+
| Inverse surface border | `system.color.border.inverse` | `colors.frenchVanilla100` | Checkbox/radio on dark background |
|
|
175
|
+
| Disabled input border | `system.color.border.input.disabled` | `colors.licorice100` | Non-editable input fields |
|
|
176
|
+
| Default input border | `system.color.border.input.default` | `colors.licorice200` <br/> `inputColors.border` | Normal input field border |
|
|
177
|
+
| Hover input border | `system.color.border.input.strong` | `colors.licorice500` <br/> `inputColors.disabled.border` | Input field on hover |
|
|
178
|
+
| Inverse input border | `system.color.border.input.inverse` | `colors.soap300` | Inverse theme inputs |
|
|
179
|
+
| Divider/separator border | `system.color.border.divider` | `colors.soap400` <br/> `commonColors.divider` | Table rows, content separators |
|
|
180
|
+
| Container border (card/table edge) | `system.color.border.container` | `colors.soap500` | Card edge or section container border |
|
|
181
|
+
| **Static Colors** | **System Token** | **Old Token / React tokens** | **Example Usage** |
|
|
182
|
+
| White | `system.color.static.white` | | Always white regardless of theme |
|
|
183
|
+
| Black | `system.color.static.black` | | Always black regardless of theme |
|
|
184
|
+
| Transparent | `system.color.static.transparent` | | Invisible backgrounds |
|
|
185
|
+
|
|
186
|
+
## Migration Examples
|
|
187
|
+
|
|
188
|
+
**Example 1: Base Color Migration**
|
|
189
|
+
|
|
190
|
+
```javascript
|
|
191
|
+
// Old
|
|
192
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
193
|
+
backgroundColor: colors.frenchVanilla100;
|
|
194
|
+
|
|
195
|
+
// New (Direct mapping)
|
|
196
|
+
import {base} from '@workday/canvas-tokens-web';
|
|
197
|
+
backgroundColor: cssVar(base.frenchVanilla100);
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
**Example 3: Brand Color Migration**
|
|
201
|
+
|
|
202
|
+
```javascript
|
|
203
|
+
// Old
|
|
204
|
+
import {theme} from '@emotion/react';
|
|
205
|
+
backgroundColor: theme.canvas.palette.primary.main;
|
|
206
|
+
|
|
207
|
+
// New
|
|
208
|
+
import {brand} from '@workday/canvas-tokens-web';
|
|
209
|
+
backgroundColor: cssVar(brand.primary.base);
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
**Example 2: System Color Migration**
|
|
213
|
+
|
|
214
|
+
```javascript
|
|
215
|
+
// Old
|
|
216
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
217
|
+
const styles = createStyles({
|
|
218
|
+
backgroundColor: colors.frenchVanilla100,
|
|
219
|
+
borderColor: colors.soap500,
|
|
220
|
+
color: colors.blackPepper300,
|
|
221
|
+
});
|
|
222
|
+
|
|
223
|
+
// New - Using semantic system tokens
|
|
224
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
225
|
+
const styles = createStyles({
|
|
226
|
+
backgroundColor: system.color.bg.default,
|
|
227
|
+
borderColor: system.color.border.container,
|
|
228
|
+
color: system.color.text.default,
|
|
229
|
+
});
|
|
230
|
+
```
|
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
import {StorybookInformationHighlight} from './StorybookInformationHighlight';
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
# System Token Migration
|
|
5
|
+
|
|
6
|
+
## Space
|
|
7
|
+
|
|
8
|
+
| Old Token | New Token |
|
|
9
|
+
| ------------ | ------------------- |
|
|
10
|
+
| `space.zero` | `system.space.zero` |
|
|
11
|
+
| `space.xxxs` | `system.space.x1` |
|
|
12
|
+
| `space.xxs` | `system.space.x2` |
|
|
13
|
+
| `space.xs` | `system.space.x3` |
|
|
14
|
+
| `space.s` | `system.space.x4` |
|
|
15
|
+
| `space.m` | `system.space.x6` |
|
|
16
|
+
| `space.l` | `system.space.x8` |
|
|
17
|
+
| `space.xl` | `system.space.x10` |
|
|
18
|
+
| `space.xxl` | `system.space.x16` |
|
|
19
|
+
| `space.xxxl` | `system.space.x20` |
|
|
20
|
+
|
|
21
|
+
**Example migration**
|
|
22
|
+
|
|
23
|
+
```javascript
|
|
24
|
+
// Old
|
|
25
|
+
import {space} from '@workday/canvas-kit-react/tokens';
|
|
26
|
+
const styles = createStyles({
|
|
27
|
+
padding: space.l,
|
|
28
|
+
margin: space.m,
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
// New
|
|
32
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
33
|
+
const styles = createStyles({
|
|
34
|
+
padding: system.space.x8,
|
|
35
|
+
margin: system.space.x6,
|
|
36
|
+
});
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Shape (Border Radius) Token Migration
|
|
40
|
+
|
|
41
|
+
| Old Token | New Token |
|
|
42
|
+
| --------------------- | -------------------- |
|
|
43
|
+
| `borderRadius.zero` | `system.shape.zero` |
|
|
44
|
+
| `borderRadius.s` | `system.shape.half` |
|
|
45
|
+
| `borderRadius.m` | `system.shape.x1` |
|
|
46
|
+
| `borderRadius.l` | `system.shape.x2` |
|
|
47
|
+
| `borderRadius.circle` | `system.shape.round` |
|
|
48
|
+
|
|
49
|
+
**Example migration**
|
|
50
|
+
|
|
51
|
+
```javascript
|
|
52
|
+
// Old
|
|
53
|
+
borderRadius: borderRadius.m;
|
|
54
|
+
|
|
55
|
+
// New
|
|
56
|
+
borderRadius: system.shape.x1;
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Typography Token Migration
|
|
60
|
+
|
|
61
|
+
### Font Family
|
|
62
|
+
|
|
63
|
+
| Old Token | New Token |
|
|
64
|
+
| ---------------------------------------- | --------------------------- |
|
|
65
|
+
| `type.properties.fontFamilies.default` | `system.fontFamily.default` |
|
|
66
|
+
| `type.properties.fontFamilies.monospace` | `system.fontFamily.mono` |
|
|
67
|
+
|
|
68
|
+
### Font Size
|
|
69
|
+
|
|
70
|
+
| Old Token | New Token |
|
|
71
|
+
| ------------------------------- | -------------------------------- |
|
|
72
|
+
| `type.properties.fontSizes[10]` | `system.fontSize.subtext.small` |
|
|
73
|
+
| `type.properties.fontSizes[12]` | `system.fontSize.subtext.medium` |
|
|
74
|
+
| `type.properties.fontSizes[14]` | `system.fontSize.subtext.large` |
|
|
75
|
+
| `type.properties.fontSizes[16]` | `system.fontSize.body.small` |
|
|
76
|
+
| `type.properties.fontSizes[18]` | `system.fontSize.body.medium` |
|
|
77
|
+
| `type.properties.fontSizes[20]` | `system.fontSize.body.large` |
|
|
78
|
+
| `type.properties.fontSizes[24]` | `system.fontSize.heading.small` |
|
|
79
|
+
| `type.properties.fontSizes[28]` | `system.fontSize.heading.medium` |
|
|
80
|
+
| `type.properties.fontSizes[32]` | `system.fontSize.heading.large` |
|
|
81
|
+
| `type.properties.fontSizes[40]` | `system.fontSize.title.small` |
|
|
82
|
+
| `type.properties.fontSizes[48]` | `system.fontSize.title.medium` |
|
|
83
|
+
| `type.properties.fontSizes[56]` | `system.fontSize.title.large` |
|
|
84
|
+
|
|
85
|
+
### Font Weight Mappings
|
|
86
|
+
|
|
87
|
+
| Old Token | New Token |
|
|
88
|
+
| ------------------------------------- | --------------------------- |
|
|
89
|
+
| `type.properties.fontWeights.regular` | `system.fontWeight.regular` |
|
|
90
|
+
| `type.properties.fontWeights.medium` | `system.fontWeight.medium` |
|
|
91
|
+
| `type.properties.fontWeights.bold` | `system.fontWeight.bold` |
|
|
92
|
+
|
|
93
|
+
### Type Levels (Recommended)
|
|
94
|
+
|
|
95
|
+
Use complete type level tokens for consistency:
|
|
96
|
+
|
|
97
|
+
```javascript
|
|
98
|
+
// Old
|
|
99
|
+
import { type } from '@workday/canvas-kit-react/tokens';
|
|
100
|
+
...type.levels.body.medium
|
|
101
|
+
|
|
102
|
+
// New
|
|
103
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
104
|
+
...system.type.body.medium
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Type Variants → Text Colors
|
|
108
|
+
|
|
109
|
+
Type variants are replaced with semantic text color tokens:
|
|
110
|
+
|
|
111
|
+
| Old Token | New Token |
|
|
112
|
+
| ---------------------- | ------------------------------------ |
|
|
113
|
+
| `type.variant.error` | `system.color.text.critical.default` |
|
|
114
|
+
| `type.variant.hint` | `system.color.text.hint` |
|
|
115
|
+
| `type.variant.inverse` | `system.color.text.inverse` |
|
|
116
|
+
|
|
117
|
+
### Depth (Shadow) Token Migration
|
|
118
|
+
|
|
119
|
+
```javascript
|
|
120
|
+
// Old depth tokens → New system depth tokens
|
|
121
|
+
depth[1] → system.depth[1]
|
|
122
|
+
depth[2] → system.depth[2]
|
|
123
|
+
// ... etc
|
|
124
|
+
|
|
125
|
+
// Important: Use boxShadow property (not depth)
|
|
126
|
+
// Old
|
|
127
|
+
const styles = createStyles({
|
|
128
|
+
...depth[1]
|
|
129
|
+
});
|
|
130
|
+
|
|
131
|
+
// New
|
|
132
|
+
const styles = createStyles({
|
|
133
|
+
boxShadow: system.depth[1],
|
|
134
|
+
});
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## Complete Migration Examples
|
|
138
|
+
|
|
139
|
+
### Example 1: Card Component Migration
|
|
140
|
+
|
|
141
|
+
#### Before (Old Tokens)
|
|
142
|
+
|
|
143
|
+
```javascript
|
|
144
|
+
import {colors, space, borderRadius, type, depth} from '@workday/canvas-kit-react/tokens';
|
|
145
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
146
|
+
|
|
147
|
+
const cardStyles = createStyles({
|
|
148
|
+
padding: space.l,
|
|
149
|
+
backgroundColor: colors.frenchVanilla100,
|
|
150
|
+
borderColor: colors.soap500,
|
|
151
|
+
borderRadius: borderRadius.m,
|
|
152
|
+
color: colors.blackPepper300,
|
|
153
|
+
depth: 1,
|
|
154
|
+
...type.levels.body.medium,
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
const headerStyles = createStyles({
|
|
158
|
+
color: colors.blackPepper500,
|
|
159
|
+
marginBottom: space.s,
|
|
160
|
+
...type.levels.heading.small,
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
const errorTextStyles = createStyles({
|
|
164
|
+
color: colors.cinnamon500,
|
|
165
|
+
...type.levels.subtext.large,
|
|
166
|
+
});
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
#### After (New Tokens - Semantic System Approach)
|
|
170
|
+
|
|
171
|
+
```javascript
|
|
172
|
+
import {createStyles, px2rem} from '@workday/canvas-kit-styling';
|
|
173
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
174
|
+
|
|
175
|
+
const cardStyles = createStyles({
|
|
176
|
+
padding: system.space.x8,
|
|
177
|
+
backgroundColor: system.color.bg.default,
|
|
178
|
+
border: `solid ${px2rem(1)}`,
|
|
179
|
+
borderColor: system.color.border.container,
|
|
180
|
+
borderRadius: system.shape.x1,
|
|
181
|
+
color: system.color.text.default,
|
|
182
|
+
boxShadow: system.depth[1],
|
|
183
|
+
...system.type.body.medium,
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
const headerStyles = createStyles({
|
|
187
|
+
color: system.color.text.default,
|
|
188
|
+
marginBottom: system.space.x4,
|
|
189
|
+
...system.type.heading.small,
|
|
190
|
+
});
|
|
191
|
+
|
|
192
|
+
const errorTextStyles = createStyles({
|
|
193
|
+
color: system.color.text.critical.default,
|
|
194
|
+
...system.type.subtext.large,
|
|
195
|
+
});
|
|
196
|
+
```
|
|
197
|
+
|
|
198
|
+
### Example 2: Form Input Migration
|
|
199
|
+
|
|
200
|
+
#### Before (Old Tokens)
|
|
201
|
+
|
|
202
|
+
```javascript
|
|
203
|
+
import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
|
|
204
|
+
|
|
205
|
+
const inputStyles = createStyles({
|
|
206
|
+
padding: `${space.xs} ${space.s}`,
|
|
207
|
+
backgroundColor: colors.frenchVanilla100,
|
|
208
|
+
borderColor: colors.soap400,
|
|
209
|
+
borderRadius: borderRadius.s,
|
|
210
|
+
color: colors.blackPepper400,
|
|
211
|
+
'&:focus': {
|
|
212
|
+
borderColor: colors.blueberry400,
|
|
213
|
+
backgroundColor: colors.frenchVanilla100,
|
|
214
|
+
},
|
|
215
|
+
'&.error': {
|
|
216
|
+
borderColor: colors.cinnamon500,
|
|
217
|
+
backgroundColor: colors.cinnamon100,
|
|
218
|
+
},
|
|
219
|
+
'&:disabled': {
|
|
220
|
+
backgroundColor: colors.soap200,
|
|
221
|
+
color: colors.soap600,
|
|
222
|
+
},
|
|
223
|
+
});
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
#### After (New Tokens - System Approach)
|
|
227
|
+
|
|
228
|
+
```javascript
|
|
229
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
230
|
+
|
|
231
|
+
const inputStyles = createStyles({
|
|
232
|
+
padding: `${system.space.x3} ${system.space.x4}`,
|
|
233
|
+
backgroundColor: system.color.bg.default,
|
|
234
|
+
borderColor: system.color.border.default,
|
|
235
|
+
borderRadius: system.shape.half,
|
|
236
|
+
color: system.color.text.default,
|
|
237
|
+
'&:focus': {
|
|
238
|
+
borderColor: system.color.border.contrast,
|
|
239
|
+
backgroundColor: system.color.bg.default,
|
|
240
|
+
},
|
|
241
|
+
'&.error': {
|
|
242
|
+
borderColor: system.color.border.critical.default,
|
|
243
|
+
backgroundColor: system.color.bg.critical.subtle,
|
|
244
|
+
},
|
|
245
|
+
'&:disabled': {
|
|
246
|
+
backgroundColor: system.color.bg.disabled,
|
|
247
|
+
color: system.color.text.disabled,
|
|
248
|
+
},
|
|
249
|
+
});
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
### Example 3: Button Migration with Brand Colors
|
|
253
|
+
|
|
254
|
+
#### Before (Old Tokens)
|
|
255
|
+
|
|
256
|
+
```javascript
|
|
257
|
+
import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
|
|
258
|
+
import {theme} from '@emotion/react';
|
|
259
|
+
|
|
260
|
+
const primaryButtonStyles = createStyles({
|
|
261
|
+
padding: `${space.xs} ${space.m}`,
|
|
262
|
+
backgroundColor: theme.canvas.palette.primary.main,
|
|
263
|
+
borderColor: theme.canvas.palette.primary.main,
|
|
264
|
+
borderRadius: borderRadius.m,
|
|
265
|
+
color: theme.canvas.palette.primary.contrast,
|
|
266
|
+
'&:hover': {
|
|
267
|
+
backgroundColor: theme.canvas.palette.primary.dark,
|
|
268
|
+
},
|
|
269
|
+
});
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
#### After (New Tokens - Brand + System)
|
|
273
|
+
|
|
274
|
+
```javascript
|
|
275
|
+
import {system, brand} from '@workday/canvas-tokens-web';
|
|
276
|
+
|
|
277
|
+
const primaryButtonStyles = createStyles({
|
|
278
|
+
padding: `${system.space.x3} ${system.space.x6}`,
|
|
279
|
+
backgroundColor: brand.primary.base,
|
|
280
|
+
borderColor: brand.primary.base,
|
|
281
|
+
borderRadius: system.shape.x1,
|
|
282
|
+
color: brand.primary.accent,
|
|
283
|
+
'&:hover': {
|
|
284
|
+
backgroundColor: brand.primary.dark,
|
|
285
|
+
},
|
|
286
|
+
});
|
|
287
|
+
```
|