@workday/canvas-kit-react 11.0.0-alpha.758-next.0 → 11.0.0-alpha.760-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 (29) hide show
  1. package/card/index.ts +3 -1
  2. package/card/lib/Card.tsx +12 -9
  3. package/card/lib/CardBody.tsx +12 -4
  4. package/card/lib/CardHeading.tsx +14 -17
  5. package/dist/commonjs/card/index.d.ts +3 -1
  6. package/dist/commonjs/card/index.d.ts.map +1 -1
  7. package/dist/commonjs/card/index.js +6 -1
  8. package/dist/commonjs/card/lib/Card.d.ts +1 -0
  9. package/dist/commonjs/card/lib/Card.d.ts.map +1 -1
  10. package/dist/commonjs/card/lib/Card.js +6 -3
  11. package/dist/commonjs/card/lib/CardBody.d.ts +103 -0
  12. package/dist/commonjs/card/lib/CardBody.d.ts.map +1 -1
  13. package/dist/commonjs/card/lib/CardBody.js +10 -2
  14. package/dist/commonjs/card/lib/CardHeading.d.ts +103 -0
  15. package/dist/commonjs/card/lib/CardHeading.d.ts.map +1 -1
  16. package/dist/commonjs/card/lib/CardHeading.js +8 -3
  17. package/dist/es6/card/index.d.ts +3 -1
  18. package/dist/es6/card/index.d.ts.map +1 -1
  19. package/dist/es6/card/index.js +3 -1
  20. package/dist/es6/card/lib/Card.d.ts +1 -0
  21. package/dist/es6/card/lib/Card.d.ts.map +1 -1
  22. package/dist/es6/card/lib/Card.js +7 -4
  23. package/dist/es6/card/lib/CardBody.d.ts +103 -0
  24. package/dist/es6/card/lib/CardBody.d.ts.map +1 -1
  25. package/dist/es6/card/lib/CardBody.js +10 -2
  26. package/dist/es6/card/lib/CardHeading.d.ts +103 -0
  27. package/dist/es6/card/lib/CardHeading.d.ts.map +1 -1
  28. package/dist/es6/card/lib/CardHeading.js +9 -4
  29. package/package.json +4 -4
package/card/index.ts CHANGED
@@ -1 +1,3 @@
1
- export {Card} from './lib/Card';
1
+ export {Card, cardStencil} from './lib/Card';
2
+ export {cardHeadingStencil} from './lib/CardHeading';
3
+ export {cardBodyStencil} from './lib/CardBody';
package/card/lib/Card.tsx CHANGED
@@ -2,8 +2,8 @@ import * as React from 'react';
2
2
 
3
3
  import {createComponent} from '@workday/canvas-kit-react/common';
4
4
  import {mergeStyles, BoxProps} from '@workday/canvas-kit-react/layout';
5
- import {createStyles} from '@workday/canvas-kit-styling';
6
- import {base, system} from '@workday/canvas-tokens-web';
5
+ import {createStencil, px2rem} from '@workday/canvas-kit-styling';
6
+ import {system} from '@workday/canvas-tokens-web';
7
7
 
8
8
  import {CardHeading} from './CardHeading';
9
9
  import {CardBody} from './CardBody';
@@ -15,12 +15,15 @@ export interface CardProps extends BoxProps {
15
15
  children?: React.ReactNode;
16
16
  }
17
17
 
