@workday/canvas-kit-docs 15.0.0-alpha.0288-next.0 → 15.0.0-alpha.0293-next.0

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