@workday/canvas-kit-mcp 13.2.41 → 14.1.4
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/cli.js +39 -2
- package/dist/cli.js.map +2 -2
- package/dist/index.js +39 -2
- package/dist/index.js.map +2 -2
- package/dist/lib/llm-txt/llm-style-props-migration.txt +2346 -0
- package/dist/lib/llm-txt/llm-token-migration-14.txt +826 -0
- package/dist/lib/upgrade-guides/14.0-UPGRADE-GUIDE.md +1095 -0
- package/dist/types/lib/index.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,826 @@
|
|
|
1
|
+
Canvas Kit Token Migration Guide: Moving to @workday/canvas-tokens-web
|
|
2
|
+
|
|
3
|
+
================================================================================
|
|
4
|
+
IMPORTANT: This migration guide is for Canvas Kit v14
|
|
5
|
+
================================================================================
|
|
6
|
+
|
|
7
|
+
Canvas Kit v14 is using a new token system that replaces the old JavaScript-based
|
|
8
|
+
tokens from @workday/canvas-kit-react/tokens with CSS variables from
|
|
9
|
+
@workday/canvas-tokens-web. This migration enables better theming capabilities,
|
|
10
|
+
improved performance, and a more standardized approach to styling across the Canvas
|
|
11
|
+
design system.
|
|
12
|
+
|
|
13
|
+
Why Migrate?
|
|
14
|
+
============
|
|
15
|
+
|
|
16
|
+
- Better Performance: CSS variables eliminate the runtime cost of Emotion's dynamic styling
|
|
17
|
+
- Enhanced Theming: System and brand tokens provide semantic, themeable values
|
|
18
|
+
- Cross-Platform Consistency: Single source of truth for design tokens across web, iOS, and Android
|
|
19
|
+
- Future-Proofing: Aligns with modern CSS capabilities and Canvas Kit's long-term direction
|
|
20
|
+
|
|
21
|
+
Core Principles
|
|
22
|
+
===============
|
|
23
|
+
|
|
24
|
+
1. Token Hierarchy
|
|
25
|
+
The new token system is organized into three categories:
|
|
26
|
+
|
|
27
|
+
- Base Tokens: Fundamental values (colors, measurements) - use sparingly
|
|
28
|
+
- System Tokens: Semantic, themeable values - use these in most cases
|
|
29
|
+
- Brand Tokens: Tenant/brand-specific customization values
|
|
30
|
+
|
|
31
|
+
2. CSS Variables Requirement
|
|
32
|
+
Unlike the old JavaScript tokens, the new tokens are CSS variables that must be
|
|
33
|
+
wrapped in var() for the browser to understand them.
|
|
34
|
+
|
|
35
|
+
3. Styling Utilities
|
|
36
|
+
Use Canvas Kit's styling utilities (createStyles, cssVar) to ensure proper CSS
|
|
37
|
+
variable handling.
|
|
38
|
+
|
|
39
|
+
Installation & Setup
|
|
40
|
+
====================
|
|
41
|
+
|
|
42
|
+
1. Install the New Package
|
|
43
|
+
```
|
|
44
|
+
npm install @workday/canvas-tokens-web
|
|
45
|
+
# or
|
|
46
|
+
yarn add @workday/canvas-tokens-web
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
2. Import CSS Variables
|
|
50
|
+
Import the variables at the top level of your application:
|
|
51
|
+
|
|
52
|
+
In a CSS file:
|
|
53
|
+
```
|
|
54
|
+
@import '@workday/canvas-tokens-web/css/base/_variables.css';
|
|
55
|
+
@import '@workday/canvas-tokens-web/css/system/_variables.css';
|
|
56
|
+
@import '@workday/canvas-tokens-web/css/brand/_variables.css';
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
In a JavaScript/TypeScript file:
|
|
60
|
+
```
|
|
61
|
+
import '@workday/canvas-tokens-web/css/base/_variables.css';
|
|
62
|
+
import '@workday/canvas-tokens-web/css/system/_variables.css';
|
|
63
|
+
import '@workday/canvas-tokens-web/css/brand/_variables.css';
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
3. Update Styling Approach
|
|
67
|
+
If you're not already using createStyles, migrate from style props to the styling utilities:
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
import { createStyles, cssVar } from '@workday/canvas-kit-styling';
|
|
71
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Migration Patterns
|
|
75
|
+
==================
|
|
76
|
+
|
|
77
|
+
Using CSS Variables
|
|
78
|
+
The Fundamental Change: JavaScript values → CSS variables wrapped in var()
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
// Old approach - JavaScript values
|
|
82
|
+
import { space } from '@workday/canvas-kit-react/tokens';
|
|
83
|
+
const styles = { padding: space.s };
|
|
84
|
+
|
|
85
|
+
// New approach - CSS variables with var()
|
|
86
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
87
|
+
const styles = { padding: `var(${system.space.x4})` };
|
|
88
|
+
|
|
89
|
+
// New approach - Using cssVar utility (recommended)
|
|
90
|
+
import { cssVar } from '@workday/canvas-kit-styling';
|
|
91
|
+
const styles = { padding: cssVar(system.space.x4) };
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Color Token Migration
|
|
95
|
+
=====================
|
|
96
|
+
|
|
97
|
+
Base Color Mapping (1:1 Direct Replacement)
|
|
98
|
+
Base colors have a direct 1:1 mapping - simply replace colors with base:
|
|
99
|
+
|
|
100
|
+
| Old Token | New Token | CSS Variable | System Color Replacement |
|
|
101
|
+
| ------------------------------ | --------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------- |
|
|
102
|
+
| `colors.cinnamon100` | `base.red50` | `--cnvs-base-palette-red-50` | sys.color.bg.critical.softer |
|
|
103
|
+
| `colors.cinnamon200` | `base.red100` | `--cnvs-base-palette-red-100` | sys.color.bg.critical.soft |
|
|
104
|
+
| `colors.cinnamon300` | `base.red300` | `--cnvs-base-palette-red-300` | |
|
|
105
|
+
| `colors.cinnamon400` | `base.red400` | `--cnvs-base-palette-red-400` | sys.color.fg.critical.soft |
|
|
106
|
+
| `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 |
|
|
107
|
+
| `colors.cinnamon600` | `base.red700` | `--cnvs-base-palette-red-700` | sys.color.bg.critical.strong <br/> sys.color.fg.critical.strong |
|
|
108
|
+
| `colors.peach100` | `base.coral50` | `--cnvs-base-palette-coral-50` | |
|
|
109
|
+
| `colors.peach200` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
|
|
110
|
+
| `colors.peach300` | `base.coral300` | `--cnvs-base-palette-coral-300` | |
|
|
111
|
+
| `colors.peach400` | `base.coral400` | `--cnvs-base-palette-coral-400` | |
|
|
112
|
+
| `colors.peach500` | `base.coral600` | `--cnvs-base-palette-coral-600` | |
|
|
113
|
+
| `colors.peach600` | `base.coral700` | `--cnvs-base-palette-coral-700` | |
|
|
114
|
+
| `colors.chiliMango100` | `base.coral100` | `--cnvs-base-palette-coral-100` | |
|
|
115
|
+
| `colors.chiliMango200` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
|
|
116
|
+
| `colors.chiliMango300` | `base.coral300` | `--cnvs-base-palette-coral-300` | |
|
|
117
|
+
| `colors.chiliMango400` | `base.coral500` | `--cnvs-base-palette-coral-500` | |
|
|
118
|
+
| `colors.chiliMango500` | `base.coral500` | `--cnvs-base-palette-coral-500` | |
|
|
119
|
+
| `colors.chiliMango600` | `base.coral700` | `--cnvs-base-palette-coral-700` | |
|
|
120
|
+
| `colors.cantaloupe100` | `base.amber50` | `--cnvs-base-palette-amber-50` | sys.color.bg.caution.softer |
|
|
121
|
+
| `colors.cantaloupe200` | `base.amber200` | `--cnvs-base-palette-amber-200` | sys.color.bg.caution.soft |
|
|
122
|
+
| `colors.cantaloupe300` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
|
|
123
|
+
| `colors.cantaloupe400` | `base.amber400` | `--cnvs-base-palette-amber-400` | sys.color.bg.caution.default <br/> sys.color.border.caution.default |
|
|
124
|
+
| `colors.cantaloupe500` | `base.amber500` | `--cnvs-base-palette-amber-500` | sys.color.bg.caution.strong <br/> sys.color.fg.caution.softer |
|
|
125
|
+
| `colors.cantaloupe600` | `base.amber600` | `--cnvs-base-palette-amber-600` | sys.color.bg.caution.stronger <br/> sys.color.border.caution.strong |
|
|
126
|
+
| `colors.sourLemon100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
|
|
127
|
+
| `colors.sourLemon200` | `base.amber100` | `--cnvs-base-palette-amber-100` | |
|
|
128
|
+
| `colors.sourLemon300` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
|
|
129
|
+
| `colors.sourLemon400` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
|
|
130
|
+
| `colors.sourLemon500` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
|
|
131
|
+
| `colors.sourLemon600` | `base.amber500` | `--cnvs-base-palette-amber-500` | |
|
|
132
|
+
| `colors.juicyPear100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
|
|
133
|
+
| `colors.juicyPear200` | `base.amber100` | `--cnvs-base-palette-amber-100` | |
|
|
134
|
+
| `colors.juicyPear300` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
|
|
135
|
+
| `colors.juicyPear400` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
|
|
136
|
+
| `colors.juicyPear500` | `base.green500` | `--cnvs-base-palette-green-500` | |
|
|
137
|
+
| `colors.juicyPear600` | `base.green700` | `--cnvs-base-palette-green-700` | |
|
|
138
|
+
| `colors.kiwi100` | `base.green50` | `--cnvs-base-palette-green-50` | |
|
|
139
|
+
| `colors.kiwi200` | `base.green100` | `--cnvs-base-palette-green-100` | |
|
|
140
|
+
| `colors.kiwi300` | `base.green200` | `--cnvs-base-palette-green-200` | |
|
|
141
|
+
| `colors.kiwi400` | `base.green500` | `--cnvs-base-palette-green-500` | |
|
|
142
|
+
| `colors.kiwi500` | `base.green500` | `--cnvs-base-palette-green-500` | |
|
|
143
|
+
| `colors.kiwi600` | `base.green700` | `--cnvs-base-palette-green-700` | |
|
|
144
|
+
| `colors.greenApple50` | `base.green50` | `--cnvs-base-palette-green-50` | sys.color.bg.positive.softer |
|
|
145
|
+
| `colors.greenApple100` | `base.green100` | `--cnvs-base-palette-green-100` | sys.color.bg.positive.soft |
|
|
146
|
+
| `colors.greenApple200` | `base.green200` | `--cnvs-base-palette-green-200` | sys.color.fg.positive.soft |
|
|
147
|
+
| `colors.greenApple600` | `base.green600` | `--cnvs-base-palette-green-600` | sys.color.bg.positive.default <br/> sys.color.fg.positive.default |
|
|
148
|
+
| `colors.greenApple700` | `base.green700` | `--cnvs-base-palette-green-700` | sys.color.bg.positive.strong <br/> sys.color.fg.positive.strong |
|
|
149
|
+
| `colors.greenApple800` | `base.green800` | `--cnvs-base-palette-green-800` | sys.color.bg.positive.stronger <br/> sys.color.fg.positive.stronger |
|
|
150
|
+
| `colors.watermelon100` | `base.teal25` | `--cnvs-base-palette-teal-25` | |
|
|
151
|
+
| `colors.watermelon200` | `base.teal100` | `--cnvs-base-palette-teal-100` | |
|
|
152
|
+
| `colors.watermelon300` | `base.green100` | `--cnvs-base-palette-green-100` | |
|
|
153
|
+
| `colors.watermelon400` | `base.green600` | `--cnvs-base-palette-green-600` | |
|
|
154
|
+
| `colors.watermelon500` | `base.green700` | `--cnvs-base-palette-green-700` | |
|
|
155
|
+
| `colors.watermelon600` | `base.green900` | `--cnvs-base-palette-green-900` | |
|
|
156
|
+
| `colors.jewel100` | `base.teal25` | `--cnvs-base-palette-teal-25` | |
|
|
157
|
+
| `colors.jewel200` | `base.teal200` | `--cnvs-base-palette-teal-200` | |
|
|
158
|
+
| `colors.jewel300` | `base.teal400` | `--cnvs-base-palette-teal-400` | |
|
|
159
|
+
| `colors.jewel400` | `base.teal500` | `--cnvs-base-palette-teal-500` | |
|
|
160
|
+
| `colors.jewel500` | `base.teal600` | `--cnvs-base-palette-teal-600` | |
|
|
161
|
+
| `colors.jewel600` | `base.teal700` | `--cnvs-base-palette-teal-700` | |
|
|
162
|
+
| `colors.toothpaste100` | `base.azure50` | `--cnvs-base-palette-azure-50` | |
|
|
163
|
+
| `colors.toothpaste200` | `base.azure200` | `--cnvs-base-palette-azure-200` | |
|
|
164
|
+
| `colors.toothpaste300` | `base.azure300` | `--cnvs-base-palette-azure-300` | |
|
|
165
|
+
| `colors.toothpaste400` | `base.azure500` | `--cnvs-base-palette-azure-500` | |
|
|
166
|
+
| `colors.toothpaste500` | `base.azure700` | `--cnvs-base-palette-azure-700` | |
|
|
167
|
+
| `colors.toothpaste600` | `base.azure800` | `--cnvs-base-palette-azure-800` | |
|
|
168
|
+
| `colors.blueberry100` | `base.blue100` | `--cnvs-base-palette-blue-100` | |
|
|
169
|
+
| `colors.blueberry200` | `base.blue100` | `--cnvs-base-palette-blue-100` | sys.color.bg.primary.soft |
|
|
170
|
+
| `colors.blueberry300` | `base.blue400` | `--cnvs-base-palette-blue-400` | sys.color.fg.primary.soft |
|
|
171
|
+
| `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 |
|
|
172
|
+
| `colors.blueberry500` | `base.blue700` | `--cnvs-base-palette-blue-700` | sys.color.bg.primary.strong <br/> sys.color.fg.primary.strong |
|
|
173
|
+
| `colors.blueberry600` | `base.blue800` | `--cnvs-base-palette-blue-800` | sys.color.bg.primary.stronger <br/> sys.color.text.primary.stronger |
|
|
174
|
+
| `colors.plum100` | `base.blue100` | `--cnvs-base-palette-blue-100` | |
|
|
175
|
+
| `colors.plum200` | `base.blue200` | `--cnvs-base-palette-blue-200` | |
|
|
176
|
+
| `colors.plum300` | `base.blue300` | `--cnvs-base-palette-blue-300` | |
|
|
177
|
+
| `colors.plum400` | `base.blue400` | `--cnvs-base-palette-blue-400` | |
|
|
178
|
+
| `colors.plum500` | `base.blue500` | `--cnvs-base-palette-blue-500` | |
|
|
179
|
+
| `colors.plum600` | `base.blue600` | `--cnvs-base-palette-blue-600` | |
|
|
180
|
+
| `colors.berrySmoothie100` | `base.indigo50` | `--cnvs-base-palette-indigo-50` | |
|
|
181
|
+
| `colors.berrySmoothie200` | `base.indigo200` | `--cnvs-base-palette-indigo-200` | |
|
|
182
|
+
| `colors.berrySmoothie300` | `base.indigo400` | `--cnvs-base-palette-indigo-400` | |
|
|
183
|
+
| `colors.berrySmoothie400` | `base.blue500` | `--cnvs-base-palette-blue-500` | |
|
|
184
|
+
| `colors.berrySmoothie500` | `base.blue700` | `--cnvs-base-palette-blue-700` | |
|
|
185
|
+
| `colors.berrySmoothie600` | `base.blue800` | `--cnvs-base-palette-blue-800` | |
|
|
186
|
+
| `colors.blackberry100` | `base.indigo25` | `--cnvs-base-palette-indigo-25` | |
|
|
187
|
+
| `colors.blackberry200` | `base.indigo200` | `--cnvs-base-palette-indigo-200` | |
|
|
188
|
+
| `colors.blackberry300` | `base.indigo400` | `--cnvs-base-palette-indigo-400` | |
|
|
189
|
+
| `colors.blackberry400` | `base.indigo500` | `--cnvs-base-palette-indigo-500` | |
|
|
190
|
+
| `colors.blackberry500` | `base.indigo700` | `--cnvs-base-palette-indigo-700` | |
|
|
191
|
+
| `colors.blackberry600` | `base.indigo900` | `--cnvs-base-palette-indigo-900` | |
|
|
192
|
+
| `colors.islandPunch100` | `base.purple25` | `--cnvs-base-palette-purple-25` | |
|
|
193
|
+
| `colors.islandPunch200` | `base.purple200` | `--cnvs-base-palette-purple-200` | |
|
|
194
|
+
| `colors.islandPunch300` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
|
|
195
|
+
| `colors.islandPunch400` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
|
|
196
|
+
| `colors.islandPunch500` | `base.purple700` | `--cnvs-base-palette-purple-700` | |
|
|
197
|
+
| `colors.islandPunch600` | `base.purple800` | `--cnvs-base-palette-purple-800` | |
|
|
198
|
+
| `colors.grapeSoda100` | `base.magenta50` | `--cnvs-base-palette-magenta-50` | |
|
|
199
|
+
| `colors.grapeSoda200` | `base.magenta200` | `--cnvs-base-palette-magenta-200` | |
|
|
200
|
+
| `colors.grapeSoda300` | `base.purple400` | `--cnvs-base-palette-purple-400` | |
|
|
201
|
+
| `colors.grapeSoda400` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
|
|
202
|
+
| `colors.grapeSoda500` | `base.purple600` | `--cnvs-base-palette-purple-600` | |
|
|
203
|
+
| `colors.grapeSoda600` | `base.purple800` | `--cnvs-base-palette-purple-800` | |
|
|
204
|
+
| `colors.pomegranate100` | `base.magenta50` | `--cnvs-base-palette-magenta-50` | |
|
|
205
|
+
| `colors.pomegranate200` | `base.magenta100` | `--cnvs-base-palette-magenta-100` | |
|
|
206
|
+
| `colors.pomegranate300` | `base.magenta500` | `--cnvs-base-palette-magenta-500` | |
|
|
207
|
+
| `colors.pomegranate400` | `base.magenta400` | `--cnvs-base-palette-magenta-400` | |
|
|
208
|
+
| `colors.pomegranate500` | `base.red700` | `--cnvs-base-palette-red-700` | |
|
|
209
|
+
| `colors.pomegranate600` | `base.red800` | `--cnvs-base-palette-red-800` | |
|
|
210
|
+
| `colors.fruitPunch100` | `base.red25` | `--cnvs-base-palette-red-25` | |
|
|
211
|
+
| `colors.fruitPunch200` | `base.red200` | `--cnvs-base-palette-red-200` | |
|
|
212
|
+
| `colors.fruitPunch300` | `base.red300` | `--cnvs-base-palette-red-300` | |
|
|
213
|
+
| `colors.fruitPunch400` | `base.red400` | `--cnvs-base-palette-red-400` | |
|
|
214
|
+
| `colors.fruitPunch500` | `base.red400` | `--cnvs-base-palette-red-400` | |
|
|
215
|
+
| `colors.fruitPunch600` | `base.red700` | `--cnvs-base-palette-red-700` | |
|
|
216
|
+
| `colors.rootBeer100` | `base.coral25` | `--cnvs-base-palette-coral-25` | |
|
|
217
|
+
| `colors.rootBeer200` | `base.coral100` | `--cnvs-base-palette-coral-100` | |
|
|
218
|
+
| `colors.rootBeer300` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
|
|
219
|
+
| `colors.rootBeer400` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
|
|
220
|
+
| `colors.rootBeer500` | `base.amber900` | `--cnvs-base-palette-amber-900` | |
|
|
221
|
+
| `colors.rootBeer600` | `base.amber950` | `--cnvs-base-palette-amber-950` | |
|
|
222
|
+
| `colors.toastedMarshmallow100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
|
|
223
|
+
| `colors.toastedMarshmallow200` | `base.orange100` | `--cnvs-base-palette-orange-100` | |
|
|
224
|
+
| `colors.toastedMarshmallow300` | `base.orange200` | `--cnvs-base-palette-orange-200` | |
|
|
225
|
+
| `colors.toastedMarshmallow400` | `base.orange300` | `--cnvs-base-palette-orange-300` | |
|
|
226
|
+
| `colors.toastedMarshmallow500` | `base.amber500` | `--cnvs-base-palette-amber-500` | |
|
|
227
|
+
| `colors.toastedMarshmallow600` | `base.amber600` | `--cnvs-base-palette-amber-600` | |
|
|
228
|
+
| `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 |
|
|
229
|
+
| `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 |
|
|
230
|
+
| `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 |
|
|
231
|
+
| `colors.licorice400` | `base.slate700` | `--cnvs-base-palette-slate-700` | sys.color.fg.muted.strong |
|
|
232
|
+
| `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 |
|
|
233
|
+
| `colors.licorice600` | `base.slate900` | `--cnvs-base-palette-slate-900` | |
|
|
234
|
+
| `colors.blackPepper100` | `base.neutral500` | `--cnvs-base-palette-neutral-500` | |
|
|
235
|
+
| `colors.blackPepper200` | `base.neutral700` | `--cnvs-base-palette-neutral-700` | |
|
|
236
|
+
| `colors.blackPepper300` | `base.neutral900` | `--cnvs-base-palette-neutral-900` | sys.color.fg.default |
|
|
237
|
+
| `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 |
|
|
238
|
+
| `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 |
|
|
239
|
+
| `colors.blackPepper600` | `base.neutral1000` | `--cnvs-base-palette-neutral-1000` | |
|
|
240
|
+
| `colors.frenchVanilla100` | `base.neutral0` | `--cnvs-base-palette-neutral-0` | sys.color.bg.default <br/> sys.color.fg.inverse <br/> sys.color.border.inverse |
|
|
241
|
+
| `colors.frenchVanilla200` | `base.neutral100` | `--cnvs-base-palette-neutral-100` | |
|
|
242
|
+
| `colors.frenchVanilla300` | `base.neutral200` | `--cnvs-base-palette-neutral-200` | |
|
|
243
|
+
| `colors.frenchVanilla400` | `base.neutral300` | `--cnvs-base-palette-neutral-300` | |
|
|
244
|
+
| `colors.frenchVanilla500` | `base.neutral400` | `--cnvs-base-palette-neutral-400` | |
|
|
245
|
+
| `colors.frenchVanilla600` | `base.neutral500` | `--cnvs-base-palette-neutral-500` | |
|
|
246
|
+
| `colors.soap100` | `base.slate25` | `--cnvs-base-palette-slate-25` | sys.color.bg.alt.softer |
|
|
247
|
+
| `colors.soap200` | `base.slate50` | `--cnvs-base-palette-slate-50` | sys.color.bg.alt.soft |
|
|
248
|
+
| `colors.soap300` | `base.slate100` | `--cnvs-base-palette-slate-100` | sys.color.bg.alt.default <br/> sys.color.border.input.inverse |
|
|
249
|
+
| `colors.soap400` | `base.slate200` | `--cnvs-base-palette-slate-200` | sys.color.bg.alt.strong <br/> sys.color.border.divider |
|
|
250
|
+
| `colors.soap500` | `base.slate300` | `--cnvs-base-palette-slate-300` | sys.color.bg.alt.stronger <br/> sys.color.border.container |
|
|
251
|
+
| `colors.soap600` | `base.slate300` | `--cnvs-base-palette-slate-300` | |
|
|
252
|
+
| `colors.coconut100` | `base.coconut100` (deprecated) | `--cnvs-base-palette-coconut-100` | |
|
|
253
|
+
| `colors.coconut200` | `base.coconut200` (deprecated) | `--cnvs-base-palette-coconut-200` | |
|
|
254
|
+
| `colors.coconut300` | `base.coconut300` (deprecated) | `--cnvs-base-palette-coconut-300` | |
|
|
255
|
+
| `colors.coconut400` | `base.coconut400` (deprecated) | `--cnvs-base-palette-coconut-400` | |
|
|
256
|
+
| `colors.coconut500` | `base.coconut500` (deprecated) | `--cnvs-base-palette-coconut-500` | |
|
|
257
|
+
| `colors.coconut600` | `base.coconut600` (deprecated) | `--cnvs-base-palette-coconut-600` | |
|
|
258
|
+
| `colors.cappuccino100` | `base.cappuccino100` (deprecated) | `--cnvs-base-palette-cappuccino-100` | |
|
|
259
|
+
| `colors.cappuccino200` | `base.cappuccino200` (deprecated) | `--cnvs-base-palette-cappuccino-200` | |
|
|
260
|
+
| `colors.cappuccino300` | `base.cappuccino300` (deprecated) | `--cnvs-base-palette-cappuccino-300` | |
|
|
261
|
+
| `colors.cappuccino400` | `base.cappuccino400` (deprecated) | `--cnvs-base-palette-cappuccino-400` | |
|
|
262
|
+
| `colors.cappuccino500` | `base.cappuccino500` (deprecated) | `--cnvs-base-palette-cappuccino-500` | |
|
|
263
|
+
| `colors.cappuccino600` | `base.cappuccino600` (deprecated) | `--cnvs-base-palette-cappuccino-600` | |
|
|
264
|
+
| `colors.dragonFruit100` | `base.purple25` | `--cnvs-base-palette-purple-25` | |
|
|
265
|
+
| `colors.dragonFruit200` | `base.purple100` | `--cnvs-base-palette-purple-100` | |
|
|
266
|
+
| `colors.dragonFruit300` | `base.indigo500` | `--cnvs-base-palette-indigo-500` | |
|
|
267
|
+
| `colors.dragonFruit400` | `base.indigo600` | `--cnvs-base-palette-indigo-600` | |
|
|
268
|
+
| `colors.dragonFruit500` | `base.indigo700` | `--cnvs-base-palette-indigo-700` | |
|
|
269
|
+
| `colors.dragonFruit600` | `base.indigo800` | `--cnvs-base-palette-indigo-800` | |
|
|
270
|
+
|
|
271
|
+
Brand Color Migration
|
|
272
|
+
Brand colors move from the Emotion theme object to direct CSS variables:
|
|
273
|
+
|
|
274
|
+
Old Token | New Token | CSS Variable
|
|
275
|
+
-------------------------------------------|-----------------------------|---------------------------------
|
|
276
|
+
theme.canvas.palette.primary.lightest | brand.primary.lightest | --cnvs-brand-primary-lightest
|
|
277
|
+
theme.canvas.palette.primary.light | brand.primary.light | --cnvs-brand-primary-light
|
|
278
|
+
theme.canvas.palette.primary.main | brand.primary.base | --cnvs-brand-primary-base
|
|
279
|
+
theme.canvas.palette.primary.dark | brand.primary.dark | --cnvs-brand-primary-dark
|
|
280
|
+
theme.canvas.palette.primary.darkest | brand.primary.darkest | --cnvs-brand-primary-darkest
|
|
281
|
+
theme.canvas.palette.primary.contrast | brand.primary.accent | --cnvs-brand-primary-accent
|
|
282
|
+
theme.canvas.palette.error.lightest | brand.error.lightest | --cnvs-brand-error-lightest
|
|
283
|
+
theme.canvas.palette.error.light | brand.error.light | --cnvs-brand-error-light
|
|
284
|
+
theme.canvas.palette.error.main | brand.error.base | --cnvs-brand-error-base
|
|
285
|
+
theme.canvas.palette.error.dark | brand.error.dark | --cnvs-brand-error-dark
|
|
286
|
+
theme.canvas.palette.error.darkest | brand.error.darkest | --cnvs-brand-error-darkest
|
|
287
|
+
theme.canvas.palette.error.contrast | brand.error.accent | --cnvs-brand-error-accent
|
|
288
|
+
theme.canvas.palette.alert.lightest | brand.alert.lightest | --cnvs-brand-alert-lightest
|
|
289
|
+
theme.canvas.palette.alert.light | brand.alert.light | --cnvs-brand-alert-light
|
|
290
|
+
theme.canvas.palette.alert.main | brand.alert.base | --cnvs-brand-alert-base
|
|
291
|
+
theme.canvas.palette.alert.dark | brand.alert.dark | --cnvs-brand-alert-dark
|
|
292
|
+
theme.canvas.palette.alert.darkest | brand.alert.darkest | --cnvs-brand-alert-darkest
|
|
293
|
+
theme.canvas.palette.alert.contrast | brand.alert.accent | --cnvs-brand-alert-accent
|
|
294
|
+
theme.canvas.palette.success.lightest | brand.success.lightest | --cnvs-brand-success-lightest
|
|
295
|
+
theme.canvas.palette.success.light | brand.success.light | --cnvs-brand-success-light
|
|
296
|
+
theme.canvas.palette.success.main | brand.success.base | --cnvs-brand-success-base
|
|
297
|
+
theme.canvas.palette.success.dark | brand.success.dark | --cnvs-brand-success-dark
|
|
298
|
+
theme.canvas.palette.success.darkest | brand.success.darkest | --cnvs-brand-success-darkest
|
|
299
|
+
theme.canvas.palette.success.contrast | brand.success.accent | --cnvs-brand-success-accent
|
|
300
|
+
theme.canvas.palette.neutral.lightest | brand.neutral.lightest | --cnvs-brand-neutral-lightest
|
|
301
|
+
theme.canvas.palette.neutral.light | brand.neutral.light | --cnvs-brand-neutral-light
|
|
302
|
+
theme.canvas.palette.neutral.main | brand.neutral.base | --cnvs-brand-neutral-base
|
|
303
|
+
theme.canvas.palette.neutral.dark | brand.neutral.dark | --cnvs-brand-neutral-dark
|
|
304
|
+
theme.canvas.palette.neutral.darkest | brand.neutral.darkest | --cnvs-brand-neutral-darkest
|
|
305
|
+
theme.canvas.palette.neutral.contrast | brand.neutral.accent | --cnvs-brand-neutral-accent
|
|
306
|
+
theme.canvas.palette.common.focusOutline | brand.common.focusOutline | --cnvs-brand-common-focus-outline
|
|
307
|
+
|
|
308
|
+
System Color Usage Guide (Recommended)
|
|
309
|
+
|
|
310
|
+
System color tokens are organized into semantic "blocks" that represent their intended use in your
|
|
311
|
+
UI. Instead of referencing raw base colors, use these system tokens to ensure your application is
|
|
312
|
+
themeable, understandable, and consistent.
|
|
313
|
+
|
|
314
|
+
- Background (system.color.bg.*): For all surface and container backgrounds, including pages,
|
|
315
|
+
cards, banners, and input fields.
|
|
316
|
+
- Foreground (system.color.fg.*): For text and icon colors. Use variants for body text,
|
|
317
|
+
headings, links, disabled states, and inverse (light-on-dark) content.
|
|
318
|
+
- Border (system.color.border.*): For outlines, dividers, and input borders. Select the
|
|
319
|
+
variant that matches the required emphasis or interaction state.
|
|
320
|
+
|
|
321
|
+
+----------------------------------------+----------------------------------------+-----------------------------+----------------------------------------------+
|
|
322
|
+
| Use Case | System Token | Old Token(s) | Example Usage |
|
|
323
|
+
+----------------------------------------+----------------------------------------+-----------------------------+----------------------------------------------+
|
|
324
|
+
| **Background Colors** | | | |
|
|
325
|
+
| Main page background | system.color.bg.default | colors.frenchVanilla100 | Page layout base background |
|
|
326
|
+
| | | inputColors.background | |
|
|
327
|
+
| | | commonColors.background | |
|
|
328
|
+
| Disabled elements | system.color.bg.primary.soft | colors.blueberry200 | Disabled primary buttons |
|
|
329
|
+
| Brand default background | system.color.bg.primary.default | colors.blueberry400 | Brand banners, primary button background |
|
|
330
|
+
| | | commonColors.focusBackground| |
|
|
331
|
+
| | | inputColors.selectionControlFill | |
|
|
332
|
+
| Brand hover background | system.color.bg.primary.strong | colors.blueberry500 | Primary button hover |
|
|
333
|
+
| Brand active background | system.color.bg.primary.stronger | colors.blueberry600 | Primary button active |
|
|
334
|
+
| Warning subtle background | system.color.bg.caution.softer | colors.cantaloupe100 | Soft warning banners |
|
|
335
|
+
| Warning default background | system.color.bg.caution.default | colors.cantaloupe400 | Toast notifications |
|
|
336
|
+
| Warning hover background | system.color.bg.caution.strong | colors.cantaloupe500 | Warning hover states |
|
|
337
|
+
| Warning active background | system.color.bg.caution.stronger | colors.cantaloupe600 | Warning active states |
|
|
338
|
+
| Error disabled background | system.color.bg.critical.softer | colors.cinnamon100 | Disabled error button |
|
|
339
|
+
| Error default background | system.color.bg.critical.default | colors.cinnamon500 | Error message background |
|
|
340
|
+
| Error hover background | system.color.bg.critical.strong | colors.cinnamon600 | Delete button hover |
|
|
341
|
+
| Success surface background | system.color.bg.positive.softer | colors.greenApple100 | Cards showing success status |
|
|
342
|
+
| Success default background | system.color.bg.positive.default | colors.greenApple400 | Disabled success buttons |
|
|
343
|
+
| Success hover background | system.color.bg.positive.strong | colors.greenApple500 | Success button hover |
|
|
344
|
+
| Success active background | system.color.bg.positive.stronger | colors.greenApple600 | Success button active |
|
|
345
|
+
| Muted background (subtle) | system.color.bg.muted.softer | colors.licorice100 | Light containers |
|
|
346
|
+
| Muted background (soft) | system.color.bg.muted.soft | colors.licorice200 | Form backgrounds |
|
|
347
|
+
| Muted background (default) | system.color.bg.muted.default | colors.licorice300 | Input fields, inactive elements |
|
|
348
|
+
| Muted strong background | system.color.bg.muted.strong | colors.licorice500 | Switch toggles, loading indicators |
|
|
349
|
+
| Disabled input background | system.color.bg.alt.softer | colors.soap100 | Disabled text input fields |
|
|
350
|
+
| | | inputColors.disabled.background | |
|
|
351
|
+
| Alt page background | system.color.bg.alt.soft | colors.soap200 | Dashboard sections |
|
|
352
|
+
| Secondary surface background | system.color.bg.alt.default | colors.soap300 | Card hover background |
|
|
353
|
+
| | | commonColors.backgroundAlt | |
|
|
354
|
+
| Secondary hover background | system.color.bg.alt.strong | colors.soap400 | Hover state for modals |
|
|
355
|
+
| | | commonColors.hoverBackground| |
|
|
356
|
+
| Secondary active background | system.color.bg.alt.stronger | colors.soap500 | Clicked state for surfaces |
|
|
357
|
+
| Contrast background (default) | system.color.bg.contrast.default | colors.blackPepper400 | Tooltip background |
|
|
358
|
+
| Contrast background (strong) | system.color.bg.contrast.strong | colors.blackPepper500 | High-contrast text container background |
|
|
359
|
+
| **Foreground Colors (text and icons)** | | | |
|
|
360
|
+
| Body foreground | system.color.fg.default | colors.blackPepper300 | Paragraphs, regular content |
|
|
361
|
+
| | | typeColors.body | |
|
|
362
|
+
| | | typeColors.label | |
|
|
363
|
+
| | | inputColors.text | |
|
|
364
|
+
| Headings | system.color.fg.strong | colors.blackPepper400 | Section and card headings |
|
|
365
|
+
| | | typeColors.heading | |
|
|
366
|
+
| Display titles | system.color.fg.stronger | colors.blackPepper500 | Hero titles, large headings |
|
|
367
|
+
| Link foreground | system.color.fg.primary.default | colors.blueberry400 | Anchor links |
|
|
368
|
+
| | | iconColors.active | |
|
|
369
|
+
| | | statusColors.active | |
|
|
370
|
+
| | | typeColors.link | |
|
|
371
|
+
| | | typeColors.selectHighlight | |
|
|
372
|
+
| Link foreground hover | system.color.fg.primary.strong | colors.blueberry500 | Hover state for links |
|
|
373
|
+
| Error foreground | system.color.fg.critical.default | colors.cinnamon500 | Error messages |
|
|
374
|
+
| | | inputColors.error.icon | |
|
|
375
|
+
| | | statusColors.error | |
|
|
376
|
+
| Inverse (white) foreground | system.color.fg.inverse | colors.frenchVanilla100 | Text on dark backgrounds |
|
|
377
|
+
| | | typeColors.inverse | |
|
|
378
|
+
| | | typeColors.selectHighlightInverse | |
|
|
379
|
+
| | | iconColors.inverse | |
|
|
380
|
+
| Disabled foreground | system.color.fg.disabled | colors.licorice100 | Disabled buttons and form inputs |
|
|
381
|
+
| | | inputColors.disabled.text | |
|
|
382
|
+
| | | inputColors.disabled.icon | |
|
|
383
|
+
| | | iconColors.disabled | |
|
|
384
|
+
| Muted foreground (soft) | system.color.fg.muted.soft | colors.licorice200 | Tab labels, hint text |
|
|
385
|
+
| | | iconColors.standard | |
|
|
386
|
+
| | | inputColors.icon | |
|
|
387
|
+
| | | typeColors.hint | |
|
|
388
|
+
| Muted foreground (default) | system.color.fg.muted.default | colors.licorice300 | Subtitle or secondary text |
|
|
389
|
+
| | | inputColors.placeholder | |
|
|
390
|
+
| Muted foreground (strong) | system.color.fg.muted.strong | colors.licorice400 | Hover state for muted elements |
|
|
391
|
+
| Muted foreground (stronger) | system.color.fg.muted.stronger | colors.licorice500 | Active muted tabs text |
|
|
392
|
+
| | | iconColors.hover | |
|
|
393
|
+
| | | inputColors.iconHover | |
|
|
394
|
+
| **Border Colors** | | | |
|
|
395
|
+
| Contrast border | system.color.border.contrast.default | colors.blackPepper400 | Card outline, divider on light surfaces |
|
|
396
|
+
| Strong contrast border | system.color.border.contrast.strong | colors.blackPepper500 | High-contrast outlines or focus states |
|
|
397
|
+
| Primary active input border | system.color.border.primary.default | colors.blueberry400 | Active input fields |
|
|
398
|
+
| | | commonColors.focusOutline | |
|
|
399
|
+
| | | inputColors.focusBorder | |
|
|
400
|
+
| Warning border (inner) | system.color.border.caution.default | colors.cantaloupe400 | Alert field inner border |
|
|
401
|
+
| | | inputColors.alert.border | |
|
|
402
|
+
| | | statusColors.warning | |
|
|
403
|
+
| Warning border (outer) | system.color.border.caution.strong | colors.cantaloupe600 | Alert field box shadow |
|
|
404
|
+
| Error border | system.color.border.critical.default | colors.cinnamon500 | Form field with error |
|
|
405
|
+
| | | inputColors.error.border | |
|
|
406
|
+
| | | statusColors.error | |
|
|
407
|
+
| Inverse surface border | system.color.border.inverse | colors.frenchVanilla100 | Checkbox/radio on dark background |
|
|
408
|
+
| Disabled input border | system.color.border.input.disabled | colors.licorice100 | Non-editable input fields |
|
|
409
|
+
| Default input border | system.color.border.input.default | colors.licorice200 | Normal input field border |
|
|
410
|
+
| | | inputColors.border | |
|
|
411
|
+
| Hover input border | system.color.border.input.strong | colors.licorice500 | Input field on hover |
|
|
412
|
+
| | | inputColors.disabled.border | |
|
|
413
|
+
| Inverse input border | system.color.border.input.inverse | colors.soap300 | Inverse theme inputs |
|
|
414
|
+
| Divider/separator border | system.color.border.divider | colors.soap400 | Table rows, content separators |
|
|
415
|
+
| | | commonColors.divider | |
|
|
416
|
+
| Container border (card/table edge) | system.color.border.container | colors.soap500 | Card edge or section container border |
|
|
417
|
+
| **Static Colors** | | | |
|
|
418
|
+
| White | system.color.static.white | | Always white regardless of theme |
|
|
419
|
+
| Black | system.color.static.black | | Always black regardless of theme |
|
|
420
|
+
| Transparent | system.color.static.transparent | | Invisible backgrounds |
|
|
421
|
+
+----------------------------------------+----------------------------------------+-----------------------------+----------------------------------------------+
|
|
422
|
+
|
|
423
|
+
Migration Examples
|
|
424
|
+
==================
|
|
425
|
+
|
|
426
|
+
Example 1: Base Color Migration
|
|
427
|
+
```
|
|
428
|
+
// Old
|
|
429
|
+
import { colors } from '@workday/canvas-kit-react/tokens';
|
|
430
|
+
backgroundColor: colors.frenchVanilla100
|
|
431
|
+
|
|
432
|
+
// New (Direct mapping)
|
|
433
|
+
import { base } from '@workday/canvas-tokens-web';
|
|
434
|
+
backgroundColor: cssVar(base.neutral0)
|
|
435
|
+
```
|
|
436
|
+
|
|
437
|
+
Example 2: System Color Migration (Recommended)
|
|
438
|
+
```
|
|
439
|
+
// Old
|
|
440
|
+
import { colors } from '@workday/canvas-kit-react/tokens';
|
|
441
|
+
const styles = createStyles({
|
|
442
|
+
backgroundColor: colors.frenchVanilla100,
|
|
443
|
+
borderColor: colors.soap500,
|
|
444
|
+
color: colors.blackPepper300,
|
|
445
|
+
});
|
|
446
|
+
|
|
447
|
+
// New - Using semantic system tokens
|
|
448
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
449
|
+
const styles = createStyles({
|
|
450
|
+
backgroundColor: system.color.bg.default,
|
|
451
|
+
borderColor: system.color.border.container,
|
|
452
|
+
color: system.color.text.default,
|
|
453
|
+
});
|
|
454
|
+
```
|
|
455
|
+
|
|
456
|
+
Example 3: Brand Color Migration
|
|
457
|
+
```
|
|
458
|
+
// Old
|
|
459
|
+
import { theme } from '@emotion/react';
|
|
460
|
+
backgroundColor: theme.canvas.palette.primary.main
|
|
461
|
+
|
|
462
|
+
// New
|
|
463
|
+
import { brand } from '@workday/canvas-tokens-web';
|
|
464
|
+
backgroundColor: cssVar(brand.primary.base)
|
|
465
|
+
```
|
|
466
|
+
|
|
467
|
+
Spacing Token Migration
|
|
468
|
+
=======================
|
|
469
|
+
|
|
470
|
+
Old spacing tokens → New system space tokens:
|
|
471
|
+
space.zero → system.space.zero
|
|
472
|
+
space.xxxs → system.space.x1
|
|
473
|
+
space.xxs → system.space.x2
|
|
474
|
+
space.xs → system.space.x3
|
|
475
|
+
space.s → system.space.x4
|
|
476
|
+
space.m → system.space.x6
|
|
477
|
+
space.l → system.space.x8
|
|
478
|
+
space.xl → system.space.x10
|
|
479
|
+
space.xxl → system.space.x16
|
|
480
|
+
space.xxxl → system.space.x20
|
|
481
|
+
|
|
482
|
+
Example migration:
|
|
483
|
+
```
|
|
484
|
+
// Old
|
|
485
|
+
import { space } from '@workday/canvas-kit-react/tokens';
|
|
486
|
+
const styles = createStyles({
|
|
487
|
+
padding: space.l,
|
|
488
|
+
margin: space.m,
|
|
489
|
+
});
|
|
490
|
+
|
|
491
|
+
// New
|
|
492
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
493
|
+
const styles = createStyles({
|
|
494
|
+
padding: system.space.x8,
|
|
495
|
+
margin: system.space.x6,
|
|
496
|
+
});
|
|
497
|
+
```
|
|
498
|
+
|
|
499
|
+
Shape (Border Radius) Token Migration
|
|
500
|
+
=====================================
|
|
501
|
+
|
|
502
|
+
Old border radius → New system shape tokens:
|
|
503
|
+
borderRadius.zero → system.shape.zero
|
|
504
|
+
borderRadius.s → system.shape.half
|
|
505
|
+
borderRadius.m → system.shape.x1
|
|
506
|
+
borderRadius.l → system.shape.x2
|
|
507
|
+
borderRadius.circle → system.shape.round
|
|
508
|
+
|
|
509
|
+
Example:
|
|
510
|
+
```
|
|
511
|
+
// Old
|
|
512
|
+
borderRadius: borderRadius.m
|
|
513
|
+
|
|
514
|
+
// New
|
|
515
|
+
borderRadius: system.shape.x1
|
|
516
|
+
```
|
|
517
|
+
|
|
518
|
+
Typography Token Migration
|
|
519
|
+
===========================
|
|
520
|
+
|
|
521
|
+
Font Family:
|
|
522
|
+
type.properties.fontFamilies.default → system.fontFamily.default
|
|
523
|
+
type.properties.fontFamilies.monospace → system.fontFamily.mono
|
|
524
|
+
|
|
525
|
+
Font Size:
|
|
526
|
+
type.properties.fontSizes[10] → system.fontSize.subtext.small
|
|
527
|
+
type.properties.fontSizes[12] → system.fontSize.subtext.medium
|
|
528
|
+
type.properties.fontSizes[14] → system.fontSize.subtext.large
|
|
529
|
+
type.properties.fontSizes[16] → system.fontSize.body.small
|
|
530
|
+
type.properties.fontSizes[18] → system.fontSize.body.medium
|
|
531
|
+
type.properties.fontSizes[20] → system.fontSize.body.large
|
|
532
|
+
type.properties.fontSizes[24] → system.fontSize.heading.small
|
|
533
|
+
type.properties.fontSizes[28] → system.fontSize.heading.medium
|
|
534
|
+
type.properties.fontSizes[32] → system.fontSize.heading.large
|
|
535
|
+
type.properties.fontSizes[40] → system.fontSize.title.small
|
|
536
|
+
type.properties.fontSizes[48] → system.fontSize.title.medium
|
|
537
|
+
type.properties.fontSizes[56] → system.fontSize.title.large
|
|
538
|
+
|
|
539
|
+
Font Weight Mappings:
|
|
540
|
+
type.properties.fontWeights.regular → system.fontWeight.regular
|
|
541
|
+
type.properties.fontWeights.medium → system.fontWeight.medium
|
|
542
|
+
type.properties.fontWeights.bold → system.fontWeight.bold
|
|
543
|
+
|
|
544
|
+
Type Levels (Recommended)
|
|
545
|
+
Use complete type level tokens for consistency:
|
|
546
|
+
```
|
|
547
|
+
// Old
|
|
548
|
+
import { type } from '@workday/canvas-kit-react/tokens';
|
|
549
|
+
...type.levels.body.medium
|
|
550
|
+
|
|
551
|
+
// New
|
|
552
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
553
|
+
...system.type.body.medium
|
|
554
|
+
```
|
|
555
|
+
|
|
556
|
+
Type Variants → Text Colors
|
|
557
|
+
Type variants are replaced with semantic text color tokens:
|
|
558
|
+
type.variant.error → system.color.text.critical.default
|
|
559
|
+
type.variant.hint → system.color.text.hint
|
|
560
|
+
type.variant.inverse → system.color.text.inverse
|
|
561
|
+
|
|
562
|
+
Depth (Shadow) Token Migration
|
|
563
|
+
===============================
|
|
564
|
+
|
|
565
|
+
Old depth tokens → New system depth tokens:
|
|
566
|
+
depth[1] → system.depth[1]
|
|
567
|
+
depth[2] → system.depth[2]
|
|
568
|
+
... etc
|
|
569
|
+
|
|
570
|
+
Important: Use boxShadow property (not depth)
|
|
571
|
+
```
|
|
572
|
+
// Old
|
|
573
|
+
const styles = createStyles({
|
|
574
|
+
depth: 1,
|
|
575
|
+
});
|
|
576
|
+
|
|
577
|
+
// New
|
|
578
|
+
const styles = createStyles({
|
|
579
|
+
boxShadow: system.depth[1],
|
|
580
|
+
});
|
|
581
|
+
```
|
|
582
|
+
|
|
583
|
+
Complete Migration Examples
|
|
584
|
+
===========================
|
|
585
|
+
|
|
586
|
+
Example 1: Card Component Migration
|
|
587
|
+
|
|
588
|
+
Before (Old Tokens):
|
|
589
|
+
```
|
|
590
|
+
import {
|
|
591
|
+
colors,
|
|
592
|
+
space,
|
|
593
|
+
borderRadius,
|
|
594
|
+
type,
|
|
595
|
+
depth
|
|
596
|
+
} from '@workday/canvas-kit-react/tokens';
|
|
597
|
+
import { createStyles } from '@workday/canvas-kit-styling';
|
|
598
|
+
|
|
599
|
+
const cardStyles = createStyles({
|
|
600
|
+
padding: space.l,
|
|
601
|
+
backgroundColor: colors.frenchVanilla100,
|
|
602
|
+
borderColor: colors.soap500,
|
|
603
|
+
borderRadius: borderRadius.m,
|
|
604
|
+
color: colors.blackPepper300,
|
|
605
|
+
depth: 1,
|
|
606
|
+
...type.levels.body.medium,
|
|
607
|
+
});
|
|
608
|
+
|
|
609
|
+
const headerStyles = createStyles({
|
|
610
|
+
color: colors.blackPepper500,
|
|
611
|
+
marginBottom: space.s,
|
|
612
|
+
...type.levels.heading.small,
|
|
613
|
+
});
|
|
614
|
+
|
|
615
|
+
const errorTextStyles = createStyles({
|
|
616
|
+
color: colors.cinnamon500,
|
|
617
|
+
...type.levels.subtext.large,
|
|
618
|
+
});
|
|
619
|
+
```
|
|
620
|
+
|
|
621
|
+
After (New Tokens - Semantic System Approach):
|
|
622
|
+
```
|
|
623
|
+
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
|
|
624
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
625
|
+
|
|
626
|
+
const cardStyles = createStyles({
|
|
627
|
+
padding: system.space.x8,
|
|
628
|
+
backgroundColor: system.color.bg.default,
|
|
629
|
+
border: `solid ${px2rem(1)}`,
|
|
630
|
+
borderColor: system.color.border.container,
|
|
631
|
+
borderRadius: system.shape.x1,
|
|
632
|
+
color: system.color.text.default,
|
|
633
|
+
boxShadow: system.depth[1],
|
|
634
|
+
...system.type.body.medium,
|
|
635
|
+
});
|
|
636
|
+
|
|
637
|
+
const headerStyles = createStyles({
|
|
638
|
+
color: system.color.text.default,
|
|
639
|
+
marginBottom: system.space.x4,
|
|
640
|
+
...system.type.heading.small,
|
|
641
|
+
});
|
|
642
|
+
|
|
643
|
+
const errorTextStyles = createStyles({
|
|
644
|
+
color: system.color.text.critical.default,
|
|
645
|
+
...system.type.subtext.large,
|
|
646
|
+
});
|
|
647
|
+
```
|
|
648
|
+
|
|
649
|
+
Example 2: Form Input Migration
|
|
650
|
+
|
|
651
|
+
Before (Old Tokens):
|
|
652
|
+
```
|
|
653
|
+
import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
|
|
654
|
+
|
|
655
|
+
const inputStyles = createStyles({
|
|
656
|
+
padding: `${space.xs} ${space.s}`,
|
|
657
|
+
backgroundColor: colors.frenchVanilla100,
|
|
658
|
+
borderColor: colors.soap400,
|
|
659
|
+
borderRadius: borderRadius.s,
|
|
660
|
+
color: colors.blackPepper400,
|
|
661
|
+
'&:focus': {
|
|
662
|
+
borderColor: colors.blueberry400,
|
|
663
|
+
backgroundColor: colors.frenchVanilla100,
|
|
664
|
+
},
|
|
665
|
+
'&.error': {
|
|
666
|
+
borderColor: colors.cinnamon500,
|
|
667
|
+
backgroundColor: colors.cinnamon100,
|
|
668
|
+
},
|
|
669
|
+
'&:disabled': {
|
|
670
|
+
backgroundColor: colors.soap200,
|
|
671
|
+
color: colors.soap600,
|
|
672
|
+
}
|
|
673
|
+
});
|
|
674
|
+
```
|
|
675
|
+
|
|
676
|
+
After (New Tokens - System Approach):
|
|
677
|
+
```
|
|
678
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
679
|
+
|
|
680
|
+
const inputStyles = createStyles({
|
|
681
|
+
padding: `${system.space.x3} ${system.space.x4}`,
|
|
682
|
+
backgroundColor: system.color.bg.default,
|
|
683
|
+
borderColor: system.color.border.default,
|
|
684
|
+
borderRadius: system.shape.half,
|
|
685
|
+
color: system.color.text.default,
|
|
686
|
+
'&:focus': {
|
|
687
|
+
borderColor: system.color.border.contrast,
|
|
688
|
+
backgroundColor: system.color.bg.default,
|
|
689
|
+
},
|
|
690
|
+
'&.error': {
|
|
691
|
+
borderColor: system.color.border.critical.default,
|
|
692
|
+
backgroundColor: system.color.bg.critical.default,
|
|
693
|
+
},
|
|
694
|
+
'&:disabled': {
|
|
695
|
+
backgroundColor: system.color.bg.disabled,
|
|
696
|
+
color: system.color.text.disabled,
|
|
697
|
+
}
|
|
698
|
+
});
|
|
699
|
+
```
|
|
700
|
+
|
|
701
|
+
Example 3: Button Migration with Brand Colors
|
|
702
|
+
|
|
703
|
+
Before (Old Tokens):
|
|
704
|
+
```
|
|
705
|
+
import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
|
|
706
|
+
import { theme } from '@emotion/react';
|
|
707
|
+
|
|
708
|
+
const primaryButtonStyles = createStyles({
|
|
709
|
+
padding: `${space.xs} ${space.m}`,
|
|
710
|
+
backgroundColor: theme.canvas.palette.primary.main,
|
|
711
|
+
borderColor: theme.canvas.palette.primary.main,
|
|
712
|
+
borderRadius: borderRadius.m,
|
|
713
|
+
color: theme.canvas.palette.primary.contrast,
|
|
714
|
+
'&:hover': {
|
|
715
|
+
backgroundColor: theme.canvas.palette.primary.dark,
|
|
716
|
+
},
|
|
717
|
+
});
|
|
718
|
+
```
|
|
719
|
+
|
|
720
|
+
After (New Tokens - Brand + System):
|
|
721
|
+
```
|
|
722
|
+
import { system, brand } from '@workday/canvas-tokens-web';
|
|
723
|
+
|
|
724
|
+
const primaryButtonStyles = createStyles({
|
|
725
|
+
padding: `${system.space.x3} ${system.space.x6}`,
|
|
726
|
+
backgroundColor: brand.primary.base,
|
|
727
|
+
borderColor: brand.primary.base,
|
|
728
|
+
borderRadius: system.shape.x1,
|
|
729
|
+
color: brand.primary.accent,
|
|
730
|
+
'&:hover': {
|
|
731
|
+
backgroundColor: brand.primary.dark,
|
|
732
|
+
},
|
|
733
|
+
});
|
|
734
|
+
```
|
|
735
|
+
|
|
736
|
+
Best Practices
|
|
737
|
+
==============
|
|
738
|
+
|
|
739
|
+
1. Prefer System Tokens
|
|
740
|
+
Use system tokens over base tokens whenever possible for better theming support:
|
|
741
|
+
|
|
742
|
+
Good - Semantic and themeable:
|
|
743
|
+
backgroundColor: system.color.bg.default
|
|
744
|
+
|
|
745
|
+
Avoid - Hard-coded base value:
|
|
746
|
+
backgroundColor: base.neutral0
|
|
747
|
+
|
|
748
|
+
2. Use Complete Type Levels
|
|
749
|
+
Instead of mixing individual type properties, use complete type level tokens:
|
|
750
|
+
|
|
751
|
+
Good - Consistent type styling:
|
|
752
|
+
...system.type.body.medium
|
|
753
|
+
|
|
754
|
+
Avoid - Mixing individual properties:
|
|
755
|
+
fontSize: system.fontSize.body.medium,
|
|
756
|
+
fontWeight: system.fontWeight.regular,
|
|
757
|
+
lineHeight: '1.5'
|
|
758
|
+
|
|
759
|
+
3. Leverage Styling Utilities
|
|
760
|
+
Always use createStyles and cssVar for proper CSS variable handling:
|
|
761
|
+
|
|
762
|
+
Good - Proper CSS variable wrapping:
|
|
763
|
+
const styles = createStyles({
|
|
764
|
+
padding: system.space.x4,
|
|
765
|
+
});
|
|
766
|
+
|
|
767
|
+
Avoid - Manual CSS variable handling:
|
|
768
|
+
const styles = {
|
|
769
|
+
padding: `var(${system.space.x4})`,
|
|
770
|
+
};
|
|
771
|
+
|
|
772
|
+
4. Convert Pixel Values
|
|
773
|
+
Use px2rem for pixel-based values to maintain consistency:
|
|
774
|
+
|
|
775
|
+
import { px2rem } from '@workday/canvas-kit-styling';
|
|
776
|
+
|
|
777
|
+
const styles = createStyles({
|
|
778
|
+
border: `solid ${px2rem(1)}`,
|
|
779
|
+
borderColor: system.color.border.container,
|
|
780
|
+
});
|
|
781
|
+
|
|
782
|
+
Common Pitfalls & Solutions
|
|
783
|
+
===========================
|
|
784
|
+
|
|
785
|
+
1. Forgetting CSS Variable Imports
|
|
786
|
+
Problem: Styles don't apply because CSS variables aren't defined.
|
|
787
|
+
Solution: Ensure you've imported the CSS variable files at your app's top level.
|
|
788
|
+
|
|
789
|
+
2. Not Using var() Wrapper
|
|
790
|
+
Problem: CSS properties don't work with raw token values.
|
|
791
|
+
Solution: Use createStyles or cssVar utility instead of direct token references.
|
|
792
|
+
|
|
793
|
+
3. Mixing Old and New Tokens
|
|
794
|
+
Problem: Inconsistent styling and potential conflicts.
|
|
795
|
+
Solution: Migrate completely to new tokens rather than mixing systems.
|
|
796
|
+
|
|
797
|
+
4. Using Base Tokens for Everything
|
|
798
|
+
Problem: Missing out on theming capabilities.
|
|
799
|
+
Solution: Prefer system tokens for their semantic meaning and theming support.
|
|
800
|
+
|
|
801
|
+
Incremental Migration Strategy
|
|
802
|
+
==============================
|
|
803
|
+
|
|
804
|
+
1. Start with New Projects: Use new tokens for all new components and features
|
|
805
|
+
2. Component-by-Component: Migrate existing components one at a time
|
|
806
|
+
3. Test Thoroughly: Ensure visual consistency after each component migration
|
|
807
|
+
4. Update Style Patterns: Migrate from style props to createStyles where needed
|
|
808
|
+
5. Consolidate Imports: Remove old token imports once migration is complete
|
|
809
|
+
|
|
810
|
+
Next Steps
|
|
811
|
+
==========
|
|
812
|
+
|
|
813
|
+
After completing the token migration:
|
|
814
|
+
- Review your components for consistent use of system tokens
|
|
815
|
+
- Consider implementing theming if not already in place
|
|
816
|
+
- Update your team's coding standards to reflect new token usage
|
|
817
|
+
- Monitor for any visual regressions and address them promptly
|
|
818
|
+
|
|
819
|
+
Resources
|
|
820
|
+
=========
|
|
821
|
+
|
|
822
|
+
- Canvas Tokens Documentation: https://canvas.workday.com/styles/tokens/
|
|
823
|
+
- [Canvas Tokens v3 Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs)
|
|
824
|
+
- Canvas Kit Styling Documentation: https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs
|
|
825
|
+
- Token Migration Discussion: https://github.com/Workday/canvas-tokens/discussions/77
|
|
826
|
+
- Canvas Kit GitHub Repository: https://github.com/Workday/canvas-kit
|