@workday/canvas-kit-css 14.0.0-alpha.1140-next.0 → 14.0.0-alpha.1144-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 (15) hide show
  1. package/avatar.css +1 -1
  2. package/badge.css +2 -2
  3. package/banner.css +1 -1
  4. package/checkbox.css +2 -2
  5. package/common.css +33 -33
  6. package/icon.css +13 -13
  7. package/loading-dots.css +2 -2
  8. package/modal.css +2 -2
  9. package/package.json +2 -2
  10. package/popup.css +2 -2
  11. package/segmented-control.css +2 -2
  12. package/skeleton.css +2 -2
  13. package/switch.css +1 -1
  14. package/tabs.css +4 -4
  15. package/tooltip.css +2 -2
package/avatar.css CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  .cnvs-avatar:focus-visible, .cnvs-avatar.focus {
19
19
  outline: none;
20
- box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
20
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
21
21
  }
22
22
 
23
23
  .cnvs-avatar :is(button) {
package/badge.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-jknd3q {
1
+ @keyframes animation-ainc3q {
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-jknd3q 0.2s ease;
15
+ animation: animation-ainc3q 0.2s ease;
16
16
  background: var(--cnvs-sys-color-static-red-default);
17
17
  border-radius: var(--cnvs-sys-shape-round);
18
18
  color: var(--cnvs-sys-color-text-inverse);
package/banner.css CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  .cnvs-banner:focus-visible, .cnvs-banner.focus {
48
48
  outline: var(--cnvs-sys-shape-x1) double transparent;
49
- box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
49
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
50
50
  }
51
51
 
52
52
 
package/checkbox.css CHANGED
@@ -154,11 +154,11 @@
154
154
  .cnvs-checkbox-input:where(:focus-visible, .focus)~div:first-of-type {
155
155
  border-color: var(--cnvs-brand-primary-base);
156
156
  border-width: 0.125rem;
157
- box-shadow: 0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
157
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
158
158
  }
159
159
 
160
160
  .cnvs-checkbox-input:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input:checked.focus~div:first-of-type, .cnvs-checkbox-input:indeterminate.focus~div:first-of-type {
161
- box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline);
161
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline);
162
162
  border-color: var(--cnvs-brand-primary-base);
163
163
  border-width: 0.125rem;
164
164
  }
package/common.css CHANGED
@@ -15,39 +15,39 @@
15
15
 
16
16
 
17
17
  .cnvs-default-branding {
18
- --cnvs-brand-error-darkest: rgba(128,22,14,1);
19
- --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-cantaloupe-400);
20
- --cnvs-brand-common-error-inner: var(--cnvs-base-palette-cinnamon-500);
21
- --cnvs-brand-common-focus-outline: var(--cnvs-base-palette-blueberry-400);
22
- --cnvs-brand-neutral-accent: var(--cnvs-base-palette-french-vanilla-100);
23
- --cnvs-brand-neutral-darkest: var(--cnvs-base-palette-licorice-400);
24
- --cnvs-brand-neutral-dark: var(--cnvs-base-palette-licorice-300);
25
- --cnvs-brand-neutral-base: var(--cnvs-base-palette-soap-600);
26
- --cnvs-brand-neutral-light: var(--cnvs-base-palette-soap-300);
27
- --cnvs-brand-neutral-lightest: var(--cnvs-base-palette-soap-200);
28
- --cnvs-brand-success-accent: var(--cnvs-base-palette-french-vanilla-100);
29
- --cnvs-brand-success-darkest: var(--cnvs-base-palette-green-apple-600);
30
- --cnvs-brand-success-dark: var(--cnvs-base-palette-green-apple-500);
31
- --cnvs-brand-success-base: var(--cnvs-base-palette-green-apple-400);
32
- --cnvs-brand-success-light: var(--cnvs-base-palette-green-apple-300);
33
- --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-apple-100);
34
- --cnvs-brand-error-accent: var(--cnvs-base-palette-french-vanilla-100);
35
- --cnvs-brand-error-dark: var(--cnvs-base-palette-cinnamon-600);
36
- --cnvs-brand-error-base: var(--cnvs-base-palette-cinnamon-500);
37
- --cnvs-brand-error-light: var(--cnvs-base-palette-cinnamon-200);
38
- --cnvs-brand-error-lightest: var(--cnvs-base-palette-cinnamon-100);
39
- --cnvs-brand-alert-accent: var(--cnvs-base-palette-french-vanilla-100);
40
- --cnvs-brand-alert-darkest: var(--cnvs-base-palette-cantaloupe-600);
41
- --cnvs-brand-alert-dark: var(--cnvs-base-palette-cantaloupe-500);
42
- --cnvs-brand-alert-base: var(--cnvs-base-palette-cantaloupe-400);
43
- --cnvs-brand-alert-light: var(--cnvs-base-palette-cantaloupe-200);
44
- --cnvs-brand-alert-lightest: var(--cnvs-base-palette-cantaloupe-100);
45
- --cnvs-brand-primary-accent: var(--cnvs-base-palette-french-vanilla-100);
46
- --cnvs-brand-primary-darkest: var(--cnvs-base-palette-blueberry-600);
47
- --cnvs-brand-primary-dark: var(--cnvs-base-palette-blueberry-500);
48
- --cnvs-brand-primary-base: var(--cnvs-base-palette-blueberry-400);
49
- --cnvs-brand-primary-light: var(--cnvs-base-palette-blueberry-200);
50
- --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blueberry-100);
18
+ --cnvs-brand-error-darkest: var(--cnvs-base-palette-red-800);
19
+ --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-amber-400);
20
+ --cnvs-brand-common-error-inner: var(--cnvs-base-palette-red-500);
21
+ --cnvs-brand-common-focus-outline: var(--cnvs-base-palette-blue-500);
22
+ --cnvs-brand-neutral-accent: var(--cnvs-base-palette-neutral-0);
23
+ --cnvs-brand-neutral-darkest: var(--cnvs-base-palette-slate-800);
24
+ --cnvs-brand-neutral-dark: var(--cnvs-base-palette-slate-700);
25
+ --cnvs-brand-neutral-base: var(--cnvs-base-palette-slate-600);
26
+ --cnvs-brand-neutral-light: var(--cnvs-base-palette-slate-200);
27
+ --cnvs-brand-neutral-lightest: var(--cnvs-base-palette-slate-100);
28
+ --cnvs-brand-success-accent: var(--cnvs-base-palette-neutral-0);
29
+ --cnvs-brand-success-darkest: var(--cnvs-base-palette-green-800);
30
+ --cnvs-brand-success-dark: var(--cnvs-base-palette-green-700);
31
+ --cnvs-brand-success-base: var(--cnvs-base-palette-green-600);
32
+ --cnvs-brand-success-light: var(--cnvs-base-palette-green-200);
33
+ --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-100);
34
+ --cnvs-brand-error-accent: var(--cnvs-base-palette-neutral-0);
35
+ --cnvs-brand-error-dark: var(--cnvs-base-palette-red-600);
36
+ --cnvs-brand-error-base: var(--cnvs-base-palette-red-700);
37
+ --cnvs-brand-error-light: var(--cnvs-base-palette-red-200);
38
+ --cnvs-brand-error-lightest: var(--cnvs-base-palette-red-100);
39
+ --cnvs-brand-alert-accent: var(--cnvs-base-palette-neutral-900);
40
+ --cnvs-brand-alert-darkest: var(--cnvs-base-palette-amber-800);
41
+ --cnvs-brand-alert-dark: var(--cnvs-base-palette-amber-600);
42
+ --cnvs-brand-alert-base: var(--cnvs-base-palette-amber-400);
43
+ --cnvs-brand-alert-light: var(--cnvs-base-palette-amber-100);
44
+ --cnvs-brand-alert-lightest: var(--cnvs-base-palette-amber-50);
45
+ --cnvs-brand-primary-accent: var(--cnvs-base-palette-neutral-0);
46
+ --cnvs-brand-primary-darkest: var(--cnvs-base-palette-blue-800);
47
+ --cnvs-brand-primary-dark: var(--cnvs-base-palette-blue-700);
48
+ --cnvs-brand-primary-base: var(--cnvs-base-palette-blue-600);
49
+ --cnvs-brand-primary-light: var(--cnvs-base-palette-blue-200);
50
+ --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blue-100);
51
51
  --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
