@workday/canvas-kit-docs 14.0.0-alpha.1140-next.0 → 14.0.0-alpha.1146-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.
Files changed (30) hide show
  1. package/dist/es6/lib/docs.js +8022 -4595
  2. package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
  3. package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
  4. package/dist/es6/mdx/installBlock.d.ts.map +1 -1
  5. package/dist/es6/mdx/installBlock.js +3 -2
  6. package/dist/es6/mdx/welcomePage.js +4 -4
  7. package/dist/mdx/11.0-UPGRADE-GUIDE.mdx +36 -60
  8. package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +25 -18
  9. package/dist/mdx/preview-react/pill/examples/CustomStyles.tsx +25 -17
  10. package/dist/mdx/preview-react/radio/examples/Custom.tsx +2 -2
  11. package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx +2 -2
  12. package/dist/mdx/preview-react/side-panel/examples/ExternalControl.tsx +2 -2
  13. package/dist/mdx/preview-react/side-panel/examples/Variant.tsx +2 -2
  14. package/dist/mdx/react/_examples/mdx/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx +4 -4
  15. package/dist/mdx/react/_examples/mdx/examples/GlobalHeader.tsx +2 -2
  16. package/dist/mdx/react/_examples/mdx/examples/SidePanelWithNavigation.tsx +2 -2
  17. package/dist/mdx/react/_examples/mdx/examples/SidePanelWithOverlay.tsx +2 -2
  18. package/dist/mdx/react/_examples/mdx/examples/Table/WithSelectableRows.tsx +3 -3
  19. package/dist/mdx/react/_examples/mdx/examples/common/FilterListWithLiveStatus.tsx +3 -3
  20. package/dist/mdx/react/_examples/mdx/examples/common/VisibleLiveRegion.tsx +3 -3
  21. package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx +7 -7
  22. package/dist/mdx/react/badge/examples/Basic.tsx +3 -3
  23. package/dist/mdx/react/badge/examples/CustomLimit.tsx +5 -5
  24. package/dist/mdx/react/badge/examples/NotificationBadge.tsx +1 -1
  25. package/dist/mdx/react/button/button/examples/CustomStyles.tsx +8 -8
  26. package/dist/mdx/react/form-field/FormField.mdx +1 -1
  27. package/dist/mdx/react/icon/examples/Overview.tsx +2 -2
  28. package/dist/mdx/react/table/examples/RightToLeft.tsx +1 -1
  29. package/dist/mdx/react/text/examples/LabelText/Disabled.tsx +2 -2
  30. package/package.json +7 -7
package/dist/es6/lib/stackblitzFiles/packageJSONFile.js CHANGED
@@ -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.1.2",
22
- "@workday/canvas-kit-preview-react": "13.1.2",
23
- "@workday/canvas-kit-react": "13.1.2",
24
- "@workday/canvas-kit-react-fonts": "^13.1.2",
25
- "@workday/canvas-kit-styling": "13.1.2",
21
+ "@workday/canvas-kit-labs-react": "13.1.4",
22
+ "@workday/canvas-kit-preview-react": "13.1.4",
23
+ "@workday/canvas-kit-react": "13.1.4",
24
+ "@workday/canvas-kit-react-fonts": "^13.1.4",
25
+ "@workday/canvas-kit-styling": "13.1.4",
26
26
  "@workday/canvas-system-icons-web": "3.0.22",
27
27
  "@workday/canvas-tokens-web": "2.0.0"
28
28
  },
package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts CHANGED
@@ -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.1.2",
22
- "@workday/canvas-kit-preview-react": "13.1.2",
23
- "@workday/canvas-kit-react": "13.1.2",
24
- "@workday/canvas-kit-react-fonts": "^13.1.2",
25
- "@workday/canvas-kit-styling": "13.1.2",
21
+ "@workday/canvas-kit-labs-react": "13.1.4",
22
+ "@workday/canvas-kit-preview-react": "13.1.4",
23
+ "@workday/canvas-kit-react": "13.1.4",
24
+ "@workday/canvas-kit-react-fonts": "^13.1.4",
25
+ "@workday/canvas-kit-styling": "13.1.4",
26
26
  "@workday/canvas-system-icons-web": "3.0.22",
27
27
  "@workday/canvas-tokens-web": "2.0.0"
28
28
  },
package/dist/es6/mdx/installBlock.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CA8BrE,CAAC"}
1
+ {"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CA8BrE,CAAC"}
package/dist/es6/mdx/installBlock.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React from 'react';
3
3
  import { Flex } from '@workday/canvas-kit-react/layout';
