@workday/canvas-kit-docs 14.3.6 → 14.3.7

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 (4) hide show
  1. package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
  2. package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
  3. package/dist/mdx/tokens/TokenMigrationMappingColors.mdx +137 -0
  4. package/package.json +6 -6
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": "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": "3.0.36",
27
27
  "@workday/canvas-tokens-web": "3.1.2"
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": "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": "3.0.36",
27
27
  "@workday/canvas-tokens-web": "3.1.2"
28
28
  },
package/dist/mdx/tokens/TokenMigrationMappingColors.mdx CHANGED
@@ -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
@@ -321,6 +322,142 @@ themeable, understandable, and consistent.**
321
322
  | Black | `system.color.static.black` | | Always black regardless of theme |
322
323
  | Transparent | `system.color.static.transparent` | | Invisible backgrounds |
323
324
 
325
+ ## Other Mapping
326
+
327
+ Certain old tokens have been deprecated without direct replacements. In these cases, we recommend
328
+ using the closest available base palette or gradient token references shown below rather than
329
+ semantic aliases; only use literal raw color values if no tokenized option exists.
330
+
331
+ ### Gradients
332
+
333
+ Please note that the new gradients may appear visually different from the previous ones, as the
334
+ underlying base palette has been updated and the color mappings do not have exact equivalents.
335
+
336
+ | Gradient Name | Old Value | New Value |
337
+ | ------------------ | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
338
+ | cinnamon | "linear-gradient(to bottom right," + colors.cinnamon500 + "," + colors.cinnamon400 + ")" | "linear-gradient(to bottom right, var(" + base.red600 + "), var(" + base.red400 + "))" |
339
+ | peach | "linear-gradient(to bottom right," + colors.peach500 + "," + colors.peach400 + ")" | "linear-gradient(to bottom right, var(" + base.coral600 + "), var(" + base.red400 + "))" |
340
+ | chiliMango | "linear-gradient(to bottom right," + colors.chiliMango500 + "," + colors.chiliMango400 + ")" | "linear-gradient(to bottom right, var(" + base.orange500 + "), var(" + base.orange400 + "))" |
341
+ | cantaloupe | "linear-gradient(to bottom right," + colors.cantaloupe500 + "," + colors.cantaloupe400 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
342
+ | sourLemon | "linear-gradient(to bottom right," + colors.sourLemon500 + "," + colors.sourLemon400 + ")" | "linear-gradient(to bottom right, var(" + base.amber300 + "), var(" + base.amber200 + "))" |
343
+ | juicyPear | "linear-gradient(to bottom right," + colors.juicyPear500 + "," + colors.juicyPear400 + ")" | "linear-gradient(to bottom right, var(" + base.green500 + "), var(" + base.green400 + "))" |
344
+ | kiwi | "linear-gradient(to bottom right," + colors.kiwi500 + "," + colors.kiwi400 + ")" | "linear-gradient(to bottom right, var(" + base.green500 + "), var(" + base.green400 + "))" |
345
+ | greenApple | "linear-gradient(to bottom right," + colors.greenApple500 + "," + colors.greenApple400 + ")" | "linear-gradient(to bottom right, var(" + base.green700 + "), var(" + base.green600 + "))" |
346
+ | watermelon | "linear-gradient(to bottom right," + colors.watermelon500 + "," + colors.watermelon400 + ")" | "linear-gradient(to bottom right, var(" + base.green700 + "), var(" + base.green600 + "))" |
347
+ | jewel | "linear-gradient(to bottom right," + colors.jewel500 + "," + colors.jewel400 + ")" | "linear-gradient(to bottom right, var(" + base.teal600 + "), var(" + base.teal500 + "))" |
348
+ | toothpaste | "linear-gradient(to bottom right," + colors.toothpaste500 + "," + colors.toothpaste400 + ")" | "linear-gradient(to bottom right, var(" + base.azure700 + "), var(" + base.azure500 + "))" |
349
+ | blueberry | "linear-gradient(to bottom right," + colors.blueberry500 + "," + colors.blueberry400 + ")" | `brand.gradient.primary` |
350
+ | plum | "linear-gradient(to bottom right," + colors.plum500 + "," + colors.plum400 + ")" | "linear-gradient(to bottom right, var(" + base.blue700 + "), var(" + base.blue600 + "))" |
351
+ | berrySmoothie | "linear-gradient(to bottom right," + colors.berrySmoothie500 + "," + colors.berrySmoothie400 + ")" | "linear-gradient(to bottom right, var(" + base.blue700 + "), var(" + base.blue500 + "))" |
352
+ | blackberry | "linear-gradient(to bottom right," + colors.blackberry500 + "," + colors.blackberry400 + ")" | "linear-gradient(to bottom right, var(" + base.indigo700 + "), var(" + base.indigo500 + "))" |
353
+ | islandPunch | "linear-gradient(to bottom right," + colors.islandPunch500 + "," + colors.islandPunch400 + ")" | "linear-gradient(to bottom right, var(" + base.purple700 + "), var(" + base.purple500 + "))" |
354
+ | grapeSoda | "linear-gradient(to bottom right," + colors.grapeSoda500 + "," + colors.grapeSoda400 + ")" | "linear-gradient(to bottom right, var(" + base.purple600 + "), var(" + base.purple500 + "))" |
355
+ | pomegranate | "linear-gradient(to bottom right," + colors.pomegranate500 + "," + colors.pomegranate400 + ")" | "linear-gradient(to bottom right, var(" + base.red700 + "), var(" + base.red600 + "))" |
356
+ | fruitPunch | "linear-gradient(to bottom right," + colors.fruitPunch500 + "," + colors.fruitPunch400 + ")" | "linear-gradient(to bottom right, var(" + base.red400 + "), var(" + base.red300 + "))" |
357
+ | rootBeer | "linear-gradient(to bottom right," + colors.rootBeer600 + "," + colors.rootBeer500 + ")" | "linear-gradient(to bottom right, var(" + base.amber950 + "), var(" + base.amber900 + "))" |
358
+ | toastedMarshmallow | "linear-gradient(to bottom right," + colors.toastedMarshmallow500 + "," + colors.toastedMarshmallow400 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
359
+ | cappuccino | "linear-gradient(to bottom right," + colors.cappuccino400 + "," + colors.cappuccino300 + ")" | "linear-gradient(to bottom right, var(" + base.amber500 + "), var(" + base.amber400 + "))" |
360
+ | licorice | "linear-gradient(to bottom right," + colors.licorice500 + "," + colors.licorice400 + ")" | "linear-gradient(to bottom right, var(" + base.slate800 + "), var(" + base.slate700 + "))" |
361
+ | blackPepper | "linear-gradient(to bottom right," + colors.blackPepper400 + "," + colors.blackPepper300 + ")" | "linear-gradient(to bottom right, var(" + base.neutral900 + "), var(" + base.neutral800 + "))" |
362
+
363
+ ### Chart Colors
364
+
365
+ Please note that the new chart colors may appear visually different from the previous ones, as the
366
+ underlying base palette has been updated and the color mappings do not have exact equivalents.
367
+
368
+ | Old Token | Old Value | New Value |
369
+ | ----------------------------------- | ------------------------------ | ----------------- |
370
+ | `chartingColors[1]` | `colors.watermelon200` | `base.teal100` |
371
+ | `chartingColors[2]` | `colors.watermelon300` | `base.green100` |
372
+ | `chartingColors[3]` | `colors.jewel200` | `base.teal200` |
373
+ | `chartingColors[4]` | `colors.jewel300` | `base.teal400` |
374
+ | `chartingColors[5]` | `colors.plum200` | `base.blue200` |
375
+ | `chartingColors[6]` | `colors.plum300` | `base.blue400` |
376
+ | `chartingColors[7]` | `colors.islandPunch200` | `base.purple200` |
377
+ | `chartingColors[8]` | `colors.islandPunch300` | `base.purple500` |
378
+ | `chartingColors[9]` | `colors.pomegranate200` | `base.magenta100` |
379
+ | `chartingColors[10]` | `colors.pomegranate300` | `base.magenta500` |
380
+ | `chartingColors[11]` | `colors.peach200` | `base.coral200` |
381
+ | `chartingColors[12]` | `colors.peach400` | `base.coral300` |
382
+ | `chartingColors[13]` | `colors.cantaloupe200` | `base.amber200` |
383
+ | `chartingColors[14]` | `colors.cantaloupe400` | `base.amber300` |
384
+ | `chartingColors[15]` | `colors.sourLemon200` | `base.amber100` |
385
+ | `chartingColors[16]` | `colors.sourLemon400` | `base.amber200` |
386
+ | `chartingColors[17]` | `colors.watermelon400` | `base.green600` |
387
+ | `chartingColors[18]` | `colors.watermelon500` | `base.green700` |
388
+ | `chartingColors[19]` | `colors.jewel400` | `base.teal500` |
389
+ | `chartingColors[20]` | `colors.jewel500` | `base.teal600` |
390
+ | `chartingColors[21]` | `colors.plum400` | `base.blue600` |
391
+ | `chartingColors[22]` | `colors.plum500` | `base.blue700` |
392
+ | `chartingColors[23]` | `colors.islandPunch400` | `base.purple500` |
393
+ | `chartingColors[24]` | `colors.islandPunch500` | `base.purple600` |
394
+ | `chartingColors[25]` | `colors.pomegranate400` | `base.magenta500` |
395
+ | `chartingColors[26]` | `colors.pomegranate600` | `base.red700` |
396
+ | `chartingColors[27]` | `colors.peach500` | `base.coral600` |
397
+ | `chartingColors[28]` | `colors.peach600` | `base.coral700` |
398
+ | `chartingColors[29]` | `colors.cantaloupe500` | `base.amber500` |
399
+ | `chartingColors[30]` | `colors.cantaloupe600` | `base.amber600` |
400
+ | `chartingColors[31]` | `colors.sourLemon500` | `base.amber300` |
401
+ | `chartingColors[32]` | `colors.sourLemon600` | `base.amber500` |
402
+ | `chartingColors[33]` | `colors.greenApple200` | `base.green100` |
403
+ | `chartingColors[34]` | `colors.greenApple300` | `base.green200` |
404
+ | `chartingColors[35]` | `colors.toothpaste200` | `base.azure200` |
405
+ | `chartingColors[36]` | `colors.toothpaste300` | `base.azure300` |
406
+ | `chartingColors[37]` | `colors.blueberry200` | `base.blue100` |
407
+ | `chartingColors[38]` | `colors.blueberry300` | `base.blue400` |
408
+ | `chartingColors[39]` | `colors.berrySmoothie200` | `base.indigo200` |
409
+ | `chartingColors[40]` | `colors.blackberry300` | `base.indigo400` |
410
+ | `chartingColors[41]` | `colors.fruitPunch200` | `base.red200` |
411
+ | `chartingColors[42]` | `colors.fruitPunch300` | `base.red300` |
412
+ | `chartingColors[43]` | `colors.rootBeer200` | `base.coral100` |
413
+ | `chartingColors[44]` | `colors.rootBeer300` | `base.coral200` |
414
+ | `chartingColors[45]` | `colors.toastedMarshmallow200` | `base.orange100` |
415
+ | `chartingColors[46]` | `colors.toastedMarshmallow400` | `base.orange200` |
416
+ | `chartingColors[47]` | `colors.chiliMango200` | `base.coral200` |
417
+ | `chartingColors[48]` | `colors.chiliMango400` | `base.coral300` |
418
+ | `chartingColors[49]` | `colors.greenApple400` | `base.green600` |
419
+ | `chartingColors[50]` | `colors.greenApple600` | `base.green700` |
420
+ | `chartingColors[51]` | `colors.toothpaste400` | `base.azure500` |
421
+ | `chartingColors[52]` | `colors.toothpaste600` | `base.azure800` |
422
+ | `chartingColors[53]` | `colors.blueberry400` | `base.blue600` |
423
+ | `chartingColors[54]` | `colors.blueberry600` | `base.blue800` |
424
+ | `chartingColors[55]` | `colors.blackberry400` | `base.indigo500` |
425
+ | `chartingColors[56]` | `colors.blackberry600` | `base.indigo900` |
426
+ | `chartingColors[57]` | `colors.fruitPunch400` | `base.red400` |
427
+ | `chartingColors[58]` | `colors.fruitPunch600` | `base.red700` |
428
+ | `chartingColors[59]` | `colors.rootBeer500` | `base.amber900` |
429
+ | `chartingColors[60]` | `colors.rootBeer600` | `base.amber950` |
430
+ | `chartingColors[61]` | `colors.toastedMarshmallow500` | `base.amber500` |
431
+ | `chartingColors[62]` | `colors.toastedMarshmallow600` | `base.amber600` |
432
+ | `chartingColors[63]` | `colors.chiliMango500` | `base.orange500` |
433
+ | `chartingColors[64]` | `colors.chiliMango600` | `base.orange600` |
434
+ | `chartingColors[65]` | `colors.kiwi200` | `base.green100` |
435
+ | `chartingColors[66]` | `colors.kiwi400` | `base.green500` |
436
+ | `chartingColors[67]` | `colors.berrySmoothie200` | `base.indigo200` |
437
+ | `chartingColors[68]` | `colors.berrySmoothie300` | `base.indigo400` |
438
+ | `chartingColors[69]` | `colors.grapeSoda200` | `base.magenta200` |
439
+ | `chartingColors[70]` | `colors.grapeSoda300` | `base.magenta400` |
440
+ | `chartingColors[71]` | `colors.cinnamon200` | `base.red100` |
441
+ | `chartingColors[72]` | `colors.cinnamon300` | `base.red300` |
442
+ | `chartingColors[73]` | `colors.sourLemon300` | `base.amber200` |
443
+ | `chartingColors[74]` | `colors.toastedMarshmallow300` | `base.orange200` |
444
+ | `chartingColors[75]` | `colors.peach300` | `base.coral300` |
445
+ | `chartingColors[76]` | `colors.cinnamon500` | `base.red600` |
446
+ | `chartingColors[77]` | `colors.cantaloupe300` | `base.amber300` |
447
+ | `chartingColors[78]` | `colors.chiliMango300` | `base.coral300` |
448
+ | `chartingColors[79]` | `colors.kiwi300` | `base.green200` |
449
+ | `chartingColors[80]` | `colors.kiwi500` | `base.green500` |
450
+ | `chartingColors[81]` | `colors.berrySmoothie400` | `base.blue500` |
451
+ | `chartingColors[82]` | `colors.berrySmoothie500` | `base.blue700` |
452
+ | `chartingColors[83]` | `colors.grapeSoda400` | `base.purple500` |
453
+ | `chartingColors[84]` | `colors.grapeSoda500` | `base.purple600` |
454
+ | `chartingColors[85]` | `colors.cinnamon400` | `base.red400` |
455
+ | `chartingColors[86]` | `colors.cinnamon500` | `base.red600` |
456
+ | `chartingColorOffsets.barAndColumn` | `colors.watermelon200` | `base.teal100` |
457
+ | `chartingColorOffsets.pie` | `colors.jewel300` | `base.teal400` |
458
+ | `chartingColorOffsets.lineAndArea` | `colors.islandPunch200` | `base.purple200` |
459
+ | `chartingColorOffsets.bubble` | `colors.peach200` | `base.coral200` |
460
+
324
461
  ## Migration Examples
325
462
 
326
463
  **Example 1: Base Color Migration**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "14.3.6",
3
+ "version": "14.3.7",
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.3.6",
49
- "@workday/canvas-kit-preview-react": "^14.3.6",
50
- "@workday/canvas-kit-react": "^14.3.6",
51
- "@workday/canvas-kit-styling": "^14.3.6",
48
+ "@workday/canvas-kit-labs-react": "^14.3.7",
49
+ "@workday/canvas-kit-preview-react": "^14.3.7",
50
+ "@workday/canvas-kit-react": "^14.3.7",
51
+ "@workday/canvas-kit-styling": "^14.3.7",
52
52
  "@workday/canvas-system-icons-web": "^3.0.36",
53
53
  "@workday/canvas-tokens-web": "^3.1.6",
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": "6a8627d8fd32b0aaf27a70c47c9c1efb6dd11045"
64
+ "gitHead": "d9905be131748cdb3fd75bf4bc88ff423843dea5"
65
65
  }