@workday/canvas-kit-docs 14.0.0-alpha.1246-next.0 → 14.0.0-alpha.1251-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 +25 -9
- 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 +45 -21
- 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": {},
|
|
@@ -193552,8 +193552,8 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
193552
193552
|
"members": [],
|
|
193553
193553
|
"returnType": {
|
|
193554
193554
|
"kind": "symbol",
|
|
193555
|
-
"name": "
|
|
193556
|
-
"value": "
|
|
193555
|
+
"name": "CompatibleCSSObject",
|
|
193556
|
+
"value": "CompatibleCSSObject"
|
|
193557
193557
|
}
|
|
193558
193558
|
}
|
|
193559
193559
|
},
|
|
@@ -193728,9 +193728,25 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
193728
193728
|
],
|
|
193729
193729
|
"members": [],
|
|
193730
193730
|
"returnType": {
|
|
193731
|
-
"kind": "
|
|
193732
|
-
"
|
|
193733
|
-
|
|
193731
|
+
"kind": "object",
|
|
193732
|
+
"properties": [
|
|
193733
|
+
{
|
|
193734
|
+
"kind": "property",
|
|
193735
|
+
"name": "boxShadow",
|
|
193736
|
+
"type": {
|
|
193737
|
+
"kind": "primitive",
|
|
193738
|
+
"value": "string"
|
|
193739
|
+
},
|
|
193740
|
+
"description": "",
|
|
193741
|
+
"declarations": [
|
|
193742
|
+
{
|
|
193743
|
+
"name": "boxShadow",
|
|
193744
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/focusRing.ts"
|
|
193745
|
+
}
|
|
193746
|
+
],
|
|
193747
|
+
"tags": {}
|
|
193748
|
+
}
|
|
193749
|
+
]
|
|
193734
193750
|
}
|
|
193735
193751
|
}
|
|
193736
193752
|
},
|
|
@@ -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
|
},
|
|
@@ -8,6 +8,7 @@ any questions.
|
|
|
8
8
|
|
|
9
9
|
- [Codemod](#codemod)
|
|
10
10
|
- [Instructions](#instructions)
|
|
11
|
+
- [Tokens](#tokens)
|
|
11
12
|
- [Caution Naming](#caution-naming)
|
|
12
13
|
- [Theming](#theming)
|
|
13
14
|
- [Canvas Provider](#canvas-provider-)
|
|
@@ -105,24 +106,47 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
105
106
|
> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
|
|
106
107
|
> your project conventions.
|
|
107
108
|
|
|
109
|
+
## Tokens
|
|
110
|
+
|
|
111
|
+
Canvas Kit v14 now uses `@workday/canvas-tokens-web` v3, which introduces new color palettes and
|
|
112
|
+
replaces the old "fruity" color names (for example, use `red` instead of `cinnamon`, `blue` instead
|
|
113
|
+
of `blueberry`, and `green` instead of `greenApple`). We strongly recommend upgrading to
|
|
114
|
+
`@workday/canvas-tokens-web` v3, as using older versions will not match the new brand guidelines or
|
|
115
|
+
color system. Although this dependency upgrade is not required, we've offered migration guides and
|
|
116
|
+
codemods separately from the v14 upgrade so that teams can upgrade when they can.
|
|
117
|
+
|
|
118
|
+
> **Note:** v3 Tokens should be backwards compatible with older versions of Canvas Kit.
|
|
119
|
+
|
|
120
|
+
Follow these guides to migrate:
|
|
121
|
+
|
|
122
|
+
- If you are still using our old tokens from (`@workday/canvas-kit-react/tokens`): Migrate from
|
|
123
|
+
`@workday/canvas-kit-react/tokens` to `@workday/canvas-tokens-web` v3:
|
|
124
|
+
[Migration Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-overview--docs)
|
|
125
|
+
- [v2 to v3 Migration Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs)
|
|
126
|
+
|
|
127
|
+
> 🤖 The `v14-tokens` codemod will automatically migrate your tokens, whether you're upgrading from
|
|
128
|
+
> old tokens or from v2 to v3. Read
|
|
129
|
+
> [the codemod instructions](https://workday.github.io/canvas-kit/?path=/docs/guides-tokens-migration-codemod--docs)
|
|
130
|
+
|
|
108
131
|
## Caution Naming
|
|
109
132
|
|
|
110
133
|
**PR:** [#3462](https://github.com/Workday/canvas-kit/pull/3462)
|
|
111
134
|
|
|
112
|
-
To better align with the brand refresh, Alert and Warning states are being renamed to Caution for
|
|
135
|
+
To better align with the brand refresh, Alert and Warning states are being renamed to Caution for
|
|
136
|
+
better semantics.
|
|
113
137
|
|
|
114
|
-
This change mostly affects how you pass an error state to our input components. In most cases, our
|
|
115
|
-
ensure correct accessiblity.
|
|
138
|
+
This change mostly affects how you pass an error state to our input components. In most cases, our
|
|
139
|
+
inputs components should be used with our `FormField` component to ensure correct accessiblity.
|
|
116
140
|
|
|
117
141
|
**Before in v13**
|
|
118
142
|
|
|
119
143
|
```tsx
|
|
120
144
|
<FormField error="alert">
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
145
|
+
<FormField.Label>First Name</FormField.Label>
|
|
146
|
+
<FormField.Field>
|
|
147
|
+
<FormField.Input as={TextInput} value={value} onChange={handleChange} />
|
|
148
|
+
<FormField.Hint>Cannot contain numbers</FormField.Hint>
|
|
149
|
+
</FormField.Field>
|
|
126
150
|
</FormField>
|
|
127
151
|
```
|
|
128
152
|
|
|
@@ -130,15 +154,16 @@ ensure correct accessiblity.
|
|
|
130
154
|
|
|
131
155
|
```tsx
|
|
132
156
|
<FormField error="caution">
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
157
|
+
<FormField.Label>First Name</FormField.Label>
|
|
158
|
+
<FormField.Field>
|
|
159
|
+
<FormField.Input as={TextInput} value={value} onChange={handleChange} />
|
|
160
|
+
<FormField.Hint>Cannot contain numbers</FormField.Hint>
|
|
161
|
+
</FormField.Field>
|
|
138
162
|
</FormField>
|
|
139
163
|
```
|
|
140
164
|
|
|
141
|
-
If you are using the error type either from our `Common` package or the one exposed from the
|
|
165
|
+
If you are using the error type either from our `Common` package or the one exposed from the
|
|
166
|
+
component, the naming as also changed.
|
|
142
167
|
|
|
143
168
|
**Before in v13**
|
|
144
169
|
|
|
@@ -171,7 +196,8 @@ someFunction(ErrorType.Caution);
|
|
|
171
196
|
<TextArea error={TextArea.ErrorType.Caution} />
|
|
172
197
|
```
|
|
173
198
|
|
|
174
|
-
> 🤖 The codemod will handle the change of `ErrorType.Alert` to `ErrorType.Caution` and
|
|
199
|
+
> 🤖 The codemod will handle the change of `ErrorType.Alert` to `ErrorType.Caution` and
|
|
200
|
+
> `error="alert"` to `error="caution"`.
|
|
175
201
|
|
|
176
202
|
## Theming
|
|
177
203
|
|
|
@@ -331,8 +357,6 @@ The `TertiaryButton` component no longer supports the `isThemable` prop. To cust
|
|
|
331
357
|
of `TertiaryButton`, use the `cs` prop for custom styles or the `colors` prop for palette-based
|
|
332
358
|
color overrides.
|
|
333
359
|
|
|
334
|
-
|
|
335
|
-
|
|
336
360
|
The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
|
|
337
361
|
our new brand direction.
|
|
338
362
|
|
|
@@ -768,7 +792,7 @@ import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
|
|
|
768
792
|
<TextArea orientation="vertical">
|
|
769
793
|
<TextArea.Label>Leave a review</TextArea.Label>
|
|
770
794
|
<TextArea.Field onChange={handleChange} value={value} />
|
|
771
|
-
</TextArea
|
|
795
|
+
</TextArea>;
|
|
772
796
|
```
|
|
773
797
|
|
|
774
798
|
**After in v14**
|
|
@@ -782,7 +806,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
|
782
806
|
<FormField.Field>
|
|
783
807
|
<FormField.Input as={TextArea} onChange={handleChange} value={value} />
|
|
784
808
|
</FormField.Field>
|
|
785
|
-
</FormField
|
|
809
|
+
</FormField>;
|
|
786
810
|
```
|
|
787
811
|
|
|
788
812
|
### Text Input (preview)
|
|
@@ -801,7 +825,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
|
801
825
|
<TextInput orientation="vertical">
|
|
802
826
|
<TextInput.Label>Email</TextInput.Label>
|
|
803
827
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
804
|
-
</TextInput
|
|
828
|
+
</TextInput>;
|
|
805
829
|
```
|
|
806
830
|
|
|
807
831
|
**After in v14**
|
|
@@ -815,7 +839,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
|
815
839
|
<FormField.Field>
|
|
816
840
|
<FormField.Input as={TextInput} onChange={handleChange} value={value} />
|
|
817
841
|
</FormField.Field>
|
|
818
|
-
</FormField
|
|
842
|
+
</FormField>;
|
|
819
843
|
```
|
|
820
844
|
|
|
821
845
|
---
|
|
@@ -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.1251-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.1251-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1251-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1251-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1251-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": "74f6a6aa07c8b1689b37208aed829b22b162acf0"
|
|
65
65
|
}
|