@workday/canvas-kit-preview-css 14.0.0-alpha.1203-next.0 → 14.0.0-alpha.1210-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 (3) hide show
  1. package/loading-sparkles.css +2 -2
  2. package/package.json +2 -2
  3. package/status-indicator.css +41 -50
package/loading-sparkles.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-2a69bq {
1
+ @keyframes animation-3cuk1d {
2
2
  0%, 79%, 100% {
3
3
  opacity: 0.2;
4
4
  transform: scale(0.55);
@@ -26,7 +26,7 @@
26
26
  animation-duration: 1230ms;
27
27
  animation-fill-mode: both;
28
28
  animation-iteration-count: infinite;
29
- animation-name: animation-2a69bq;
29
+ animation-name: animation-3cuk1d;
30
30
  animation-timing-function: ease-in-out;
31
31
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-ai);
32
32
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-css",
3
- "version": "14.0.0-alpha.1203-next.0",
3
+ "version": "14.0.0-alpha.1210-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit Preview 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": "07c76a815a238c1a08f47fd6a33e1a0a2e65eea1"
28
+ "gitHead": "8ef8c7a0b7515a9341550c564b84bed91598e9f7"
29
29
  }
package/status-indicator.css CHANGED
@@ -15,93 +15,84 @@
15
15
  gap: var(--cnvs-sys-space-x1);
16
16
  max-width: 12.5rem;
17
17
  align-items: center;
18
- border-radius: var(--cnvs-sys-shape-half);
18
+ border-radius: var(--cnvs-sys-shape-round);
19
19
  height: 1.25rem;
20
- padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);
20
+ padding: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);
21
21
  outline: 0.0625rem solid transparent;
22
+ --cnvs-system-icon-color: currentColor;
22
23
  }
23
24
 
24
25
 
25
- .cnvs-preview-status-indicator.gray-high {
26
- color: var(--cnvs-sys-color-static-white);
27
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
28
- background: var(--cnvs-sys-color-static-gray-default);
26
+ .cnvs-preview-status-indicator.variant-info {
27
+ color: var(--cnvs-sys-color-fg-info-strong);
28
+ background-color: var(--cnvs-sys-color-bg-info-softer);
29
29
  }
30
30
 
31
31
 
32
- .cnvs-preview-status-indicator.gray-low {
33
- color: var(--cnvs-sys-color-fg-muted-default);
34
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-gray-strong);
35
- background: var(--cnvs-sys-color-bg-alt-softer);
32
+ .cnvs-preview-status-indicator.variant-positive {
33
+ color: var(--cnvs-sys-color-fg-positive-strong);
34
+ background-color: var(--cnvs-sys-color-fg-positive-softer);
36
35
  }
37
36
 
38
37
 
39
- .cnvs-preview-status-indicator.orange-high {
40
- color: var(--cnvs-sys-color-static-gray-stronger);
41
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-gray-stronger);
42
- background: var(--cnvs-sys-color-static-amber-default);
38
+ .cnvs-preview-status-indicator.variant-caution {
39
+ color: var(--cnvs-sys-color-fg-caution-soft);
40
+ background-color: var(--cnvs-sys-color-bg-caution-softer);
43
41
  }
44
42
 
45
43
 
46
- .cnvs-preview-status-indicator.orange-low {
47
- color: var(--cnvs-sys-color-static-amber-strongest);
48
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-amber-strongest);
49
- background: var(--cnvs-sys-color-static-amber-softer);
44
+ .cnvs-preview-status-indicator.variant-critical {
45
+ color: var(--cnvs-sys-color-fg-critical-strong);
46
+ background-color: var(--cnvs-sys-color-bg-critical-softer);
50
47
  }
51
48
 
52
49
 
53
- .cnvs-preview-status-indicator.blue-high {
54
- color: var(--cnvs-sys-color-static-white);
55
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
56
- background: var(--cnvs-sys-color-static-blue-default);
50
+ .cnvs-preview-status-indicator.variant-neutral {
51
+ color: var(--cnvs-sys-color-fg-muted-strong);
52
+ background-color: var(--cnvs-sys-color-bg-alt-default);
57
53
  }
58
54
 
59
55
 
60
- .cnvs-preview-status-indicator.blue-low {
61
- color: var(--cnvs-sys-color-static-blue-strong);
62
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-blue-strong);
63
- background: var(--cnvs-sys-color-static-blue-softer);
56
+ .cnvs-preview-status-indicator.variant-ai {
57
+ color: var(--cnvs-sys-color-fg-ai);
58
+ background-color: var(--cnvs-sys-color-bg-ai-default);
64
59
  }
65
60
 
66
61
 
67
- .cnvs-preview-status-indicator.green-high {
68
- color: var(--cnvs-sys-color-static-white);
69
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
70
- background: var(--cnvs-sys-color-static-green-strong);
62
+ .cnvs-preview-status-indicator.variant-transparent {
63
+ color: var(--cnvs-sys-color-fg-inverse);
64
+ background-color: var(--cnvs-sys-color-bg-translucent);
71
65
  }
72
66
 
73
67
 
74
- .cnvs-preview-status-indicator.green-low {
75
- color: var(--cnvs-sys-color-static-green-strong);
76
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-green-strong);
77
- background: var(--cnvs-sys-color-static-green-softer);
68
+
69
+
70
+ .cnvs-preview-status-indicator.variant-info.emphasis-high {
71
+ background-color: var(--cnvs-sys-color-bg-info-default);
72
+ color: var(--cnvs-sys-color-fg-inverse);
78
73
  }
79
74
 
80
75
 
81
- .cnvs-preview-status-indicator.red-high {
82
- color: var(--cnvs-sys-color-static-white);
83
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
84
- background: var(--cnvs-sys-color-static-red-default);
76
+ .cnvs-preview-status-indicator.variant-positive.emphasis-high {
77
+ background-color: var(--cnvs-sys-color-bg-positive-default);
78
+ color: var(--cnvs-sys-color-fg-inverse);
85
79
  }
86
80
 
87
81
 
88
- .cnvs-preview-status-indicator.red-low {
89
- color: var(--cnvs-sys-color-static-red-strong);
90
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-red-strong);
91
- background: var(--cnvs-sys-color-static-red-softer);
82
+ .cnvs-preview-status-indicator.variant-caution.emphasis-high {
83
+ background-color: var(--cnvs-sys-color-bg-caution-default);
84
+ color: var(--cnvs-sys-color-fg-caution-strong);
92
85
  }
93
86
 
94
87
 
95
- .cnvs-preview-status-indicator.transparent-high {
96
- color: var(--cnvs-sys-color-static-white);
97
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
98
- background: var(--cnvs-sys-color-bg-translucent);
88
+ .cnvs-preview-status-indicator.variant-critical.emphasis-high {
89
+ background-color: var(--cnvs-sys-color-bg-critical-default);
90
+ color: var(--cnvs-sys-color-fg-inverse);
99
91
  }
100
92
 
101
93
 
102
- .cnvs-preview-status-indicator.transparent-low {
103
- color: var(--cnvs-sys-color-static-white);
104
- --cnvs-system-icon-color: var(--cnvs-sys-color-static-white);
105
- background: var(--cnvs-sys-color-bg-translucent);
94
+ .cnvs-preview-status-indicator.variant-neutral.emphasis-high {
95
+ background-color: var(--cnvs-sys-color-bg-muted-default);
96
+ color: var(--cnvs-sys-color-fg-inverse);
106
97
  }
107
98