@workday/canvas-kit-react 16.0.0-alpha.0489-next.0 → 16.0.0-alpha.0491-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 (45) hide show
  1. package/card/lib/Card.tsx +16 -12
  2. package/dist/commonjs/card/lib/Card.d.ts +17 -8
  3. package/dist/commonjs/card/lib/Card.d.ts.map +1 -1
  4. package/dist/commonjs/card/lib/Card.js +7 -4
  5. package/dist/commonjs/fonts/lib/fonts.js +2 -2
  6. package/dist/commonjs/menu/lib/MenuCard.d.ts.map +1 -1
  7. package/dist/commonjs/menu/lib/MenuCard.js +2 -2
  8. package/dist/commonjs/menu/lib/MenuList.d.ts.map +1 -1
  9. package/dist/commonjs/menu/lib/MenuList.js +3 -3
  10. package/dist/commonjs/popup/lib/PopupCard.d.ts.map +1 -1
  11. package/dist/commonjs/popup/lib/PopupCard.js +2 -2
  12. package/dist/commonjs/toast/lib/Toast.d.ts.map +1 -1
  13. package/dist/commonjs/toast/lib/Toast.js +3 -3
  14. package/dist/commonjs/tooltip/lib/Tooltip.d.ts +4 -0
  15. package/dist/commonjs/tooltip/lib/Tooltip.d.ts.map +1 -1
  16. package/dist/commonjs/tooltip/lib/Tooltip.js +2 -2
  17. package/dist/commonjs/tooltip/lib/TooltipContainer.d.ts +14 -0
  18. package/dist/commonjs/tooltip/lib/TooltipContainer.d.ts.map +1 -1
  19. package/dist/commonjs/tooltip/lib/TooltipContainer.js +11 -6
  20. package/dist/es6/card/lib/Card.d.ts +17 -8
  21. package/dist/es6/card/lib/Card.d.ts.map +1 -1
  22. package/dist/es6/card/lib/Card.js +8 -5
  23. package/dist/es6/fonts/lib/fonts.js +2 -2
  24. package/dist/es6/menu/lib/MenuCard.d.ts.map +1 -1
  25. package/dist/es6/menu/lib/MenuCard.js +2 -2
  26. package/dist/es6/menu/lib/MenuList.d.ts.map +1 -1
  27. package/dist/es6/menu/lib/MenuList.js +3 -3
  28. package/dist/es6/popup/lib/PopupCard.d.ts.map +1 -1
  29. package/dist/es6/popup/lib/PopupCard.js +2 -2
  30. package/dist/es6/toast/lib/Toast.d.ts.map +1 -1
  31. package/dist/es6/toast/lib/Toast.js +3 -3
  32. package/dist/es6/tooltip/lib/Tooltip.d.ts +4 -0
  33. package/dist/es6/tooltip/lib/Tooltip.d.ts.map +1 -1
  34. package/dist/es6/tooltip/lib/Tooltip.js +2 -2
  35. package/dist/es6/tooltip/lib/TooltipContainer.d.ts +14 -0
  36. package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map +1 -1
  37. package/dist/es6/tooltip/lib/TooltipContainer.js +12 -7
  38. package/fonts/lib/fonts.ts +2 -2
  39. package/menu/lib/MenuCard.tsx +2 -1
  40. package/menu/lib/MenuList.tsx +0 -1
  41. package/package.json +5 -5
  42. package/popup/lib/PopupCard.tsx +2 -1
  43. package/toast/lib/Toast.tsx +9 -3
  44. package/tooltip/lib/Tooltip.tsx +6 -0
  45. package/tooltip/lib/TooltipContainer.tsx +28 -4
package/card/lib/Card.tsx CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
 
3
3
  import {cornerShapeStencil, createComponent} from '@workday/canvas-kit-react/common';
4
4
  import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
5
- import {createStencil, px2rem} from '@workday/canvas-kit-styling';
5
+ import {createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
6
6
  import {system} from '@workday/canvas-tokens-web';
7
7
 
8
8
  import {CardBody} from './CardBody';
@@ -14,33 +14,37 @@ export interface CardProps extends BoxProps {
14
14
  */
15
15
  children?: React.ReactNode;
16
16
  /**
17
- * The variant of the Card. Can be `default`, `borderless` or `tonal`.
17
+ * The variant of the Card. Can be `alt`, `tonal` or default.
18
18
  * @default 'default'
19
19
  */
20
- variant?: 'borderless' | 'tonal';
20
+ variant?: 'alt' | 'tonal';
21
21
  }
22
22
 
23
23
  // .cnvs-card
24
24
  export const cardStencil = createStencil({
25
25
  extends: cornerShapeStencil,
26
- base: {
26
+ vars: {
27
+ background: '',
28
+ },
29
+ base: ({background}) => ({
27
30
  [cornerShapeStencil.vars.shape]: system.legacy.shape.xxl,
28
31
  display: 'flex',
29
32
  flexDirection: 'column',
30
33
  gap: system.legacy.padding.sm,
31
34
  padding: system.legacy.padding.xl,
32
- backgroundColor: system.legacy.color.surface.default,
35
+ background: cssVar(background, system.legacy.color.surface.default),
33
36
  border: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
34
- },
37
+ }),
35
38
  modifiers: {
36
39
  variant: {
37
- borderless: {
38
- borderColor: 'transparent',
39
- },
40
- tonal: {
41
- backgroundColor: system.legacy.color.surface.alt.default,
40
+ tonal: ({background}) => ({
41
+ background: cssVar(background, system.legacy.color.surface.alt.strong),
42
42
  borderColor: system.color.border.transparent,
43
- },
43
+ }),
44
+ alt: ({background}) => ({
45
+ background: cssVar(background, system.sana.color.surface.elevated),
46
+ borderColor: system.sana.color.border.elevated,
47
+ }),
44
48
  },
45
49
  },
46
50
  });
package/dist/commonjs/card/lib/Card.d.ts CHANGED
@@ -6,22 +6,31 @@ export interface CardProps extends BoxProps {
6
6
  */
7
7
  children?: React.ReactNode;
8
8
  /**
9
- * The variant of the Card. Can be `default`, `borderless` or `tonal`.
9
+ * The variant of the Card. Can be `alt`, `tonal` or default.
10
10
  * @default 'default'
11
11
  */
12
- variant?: 'borderless' | 'tonal';
12
+ variant?: 'alt' | 'tonal';
13
13
  }
14
14
  export declare const cardStencil: import("@workday/canvas-kit-styling").Stencil<{
15
15
  variant: {
16
- borderless: {
17
- borderColor: string;
18
- };
19
- tonal: {
20
- backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
16
+ tonal: ({ background }: {
17
+ shape: `--${string}`;
18
+ background: `--${string}`;
19
+ } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
20
+ background: `var(--${string}, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))))`;
21
21
  borderColor: "--cnvs-sys-color-border-transparent";
22
22
  };
23
+ alt: ({ background }: {
24
+ shape: `--${string}`;
25
+ background: `--${string}`;
26
+ } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
27
+ background: `var(--${string}, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)))`;
28
+ borderColor: "var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1))";
29
+ };
23
30
  };
24
- }, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
31
+ }, {}, {
32
+ background: string;
33
+ }, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
25
34
  shape: string;
26
35
  }, never>, {}, {
27
36
  shape: string;
package/dist/commonjs/card/lib/Card.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../card/lib/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAOvE,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;CAClC;AAGD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;wBAsBtB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../card/lib/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAOvE,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAC3B;AAGD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;wBA0BtB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}
package/dist/commonjs/card/lib/Card.js CHANGED
@@ -11,14 +11,17 @@ const CardHeading_1 = require("./CardHeading");
11
11
  // .cnvs-card
