@workday/canvas-kit-css 15.0.0-alpha.0045-next.0 → 15.0.0-alpha.0056-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 (8) hide show
  1. package/badge.css +2 -2
  2. package/information-highlight.css +124 -0
  3. package/loading-dots.css +2 -2
  4. package/modal.css +2 -2
  5. package/package.json +2 -2
  6. package/popup.css +2 -2
  7. package/skeleton.css +2 -2
  8. package/tooltip.css +2 -2
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-3w46q {
1
+ @keyframes animation-1wfqyv {
2
2
  from {
3
3
  transform: scale(0.85);
4
4
  }
@@ -12,7 +12,7 @@
12
12
  .cnvs-count-badge {
13
13
  box-sizing: border-box;
14
14
  align-items: center;
15
- animation: animation-3w46q 0.2s ease;
15
+ animation: animation-1wfqyv 0.2s ease;
16
16
  border-radius: var(--cnvs-sys-shape-round);
17
17
  display: inline-flex;
18
18
  font-family: var(--cnvs-sys-font-family-default);
package/information-highlight.css ADDED
@@ -0,0 +1,124 @@
1
+ .cnvs-information-highlight-heading {
2
+ box-sizing: border-box;
3
+ font-family: var(--cnvs-sys-font-family-default);
4
+ font-weight: var(--cnvs-sys-font-weight-bold);
5
+ line-height: var(--cnvs-sys-line-height-body-small);
6
+ font-size: var(--cnvs-sys-font-size-body-small);
7
+ letter-spacing: var(--cnvs-base-letter-spacing-200);
8
+ color: var(--cnvs-sys-color-text-strong);
9
+ grid-column: 2;
10
+ margin-top: var(--cnvs-sys-space-zero);
11
+ margin-bottom: var(--cnvs-sys-space-zero);
12
+ }
13
+
14
+
15
+ .cnvs-information-highlight-body {
16
+ box-sizing: border-box;
17
+ font-family: var(--cnvs-sys-font-family-default);
18
+ font-weight: var(--cnvs-sys-font-weight-normal);
19
+ line-height: var(--cnvs-sys-line-height-subtext-large);
20
+ font-size: var(--cnvs-sys-font-size-subtext-large);
21
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
22
+ color: var(--cnvs-sys-color-text-strong);
23
+ grid-column: 2;
24
+ margin-block-end: var(--cnvs-sys-space-x2);
25
+ }
26
+
27
+
28
+ .cnvs-information-highlight-link {
29
+ box-sizing: border-box;
30
+ font-family: var(--cnvs-sys-font-family-default);
31
+ font-weight: var(--cnvs-sys-font-weight-bold);
32
+ line-height: var(--cnvs-sys-line-height-subtext-large);
33
+ font-size: var(--cnvs-sys-font-size-subtext-large);
34
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
35
+ grid-column: 2;
36
+ justify-self: start;
37
+ color: var(--cnvs-sys-color-text-strong);
38
+ }
39
+
40
+
41
+ .cnvs-information-highlight {
42
+ box-sizing: border-box;
43
+ display: grid;
44
+ grid-template-columns: min-content;
45
+ column-gap: var(--cnvs-sys-space-x4);
46
+ row-gap: var(--cnvs-sys-space-x2);
47
+ padding: var(--cnvs-sys-space-x4);
48
+ border-radius: var(--cnvs-sys-shape-x1);
49
+ outline: 0.0625rem solid transparent;
50
+ border-inline-start: var(--cnvs-sys-space-x1) solid transparent;
51
+ }
52
+
53
+
54
+ .cnvs-information-highlight.informational-low {
55
+ border-inline-start-color: var(--cnvs-sys-color-border-info-default);
56
+ background-color: var(--cnvs-sys-color-bg-alt-soft);
57
+ }
58
+
59
+ .cnvs-information-highlight.informational-low [data-part="information-highlight-icon"] {
60
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-info-default);
61
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-info-default);
62
+ --cnvs-system-icon-background-color: transparent;
63
+ }
64
+
65
+
66
+ .cnvs-information-highlight.informational-high {
67
+ border-inline-start-color: var(--cnvs-sys-color-border-info-default);
68
+ background-color: var(--cnvs-sys-color-bg-info-softest);
69
+ }
70
+
71
+ .cnvs-information-highlight.informational-high [data-part="information-highlight-icon"] {
72
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
73
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-info-default);
74
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-icon-info-default);
75
+ }
76
+
77
+
78
+ .cnvs-information-highlight.caution-low {
79
+ border-inline-start-color: var(--cnvs-sys-color-border-caution-default);
80
+ background-color: var(--cnvs-sys-color-bg-alt-soft);
81
+ }
82
+
83
+ .cnvs-information-highlight.caution-low [data-part="information-highlight-icon"] {
84
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-strong);
85
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
86
+ --cnvs-system-icon-background-color: transparent;
87
+ }
88
+
89
+
90
+ .cnvs-information-highlight.caution-high {
91
+ border-inline-start-color: var(--cnvs-sys-color-border-caution-default);
92
+ background-color: var(--cnvs-sys-color-bg-caution-softest);
93
+ }
94
+
95
+ .cnvs-information-highlight.caution-high [data-part="information-highlight-icon"] {
96
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
97
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-caution-softer);
98
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-icon-caution-softer);
99
+ }
100
+
101
+
102
+ .cnvs-information-highlight.critical-low {
103
+ border-inline-start-color: var(--cnvs-sys-color-border-critical-default);
104
+ background-color: var(--cnvs-sys-color-bg-alt-soft);
105
+ }
106
+
107
+ .cnvs-information-highlight.critical-low [data-part="information-highlight-icon"] {
108
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-critical-default);
109
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-critical-default);
110
+ --cnvs-system-icon-background-color: transparent;
111
+ }
112
+
113
+
114
+ .cnvs-information-highlight.critical-high {
115
+ border-inline-start-color: var(--cnvs-sys-color-border-critical-default);
116
+ background-color: var(--cnvs-sys-color-bg-critical-softest);
117
+ }
118
+
119
+ .cnvs-information-highlight.critical-high [data-part="information-highlight-icon"] {
120
+ --cnvs-system-icon-accent-color: var(--cnvs-sys-color-icon-inverse);
121
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-critical-default);
122
+ --cnvs-system-icon-background-color: var(--cnvs-sys-color-icon-critical-default);
123
+ }
124
+
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-bkxnv {
1
+ @keyframes animation-14fo6y {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -38,7 +38,7 @@
38
38
  outline: 0.125rem solid transparent;
39
39
  transform: scale(0);
40
40
  display: inline-block;
41
- animation-name: animation-bkxnv;
41
+ animation-name: animation-14fo6y;
42
42
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
43
43
  animation-iteration-count: infinite;
44
44
  animation-timing-function: ease-in-out;
package/modal.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-1s12xg {
1
+ @keyframes animation-19xo12 {
2
2
  0% {
3
3
  background: none;
4
4
  }
@@ -18,7 +18,7 @@
18
18
  height: 100vh;
19
19
  background: var(--cnvs-sys-color-bg-overlay);
20
20
  animation-duration: 0.3s;
21
- animation-name: animation-1s12xg;
21
+ animation-name: animation-19xo12;
22
22
  }
23
23
 
24
24
  .wd-no-animation .cnvs-modal-overlay-container {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "15.0.0-alpha.0045-next.0",
3
+ "version": "15.0.0-alpha.0056-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit CSS components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -25,5 +25,5 @@
25
25
  "components",
26
26
  "workday"
27
27
  ],
28
- "gitHead": "38005cde6b12236ba0376e1a360b8e22ca6b1e18"
28
+ "gitHead": "7ea41be00e30b2df431c3b8a49d5d2c24f3a9b8c"
29
29
  }
package/popup.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
 
6
- @keyframes animation-22xmgl {
6
+ @keyframes animation-3afa50 {
7
7
  0% {
8
8
  opacity: 1;
9
9
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -31,7 +31,7 @@
31
31
  padding: var(--cnvs-sys-space-x6);
32
32
  max-height: var(--cnvs-popup-card-max-height);
33
33
  overflow-y: auto;
34
- animation-name: animation-22xmgl;
34
+ animation-name: animation-3afa50;
35
35
  animation-duration: 150ms;
36
36
  animation-timing-function: ease-out;
37
37
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
package/skeleton.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
 
39
- @keyframes animation-2sbbl3 {
39
+ @keyframes animation-3edb5q {
40
40
  from {
41
41
  opacity: 0.4;
42
42
  }
@@ -49,7 +49,7 @@
49
49
 
50
50
  .cnvs-skeleton {
51
51
  box-sizing: border-box;
52
- animation: animation-2sbbl3 0.8s linear infinite alternate;
52
+ animation: animation-3edb5q 0.8s linear infinite alternate;
53
53
  position: relative;
54
54
  overflow: hidden;
55
55
  height: 100%;
package/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-5a1xg {
1
+ @keyframes animation-2d4xst {
2
2
  0% {
3
3
  opacity: 0;
4
4
  transform: translate(var(--cnvs-tooltip-translate-position-x), var(--cnvs-tooltip-translate-position-y));
@@ -22,7 +22,7 @@
22
22
  position: relative;
23
23
  padding: var(--cnvs-sys-space-x3);
24
24
  color: var(--cnvs-sys-color-text-inverse);
25
- animation-name: animation-5a1xg;
25
+ animation-name: animation-2d4xst;
26
26
  animation-duration: 150ms;
27
27
  animation-timing-function: ease-out;
28
28
  transform-origin: var(--cnvs-tooltip-container-tooltip-transform-origin-vertical) var(--cnvs-tooltip-container-tooltip-transform-origin-horizontal);