52
52
  }
53
53
 
package/icon.css CHANGED
@@ -21,11 +21,11 @@
21
21
  }
22
22
 
23
23
  .cnvs-accent-icon .color-500 {
24
- fill: var(--cnvs-accent-icon-color, var(--cnvs-base-palette-blueberry-500));
24
+ fill: var(--cnvs-accent-icon-color, var(--cnvs-sys-color-bg-primary-strong));
25
25
  }
26
26
 
27
27
  .cnvs-accent-icon .french-vanilla-100 {
28
- fill: var(--cnvs-base-palette-french-vanilla-100);
28
+ fill: var(--cnvs-sys-color-bg-default);
29
29
  }
30
30
 
31
31
 
@@ -40,27 +40,27 @@
40
40
  }
41
41
 
42
42
  .cnvs-applet-icon .color-100 {
43
- fill: var(--cnvs-base-palette-french-vanilla-100);
43
+ fill: var(--cnvs-sys-color-fg-inverse);
44
44
  }
45
45
 
46
46
  .cnvs-applet-icon .color-200 {
47
- fill: var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blueberry-200));
47
+ fill: var(--cnvs-applet-icon-color200, var(--cnvs-base-palette-blue-200));
48
48
  }
49
49
 
50
50
  .cnvs-applet-icon .color-300 {
51
- fill: var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blueberry-300));
51
+ fill: var(--cnvs-applet-icon-color300, var(--cnvs-base-palette-blue-400));
52
52
  }