12
12
  exports.cardStencil = (0, canvas_kit_styling_1.createStencil)({
13
13
  extends: common_1.cornerShapeStencil,
14
- base: { name: "124gti", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));display:flex;flex-direction:column;gap:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));" },
14
+ vars: {
15
+ background: '',
16
+ },
17
+ base: { name: "4bxwhc", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));display:flex;flex-direction:column;gap:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));" },
15
18
  modifiers: {
16
19
  variant: {
17
- borderless: { name: "3bceea", styles: "border-color:transparent;" },
18
- tonal: { name: "3iim0n", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));border-color:var(--cnvs-sys-color-border-transparent);" }
20
+ tonal: { name: "1o657x", styles: "background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));border-color:var(--cnvs-sys-color-border-transparent);" },
21
+ alt: { name: "12vlml", styles: "background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));" }
19
22
  }
20
23
  }
21
- }, "card-687719");
24
+ }, "card-10b5c7");
22
25
  /**
23
26
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
24
27
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
package/dist/commonjs/fonts/lib/fonts.js CHANGED
@@ -5,7 +5,7 @@ const fontsPath = 'https://design.workdaycdn.com/assets/fonts/Sana-Sans';
5
5
  exports.fonts = [
6
6
  {
7
7
  '@font-face': {
8
- fontFamily: 'Sana Sans LCG 05 VF',
8
+ fontFamily: 'Sana Sans VF',
9
9
  fontStyle: 'normal',
10
10
  fontWeight: [100, 700],
11
11
  src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`,
@@ -13,7 +13,7 @@ exports.fonts = [
13
13
  },
14
14
  {
15
15
  '@font-face': {
16
- fontFamily: 'Sana Sans LCG 05 VF',
16
+ fontFamily: 'Sana Sans VF',
17
17
  fontStyle: 'italic',
18
18
  fontWeight: [100, 700],
19
19
  src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`,
package/dist/commonjs/menu/lib/MenuCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;wBAiC1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBnB,CAAC"}
1
+ {"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;wBAiC1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BnB,CAAC"}
package/dist/commonjs/menu/lib/MenuCard.js CHANGED
@@ -50,11 +50,11 @@ exports.MenuCard = (0, common_1.createSubcomponent)('div')({
50
50
  displayName: 'Menu.Card',
51
51
  modelHook: useMenuModel_1.useMenuModel,
52
52
  elemPropsHook: exports.useMenuCard,
53
- })(({ minWidth, maxHeight, ...elemProps }, Element, model) => {
53
+ })(({ minWidth, maxHeight, variant, ...elemProps }, Element, model) => {
54
54
  const transformOrigin = React.useMemo(() => {
55
55
  return (0, popup_1.getTransformFromPlacement)(model.state.placement || 'bottom');
56
56
  }, [model.state.placement]);
57
- return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: Element, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.menuCardStencil)({
57
+ return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: Element, variant: variant, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.menuCardStencil)({
58
58
  minWidth: typeof minWidth === 'number' ? (0, canvas_kit_styling_1.px2rem)(minWidth) : minWidth,
59
59
  maxHeight: typeof maxHeight === 'number' ? (0, canvas_kit_styling_1.px2rem)(maxHeight) : maxHeight,
60
60
  transformOriginVertical: transformOrigin.vertical,
package/dist/commonjs/menu/lib/MenuList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AACxE,OAAO,EACL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAO1C,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+SAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;wBAkB1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenB,CAAC"}
1
+ {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AACxE,OAAO,EACL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAO1C,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+SAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;wBAiB1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenB,CAAC"}
package/dist/commonjs/menu/lib/MenuList.js CHANGED
@@ -17,11 +17,11 @@ exports.useMenuList = (0, common_1.composeHooks)((0, common_1.createElemPropsHoo
17
17
  }), popup_1.useReturnFocus, popup_1.useFocusRedirect);
18
18
  exports.menuListStencil = (0, canvas_kit_styling_1.createStencil)({
19
19
  extends: common_1.cornerShapeStencil,
20
- base: { name: "22r4o3", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-popover, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));padding:0;gap:var(--cnvs-base-size-25, 0.125rem);" },
20
+ base: { name: "459e6h", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));padding:0;gap:var(--cnvs-base-size-25, 0.125rem);" },
21
21
  modifiers: {
22
22
  orientation: {
23
- vertical: { name: "3k8hpd", styles: "flex-direction:column;" },
24
- horizontal: { name: "37ootq", styles: "flex-direction:row;" }
23
+ vertical: { name: "3rmwq9", styles: "flex-direction:column;" },
24
+ horizontal: { name: "2n3tkr", styles: "flex-direction:row;" }
25
25
  }
26
26
  }
27
27
  }, "menu-list-3f4295");
package/dist/commonjs/popup/lib/PopupCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAc7E,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6DD,eAAO,MAAM,gBAAgB;;;;;;;;gBAkC3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA2BpB,CAAC"}
1
+ {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAc7E,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6DD,eAAO,MAAM,gBAAgB;;;;;;;;gBAkC3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA4BpB,CAAC"}
package/dist/commonjs/popup/lib/PopupCard.js CHANGED
@@ -90,13 +90,13 @@ exports.PopupCard = (0, common_1.createSubcomponent)('div')({
90
90
  displayName: 'Popup.Card',
91
91
  modelHook: hooks_1.usePopupModel,
92
92
  elemPropsHook: hooks_1.usePopupCard,
93
- })(({ children, ref, ...elemProps }, Element, model) => {
93
+ })(({ children, ref, variant, ...elemProps }, Element, model) => {
94
94
  const transformOrigin = React.useMemo(() => {
95
95
  return (0, getTransformFromPlacement_1.getTransformFromPlacement)(model.state.placement || 'bottom');
96
96
  }, [model.state.placement]);
97
97
  const translate = (0, common_1.getTransformOrigin)(transformOrigin, canvas_tokens_web_1.system.legacy.gap.sm);
98
98
  const cardMaxHeight = getMaxHeight(elemProps.margin);
99
- return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: Element, ref: ref, ...(0, layout_1.mergeStyles)(elemProps, [
99
+ return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: Element, ref: ref, variant: variant, ...(0, layout_1.mergeStyles)(elemProps, [
100
100
  (0, exports.popupCardStencil)({
101
101
  transformOriginHorizontal: transformOrigin.horizontal,
102
102
  transformOriginVertical: transformOrigin.vertical,
package/dist/commonjs/toast/lib/Toast.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAWtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AAqD5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAYL,CAAC"}
1
+ {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAWtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AA0D5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAaL,CAAC"}
package/dist/commonjs/toast/lib/Toast.js CHANGED
@@ -45,7 +45,7 @@ const getAriaAttributes = (mode, id) => {
45
45
  }
46
46
  };
47
47
  const toastStencil = (0, canvas_kit_styling_1.createStencil)({
48
- base: { name: "3mvnh", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" }
48
+ base: { name: "6z9bk", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}variant{alt{border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}tonal{}}" }
49
49
  }, "toast-4e8aec");
50
50
  /**
51
51
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
@@ -98,6 +98,6 @@ exports.Toast = (0, common_1.createContainer)('div')({
98
98
  */