18
- const cardBaseStyles = createStyles({
19
- boxShadow: system.depth[1],
20
- padding: system.space.x8,
21
- backgroundColor: base.frenchVanilla100,
22
- border: `0.0625rem solid ${base.soap500}`,
23
- borderRadius: system.shape.x2,
18
+ // .cnvs-card
19
+ export const cardStencil = createStencil({
20
+ base: {
21
+ boxShadow: system.depth[1],
22
+ padding: system.space.x8,
23
+ backgroundColor: system.color.bg.default,
24
+ border: `${px2rem(1)} solid ${system.color.border.container}`,
25
+ borderRadius: system.shape.x2,
26
+ },
24
27
  });
25
28
 
26
29
  /**
@@ -39,7 +42,7 @@ export const Card = createComponent('div')({
39
42
  displayName: 'Card',
40
43
  Component: ({children, ...elemProps}: CardProps, ref, Element) => {
41
44
  return (
42
- <Element ref={ref} {...mergeStyles(elemProps, cardBaseStyles)}>
45
+ <Element ref={ref} {...mergeStyles(elemProps, cardStencil())}>
43
46
  {children}
44
47
  </Element>
45
48
  );
package/card/lib/CardBody.tsx CHANGED
@@ -1,18 +1,26 @@
1
1
  import * as React from 'react';
2
2
 
3
3
  import {createComponent} from '@workday/canvas-kit-react/common';
4
- import {BoxProps} from '@workday/canvas-kit-react/layout';
5
- import {Subtext} from '@workday/canvas-kit-react/text';
4
+ import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
5
+ import {textStencil} from '@workday/canvas-kit-react/text';
6
+ import {createStencil} from '@workday/canvas-kit-styling';
6
7
 
7
8
  export interface CardBodyProps extends BoxProps {}
8
9
 
10
+ // .cnvs-card-body
11
+ export const cardBodyStencil = createStencil({
12
+ extends: textStencil,
13
+ base: {},
14
+ defaultModifiers: {typeLevel: 'subtext.large'},
15
+ });
16
+
9
17
  export const CardBody = createComponent('div')({
10
18
  displayName: 'Card.Body',
11
19
  Component: ({children, ...elemProps}: CardBodyProps, ref, Element) => {
12
20
  return (
13
- <Subtext size="large" ref={ref} as={Element} {...elemProps}>
21
+ <Element ref={ref} {...mergeStyles(elemProps, cardBodyStencil())}>
14
22
  {children}
15
- </Subtext>
23
+ </Element>
16
24
  );
17
25
  },
18
26
  });
package/card/lib/CardHeading.tsx CHANGED
@@ -2,8 +2,8 @@ import * as React from 'react';
2
2
 
3
3
  import {createComponent} from '@workday/canvas-kit-react/common';
4
4
  import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
5
- import {BodyText} from '@workday/canvas-kit-react/text';
6
- import {createStyles} from '@workday/canvas-kit-styling';
5
+ import {textStencil} from '@workday/canvas-kit-react/text';
6
+ import {createStencil} from '@workday/canvas-kit-styling';
7
7
  import {system} from '@workday/canvas-tokens-web';
8
8
 
9
9
  export interface CardHeadingProps extends BoxProps {
@@ -14,28 +14,25 @@ export interface CardHeadingProps extends BoxProps {
14
14
  children?: React.ReactNode;
15
15
  }
16
16
 
17
- const cardHeadingBaseStyles = createStyles({
18
- fontWeight: system.fontWeight.bold,
19
- marginBottom: system.space.x6,
20
- marginTop: 0,
17
+ // .cnvs-card-heading
18
+ export const cardHeadingStencil = createStencil({
19
+ extends: textStencil,
20
+ base: {
21
+ color: system.color.text.strong,
22
+ fontWeight: system.fontWeight.bold,
23
+ marginBottom: system.space.x6,
24
+ marginTop: system.space.zero,
25
+ },
26
+ defaultModifiers: {typeLevel: 'body.large'},
21
27
  });
22
28
 
23
29
  export const CardHeading = createComponent('h3')({
24
30
  displayName: 'Card.Heading',
25
31
  Component: ({children, ...elemProps}: CardHeadingProps, ref, Element) => {
26
32
  return (
27
- <BodyText
28
- size="large"
29
- color="blackPepper400"
30
- fontWeight="bold"
31
- marginBottom="m"
32
- marginTop={0}
33
- ref={ref}
34
- as={Element}
35
- {...mergeStyles(elemProps, cardHeadingBaseStyles)}
36
- >
33
+ <Element ref={ref} {...mergeStyles(elemProps, cardHeadingStencil())}>
37
34
  {children}
38
- </BodyText>
35
+ </Element>
39
36
  );
40
37
  },
41
38
  });
package/dist/commonjs/card/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
- export { Card } from './lib/Card';
1
+ export { Card, cardStencil } from './lib/Card';
2
+ export { cardHeadingStencil } from './lib/CardHeading';
3
+ export { cardBodyStencil } from './lib/CardBody';
2
4
  //# sourceMappingURL=index.d.ts.map
package/dist/commonjs/card/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,WAAW,EAAC,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC"}
package/dist/commonjs/card/index.js CHANGED
@@ -1,5 +1,10 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Card = void 0;
3
+ exports.cardBodyStencil = exports.cardHeadingStencil = exports.cardStencil = exports.Card = void 0;
4
4
  var Card_1 = require("./lib/Card");
5
5
  Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.Card; } });
6
+ Object.defineProperty(exports, "cardStencil", { enumerable: true, get: function () { return Card_1.cardStencil; } });
7
+ var CardHeading_1 = require("./lib/CardHeading");
8
+ Object.defineProperty(exports, "cardHeadingStencil", { enumerable: true, get: function () { return CardHeading_1.cardHeadingStencil; } });
9
+ var CardBody_1 = require("./lib/CardBody");
10
+ Object.defineProperty(exports, "cardBodyStencil", { enumerable: true, get: function () { return CardBody_1.cardBodyStencil; } });
package/dist/commonjs/card/lib/Card.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface CardProps extends BoxProps {
6
6
  */
7
7
  children?: React.ReactNode;
8
8
  }
9
+ export declare const cardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
9
10
  /**
10
11
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
11
12
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
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;CAC5B;AAUD;;;;;;;;;;;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;CAC5B;AAGD,eAAO,MAAM,WAAW,yIAQtB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}
package/dist/commonjs/card/lib/Card.js CHANGED
@@ -19,7 +19,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
19
19
  return result;
20
20
  };
21
21
  Object.defineProperty(exports, "__esModule", { value: true });
22
- exports.Card = void 0;
22
+ exports.Card = exports.cardStencil = void 0;
23
23
  const React = __importStar(require("react"));
24
24
  const common_1 = require("@workday/canvas-kit-react/common");
25
25
  const layout_1 = require("@workday/canvas-kit-react/layout");
@@ -27,7 +27,10 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
27
27
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
28
28
  const CardHeading_1 = require("./CardHeading");
29
29
  const CardBody_1 = require("./CardBody");
30
- const cardBaseStyles = canvas_kit_styling_1.createStyles({ name: "9be26c", styles: "box-shadow:var(--cnvs-sys-depth-1);padding:var(--cnvs-sys-space-x8);background-color:var(--cnvs-base-palette-french-vanilla-100);border:0.0625rem solid var(--cnvs-base-palette-soap-500);border-radius:var(--cnvs-sys-shape-x2);" });
30
+ // .cnvs-card
31
+ exports.cardStencil = canvas_kit_styling_1.createStencil({
32
+ base: { name: "2a6e2f", styles: "box-shadow:var(--cnvs-sys-depth-1);padding:var(--cnvs-sys-space-x8);background-color:var(--cnvs-sys-color-bg-default);border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);" }
33
+ }, "cnvs-card");
31
34
  /**
32
35
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
33
36
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
@@ -43,7 +46,7 @@ const cardBaseStyles = canvas_kit_styling_1.createStyles({ name: "9be26c", style
43
46
  exports.Card = common_1.createComponent('div')({
44
47
  displayName: 'Card',
45
48
  Component: ({ children, ...elemProps }, ref, Element) => {
46
- return (React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, cardBaseStyles)), children));
49
+ return (React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, exports.cardStencil())), children));
47
50
  },
48
51
  subComponents: {
49
52
  /**
package/dist/commonjs/card/lib/CardBody.d.ts CHANGED
@@ -1,5 +1,108 @@
1
1
  import { BoxProps } from '@workday/canvas-kit-react/layout';
2
2
  export interface CardBodyProps extends BoxProps {
3
3
  }
4
+ export declare const cardBodyStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, import("@workday/canvas-kit-styling").Stencil<{
5
+ typeLevel: {
6
+ 'title.large': {
7
+ color: "--cnvs-sys-color-text-strong";
8
+ fontFamily: "--cnvs-base-font-family-50";
9
+ fontWeight: "--cnvs-base-font-weight-700";
10
+ lineHeight: "--cnvs-base-line-height-600";
11
+ fontSize: "--cnvs-base-font-size-600";
12
+ };
13
+ 'title.medium': {
14
+ color: "--cnvs-sys-color-text-strong";
15
+ fontFamily: "--cnvs-base-font-family-50";
16
+ fontWeight: "--cnvs-base-font-weight-700";
17
+ lineHeight: "--cnvs-base-line-height-500";
18
+ fontSize: "--cnvs-base-font-size-500";
19
+ };
20
+ 'title.small': {
21
+ color: "--cnvs-sys-color-text-strong";
22
+ fontFamily: "--cnvs-base-font-family-50";
23
+ fontWeight: "--cnvs-base-font-weight-700";
24
+ lineHeight: "--cnvs-base-line-height-400";
25
+ fontSize: "--cnvs-base-font-size-400";
26
+ };
27
+ 'heading.large': {
28
+ color: "--cnvs-sys-color-text-strong";
29
+ fontFamily: "--cnvs-base-font-family-50";
30
+ fontWeight: "--cnvs-base-font-weight-700";
31
+ lineHeight: "--cnvs-base-line-height-350";
32
+ fontSize: "--cnvs-base-font-size-300";
33
+ };
34
+ 'heading.medium': {
35
+ color: "--cnvs-sys-color-text-strong";
36
+ fontFamily: "--cnvs-base-font-family-50";
37
+ fontWeight: "--cnvs-base-font-weight-700";
38
+ lineHeight: "--cnvs-base-line-height-300";
39
+ fontSize: "--cnvs-base-font-size-250";
40
+ };
41
+ 'heading.small': {
42
+ color: "--cnvs-sys-color-text-strong";
43
+ fontFamily: "--cnvs-base-font-family-50";
44
+ fontWeight: "--cnvs-base-font-weight-700";
45
+ lineHeight: "--cnvs-base-line-height-250";
46
+ fontSize: "--cnvs-base-font-size-200";
47
+ };
48
+ 'body.large': {
49
+ color: "--cnvs-sys-color-text-default";
50
+ fontFamily: "--cnvs-base-font-family-50";
51
+ fontWeight: "--cnvs-base-font-weight-400";
52
+ lineHeight: "--cnvs-base-line-height-200";
53
+ fontSize: "--cnvs-base-font-size-150";
54
+ };
55
+ 'body.medium': {
56
+ color: "--cnvs-sys-color-text-default";
57
+ fontFamily: "--cnvs-base-font-family-50";
58
+ fontWeight: "--cnvs-base-font-weight-400";
59
+ lineHeight: "--cnvs-base-line-height-200";
60
+ fontSize: "--cnvs-base-font-size-125";
61
+ };
62
+ 'body.small': {
63
+ color: "--cnvs-sys-color-text-default";
64
+ fontFamily: "--cnvs-base-font-family-50";
65
+ fontWeight: "--cnvs-base-font-weight-400";
66
+ lineHeight: "--cnvs-base-line-height-150";
67
+ fontSize: "--cnvs-base-font-size-100";
68
+ letterSpacing: "--cnvs-base-letter-spacing-200";
69
+ };
70
+ 'subtext.large': {
71
+ color: "--cnvs-sys-color-text-default";
72
+ fontFamily: "--cnvs-base-font-family-50";
73
+ fontWeight: "--cnvs-base-font-weight-400";
74
+ lineHeight: "--cnvs-base-line-height-100";
75
+ fontSize: "--cnvs-base-font-size-75";
76
+ letterSpacing: "--cnvs-base-letter-spacing-150";
77
+ };
78
+ 'subtext.medium': {
79
+ color: "--cnvs-sys-color-text-default";
80
+ fontFamily: "--cnvs-base-font-family-50";
81
+ fontWeight: "--cnvs-base-font-weight-400";
82
+ lineHeight: "--cnvs-base-line-height-50";
83
+ fontSize: "--cnvs-base-font-size-50";
84
+ letterSpacing: "--cnvs-base-letter-spacing-100";
85
+ };
86
+ 'subtext.small': {
87
+ color: "--cnvs-sys-color-text-default";
88
+ fontFamily: "--cnvs-base-font-family-50";
89
+ fontWeight: "--cnvs-base-font-weight-400";
90
+ lineHeight: "--cnvs-base-line-height-50";
91
+ fontSize: "--cnvs-base-font-size-25";
92
+ letterSpacing: "--cnvs-base-letter-spacing-50";
93
+ };
94
+ };
95
+ variant: {
96
+ error: {
97
+ color: "--cnvs-sys-color-text-critical-default";
98
+ };
99
+ hint: {
100
+ color: "--cnvs-sys-color-text-hint";
101
+ };
102
+ inverse: {
103
+ color: "--cnvs-sys-color-text-inverse";
104
+ };
105
+ };
106
+ }, {}, never, never>, never>;
4
107
  export declare const CardBody: import("@workday/canvas-kit-react/common").ElementComponent<"div", CardBodyProps>;
5
108
  //# sourceMappingURL=CardBody.d.ts.map
package/dist/commonjs/card/lib/CardBody.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG1D,MAAM,WAAW,aAAc,SAAQ,QAAQ;CAAG;AAElD,eAAO,MAAM,QAAQ,mFASnB,CAAC"}
1
+ {"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,aAAc,SAAQ,QAAQ;CAAG;AAGlD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAI1B,CAAC;AAEH,eAAO,MAAM,QAAQ,mFASnB,CAAC"}
package/dist/commonjs/card/lib/CardBody.js CHANGED
@@ -19,13 +19,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
19
19
  return result;
20
20
  };
21
21
  Object.defineProperty(exports, "__esModule", { value: true });
22
- exports.CardBody = void 0;
22
+ exports.CardBody = exports.cardBodyStencil = void 0;
23
23
  const React = __importStar(require("react"));
24
24
  const common_1 = require("@workday/canvas-kit-react/common");
25
+ const layout_1 = require("@workday/canvas-kit-react/layout");
25
26
  const text_1 = require("@workday/canvas-kit-react/text");
27
+ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
28
+ // .cnvs-card-body
29
+ exports.cardBodyStencil = canvas_kit_styling_1.createStencil({
30
+ extends: text_1.textStencil,
31
+ base: { name: "859f1f", styles: "" },
32
+ defaultModifiers: { typeLevel: 'subtext.large' }
33
+ }, "cnvs-card-body");
26
34
  exports.CardBody = common_1.createComponent('div')({
27
35
  displayName: 'Card.Body',
28
36
  Component: ({ children, ...elemProps }, ref, Element) => {
29
- return (React.createElement(text_1.Subtext, Object.assign({ size: "large", ref: ref, as: Element }, elemProps), children));
37
+ return (React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, exports.cardBodyStencil())), children));
30
38
  },
31
39
  });
package/dist/commonjs/card/lib/CardHeading.d.ts CHANGED
@@ -7,5 +7,108 @@ export interface CardHeadingProps extends BoxProps {
7
7
  id?: string;
8
8
  children?: React.ReactNode;
9
9
  }
10
+ export declare const cardHeadingStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, import("@workday/canvas-kit-styling").Stencil<{
11
+ typeLevel: {
12
+ 'title.large': {
13
+ color: "--cnvs-sys-color-text-strong";
14
+ fontFamily: "--cnvs-base-font-family-50";
15
+ fontWeight: "--cnvs-base-font-weight-700";
16
+ lineHeight: "--cnvs-base-line-height-600";
17
+ fontSize: "--cnvs-base-font-size-600";
18
+ };
19
+ 'title.medium': {
20
+ color: "--cnvs-sys-color-text-strong";
21
+ fontFamily: "--cnvs-base-font-family-50";
22
+ fontWeight: "--cnvs-base-font-weight-700";
23
+ lineHeight: "--cnvs-base-line-height-500";
24
+ fontSize: "--cnvs-base-font-size-500";
25
+ };
26
+ 'title.small': {
27
+ color: "--cnvs-sys-color-text-strong";
28
+ fontFamily: "--cnvs-base-font-family-50";
29
+ fontWeight: "--cnvs-base-font-weight-700";
30
+ lineHeight: "--cnvs-base-line-height-400";
31
+ fontSize: "--cnvs-base-font-size-400";
32
+ };
33
+ 'heading.large': {
34
+ color: "--cnvs-sys-color-text-strong";
35
+ fontFamily: "--cnvs-base-font-family-50";
36
+ fontWeight: "--cnvs-base-font-weight-700";
37
+ lineHeight: "--cnvs-base-line-height-350";
38
+ fontSize: "--cnvs-base-font-size-300";
39
+ };
40
+ 'heading.medium': {
41
+ color: "--cnvs-sys-color-text-strong";
42
+ fontFamily: "--cnvs-base-font-family-50";
43
+ fontWeight: "--cnvs-base-font-weight-700";
44
+ lineHeight: "--cnvs-base-line-height-300";
45
+ fontSize: "--cnvs-base-font-size-250";
46
+ };
47
+ 'heading.small': {
48
+ color: "--cnvs-sys-color-text-strong";
49
+ fontFamily: "--cnvs-base-font-family-50";
50
+ fontWeight: "--cnvs-base-font-weight-700";
51
+ lineHeight: "--cnvs-base-line-height-250";
52
+ fontSize: "--cnvs-base-font-size-200";
53
+ };
54
+ 'body.large': {
55
+ color: "--cnvs-sys-color-text-default";
56
+ fontFamily: "--cnvs-base-font-family-50";
57
+ fontWeight: "--cnvs-base-font-weight-400";
58
+ lineHeight: "--cnvs-base-line-height-200";
59
+ fontSize: "--cnvs-base-font-size-150";
60
+ };
61
+ 'body.medium': {
62
+ color: "--cnvs-sys-color-text-default";
63
+ fontFamily: "--cnvs-base-font-family-50";
64
+ fontWeight: "--cnvs-base-font-weight-400";
65
+ lineHeight: "--cnvs-base-line-height-200";
66
+ fontSize: "--cnvs-base-font-size-125";
67
+ };
68
+ 'body.small': {
69
+ color: "--cnvs-sys-color-text-default";
70
+ fontFamily: "--cnvs-base-font-family-50";
71
+ fontWeight: "--cnvs-base-font-weight-400";
72
+ lineHeight: "--cnvs-base-line-height-150";
73
+ fontSize: "--cnvs-base-font-size-100";
74
+ letterSpacing: "--cnvs-base-letter-spacing-200";
75
+ };
76
+ 'subtext.large': {
77
+ color: "--cnvs-sys-color-text-default";
78
+ fontFamily: "--cnvs-base-font-family-50";
79
+ fontWeight: "--cnvs-base-font-weight-400";
80
+ lineHeight: "--cnvs-base-line-height-100";
81
+ fontSize: "--cnvs-base-font-size-75";
82
+ letterSpacing: "--cnvs-base-letter-spacing-150";
83
+ };
84
+ 'subtext.medium': {
85
+ color: "--cnvs-sys-color-text-default";
86
+ fontFamily: "--cnvs-base-font-family-50";
87
+ fontWeight: "--cnvs-base-font-weight-400";
88
+ lineHeight: "--cnvs-base-line-height-50";
89
+ fontSize: "--cnvs-base-font-size-50";
90
+ letterSpacing: "--cnvs-base-letter-spacing-100";
91
+ };
92
+ 'subtext.small': {
93
+ color: "--cnvs-sys-color-text-default";
94
+ fontFamily: "--cnvs-base-font-family-50";
95
+ fontWeight: "--cnvs-base-font-weight-400";
96
+ lineHeight: "--cnvs-base-line-height-50";
97
+ fontSize: "--cnvs-base-font-size-25";
98
+ letterSpacing: "--cnvs-base-letter-spacing-50";
99
+ };
100
+ };
101
+ variant: {
102
+ error: {
103
+ color: "--cnvs-sys-color-text-critical-default";
104
+ };
105
+ hint: {
106
+ color: "--cnvs-sys-color-text-hint";
107
+ };
108
+ inverse: {
109
+ color: "--cnvs-sys-color-text-inverse";
110
+ };
111
+ };
112
+ }, {}, never, never>, never>;
10
113
  export declare const CardHeading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", CardHeadingProps>;
11
114
  //# sourceMappingURL=CardHeading.d.ts.map
package/dist/commonjs/card/lib/CardHeading.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAKvE,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAQD,eAAO,MAAM,WAAW,qFAkBtB,CAAC"}
1
+ {"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAKvE,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAS7B,CAAC;AAEH,eAAO,MAAM,WAAW,qFAStB,CAAC"}
package/dist/commonjs/card/lib/CardHeading.js CHANGED
@@ -19,17 +19,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
19
19
  return result;
20
20
  };
21
21
  Object.defineProperty(exports, "__esModule", { value: true });
22
- exports.CardHeading = void 0;
22
+ exports.CardHeading = exports.cardHeadingStencil = void 0;
23
23
  const React = __importStar(require("react"));
24
24
  const common_1 = require("@workday/canvas-kit-react/common");
25
25
  const layout_1 = require("@workday/canvas-kit-react/layout");
26
26
  const text_1 = require("@workday/canvas-kit-react/text");
27
27
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
28
28
  const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
29
- const cardHeadingBaseStyles = canvas_kit_styling_1.createStyles({ name: "cbe58f", styles: "font-weight:var(--cnvs-sys-font-weight-bold);margin-bottom:var(--cnvs-sys-space-x6);margin-top:0;" });
29
+ // .cnvs-card-heading
30
+ exports.cardHeadingStencil = canvas_kit_styling_1.createStencil({
31
+ extends: text_1.textStencil,
32
+ base: { name: "3b06e8", styles: "color:var(--cnvs-sys-color-text-strong);font-weight:var(--cnvs-sys-font-weight-bold);margin-bottom:var(--cnvs-sys-space-x6);margin-top:var(--cnvs-sys-space-zero);" },
33
+ defaultModifiers: { typeLevel: 'body.large' }
34
+ }, "cnvs-card-heading");
30
35
  exports.CardHeading = common_1.createComponent('h3')({
31
36
  displayName: 'Card.Heading',
32
37
  Component: ({ children, ...elemProps }, ref, Element) => {
33
- return (React.createElement(text_1.BodyText, Object.assign({ size: "large", color: "blackPepper400", fontWeight: "bold", marginBottom: "m", marginTop: 0, ref: ref, as: Element }, layout_1.mergeStyles(elemProps, cardHeadingBaseStyles)), children));
38
+ return (React.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, exports.cardHeadingStencil())), children));
34
39
  },
35
40
  });
package/dist/es6/card/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
- export { Card } from './lib/Card';
1
+ export { Card, cardStencil } from './lib/Card';
2
+ export { cardHeadingStencil } from './lib/CardHeading';
3
+ export { cardBodyStencil } from './lib/CardBody';
2
4
  //# sourceMappingURL=index.d.ts.map
package/dist/es6/card/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,WAAW,EAAC,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAC,eAAe,EAAC,MAAM,gBAAgB,CAAC"}
package/dist/es6/card/index.js CHANGED
@@ -1 +1,3 @@
1
- export { Card } from './lib/Card';
1
+ export { Card, cardStencil } from './lib/Card';
2
+ export { cardHeadingStencil } from './lib/CardHeading';
3
+ export { cardBodyStencil } from './lib/CardBody';
package/dist/es6/card/lib/Card.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface CardProps extends BoxProps {
6
6
  */
7
7
  children?: React.ReactNode;
8
8
  }