53
53
 
54
54
  .cnvs-applet-icon .color-400 {
55
- fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));
55
+ fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blue-600));
56
56
  }
57
57
 
58
58
  .cnvs-applet-icon .color-400-alpha-20 {
59
- fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blueberry-400));
59
+ fill: var(--cnvs-applet-icon-color400, var(--cnvs-base-palette-blue-600));
60
60
  }
61
61
 
62
62
  .cnvs-applet-icon .color-500 {
63
- fill: var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blueberry-400));
63
+ fill: var(--cnvs-applet-icon-color500, var(--cnvs-base-palette-blue-700));
64
64
  }
65
65
 
66
66
 
@@ -74,11 +74,11 @@
74
74
  }
75
75
 
76
76
  .cnvs-system-icon .wd-icon-fill {
77
- fill: var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200));
77
+ fill: var(--cnvs-system-icon-color, var(--cnvs-sys-color-icon-default));
78
78
  }
79
79
 
80
80
  .cnvs-system-icon .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
81
- fill: var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)));
81
+ fill: var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-sys-color-fg-default)));
82
82
  }
83
83
 
84
84
  .cnvs-system-icon .wd-icon-background {
@@ -86,11 +86,11 @@
86
86
  }
87
87
 
88
88
  .cnvs-system-icon:where(:hover, .hover) .wd-icon-fill {
89
- fill: var(--cnvs-deprecated-system-icon-fill-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200))));
89
+ fill: var(--cnvs-deprecated-system-icon-fill-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-color, var(--cnvs-sys-color-fg-default))));
90
90
  }
91
91
 
92
92
  .cnvs-system-icon:where(:hover, .hover) .wd-icon-accent, .cnvs-system-icon .wd-icon-accent2 {
93
- fill: var(--cnvs-deprecated-system-icon-accent-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-base-palette-licorice-200)))));
93
+ fill: var(--cnvs-deprecated-system-icon-accent-hover, var(--cnvs-deprecated-system-icon-color-hover, var(--cnvs-system-icon-accent-color, var(--cnvs-system-icon-color, var(--cnvs-sys-color-fg-default)))));
94
94
  }
95
95
 