99
99
  Link: ToastLink_1.ToastLink,
100
100
  },
101
- })(({ children, ...elemProps }, _, model) => {
102
- return ((0, jsx_runtime_1.jsx)(popup_1.Popup.Card, { ...getAriaAttributes(model.state.mode, model.state.id), ...(0, layout_1.mergeStyles)(elemProps, toastStencil()), children: children }));
101
+ })(({ children, variant, ...elemProps }, _, model) => {
102
+ return ((0, jsx_runtime_1.jsx)(popup_1.Popup.Card, { variant: variant, ...getAriaAttributes(model.state.mode, model.state.id), ...(0, layout_1.mergeStyles)(elemProps, toastStencil({ variant })), children: children }));
103
103
  });
package/dist/commonjs/tooltip/lib/Tooltip.d.ts CHANGED
@@ -64,6 +64,10 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
64
64
  * Amount of time (in ms) to delay before hiding the tooltip
65
65
  */
66
66
  hideDelay?: number;
67
+ /**
68
+ * The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
69
+ */
70
+ variant?: 'alt';
67
71
  }
68
72
  export declare const Tooltip: import("@workday/canvas-kit-react/common").ElementComponent<"div", TooltipProps>;
69
73
  //# sourceMappingURL=Tooltip.d.ts.map
package/dist/commonjs/tooltip/lib/Tooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EACL,SAAS,EAIV,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAKlE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO;IAChG;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,eAAO,MAAM,OAAO,kFAsElB,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EACL,SAAS,EAIV,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAKlE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO;IAChG;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAoBD,eAAO,MAAM,OAAO,kFAwElB,CAAC"}
package/dist/commonjs/tooltip/lib/Tooltip.js CHANGED
@@ -48,7 +48,7 @@ function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentP
48
48
  }
49
49
  exports.Tooltip = (0, common_1.createComponent)('div')({
50
50
  displayName: 'Tooltip',
51
- Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, fallbackPlacements = popup_1.defaultFallbackPlacements, ...elemProps }) {
51
+ Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, fallbackPlacements = popup_1.defaultFallbackPlacements, variant, ...elemProps }) {
52
52
  const titleText = (0, react_innertext_1.default)(title);
53
53
  const { targetProps, popperProps, tooltipProps } = (0, useTooltip_1.useTooltip)({
54
54
  type,
@@ -82,7 +82,7 @@ exports.Tooltip = (0, common_1.createComponent)('div')({
82
82
  : {}),
83
83
  }), (0, jsx_runtime_1.jsx)(popup_1.Popper, { placement: placement, fallbackPlacements: fallbackPlacements, ...popperProps, children: ({ placement }) => {
84
84
  const transformOrigin = (0, popup_1.getTransformFromPlacement)(placement);
85
- return ((0, jsx_runtime_1.jsx)(TooltipContainer_1.TooltipContainer, { transformOrigin: transformOrigin, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps), ...tooltipProps, elementHasFocus: elementHasFocus, children: title }));
85
+ return ((0, jsx_runtime_1.jsx)(TooltipContainer_1.TooltipContainer, { transformOrigin: transformOrigin, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps), ...tooltipProps, elementHasFocus: elementHasFocus, variant: variant, children: title }));
86
86
  } })] }));
87
87
  },
88
88
  });
package/dist/commonjs/tooltip/lib/TooltipContainer.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
16
16
  * @private
17
17
  */
18
18
  elementHasFocus?: boolean;
19
+ variant?: 'alt';
19
20
  }
20
21
  export declare const tooltipContainerStencil: import("@workday/canvas-kit-styling").Stencil<{
21
22
  elementHasFocus: {
@@ -23,9 +24,22 @@ export declare const tooltipContainerStencil: import("@workday/canvas-kit-stylin
23
24
  margin: string;
24
25
  };
25
26
  };
27
+ variant: {
28
+ alt: ({ background }: {
29
+ tooltipTransformOriginHorizontal: `--${string}`;
30
+ tooltipTransformOriginVertical: `--${string}`;
31
+ background: `--${string}`;
32
+ } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
33
+ '&:before': {
34
+ background: `var(--${string}, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)))`;
35
+ border: string;
36
+ };
37
+ };
38
+ };
26
39
  }, {}, {
27
40
  tooltipTransformOriginHorizontal: string;
28
41
  tooltipTransformOriginVertical: string;
42
+ background: string;
29
43
  }, never, never>;
30
44
  export declare const TooltipContainer: import("@workday/canvas-kit-react/common").ElementComponent<"div", TooltipContainerProps>;