9
+ export declare const cardStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, never, never>;
9
10
  /**
10
11
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
11
12
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
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;CAC5B;AAUD;;;;;;;;;;;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;CAC5B;AAGD,eAAO,MAAM,WAAW,yIAQtB,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;OAiBG;;IAEH;;;;;OAKG;;CAGL,CAAC"}
package/dist/es6/card/lib/Card.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
- import { createStyles } from '@workday/canvas-kit-styling';
5
- import { base, system } from '@workday/canvas-tokens-web';
4
+ import { createStencil, px2rem } from '@workday/canvas-kit-styling';
5
+ import { system } from '@workday/canvas-tokens-web';
6
6
  import { CardHeading } from './CardHeading';
7
7
  import { CardBody } from './CardBody';
8
- const cardBaseStyles = createStyles({ name: "9be26c", styles: "box-shadow:var(--cnvs-sys-depth-1);padding:var(--cnvs-sys-space-x8);background-color:var(--cnvs-base-palette-french-vanilla-100);border:0.0625rem solid var(--cnvs-base-palette-soap-500);border-radius:var(--cnvs-sys-shape-x2);" });
8
+ // .cnvs-card
9
+ export const cardStencil = createStencil({
10
+ base: { name: "2a6e2f", styles: "box-shadow:var(--cnvs-sys-depth-1);padding:var(--cnvs-sys-space-x8);background-color:var(--cnvs-sys-color-bg-default);border:0.0625rem solid var(--cnvs-sys-color-border-container);border-radius:var(--cnvs-sys-shape-x2);" }
11
+ }, "cnvs-card");
9
12
  /**
10
13
  * `Card` is a container component that holds a {@link CardBody Card.Body} and an optional
11
14
  * {@link CardHeading Card.Heading}. `Card` wraps a non-semantic `div` element. The element can be
@@ -21,7 +24,7 @@ const cardBaseStyles = createStyles({ name: "9be26c", styles: "box-shadow:var(--
21
24
  export const Card = createComponent('div')({
22
25
  displayName: 'Card',
23
26
  Component: ({ children, ...elemProps }, ref, Element) => {
24
- return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, cardBaseStyles)), children));
27
+ return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, cardStencil())), children));
25
28
  },
26
29
  subComponents: {
27
30
  /**
package/dist/es6/card/lib/CardBody.d.ts CHANGED
@@ -1,5 +1,108 @@
1
1
  import { BoxProps } from '@workday/canvas-kit-react/layout';
2
2
  export interface CardBodyProps extends BoxProps {
3
3
  }
4
+ export declare const cardBodyStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, import("@workday/canvas-kit-styling").Stencil<{
5
+ typeLevel: {
6
+ 'title.large': {
7
+ color: "--cnvs-sys-color-text-strong";
8
+ fontFamily: "--cnvs-base-font-family-50";
9
+ fontWeight: "--cnvs-base-font-weight-700";
10
+ lineHeight: "--cnvs-base-line-height-600";
11
+ fontSize: "--cnvs-base-font-size-600";
12
+ };
13
+ 'title.medium': {
14
+ color: "--cnvs-sys-color-text-strong";
15
+ fontFamily: "--cnvs-base-font-family-50";
16
+ fontWeight: "--cnvs-base-font-weight-700";
17
+ lineHeight: "--cnvs-base-line-height-500";
18
+ fontSize: "--cnvs-base-font-size-500";
19
+ };
20
+ 'title.small': {
21
+ color: "--cnvs-sys-color-text-strong";
22
+ fontFamily: "--cnvs-base-font-family-50";
23
+ fontWeight: "--cnvs-base-font-weight-700";
24
+ lineHeight: "--cnvs-base-line-height-400";
25
+ fontSize: "--cnvs-base-font-size-400";
26
+ };
27
+ 'heading.large': {
28
+ color: "--cnvs-sys-color-text-strong";
29
+ fontFamily: "--cnvs-base-font-family-50";
30
+ fontWeight: "--cnvs-base-font-weight-700";
31
+ lineHeight: "--cnvs-base-line-height-350";
32
+ fontSize: "--cnvs-base-font-size-300";
33
+ };
34
+ 'heading.medium': {
35
+ color: "--cnvs-sys-color-text-strong";
36
+ fontFamily: "--cnvs-base-font-family-50";
37
+ fontWeight: "--cnvs-base-font-weight-700";
38
+ lineHeight: "--cnvs-base-line-height-300";
39
+ fontSize: "--cnvs-base-font-size-250";
40
+ };
41
+ 'heading.small': {
42
+ color: "--cnvs-sys-color-text-strong";
43
+ fontFamily: "--cnvs-base-font-family-50";
44
+ fontWeight: "--cnvs-base-font-weight-700";
45
+ lineHeight: "--cnvs-base-line-height-250";
46
+ fontSize: "--cnvs-base-font-size-200";
47
+ };
48
+ 'body.large': {
49
+ color: "--cnvs-sys-color-text-default";
50
+ fontFamily: "--cnvs-base-font-family-50";
51
+ fontWeight: "--cnvs-base-font-weight-400";
52
+ lineHeight: "--cnvs-base-line-height-200";
53
+ fontSize: "--cnvs-base-font-size-150";
54
+ };
55
+ 'body.medium': {
56
+ color: "--cnvs-sys-color-text-default";
57
+ fontFamily: "--cnvs-base-font-family-50";
58
+ fontWeight: "--cnvs-base-font-weight-400";
59
+ lineHeight: "--cnvs-base-line-height-200";
60
+ fontSize: "--cnvs-base-font-size-125";
61
+ };
62
+ 'body.small': {
63
+ color: "--cnvs-sys-color-text-default";
64
+ fontFamily: "--cnvs-base-font-family-50";
65
+ fontWeight: "--cnvs-base-font-weight-400";
66
+ lineHeight: "--cnvs-base-line-height-150";
67
+ fontSize: "--cnvs-base-font-size-100";
68
+ letterSpacing: "--cnvs-base-letter-spacing-200";
69
+ };
70
+ 'subtext.large': {
71
+ color: "--cnvs-sys-color-text-default";
72
+ fontFamily: "--cnvs-base-font-family-50";
73
+ fontWeight: "--cnvs-base-font-weight-400";
74
+ lineHeight: "--cnvs-base-line-height-100";
75
+ fontSize: "--cnvs-base-font-size-75";
76
+ letterSpacing: "--cnvs-base-letter-spacing-150";
77
+ };
78
+ 'subtext.medium': {
79
+ color: "--cnvs-sys-color-text-default";
80
+ fontFamily: "--cnvs-base-font-family-50";
81
+ fontWeight: "--cnvs-base-font-weight-400";
82
+ lineHeight: "--cnvs-base-line-height-50";
83
+ fontSize: "--cnvs-base-font-size-50";
84
+ letterSpacing: "--cnvs-base-letter-spacing-100";
85
+ };
86
+ 'subtext.small': {
87
+ color: "--cnvs-sys-color-text-default";
88
+ fontFamily: "--cnvs-base-font-family-50";
89
+ fontWeight: "--cnvs-base-font-weight-400";
90
+ lineHeight: "--cnvs-base-line-height-50";
91
+ fontSize: "--cnvs-base-font-size-25";
92
+ letterSpacing: "--cnvs-base-letter-spacing-50";
93
+ };
94
+ };
95
+ variant: {
96
+ error: {
97
+ color: "--cnvs-sys-color-text-critical-default";
98
+ };
99
+ hint: {
100
+ color: "--cnvs-sys-color-text-hint";
101
+ };
102
+ inverse: {
103
+ color: "--cnvs-sys-color-text-inverse";
104
+ };
105
+ };
106
+ }, {}, never, never>, never>;
4
107
  export declare const CardBody: import("@workday/canvas-kit-react/common").ElementComponent<"div", CardBodyProps>;
5
108
  //# sourceMappingURL=CardBody.d.ts.map
package/dist/es6/card/lib/CardBody.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG1D,MAAM,WAAW,aAAc,SAAQ,QAAQ;CAAG;AAElD,eAAO,MAAM,QAAQ,mFASnB,CAAC"}
1
+ {"version":3,"file":"CardBody.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,aAAc,SAAQ,QAAQ;CAAG;AAGlD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAI1B,CAAC;AAEH,eAAO,MAAM,QAAQ,mFASnB,CAAC"}
package/dist/es6/card/lib/CardBody.js CHANGED
@@ -1,9 +1,17 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
- import { Subtext } from '@workday/canvas-kit-react/text';
3
+ import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
+ import { textStencil } from '@workday/canvas-kit-react/text';
5
+ import { createStencil } from '@workday/canvas-kit-styling';
6
+ // .cnvs-card-body
7
+ export const cardBodyStencil = createStencil({
8
+ extends: textStencil,
9
+ base: { name: "859f1f", styles: "" },
10
+ defaultModifiers: { typeLevel: 'subtext.large' }
11
+ }, "cnvs-card-body");
4
12
  export const CardBody = createComponent('div')({
5
13
  displayName: 'Card.Body',
6
14
  Component: ({ children, ...elemProps }, ref, Element) => {
7
- return (React.createElement(Subtext, Object.assign({ size: "large", ref: ref, as: Element }, elemProps), children));
15
+ return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, cardBodyStencil())), children));
8
16
  },
9
17
  });
package/dist/es6/card/lib/CardHeading.d.ts CHANGED
@@ -7,5 +7,108 @@ export interface CardHeadingProps extends BoxProps {
7
7
  id?: string;
8
8
  children?: React.ReactNode;
9
9
  }
10
+ export declare const cardHeadingStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, never>, {}, import("@workday/canvas-kit-styling").Stencil<{
11
+ typeLevel: {
12
+ 'title.large': {
13
+ color: "--cnvs-sys-color-text-strong";
14
+ fontFamily: "--cnvs-base-font-family-50";
15
+ fontWeight: "--cnvs-base-font-weight-700";
16
+ lineHeight: "--cnvs-base-line-height-600";
17
+ fontSize: "--cnvs-base-font-size-600";
18
+ };
19
+ 'title.medium': {
20
+ color: "--cnvs-sys-color-text-strong";
21
+ fontFamily: "--cnvs-base-font-family-50";
22
+ fontWeight: "--cnvs-base-font-weight-700";
23
+ lineHeight: "--cnvs-base-line-height-500";
24
+ fontSize: "--cnvs-base-font-size-500";
25
+ };
26
+ 'title.small': {
27
+ color: "--cnvs-sys-color-text-strong";
28
+ fontFamily: "--cnvs-base-font-family-50";
29
+ fontWeight: "--cnvs-base-font-weight-700";
30
+ lineHeight: "--cnvs-base-line-height-400";
31
+ fontSize: "--cnvs-base-font-size-400";
32
+ };
33
+ 'heading.large': {
34
+ color: "--cnvs-sys-color-text-strong";
35
+ fontFamily: "--cnvs-base-font-family-50";
36
+ fontWeight: "--cnvs-base-font-weight-700";
37
+ lineHeight: "--cnvs-base-line-height-350";
38
+ fontSize: "--cnvs-base-font-size-300";
39
+ };
40
+ 'heading.medium': {
41
+ color: "--cnvs-sys-color-text-strong";
42
+ fontFamily: "--cnvs-base-font-family-50";
43
+ fontWeight: "--cnvs-base-font-weight-700";
44
+ lineHeight: "--cnvs-base-line-height-300";
45
+ fontSize: "--cnvs-base-font-size-250";
46
+ };
47
+ 'heading.small': {
48
+ color: "--cnvs-sys-color-text-strong";
49
+ fontFamily: "--cnvs-base-font-family-50";
50
+ fontWeight: "--cnvs-base-font-weight-700";
51
+ lineHeight: "--cnvs-base-line-height-250";
52
+ fontSize: "--cnvs-base-font-size-200";
53
+ };
54
+ 'body.large': {
55
+ color: "--cnvs-sys-color-text-default";
56
+ fontFamily: "--cnvs-base-font-family-50";
57
+ fontWeight: "--cnvs-base-font-weight-400";
58
+ lineHeight: "--cnvs-base-line-height-200";
59
+ fontSize: "--cnvs-base-font-size-150";
60
+ };
61
+ 'body.medium': {
62
+ color: "--cnvs-sys-color-text-default";
63
+ fontFamily: "--cnvs-base-font-family-50";
64
+ fontWeight: "--cnvs-base-font-weight-400";
65
+ lineHeight: "--cnvs-base-line-height-200";
66
+ fontSize: "--cnvs-base-font-size-125";
67
+ };
68
+ 'body.small': {
69
+ color: "--cnvs-sys-color-text-default";
70
+ fontFamily: "--cnvs-base-font-family-50";
71
+ fontWeight: "--cnvs-base-font-weight-400";
72
+ lineHeight: "--cnvs-base-line-height-150";
73
+ fontSize: "--cnvs-base-font-size-100";
74
+ letterSpacing: "--cnvs-base-letter-spacing-200";
75
+ };
76
+ 'subtext.large': {
77
+ color: "--cnvs-sys-color-text-default";
78
+ fontFamily: "--cnvs-base-font-family-50";
79
+ fontWeight: "--cnvs-base-font-weight-400";
80
+ lineHeight: "--cnvs-base-line-height-100";
81
+ fontSize: "--cnvs-base-font-size-75";
82
+ letterSpacing: "--cnvs-base-letter-spacing-150";
83
+ };
84
+ 'subtext.medium': {
85
+ color: "--cnvs-sys-color-text-default";
86
+ fontFamily: "--cnvs-base-font-family-50";
87
+ fontWeight: "--cnvs-base-font-weight-400";
88
+ lineHeight: "--cnvs-base-line-height-50";
89
+ fontSize: "--cnvs-base-font-size-50";
90
+ letterSpacing: "--cnvs-base-letter-spacing-100";
91
+ };
92
+ 'subtext.small': {
93
+ color: "--cnvs-sys-color-text-default";
94
+ fontFamily: "--cnvs-base-font-family-50";
95
+ fontWeight: "--cnvs-base-font-weight-400";
96
+ lineHeight: "--cnvs-base-line-height-50";
97
+ fontSize: "--cnvs-base-font-size-25";
98
+ letterSpacing: "--cnvs-base-letter-spacing-50";
99
+ };
100
+ };
101
+ variant: {
102
+ error: {
103
+ color: "--cnvs-sys-color-text-critical-default";
104
+ };
105
+ hint: {
106
+ color: "--cnvs-sys-color-text-hint";
107
+ };
108
+ inverse: {
109
+ color: "--cnvs-sys-color-text-inverse";
110
+ };
111
+ };
112
+ }, {}, never, never>, never>;
10
113
  export declare const CardHeading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", CardHeadingProps>;
11
114
  //# sourceMappingURL=CardHeading.d.ts.map
package/dist/es6/card/lib/CardHeading.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAKvE,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAQD,eAAO,MAAM,WAAW,qFAkBtB,CAAC"}
1
+ {"version":3,"file":"CardHeading.d.ts","sourceRoot":"","sources":["../../../../card/lib/CardHeading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAKvE,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAS7B,CAAC;AAEH,eAAO,MAAM,WAAW,qFAStB,CAAC"}
package/dist/es6/card/lib/CardHeading.js CHANGED
@@ -1,13 +1,18 @@
1
1
  import * as React from 'react';
2
2
  import { createComponent } from '@workday/canvas-kit-react/common';
3
3
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
4
- import { BodyText } from '@workday/canvas-kit-react/text';
5
- import { createStyles } from '@workday/canvas-kit-styling';
4
+ import { textStencil } from '@workday/canvas-kit-react/text';
5
+ import { createStencil } from '@workday/canvas-kit-styling';
6
6
  import { system } from '@workday/canvas-tokens-web';
7
- const cardHeadingBaseStyles = createStyles({ name: "cbe58f", styles: "font-weight:var(--cnvs-sys-font-weight-bold);margin-bottom:var(--cnvs-sys-space-x6);margin-top:0;" });
7
+ // .cnvs-card-heading
8
+ export const cardHeadingStencil = createStencil({
9
+ extends: textStencil,
10
+ base: { name: "3b06e8", styles: "color:var(--cnvs-sys-color-text-strong);font-weight:var(--cnvs-sys-font-weight-bold);margin-bottom:var(--cnvs-sys-space-x6);margin-top:var(--cnvs-sys-space-zero);" },
11
+ defaultModifiers: { typeLevel: 'body.large' }
12
+ }, "cnvs-card-heading");
8
13
  export const CardHeading = createComponent('h3')({
9
14
  displayName: 'Card.Heading',
10
15
  Component: ({ children, ...elemProps }, ref, Element) => {
11
- return (React.createElement(BodyText, Object.assign({ size: "large", color: "blackPepper400", fontWeight: "bold", marginBottom: "m", marginTop: 0, ref: ref, as: Element }, mergeStyles(elemProps, cardHeadingBaseStyles)), children));
16
+ return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, cardHeadingStencil())), children));
12
17
  },
13
18
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "11.0.0-alpha.758-next.0",
3
+ "version": "11.0.0-alpha.760-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",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.758-next.0",
53
- "@workday/canvas-kit-styling": "^11.0.0-alpha.758-next.0",
52
+ "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.760-next.0",
53
+ "@workday/canvas-kit-styling": "^11.0.0-alpha.760-next.0",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "^1.3.0",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "8d03e85b517b28f0f8dbf4918b9bda35a3e5d893"
70
+ "gitHead": "567f7f389a35212b6f58050c9e0bf5f9834589c8"
71
71
  }