@workday/canvas-kit-mcp 15.0.0-alpha.0051-next.0 → 15.0.0-alpha.0060-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/README.md +6 -0
- package/dist/cli.js +272 -7
- package/dist/cli.js.map +2 -2
- package/dist/index.js +272 -7
- package/dist/index.js.map +2 -2
- package/dist/lib/{llm-txt/llm-style-props-migration.txt → llm-style-props-migration.txt} +1 -1
- package/dist/lib/theming.md +649 -0
- package/dist/lib/tokens/color-contrast.md +116 -0
- package/dist/lib/tokens/color-palette.md +141 -0
- package/dist/lib/tokens/color-roles.md +520 -0
- package/dist/lib/tokens/color-scale.md +277 -0
- package/dist/lib/tokens/color-tokens.md +130 -0
- package/dist/lib/tokens/token-migration.md +234 -0
- package/dist/lib/upgrade-guides/10.0-UPGRADE-GUIDE.md +346 -0
- package/dist/lib/upgrade-guides/11.0-UPGRADE-GUIDE.md +960 -0
- package/dist/lib/upgrade-guides/14.0-UPGRADE-GUIDE.md +1 -1
- package/dist/lib/upgrade-guides/15.0-UPGRADE-GUIDE.md +21 -1
- package/dist/lib/upgrade-guides/9.0-UPGRADE-GUIDE.md +498 -0
- package/dist/types/lib/index.d.ts.map +1 -1
- package/package.json +2 -2
- /package/dist/lib/{llm-txt/llm-token-migration-14.txt → llm-token-migration-14.txt} +0 -0
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
# Design Token Migration: v2 to v3
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
This document outlines the migration from design tokens v2 to v3. Many color tokens from previous
|
|
6
|
+
versions have been deprecated or replaced in v3 to align with the new color system and improve
|
|
7
|
+
consistency, accessibility, and brand alignment.
|
|
8
|
+
|
|
9
|
+
### Important Notes
|
|
10
|
+
|
|
11
|
+
- Deprecated tokens are mapped to new palette values or system tokens where possible
|
|
12
|
+
- New color values may not be exact visual matches due to the switch to OKLCH color space and
|
|
13
|
+
expanded palette scale
|
|
14
|
+
- We recommend updating usage to system tokens for best results and future compatibility
|
|
15
|
+
- Tokens marked with "withWhiteText: true" indicate sufficient contrast for white text overlay
|
|
16
|
+
|
|
17
|
+
## Deprecated Base Palette Tokens
|
|
18
|
+
|
|
19
|
+
| Token Name | Old Value | New Value | System Token Replacement |
|
|
20
|
+
| ------------------------------------ | --------- | ------------------------- | ----------------------------------------------------------------------------------------------- |
|
|
21
|
+
| base.palette.cinnamon.100 | #ffefee | base.palette.red.50 | sys.color.bg.critical.softer |
|
|
22
|
+
| base.palette.cinnamon.200 | #FCC9C5 | base.palette.red.100 | sys.color.bg.critical.soft |
|
|
23
|
+
| base.palette.cinnamon.300 | #ff867d | base.palette.red.300 | - |
|
|
24
|
+
| base.palette.cinnamon.400 | #ff5347 | base.palette.red.400 | sys.color.fg.critical.soft |
|
|
25
|
+
| base.palette.cinnamon.500 | #de2e21 | base.palette.red.600 | sys.color.bg.critical.default, sys.color.fg.critical.default, sys.color.border.critical.default |
|
|
26
|
+
| base.palette.cinnamon.600 | #a31b12 | base.palette.red.700 | sys.color.bg.critical.strong, sys.color.fg.critical.strong |
|
|
27
|
+
| base.palette.peach.100 | #fff3f0 | base.palette.coral.50 | - |
|
|
28
|
+
| base.palette.peach.200 | #ffc2b3 | base.palette.coral.200 | - |
|
|
29
|
+
| base.palette.peach.300 | #ff957a | base.palette.coral.300 | - |
|
|
30
|
+
| base.palette.peach.400 | #ff643d | base.palette.red.400 | - |
|
|
31
|
+
| base.palette.peach.500 | #de4721 | base.palette.coral.600 | - |
|
|
32
|
+
| base.palette.peach.600 | #b53413 | base.palette.coral.700 | - |
|
|
33
|
+
| base.palette.chili-mango.100 | #ffe6d9 | base.palette.coral.25 | - |
|
|
34
|
+
| base.palette.chili-mango.200 | #ffc7ab | base.palette.coral.200 | - |
|
|
35
|
+
| base.palette.chili-mango.300 | #ff9b69 | base.palette.coral.300 | - |
|
|
36
|
+
| base.palette.chili-mango.400 | #ff671b | base.palette.orange.500 | - |
|
|
37
|
+
| base.palette.chili-mango.500 | #e04b00 | base.palette.orange.500 | - |
|
|
38
|
+
| base.palette.chili-mango.600 | #a33600 | base.palette.orange.700 | - |
|
|
39
|
+
| base.palette.cantaloupe.100 | #ffeed9 | base.palette.amber.50 | sys.color.bg.caution.softer |
|
|
40
|
+
| base.palette.cantaloupe.200 | #fcd49f | base.palette.amber.200 | sys.color.bg.caution.soft, sys.color.fg.caution.softer |
|
|
41
|
+
| base.palette.cantaloupe.300 | #ffbc63 | base.palette.amber.300 | |
|
|
42
|
+
| base.palette.cantaloupe.400 | #ffa126 | base.palette.amber.400 | sys.color.bg.caution.default, sys.color.border.caution.default |
|
|
43
|
+
| base.palette.cantaloupe.500 | #f38b00 | base.palette.amber.500 | sys.color.bg.caution.strong, sys.color.fg.caution.softer, |
|
|
44
|
+
| base.palette.cantaloupe.600 | #c06c00 | base.palette.amber.600 | sys.color.bg.caution.stronger, sys.color.border.caution.strong |
|
|
45
|
+
| base.palette.sour-lemon.100 | #fff9e6 | base.palette.amber.25 | - |
|
|
46
|
+
| base.palette.sour-lemon.200 | #ffecab | base.palette.amber.100 | - |
|
|
47
|
+
| base.palette.sour-lemon.300 | #ffda61 | base.palette.amber.200 | - |
|
|
48
|
+
| base.palette.sour-lemon.400 | #ffc629 | base.palette.amber.300 | - |
|
|
49
|
+
| base.palette.sour-lemon.500 | #ebb400 | base.palette.amber.300 | - |
|
|
50
|
+
| base.palette.sour-lemon.600 | #bd9100 | base.palette.amber.500 | - |
|
|
51
|
+
| base.palette.juicy-pear.100 | #f7fae6 | base.palette.amber.25 | - |
|
|
52
|
+
| base.palette.juicy-pear.200 | #e2f391 | base.palette.amber.100 | - |
|
|
53
|
+
| base.palette.juicy-pear.300 | #c4de40 | base.palette.amber.200 | - |
|
|
54
|
+
| base.palette.juicy-pear.400 | #a8c224 | base.palette.amber.200 | - |
|
|
55
|
+
| base.palette.juicy-pear.500 | #8ea618 | base.palette.green.500 | - |
|
|
56
|
+
| base.palette.juicy-pear.600 | #687818 | base.palette.green.700 | - |
|
|
57
|
+
| base.palette.kiwi.100 | #ecfcd7 | base.palette.green.50 | - |
|
|
58
|
+
| base.palette.kiwi.200 | #caf593 | base.palette.green.100 | - |
|
|
59
|
+
| base.palette.kiwi.300 | #a7e05c | base.palette.green.200 | - |
|
|
60
|
+
| base.palette.kiwi.400 | #77bc1f | base.palette.green.500 | - |
|
|
61
|
+
| base.palette.kiwi.500 | #609915 | base.palette.green.500 | - |
|
|
62
|
+
| base.palette.kiwi.600 | #537824 | base.palette.green.700 | - |
|
|
63
|
+
| base.palette.green-apple.100 | #ebfff0 | base.palette.green.50 | sys.color.bg.positive.softer |
|
|
64
|
+
| base.palette.green-apple.200 | #acf5be | base.palette.green.100 | sys.color.bg.positive.soft |
|
|
65
|
+
| base.palette.green-apple.300 | #5fe380 | base.palette.green.200 | sys.color.fg.positive.soft |
|
|
66
|
+
| base.palette.green-apple.400 | #43c463 | base.palette.green.600 | sys.color.bg.positive.default, sys.color.fg.positive.default |
|
|
67
|
+
| base.palette.green-apple.500 | #319c4c | base.palette.green.700 | sys.color.bg.positive.strong, sys.color.fg.positive.strong |
|
|
68
|
+
| base.palette.green-apple.600 | #217a37 | base.palette.green.800 | sys.color.bg.positive.stronger, sys.color.fg.positive.stronger |
|
|
69
|
+
| base.palette.watermelon.100 | #ebfdf8 | base.palette.neutral.50 | - |
|
|
70
|
+
| base.palette.watermelon.200 | #b7edde | base.palette.neutral.100 | - |
|
|
71
|
+
| base.palette.watermelon.300 | #65ccaf | base.palette.green.100 | - |
|
|
72
|
+
| base.palette.watermelon.400 | #12a67c | base.palette.green.600 | - |
|
|
73
|
+
| base.palette.watermelon.500 | #0b7a5c | base.palette.green.700 | - |
|
|
74
|
+
| base.palette.watermelon.600 | #08513d | base.palette.green.900 | - |
|
|
75
|
+
| base.palette.jewel.100 | #ebfdff | base.palette.teal.25 | - |
|
|
76
|
+
| base.palette.jewel.200 | #acecf3 | base.palette.teal.200 | - |
|
|
77
|
+
| base.palette.jewel.300 | #44c8d7 | base.palette.teal.400 | - |
|
|
78
|
+
| base.palette.jewel.400 | #1ea4b3 | base.palette.teal.500 | - |
|
|
79
|
+
| base.palette.jewel.500 | #1a818c | base.palette.teal.600 | - |
|
|
80
|
+
| base.palette.jewel.600 | #156973 | base.palette.teal.700 | - |
|
|
81
|
+
| base.palette.toothpaste.100 | #d7f1fc | base.palette.azure.50 | - |
|
|
82
|
+
| base.palette.toothpaste.200 | #99e0ff | base.palette.azure.200 | - |
|
|
83
|
+
| base.palette.toothpaste.300 | #40b4e5 | base.palette.azure.300 | - |
|
|
84
|
+
| base.palette.toothpaste.400 | #1894c9 | base.palette.azure.400 | - |
|
|
85
|
+
| base.palette.toothpaste.500 | #0271a1 | base.palette.azure.700 | - |
|
|
86
|
+
| base.palette.toothpaste.600 | #005B82 | base.palette.azure.800 | - |
|
|
87
|
+
| base.palette.blueberry.100 | #D7EAFC | base.palette.blue.25 | - |
|
|
88
|
+
| base.palette.blueberry.200 | #A6D2FF | base.palette.blue.100 | sys.color.bg.primary.soft |
|
|
89
|
+
| base.palette.blueberry.300 | #40A0FF | base.palette.blue.400 | sys.color.fg.primary.soft |
|
|
90
|
+
| base.palette.blueberry.400 | #0875E1 | base.palette.blue.600 | sys.color.bg.primary.default, sys.color.fg.primary.default, sys.color.border.primary.default |
|
|
91
|
+
| base.palette.blueberry.500 | #005cb9 | base.palette.blue.700 | sys.color.bg.primary.strong, sys.color.fg.primary.strong |
|
|
92
|
+
| base.palette.blueberry.600 | #004387 | base.palette.blue.800 | sys.color.bg.primary.stronger, sys.color.text.primary.stronger |
|
|
93
|
+
| base.palette.plum.100 | #e6f1ff | base.palette.blue.100 | - |
|
|
94
|
+
| base.palette.plum.200 | #A6CDFF | base.palette.blue.200 | - |
|
|
95
|
+
| base.palette.plum.300 | #529bfa | base.palette.blue.400 | - |
|
|
96
|
+
| base.palette.plum.400 | #3881E1 | base.palette.blue.600 | - |
|
|
97
|
+
| base.palette.plum.500 | #3166ab | base.palette.blue.700 | - |
|
|
98
|
+
| base.palette.plum.600 | #264a7a | base.palette.blue.800 | - |
|
|
99
|
+
| base.palette.berry-smoothie.100 | #e8edff | base.palette.indigo.50 | - |
|
|
100
|
+
| base.palette.berry-smoothie.200 | #c2cfff | base.palette.indigo.200 | - |
|
|
101
|
+
| base.palette.berry-smoothie.300 | #7891FF | base.palette.indigo.400 | - |
|
|
102
|
+
| base.palette.berry-smoothie.400 | #5E77E6 | base.palette.blue.500 | - |
|
|
103
|
+
| base.palette.berry-smoothie.500 | #4b5eb3 | base.palette.blue.700 | - |
|
|
104
|
+
| base.palette.berry-smoothie.600 | #3b4987 | base.palette.blue.800 | - |
|
|
105
|
+
| base.palette.blackberry.100 | #f0f0ff | base.palette.indigo.25 | - |
|
|
106
|
+
| base.palette.blackberry.200 | #c3c2ff | base.palette.indigo.200 | - |
|
|
107
|
+
| base.palette.blackberry.300 | #8483e6 | base.palette.indigo.400 | - |
|
|
108
|
+
| base.palette.blackberry.400 | #5c59e6 | base.palette.indigo.500 | - |
|
|
109
|
+
| base.palette.blackberry.500 | #413fcc | base.palette.indigo.700 | - |
|
|
110
|
+
| base.palette.blackberry.600 | #2e2d91 | base.palette.indigo.900 | - |
|
|
111
|
+
| base.palette.island-punch.100 | #f5f0ff | base.palette.purple.25 | - |
|
|
112
|
+
| base.palette.island-punch.200 | #d2befa | base.palette.purple.200 | - |
|
|
113
|
+
| base.palette.island-punch.300 | #a88ae6 | base.palette.indigo.400 | - |
|
|
114
|
+
| base.palette.island-punch.400 | #8660d1 | base.palette.purple.500 | - |
|
|
115
|
+
| base.palette.island-punch.500 | #6345a1 | base.palette.purple.700 | - |
|
|
116
|
+
| base.palette.island-punch.600 | #503882 | base.palette.purple.800 | - |
|
|
117
|
+
| base.palette.grape-soda.100 | #feebff | base.palette.magenta.50 | - |
|
|
118
|
+
| base.palette.grape-soda.200 | #fac0ff | base.palette.magenta.200 | - |
|
|
119
|
+
| base.palette.grape-soda.300 | #de8ae6 | base.palette.purple.400 | - |
|
|
120
|
+
| base.palette.grape-soda.400 | #c860d1 | base.palette.purple.500 | - |
|
|
121
|
+
| base.palette.grape-soda.500 | #97499e | base.palette.purple.600 | - |
|
|
122
|
+
| base.palette.grape-soda.600 | #7C3882 | base.palette.purple.800 | - |
|
|
123
|
+
| base.palette.pomegranate.100 | #ffebf3 | base.palette.magenta.50 | - |
|
|
124
|
+
| base.palette.pomegranate.200 | #ffbdd6 | base.palette.magenta.100 | - |
|
|
125
|
+
| base.palette.pomegranate.300 | #ff5c9a | base.palette.magenta.500 | - |
|
|
126
|
+
| base.palette.pomegranate.400 | #f31167 | base.palette.red.400 | - |
|
|
127
|
+
| base.palette.pomegranate.500 | #c70550 | base.palette.red.700 | - |
|
|
128
|
+
| base.palette.pomegranate.600 | #99003a | base.palette.red.800 | - |
|
|
129
|
+
| base.palette.fruit-punch.100 | #FFEEEE | base.palette.red.25 | - |
|
|
130
|
+
| base.palette.fruit-punch.200 | #ffbdbd | base.palette.red.200 | - |
|
|
131
|
+
| base.palette.fruit-punch.300 | #FF7E7E | base.palette.red.300 | - |
|
|
132
|
+
| base.palette.fruit-punch.400 | #ff4c4c | base.palette.red.400 | - |
|
|
133
|
+
| base.palette.fruit-punch.500 | #e12f2f | base.palette.red.400 | - |
|
|
134
|
+
| base.palette.fruit-punch.600 | #b82828 | base.palette.red.700 | - |
|
|
135
|
+
| base.palette.root-beer.100 | #faf3f0 | base.palette.coral.25 | - |
|
|
136
|
+
| base.palette.root-beer.200 | #EBD7CF | base.palette.coral.100 | - |
|
|
137
|
+
| base.palette.root-beer.300 | #dcbbad | base.palette.coral.200 | - |
|
|
138
|
+
| base.palette.root-beer.400 | #ba9a8c | base.palette.coral.200 | - |
|
|
139
|
+
| base.palette.root-beer.500 | #8C7266 | base.palette.coral.200 | - |
|
|
140
|
+
| base.palette.root-beer.600 | #664d42 | base.palette.amber.950 | - |
|
|
141
|
+
| base.palette.toasted-marshmallow.100 | #fdf6e6 | base.palette.amber.25 | - |
|
|
142
|
+
| base.palette.toasted-marshmallow.200 | #ebd6a9 | base.palette.orange.100 | - |
|
|
143
|
+
| base.palette.toasted-marshmallow.300 | #e6bf6c | base.palette.orange.200 | - |
|
|
144
|
+
| base.palette.toasted-marshmallow.400 | #CC9E3B | base.palette.orange.300 | - |
|
|
145
|
+
| base.palette.toasted-marshmallow.500 | #b37f10 | base.palette.amber.500 | - |
|
|
146
|
+
| base.palette.toasted-marshmallow.600 | #8C6000 | base.palette.amber.600 | - |
|
|
147
|
+
| base.palette.licorice.100 | #A1AAB3 | base.palette.slate.400 | sys.color.bg.muted.softer, sys.color.fg.disabled, sys.color.border.input.disabled |
|
|
148
|
+
| base.palette.licorice.200 | #7b858f | base.palette.slate.500 | sys.color.bg.muted.soft, sys.color.fg.muted.soft, sys.color.border.input.default |
|
|
149
|
+
| base.palette.licorice.300 | #5E6A75 | base.palette.slate.600 | sys.color.bg.muted.default, sys.color.fg.muted.default, sys.color.text.hint |
|
|
150
|
+
| base.palette.licorice.400 | #4a5561 | base.palette.slate.700 | sys.color.fg.muted.strong |
|
|
151
|
+
| base.palette.licorice.500 | #333d47 | base.palette.slate.800 | sys.color.bg.muted.strong, sys.color.fg.muted.stronger, sys.color.border.input.strong |
|
|
152
|
+
| base.palette.licorice.600 | #1f262e | base.palette.slate.900 | - |
|
|
153
|
+
| base.palette.soap.100 | #f6f7f8 | base.palette.slate.25 | sys.color.bg.alt.softer |
|
|
154
|
+
| base.palette.soap.200 | #F0F1F2 | base.palette.slate.50 | sys.color.bg.alt.soft |
|
|
155
|
+
| base.palette.soap.300 | #e8ebed | base.palette.slate.100 | sys.color.bg.alt.default, sys.color.border.input.inverse |
|
|
156
|
+
| base.palette.soap.400 | #DFE2E6 | base.palette.slate.200 | sys.color.bg.alt.strong, sys.color.border.divider |
|
|
157
|
+
| base.palette.soap.500 | #ced3d9 | base.palette.slate.300 | sys.color.bg.alt.stronger, sys.color.border.container |
|
|
158
|
+
| base.palette.soap.600 | #B9C0C7 | base.palette.slate.600 | - |
|
|
159
|
+
| base.palette.french-vanilla.100 | #ffffff | base.palette.neutral.0 | sys.color.bg.default, sys.color.fg.inverse, sys.color.border.inverse |
|
|
160
|
+
| base.palette.french-vanilla.200 | #ebebeb | base.palette.neutral.50 | - |
|
|
161
|
+
| base.palette.french-vanilla.300 | #d4d4d4 | base.palette.neutral.100 | - |
|
|
162
|
+
| base.palette.french-vanilla.400 | #bdbdbd | base.palette.neutral.200 | - |
|
|
163
|
+
| base.palette.french-vanilla.500 | #a6a6a6 | base.palette.neutral.300 | - |
|
|
164
|
+
| base.palette.french-vanilla.600 | #8f8f8f | base.palette.neutral.400 | - |
|
|
165
|
+
| base.palette.black-pepper.100 | #787878 | base.palette.neutral.500 | - |
|
|
166
|
+
| base.palette.black-pepper.200 | #616161 | base.palette.neutral.700 | - |
|
|
167
|
+
| base.palette.black-pepper.300 | #494949 | base.palette.neutral.900 | sys.color.fg.default |
|
|
168
|
+
| base.palette.black-pepper.400 | #333333 | base.palette.neutral.950 | sys.color.bg.contrast.default, sys.color.fg.strong, sys.color.border.contrast.default |
|
|
169
|
+
| base.palette.black-pepper.500 | #1e1e1e | base.palette.neutral.975 | sys.color.bg.contrast.strong, sys.color.fg.stronger, sys.color.border.contrast.strong |
|
|
170
|
+
| base.palette.black-pepper.600 | #000000 | base.palette.neutral.1000 | - |
|
|
171
|
+
| base.palette.coconut.100 | #F0EEEE | DEPRECATED | - |
|
|
172
|
+
| base.palette.coconut.200 | #e3dfdf | DEPRECATED | - |
|
|
173
|
+
| base.palette.coconut.300 | #d1cbcc | DEPRECATED | - |
|
|
174
|
+
| base.palette.coconut.400 | #b3acac | DEPRECATED | - |
|
|
175
|
+
| base.palette.coconut.500 | #9e9595 | DEPRECATED | - |
|
|
176
|
+
| base.palette.coconut.600 | #8F8687 | DEPRECATED | - |
|
|
177
|
+
| base.palette.cappuccino.100 | #7A7374 | DEPRECATED | - |
|
|
178
|
+
| base.palette.cappuccino.200 | #706869 | DEPRECATED | - |
|
|
179
|
+
| base.palette.cappuccino.300 | #5E5757 | DEPRECATED | - |
|
|
180
|
+
| base.palette.cappuccino.400 | #4A4242 | DEPRECATED | - |
|
|
181
|
+
| base.palette.cappuccino.500 | #352f2f | DEPRECATED | - |
|
|
182
|
+
| base.palette.cappuccino.600 | #231f20 | DEPRECATED | - |
|
|
183
|
+
| base.palette.dragon-fruit.100 | #FBF1FF | base.palette.purple.25 | - |
|
|
184
|
+
| base.palette.dragon-fruit.200 | #EFD3FF | base.palette.purple.100 | - |
|
|
185
|
+
| base.palette.dragon-fruit.300 | #BE61F6 | base.palette.indigo.500 | sys.color.bg.ai.default |
|
|
186
|
+
| base.palette.dragon-fruit.400 | #8C17D2 | base.palette.indigo.600 | sys.color.bg.ai.strong |
|
|
187
|
+
| base.palette.dragon-fruit.500 | #6B11A3 | base.palette.indigo.700 | sys.color.bg.ai.stronger |
|
|
188
|
+
| base.palette.dragon-fruit.600 | #4A0D71 | base.palette.indigo.900 | sys.color.bg.ai.strongest, sys.color.border.ai, sys.color.text.ai |
|
|
189
|
+
|
|
190
|
+
## Migration Strategy
|
|
191
|
+
|
|
192
|
+
### Phase 1: Assessment
|
|
193
|
+
|
|
194
|
+
1. Audit existing token usage in your codebase
|
|
195
|
+
2. Identify deprecated tokens that need replacement
|
|
196
|
+
3. Map current usage to appropriate system tokens
|
|
197
|
+
|
|
198
|
+
### Phase 2: Replacement
|
|
199
|
+
|
|
200
|
+
1. Replace deprecated base palette tokens with System Token Replacement values
|
|
201
|
+
2. If system value is not provided uses new base palette value
|
|
202
|
+
3. Update brand tokens to new references
|
|
203
|
+
4. Migrate to system tokens where possible for semantic clarity
|
|
204
|
+
|
|
205
|
+
### Phase 3: Testing
|
|
206
|
+
|
|
207
|
+
1. Verify color contrast ratios meet WCAG guidelines
|
|
208
|
+
2. Test with assistive technologies
|
|
209
|
+
3. Validate visual consistency across components
|
|
210
|
+
4. Test color perception for color-blind users
|
|
211
|
+
|
|
212
|
+
### Phase 4: Documentation
|
|
213
|
+
|
|
214
|
+
1. Update design system documentation
|
|
215
|
+
2. Create migration guides for teams
|
|
216
|
+
3. Establish guidelines for future token usage
|
|
217
|
+
|
|
218
|
+
## Accessibility Considerations
|
|
219
|
+
|
|
220
|
+
- **Contrast Ratios**: New OKLCH color space may affect contrast. Verify all text meets WCAG AA
|
|
221
|
+
standards (4.5:1 for normal text, 3:1 for large text)
|
|
222
|
+
- **Color Blindness**: Test with color blindness simulators, especially for status indicators
|
|
223
|
+
- **System Tokens**: Prefer semantic system tokens over direct palette references for better
|
|
224
|
+
accessibility support
|
|
225
|
+
- **White Text Overlay**: Tokens marked "withWhiteText" have sufficient contrast for white text
|
|
226
|
+
- **Focus Indicators**: Ensure focus states remain visible with new color values
|
|
227
|
+
|
|
228
|
+
## Best Practices
|
|
229
|
+
|
|
230
|
+
1. **Use System Tokens First**: Always prefer sys.color._ tokens over base.palette._ tokens
|
|
231
|
+
2. **Semantic Meaning**: Choose tokens based on semantic meaning rather than visual appearance
|
|
232
|
+
3. **Consistent Patterns**: Use consistent token patterns across similar UI elements
|
|
233
|
+
4. **Future-Proof**: System tokens will adapt better to future theme changes
|
|
234
|
+
5. **Test Thoroughly**: Colors may appear different due to OKLCH color space changes
|
|
@@ -0,0 +1,346 @@
|
|
|
1
|
+
---
|
|
2
|
+
source_file: docs/mdx/10.0-UPGRADE-GUIDE.mdx
|
|
3
|
+
live_url: https://workday.github.io/canvas-kit/docs/mdx/10.0-UPGRADE-GUIDE
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<Meta title="Guides/Upgrade Guides/v10.0" />
|
|
7
|
+
|
|
8
|
+
# Canvas Kit 10.0 Upgrade Guide
|
|
9
|
+
|
|
10
|
+
This guide contains an overview of the changes in Canvas Kit v10. Please
|
|
11
|
+
[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
|
|
12
|
+
any questions.
|
|
13
|
+
|
|
14
|
+
- [Codemod](#codemod)
|
|
15
|
+
- [Features](#features)
|
|
16
|
+
- [Styling](#styling)
|
|
17
|
+
- [Removals](#removals)
|
|
18
|
+
- [CSS Packages](#css-packages)
|
|
19
|
+
- [useBanner](#useBanner)
|
|
20
|
+
- [Deprecations](#deprecations)
|
|
21
|
+
- [Input Icon Container](#input-icon-container)
|
|
22
|
+
- [Select (Preview)](#select-preview)
|
|
23
|
+
- [Space Numbers](#space-numbers)
|
|
24
|
+
- [Table](#table)
|
|
25
|
+
- [Token Updates](#token-updates)
|
|
26
|
+
- [Space and Depth](#space-and-depth)
|
|
27
|
+
- [Component Updates](#component-updates)
|
|
28
|
+
- [Button](#button)
|
|
29
|
+
- [Popups](#popups)
|
|
30
|
+
- [Select (Main)](#select-main)
|
|
31
|
+
- [Glossary](#glossary)
|
|
32
|
+
- [Main](#main)
|
|
33
|
+
- [Preview](#preview)
|
|
34
|
+
- [Labs](#labs)
|
|
35
|
+
|
|
36
|
+
## Codemod
|
|
37
|
+
|
|
38
|
+
Unlike past major releases, v10 does not have a codemod. The changes in v10 were either deemed
|
|
39
|
+
infeasible to codemod or provided low ROI based on consumer usage. This is subject to change; if
|
|
40
|
+
necessary, we can release codemods as minor updates.
|
|
41
|
+
|
|
42
|
+
Codemods are here to stay and will continue to be a part of our release process. In the meantime,
|
|
43
|
+
this Upgrade Guide should provide everything you need to update your code to be compatible with v10.
|
|
44
|
+
|
|
45
|
+
## Features
|
|
46
|
+
|
|
47
|
+
### Styling
|
|
48
|
+
|
|
49
|
+
**PR:** [#2273](https://github.com/Workday/canvas-kit/pull/2273)
|
|
50
|
+
|
|
51
|
+
We've introduced a new styling package `@workday/canvas-kit-styling` which is a wrapper around
|
|
52
|
+
`@emotion/css`.
|
|
53
|
+
|
|
54
|
+
If you're using Canvas Kit and not directly using this package, there is nothing extra to do on your
|
|
55
|
+
end. The Canvas Kit packages are using the static compilation as part of the build process. If you
|
|
56
|
+
want to use this package for your own styles, you don't need to do anything special to use in
|
|
57
|
+
development; just reference our
|
|
58
|
+
[documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started--docs) on
|
|
59
|
+
how to get started.
|
|
60
|
+
|
|
61
|
+
For more information on why this package was introduced, please reference our
|
|
62
|
+
[discussion](https://github.com/Workday/canvas-kit/discussions/2265) on the future of styling for
|
|
63
|
+
Canvas Kit.
|
|
64
|
+
|
|
65
|
+
## Removals
|
|
66
|
+
|
|
67
|
+
Removals from our codebase may no longer be consumed. We've either promoted or replaced the removed
|
|
68
|
+
component or utility.
|
|
69
|
+
|
|
70
|
+
### CSS Packages
|
|
71
|
+
|
|
72
|
+
**PR:** [#2368](https://github.com/Workday/canvas-kit/pull/2368)
|
|
73
|
+
|
|
74
|
+
We've removed the `@workday/canvas-kit-css-*` packages from our source code. The packages have been
|
|
75
|
+
in maintenance mode for a while with no updates, but still riding the wave of version updates.
|
|
76
|
+
Starting in v10, our plan is to release our CSS kit as a static build straight from our React
|
|
77
|
+
package and under the new `@workday/canvas-kit-css` package. This means we're not releasing an
|
|
78
|
+
update to the CSS package in `10.0.0`, but will add our button CSS as a minor version. We're
|
|
79
|
+
converting all our existing React packages to use this new styling strategy which will allow us to
|
|
80
|
+
publish all CSS packages straight from the styles of our React packages, reducing the maitenance
|
|
81
|
+
overhead required to maintain both our React kit and CSS kit.
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
### useBanner
|
|
86
|
+
|
|
87
|
+
**PR:** [#2318](https://github.com/Workday/canvas-kit/pull/2318)
|
|
88
|
+
|
|
89
|
+
We've removed the `useBanner` hook, the only function of which was to add `aria-labelledby` and
|
|
90
|
+
`aria-describedby` references to the text inside of the Banner. This was not required for
|
|
91
|
+
accessibility, and browsers can compute the name of the Banner from the text given inside.
|
|
92
|
+
|
|
93
|
+
## Deprecations
|
|
94
|
+
|
|
95
|
+
We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
|
|
96
|
+
in a future major release. This signals consumers to migrate to a more stable alternative before the
|
|
97
|
+
deprecated code is removed.
|
|
98
|
+
|
|
99
|
+
### Input Icon Container
|
|
100
|
+
|
|
101
|
+
**PR:** [#2332](https://github.com/Workday/canvas-kit/pull/2332)
|
|
102
|
+
|
|
103
|
+
We've deprecated `InputIconContainer` from [Main](#main) because it doesn't handle bidirectionality
|
|
104
|
+
or icons at the start of an input. Please use
|
|
105
|
+
[`InputGroup`](https://workday.github.io/canvas-kit/?path=/story/components-inputs-text-input--icons)
|
|
106
|
+
instead.
|
|
107
|
+
|
|
108
|
+
---
|
|
109
|
+
|
|
110
|
+
### Select (Preview)
|
|
111
|
+
|
|
112
|
+
**PR:** [#2309](https://github.com/Workday/canvas-kit/pull/2309)
|
|
113
|
+
|
|
114
|
+
We've deprecated `Select` from [Preview](#preview). Please use
|
|
115
|
+
[`Select` in Main](https://workday.github.io/canvas-kit/?path=/story/components-inputs-select--basic)
|
|
116
|
+
instead.
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
### Space Numbers
|
|
121
|
+
|
|
122
|
+
**PR:** [#2345](https://github.com/Workday/canvas-kit/pull/2345)
|
|
123
|
+
|
|
124
|
+
We've deprecated `spaceNumbers`. Please use our `rem` based
|
|
125
|
+
[`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. If you need to
|
|
126
|
+
calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) instead.
|
|
127
|
+
|
|
128
|
+
```tsx
|
|
129
|
+
// With deprecated `spaceNumbers`
|
|
130
|
+
{
|
|
131
|
+
paddingLeft: spaceNumbers.xl + 2; // 42px
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// With `rem` based `space` tokens
|
|
135
|
+
{
|
|
136
|
+
padding: `calc(${space.xl} + 2px)`; // 42px
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
For more information on how to handle this migration, please reference our
|
|
141
|
+
[discussion](https://github.com/Workday/canvas-kit/discussions/2343).
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
### Table
|
|
146
|
+
|
|
147
|
+
**PR:** [#2344](https://github.com/Workday/canvas-kit/pull/2344)
|
|
148
|
+
|
|
149
|
+
We've deprecated `Table` and `TableRow` and all of their exported members. Please use
|
|
150
|
+
[`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in
|
|
151
|
+
[Preview](#preview) instead.
|
|
152
|
+
|
|
153
|
+
## Token Updates
|
|
154
|
+
|
|
155
|
+
### Space and Depth
|
|
156
|
+
|
|
157
|
+
**PR:** [#2229](https://github.com/Workday/canvas-kit/pull/2229)
|
|
158
|
+
|
|
159
|
+
We've updated our `space` and `depth` token values from `px` to `rem`. This is based on the default
|
|
160
|
+
browser font size which is `16px`.
|
|
161
|
+
|
|
162
|
+
These updates simply mean that we have moved the values from `px` to `rem`. The values have been
|
|
163
|
+
updated on a 1:1 basis. None of the base values have changed, only the unit.
|
|
164
|
+
|
|
165
|
+
The table below shows what each token value is, what it corresponds to, and what the new `rem` value
|
|
166
|
+
is in `px`:
|
|
167
|
+
|
|
168
|
+
| px Value | rem Value | space Token |
|
|
169
|
+
| -------- | --------- | ----------- |
|
|
170
|
+
| 0 | 0 | zero |
|
|
171
|
+
| 4px | 0.25rem | xxxs |
|
|
172
|
+
| 8px | 0.5rem | xxs |
|
|
173
|
+
| 12px | 0.75rem | xs |
|
|
174
|
+
| 16px | 1rem | s |
|
|
175
|
+
| 24px | 1.5rem | m |
|
|
176
|
+
| 32px | 2rem | l |
|
|
177
|
+
| 40px | 2.5rem | xl |
|
|
178
|
+
| 64px | 4rem | xxl |
|
|
179
|
+
| 80px | 5rem | xxxl |
|
|
180
|
+
|
|
181
|
+
You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default
|
|
182
|
+
browser font size hasn't been updated, the value will be `16`).
|
|
183
|
+
|
|
184
|
+
For example:
|
|
185
|
+
|
|
186
|
+
| Equation | rem Value |
|
|
187
|
+
| ----------- | --------- |
|
|
188
|
+
| `16px/16px` | `1rem` |
|
|
189
|
+
| `32px/16px` | `2rem` |
|
|
190
|
+
| `8px/16px` | `0.5rem` |
|
|
191
|
+
|
|
192
|
+
#### Why Did We Make This Change?
|
|
193
|
+
|
|
194
|
+
We wanted to move away from absolute units in tokens to relative units for better accessibility and
|
|
195
|
+
adaptability to different viewport/screen sizes. If a user changes their default browser font size,
|
|
196
|
+
these sizes should change along with it. `px` are a fixed unit and do not scale, whereas `rem` will
|
|
197
|
+
allow these tokens to scale with a new default font size.
|
|
198
|
+
|
|
199
|
+
## Component Updates
|
|
200
|
+
|
|
201
|
+
### Button
|
|
202
|
+
|
|
203
|
+
**PR:** [#2285](https://github.com/Workday/canvas-kit/pull/2285)
|
|
204
|
+
|
|
205
|
+
We've refactored how we style buttons to use our
|
|
206
|
+
[`createStyles`](https://workday.github.io/canvas-kit/?path=/docs/features-styling-api--create-styles)
|
|
207
|
+
utility function. We don't anticipate this being a breaking change in most cases, but there may be
|
|
208
|
+
slight changes to visual tests.
|
|
209
|
+
|
|
210
|
+
#### Button Icon Fill
|
|
211
|
+
|
|
212
|
+
Icons will no longer be incorrectly filled on toggle.
|
|
213
|
+
|
|
214
|
+
#### Button Focus Ring Update
|
|
215
|
+
|
|
216
|
+
We found that focus rings were not consistent across all buttons. We've updated the focus ring on
|
|
217
|
+
the `inverse` variant of `PrimaryButton` to display a consistent focus ring across `PrimaryButton`
|
|
218
|
+
and `SecondaryButton`. The changes to `PrimaryButton` will need to be taken note of due to small
|
|
219
|
+
visual changes with the `inverse` variant.
|
|
220
|
+
|
|
221
|
+
Also, `colors` will no longer support the `focusRing` option.
|
|
222
|
+
|
|
223
|
+
```tsx
|
|
224
|
+
|
|
225
|
+
// v9
|
|
226
|
+
<PrimaryButton
|
|
227
|
+
colors={{
|
|
228
|
+
// other colors
|
|
229
|
+
focus: {
|
|
230
|
+
// other colors
|
|
231
|
+
focusRing: focusRing(/* options */)
|
|
232
|
+
}
|
|
233
|
+
}}
|
|
234
|
+
/>
|
|
235
|
+
|
|
236
|
+
// v10
|
|
237
|
+
<PrimaryButton
|
|
238
|
+
colors={{
|
|
239
|
+
// other colors
|
|
240
|
+
focus: {
|
|
241
|
+
// other colors
|
|
242
|
+
}
|
|
243
|
+
}}
|
|
244
|
+
css={{
|
|
245
|
+
':focus-visible': focusRing(/* options */)
|
|
246
|
+
}}
|
|
247
|
+
/>;
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
252
|
+
### Popups
|
|
253
|
+
|
|
254
|
+
All Popup components including `Menu` and `Popup` have increased the top and bottom spacing between
|
|
255
|
+
the target and popup to `4px`.
|
|
256
|
+
|
|
257
|
+
---
|
|
258
|
+
|
|
259
|
+
### Select (Main)
|
|
260
|
+
|
|
261
|
+
**PR:** [#2309](https://github.com/Workday/canvas-kit/pull/2309)
|
|
262
|
+
|
|
263
|
+
We've converted `Select` into a
|
|
264
|
+
[compound component](/getting-started/for-developers/resources/compound-components/) which provides
|
|
265
|
+
a flexible API and access to its internals via its subcomponents.
|
|
266
|
+
|
|
267
|
+
```tsx
|
|
268
|
+
// v9
|
|
269
|
+
<FormField label="Pizza Size">
|
|
270
|
+
<Select onChange={handleChange} value={value}>
|
|
271
|
+
<SelectOption label="Small" value="small" />
|
|
272
|
+
<SelectOption label="Medium" value="medium" />
|
|
273
|
+
<SelectOption label="Large" value="large" />
|
|
274
|
+
</Select>
|
|
275
|
+
</FormField>
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
```tsx
|
|
279
|
+
// v10
|
|
280
|
+
<Select items={['Small', 'Medium', 'Large']}>
|
|
281
|
+
<FormField label="Pizza Size" inputId="pizza">
|
|
282
|
+
<Select.Input id="pizza" onChange={e => handleChange(e)} id="pizza" />
|
|
283
|
+
<Select.Popper>
|
|
284
|
+
<Select.Card maxHeight="200px">
|
|
285
|
+
<Select.List>
|
|
286
|
+
{item => {
|
|
287
|
+
return <Select.Item>{item}</Select.Item>;
|
|
288
|
+
}}
|
|
289
|
+
</Select.List>
|
|
290
|
+
</Select.Card>
|
|
291
|
+
</Select.Popper>
|
|
292
|
+
</FormField>
|
|
293
|
+
</Select>
|
|
294
|
+
```
|
|
295
|
+
|
|
296
|
+
Notice that `Select` is now outside the `FormField`. This is due to the update in `Select` and how
|
|
297
|
+
the `FormField` in main applies attributes. Previously, `Select` was a styled native `<select>`
|
|
298
|
+
input and `FormField` applied attributes automatically to that input. The new `Select` is solely a
|
|
299
|
+
React context provider for its subcomponents. `FormField` needs `Select.Input` to be a direct child
|
|
300
|
+
to apply attributes correctly.
|
|
301
|
+
|
|
302
|
+
Also, unlike the
|
|
303
|
+
[Select in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-select-left-label--default),
|
|
304
|
+
this component does not have a border around its menu.
|
|
305
|
+
|
|
306
|
+
## Glossary
|
|
307
|
+
|
|
308
|
+
### Main
|
|
309
|
+
|
|
310
|
+
Our Main package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-react` has
|
|
311
|
+
undergone a full design and a11y review and is approved for use in product.
|
|
312
|
+
|
|
313
|
+
Breaking changes to code in Main will only occur during major version updates and will always be
|
|
314
|
+
communicated in advance and accompanied by migration strategies.
|
|
315
|
+
|
|
316
|
+
---
|
|
317
|
+
|
|
318
|
+
### Preview
|
|
319
|
+
|
|
320
|
+
Our Preview package of Canvas Kit tokens, components, and utilities at
|
|
321
|
+
`@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
|
|
322
|
+
use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
|
|
323
|
+
Preview is analagous to code in beta.
|
|
324
|
+
|
|
325
|
+
Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
|
|
326
|
+
triggering a major version update, though such changes will be communicated in advance and
|
|
327
|
+
accompanied by migration strategies.
|
|
328
|
+
|
|
329
|
+
Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
|
|
330
|
+
Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
|
|
331
|
+
example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
|
|
332
|
+
[Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
|
|
333
|
+
In these cases, Preview serves as a staging ground for an improved version of the component with a
|
|
334
|
+
different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
|
|
335
|
+
|
|
336
|
+
---
|
|
337
|
+
|
|
338
|
+
### Labs
|
|
339
|
+
|
|
340
|
+
Our Labs package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-labs-react`
|
|
341
|
+
has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
|
|
342
|
+
experimental code and is analagous to code in alpha.
|
|
343
|
+
|
|
344
|
+
Breaking changes can be deployed to Labs at any time without triggering a major version update and
|
|
345
|
+
may not be subject to the same rigor in communcation and migration strategies reserved for breaking
|
|
346
|
+
changes in [Preview](#preview) and [Main](#main).
|