31
45
  //# sourceMappingURL=TooltipContainer.d.ts.map
package/dist/commonjs/tooltip/lib/TooltipContainer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAK1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;gBAkElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA4B3B,CAAC"}
1
+ {"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;gBA2ElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAmC3B,CAAC"}
package/dist/commonjs/tooltip/lib/TooltipContainer.js CHANGED
@@ -10,32 +10,37 @@ const defaultTransformOrigin = {
10
10
  vertical: 'bottom',
11
11
  horizontal: 'center',
12
12
  };
13
- const tooltipTranslateVars = (0, canvas_kit_styling_1.createVars)({ id: "5cc1ce", args: ["positionX", "positionY"] });
13
+ const tooltipTranslateVars = (0, canvas_kit_styling_1.createVars)({ id: "3e3693", args: ["positionX", "positionY"] });
14
14
  /**
15
15
  * Keyframe for the Tooltip animation.
16
16
  */
17
- const tooltipAnimation = (0, canvas_kit_styling_1.keyframes)({ name: "2y6rqp", styles: "0%{opacity:0;transform:translate(var(--positionX-5cc1ce), var(--positionY-5cc1ce));}100%{opacity:1;transform:translate(0);}" });
17
+ const tooltipAnimation = (0, canvas_kit_styling_1.keyframes)({ name: "38ksuh", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
18
18
  exports.tooltipContainerStencil = (0, canvas_kit_styling_1.createStencil)({
19
19
  vars: {
20
20
  tooltipTransformOriginHorizontal: '',
21
21
  tooltipTransformOriginVertical: '',
22
+ background: '',
22
23
  },
23
- base: { name: "3g4vni", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-2y6rqp;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-3);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
24
+ base: { name: "3fljd", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-38ksuh;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-3eb75c) var(--tooltipTransformOriginHorizontal-tooltip-container-3eb75c);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-3);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
24
25
  modifiers: {
25
26
  elementHasFocus: {
26
- true: { name: "2ce6ax", styles: "margin:0.375rem;" }
27
+ true: { name: "3xiz5w", styles: "margin:0.375rem;" }
28
+ },
29
+ variant: {
30
+ alt: { name: "36lb76", styles: "&:before{background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}" }
27
31
  }
28
32
  }
29
- }, "tooltip-container-0d74d6");
33
+ }, "tooltip-container-3eb75c");
30
34
  exports.TooltipContainer = (0, common_1.createComponent)('div')({
31
35
  displayName: 'TooltipContainer',
32
- Component: ({ children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, ...elemProps }, ref, Element) => {
36
+ Component: ({ children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, variant, ...elemProps }, ref, Element) => {
33
37
  const translate = (0, common_1.getTransformOrigin)(transformOrigin || defaultTransformOrigin, canvas_tokens_web_1.system.legacy.gap.sm);
34
38
  return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, [
35
39
  (0, exports.tooltipContainerStencil)({
36
40
  tooltipTransformOriginHorizontal: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.horizontal,
37
41
  tooltipTransformOriginVertical: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.vertical,
38
42
  elementHasFocus,
43
+ variant,
39
44
  }),
40
45
  tooltipTranslateVars({ positionX: translate.x, positionY: translate.y }),
41
46
  ]), children: children }));
package/dist/es6/card/lib/Card.d.ts CHANGED
@@ -6,22 +6,31 @@ export interface CardProps extends BoxProps {
6
6
  */
7
7
  children?: React.ReactNode;
8
8
  /**
9
- * The variant of the Card. Can be `default`, `borderless` or `tonal`.
9
+ * The variant of the Card. Can be `alt`, `tonal` or default.
10
10
  * @default 'default'
11
11
  */
12
- variant?: 'borderless' | 'tonal';
12
+ variant?: 'alt' | 'tonal';
13
13
  }
14
14
  export declare const cardStencil: import("@workday/canvas-kit-styling").Stencil<{
15
15
  variant: {
16
- borderless: {
17
- borderColor: string;
18
- };
19
- tonal: {
20
- backgroundColor: "var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)))";
16
+ tonal: ({ background }: {
17
+ shape: `--${string}`;
18
+ background: `--${string}`;
19
+ } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
20
+ background: `var(--${string}, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))))`;
21
21
  borderColor: "--cnvs-sys-color-border-transparent";
22
22
  };
23
+ alt: ({ background }: {
24
+ shape: `--${string}`;
25
+ background: `--${string}`;
26
+ } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
27
+ background: `var(--${string}, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)))`;
28
+ borderColor: "var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1))";
29
+ };
23
30
  };
24
- }, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
31
+ }, {}, {
32
+ background: string;
33
+ }, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
25
34
  shape: string;
26
35
  }, never>, {}, {
27
36
  shape: string;
package/dist/es6/card/lib/Card.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../card/lib/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAOvE,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;CAClC;AAGD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;wBAsBtB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}
1
+ {"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../card/lib/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAOvE,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAC3B;AAGD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;wBA0BtB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}
package/dist/es6/card/lib/Card.js CHANGED
@@ -1,21 +1,24 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { cornerShapeStencil, createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
- import { createStencil, px2rem } from '@workday/canvas-kit-styling';
4
+ import { createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
5
5
  import { system } from '@workday/canvas-tokens-web';
6
6
  import { CardBody } from './CardBody';
7
7
  import { CardHeading } from './CardHeading';
8
8
  // .cnvs-card
9
9
  export const cardStencil = createStencil({
10
10
  extends: cornerShapeStencil,
11
- base: { name: "124gti", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));display:flex;flex-direction:column;gap:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));" },
11
+ vars: {
12
+ background: '',
13
+ },
14
+ base: { name: "4bxwhc", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));display:flex;flex-direction:column;gap:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding:var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));border:0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));" },
12
15
  modifiers: {
13
16
  variant: {
14
- borderless: { name: "3bceea", styles: "border-color:transparent;" },
15
- tonal: { name: "3iim0n", styles: "background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));border-color:var(--cnvs-sys-color-border-transparent);" }
17
+ tonal: { name: "1o657x", styles: "background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-alt-strong, var(--cnvs-sys-color-bg-alt-default, oklch(0.3337 0.0688 250.79 / 0.09))));border-color:var(--cnvs-sys-color-border-transparent);" },
18
+ alt: { name: "12vlml", styles: "background:var(--background-card-10b5c7, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border-color:var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));" }
16
19
  }
17
20
  }
