@workday/canvas-kit-docs 15.0.0-alpha.0288-next.0 → 15.0.0-alpha.0293-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/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/15.0-UPGRADE-GUIDE.mdx +19 -3
- package/dist/mdx/react/icon/examples/SystemCustomStyles.tsx +1 -0
- package/dist/mdx/styling/mdx/examples/CustomIcon.tsx +2 -2
- package/dist/mdx/tokens/TokenMigrationMappingColors.mdx +137 -0
- package/package.json +6 -6
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "14.3.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "14.3.
|
|
23
|
-
"@workday/canvas-kit-react": "14.3.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^14.3.
|
|
25
|
-
"@workday/canvas-kit-styling": "14.3.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "14.3.7",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "14.3.7",
|
|
23
|
+
"@workday/canvas-kit-react": "14.3.7",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^14.3.7",
|
|
25
|
+
"@workday/canvas-kit-styling": "14.3.7",
|
|
26
26
|
"@workday/canvas-system-icons-web": "4.0.2",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.2.0"
|
|
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
|
|
|
19
19
|
"@emotion/react": "11.11.4",
|
|
20
20
|
"@types/react": "18.2.60",
|
|
21
21
|
"@types/react-dom": "18.2.19",
|
|
22
|
-
"@workday/canvas-kit-labs-react": "14.3.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "14.3.
|
|
24
|
-
"@workday/canvas-kit-react": "14.3.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^14.3.
|
|
26
|
-
"@workday/canvas-kit-styling": "14.3.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "14.3.7",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "14.3.7",
|
|
24
|
+
"@workday/canvas-kit-react": "14.3.7",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^14.3.7",
|
|
26
|
+
"@workday/canvas-kit-styling": "14.3.7",
|
|
27
27
|
"@workday/canvas-system-icons-web": "4.0.2",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.2.0"
|
|
@@ -45,6 +45,7 @@ semantic meaning to allow for better use and theming.
|
|
|
45
45
|
- [Svg](#svg)
|
|
46
46
|
- [System Icon](#system-icon)
|
|
47
47
|
- [System Icon Circle](#system-icon-circle)
|
|
48
|
+
- [Icon Size Updates](#icon-size-updates)
|
|
48
49
|
- [Indicators](#indicators)
|
|
49
50
|
- [Inputs](#inputs)
|
|
50
51
|
- [Navigation](#navigation)
|
|
@@ -58,7 +59,7 @@ semantic meaning to allow for better use and theming.
|
|
|
58
59
|
- [Icons](#icons)
|
|
59
60
|
- [Accent Icon](#accent-icon)
|
|
60
61
|
- [Applet Icon](#applet-icon)
|
|
61
|
-
- [Other icon utilities]
|
|
62
|
+
- [Other icon utilities](#other-icon-utilities)
|
|
62
63
|
- [Switch (Main)](#switch-main)
|
|
63
64
|
- [Removals](#removals)
|
|
64
65
|
- [Avatar (Deprecated)](#avatar-deprecated)
|
|
@@ -526,8 +527,7 @@ The promoted `SegmentedControl` includes several new features:
|
|
|
526
527
|
**PR:** [#3633](https://github.com/Workday/canvas-kit/pull/3633)
|
|
527
528
|
|
|
528
529
|
We've promoted `InformationHighlight` from [Preview](#preview) to [Main](#main). There are no
|
|
529
|
-
changes to the functionality or styling of the component. The only change required is updating the
|
|
530
|
-
import statement.
|
|
530
|
+
changes to the functionality or styling of the component. The only change required is updating the import statement.
|
|
531
531
|
|
|
532
532
|
**Before in v14**
|
|
533
533
|
|
|
@@ -605,6 +605,22 @@ clarity:
|
|
|
605
605
|
compliance with accessibility standards between the icon and its circular background.
|
|
606
606
|
- `SystemIconCircleSize` has been deprecated; replace with direct tokens as size prop.
|
|
607
607
|
|
|
608
|
+
### Icon Size Updates
|
|
609
|
+
|
|
610
|
+
**PR:** [#3866](https://github.com/Workday/canvas-kit/pull/3866)
|
|
611
|
+
|
|
612
|
+
Canvas v15 is optimized to look best when using the latest version of v4 tokens (`"@workday/canvas-tokens-web"`) and the latest version of v4 system icons (`"@workday/canvas-system-icons-web"`). It is designed to be backwards-compatible with v3 tokens and v3 system icons — nothing should break. But you might see minor imperfections when using v3 system icons when upgrading to v15. In those cases, we recommend upgrading to the latest version of v4 icons `"@workday/canvas-system-icons-web"` and latest version of v4 tokens `"@workday/canvas-tokens-web"`.
|
|
613
|
+
|
|
614
|
+
The size of the icons in some components have been updated. This is the reflected in the following components:
|
|
615
|
+
|
|
616
|
+
- `MultiSelect` | `1.5rem` → `1.25rem`
|
|
617
|
+
- `Switch (Preview)` | `1.25rem` → `1.125rem`
|
|
618
|
+
- `Buttons with icons (Primary, Secondary, Tertiary, Delete, ToolbarButton and ToolbarDropdownButton)` | `1.125rem` → `1rem`
|
|
619
|
+
- `Pill.Icon` | `1.25rem` → `1.125rem`
|
|
620
|
+
- `Pill.IconButton` | `1.5rem` → `1.125rem`
|
|
621
|
+
|
|
622
|
+
> **Note:** If you upgrade to `v15` and are not using `v4` tokens and `v4` icons, the size of the icon will still be updated as part of the upgrade.
|
|
623
|
+
|
|
608
624
|
### Indicators
|
|
609
625
|
|
|
610
626
|
**PR:** [#3738](https://github.com/Workday/canvas-kit/pull/3738)
|
|
@@ -42,6 +42,7 @@ export default () => {
|
|
|
42
42
|
[systemIconStencil.vars.color]: system.color.fg.success.default,
|
|
43
43
|
[systemIconStencil.vars.accentColor]: system.color.fg.success.strong,
|
|
44
44
|
[systemIconStencil.vars.backgroundColor]: system.color.surface.success.default,
|
|
45
|
+
// No `component.systemIcon.size.*` token for `40px`. Keeping `size` here for now.
|
|
45
46
|
[systemIconStencil.vars.size]: system.size.lg,
|
|
46
47
|
|
|
47
48
|
'&:hover .wd-icon-fill': {
|
|
@@ -2,14 +2,14 @@ import React from 'react';
|
|
|
2
2
|
|
|
3
3
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
4
4
|
import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
|
|
5
|
-
import {system} from '@workday/canvas-tokens-web';
|
|
5
|
+
import {component, system} from '@workday/canvas-tokens-web';
|
|
6
6
|
|
|
7
7
|
const myIconStencil = createStencil({
|
|
8
8
|
extends: systemIconStencil,
|
|
9
9
|
base: {
|
|
10
10
|
[systemIconStencil.vars.color]: system.color.icon.primary.default,
|
|
11
11
|
[systemIconStencil.vars.accentColor]: system.color.icon.critical.default,
|
|
12
|
-
[systemIconStencil.vars.size]:
|
|
12
|
+
[systemIconStencil.vars.size]: component.systemIcon.size.xs,
|
|
13
13
|
},
|
|
14
14
|
});
|
|
15
15
|
|
|
@@ -16,6 +16,7 @@ import {StorybookInformationHighlight} from './StorybookInformationHighlight';
|
|
|
16
16
|
- [Base Color Mapping](#base-color-mapping)
|
|
17
17
|
- [Brand Color Migration](#brand-color-migration)
|
|
18
18
|
- [System Color Usage Guide (Recommended)](#system-color-usage-guide-recommended)
|
|
19
|
+
- [Other Mapping](#other-mapping)
|
|
19
20
|
- [Migration Examples](#migration-examples)
|
|
20
21
|
|
|
21
22
|
## Base Color Mapping
|
|
@@ -322,6 +323,142 @@ themeable, understandable, and consistent.**
|
|
|
322
323
|
| Black | `system.color.static.black` | | Always black regardless of theme |
|
|
323
324
|
| Transparent | `system.color.static.transparent` | | Invisible backgrounds |
|
|
324
325
|
|
|
326
|
+
## Other Mapping
|
|
327
|
+
|
|
328
|
+
Certain old tokens have been deprecated without direct replacements. In these cases, we recommend
|
|
329
|
+
using the closest available base palette or gradient token references shown below rather than
|
|
330
|
+
semantic aliases; only use literal raw color values if no tokenized option exists.
|
|
331
|
+
|
|
332
|
+
### Gradients
|
|
333
|
+
|
|
334
|
+
Please note that the new gradients may appear visually different from the previous ones, as the
|
|
335
|
+
underlying base palette has been updated and the color mappings do not have exact equivalents.
|
|
336
|
+
|
|
337
|
+
| Gradient Name | Old Value | New Value |
|
|
338
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
|
|
339
|
+
| cinnamon | "linear-gradient(to bottom right," + colors.cinnamon500 + "," + colors.cinnamon400 + ")" | "linear-gradient(to bottom right, var(" + base.red600 + "), var(" + base.red400 + "))" |
|
|
340
|
+
| peach | "linear-gradient(to bottom right," + colors.peach500 + "," + colors.peach400 + ")" | "linear-gradient(to bottom right, var(" + base.coral600 + "), var(" + base.red400 + "))" |
|
|
341
|
+
| chiliMango | "linear-gradient(to bottom right," + colors.chiliMango500 + "," + colors.chiliMango400 + ")" | "linear-gradient(to bottom right, var(" + base.orange500 + "), var(" + base.orange400 + "))" |
|
|
342
|
+
| cantaloupe | "linear-gradient(to bottom right," + colors.cantaloupe500 + "," + colors.cantaloupe400 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
|
|
343
|
+
| sourLemon | "linear-gradient(to bottom right," + colors.sourLemon500 + "," + colors.sourLemon400 + ")" | "linear-gradient(to bottom right, var(" + base.amber300 + "), var(" + base.amber200 + "))" |
|
|
344
|
+
| juicyPear | "linear-gradient(to bottom right," + colors.juicyPear500 + "," + colors.juicyPear400 + ")" | "linear-gradient(to bottom right, var(" + base.green500 + "), var(" + base.green400 + "))" |
|
|
345
|
+
| kiwi | "linear-gradient(to bottom right," + colors.kiwi500 + "," + colors.kiwi400 + ")" | "linear-gradient(to bottom right, var(" + base.green500 + "), var(" + base.green400 + "))" |
|
|
346
|
+
| greenApple | "linear-gradient(to bottom right," + colors.greenApple500 + "," + colors.greenApple400 + ")" | "linear-gradient(to bottom right, var(" + base.green700 + "), var(" + base.green600 + "))" |
|
|
347
|
+
| watermelon | "linear-gradient(to bottom right," + colors.watermelon500 + "," + colors.watermelon400 + ")" | "linear-gradient(to bottom right, var(" + base.green700 + "), var(" + base.green600 + "))" |
|
|
348
|
+
| jewel | "linear-gradient(to bottom right," + colors.jewel500 + "," + colors.jewel400 + ")" | "linear-gradient(to bottom right, var(" + base.teal600 + "), var(" + base.teal500 + "))" |
|
|
349
|
+
| toothpaste | "linear-gradient(to bottom right," + colors.toothpaste500 + "," + colors.toothpaste400 + ")" | "linear-gradient(to bottom right, var(" + base.azure700 + "), var(" + base.azure500 + "))" |
|
|
350
|
+
| blueberry | "linear-gradient(to bottom right," + colors.blueberry500 + "," + colors.blueberry400 + ")" | `brand.gradient.primary` |
|
|
351
|
+
| plum | "linear-gradient(to bottom right," + colors.plum500 + "," + colors.plum400 + ")" | "linear-gradient(to bottom right, var(" + base.blue700 + "), var(" + base.blue600 + "))" |
|
|
352
|
+
| berrySmoothie | "linear-gradient(to bottom right," + colors.berrySmoothie500 + "," + colors.berrySmoothie400 + ")" | "linear-gradient(to bottom right, var(" + base.blue700 + "), var(" + base.blue500 + "))" |
|
|
353
|
+
| blackberry | "linear-gradient(to bottom right," + colors.blackberry500 + "," + colors.blackberry400 + ")" | "linear-gradient(to bottom right, var(" + base.indigo700 + "), var(" + base.indigo500 + "))" |
|
|
354
|
+
| islandPunch | "linear-gradient(to bottom right," + colors.islandPunch500 + "," + colors.islandPunch400 + ")" | "linear-gradient(to bottom right, var(" + base.purple700 + "), var(" + base.purple500 + "))" |
|
|
355
|
+
| grapeSoda | "linear-gradient(to bottom right," + colors.grapeSoda500 + "," + colors.grapeSoda400 + ")" | "linear-gradient(to bottom right, var(" + base.purple600 + "), var(" + base.purple500 + "))" |
|
|
356
|
+
| pomegranate | "linear-gradient(to bottom right," + colors.pomegranate500 + "," + colors.pomegranate400 + ")" | "linear-gradient(to bottom right, var(" + base.red700 + "), var(" + base.red600 + "))" |
|
|
357
|
+
| fruitPunch | "linear-gradient(to bottom right," + colors.fruitPunch500 + "," + colors.fruitPunch400 + ")" | "linear-gradient(to bottom right, var(" + base.red400 + "), var(" + base.red300 + "))" |
|
|
358
|
+
| rootBeer | "linear-gradient(to bottom right," + colors.rootBeer600 + "," + colors.rootBeer500 + ")" | "linear-gradient(to bottom right, var(" + base.amber950 + "), var(" + base.amber900 + "))" |
|
|
359
|
+
| toastedMarshmallow | "linear-gradient(to bottom right," + colors.toastedMarshmallow500 + "," + colors.toastedMarshmallow400 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
|
|
360
|
+
| cappuccino | "linear-gradient(to bottom right," + colors.cappuccino400 + "," + colors.cappuccino300 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
|
|
361
|
+
| licorice | "linear-gradient(to bottom right," + colors.licorice500 + "," + colors.licorice400 + ")" | "linear-gradient(to bottom right, var(" + base.slate800 + "), var(" + base.slate700 + "))" |
|
|
362
|
+
| blackPepper | "linear-gradient(to bottom right," + colors.blackPepper400 + "," + colors.blackPepper300 + ")" | "linear-gradient(to bottom right, var(" + base.neutral900 + "), var(" + base.neutral800 + "))" |
|
|
363
|
+
|
|
364
|
+
### Chart Colors
|
|
365
|
+
|
|
366
|
+
Please note that the new chart colors may appear visually different from the previous ones, as the
|
|
367
|
+
underlying base palette has been updated and the color mappings do not have exact equivalents.
|
|
368
|
+
|
|
369
|
+
| Old Token | Old Value | New Value |
|
|
370
|
+
| ----------------------------------- | ------------------------------ | ----------------- |
|
|
371
|
+
| `chartingColors[1]` | `colors.watermelon200` | `base.teal100` |
|
|
372
|
+
| `chartingColors[2]` | `colors.watermelon300` | `base.green100` |
|
|
373
|
+
| `chartingColors[3]` | `colors.jewel200` | `base.teal200` |
|
|
374
|
+
| `chartingColors[4]` | `colors.jewel300` | `base.teal400` |
|
|
375
|
+
| `chartingColors[5]` | `colors.plum200` | `base.blue200` |
|
|
376
|
+
| `chartingColors[6]` | `colors.plum300` | `base.blue400` |
|
|
377
|
+
| `chartingColors[7]` | `colors.islandPunch200` | `base.purple200` |
|
|
378
|
+
| `chartingColors[8]` | `colors.islandPunch300` | `base.purple500` |
|
|
379
|
+
| `chartingColors[9]` | `colors.pomegranate200` | `base.magenta100` |
|
|
380
|
+
| `chartingColors[10]` | `colors.pomegranate300` | `base.magenta500` |
|
|
381
|
+
| `chartingColors[11]` | `colors.peach200` | `base.coral200` |
|
|
382
|
+
| `chartingColors[12]` | `colors.peach400` | `base.coral300` |
|
|
383
|
+
| `chartingColors[13]` | `colors.cantaloupe200` | `base.amber200` |
|
|
384
|
+
| `chartingColors[14]` | `colors.cantaloupe400` | `base.amber300` |
|
|
385
|
+
| `chartingColors[15]` | `colors.sourLemon200` | `base.amber100` |
|
|
386
|
+
| `chartingColors[16]` | `colors.sourLemon400` | `base.amber200` |
|
|
387
|
+
| `chartingColors[17]` | `colors.watermelon400` | `base.green600` |
|
|
388
|
+
| `chartingColors[18]` | `colors.watermelon500` | `base.green700` |
|
|
389
|
+
| `chartingColors[19]` | `colors.jewel400` | `base.teal500` |
|
|
390
|
+
| `chartingColors[20]` | `colors.jewel500` | `base.teal600` |
|
|
391
|
+
| `chartingColors[21]` | `colors.plum400` | `base.blue600` |
|
|
392
|
+
| `chartingColors[22]` | `colors.plum500` | `base.blue700` |
|
|
393
|
+
| `chartingColors[23]` | `colors.islandPunch400` | `base.purple500` |
|
|
394
|
+
| `chartingColors[24]` | `colors.islandPunch500` | `base.purple600` |
|
|
395
|
+
| `chartingColors[25]` | `colors.pomegranate400` | `base.magenta500` |
|
|
396
|
+
| `chartingColors[26]` | `colors.pomegranate600` | `base.red700` |
|
|
397
|
+
| `chartingColors[27]` | `colors.peach500` | `base.coral600` |
|
|
398
|
+
| `chartingColors[28]` | `colors.peach600` | `base.coral700` |
|
|
399
|
+
| `chartingColors[29]` | `colors.cantaloupe500` | `base.amber500` |
|
|
400
|
+
| `chartingColors[30]` | `colors.cantaloupe600` | `base.amber600` |
|
|
401
|
+
| `chartingColors[31]` | `colors.sourLemon500` | `base.amber300` |
|
|
402
|
+
| `chartingColors[32]` | `colors.sourLemon600` | `base.amber500` |
|
|
403
|
+
| `chartingColors[33]` | `colors.greenApple200` | `base.green100` |
|
|
404
|
+
| `chartingColors[34]` | `colors.greenApple300` | `base.green200` |
|
|
405
|
+
| `chartingColors[35]` | `colors.toothpaste200` | `base.azure200` |
|
|
406
|
+
| `chartingColors[36]` | `colors.toothpaste300` | `base.azure300` |
|
|
407
|
+
| `chartingColors[37]` | `colors.blueberry200` | `base.blue100` |
|
|
408
|
+
| `chartingColors[38]` | `colors.blueberry300` | `base.blue400` |
|
|
409
|
+
| `chartingColors[39]` | `colors.berrySmoothie200` | `base.indigo200` |
|
|
410
|
+
| `chartingColors[40]` | `colors.blackberry300` | `base.indigo400` |
|
|
411
|
+
| `chartingColors[41]` | `colors.fruitPunch200` | `base.red200` |
|
|
412
|
+
| `chartingColors[42]` | `colors.fruitPunch300` | `base.red300` |
|
|
413
|
+
| `chartingColors[43]` | `colors.rootBeer200` | `base.coral100` |
|
|
414
|
+
| `chartingColors[44]` | `colors.rootBeer300` | `base.coral200` |
|
|
415
|
+
| `chartingColors[45]` | `colors.toastedMarshmallow200` | `base.orange100` |
|
|
416
|
+
| `chartingColors[46]` | `colors.toastedMarshmallow400` | `base.orange200` |
|
|
417
|
+
| `chartingColors[47]` | `colors.chiliMango200` | `base.coral200` |
|
|
418
|
+
| `chartingColors[48]` | `colors.chiliMango400` | `base.coral300` |
|
|
419
|
+
| `chartingColors[49]` | `colors.greenApple400` | `base.green600` |
|
|
420
|
+
| `chartingColors[50]` | `colors.greenApple600` | `base.green700` |
|
|
421
|
+
| `chartingColors[51]` | `colors.toothpaste400` | `base.azure500` |
|
|
422
|
+
| `chartingColors[52]` | `colors.toothpaste600` | `base.azure800` |
|
|
423
|
+
| `chartingColors[53]` | `colors.blueberry400` | `base.blue600` |
|
|
424
|
+
| `chartingColors[54]` | `colors.blueberry600` | `base.blue800` |
|
|
425
|
+
| `chartingColors[55]` | `colors.blackberry400` | `base.indigo500` |
|
|
426
|
+
| `chartingColors[56]` | `colors.blackberry600` | `base.indigo900` |
|
|
427
|
+
| `chartingColors[57]` | `colors.fruitPunch400` | `base.red400` |
|
|
428
|
+
| `chartingColors[58]` | `colors.fruitPunch600` | `base.red700` |
|
|
429
|
+
| `chartingColors[59]` | `colors.rootBeer500` | `base.amber900` |
|
|
430
|
+
| `chartingColors[60]` | `colors.rootBeer600` | `base.amber950` |
|
|
431
|
+
| `chartingColors[61]` | `colors.toastedMarshmallow500` | `base.amber500` |
|
|
432
|
+
| `chartingColors[62]` | `colors.toastedMarshmallow600` | `base.amber600` |
|
|
433
|
+
| `chartingColors[63]` | `colors.chiliMango500` | `base.orange500` |
|
|
434
|
+
| `chartingColors[64]` | `colors.chiliMango600` | `base.orange600` |
|
|
435
|
+
| `chartingColors[65]` | `colors.kiwi200` | `base.green100` |
|
|
436
|
+
| `chartingColors[66]` | `colors.kiwi400` | `base.green500` |
|
|
437
|
+
| `chartingColors[67]` | `colors.berrySmoothie200` | `base.indigo200` |
|
|
438
|
+
| `chartingColors[68]` | `colors.berrySmoothie300` | `base.indigo400` |
|
|
439
|
+
| `chartingColors[69]` | `colors.grapeSoda200` | `base.magenta200` |
|
|
440
|
+
| `chartingColors[70]` | `colors.grapeSoda300` | `base.magenta400` |
|
|
441
|
+
| `chartingColors[71]` | `colors.cinnamon200` | `base.red100` |
|
|
442
|
+
| `chartingColors[72]` | `colors.cinnamon300` | `base.red300` |
|
|
443
|
+
| `chartingColors[73]` | `colors.sourLemon300` | `base.amber200` |
|
|
444
|
+
| `chartingColors[74]` | `colors.toastedMarshmallow300` | `base.orange200` |
|
|
445
|
+
| `chartingColors[75]` | `colors.peach300` | `base.coral300` |
|
|
446
|
+
| `chartingColors[76]` | `colors.cinnamon500` | `base.red600` |
|
|
447
|
+
| `chartingColors[77]` | `colors.cantaloupe300` | `base.amber300` |
|
|
448
|
+
| `chartingColors[78]` | `colors.chiliMango300` | `base.coral300` |
|
|
449
|
+
| `chartingColors[79]` | `colors.kiwi300` | `base.green200` |
|
|
450
|
+
| `chartingColors[80]` | `colors.kiwi500` | `base.green500` |
|
|
451
|
+
| `chartingColors[81]` | `colors.berrySmoothie400` | `base.blue500` |
|
|
452
|
+
| `chartingColors[82]` | `colors.berrySmoothie500` | `base.blue700` |
|
|
453
|
+
| `chartingColors[83]` | `colors.grapeSoda400` | `base.purple500` |
|
|
454
|
+
| `chartingColors[84]` | `colors.grapeSoda500` | `base.purple600` |
|
|
455
|
+
| `chartingColors[85]` | `colors.cinnamon400` | `base.red400` |
|
|
456
|
+
| `chartingColors[86]` | `colors.cinnamon500` | `base.red600` |
|
|
457
|
+
| `chartingColorOffsets.barAndColumn` | `colors.watermelon200` | `base.teal100` |
|
|
458
|
+
| `chartingColorOffsets.pie` | `colors.jewel300` | `base.teal400` |
|
|
459
|
+
| `chartingColorOffsets.lineAndArea` | `colors.islandPunch200` | `base.purple200` |
|
|
460
|
+
| `chartingColorOffsets.bubble` | `colors.peach200` | `base.coral200` |
|
|
461
|
+
|
|
325
462
|
## Migration Examples
|
|
326
463
|
|
|
327
464
|
**Example 1: Base Color Migration**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "15.0.0-alpha.
|
|
3
|
+
"version": "15.0.0-alpha.0293-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
48
|
"@storybook/csf": "0.0.1",
|
|
49
49
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^15.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^15.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-react": "^15.0.0-alpha.
|
|
53
|
-
"@workday/canvas-kit-styling": "^15.0.0-alpha.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^15.0.0-alpha.0293-next.0",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^15.0.0-alpha.0293-next.0",
|
|
52
|
+
"@workday/canvas-kit-react": "^15.0.0-alpha.0293-next.0",
|
|
53
|
+
"@workday/canvas-kit-styling": "^15.0.0-alpha.0293-next.0",
|
|
54
54
|
"@workday/canvas-system-icons-web": "4.0.2",
|
|
55
55
|
"@workday/canvas-tokens-web": "4.2.0",
|
|
56
56
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"mkdirp": "^1.0.3",
|
|
64
64
|
"typescript": "5.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "e21a3fdd01e93a24636f46fc9a2aded478404cc8"
|
|
67
67
|
}
|