4
- import { colors } from '@workday/canvas-kit-react/tokens';
4
+ import { system } from '@workday/canvas-tokens-web';
5
5
  import { PrimaryButton } from '@workday/canvas-kit-react/button';
6
+ import { cssVar } from '@workday/canvas-kit-styling';
6
7
  export const InstallBlock = ({ command, packageName }) => {
7
8
  const commandRef = React.useRef(null);
8
9
  const [copied, setCopied] = React.useState(false);
@@ -15,5 +16,5 @@ export const InstallBlock = ({ command, packageName }) => {
15
16
  navigator.clipboard.writeText(commandRef.current.innerText);
16
17
  }
17
18
  };
18
- return (_jsxs(Flex, { padding: "xs", backgroundColor: colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap', children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: { color: colors.blueberry200 }, children: command }), ' ', _jsx("span", { style: { color: colors.frenchVanilla100 }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
19
+ return (_jsxs(Flex, { padding: "xs", backgroundColor: system.color.bg.contrast.default, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: { color: cssVar(system.color.fg.primary.soft) }, children: command }), ' ', _jsx("span", { style: { color: cssVar(system.color.fg.inverse) }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
19
20
  };
package/dist/es6/mdx/welcomePage.js CHANGED
@@ -8,7 +8,7 @@ import { Card } from '@workday/canvas-kit-react/card';
8
8
  import { ExternalHyperlink, Hyperlink } from '@workday/canvas-kit-react/button';
9
9
  import { rocketIcon, tokensIcon, shapesIcon } from '@workday/canvas-system-icons-web';
10
10
  import { SystemIcon } from '@workday/canvas-kit-react/icon';
11
- import { system, base } from '@workday/canvas-tokens-web';
11
+ import { system } from '@workday/canvas-tokens-web';
12
12
  import { createStyles } from '@workday/canvas-kit-styling';
13
13
  // @ts-ignore: Cannot find module error
14
14
  import { version } from '../../../lerna.json';
@@ -24,7 +24,7 @@ const textStyles = createStyles({
24
24
  lineHeight: '5vmin',
25
25
  });
26
26
  const versionStyles = createStyles({
27
- fontWeight: base.fontFamily100,
27
+ ...system.type.body.medium,
28
28
  marginInlineStart: system.space.x4,
29
29
  });
30
30
  const imageStyles = createStyles({
@@ -32,7 +32,7 @@ const imageStyles = createStyles({
32
32
  height: 'auto',
33
33
  });
34
34
  const borderStyles = createStyles({
35
- borderBottom: `1px solid ${base.blueberry200}`,
35
+ borderBottom: `1px solid ${system.color.border.primary.default}`,
36
36
  marginBottom: system.space.x2,
37
37
  });
38
38
  const gridStyles = createStyles({
@@ -45,5 +45,5 @@ const linkStyles = createStyles({
45
45
  marginTop: system.space.x3,
46
46
  });
47
47
  export const WelcomePage = () => {
48
- return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsxs(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' }, children: [_jsx(Text, { typeLevel: "title.medium", cs: textStyles, children: "Canvas Kit" }), _jsxs(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles], children: ["v", version] })] }), _jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", className: borderStyles, children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.cantaloupe400, colorHover: base.cantaloupe400, icon: rocketIcon, size: 60 }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.blueberry400, icon: tokensIcon, colorHover: base.blueberry400, size: 60 }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.greenApple400, icon: shapesIcon, size: 60, colorHover: base.greenApple400 }), _jsx(Card.Heading, { children: "Assets" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Assets are graphics which help communicate meaning or highlight areas of interaction to our users." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview", children: "View Assets" })] })] }), _jsx(Heading, { size: "medium", className: borderStyles, children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
48
+ return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsxs(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' }, children: [_jsx(Text, { typeLevel: "title.medium", cs: textStyles, children: "Canvas Kit" }), _jsxs(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles], children: ["v", version] })] }), _jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", className: borderStyles, children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: system.color.static.amber.default, colorHover: system.color.static.amber.default, icon: rocketIcon, size: 60 }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: system.color.fg.primary.default, icon: tokensIcon, colorHover: system.color.fg.primary.default, size: 60 }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: system.color.static.green.default, icon: shapesIcon, size: 60, colorHover: system.color.static.green.default }), _jsx(Card.Heading, { children: "Assets" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Assets are graphics which help communicate meaning or highlight areas of interaction to our users." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview", children: "View Assets" })] })] }), _jsx(Heading, { size: "medium", className: borderStyles, children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
49
49
  };
package/dist/mdx/11.0-UPGRADE-GUIDE.mdx CHANGED
@@ -262,8 +262,8 @@ Components affected:
262
262
  <Table.Cell />
263
263
  <Table.Cell>disabled</Table.Cell>
264
264
  <Table.Cell>borderColor</Table.Cell>
265
- <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
266
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
265
+ <Table.Cell>soap600</Table.Cell>
266
+ <Table.Cell >
267
267
  licorice100
268
268
  </Table.Cell>
269
269
  </Table.Row>
@@ -272,8 +272,8 @@ Components affected:
272
272
  <Table.Cell>Inverse</Table.Cell>
273
273
  <Table.Cell>disabled</Table.Cell>
274
274
  <Table.Cell>borderColor</Table.Cell>
275
- <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
276
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
275
+ <Table.Cell>soap600</Table.Cell>
276
+ <Table.Cell>
277
277
  licorice100
278
278
  </Table.Cell>
279
279
  </Table.Row>
@@ -282,8 +282,8 @@ Components affected:
282
282
  <Table.Cell />
283
283
  <Table.Cell>disabled</Table.Cell>
284
284
  <Table.Cell>backgroundColor</Table.Cell>
285
- <Table.Cell cs={{backgroundColor: cssVar(brand.error.light)}}>error.light</Table.Cell>
286
- <Table.Cell cs={{backgroundColor: 'rgba(222,46,33,0.4)'}}>error.base</Table.Cell>
285
+ <Table.Cell>error.light</Table.Cell>
286
+ <Table.Cell>error.base</Table.Cell>
287
287
  </Table.Row>
288
288
  <Table.Row>
289
289
  <Table.Cell>DeleteButton</Table.Cell>
@@ -298,8 +298,8 @@ Components affected:
298
298
  <Table.Cell />
299
299
  <Table.Cell>disabled</Table.Cell>
300
300
  <Table.Cell>borderColor</Table.Cell>
301
- <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
302
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
301
+ <Table.Cell>soap600</Table.Cell>
302
+ <Table.Cell>
303
303
  licorice100
304
304
  </Table.Cell>
305
305
  </Table.Row>
@@ -308,10 +308,8 @@ Components affected:
308
308
  <Table.Cell>Inverse</Table.Cell>
309
309
  <Table.Cell>focus</Table.Cell>
310
310
  <Table.Cell>border</Table.Cell>
311
- <Table.Cell cs={{color: cssVar(base.blackPepper400), backgroundColor: cssVar(base.soap400)}}>
312
- soap400
313
- </Table.Cell>
314
- <Table.Cell cs={{color: cssVar(base.blackPepper400), backgroundColor: 'transparent'}}>
311
+ <Table.Cell>soap400</Table.Cell>
312
+ <Table.Cell>
315
313
  transparent
316
314
  </Table.Cell>
317
315
  </Table.Row>
@@ -320,10 +318,8 @@ Components affected:
320
318
  <Table.Cell>Inverse</Table.Cell>
321
319
  <Table.Cell>focus</Table.Cell>
322
320
  <Table.Cell>boxShdaow (Inner Color)</Table.Cell>
323
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
324
- blackPepper500
325
- </Table.Cell>
326
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
321
+ <Table.Cell>blackPepper500</Table.Cell>
322
+ <Table.Cell>
327
323
  blackPepper400
328
324
  </Table.Cell>
329
325
  </Table.Row>
@@ -332,10 +328,8 @@ Components affected:
332
328
  <Table.Cell>Inverse</Table.Cell>
333
329
  <Table.Cell>focus</Table.Cell>
334
330
  <Table.Cell>color</Table.Cell>
335
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
336
- blackPepper500
337
- </Table.Cell>
338
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
331
+ <Table.Cell>blackPepper500</Table.Cell>
332
+ <Table.Cell>
339
333
  blackPepper400
340
334
  </Table.Cell>
341
335
  </Table.Row>
@@ -344,10 +338,8 @@ Components affected:
344
338
  <Table.Cell>Inverse</Table.Cell>
345
339
  <Table.Cell>focus</Table.Cell>
346
340
  <Table.Cell>fill</Table.Cell>
347
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
348
- blackPepper500
349
- </Table.Cell>
350
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
341
+ <Table.Cell>blackPepper500</Table.Cell>
342
+ <Table.Cell>
351
343
  blackPepper400
352
344
  </Table.Cell>
353
345
  </Table.Row>
@@ -356,10 +348,8 @@ Components affected:
356
348
  <Table.Cell>transparent</Table.Cell>
357
349
  <Table.Cell/>
358
350
  <Table.Cell>backgroundColor</Table.Cell>
359
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
360
- blackPepper600
361
- </Table.Cell>
362
- <Table.Cell cs={{backgroundColor: cssVar(system.color.bg.translucent), color: cssVar(base.frenchVanilla100)}}>
351
+ <Table.Cell>blackPepper600</Table.Cell>
352
+ <Table.Cell>
363
353
  rgba(0,0,0,.84)
364
354
  </Table.Cell>
365
355
  </Table.Row>
@@ -378,8 +368,8 @@ Components affected:
378
368
  <Table.Cell>Checked and Disabled</Table.Cell>
379
369
  <Table.Cell/>
380
370
  <Table.Cell>backgroundColor, opacity</Table.Cell>
381
- <Table.Cell cs={{backgroundColor: cssVar(base.blueberry200)}}>blueberry200</Table.Cell>
382
- <Table.Cell cs={{backgroundColor: 'rgba(8,117,225,.3)'}}>
371
+ <Table.Cell>blueberry200</Table.Cell>
372
+ <Table.Cell>
383
373
  backgroundColor: brand.primary.base
384
374
  opacity: system.opacity.disabled
385
375
  </Table.Cell>
@@ -389,36 +379,32 @@ Components affected:
389
379
  <Table.Cell />
390
380
  <Table.Cell />
391
381
  <Table.Cell>borderColor</Table.Cell>
392
- <Table.Cell cs={{backgroundColor: cssVar(base.soap400)}}>soap400</Table.Cell>
393
- <Table.Cell cs={{backgroundColor: cssVar(base.soap500)}}>soap500</Table.Cell>
382
+ <Table.Cell>soap400</Table.Cell>
383
+ <Table.Cell>soap500</Table.Cell>
394
384
  </Table.Row>
395
385
  <Table.Row>
396
386
  <Table.Cell>TertiaryButton</Table.Cell>
397
387
  <Table.Cell />
398
388
  <Table.Cell>hover</Table.Cell>
399
389
  <Table.Cell>backgroundColor</Table.Cell>
400
- <Table.Cell cs={{backgroundColor: cssVar(base.soap200)}}>soap200</Table.Cell>
401
- <Table.Cell cs={{backgroundColor: cssVar(base.soap300)}}>soap300</Table.Cell>
390
+ <Table.Cell>soap200</Table.Cell>
391
+ <Table.Cell>soap300</Table.Cell>
402
392
  </Table.Row>
403
393
  <Table.Row>
404
394
  <Table.Cell>TertiaryButton</Table.Cell>
405
395
  <Table.Cell />
406
396
  <Table.Cell>active</Table.Cell>
407
397
  <Table.Cell>backgroundColor</Table.Cell>
408
- <Table.Cell cs={{backgroundColor: cssVar(base.soap300)}}>soap300</Table.Cell>
409
- <Table.Cell cs={{backgroundColor: cssVar(base.soap400)}}>soap400</Table.Cell>
398
+ <Table.Cell>soap300</Table.Cell>
399
+ <Table.Cell>soap400</Table.Cell>
410
400
  </Table.Row>
411
401
  <Table.Row>
412
402
  <Table.Cell>TertiaryButton</Table.Cell>
413
403
  <Table.Cell />
414
404
  <Table.Cell>active</Table.Cell>
415
405
  <Table.Cell>color</Table.Cell>
416
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(brand.primary.dark)}}>
417
- primary.dark
418
- </Table.Cell>
419
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(brand.primary.darkest)}}>
420
- primary.darkest
421
- </Table.Cell>
406
+ <Table.Cell>primary.dark</Table.Cell>
407
+ <Table.Cell>primary.darkest</Table.Cell>
422
408
  </Table.Row>
423
409
  <Table.Row>
424
410
  <Table.Cell>TertiaryButton</Table.Cell>
@@ -433,42 +419,32 @@ Components affected:
433
419
  <Table.Cell />
434
420
  <Table.Cell>focus</Table.Cell>
435
421
  <Table.Cell>fill</Table.Cell>
436
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
437
- blackPepper500
438
- </Table.Cell>
439
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
440
- blackPepper400
441
- </Table.Cell>
422
+ <Table.Cell>blackPepper500</Table.Cell>
423
+ <Table.Cell>blackPepper400</Table.Cell>
442
424
  </Table.Row>
443
425
  <Table.Row>
444
426
  <Table.Cell>TertiaryButton (Icon Only)</Table.Cell>
445
427
  <Table.Cell />
446
428
  <Table.Cell>hover</Table.Cell>
447
429
  <Table.Cell>fill</Table.Cell>
448
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
449
- blackPepper500
450
- </Table.Cell>
451
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper400)}}>
452
- blackPepper400
453
- </Table.Cell>
430
+ <Table.Cell>blackPepper500</Table.Cell>
431
+ <Table.Cell>blackPepper400</Table.Cell>
454
432
  </Table.Row>
455
433
  <Table.Row>
456
434
  <Table.Cell>TextArea</Table.Cell>
457
435
  <Table.Cell />
458
436
  <Table.Cell>disabled</Table.Cell>
459
437
  <Table.Cell>borderColor</Table.Cell>
460
- <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
461
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
462
- licorice100
463
- </Table.Cell>
438
+ <Table.Cell>soap600</Table.Cell>
439
+ <Table.Cell>licorice100</Table.Cell>
464
440
  </Table.Row>
465
441
  <Table.Row>
466
442
  <Table.Cell>TextInput</Table.Cell>
467
443
  <Table.Cell />
468
444
  <Table.Cell>disabled</Table.Cell>
469
445
  <Table.Cell>borderColor</Table.Cell>
470
- <Table.Cell cs={{backgroundColor: cssVar(base.soap600)}}>soap600</Table.Cell>
471
- <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.licorice100)}}>
446
+ <Table.Cell>soap600</Table.Cell>
447
+ <Table.Cell>
472
448
  licorice100
473
449
  </Table.Cell>
474
450
  </Table.Row>
package/dist/mdx/14.0-UPGRADE-GUIDE.mdx CHANGED
@@ -10,7 +10,7 @@ any questions.
10
10
  - [Instructions](#instructions)
11
11
  - [Component Updates](#component-updates)
12
12
  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
13
- - [SearchForm](#search-form)
13
+ - [SearchForm](#search-form)
14
14
  - [Troubleshooting](#troubleshooting)
15
15
  - [Glossary](#glossary)
16
16
  - [Main](#main)
@@ -89,6 +89,8 @@ interface has not changed, but Canvas Tokens are now used for dynamic properties
89
89
  The following components have been updated:
90
90
 
91
91
  - `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270)
92
+ - `ColorPicker` (main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
93
+ - `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
92
94
  - `Pagination` (Preview) [#3300](https://github.com/Workday/canvas-kit/pull/3300)
93
95
  - `SearchForm` (Labs) [#3303](https://github.com/Workday/canvas-kit/pull/3303)
94
96
  - `SegmentedControl` (Main) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
@@ -96,13 +98,15 @@ The following components have been updated:
96
98
  - `ToolbarDropdownButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
97
99
  - `ToolbarIconButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
98
100
 
99
- ### Search Form 🚨
101
+ ## Search Form 🚨
100
102
 
101
103
  **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
102
104
 
103
- - `SearchThemeAttributes` type has been updated. Both `boxShadow` and `boxShadowFocus` now only accept a `string` instead of `string | string[]`.
105
+ - `SearchThemeAttributes` type has been updated. Both `boxShadow` and `boxShadowFocus` now only
106
+ accept a `string` instead of `string | string[]`.
104
107
 
105
108
  **Before in v13**
109
+
106
110
  ```tsx
107
111
  const customTheme = {
108
112
  background: colors.cinnamon600,
@@ -126,23 +130,26 @@ const customTheme = {
126
130
 
127
131
  ```tsx
128
132
  const customTheme = {
129
- background: colors.cinnamon600,
130
- backgroundFocus: colors.frenchVanilla100,
131
- placeholderColor: colors.frenchVanilla100,
132
- placeholderColorFocus: colors.blackPepper400,
133
- boxShadow: '10px 5px 5px red',
134
- boxShadowFocus: '10px 5px 5px red'
133
+ background: colors.cinnamon600,
134
+ backgroundFocus: colors.frenchVanilla100,
135
+ placeholderColor: colors.frenchVanilla100,
136
+ placeholderColorFocus: colors.blackPepper400,
137
+ boxShadow: '10px 5px 5px red',
138
+ boxShadowFocus: '10px 5px 5px red',
135
139
  } as SearchThemeAttributes;
136
- //...
137
-
138
- <SearchForm
139
- searchTheme={customTheme}
140
- autocompleteItems={menuItems}
141
- onInputChange={filterMenuItems}
142
- onSubmit={handleSubmit}
143
- />
140
+ //...
141
+
142
+ <SearchForm
143
+ searchTheme={customTheme}
144
+ autocompleteItems={menuItems}
145
+ onInputChange={filterMenuItems}
146
+ onSubmit={handleSubmit}
147
+ />;
144
148
  ```
145
- - `SearchTheme` enum type has been updated to have string values `light`, `dark` and `transparent`. This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1` or `2` to the `searchTheme` prop.
149
+
150
+ - `SearchTheme` enum type has been updated to have string values `light`, `dark` and `transparent`.
151
+ This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1`
152
+ or `2` to the `searchTheme` prop.
146
153
 
147
154
  ## Troubleshooting
148
155
 
package/dist/mdx/preview-react/pill/examples/CustomStyles.tsx CHANGED
@@ -1,33 +1,41 @@
1
1
  import {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-preview-react/pill';
2
2
 
3
3
  import {createStencil} from '@workday/canvas-kit-styling';
4
- import {base} from '@workday/canvas-tokens-web';
4
+ import {system} from '@workday/canvas-tokens-web';
5
5
  import {systemIconStencil} from '@workday/canvas-kit-react/icon';
6
6
 
7
7
  const customPillStencil = createStencil({
8
8
  base: {
9
- [pillStencil.vars.background]: base.berrySmoothie300,
10
- [pillStencil.vars.border]: base.berrySmoothie500,
11
- [pillStencil.vars.label]: base.frenchVanilla100,
12
- [systemIconStencil.vars.color]: base.frenchVanilla100,
13
- [pillCountStencil.vars.backgroundColor]: base.berrySmoothie400,
9
+ [pillStencil.vars.background]: system.color.static.green.default,
10
+ [pillStencil.vars.border]: system.color.static.green.stronger,
11
+ [pillStencil.vars.label]: system.color.static.white,
12
+ [systemIconStencil.vars.color]: system.color.static.white,
13
+ [pillCountStencil.vars.backgroundColor]: system.color.static.green.default,
14
+ [pillCountStencil.vars.borderColor]: system.color.static.green.default,
14
15
 
15
16
  '&:hover, &.hover': {
16
- [pillStencil.vars.background]: base.berrySmoothie400,
17
- [pillStencil.vars.label]: base.frenchVanilla100,
18
- [pillCountStencil.vars.backgroundColor]: base.berrySmoothie500,
19
- [systemIconStencil.vars.color]: base.frenchVanilla100,
17
+ [pillStencil.vars.background]: system.color.static.green.stronger,
18
+ [pillStencil.vars.label]: system.color.static.white,
19
+ [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
20
+ [systemIconStencil.vars.color]: system.color.static.white,
21
+ [pillCountStencil.vars.borderColor]: system.color.static.green.stronger,
20
22
  },
21
23
  '&:active, &.active': {
22
- [pillStencil.vars.background]: base.berrySmoothie400,
23
- [pillStencil.vars.label]: base.frenchVanilla100,
24
- [systemIconStencil.vars.color]: base.frenchVanilla100,
25
- [pillCountStencil.vars.backgroundColor]: base.berrySmoothie500,
24
+ [pillStencil.vars.background]: system.color.static.green.stronger,
25
+ [pillStencil.vars.label]: system.color.static.white,
26
+ [systemIconStencil.vars.color]: system.color.static.white,
27
+ [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
28
+ },
29
+ '&:focus, &.focus, &:focus-visible': {
30
+ [pillStencil.vars.background]: system.color.static.green.stronger,
31
+ [pillStencil.vars.label]: system.color.static.white,
32
+ [systemIconStencil.vars.color]: system.color.static.white,
33
+ [pillCountStencil.vars.backgroundColor]: system.color.static.green.stronger,
26
34
  },
27
35
  '&:disabled, &.disabled': {
28
- [pillStencil.vars.background]: base.berrySmoothie400,
29
- [pillStencil.vars.label]: base.frenchVanilla100,
30
- [systemIconStencil.vars.color]: base.frenchVanilla100,
36
+ [pillStencil.vars.background]: system.color.static.green.default,
37
+ [pillStencil.vars.label]: system.color.static.white,
38
+ [systemIconStencil.vars.color]: system.color.static.white,
31
39
  },
32
40
  },
33
41
  });
package/dist/mdx/preview-react/radio/examples/Custom.tsx CHANGED
@@ -3,14 +3,14 @@ import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
3
3
  import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
5
  import {createStyles, px2rem} from '@workday/canvas-kit-styling';
6
- import {base} from '@workday/canvas-tokens-web';
6
+ import {system} from '@workday/canvas-tokens-web';
7
7
 
8
8
  const styleOverrides = {
9
9
  formfieldInputStyles: createStyles({
10
10
  width: px2rem(200),
11
11
  }),
12
12
  radioGroupLabelTextStyles: createStyles({
13
- color: base.berrySmoothie400,
13
+ color: system.color.fg.default,
14
14
  }),
15
15
  };
16
16
 
package/dist/mdx/preview-react/side-panel/examples/AlwaysOpen.tsx CHANGED
@@ -4,7 +4,7 @@ import {rocketIcon} from '@workday/canvas-accent-icons-web';
4
4
  import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
5
5
  import {Flex} from '@workday/canvas-kit-react/layout';
6
6
  import {Heading, Text} from '@workday/canvas-kit-react/text';
7
- import {base, system} from '@workday/canvas-tokens-web';
7
+ import {system} from '@workday/canvas-tokens-web';
8
8
  import {createStyles, px2rem} from '@workday/canvas-kit-styling';
9
9
 
10
10
  const stylesOverride = {
@@ -21,7 +21,7 @@ const stylesOverride = {
21
21
  paddingX: system.space.x4,
22
22
  }),
23
23
  panelHeading: createStyles({
24
- color: base.licorice500,
24
+ color: system.color.fg.default,
25
25
  }),
26
26
  mainContent: createStyles({
27
27
  alignItems: 'center',
package/dist/mdx/preview-react/side-panel/examples/ExternalControl.tsx CHANGED
@@ -8,7 +8,7 @@ import {Flex} from '@workday/canvas-kit-react/layout';
8
8
  import {Heading, Text} from '@workday/canvas-kit-react/text';
9
9
  import {SecondaryButton} from '@workday/canvas-kit-react/button';
10
10
  import {createStyles, px2rem} from '@workday/canvas-kit-styling';
11
- import {base, system} from '@workday/canvas-tokens-web';
11
+ import {system} from '@workday/canvas-tokens-web';
12
12
 
13
13
  const stylesOverride = {
14
14
  viewport: createStyles({
@@ -20,7 +20,7 @@ const stylesOverride = {
20
20
  paddingX: system.space.x4,
21
21
  }),
22
22
  panelHeading: createStyles({
23
- color: base.licorice500,
23
+ color: system.color.fg.muted.stronger,
24
24
  }),
25
25
  main: createStyles({
26
26
  alignItems: 'center',
package/dist/mdx/preview-react/side-panel/examples/Variant.tsx CHANGED
@@ -5,7 +5,7 @@ import {Flex} from '@workday/canvas-kit-react/layout';
5
5
  import {Heading, Text} from '@workday/canvas-kit-react/text';
6
6
  import {CanvasProvider} from '@workday/canvas-kit-react/common';
7
7
  import {createStyles, px2rem} from '@workday/canvas-kit-styling';
8
- import {base, system} from '@workday/canvas-tokens-web';
8
+ import {system} from '@workday/canvas-tokens-web';
9
9
 
10
10
  // local helper hook for setting content direction;
11
11
  import {useDirection} from './useDirection';
@@ -13,7 +13,7 @@ import {useDirection} from './useDirection';
13
13
  const stylesOverride = {
14
14
  viewport: createStyles({
15
15
  height: px2rem(320),
16
- backgroundColor: base.soap100,
16
+ backgroundColor: system.color.bg.alt.default,
17
17
  }),
18
18
  panel: createStyles({
19
19
  alignItems: 'center',
package/dist/mdx/react/_examples/mdx/examples/AriaLiveRegions/FilterListWithLiveStatus.tsx CHANGED
@@ -5,8 +5,8 @@ import {BodyText, Heading} from '@workday/canvas-kit-react/text';
5
5
  import {Flex} from '@workday/canvas-kit-react/layout';
6
6
  import {FormField} from '@workday/canvas-kit-react/form-field';
7
7
  import {TextInput} from '@workday/canvas-kit-react/text-input';
8
- import {system, base} from '@workday/canvas-tokens-web';
9
- import {createStyles, cssVar, px2rem} from '@workday/canvas-kit-styling';
8
+ import {system} from '@workday/canvas-tokens-web';
9
+ import {createStyles, px2rem} from '@workday/canvas-kit-styling';
10
10
 
11
11
  const fruits = [
12
12
  'Apples',
@@ -20,8 +20,8 @@ const fruits = [
20
20
  ];
21
21
 
22
22
  const liveRegionStyle = createStyles({
23
- border: `${px2rem(1)} solid ${base.cantaloupe400}`,
24
- backgroundColor: base.cantaloupe100,
23
+ border: `${px2rem(1)} solid ${system.color.bg.caution.stronger}`,
24
+ backgroundColor: system.color.bg.caution.default,
25
25
  padding: system.space.x2,
26
26
  });
27
27
 
package/dist/mdx/react/_examples/mdx/examples/GlobalHeader.tsx CHANGED
@@ -9,7 +9,7 @@ import {
9
9
  ExtractProps,
10
10
  useUniqueId,
11
11
  } from '@workday/canvas-kit-react/common';
12
- import {base, system} from '@workday/canvas-tokens-web';
12
+ import {system} from '@workday/canvas-tokens-web';
13
13
  import {calc, createStyles, px2rem} from '@workday/canvas-kit-styling';
14
14
  import {
15
15
  notificationsIcon,
@@ -73,7 +73,7 @@ const styleOverrides = {
73
73
  }),
74
74
  menuButtonStyles: createStyles({
75
75
  textDecoration: 'none',
76
- color: base.blackPepper500,
76
+ color: system.color.fg.strong,
77
77
  }),
78
78
  notificationContainerStyles: createStyles({
79
79
  boxSizing: 'border-box',
package/dist/mdx/react/_examples/mdx/examples/SidePanelWithNavigation.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import {base, system} from '@workday/canvas-tokens-web';
2
+ import {system} from '@workday/canvas-tokens-web';
3
3
  import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
4
4
  import {Flex} from '@workday/canvas-kit-react/layout';
5
5
  import {Heading, Subtext, Text} from '@workday/canvas-kit-react/text';
@@ -30,7 +30,7 @@ const stylesOverride = {
30
30
  navContainer: createStyles({
31
31
  height: px2rem(800),
32
32
  positio: 'relative',
33
- backgroundColor: base.frenchVanilla100,
33
+ backgroundColor: system.color.bg.alt.default,
34
34
  }),
35
35
  accordionContainer: createStyles({
36
36
  flexDirection: 'column',
package/dist/mdx/react/_examples/mdx/examples/SidePanelWithOverlay.tsx CHANGED
@@ -3,12 +3,12 @@ import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-pa
3
3
  import {Flex, Box} from '@workday/canvas-kit-react/layout';
4
4
  import {Heading} from '@workday/canvas-kit-react/text';
5
5
  import {createStyles, px2rem} from '@workday/canvas-kit-styling';
6
- import {system, base} from '@workday/canvas-tokens-web';
6
+ import {system} from '@workday/canvas-tokens-web';
7
7
 
8
8
  const stylesOverride = {
9
9
  panelContainer: createStyles({
10
10
  height: px2rem(320),
11
- backgroundColor: base.soap100,
11
+ backgroundColor: system.color.bg.alt.soft,
12
12
  position: 'relative',
13
13
  }),
14
14
  panelContent: createStyles({
package/dist/mdx/react/_examples/mdx/examples/Table/WithSelectableRows.tsx CHANGED
@@ -6,7 +6,7 @@ import {Checkbox} from '@workday/canvas-kit-react/checkbox';
6
6
  import {createComponent, generateUniqueId} from '@workday/canvas-kit-react/common';
7
7
  import {Tooltip} from '@workday/canvas-kit-react/tooltip';
8
8
  import {createStencil, createStyles} from '@workday/canvas-kit-styling';
9
- import {base} from '@workday/canvas-tokens-web';
9
+ import {system} from '@workday/canvas-tokens-web';
10
10
 
11
11
  const selectableRowStencil = createStencil({
12
12
  base: {
@@ -16,14 +16,14 @@ const selectableRowStencil = createStencil({
16
16
  modifiers: {
17
17
  isSelected: {
18
18
  true: {
19
- backgroundColor: base.blueberry100,
19
+ backgroundColor: system.color.bg.primary.soft,
20
20
  },
21
21
  },
22
22
  },
23
23
  });
24
24
 
25
25
  const tableHeaderStyles = createStyles({
26
- backgroundColor: base.soap100,
26
+ backgroundColor: system.color.bg.alt.soft,
27
27
  });
28
28
 
29
29
  const tableCellStyles = createStyles({