18
- }, "card-687719");
21
+ }, "card-10b5c7");
19
22
  /**
20
23
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
21
24
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
package/dist/es6/fonts/lib/fonts.js CHANGED
@@ -2,7 +2,7 @@ const fontsPath = 'https://design.workdaycdn.com/assets/fonts/Sana-Sans';
2
2
  export const fonts = [
3
3
  {
4
4
  '@font-face': {
5
- fontFamily: 'Sana Sans LCG 05 VF',
5
+ fontFamily: 'Sana Sans VF',
6
6
  fontStyle: 'normal',
7
7
  fontWeight: [100, 700],
8
8
  src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`,
@@ -10,7 +10,7 @@ export const fonts = [
10
10
  },
11
11
  {
12
12
  '@font-face': {
13
- fontFamily: 'Sana Sans LCG 05 VF',
13
+ fontFamily: 'Sana Sans VF',
14
14
  fontStyle: 'italic',
15
15
  fontWeight: [100, 700],
16
16
  src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`,
package/dist/es6/menu/lib/MenuCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;wBAiC1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyBnB,CAAC"}
1
+ {"version":3,"file":"MenuCard.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;wBAiC1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAEtB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BnB,CAAC"}
package/dist/es6/menu/lib/MenuCard.js CHANGED
@@ -24,11 +24,11 @@ export const MenuCard = createSubcomponent('div')({
24
24
  displayName: 'Menu.Card',
25
25
  modelHook: useMenuModel,
26
26
  elemPropsHook: useMenuCard,
27
- })(({ minWidth, maxHeight, ...elemProps }, Element, model) => {
27
+ })(({ minWidth, maxHeight, variant, ...elemProps }, Element, model) => {
28
28
  const transformOrigin = React.useMemo(() => {
29
29
  return getTransformFromPlacement(model.state.placement || 'bottom');
30
30
  }, [model.state.placement]);
31
- return (_jsx(Card, { as: Element, ...mergeStyles(elemProps, menuCardStencil({
31
+ return (_jsx(Card, { as: Element, variant: variant, ...mergeStyles(elemProps, menuCardStencil({
32
32
  minWidth: typeof minWidth === 'number' ? px2rem(minWidth) : minWidth,
33
33
  maxHeight: typeof maxHeight === 'number' ? px2rem(maxHeight) : maxHeight,
34
34
  transformOriginVertical: transformOrigin.vertical,
package/dist/es6/menu/lib/MenuList.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AACxE,OAAO,EACL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAO1C,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+SAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;wBAkB1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenB,CAAC"}
1
+ {"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,SAAS,EAAC,MAAM,sCAAsC,CAAC;AACxE,OAAO,EACL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAO1C,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG,CACpC,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7D;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+SAUvB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;wBAiB1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenB,CAAC"}
package/dist/es6/menu/lib/MenuList.js CHANGED
@@ -14,11 +14,11 @@ export const useMenuList = composeHooks(createElemPropsHook(useMenuModel)(model
14
14
  }), useReturnFocus, useFocusRedirect);
15
15
  export const menuListStencil = createStencil({
16
16
  extends: cornerShapeStencil,
17
- base: { name: "22r4o3", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-popover, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));padding:0;gap:var(--cnvs-base-size-25, 0.125rem);" },
17
+ base: { name: "459e6h", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));padding:0;gap:var(--cnvs-base-size-25, 0.125rem);" },
18
18
  modifiers: {
19
19
  orientation: {
20
- vertical: { name: "3k8hpd", styles: "flex-direction:column;" },
21
- horizontal: { name: "37ootq", styles: "flex-direction:row;" }
20
+ vertical: { name: "3rmwq9", styles: "flex-direction:column;" },
21
+ horizontal: { name: "2n3tkr", styles: "flex-direction:row;" }
22
22
  }
23
23
  }
24
24
  }, "menu-list-3f4295");
package/dist/es6/popup/lib/PopupCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAc7E,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6DD,eAAO,MAAM,gBAAgB;;;;;;;;gBAkC3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA2BpB,CAAC"}
1
+ {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AACpD,OAAO,EACL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,cAAc,EAAc,MAAM,kCAAkC,CAAC;AAc7E,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA6DD,eAAO,MAAM,gBAAgB;;;;;;;;gBAkC3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA4BpB,CAAC"}
package/dist/es6/popup/lib/PopupCard.js CHANGED
@@ -64,13 +64,13 @@ export const PopupCard = createSubcomponent('div')({
64
64
  displayName: 'Popup.Card',
65
65
  modelHook: usePopupModel,
66
66
  elemPropsHook: usePopupCard,
67
- })(({ children, ref, ...elemProps }, Element, model) => {
67
+ })(({ children, ref, variant, ...elemProps }, Element, model) => {
68
68
  const transformOrigin = React.useMemo(() => {
69
69
  return getTransformFromPlacement(model.state.placement || 'bottom');
70
70
  }, [model.state.placement]);
71
71
  const translate = getTransformOrigin(transformOrigin, system.legacy.gap.sm);
72
72
  const cardMaxHeight = getMaxHeight(elemProps.margin);
73
- return (_jsx(Card, { as: Element, ref: ref, ...mergeStyles(elemProps, [
73
+ return (_jsx(Card, { as: Element, ref: ref, variant: variant, ...mergeStyles(elemProps, [
74
74
  popupCardStencil({
75
75
  transformOriginHorizontal: transformOrigin.horizontal,
76
76
  transformOriginVertical: transformOrigin.vertical,
package/dist/es6/toast/lib/Toast.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAWtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AAqD5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAYL,CAAC"}
1
+ {"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../toast/lib/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAWtD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC;CAAG;AA0D5F;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;IAId;;;;;;;;;OASG;;IAEH;;OAEG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;;;;IAEH;;OAEG;;CAaL,CAAC"}
package/dist/es6/toast/lib/Toast.js CHANGED
@@ -42,7 +42,7 @@ const getAriaAttributes = (mode, id) => {
42
42
  }
43
43
  };
44
44
  const toastStencil = createStencil({
45
- base: { name: "3mvnh", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" }
45
+ base: { name: "6z9bk", styles: "box-sizing:border-box;display:flex;flex-direction:row;width:22.5rem;padding-block:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));gap:var(--cnvs-base-size-150, 0.75rem);border-radius:var(--cnvs-sys-shape-xl, var(--cnvs-sys-shape-x4, 1rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);box-shadow:var(--cnvs-sys-depth-5);@media (forced-colors: active){outline:0.0625rem solid CanvasText;}variant{alt{border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}tonal{}}" }
46
46
  }, "toast-4e8aec");
47
47
  /**
48
48
  * Toast is a compound component that has different modes based on its contents. The modes add the proper aria attributes for accessibility
@@ -95,6 +95,6 @@ export const Toast = createContainer('div')({
95
95
  */
