@workday/canvas-kit-docs 14.0.0-alpha.1246-next.0 → 14.0.0-alpha.1252-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/docs.js +221 -28
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +92 -47
- package/dist/mdx/14.0-VISUAL-CHANGES.mdx +44 -0
- package/dist/mdx/tokens/TokenMigrationCodemod.mdx +5 -5
- package/dist/mdx/tokens/TokenMigrationFinal.mdx +1 -0
- package/dist/mdx/tokens/TokenMigrationInstall.mdx +2 -2
- package/dist/mdx/tokens/TokenMigrationMappingColors.mdx +185 -47
- package/dist/mdx/tokens/TokenMigrationOverview.mdx +7 -4
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -3757,12 +3757,12 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
3757
3757
|
},
|
|
3758
3758
|
{
|
|
3759
3759
|
"name": "version",
|
|
3760
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/version.ts",
|
|
3760
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/version/lib/version.ts",
|
|
3761
3761
|
"description": "",
|
|
3762
3762
|
"declarations": [
|
|
3763
3763
|
{
|
|
3764
3764
|
"name": "version",
|
|
3765
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/version.ts"
|
|
3765
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/labs-react/version/lib/version.ts"
|
|
3766
3766
|
}
|
|
3767
3767
|
],
|
|
3768
3768
|
"tags": {},
|
|
@@ -69038,12 +69038,12 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
69038
69038
|
},
|
|
69039
69039
|
{
|
|
69040
69040
|
"name": "version",
|
|
69041
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/version.ts",
|
|
69041
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/version/lib/version.ts",
|
|
69042
69042
|
"description": "",
|
|
69043
69043
|
"declarations": [
|
|
69044
69044
|
{
|
|
69045
69045
|
"name": "version",
|
|
69046
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/version.ts"
|
|
69046
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/version/lib/version.ts"
|
|
69047
69047
|
}
|
|
69048
69048
|
],
|
|
69049
69049
|
"tags": {},
|
|
@@ -193551,9 +193551,204 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
193551
193551
|
],
|
|
193552
193552
|
"members": [],
|
|
193553
193553
|
"returnType": {
|
|
193554
|
-
"kind": "
|
|
193555
|
-
"
|
|
193556
|
-
|
|
193554
|
+
"kind": "union",
|
|
193555
|
+
"value": [
|
|
193556
|
+
{
|
|
193557
|
+
"kind": "object",
|
|
193558
|
+
"properties": [
|
|
193559
|
+
{
|
|
193560
|
+
"kind": "property",
|
|
193561
|
+
"name": "borderColor",
|
|
193562
|
+
"required": false,
|
|
193563
|
+
"type": {
|
|
193564
|
+
"kind": "primitive",
|
|
193565
|
+
"value": "undefined"
|
|
193566
|
+
},
|
|
193567
|
+
"description": "",
|
|
193568
|
+
"tags": {},
|
|
193569
|
+
"declarations": []
|
|
193570
|
+
},
|
|
193571
|
+
{
|
|
193572
|
+
"kind": "property",
|
|
193573
|
+
"name": "transition",
|
|
193574
|
+
"required": false,
|
|
193575
|
+
"type": {
|
|
193576
|
+
"kind": "primitive",
|
|
193577
|
+
"value": "undefined"
|
|
193578
|
+
},
|
|
193579
|
+
"description": "",
|
|
193580
|
+
"tags": {},
|
|
193581
|
+
"declarations": []
|
|
193582
|
+
},
|
|
193583
|
+
{
|
|
193584
|
+
"kind": "property",
|
|
193585
|
+
"name": "boxShadow",
|
|
193586
|
+
"required": false,
|
|
193587
|
+
"type": {
|
|
193588
|
+
"kind": "primitive",
|
|
193589
|
+
"value": "undefined"
|
|
193590
|
+
},
|
|
193591
|
+
"description": "",
|
|
193592
|
+
"tags": {},
|
|
193593
|
+
"declarations": []
|
|
193594
|
+
},
|
|
193595
|
+
{
|
|
193596
|
+
"kind": "property",
|
|
193597
|
+
"name": "&:hover, &:disabled, &.hover, &.disabled",
|
|
193598
|
+
"required": false,
|
|
193599
|
+
"type": {
|
|
193600
|
+
"kind": "primitive",
|
|
193601
|
+
"value": "undefined"
|
|
193602
|
+
},
|
|
193603
|
+
"description": "",
|
|
193604
|
+
"tags": {},
|
|
193605
|
+
"declarations": []
|
|
193606
|
+
},
|
|
193607
|
+
{
|
|
193608
|
+
"kind": "property",
|
|
193609
|
+
"name": "&:focus-visible:not([disabled]), &.focus:not([disabled])",
|
|
193610
|
+
"required": false,
|
|
193611
|
+
"type": {
|
|
193612
|
+
"kind": "primitive",
|
|
193613
|
+
"value": "undefined"
|
|
193614
|
+
},
|
|
193615
|
+
"description": "",
|
|
193616
|
+
"tags": {},
|
|
193617
|
+
"declarations": []
|
|
193618
|
+
}
|
|
193619
|
+
]
|
|
193620
|
+
},
|
|
193621
|
+
{
|
|
193622
|
+
"kind": "object",
|
|
193623
|
+
"properties": [
|
|
193624
|
+
{
|
|
193625
|
+
"kind": "property",
|
|
193626
|
+
"name": "borderColor",
|
|
193627
|
+
"required": true,
|
|
193628
|
+
"type": {
|
|
193629
|
+
"kind": "union",
|
|
193630
|
+
"value": [
|
|
193631
|
+
{
|
|
193632
|
+
"kind": "primitive",
|
|
193633
|
+
"value": "string"
|
|
193634
|
+
},
|
|
193635
|
+
{
|
|
193636
|
+
"kind": "primitive",
|
|
193637
|
+
"value": "undefined"
|
|
193638
|
+
}
|
|
193639
|
+
]
|
|
193640
|
+
},
|
|
193641
|
+
"description": "",
|
|
193642
|
+
"tags": {},
|
|
193643
|
+
"declarations": []
|
|
193644
|
+
},
|
|
193645
|
+
{
|
|
193646
|
+
"kind": "property",
|
|
193647
|
+
"name": "transition",
|
|
193648
|
+
"required": true,
|
|
193649
|
+
"type": {
|
|
193650
|
+
"kind": "primitive",
|
|
193651
|
+
"value": "string"
|
|
193652
|
+
},
|
|
193653
|
+
"description": "",
|
|
193654
|
+
"tags": {},
|
|
193655
|
+
"declarations": []
|
|
193656
|
+
},
|
|
193657
|
+
{
|
|
193658
|
+
"kind": "property",
|
|
193659
|
+
"name": "boxShadow",
|
|
193660
|
+
"required": true,
|
|
193661
|
+
"type": {
|
|
193662
|
+
"kind": "primitive",
|
|
193663
|
+
"value": "string"
|
|
193664
|
+
},
|
|
193665
|
+
"description": "",
|
|
193666
|
+
"tags": {},
|
|
193667
|
+
"declarations": []
|
|
193668
|
+
},
|
|
193669
|
+
{
|
|
193670
|
+
"kind": "property",
|
|
193671
|
+
"name": "&:hover, &:disabled, &.hover, &.disabled",
|
|
193672
|
+
"required": true,
|
|
193673
|
+
"type": {
|
|
193674
|
+
"kind": "object",
|
|
193675
|
+
"properties": [
|
|
193676
|
+
{
|
|
193677
|
+
"kind": "property",
|
|
193678
|
+
"name": "borderColor",
|
|
193679
|
+
"required": true,
|
|
193680
|
+
"type": {
|
|
193681
|
+
"kind": "union",
|
|
193682
|
+
"value": [
|
|
193683
|
+
{
|
|
193684
|
+
"kind": "primitive",
|
|
193685
|
+
"value": "string"
|
|
193686
|
+
},
|
|
193687
|
+
{
|
|
193688
|
+
"kind": "primitive",
|
|
193689
|
+
"value": "undefined"
|
|
193690
|
+
}
|
|
193691
|
+
]
|
|
193692
|
+
},
|
|
193693
|
+
"description": "",
|
|
193694
|
+
"tags": {},
|
|
193695
|
+
"declarations": []
|
|
193696
|
+
}
|
|
193697
|
+
]
|
|
193698
|
+
},
|
|
193699
|
+
"description": "",
|
|
193700
|
+
"tags": {},
|
|
193701
|
+
"declarations": []
|
|
193702
|
+
},
|
|
193703
|
+
{
|
|
193704
|
+
"kind": "property",
|
|
193705
|
+
"name": "&:focus-visible:not([disabled]), &.focus:not([disabled])",
|
|
193706
|
+
"required": true,
|
|
193707
|
+
"type": {
|
|
193708
|
+
"kind": "object",
|
|
193709
|
+
"properties": [
|
|
193710
|
+
{
|
|
193711
|
+
"kind": "property",
|
|
193712
|
+
"name": "borderColor",
|
|
193713
|
+
"required": true,
|
|
193714
|
+
"type": {
|
|
193715
|
+
"kind": "union",
|
|
193716
|
+
"value": [
|
|
193717
|
+
{
|
|
193718
|
+
"kind": "primitive",
|
|
193719
|
+
"value": "string"
|
|
193720
|
+
},
|
|
193721
|
+
{
|
|
193722
|
+
"kind": "primitive",
|
|
193723
|
+
"value": "undefined"
|
|
193724
|
+
}
|
|
193725
|
+
]
|
|
193726
|
+
},
|
|
193727
|
+
"description": "",
|
|
193728
|
+
"tags": {},
|
|
193729
|
+
"declarations": []
|
|
193730
|
+
},
|
|
193731
|
+
{
|
|
193732
|
+
"kind": "property",
|
|
193733
|
+
"name": "boxShadow",
|
|
193734
|
+
"required": true,
|
|
193735
|
+
"type": {
|
|
193736
|
+
"kind": "primitive",
|
|
193737
|
+
"value": "string"
|
|
193738
|
+
},
|
|
193739
|
+
"description": "",
|
|
193740
|
+
"tags": {},
|
|
193741
|
+
"declarations": []
|
|
193742
|
+
}
|
|
193743
|
+
]
|
|
193744
|
+
},
|
|
193745
|
+
"description": "",
|
|
193746
|
+
"tags": {},
|
|
193747
|
+
"declarations": []
|
|
193748
|
+
}
|
|
193749
|
+
]
|
|
193750
|
+
}
|
|
193751
|
+
]
|
|
193557
193752
|
}
|
|
193558
193753
|
}
|
|
193559
193754
|
},
|
|
@@ -193706,31 +193901,29 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
193706
193901
|
}
|
|
193707
193902
|
],
|
|
193708
193903
|
"tags": {}
|
|
193709
|
-
},
|
|
193710
|
-
{
|
|
193711
|
-
"kind": "parameter",
|
|
193712
|
-
"name": "theme",
|
|
193713
|
-
"type": {
|
|
193714
|
-
"kind": "primitive",
|
|
193715
|
-
"value": "any"
|
|
193716
|
-
},
|
|
193717
|
-
"required": false,
|
|
193718
|
-
"rest": false,
|
|
193719
|
-
"description": "",
|
|
193720
|
-
"declarations": [
|
|
193721
|
-
{
|
|
193722
|
-
"name": "theme",
|
|
193723
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/focusRing.ts"
|
|
193724
|
-
}
|
|
193725
|
-
],
|
|
193726
|
-
"tags": {}
|
|
193727
193904
|
}
|
|
193728
193905
|
],
|
|
193729
193906
|
"members": [],
|
|
193730
193907
|
"returnType": {
|
|
193731
|
-
"kind": "
|
|
193732
|
-
"
|
|
193733
|
-
|
|
193908
|
+
"kind": "object",
|
|
193909
|
+
"properties": [
|
|
193910
|
+
{
|
|
193911
|
+
"kind": "property",
|
|
193912
|
+
"name": "boxShadow",
|
|
193913
|
+
"type": {
|
|
193914
|
+
"kind": "primitive",
|
|
193915
|
+
"value": "string"
|
|
193916
|
+
},
|
|
193917
|
+
"description": "",
|
|
193918
|
+
"declarations": [
|
|
193919
|
+
{
|
|
193920
|
+
"name": "boxShadow",
|
|
193921
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/focusRing.ts"
|
|
193922
|
+
}
|
|
193923
|
+
],
|
|
193924
|
+
"tags": {}
|
|
193925
|
+
}
|
|
193926
|
+
]
|
|
193734
193927
|
}
|
|
193735
193928
|
}
|
|
193736
193929
|
},
|
|
@@ -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": "13.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.2.
|
|
23
|
-
"@workday/canvas-kit-react": "13.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.2.31",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.2.31",
|
|
23
|
+
"@workday/canvas-kit-react": "13.2.31",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.2.31",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.2.31",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -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": "13.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.2.
|
|
23
|
-
"@workday/canvas-kit-react": "13.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.2.31",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.2.31",
|
|
23
|
+
"@workday/canvas-kit-react": "13.2.31",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.2.31",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.2.31",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -4,21 +4,29 @@ This guide contains an overview of the changes in Canvas Kit v14. Please
|
|
|
4
4
|
[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
|
|
5
5
|
any questions.
|
|
6
6
|
|
|
7
|
+
## Why You Should Upgrade
|
|
8
|
+
|
|
9
|
+
v14.0 Introduces Workday's new brand direction which includes a new color palette and with it, some
|
|
10
|
+
styling updates to our components.
|
|
11
|
+
|
|
12
|
+
> **Note:** v14.0 requires an upgrade to the `@workday/canvas-tokens-web` package to `@v3.0.0`.
|
|
13
|
+
|
|
7
14
|
## Table of contents
|
|
8
15
|
|
|
9
16
|
- [Codemod](#codemod)
|
|
10
17
|
- [Instructions](#instructions)
|
|
18
|
+
- [Tokens](#tokens)
|
|
11
19
|
- [Caution Naming](#caution-naming)
|
|
12
20
|
- [Theming](#theming)
|
|
13
21
|
- [Canvas Provider](#canvas-provider-)
|
|
14
22
|
- [Component Updates](#component-updates)
|
|
15
|
-
- [Avatar
|
|
16
|
-
- [Branding Changes](#branding-changes)
|
|
23
|
+
- [Avatar Preview](#avatar-preview)
|
|
24
|
+
- [Branding Changes](#branding-changes-)
|
|
17
25
|
- [Buttons](#buttons)
|
|
18
|
-
- [Card](#card)
|
|
26
|
+
- [Card](#card-)
|
|
19
27
|
- [Count Badge](#count-badge)
|
|
20
28
|
- [Expandable](#expandable)
|
|
21
|
-
- [Hyperlink
|
|
29
|
+
- [Hyperlink and ExternalHyperlink](#hyperlink-and-external-hyperlink)
|
|
22
30
|
- [Loading Dots](#loading-dots)
|
|
23
31
|
- [Pill](#pill)
|
|
24
32
|
- [SearchForm](#search-form)
|
|
@@ -35,7 +43,7 @@ any questions.
|
|
|
35
43
|
- [Deprecated Buttons](#deprecated-buttons)
|
|
36
44
|
- [Input Provider](#input-provider)
|
|
37
45
|
- [Menu (preview)](#menu-preview)
|
|
38
|
-
- [readyOnlyPillStencil and removeablePillStencil](readyOnlyPillStencil-and-removeablePillStencil)
|
|
46
|
+
- [readyOnlyPillStencil and removeablePillStencil](#readyOnlyPillStencil-and-removeablePillStencil)
|
|
39
47
|
- [Text Area](#text-area)
|
|
40
48
|
- [Text Input](#text-input)
|
|
41
49
|
- [Troubleshooting](#troubleshooting)
|
|
@@ -105,24 +113,47 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
105
113
|
> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
|
|
106
114
|
> your project conventions.
|
|
107
115
|
|
|
116
|
+
## Tokens
|
|
117
|
+
|
|
118
|
+
Canvas Kit v14 now uses `@workday/canvas-tokens-web` v3, which introduces new color palettes and
|
|
119
|
+
replaces the old "fruity" color names (for example, use `red` instead of `cinnamon`, `blue` instead
|
|
120
|
+
of `blueberry`, and `green` instead of `greenApple`). We strongly recommend upgrading to
|
|
121
|
+
`@workday/canvas-tokens-web` v3, as using older versions will not match the new brand guidelines or
|
|
122
|
+
color system. Although this dependency upgrade is not required, we've offered migration guides and
|
|
123
|
+
codemods separately from the v14 upgrade so that teams can upgrade when they can.
|
|
124
|
+
|
|
125
|
+
> **Note:** v3 Tokens should be backwards compatible with older versions of Canvas Kit.
|
|
126
|
+
|
|
127
|
+
Follow these guides to migrate:
|
|
128
|
+
|
|
129
|
+
- If you are still using our old tokens from (`@workday/canvas-kit-react/tokens`): Migrate from
|
|
130
|
+
`@workday/canvas-kit-react/tokens` to `@workday/canvas-tokens-web` v3:
|
|
131
|
+
[Migration Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-overview--docs)
|
|
132
|
+
- [v2 to v3 Migration Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs)
|
|
133
|
+
|
|
134
|
+
> 🤖 The `v14-tokens` codemod will automatically migrate your tokens, whether you're upgrading from
|
|
135
|
+
> old tokens or from v2 to v3. Read
|
|
136
|
+
> [the codemod instructions](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-codemod--docs)
|
|
137
|
+
|
|
108
138
|
## Caution Naming
|
|
109
139
|
|
|
110
140
|
**PR:** [#3462](https://github.com/Workday/canvas-kit/pull/3462)
|
|
111
141
|
|
|
112
|
-
To better align with the brand refresh, Alert and Warning states are being renamed to Caution for
|
|
142
|
+
To better align with the brand refresh, Alert and Warning states are being renamed to Caution for
|
|
143
|
+
better semantics.
|
|
113
144
|
|
|
114
|
-
This change mostly affects how you pass an error state to our input components. In most cases, our
|
|
115
|
-
ensure correct accessiblity.
|
|
145
|
+
This change mostly affects how you pass an error state to our input components. In most cases, our
|
|
146
|
+
inputs components should be used with our `FormField` component to ensure correct accessiblity.
|
|
116
147
|
|
|
117
148
|
**Before in v13**
|
|
118
149
|
|
|
119
150
|
```tsx
|
|
120
151
|
<FormField error="alert">
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
152
|
+
<FormField.Label>First Name</FormField.Label>
|
|
153
|
+
<FormField.Field>
|
|
154
|
+
<FormField.Input as={TextInput} value={value} onChange={handleChange} />
|
|
155
|
+
<FormField.Hint>Cannot contain numbers</FormField.Hint>
|
|
156
|
+
</FormField.Field>
|
|
126
157
|
</FormField>
|
|
127
158
|
```
|
|
128
159
|
|
|
@@ -130,15 +161,16 @@ ensure correct accessiblity.
|
|
|
130
161
|
|
|
131
162
|
```tsx
|
|
132
163
|
<FormField error="caution">
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
164
|
+
<FormField.Label>First Name</FormField.Label>
|
|
165
|
+
<FormField.Field>
|
|
166
|
+
<FormField.Input as={TextInput} value={value} onChange={handleChange} />
|
|
167
|
+
<FormField.Hint>Cannot contain numbers</FormField.Hint>
|
|
168
|
+
</FormField.Field>
|
|
138
169
|
</FormField>
|
|
139
170
|
```
|
|
140
171
|
|
|
141
|
-
If you are using the error type either from our `Common` package or the one exposed from the
|
|
172
|
+
If you are using the error type either from our `Common` package or the one exposed from the
|
|
173
|
+
component, the naming as also changed.
|
|
142
174
|
|
|
143
175
|
**Before in v13**
|
|
144
176
|
|
|
@@ -171,7 +203,8 @@ someFunction(ErrorType.Caution);
|
|
|
171
203
|
<TextArea error={TextArea.ErrorType.Caution} />
|
|
172
204
|
```
|
|
173
205
|
|
|
174
|
-
> 🤖 The codemod will handle the change of `ErrorType.Alert` to `ErrorType.Caution` and
|
|
206
|
+
> 🤖 The codemod will handle the change of `ErrorType.Alert` to `ErrorType.Caution` and
|
|
207
|
+
> `error="alert"` to `error="caution"`.
|
|
175
208
|
|
|
176
209
|
## Theming
|
|
177
210
|
|
|
@@ -249,7 +282,7 @@ specificity.
|
|
|
249
282
|
|
|
250
283
|
## Component Updates
|
|
251
284
|
|
|
252
|
-
### Avatar
|
|
285
|
+
### Avatar (Preview)
|
|
253
286
|
|
|
254
287
|
**PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
|
|
255
288
|
|
|
@@ -303,13 +336,16 @@ import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
|
|
|
303
336
|
### Branding Changes 💅
|
|
304
337
|
|
|
305
338
|
Several components have been refactored to reflect our new brand direction. Most of these changes
|
|
306
|
-
revolve around the use of our new brand colors.
|
|
339
|
+
revolve around the use of our new brand colors. For a better guide on what has changed in our v3.0.0
|
|
340
|
+
tokens, please view the Tokens v3.0.0
|
|
341
|
+
[Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs).
|
|
342
|
+
|
|
343
|
+
> **Note:** If you want a visual diff of the changes, please view the [Visual Changes](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v14-0-visual-changes--docs) guide.
|
|
307
344
|
|
|
308
345
|
The following components have been updated:
|
|
309
346
|
|
|
310
|
-
- `Breadcrumbs`
|
|
311
|
-
|
|
312
|
-
- [#3447](https://github.com/Workday/canvas-kit/pull/3447)
|
|
347
|
+
- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270),
|
|
348
|
+
[#3447](https://github.com/Workday/canvas-kit/pull/3447)
|
|
313
349
|
- `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
|
|
314
350
|
- `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
315
351
|
- `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
@@ -331,7 +367,13 @@ The `TertiaryButton` component no longer supports the `isThemable` prop. To cust
|
|
|
331
367
|
of `TertiaryButton`, use the `cs` prop for custom styles or the `colors` prop for palette-based
|
|
332
368
|
color overrides.
|
|
333
369
|
|
|
370
|
+
**After in v14**
|
|
334
371
|
|
|
372
|
+
```tsx
|
|
373
|
+
<TertiaryButton cs={{[buttonStencil.vars.background: 'red']}}>
|
|
374
|
+
Click Me
|
|
375
|
+
</TertiaryButton>
|
|
376
|
+
```
|
|
335
377
|
|
|
336
378
|
The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
|
|
337
379
|
our new brand direction.
|
|
@@ -348,10 +390,10 @@ visual hierarchy and more flexible styling options. The following changes have b
|
|
|
348
390
|
|
|
349
391
|
#### Default Card No Longer Has Shadow
|
|
350
392
|
|
|
351
|
-
The default `Card` variant no longer includes a shadow, creating a cleaner, flatter appearance
|
|
352
|
-
aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking
|
|
353
|
-
that may affect your application's visual hierarchy. If your design requires shadow you
|
|
354
|
-
through `cs` prop.
|
|
393
|
+
The default `Card` variant no longer includes a box shadow, creating a cleaner, flatter appearance
|
|
394
|
+
that aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking
|
|
395
|
+
change** that may affect your application's visual hierarchy. If your design requires a shadow you
|
|
396
|
+
can add it through `cs` prop.
|
|
355
397
|
|
|
356
398
|
**Before in v13**
|
|
357
399
|
|
|
@@ -362,13 +404,15 @@ through `cs` prop.
|
|
|
362
404
|
</Card>
|
|
363
405
|
```
|
|
364
406
|
|
|
365
|
-
**After in v14**
|
|
407
|
+
**After in v14** Only do this if you need a shadow. Otherwise, adhere to the default styling.
|
|
366
408
|
|
|
367
409
|
```tsx
|
|
410
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
411
|
+
|
|
368
412
|
<Card cs={{boxShadow: system.depth[1]}}>
|
|
369
413
|
<Card.Heading>Card Title</Card.Heading>
|
|
370
414
|
<Card.Body>Card content with shadow</Card.Body>
|
|
371
|
-
</Card
|
|
415
|
+
</Card>;
|
|
372
416
|
```
|
|
373
417
|
|
|
374
418
|
#### New Card Variants
|
|
@@ -383,7 +427,7 @@ We've added two new variants to provide more styling flexibility:
|
|
|
383
427
|
The `variant` prop is optional - if no variant is specified, the card will use the default styling.
|
|
384
428
|
|
|
385
429
|
```tsx
|
|
386
|
-
// Default card (no variant prop needed)
|
|
430
|
+
// Default card (no variant prop needed) with a border and no box shadow
|
|
387
431
|
<Card>
|
|
388
432
|
<Card.Heading>Default Card</Card.Heading>
|
|
389
433
|
<Card.Body>Default styling with borders, no shadow</Card.Body>
|
|
@@ -404,11 +448,11 @@ The `variant` prop is optional - if no variant is specified, the card will use t
|
|
|
404
448
|
|
|
405
449
|
#### Gap Instead of Margins
|
|
406
450
|
|
|
407
|
-
We've replaced the individual margins on `Card.Heading` and `Card.Body` with
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
451
|
+
We've replaced the individual margins on `Card.Heading` and `Card.Body` with `gap`. The card now
|
|
452
|
+
uses `display: flex` with `flex-direction: column` by default, and the `gap` prop provides
|
|
453
|
+
consistent spacing between all direct children. This provides more consistent spacing and better
|
|
454
|
+
control over the layout. This is a **visual breaking change** that may affect the spacing between
|
|
455
|
+
card elements.
|
|
412
456
|
|
|
413
457
|
**Before in v13**
|
|
414
458
|
|
|
@@ -441,7 +485,7 @@ emphasis for the badge.
|
|
|
441
485
|
|
|
442
486
|
```tsx
|
|
443
487
|
<CountBadge /> // Default count badge with high emphasis
|
|
444
|
-
<CountBadge variant="inverse" /> // Inverse default count badge
|
|
488
|
+
<CountBadge variant="inverse" /> // Inverse default count badge to use on dark backgrounds
|
|
445
489
|
// new
|
|
446
490
|
<CountBadge emphasis="low" /> // Default count badge with low emphasis
|
|
447
491
|
<CountBadge variant="inverse" emphasis="low" /> // Inverse count badge with low emphasis
|
|
@@ -461,8 +505,6 @@ emphasis for the badge.
|
|
|
461
505
|
|
|
462
506
|
> 🤖 The codemod will handle the change of `altText` to `name` on `Expandable.Avatar`.
|
|
463
507
|
|
|
464
|
-
These changes are only **visual** and should not affect the functionality of the component.
|
|
465
|
-
|
|
466
508
|
### Hyperlink and External Hyperlink
|
|
467
509
|
|
|
468
510
|
**PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
|
|
@@ -470,7 +512,7 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
470
512
|
- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standaloneInverse` variant. This
|
|
471
513
|
removes the underline text decoration for use outside the context of body text.
|
|
472
514
|
|
|
473
|
-
**
|
|
515
|
+
**In v14**
|
|
474
516
|
|
|
475
517
|
```tsx
|
|
476
518
|
<Hyperlink variant="standalone" href="#hyperlink">Hyperlink</Hyperlink>
|
|
@@ -486,16 +528,19 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
486
528
|
|
|
487
529
|
**PR:** [#3393](https://github.com/Workday/canvas-kit/pull/3393)
|
|
488
530
|
|
|
489
|
-
- We've updated the colors to match brand refresh. The default color changes from
|
|
531
|
+
- We've updated the colors to match our brand refresh. The default color changes from
|
|
490
532
|
`system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
|
|
491
533
|
- `LoadingDots` now has a `inverse` variant. Use this variant when the Loading Dots are on a dark
|
|
492
534
|
background or image.
|
|
493
535
|
|
|
536
|
+
**After in v14**
|
|
537
|
+
|
|
494
538
|
```tsx
|
|
539
|
+
// Use inverse variant when the Loading Dots are on a dark background or image
|
|
495
540
|
<LoadingDots variant="inverse" />
|
|
496
541
|
```
|
|
497
542
|
|
|
498
|
-
### Pill
|
|
543
|
+
### Pill (Preview)
|
|
499
544
|
|
|
500
545
|
**PRs:** [#3430](https://github.com/Workday/canvas-kit/pull/3430),
|
|
501
546
|
[#3446](https://github.com/Workday/canvas-kit/pull/3446)
|
|
@@ -768,7 +813,7 @@ import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
|
|
|
768
813
|
<TextArea orientation="vertical">
|
|
769
814
|
<TextArea.Label>Leave a review</TextArea.Label>
|
|
770
815
|
<TextArea.Field onChange={handleChange} value={value} />
|
|
771
|
-
</TextArea
|
|
816
|
+
</TextArea>;
|
|
772
817
|
```
|
|
773
818
|
|
|
774
819
|
**After in v14**
|
|
@@ -782,7 +827,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
|
782
827
|
<FormField.Field>
|
|
783
828
|
<FormField.Input as={TextArea} onChange={handleChange} value={value} />
|
|
784
829
|
</FormField.Field>
|
|
785
|
-
</FormField
|
|
830
|
+
</FormField>;
|
|
786
831
|
```
|
|
787
832
|
|
|
788
833
|
### Text Input (preview)
|
|
@@ -801,7 +846,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
|
801
846
|
<TextInput orientation="vertical">
|
|
802
847
|
<TextInput.Label>Email</TextInput.Label>
|
|
803
848
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
804
|
-
</TextInput
|
|
849
|
+
</TextInput>;
|
|
805
850
|
```
|
|
806
851
|
|
|
807
852
|
**After in v14**
|
|
@@ -815,7 +860,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
|
815
860
|
<FormField.Field>
|
|
816
861
|
<FormField.Input as={TextInput} onChange={handleChange} value={value} />
|
|
817
862
|
</FormField.Field>
|
|
818
|
-
</FormField
|
|
863
|
+
</FormField>;
|
|
819
864
|
```
|
|
820
865
|
|
|
821
866
|
---
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import {Graphic} from '@workday/canvas-kit-react/icon';
|
|
2
|
+
|
|
3
|
+
import avatarImage from './images/v14-avatar.png';
|
|
4
|
+
import breadcrumbsImage from './images/v14-breadcrumbs.png';
|
|
5
|
+
import cardImage from './images/v14-card.png';
|
|
6
|
+
import checkboxImage from './images/v14-checkbox.png';
|
|
7
|
+
import countBadgeImage from './images/v14-count-badge.png';
|
|
8
|
+
import expandableImage from './images/v14-expandable.png';
|
|
9
|
+
import infoHighlightImage from './images/v14-info-highlight.png';
|
|
10
|
+
import loadingDotsImage from './images/v14-loading-dots.png';
|
|
11
|
+
import pillImage from './images/v14-pill.png';
|
|
12
|
+
import primaryButtonImage from './images/v14-primary-button.png';
|
|
13
|
+
import radioImage from './images/v14-radio.png';
|
|
14
|
+
import secondaryButtonImage from './images/v14-secondary-button.png';
|
|
15
|
+
import selectImage from './images/v14-select.png';
|
|
16
|
+
import statusIndicatorImage from './images/v14-status-indicator-preview.png';
|
|
17
|
+
import tabsImage from './images/v14-tabs.png';
|
|
18
|
+
import tertiaryButtonImage from './images/v14-tertiary-button.png';
|
|
19
|
+
import textAreaImage from './images/v14-text-area.png';
|
|
20
|
+
import textInputImage from './images/v14-text-input.png';
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
# Canvas Kit 14.0 Visual Changes
|
|
24
|
+
|
|
25
|
+
This guide contains an overview of the changes in Canvas Kit v14. If you have any issues, feel free to report them [here](https://github.com/Workday/canvas-kit/issues). For a mode detailed overview of the changes in v14, please view our [v14 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v14-0-overview--docs).
|
|
26
|
+
|
|
27
|
+
<Graphic src={{url: avatarImage}} />
|
|
28
|
+
<Graphic src={{url: breadcrumbsImage}} />
|
|
29
|
+
<Graphic src={{url: cardImage}} />
|
|
30
|
+
<Graphic src={{url: checkboxImage}} />
|
|
31
|
+
<Graphic src={{url: countBadgeImage}} />
|
|
32
|
+
<Graphic src={{url: expandableImage}} />
|
|
33
|
+
<Graphic src={{url: infoHighlightImage}} />
|
|
34
|
+
<Graphic src={{url: loadingDotsImage}} />
|
|
35
|
+
<Graphic src={{url: pillImage}} />
|
|
36
|
+
<Graphic src={{url: primaryButtonImage}} />
|
|
37
|
+
<Graphic src={{url: radioImage}} />
|
|
38
|
+
<Graphic src={{url: secondaryButtonImage}} />
|
|
39
|
+
<Graphic src={{url: selectImage}} />
|
|
40
|
+
<Graphic src={{url: statusIndicatorImage}} />
|
|
41
|
+
<Graphic src={{url: tabsImage}} />
|
|
42
|
+
<Graphic src={{url: tertiaryButtonImage}} />
|
|
43
|
+
<Graphic src={{url: textAreaImage}} />
|
|
44
|
+
<Graphic src={{url: textInputImage}} />
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# Canvas Kit Tokens Migration Codemod
|
|
2
2
|
|
|
3
|
-
This codemod helps migrate Canvas Kit tokens from `@workday/canvas-kit-react/tokens`
|
|
4
|
-
`@workday/canvas-tokens-web` v2 format. It automatically
|
|
5
|
-
use the new token system.
|
|
3
|
+
This codemod helps migrate Canvas Kit tokens from `@workday/canvas-kit-react/tokens` or
|
|
4
|
+
`@workday/canvas-tokens-web` v2 to `@workday/canvas-tokens-web` v3 format. It automatically
|
|
5
|
+
transforms token usage in your codebase to use the new token system.
|
|
6
6
|
|
|
7
7
|
## Important Notes
|
|
8
8
|
|
|
@@ -34,7 +34,7 @@ The codemod requires the following packages to be installed:
|
|
|
34
34
|
You can run the codemod using npx:
|
|
35
35
|
|
|
36
36
|
```sh
|
|
37
|
-
npx @workday/canvas-kit-codemod
|
|
37
|
+
npx @workday/canvas-kit-codemod v14-tokens [path]
|
|
38
38
|
```
|
|
39
39
|
|
|
40
40
|
Or install the package and run it directly. But remember to uninstall the package after you have
|
|
@@ -42,7 +42,7 @@ completed the upgrade.
|
|
|
42
42
|
|
|
43
43
|
```sh
|
|
44
44
|
yarn add @workday/canvas-kit-codemod
|
|
45
|
-
canvas-kit-codemod
|
|
45
|
+
canvas-kit-codemod v14-tokens [path]
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
> Note: These codemods only work on .js, .jsx, .ts, and .tsx extensions. You may need to make some
|
|
@@ -196,6 +196,7 @@ After completing the token migration:
|
|
|
196
196
|
## Resources
|
|
197
197
|
|
|
198
198
|
- [Canvas Tokens Documentation](https://canvas.workday.com/styles/tokens/)
|
|
199
|
+
- [Canvas Tokens v3 Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs)
|
|
199
200
|
- [Canvas Kit Styling Documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)
|
|
200
201
|
- [Token Migration Discussion](https://github.com/Workday/canvas-tokens/discussions/77)
|
|
201
202
|
- [Canvas Kit GitHub Repository](https://github.com/Workday/canvas-kit)
|
|
@@ -10,8 +10,8 @@ application.
|
|
|
10
10
|
|
|
11
11
|
<StorybookInformationHighlight
|
|
12
12
|
emphasis="high"
|
|
13
|
-
title="Canvas Tokens
|
|
14
|
-
description="Check out the new
|
|
13
|
+
title="Canvas Tokens v3"
|
|
14
|
+
description="Check out the new v3 tokens package to explore the updated token structure and see how the new CSS variable tokens look in practice. Learn more about how tokens are organized, how to use them in your application, and the benefits of migrating to the new system."
|
|
15
15
|
link="https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs"
|
|
16
16
|
linkText="View the Docs"
|
|
17
17
|
isExternal
|
|
@@ -20,52 +20,190 @@ import {StorybookInformationHighlight} from './StorybookInformationHighlight';
|
|
|
20
20
|
|
|
21
21
|
## Base Color Mapping
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
| `colors.
|
|
40
|
-
| `colors.
|
|
41
|
-
| `colors.
|
|
42
|
-
| `colors.
|
|
43
|
-
| `colors.
|
|
44
|
-
| `colors.
|
|
45
|
-
| `colors.
|
|
46
|
-
| `colors.
|
|
47
|
-
| `colors.
|
|
48
|
-
| `colors.
|
|
49
|
-
| `colors.
|
|
50
|
-
| `colors.
|
|
51
|
-
| `colors.
|
|
52
|
-
| `colors.
|
|
53
|
-
| `colors.
|
|
54
|
-
| `colors.
|
|
55
|
-
| `colors.
|
|
56
|
-
| `colors.
|
|
57
|
-
| `colors.
|
|
58
|
-
| `colors.
|
|
59
|
-
| `colors.
|
|
60
|
-
| `colors.
|
|
61
|
-
| `colors.
|
|
62
|
-
| `colors.
|
|
63
|
-
| `colors.
|
|
64
|
-
| `colors.
|
|
65
|
-
| `colors.
|
|
66
|
-
| `colors.
|
|
67
|
-
| `colors.
|
|
68
|
-
| `colors.
|
|
23
|
+
Old base colors have a new base token value. Check
|
|
24
|
+
[these tables](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-visual-changes-base-deprecated-palette--docs)
|
|
25
|
+
to see visual changes.
|
|
26
|
+
|
|
27
|
+
> **Important:** Old "fruity" color tokens are deprecated and have been mapped to new palette
|
|
28
|
+
> colors. Note that the v3 color scale uses `oklch`, which differs from `rgb` or `hex`, so the new
|
|
29
|
+
> color may not be a perfect 1:1 match with the old token. It can cause **visual breaking changes**.
|
|
30
|
+
>
|
|
31
|
+
> In some cases, there may not be a direct replacement in the new palette, and the value may remain
|
|
32
|
+
> a deprecated token. In these situations, you may need to manually select a new color that best
|
|
33
|
+
> fits your needs. You can use
|
|
34
|
+
> [a comparison tool](https://stackblitz.com/edit/color-comparator?file=src%2FApp.tsx) to find the
|
|
35
|
+
> best match.
|
|
36
|
+
|
|
37
|
+
| Old Token | New Token | CSS Variable | System Color Replacement |
|
|
38
|
+
| ------------------------------ | --------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------- |
|
|
39
|
+
| `colors.cinnamon100` | `base.red50` | `--cnvs-base-palette-red-50` | sys.color.bg.critical.softer |
|
|
40
|
+
| `colors.cinnamon200` | `base.red100` | `--cnvs-base-palette-red-100` | sys.color.bg.critical.soft |
|
|
41
|
+
| `colors.cinnamon300` | `base.red300` | `--cnvs-base-palette-red-300` | sys.color.fg.critical.soft |
|
|
42
|
+
| `colors.cinnamon400` | `base.red400` | `--cnvs-base-palette-red-400` | |
|
|
43
|
+
| `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 |
|
|
44
|
+
| `colors.cinnamon600` | `base.red700` | `--cnvs-base-palette-red-700` | sys.color.bg.critical.strong <br/> sys.color.fg.critical.strong |
|
|
45
|
+
| `colors.peach100` | `base.coral50` | `--cnvs-base-palette-coral-50` | |
|
|
46
|
+
| `colors.peach200` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
|
|
47
|
+
| `colors.peach300` | `base.coral300` | `--cnvs-base-palette-coral-300` | |
|
|
48
|
+
| `colors.peach400` | `base.coral400` | `--cnvs-base-palette-coral-400` | |
|
|
49
|
+
| `colors.peach500` | `base.coral600` | `--cnvs-base-palette-coral-600` | |
|
|
50
|
+
| `colors.peach600` | `base.coral700` | `--cnvs-base-palette-coral-700` | |
|
|
51
|
+
| `colors.chiliMango100` | `base.coral100` | `--cnvs-base-palette-coral-100` | |
|
|
52
|
+
| `colors.chiliMango200` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
|
|
53
|
+
| `colors.chiliMango300` | `base.coral300` | `--cnvs-base-palette-coral-300` | |
|
|
54
|
+
| `colors.chiliMango400` | `base.coral500` | `--cnvs-base-palette-coral-500` | |
|
|
55
|
+
| `colors.chiliMango500` | `base.coral500` | `--cnvs-base-palette-coral-500` | |
|
|
56
|
+
| `colors.chiliMango600` | `base.coral700` | `--cnvs-base-palette-coral-700` | |
|
|
57
|
+
| `colors.cantaloupe100` | `base.amber50` | `--cnvs-base-palette-amber-50` | sys.color.bg.caution.softer |
|
|
58
|
+
| `colors.cantaloupe200` | `base.amber200` | `--cnvs-base-palette-amber-200` | sys.color.fg.caution.softer <br/> sys.color.bg.caution.soft |
|
|
59
|
+
| `colors.cantaloupe300` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
|
|
60
|
+
| `colors.cantaloupe400` | `base.amber400` | `--cnvs-base-palette-amber-400` | sys.color.bg.caution.default <br/> sys.color.border.caution.default |
|
|
61
|
+
| `colors.cantaloupe500` | `base.amber500` | `--cnvs-base-palette-amber-500` | sys.color.bg.caution.strong |
|
|
62
|
+
| `colors.cantaloupe600` | `base.amber600` | `--cnvs-base-palette-amber-600` | sys.color.bg.caution.stronger <br/> sys.color.border.caution.strong |
|
|
63
|
+
| `colors.sourLemon100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
|
|
64
|
+
| `colors.sourLemon200` | `base.amber100` | `--cnvs-base-palette-amber-100` | |
|
|
65
|
+
| `colors.sourLemon300` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
|
|
66
|
+
| `colors.sourLemon400` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
|
|
67
|
+
| `colors.sourLemon500` | `base.amber300` | `--cnvs-base-palette-amber-300` | |
|
|
68
|
+
| `colors.sourLemon600` | `base.amber500` | `--cnvs-base-palette-amber-500` | |
|
|
69
|
+
| `colors.juicyPear100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
|
|
70
|
+
| `colors.juicyPear200` | `base.amber100` | `--cnvs-base-palette-amber-100` | |
|
|
71
|
+
| `colors.juicyPear300` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
|
|
72
|
+
| `colors.juicyPear400` | `base.amber200` | `--cnvs-base-palette-amber-200` | |
|
|
73
|
+
| `colors.juicyPear500` | `base.green500` | `--cnvs-base-palette-green-500` | |
|
|
74
|
+
| `colors.juicyPear600` | `base.green700` | `--cnvs-base-palette-green-700` | |
|
|
75
|
+
| `colors.kiwi100` | `base.green50` | `--cnvs-base-palette-green-50` | |
|
|
76
|
+
| `colors.kiwi200` | `base.green100` | `--cnvs-base-palette-green-100` | |
|
|
77
|
+
| `colors.kiwi300` | `base.green200` | `--cnvs-base-palette-green-200` | |
|
|
78
|
+
| `colors.kiwi400` | `base.green500` | `--cnvs-base-palette-green-500` | |
|
|
79
|
+
| `colors.kiwi500` | `base.green500` | `--cnvs-base-palette-green-500` | |
|
|
80
|
+
| `colors.kiwi600` | `base.green700` | `--cnvs-base-palette-green-700` | |
|
|
81
|
+
| `colors.greenApple50` | `base.green50` | `--cnvs-base-palette-green-50` | sys.color.bg.positive.softer |
|
|
82
|
+
| `colors.greenApple100` | `base.green100` | `--cnvs-base-palette-green-100` | sys.color.bg.positive.soft |
|
|
83
|
+
| `colors.greenApple200` | `base.green200` | `--cnvs-base-palette-green-200` | sys.color.fg.positive.soft |
|
|
84
|
+
| `colors.greenApple600` | `base.green600` | `--cnvs-base-palette-green-600` | sys.color.bg.positive.default <br/> sys.color.fg.positive.default |
|
|
85
|
+
| `colors.greenApple700` | `base.green700` | `--cnvs-base-palette-green-700` | sys.color.bg.positive.strong <br/> sys.color.fg.positive.strong |
|
|
86
|
+
| `colors.greenApple800` | `base.green800` | `--cnvs-base-palette-green-800` | sys.color.bg.positive.stronger <br/> sys.color.fg.positive.stronger |
|
|
87
|
+
| `colors.watermelon100` | `base.teal25` | `--cnvs-base-palette-teal-25` | |
|
|
88
|
+
| `colors.watermelon200` | `base.teal100` | `--cnvs-base-palette-teal-100` | |
|
|
89
|
+
| `colors.watermelon300` | `base.green100` | `--cnvs-base-palette-green-100` | |
|
|
90
|
+
| `colors.watermelon400` | `base.green600` | `--cnvs-base-palette-green-600` | |
|
|
91
|
+
| `colors.watermelon500` | `base.green700` | `--cnvs-base-palette-green-700` | |
|
|
92
|
+
| `colors.watermelon600` | `base.green900` | `--cnvs-base-palette-green-900` | |
|
|
93
|
+
| `colors.jewel100` | `base.teal25` | `--cnvs-base-palette-teal-25` | |
|
|
94
|
+
| `colors.jewel200` | `base.teal200` | `--cnvs-base-palette-teal-200` | |
|
|
95
|
+
| `colors.jewel300` | `base.teal400` | `--cnvs-base-palette-teal-400` | |
|
|
96
|
+
| `colors.jewel400` | `base.teal500` | `--cnvs-base-palette-teal-500` | |
|
|
97
|
+
| `colors.jewel500` | `base.teal600` | `--cnvs-base-palette-teal-600` | |
|
|
98
|
+
| `colors.jewel600` | `base.teal700` | `--cnvs-base-palette-teal-700` | |
|
|
99
|
+
| `colors.toothpaste100` | `base.azure50` | `--cnvs-base-palette-azure-50` | |
|
|
100
|
+
| `colors.toothpaste200` | `base.azure200` | `--cnvs-base-palette-azure-200` | |
|
|
101
|
+
| `colors.toothpaste300` | `base.azure300` | `--cnvs-base-palette-azure-300` | |
|
|
102
|
+
| `colors.toothpaste400` | `base.azure500` | `--cnvs-base-palette-azure-500` | |
|
|
103
|
+
| `colors.toothpaste500` | `base.azure700` | `--cnvs-base-palette-azure-700` | |
|
|
104
|
+
| `colors.toothpaste600` | `base.azure800` | `--cnvs-base-palette-azure-800` | |
|
|
105
|
+
| `colors.blueberry100` | `base.blue100` | `--cnvs-base-palette-blue-100` | |
|
|
106
|
+
| `colors.blueberry200` | `base.blue100` | `--cnvs-base-palette-blue-100` | sys.color.bg.primary.soft |
|
|
107
|
+
| `colors.blueberry300` | `base.blue400` | `--cnvs-base-palette-blue-400` | sys.color.bg.primary.default <br/> sys.color.fg.primary.soft |
|
|
108
|
+
| `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 |
|
|
109
|
+
| `colors.blueberry500` | `base.blue700` | `--cnvs-base-palette-blue-700` | sys.color.bg.primary.strong <br/> sys.color.fg.primary.strong |
|
|
110
|
+
| `colors.blueberry600` | `base.blue800` | `--cnvs-base-palette-blue-800` | sys.color.bg.primary.stronger <br/> sys.color.text.primary.stronger |
|
|
111
|
+
| `colors.plum100` | `base.blue100` | `--cnvs-base-palette-blue-100` | |
|
|
112
|
+
| `colors.plum200` | `base.blue200` | `--cnvs-base-palette-blue-200` | |
|
|
113
|
+
| `colors.plum300` | `base.blue300` | `--cnvs-base-palette-blue-300` | |
|
|
114
|
+
| `colors.plum400` | `base.blue400` | `--cnvs-base-palette-blue-400` | |
|
|
115
|
+
| `colors.plum500` | `base.blue500` | `--cnvs-base-palette-blue-500` | |
|
|
116
|
+
| `colors.plum600` | `base.blue600` | `--cnvs-base-palette-blue-600` | |
|
|
117
|
+
| `colors.berrySmoothie100` | `base.indigo50` | `--cnvs-base-palette-indigo-50` | |
|
|
118
|
+
| `colors.berrySmoothie200` | `base.indigo200` | `--cnvs-base-palette-indigo-200` | |
|
|
119
|
+
| `colors.berrySmoothie300` | `base.indigo400` | `--cnvs-base-palette-indigo-400` | |
|
|
120
|
+
| `colors.berrySmoothie400` | `base.blue500` | `--cnvs-base-palette-blue-500` | |
|
|
121
|
+
| `colors.berrySmoothie500` | `base.blue700` | `--cnvs-base-palette-blue-700` | |
|
|
122
|
+
| `colors.berrySmoothie600` | `base.blue800` | `--cnvs-base-palette-blue-800` | |
|
|
123
|
+
| `colors.blackberry100` | `base.indigo25` | `--cnvs-base-palette-indigo-25` | |
|
|
124
|
+
| `colors.blackberry200` | `base.indigo200` | `--cnvs-base-palette-indigo-200` | |
|
|
125
|
+
| `colors.blackberry300` | `base.indigo400` | `--cnvs-base-palette-indigo-400` | |
|
|
126
|
+
| `colors.blackberry400` | `base.indigo500` | `--cnvs-base-palette-indigo-500` | |
|
|
127
|
+
| `colors.blackberry500` | `base.indigo700` | `--cnvs-base-palette-indigo-700` | |
|
|
128
|
+
| `colors.blackberry600` | `base.indigo900` | `--cnvs-base-palette-indigo-900` | |
|
|
129
|
+
| `colors.islandPunch100` | `base.purple25` | `--cnvs-base-palette-purple-25` | |
|
|
130
|
+
| `colors.islandPunch200` | `base.purple200` | `--cnvs-base-palette-purple-200` | |
|
|
131
|
+
| `colors.islandPunch300` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
|
|
132
|
+
| `colors.islandPunch400` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
|
|
133
|
+
| `colors.islandPunch500` | `base.purple700` | `--cnvs-base-palette-purple-700` | |
|
|
134
|
+
| `colors.islandPunch600` | `base.purple800` | `--cnvs-base-palette-purple-800` | |
|
|
135
|
+
| `colors.grapeSoda100` | `base.magenta50` | `--cnvs-base-palette-magenta-50` | |
|
|
136
|
+
| `colors.grapeSoda200` | `base.magenta200` | `--cnvs-base-palette-magenta-200` | |
|
|
137
|
+
| `colors.grapeSoda300` | `base.purple400` | `--cnvs-base-palette-purple-400` | |
|
|
138
|
+
| `colors.grapeSoda400` | `base.purple500` | `--cnvs-base-palette-purple-500` | |
|
|
139
|
+
| `colors.grapeSoda500` | `base.purple600` | `--cnvs-base-palette-purple-600` | |
|
|
140
|
+
| `colors.grapeSoda600` | `base.purple800` | `--cnvs-base-palette-purple-800` | |
|
|
141
|
+
| `colors.pomegranate100` | `base.magenta50` | `--cnvs-base-palette-magenta-50` | |
|
|
142
|
+
| `colors.pomegranate200` | `base.magenta100` | `--cnvs-base-palette-magenta-100` | |
|
|
143
|
+
| `colors.pomegranate300` | `base.magenta500` | `--cnvs-base-palette-magenta-500` | |
|
|
144
|
+
| `colors.pomegranate400` | `base.magenta400` | `--cnvs-base-palette-magenta-400` | |
|
|
145
|
+
| `colors.pomegranate500` | `base.red700` | `--cnvs-base-palette-red-700` | |
|
|
146
|
+
| `colors.pomegranate600` | `base.red800` | `--cnvs-base-palette-red-800` | |
|
|
147
|
+
| `colors.fruitPunch100` | `base.red25` | `--cnvs-base-palette-red-25` | |
|
|
148
|
+
| `colors.fruitPunch200` | `base.red200` | `--cnvs-base-palette-red-200` | |
|
|
149
|
+
| `colors.fruitPunch300` | `base.red300` | `--cnvs-base-palette-red-300` | |
|
|
150
|
+
| `colors.fruitPunch400` | `base.red400` | `--cnvs-base-palette-red-400` | |
|
|
151
|
+
| `colors.fruitPunch500` | `base.red400` | `--cnvs-base-palette-red-400` | |
|
|
152
|
+
| `colors.fruitPunch600` | `base.red700` | `--cnvs-base-palette-red-700` | |
|
|
153
|
+
| `colors.rootBeer100` | `base.coral25` | `--cnvs-base-palette-coral-25` | |
|
|
154
|
+
| `colors.rootBeer200` | `base.coral100` | `--cnvs-base-palette-coral-100` | |
|
|
155
|
+
| `colors.rootBeer300` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
|
|
156
|
+
| `colors.rootBeer400` | `base.coral200` | `--cnvs-base-palette-coral-200` | |
|
|
157
|
+
| `colors.rootBeer500` | `base.amber900` | `--cnvs-base-palette-amber-900` | |
|
|
158
|
+
| `colors.rootBeer600` | `base.amber950` | `--cnvs-base-palette-amber-950` | |
|
|
159
|
+
| `colors.toastedMarshmallow100` | `base.amber25` | `--cnvs-base-palette-amber-25` | |
|
|
160
|
+
| `colors.toastedMarshmallow200` | `base.orange100` | `--cnvs-base-palette-orange-100` | |
|
|
161
|
+
| `colors.toastedMarshmallow300` | `base.orange200` | `--cnvs-base-palette-orange-200` | |
|
|
162
|
+
| `colors.toastedMarshmallow400` | `base.orange300` | `--cnvs-base-palette-orange-300` | |
|
|
163
|
+
| `colors.toastedMarshmallow500` | `base.amber500` | `--cnvs-base-palette-amber-500` | |
|
|
164
|
+
| `colors.toastedMarshmallow600` | `base.amber600` | `--cnvs-base-palette-amber-600` | |
|
|
165
|
+
| `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 |
|
|
166
|
+
| `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 |
|
|
167
|
+
| `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 |
|
|
168
|
+
| `colors.licorice400` | `base.slate700` | `--cnvs-base-palette-slate-700` | sys.color.fg.muted.strong |
|
|
169
|
+
| `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 |
|
|
170
|
+
| `colors.licorice600` | `base.slate900` | `--cnvs-base-palette-slate-900` | |
|
|
171
|
+
| `colors.blackPepper100` | `base.neutral500` | `--cnvs-base-palette-neutral-500` | |
|
|
172
|
+
| `colors.blackPepper200` | `base.neutral700` | `--cnvs-base-palette-neutral-700` | |
|
|
173
|
+
| `colors.blackPepper300` | `base.neutral900` | `--cnvs-base-palette-neutral-900` | sys.color.fg.default |
|
|
174
|
+
| `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 |
|
|
175
|
+
| `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 |
|
|
176
|
+
| `colors.blackPepper600` | `base.neutral1000` | `--cnvs-base-palette-neutral-1000` | |
|
|
177
|
+
| `colors.frenchVanilla100` | `base.neutral0` | `--cnvs-base-palette-neutral-0` | sys.color.bg.default <br/> sys.color.fg.default <br/> sys.color.border.default |
|
|
178
|
+
| `colors.frenchVanilla200` | `base.neutral100` | `--cnvs-base-palette-neutral-100` | |
|
|
179
|
+
| `colors.frenchVanilla300` | `base.neutral200` | `--cnvs-base-palette-neutral-200` | |
|
|
180
|
+
| `colors.frenchVanilla400` | `base.neutral300` | `--cnvs-base-palette-neutral-300` | |
|
|
181
|
+
| `colors.frenchVanilla500` | `base.neutral400` | `--cnvs-base-palette-neutral-400` | |
|
|
182
|
+
| `colors.frenchVanilla600` | `base.neutral500` | `--cnvs-base-palette-neutral-500` | |
|
|
183
|
+
| `colors.soap100` | `base.slate25` | `--cnvs-base-palette-slate-25` | sys.color.bg.alt.softer |
|
|
184
|
+
| `colors.soap200` | `base.slate50` | `--cnvs-base-palette-slate-50` | sys.color.bg.alt.soft |
|
|
185
|
+
| `colors.soap300` | `base.slate100` | `--cnvs-base-palette-slate-100` | sys.color.bg.alt.default <br/> sys.color.border.input.inverse |
|
|
186
|
+
| `colors.soap400` | `base.slate200` | `--cnvs-base-palette-slate-200` | sys.color.bg.alt.strong <br/> sys.color.border.divider |
|
|
187
|
+
| `colors.soap500` | `base.slate300` | `--cnvs-base-palette-slate-300` | sys.color.bg.alt.stronger <br/> sys.color.border.container |
|
|
188
|
+
| `colors.soap600` | `base.slate300` | `--cnvs-base-palette-slate-300` | |
|
|
189
|
+
| `colors.coconut100` | `base.coconut100` (deprecated) | `--cnvs-base-palette-coconut-100` | |
|
|
190
|
+
| `colors.coconut200` | `base.coconut200` (deprecated) | `--cnvs-base-palette-coconut-200` | |
|
|
191
|
+
| `colors.coconut300` | `base.coconut300` (deprecated) | `--cnvs-base-palette-coconut-300` | |
|
|
192
|
+
| `colors.coconut400` | `base.coconut400` (deprecated) | `--cnvs-base-palette-coconut-400` | |
|
|
193
|
+
| `colors.coconut500` | `base.coconut500` (deprecated) | `--cnvs-base-palette-coconut-500` | |
|
|
194
|
+
| `colors.coconut600` | `base.coconut600` (deprecated) | `--cnvs-base-palette-coconut-600` | |
|
|
195
|
+
| `colors.cappuccino100` | `base.cappuccino100` (deprecated) | `--cnvs-base-palette-cappuccino-100` | |
|
|
196
|
+
| `colors.cappuccino200` | `base.cappuccino200` (deprecated) | `--cnvs-base-palette-cappuccino-200` | |
|
|
197
|
+
| `colors.cappuccino300` | `base.cappuccino300` (deprecated) | `--cnvs-base-palette-cappuccino-300` | |
|
|
198
|
+
| `colors.cappuccino400` | `base.cappuccino400` (deprecated) | `--cnvs-base-palette-cappuccino-400` | |
|
|
199
|
+
| `colors.cappuccino500` | `base.cappuccino500` (deprecated) | `--cnvs-base-palette-cappuccino-500` | |
|
|
200
|
+
| `colors.cappuccino600` | `base.cappuccino600` (deprecated) | `--cnvs-base-palette-cappuccino-600` | |
|
|
201
|
+
| `colors.dragonFruit100` | `base.purple25` | `--cnvs-base-palette-purple-25` | |
|
|
202
|
+
| `colors.dragonFruit200` | `base.purple100` | `--cnvs-base-palette-purple-100` | |
|
|
203
|
+
| `colors.dragonFruit300` | `base.indigo500` | `--cnvs-base-palette-indigo-500` | |
|
|
204
|
+
| `colors.dragonFruit400` | `base.indigo600` | `--cnvs-base-palette-indigo-600` | |
|
|
205
|
+
| `colors.dragonFruit500` | `base.indigo700` | `--cnvs-base-palette-indigo-700` | |
|
|
206
|
+
| `colors.dragonFruit600` | `base.indigo800` | `--cnvs-base-palette-indigo-800` | |
|
|
69
207
|
|
|
70
208
|
## Brand Color Migration
|
|
71
209
|
|
|
@@ -194,7 +332,7 @@ backgroundColor: colors.frenchVanilla100;
|
|
|
194
332
|
|
|
195
333
|
// New (Direct mapping)
|
|
196
334
|
import {base} from '@workday/canvas-tokens-web';
|
|
197
|
-
backgroundColor: cssVar(base.
|
|
335
|
+
backgroundColor: cssVar(base.neutral0);
|
|
198
336
|
```
|
|
199
337
|
|
|
200
338
|
**Example 3: Brand Color Migration**
|
|
@@ -5,7 +5,10 @@ import {StorybookInformationHighlight} from './StorybookInformationHighlight';
|
|
|
5
5
|
# Canvas Kit Token Migration Guide: Moving to `@workday/canvas-tokens-web`
|
|
6
6
|
|
|
7
7
|
Canvas Kit v10+ introduces a new token system that replaces the old JavaScript-based tokens from
|
|
8
|
-
`@workday/canvas-kit-react/tokens` with CSS variables from `@workday/canvas-tokens-web`.
|
|
8
|
+
`@workday/canvas-kit-react/tokens` with CSS variables from `@workday/canvas-tokens-web`. Canvas Kit
|
|
9
|
+
is using tokens from `@workday/canvas-tokens-web` v3 that introduced a new color palette with more
|
|
10
|
+
clear names (like `red.600`, `blue100`) instead of the previous "fruity" palette (like `watermelon`,
|
|
11
|
+
`blueberry`, etc).
|
|
9
12
|
|
|
10
13
|
## Why Migrate?
|
|
11
14
|
|
|
@@ -37,8 +40,8 @@ LLM consumption.
|
|
|
37
40
|
migration
|
|
38
41
|
|
|
39
42
|
<DownloadLLMFile
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
rawFileDir="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-token-migration-14.0.0.txt"
|
|
44
|
+
filenames="llm-token-migration-14.0.0.txt"
|
|
42
45
|
/>
|
|
43
46
|
|
|
44
47
|
## Core Principles
|
|
@@ -100,7 +103,7 @@ Use system tokens over base tokens whenever possible for better theming support:
|
|
|
100
103
|
backgroundColor: system.color.bg.default;
|
|
101
104
|
|
|
102
105
|
// Avoid - Hard-coded base value
|
|
103
|
-
backgroundColor: base.
|
|
106
|
+
backgroundColor: base.neutral0;
|
|
104
107
|
```
|
|
105
108
|
|
|
106
109
|
### Use Complete Type Levels
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1252-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",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1252-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1252-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1252-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1252-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "80e4dc6c529068c00bce5b14c625ea69a6ee63c2"
|
|
65
65
|
}
|