96
96
  .cnvs-system-icon:where(:hover, .hover) .wd-icon-background {
@@ -109,7 +109,7 @@
109
109
 
110
110
  .cnvs-system-icon-circle {
111
111
  box-sizing: border-box;
112
- background: var(--cnvs-system-icon-circle-background, var(--cnvs-base-palette-soap-200));
112
+ background: var(--cnvs-system-icon-circle-background, var(--cnvs-sys-color-bg-alt-soft));
113
113
  display: flex;
114
114
  align-items: center;
115
115
  justify-content: center;
package/loading-dots.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-jknd66 {
1
+ @keyframes animation-ainc66 {
2
2
  0%, 80%, 100% {
3
3
  transform: scale(0);
4
4
  }
@@ -26,7 +26,7 @@
26
26
  outline: 0.125rem solid transparent;
27
27
  transform: scale(0);
28
28
  display: inline-block;
29
- animation-name: animation-jknd66;
29
+ animation-name: animation-ainc66;
30
30
  animation-duration: calc(var(--cnvs-loading-dots-animation-duration-ms) * 35);
31
31
  animation-iteration-count: infinite;
32
32
  animation-timing-function: ease-in-out;
package/modal.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-jknd68 {
1
+ @keyframes animation-ainc68 {
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-jknd68;
21
+ animation-name: animation-ainc68;
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": "14.0.0-alpha.1140-next.0",
3
+ "version": "14.0.0-alpha.1144-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": "2a00c1cb2d5d9535216908ec4a12db43e6a81d73"
28
+ "gitHead": "8c2a2215d9a0b96f98e4b768781d3a5061a61f9c"
29
29
  }
package/popup.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
 
6
- @keyframes animation-jkndy {
6
+ @keyframes animation-aincy {
7
7
  0% {
8
8
  opacity: 1;
9
9
  transform: translate(var(--cnvs-translate-position-x), var(--cnvs-translate-position-y));
@@ -32,7 +32,7 @@
32
32
  padding: var(--cnvs-sys-space-x6);
33
33
  max-height: var(--cnvs-popup-card-max-height);
34
34
  overflow-y: auto;
35
- animation-name: animation-jkndy;
35
+ animation-name: animation-aincy;
36
36
  animation-duration: 150ms;
37
37
  animation-timing-function: ease-out;
38
38
  transform-origin: var(--cnvs-popup-card-transform-origin-vertical) var(--cnvs-popup-card-transform-origin-horizontal);
package/segmented-control.css CHANGED
@@ -20,7 +20,7 @@
20
20
  .cnvs-segmented-control-button:disabled, .cnvs-segmented-control-button.disabled {
21
21
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
22
22
  --cnvs-button-border: var(--cnvs-sys-color-border-container);
23
- --cnvs-system-icon-color: var(--cnvs-base-palette-soap-600);
23
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
24
24
  }
25
25
 
26
26
  .cnvs-segmented-control-button:first-of-type {
@@ -45,7 +45,7 @@
45
45
  .cnvs-segmented-control-button[aria-pressed="true"]:disabled, .cnvs-segmented-control-button[aria-pressed="true"].disabled {
46
46
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-softer);
47
47
  --cnvs-button-border: var(--cnvs-sys-color-border-container);
48
- --cnvs-system-icon-color: var(--cnvs-base-palette-soap-600);
48
+ --cnvs-system-icon-color: var(--cnvs-sys-color-icon-soft);
49
49
  }
50
50
 
51
51
  .cnvs-segmented-control-button:focus-visible, .cnvs-segmented-control-button.focus {
package/skeleton.css CHANGED
@@ -36,7 +36,7 @@
36
36
  }
37
37
 
38
38
 
39
- @keyframes animation-jknd6z {
39
+ @keyframes animation-ainc6z {
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-jknd6z 0.8s linear infinite alternate;
52
+ animation: animation-ainc6z 0.8s linear infinite alternate;
53
53
  position: relative;
54
54
  overflow: hidden;
55
55
  height: 100%;
package/switch.css CHANGED
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  .cnvs-switch-input:focus-visible~div:first-of-type, .cnvs-switch-input:focus~div:first-of-type, .cnvs-switch-input.focus~div:first-of-type {
43
- box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
43
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
44
44
  }
45
45
 
46
46
 
package/tabs.css CHANGED
@@ -29,14 +29,14 @@
29
29
  }
30
30
 
31
31
  .cnvs-tab-item:hover, .cnvs-tab-item.hover, .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
32
- background-color: var(--cnvs-base-palette-soap-200);
33
- color: var(--cnvs-base-palette-black-pepper-400);
34
- --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
32
+ background-color: var(--cnvs-sys-color-bg-alt-default);
33
+ color: var(--cnvs-sys-color-fg-contrast-default);
34
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
35
35
  }
36
36
 
37
37
  .cnvs-tab-item:focus-visible, .cnvs-tab-item.focus {
38
38
  outline: none;
39
- box-shadow: inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
39
+ box-shadow: inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)),inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));
40
40
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
41
41
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
42
42
  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-strong);
package/tooltip.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-jknd2v {
1
+ @keyframes animation-ainc2v {
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-jknd2v;
25
+ animation-name: animation-ainc2v;
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);