96
96
  Link: ToastLink,
97
97
  },
98
- })(({ children, ...elemProps }, _, model) => {
99
- return (_jsx(Popup.Card, { ...getAriaAttributes(model.state.mode, model.state.id), ...mergeStyles(elemProps, toastStencil()), children: children }));
98
+ })(({ children, variant, ...elemProps }, _, model) => {
99
+ return (_jsx(Popup.Card, { variant: variant, ...getAriaAttributes(model.state.mode, model.state.id), ...mergeStyles(elemProps, toastStencil({ variant })), children: children }));
100
100
  });
package/dist/es6/tooltip/lib/Tooltip.d.ts CHANGED
@@ -64,6 +64,10 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
64
64
  * Amount of time (in ms) to delay before hiding the tooltip
65
65
  */
66
66
  hideDelay?: number;
67
+ /**
68
+ * The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
69
+ */
70
+ variant?: 'alt';
67
71
  }
68
72
  export declare const Tooltip: import("@workday/canvas-kit-react/common").ElementComponent<"div", TooltipProps>;
69
73
  //# sourceMappingURL=Tooltip.d.ts.map
package/dist/es6/tooltip/lib/Tooltip.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EACL,SAAS,EAIV,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAKlE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO;IAChG;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,eAAO,MAAM,OAAO,kFAsElB,CAAC"}
1
+ {"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EACL,SAAS,EAIV,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAC,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAKlE,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,OAAO;IAChG;;;;;;;;;;;;;;OAcG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,aAAa,CAAC;IACtD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAoBD,eAAO,MAAM,OAAO,kFAwElB,CAAC"}
package/dist/es6/tooltip/lib/Tooltip.js CHANGED
@@ -19,7 +19,7 @@ function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentP
19
19
  }
20
20
  export const Tooltip = createComponent('div')({
21
21
  displayName: 'Tooltip',
22
- Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, fallbackPlacements = defaultFallbackPlacements, ...elemProps }) {
22
+ Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, fallbackPlacements = defaultFallbackPlacements, variant, ...elemProps }) {
23
23
  const titleText = innerText(title);
24
24
  const { targetProps, popperProps, tooltipProps } = useTooltip({
25
25
  type,
@@ -53,7 +53,7 @@ export const Tooltip = createComponent('div')({
53
53
  : {}),
54
54
  }), _jsx(Popper, { placement: placement, fallbackPlacements: fallbackPlacements, ...popperProps, children: ({ placement }) => {
55
55
  const transformOrigin = getTransformFromPlacement(placement);
56
- return (_jsx(TooltipContainer, { transformOrigin: transformOrigin, ...handleCsProp(elemProps), ...tooltipProps, elementHasFocus: elementHasFocus, children: title }));
56
+ return (_jsx(TooltipContainer, { transformOrigin: transformOrigin, ...handleCsProp(elemProps), ...tooltipProps, elementHasFocus: elementHasFocus, variant: variant, children: title }));
57
57
  } })] }));
58
58
  },
59
59
  });
package/dist/es6/tooltip/lib/TooltipContainer.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
16
16
  * @private
17
17
  */
18
18
  elementHasFocus?: boolean;
19
+ variant?: 'alt';
19
20
  }
20
21
  export declare const tooltipContainerStencil: import("@workday/canvas-kit-styling").Stencil<{
21
22
  elementHasFocus: {
@@ -23,9 +24,22 @@ export declare const tooltipContainerStencil: import("@workday/canvas-kit-stylin
23
24
  margin: string;
24
25
  };
25
26
  };
27
+ variant: {
28
+ alt: ({ background }: {
29
+ tooltipTransformOriginHorizontal: `--${string}`;
30
+ tooltipTransformOriginVertical: `--${string}`;
31
+ background: `--${string}`;
32
+ } & import("@workday/canvas-kit-styling").StencilVarsParts<{}>) => {
33
+ '&:before': {
34
+ background: `var(--${string}, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)))`;
35
+ border: string;
36
+ };
37
+ };
38
+ };
26
39
  }, {}, {
27
40
  tooltipTransformOriginHorizontal: string;
28
41
  tooltipTransformOriginVertical: string;
42
+ background: string;
29
43
  }, never, never>;
30
44
  export declare const TooltipContainer: import("@workday/canvas-kit-react/common").ElementComponent<"div", TooltipContainerProps>;
31
45
  //# sourceMappingURL=TooltipContainer.d.ts.map
package/dist/es6/tooltip/lib/TooltipContainer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAK1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;gBAkElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FA4B3B,CAAC"}
1
+ {"version":3,"file":"TooltipContainer.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/TooltipContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,eAAe,EAGhB,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF;;;OAGG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IACzC;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAuBD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;gBA2ElC,CAAC;AAEH,eAAO,MAAM,gBAAgB,2FAmC3B,CAAC"}
package/dist/es6/tooltip/lib/TooltipContainer.js CHANGED
@@ -1,38 +1,43 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createComponent, getTransformOrigin, } from '@workday/canvas-kit-react/common';
3
3
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
- import { calc, createStencil, createVars, keyframes, px2rem } from '@workday/canvas-kit-styling';
4
+ import { calc, createStencil, createVars, cssVar, keyframes, px2rem, } from '@workday/canvas-kit-styling';
5
5
  import { base, system } from '@workday/canvas-tokens-web';
6
6
  const defaultTransformOrigin = {
7
7
  vertical: 'bottom',
8
8
  horizontal: 'center',
9
9
  };
10
- const tooltipTranslateVars = createVars({ id: "5cc1ce", args: ["positionX", "positionY"] });
10
+ const tooltipTranslateVars = createVars({ id: "3e3693", args: ["positionX", "positionY"] });
11
11
  /**
12
12
  * Keyframe for the Tooltip animation.
13
13
  */
