@workday/canvas-kit-preview-react 14.0.0-alpha.1210-next.0 → 14.0.0-alpha.1212-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.
@@ -4,49 +4,49 @@ interface InformationHighlightProps extends CSProps {
4
4
  export declare const informationHighlightStencil: import("@workday/canvas-kit-styling").Stencil<{
5
5
  informational: {
6
6
  low: {
7
- borderInlineStart: string;
7
+ borderInlineStartColor: "--cnvs-sys-color-border-info-default";
8
8
  backgroundColor: "--cnvs-sys-color-bg-alt-soft";
9
9
  '& [data-part="information-highlight-icon"]': {
10
10
  [x: string]: string;
11
11
  };
12
12
  };
13
13
  high: {
14
- borderInlineStart: string;
15
- backgroundColor: "--cnvs-sys-color-bg-primary-softer";
14
+ borderInlineStartColor: "--cnvs-sys-color-border-info-default";
15
+ backgroundColor: "--cnvs-sys-color-bg-info-softest";
16
16
  '& [data-part="information-highlight-icon"]': {
17
- [x: string]: "--cnvs-sys-color-bg-primary-default" | "--cnvs-sys-color-icon-inverse";
17
+ [x: string]: "--cnvs-sys-color-icon-info-default" | "--cnvs-sys-color-icon-inverse";
18
18
  };
19
19
  };
20
20
  };
21
21
  caution: {
22
22
  low: {
23
- borderInlineStart: string;
23
+ borderInlineStartColor: "--cnvs-sys-color-border-caution-default";
24
24
  backgroundColor: "--cnvs-sys-color-bg-alt-soft";
25
25
  '& [data-part="information-highlight-icon"]': {
26
26
  [x: string]: string;
27
27
  };
28
28
  };
29
29
  high: {
30
- borderInlineStart: string;
30
+ borderInlineStartColor: "--cnvs-sys-color-border-caution-default";
31
31
  backgroundColor: "--cnvs-sys-color-bg-caution-softest";
32
32
  '& [data-part="information-highlight-icon"]': {
33
- [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-fg-contrast-default";
33
+ [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-icon-caution-softer";
34
34
  };
35
35
  };
36
36
  };
37
37
  critical: {
38
38
  low: {
39
- borderInlineStart: string;
39
+ borderInlineStartColor: "--cnvs-sys-color-border-critical-default";
40
40
  backgroundColor: "--cnvs-sys-color-bg-alt-soft";
41
41
  '& [data-part="information-highlight-icon"]': {
42
42
  [x: string]: string;
43
43
  };
44
44
  };
45
45
  high: {
46
- borderInlineStart: string;
46
+ borderInlineStartColor: "--cnvs-sys-color-border-critical-default";
47
47
  backgroundColor: "--cnvs-sys-color-bg-critical-softest";
48
48
  '& [data-part="information-highlight-icon"]': {
49
- [x: string]: "--cnvs-sys-color-bg-critical-default" | "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-fg-critical-default";
49
+ [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-icon-critical-default";
50
50
  };
51
51
  };
52
52
  };
@@ -1 +1 @@
1
- {"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,OAAO,EAAS,MAAM,6BAA6B,CAAC;AAUjG,UAAU,yBAA0B,SAAQ,OAAO;CAAG;AAEtD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAoFtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
1
+ {"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AAUzF,UAAU,yBAA0B,SAAQ,OAAO;CAAG;AAEtD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyEtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
@@ -12,22 +12,22 @@ const Link_1 = require("./parts/Link");
12
12
  const useInformationHighlightModel_1 = require("./hooks/useInformationHighlightModel");
13
13
  const icon_1 = require("@workday/canvas-kit-react/icon");
14
14
  exports.informationHighlightStencil = (0, canvas_kit_styling_1.createStencil)({
15
- base: { name: "3nha1s", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;" },
15
+ base: { name: "3xr399", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;border-inline-start:var(--cnvs-sys-space-x1) solid transparent;" },
16
16
  modifiers: {
17
17
  informational: {
18
- low: { name: "4aau2l", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:none;}" },
19
- high: { name: "2n5459", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-primary-softer);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);}" }
18
+ low: { name: "4fgcll", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--backgroundColor-system-icon-3a4847:transparent;}" },
19
+ high: { name: "426is4", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default);background-color:var(--cnvs-sys-color-bg-info-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);}" }
20
20
  },
21
21
  caution: {
22
- low: { name: "487vup", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:none;}" },
23
- high: { name: "28eqoa", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}" }
22
+ low: { name: "82qkp", styles: "border-inline-start-color:var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--backgroundColor-system-icon-3a4847:transparent;}" },
23
+ high: { name: "2ht3ib", styles: "border-inline-start-color:var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-caution-softer);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-caution-softer);}" }
24
24
  },
25
25
  critical: {
26
- low: { name: "ngjn4", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:none;}" },
27
- high: { name: "12n02w", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-critical-default);}" }
26
+ low: { name: "2vry9", styles: "border-inline-start-color:var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--backgroundColor-system-icon-3a4847:transparent;}" },
27
+ high: { name: "1c1pqy", styles: "border-inline-start-color:var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);}" }
28
28
  }
29
29
  }
30
- }, "information-highlight-520f38");
30
+ }, "information-highlight-b4c864");
31
31
  exports.InformationHighlight = (0, common_1.createContainer)('section')({
32
32
  displayName: 'InformationHighlight',
33
33
  modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
@@ -4,49 +4,49 @@ interface InformationHighlightProps extends CSProps {
4
4
  export declare const informationHighlightStencil: import("@workday/canvas-kit-styling").Stencil<{
5
5
  informational: {
6
6
  low: {
7
- borderInlineStart: string;
7
+ borderInlineStartColor: "--cnvs-sys-color-border-info-default";
8
8
  backgroundColor: "--cnvs-sys-color-bg-alt-soft";
9
9
  '& [data-part="information-highlight-icon"]': {
10
10
  [x: string]: string;
11
11
  };
12
12
  };
13
13
  high: {
14
- borderInlineStart: string;
15
- backgroundColor: "--cnvs-sys-color-bg-primary-softer";
14
+ borderInlineStartColor: "--cnvs-sys-color-border-info-default";
15
+ backgroundColor: "--cnvs-sys-color-bg-info-softest";
16
16
  '& [data-part="information-highlight-icon"]': {
17
- [x: string]: "--cnvs-sys-color-bg-primary-default" | "--cnvs-sys-color-icon-inverse";
17
+ [x: string]: "--cnvs-sys-color-icon-info-default" | "--cnvs-sys-color-icon-inverse";
18
18
  };
19
19
  };
20
20
  };
21
21
  caution: {
22
22
  low: {
23
- borderInlineStart: string;
23
+ borderInlineStartColor: "--cnvs-sys-color-border-caution-default";
24
24
  backgroundColor: "--cnvs-sys-color-bg-alt-soft";
25
25
  '& [data-part="information-highlight-icon"]': {
26
26
  [x: string]: string;
27
27
  };
28
28
  };
29
29
  high: {
30
- borderInlineStart: string;
30
+ borderInlineStartColor: "--cnvs-sys-color-border-caution-default";
31
31
  backgroundColor: "--cnvs-sys-color-bg-caution-softest";
32
32
  '& [data-part="information-highlight-icon"]': {
33
- [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-fg-contrast-default";
33
+ [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-icon-caution-softer";
34
34
  };
35
35
  };
36
36
  };
37
37
  critical: {
38
38
  low: {
39
- borderInlineStart: string;
39
+ borderInlineStartColor: "--cnvs-sys-color-border-critical-default";
40
40
  backgroundColor: "--cnvs-sys-color-bg-alt-soft";
41
41
  '& [data-part="information-highlight-icon"]': {
42
42
  [x: string]: string;
43
43
  };
44
44
  };
45
45
  high: {
46
- borderInlineStart: string;
46
+ borderInlineStartColor: "--cnvs-sys-color-border-critical-default";
47
47
  backgroundColor: "--cnvs-sys-color-bg-critical-softest";
48
48
  '& [data-part="information-highlight-icon"]': {
49
- [x: string]: "--cnvs-sys-color-bg-critical-default" | "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-fg-critical-default";
49
+ [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-icon-critical-default";
50
50
  };
51
51
  };
52
52
  };
@@ -1 +1 @@
1
- {"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,OAAO,EAAS,MAAM,6BAA6B,CAAC;AAUjG,UAAU,yBAA0B,SAAQ,OAAO;CAAG;AAEtD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAoFtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
1
+ {"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AAUzF,UAAU,yBAA0B,SAAQ,OAAO;CAAG;AAEtD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAyEtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { createContainer } from '@workday/canvas-kit-react/common';
3
- import { cssVar, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
3
+ import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
4
4
  import { system } from '@workday/canvas-tokens-web';
5
5
  import { InformationHighlightHeading } from './parts/Heading';
6
6
  import { Body } from './parts/Body';
@@ -9,22 +9,22 @@ import { Link } from './parts/Link';
9
9
  import { useInformationHighlightModel } from './hooks/useInformationHighlightModel';
10
10
  import { systemIconStencil } from '@workday/canvas-kit-react/icon';
11
11
  export const informationHighlightStencil = createStencil({
12
- base: { name: "3nha1s", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;" },
12
+ base: { name: "3xr399", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;border-inline-start:var(--cnvs-sys-space-x1) solid transparent;" },
13
13
  modifiers: {
14
14
  informational: {
15
- low: { name: "4aau2l", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:none;}" },
16
- high: { name: "2n5459", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-primary-softer);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);}" }
15
+ low: { name: "4fgcll", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--backgroundColor-system-icon-3a4847:transparent;}" },
16
+ high: { name: "426is4", styles: "border-inline-start-color:var(--cnvs-sys-color-border-info-default);background-color:var(--cnvs-sys-color-bg-info-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-info-default);}" }
17
17
  },
18
18
  caution: {
19
- low: { name: "487vup", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:none;}" },
20
- high: { name: "28eqoa", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}" }
19
+ low: { name: "82qkp", styles: "border-inline-start-color:var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);--backgroundColor-system-icon-3a4847:transparent;}" },
20
+ high: { name: "2ht3ib", styles: "border-inline-start-color:var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-caution-softer);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-caution-softer);}" }
21
21
  },
22
22
  critical: {
23
- low: { name: "ngjn4", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:none;}" },
24
- high: { name: "12n02w", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-critical-default);}" }
23
+ low: { name: "2vry9", styles: "border-inline-start-color:var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--backgroundColor-system-icon-3a4847:transparent;}" },
24
+ high: { name: "1c1pqy", styles: "border-inline-start-color:var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-icon-critical-default);}" }
25
25
  }
26
26
  }
27
- }, "information-highlight-520f38");
27
+ }, "information-highlight-b4c864");
28
28
  export const InformationHighlight = createContainer('section')({
29
29
  displayName: 'InformationHighlight',
30
30
  modelHook: useInformationHighlightModel,
@@ -1,5 +1,5 @@
1
1
  import {createContainer} from '@workday/canvas-kit-react/common';
2
- import {cssVar, createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
2
+ import {createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
3
3
  import {system} from '@workday/canvas-tokens-web';
4
4
 
5
5
  import {InformationHighlightHeading} from './parts/Heading';
@@ -20,77 +20,66 @@ export const informationHighlightStencil = createStencil({
20
20
  padding: system.space.x4,
21
21
  borderRadius: system.shape.x1,
22
22
  outline: `${px2rem(1)} solid transparent`,
23
+ borderInlineStart: `${system.space.x1} solid transparent`,
23
24
  },
24
25
  modifiers: {
25
26
  informational: {
26
27
  low: {
27
- borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
28
- system.color.bg.primary.default
29
- )}`,
28
+ borderInlineStartColor: system.color.border.info.default,
30
29
  backgroundColor: system.color.bg.alt.soft,
31
30
  '& [data-part="information-highlight-icon"]': {
32
- [systemIconStencil.vars.accentColor]: system.color.bg.primary.default,
33
- [systemIconStencil.vars.color]: system.color.bg.primary.default,
34
- [systemIconStencil.vars.backgroundColor]: 'none',
31
+ [systemIconStencil.vars.accentColor]: system.color.icon.info.default,
32
+ [systemIconStencil.vars.color]: system.color.icon.info.default,
33
+ [systemIconStencil.vars.backgroundColor]: 'transparent',
35
34
  },
36
35
  },
37
36
  high: {
38
- borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
39
- system.color.bg.primary.default
40
- )}`,
41
- backgroundColor: system.color.bg.primary.softer,
37
+ borderInlineStartColor: system.color.border.info.default,
38
+ backgroundColor: system.color.bg.info.softest,
42
39
  '& [data-part="information-highlight-icon"]': {
43
40
  [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
44
- [systemIconStencil.vars.color]: system.color.bg.primary.default,
45
- [systemIconStencil.vars.backgroundColor]: system.color.bg.primary.default,
41
+ [systemIconStencil.vars.color]: system.color.icon.info.default,
42
+ [systemIconStencil.vars.backgroundColor]: system.color.icon.info.default,
46
43
  },
47
44
  },
48
45
  },
49
46
  caution: {
50
47
  low: {
51
- borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
52
- system.color.border.caution.default
53
- )}`,
48
+ borderInlineStartColor: system.color.border.caution.default,
54
49
  backgroundColor: system.color.bg.alt.soft,
55
50
  '& [data-part="information-highlight-icon"]': {
56
- [systemIconStencil.vars.accentColor]: system.color.fg.contrast.default,
57
- [systemIconStencil.vars.color]: system.color.fg.contrast.default,
58
- [systemIconStencil.vars.backgroundColor]: 'none',
51
+ [systemIconStencil.vars.accentColor]: system.color.icon.strong,
52
+ [systemIconStencil.vars.color]: system.color.icon.strong,
53
+ [systemIconStencil.vars.backgroundColor]: 'transparent',
59
54
  },
60
55
  },
61
56
  high: {
62
- borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
63
- system.color.border.caution.default
64
- )}`,
57
+ borderInlineStartColor: system.color.border.caution.default,
65
58
  backgroundColor: system.color.bg.caution.softest,
66
59
  '& [data-part="information-highlight-icon"]': {
67
60
  [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
68
- [systemIconStencil.vars.color]: system.color.fg.contrast.default,
69
- [systemIconStencil.vars.backgroundColor]: system.color.fg.contrast.default,
61
+ [systemIconStencil.vars.color]: system.color.icon.caution.softer,
62
+ [systemIconStencil.vars.backgroundColor]: system.color.icon.caution.softer,
70
63
  },
71
64
  },
72
65
  },
73
66
  critical: {
74
67
  low: {
75
- borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
76
- system.color.border.critical.default
77
- )}`,
68
+ borderInlineStartColor: system.color.border.critical.default,
78
69
  backgroundColor: system.color.bg.alt.soft,
79
70
  '& [data-part="information-highlight-icon"]': {
80
- [systemIconStencil.vars.accentColor]: system.color.bg.critical.default,
81
- [systemIconStencil.vars.color]: system.color.bg.critical.default,
82
- [systemIconStencil.vars.backgroundColor]: 'none',
71
+ [systemIconStencil.vars.accentColor]: system.color.icon.critical.default,
72
+ [systemIconStencil.vars.color]: system.color.icon.critical.default,
73
+ [systemIconStencil.vars.backgroundColor]: 'transparent',
83
74
  },
84
75
  },
85
76
  high: {
86
- borderInlineStart: `solid ${cssVar(system.space.x1)} ${cssVar(
87
- system.color.border.critical.default
88
- )}`,
77
+ borderInlineStartColor: system.color.border.critical.default,
89
78
  backgroundColor: system.color.bg.critical.softest,
90
79
  '& [data-part="information-highlight-icon"]': {
91
80
  [systemIconStencil.vars.accentColor]: system.color.icon.inverse,
92
- [systemIconStencil.vars.color]: system.color.bg.critical.default,
93
- [systemIconStencil.vars.backgroundColor]: system.color.fg.critical.default,
81
+ [systemIconStencil.vars.color]: system.color.icon.critical.default,
82
+ [systemIconStencil.vars.backgroundColor]: system.color.icon.critical.default,
94
83
  },
95
84
  },
96
85
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-react",
3
- "version": "14.0.0-alpha.1210-next.0",
3
+ "version": "14.0.0-alpha.1212-next.0",
4
4
  "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -46,8 +46,8 @@
46
46
  "dependencies": {
47
47
  "@emotion/react": "^11.7.1",
48
48
  "@emotion/styled": "^11.6.0",
49
- "@workday/canvas-kit-react": "^14.0.0-alpha.1210-next.0",
50
- "@workday/canvas-kit-styling": "^14.0.0-alpha.1210-next.0",
49
+ "@workday/canvas-kit-react": "^14.0.0-alpha.1212-next.0",
50
+ "@workday/canvas-kit-styling": "^14.0.0-alpha.1212-next.0",
51
51
  "@workday/canvas-system-icons-web": "^3.0.35",
52
52
  "@workday/canvas-tokens-web": "3.0.0-alpha.12",
53
53
  "@workday/design-assets-types": "^0.2.10"
@@ -58,5 +58,5 @@
58
58
  "react-hook-form": "7.36.1",
59
59
  "yup": "^0.32.11"
60
60
  },
61
- "gitHead": "8ef8c7a0b7515a9341550c564b84bed91598e9f7"
61
+ "gitHead": "4061f71f096822b9165e03d503a7f22ee01c1565"
62
62
  }