14
- const tooltipAnimation = keyframes({ name: "2y6rqp", styles: "0%{opacity:0;transform:translate(var(--positionX-5cc1ce), var(--positionY-5cc1ce));}100%{opacity:1;transform:translate(0);}" });
14
+ const tooltipAnimation = keyframes({ name: "38ksuh", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
15
15
  export const tooltipContainerStencil = createStencil({
16
16
  vars: {
17
17
  tooltipTransformOriginHorizontal: '',
18
18
  tooltipTransformOriginVertical: '',
19
+ background: '',
19
20
  },
20
- base: { name: "3g4vni", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-2y6rqp;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-0d74d6) var(--tooltipTransformOriginHorizontal-tooltip-container-0d74d6);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-3);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
21
+ base: { name: "3fljd", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-38ksuh;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-3eb75c) var(--tooltipTransformOriginHorizontal-tooltip-container-3eb75c);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-3);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
21
22
  modifiers: {
22
23
  elementHasFocus: {
23
- true: { name: "2ce6ax", styles: "margin:0.375rem;" }
24
+ true: { name: "3xiz5w", styles: "margin:0.375rem;" }
25
+ },
26
+ variant: {
27
+ alt: { name: "36lb76", styles: "&:before{background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}" }
24
28
  }
25
29
  }
26
- }, "tooltip-container-0d74d6");
30
+ }, "tooltip-container-3eb75c");
27
31
  export const TooltipContainer = createComponent('div')({
28
32
  displayName: 'TooltipContainer',
29
- Component: ({ children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, ...elemProps }, ref, Element) => {
33
+ Component: ({ children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, variant, ...elemProps }, ref, Element) => {
30
34
  const translate = getTransformOrigin(transformOrigin || defaultTransformOrigin, system.legacy.gap.sm);
31
35
  return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, [
32
36
  tooltipContainerStencil({
33
37
  tooltipTransformOriginHorizontal: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.horizontal,
34
38
  tooltipTransformOriginVertical: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.vertical,
35
39
  elementHasFocus,
40
+ variant,
36
41
  }),
37
42
  tooltipTranslateVars({ positionX: translate.x, positionY: translate.y }),
38
43
  ]), children: children }));
package/fonts/lib/fonts.ts CHANGED
@@ -5,7 +5,7 @@ const fontsPath = 'https://design.workdaycdn.com/assets/fonts/Sana-Sans';
5
5
  export const fonts: CSSObject[] = [
6
6
  {
7
7
  '@font-face': {
8
- fontFamily: 'Sana Sans LCG 05 VF',
8
+ fontFamily: 'Sana Sans VF',
9
9
  fontStyle: 'normal',
10
10
  fontWeight: [100, 700],
11
11
  src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`,
@@ -13,7 +13,7 @@ export const fonts: CSSObject[] = [
13
13
  },
14
14
  {
15
15
  '@font-face': {
16
- fontFamily: 'Sana Sans LCG 05 VF',
16
+ fontFamily: 'Sana Sans VF',
17
17
  fontStyle: 'italic',
18
18
  fontWeight: [100, 700],
19
19
  src: `local('Sana Sans LCG 05 VF'), local('SanaSansLCG05VF-Regular'), url(${fontsPath}/SanaSansLCG05-Variable.ttf) format('truetype')`,
package/menu/lib/MenuCard.tsx CHANGED
@@ -61,7 +61,7 @@ export const MenuCard = createSubcomponent('div')({
61
61
  displayName: 'Menu.Card',
62
62
  modelHook: useMenuModel,
63
63
  elemPropsHook: useMenuCard,
64
- })<MenuCardProps>(({minWidth, maxHeight, ...elemProps}, Element, model) => {
64
+ })<MenuCardProps>(({minWidth, maxHeight, variant, ...elemProps}, Element, model) => {
65
65
  const transformOrigin = React.useMemo(() => {
66
66
  return getTransformFromPlacement(model.state.placement || 'bottom');
67
67
  }, [model.state.placement]);
@@ -69,6 +69,7 @@ export const MenuCard = createSubcomponent('div')({
69
69
  return (
70
70
  <Card
71
71
  as={Element}
72
+ variant={variant}
72
73
  {...mergeStyles(
73
74
  elemProps,
74
75
  menuCardStencil({
package/menu/lib/MenuList.tsx CHANGED
@@ -35,7 +35,6 @@ export const useMenuList = composeHooks(
35
35
  export const menuListStencil = createStencil({
36
36
  extends: cornerShapeStencil,
37
37
  base: {
38
- background: system.legacy.color.surface.popover,
39
38
  [cornerShapeStencil.vars.shape]: system.legacy.shape.xxl,
40
39
  padding: 0,
41
40
  gap: base.legacy.size25,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "16.0.0-alpha.0489-next.0",
3
+ "version": "16.0.0-alpha.0491-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -53,10 +53,10 @@
53
53
  "@tanstack/react-virtual": "^3.13.9",
54
54
  "@workday/canvas-colors-web": "^2.0.0",
55
55
  "@workday/canvas-expressive-icons-web": "1.0.2",
56
- "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0489-next.0",
57
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0489-next.0",
56
+ "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0491-next.0",
57
+ "@workday/canvas-kit-styling": "^16.0.0-alpha.0491-next.0",
58
58
  "@workday/canvas-system-icons-web": "5.0.1",
59
- "@workday/canvas-tokens-web": "4.4.0-beta.7",
59
+ "@workday/canvas-tokens-web": "4.4.0-beta.11",
60
60
  "@workday/design-assets-types": "^0.3.0",
61
61
  "chroma-js": "^2.2.0",
62
62
  "csstype": "^3.0.2",
@@ -69,5 +69,5 @@
69
69
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
70
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
71
  },
72
- "gitHead": "7fd27af4a93c1a32acd105aefd72090a1d1b458a"
72
+ "gitHead": "46f6ffe99425371997fcc5ad1821235567db140b"
73
73
  }
package/popup/lib/PopupCard.tsx CHANGED
@@ -124,7 +124,7 @@ export const PopupCard = createSubcomponent('div')({
124
124
  displayName: 'Popup.Card',
125
125
  modelHook: usePopupModel,
126
126
  elemPropsHook: usePopupCard,
127
- })<PopupCardProps>(({children, ref, ...elemProps}, Element, model) => {
127
+ })<PopupCardProps>(({children, ref, variant, ...elemProps}, Element, model) => {
128
128
  const transformOrigin = React.useMemo(() => {
129
129
  return getTransformFromPlacement(model.state.placement || 'bottom');
130
130
  }, [model.state.placement]);
@@ -135,6 +135,7 @@ export const PopupCard = createSubcomponent('div')({
135
135
  <Card
136
136
  as={Element}
137
137
  ref={ref}
138
+ variant={variant}
138
139
  {...mergeStyles(elemProps, [
139
140
  popupCardStencil({
140
141
  transformOriginHorizontal: transformOrigin.horizontal,
package/toast/lib/Toast.tsx CHANGED
@@ -57,12 +57,17 @@ const toastStencil = createStencil({
57
57
  gap: base.legacy.size150,
58
58
  borderRadius: system.legacy.shape.xl,
59
59
  border: `${px2rem(1)} solid ${system.color.border.default}`,
60
- backgroundColor: system.legacy.color.surface.default,
61
60
  boxShadow: system.depth[5],
62
61
 
63
62
  '@media (forced-colors: active)': {
64
63
  outline: `${px2rem(1)} solid CanvasText`,
65
64
  },
65
+ variant: {
66
+ alt: {
67
+ border: `${px2rem(1)} solid ${system.sana.color.border.elevated}`,
68
+ },
69
+ tonal: {},
70
+ },
66
71
  },
67
72
  });
68
73
 
@@ -117,11 +122,12 @@ export const Toast = createContainer('div')({
117
122
  */
118
123
  Link: ToastLink,
119
124
  },
120
- })<ToastProps>(({children, ...elemProps}, _, model) => {
125
+ })<ToastProps>(({children, variant, ...elemProps}, _, model) => {
121
126
  return (
122
127
  <Popup.Card
128
+ variant={variant}
123
129
  {...getAriaAttributes(model.state.mode, model.state.id)}
124
- {...mergeStyles(elemProps, toastStencil())}
130
+ {...mergeStyles(elemProps, toastStencil({variant}))}
125
131
  >
126
132
  {children}
127
133
  </Popup.Card>
package/tooltip/lib/Tooltip.tsx CHANGED
@@ -76,6 +76,10 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
76
76
  * Amount of time (in ms) to delay before hiding the tooltip
77
77
  */
78
78
  hideDelay?: number;
79
+ /**
80
+ * The `alt` variant is designed for use on alternative page backgrounds (`system.color.bg.alt.default`). Use this variant to maintain proper visual hierarchy when placing components on colored backgrounds. While the default variant should be used on `system.color.bg.default` backgrounds, the `alt` variant ensures the component remains visually elevated on `system.color.bg.alt.default` backgrounds.
81
+ */
82
+ variant?: 'alt';
79
83
  }
80
84
 
81
85
  function mergeCallbacks<T extends {[key: string]: any}>(
@@ -106,6 +110,7 @@ export const Tooltip = createComponent('div')({
106
110
  showDelay = 300,
107
111
  hideDelay = 100,
108
112
  fallbackPlacements = defaultFallbackPlacements,
113
+ variant,
109
114
  ...elemProps
110
115
  }: TooltipProps) {
111
116
  const titleText = innerText(title);
@@ -157,6 +162,7 @@ export const Tooltip = createComponent('div')({
157
162
  {...handleCsProp(elemProps)}
158
163
  {...tooltipProps}
159
164
  elementHasFocus={elementHasFocus}
165
+ variant={variant}
160
166
  >
161
167
  {title}
162
168
  </TooltipContainer>
package/tooltip/lib/TooltipContainer.tsx CHANGED
@@ -6,7 +6,14 @@ import {
6
6
  getTransformOrigin,
7
7
  } from '@workday/canvas-kit-react/common';
8
8
  import {mergeStyles} from '@workday/canvas-kit-react/layout';
9
- import {calc, createStencil, createVars, keyframes, px2rem} from '@workday/canvas-kit-styling';
9
+ import {
10
+ calc,
11
+ createStencil,
12
+ createVars,
13
+ cssVar,
14
+ keyframes,
15
+ px2rem,
16
+ } from '@workday/canvas-kit-styling';
10
17
  import {base, system} from '@workday/canvas-tokens-web';
11
18
 
12
19
  export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,6 +32,7 @@ export interface TooltipContainerProps extends React.HTMLAttributes<HTMLDivEleme
25
32
  * @private
26
33
  */
27
34
  elementHasFocus?: boolean;
35
+ variant?: 'alt';
28
36
  }
29
37
 
30
38
  const defaultTransformOrigin = {
@@ -52,8 +60,9 @@ export const tooltipContainerStencil = createStencil({
52
60
  vars: {
53
61
  tooltipTransformOriginHorizontal: '',
54
62
  tooltipTransformOriginVertical: '',
63
+ background: '',
55
64
  },
56
- base: ({tooltipTransformOriginHorizontal, tooltipTransformOriginVertical}) => ({
65
+ base: ({tooltipTransformOriginHorizontal, tooltipTransformOriginVertical, background}) => ({
57
66
  ...system.legacy.type.subtext.lg,
58
67
  display: 'inline-flex',
59
68
  position: 'relative',
@@ -75,7 +84,7 @@ export const tooltipContainerStencil = createStencil({
75
84
  border: `${px2rem(1)} solid ${system.color.border.default}`,
76
85
  zIndex: -1,
77
86
  margin: 0,
78
- backgroundColor: system.legacy.color.surface.default,
87
+ background: cssVar(background, system.legacy.color.surface.default),
79
88
  position: 'absolute',
80
89
  top: 0,
81
90
  left: 0,
@@ -113,13 +122,27 @@ export const tooltipContainerStencil = createStencil({
113
122
  margin: px2rem(6),
114
123
  },
115
124
  },
125
+ variant: {
126
+ alt: ({background}) => ({
127
+ '&:before': {
128
+ background: cssVar(background, system.sana.color.surface.elevated),
129
+ border: `${px2rem(1)} solid ${system.sana.color.border.elevated}`,
130
+ },
131
+ }),
132
+ },
116
133
  },
117
134
  });
118
135
 
119
136
  export const TooltipContainer = createComponent('div')<TooltipContainerProps>({
120
137
  displayName: 'TooltipContainer',
121
138
  Component: (
122
- {children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, ...elemProps},
139
+ {
140
+ children,
141
+ transformOrigin = defaultTransformOrigin,
142
+ elementHasFocus = false,
143
+ variant,
144
+ ...elemProps
145
+ },
123
146
  ref,
124
147
  Element
125
148
  ) => {
@@ -136,6 +159,7 @@ export const TooltipContainer = createComponent('div')<TooltipContainerProps>({
136
159
  tooltipTransformOriginHorizontal: transformOrigin?.horizontal,
137
160
  tooltipTransformOriginVertical: transformOrigin?.vertical,
138
161
  elementHasFocus,
162
+ variant,
139
163
  }),
140
164
  tooltipTranslateVars({positionX: translate.x, positionY: translate.y}),
141
165
  ])}