@workday/canvas-kit-css 11.0.0-alpha.700-next.0 → 11.0.0-alpha.702-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 (5) hide show
  1. package/button.css +20 -20
  2. package/checkbox.css +15 -15
  3. package/common.css +33 -33
  4. package/package.json +2 -2
  5. package/switch.css +1 -1
package/button.css CHANGED
@@ -5,7 +5,7 @@
5
5
  letter-spacing: 0.015rem;
6
6
  font-weight: bold;
7
7
  background-color: var(--cnvs-button-default-background, transparent);
8
- color: var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));
8
+ color: var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
9
9
  border-width: 1px;
10
10
  border-style: solid;
11
11
  gap: var(--cnvs-sys-space-x2, calc(0.25rem * 2));
@@ -20,7 +20,7 @@
20
20
  white-space: nowrap;
21
21
  -webkit-font-smoothing: antialiased;
22
22
  -moz-osx-font-smoothing: grayscale;
23
- border-radius: var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round));
23
+ border-radius: var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));
24
24
  position: relative;
25
25
  vertical-align: middle;
26
26
  overflow: hidden;
@@ -35,40 +35,40 @@
35
35
 
36
36
  .cnvs-base-button span .wd-icon-fill {
37
37
  transition-duration: 40ms;
38
- fill: var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));
38
+ fill: var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
39
39
  }
40
40
 
41
41
  .cnvs-base-button .wd-icon-background~.wd-icon-accent, .cnvs-base-button .wd-icon-background~.wd-icon-accent2 {
42
- fill: var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));
42
+ fill: var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
43
43
  }
44
44
 
45
45
  .cnvs-base-button:focus-visible, .cnvs-base-button.focus {
46
46
  background-color: var(--cnvs-button-focus-background, transparent);
47
47
  border-color: var(--cnvs-button-focus-border, transparent);
48
- color: var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));
49
- box-shadow: 0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100)),0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base));
48
+ color: var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
49
+ box-shadow: 0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))),0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));
50
50
  }
51
51
 
52
52
  .cnvs-base-button:focus-visible span .wd-icon-fill, .cnvs-base-button.focus span .wd-icon-fill {
53
- fill: var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));
53
+ fill: var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
54
54
  }
55
55
 
56
56
  .cnvs-base-button:focus-visible .wd-icon-background~.wd-icon-accent, .cnvs-base-button.focus .wd-icon-background~.wd-icon-accent, .cnvs-base-button:focus-visible .wd-icon-background~.wd-icon-accent2, .cnvs-base-button.focus .wd-icon-background~.wd-icon-accent2 {
57
- fill: var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));
57
+ fill: var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
58
58
  }
59
59
 
60
60
  .cnvs-base-button:hover, .cnvs-base-button.hover {
61
- background-color: var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500));
61
+ background-color: var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));
62
62
  border-color: var(--cnvs-button-hover-border, transparent);
63
- color: var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500));
63
+ color: var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));
64
64
  }
65
65
 
66
66
  .cnvs-base-button:hover span .wd-icon-fill, .cnvs-base-button.hover span .wd-icon-fill {
67
- fill: var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));
67
+ fill: var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));
68
68
  }
69
69
 
70
70
  .cnvs-base-button:hover .wd-icon-background~.wd-icon-accent, .cnvs-base-button.hover .wd-icon-background~.wd-icon-accent, .cnvs-base-button:hover .wd-icon-background~.wd-icon-accent2, .cnvs-base-button.hover .wd-icon-background~.wd-icon-accent2 {
71
- fill: var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));
71
+ fill: var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));
72
72
  }
73
73
 
74
74
  .cnvs-base-button:hover:active {
@@ -78,29 +78,29 @@
78
78
  .cnvs-base-button:active, .cnvs-base-button.active {
79
79
  background-color: var(--cnvs-button-active-background, transparent);
80
80
  border-color: var(--cnvs-button-active-border, transparent);
81
- color: var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));
81
+ color: var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
82
82
  }
83
83
 
84
84
  .cnvs-base-button:active span .wd-icon-fill, .cnvs-base-button.active span .wd-icon-fill {
85
- fill: var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));
85
+ fill: var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
86
86
  }
87
87
 
88
88
  .cnvs-base-button:active .wd-icon-background~.wd-icon-accent, .cnvs-base-button.active .wd-icon-background~.wd-icon-accent, .cnvs-base-button:active .wd-icon-background~.wd-icon-accent2, .cnvs-base-button.active .wd-icon-background~.wd-icon-accent2 {
89
- fill: var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));
89
+ fill: var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
90
90
  }
91
91
 
92
92
  .cnvs-base-button:disabled, .cnvs-base-button.disabled {
93
93
  background-color: var(--cnvs-button-disabled-background, transparent);
94
94
  border-color: var(--cnvs-button-disabled-border, transparent);
95
- color: var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));
95
+ color: var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
96
96
  }
97
97
 
98
98
  .cnvs-base-button:disabled span .wd-icon-fill, .cnvs-base-button.disabled span .wd-icon-fill {
99
- fill: var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));
99
+ fill: var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
100
100
  }
101
101
 
102
102
  .cnvs-base-button:disabled .wd-icon-background~.wd-icon-accent, .cnvs-base-button.disabled .wd-icon-background~.wd-icon-accent, .cnvs-base-button:disabled .wd-icon-background~.wd-icon-accent2, .cnvs-base-button.disabled .wd-icon-background~.wd-icon-accent2 {
103
- fill: var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));
103
+ fill: var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));
104
104
  }
105
105
 
106
106
 
@@ -248,7 +248,7 @@
248
248
  }
249
249
 
250
250
  .cnvs-tertiary:focus-visible, .cnvs-tertiary.focus {
251
- box-shadow: 0 0 0 0px var(--cnvs-base-palette-french-vanilla-100),0 0 0 2px var(--cnvs-brand-common-focus-outline);
251
+ box-shadow: 0 0 0 0px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
252
252
  }
253
253
 
254
254
 
@@ -285,7 +285,7 @@
285
285
  }
286
286
 
287
287
  .cnvs-tertiary-button--variant-inverse:focus-visible, .cnvs-tertiary-button--variant-inverse.focus {
288
- box-shadow: inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400),0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);
288
+ box-shadow: inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)),0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
289
289
  }
290
290
 
291
291
 
package/checkbox.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .cnvs-checkbox-ripple {
2
2
  border-radius: var(--cnvs-sys-shape-round, calc(0.25rem * 250));
3
3
  box-shadow: none;
4
- height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
5
- width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
4
+ height: calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) + 0.125rem);
5
+ width: calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) + 0.125rem);
6
6
  transition: box-shadow 150ms ease-out;
7
7
  position: absolute;
8
8
  pointer-events: none;
@@ -18,14 +18,14 @@
18
18
 
19
19
  .cnvs-checkbox-container>div {
20
20
  display: flex;
21
- height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
22
- min-width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
21
+ height: calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) + 0.125rem);
22
+ min-width: calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) + 0.125rem);
23
23
  margin-top: 0.1875rem;
24
24
  align-self: flex-start;
25
25
  }
26
26
 
27
27
  .cnvs-checkbox-container>label {
28
- padding-inline-start: var(--cnvs-sys-space-x3, calc(var(--cnvs-base-unit) * 3));
28
+ padding-inline-start: var(--cnvs-sys-space-x3, calc(var(--cnvs-base-unit, 0.25rem) * 3));
29
29
  }
30
30
 
31
31
 
@@ -35,26 +35,26 @@
35
35
  border-radius: var(--cnvs-sys-shape-half, calc(0.25rem * 0.5));
36
36
  box-sizing: border-box;
37
37
  display: flex;
38
- height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
38
+ height: calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) + 0.125rem);
39
39
  justify-content: center;
40
- padding: var(--cnvs-sys-space-zero, 0) calc(var(--cnvs-sys-space-x1) / 2);
40
+ padding: var(--cnvs-sys-space-zero, 0) calc(var(--cnvs-sys-space-x1, 0.25rem) / 2);
41
41
  pointer-events: none;
42
42
  position: absolute;
43
43
  transition: border 200ms ease,background 200ms;
44
- width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
44
+ width: calc(var(--cnvs-sys-space-x4, calc(0.25rem * 4)) + 0.125rem);
45
45
  border: 0.0625rem solid var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));
46
46
  }
47
47
 
48
48
 
49
49
  .cnvs-checkbox-background--error-error {
50
- --cnvs-background-inner: var(--cnvs-brand-error-base, var(--cnvs-base-palette-cinnamon-500));
50
+ --cnvs-background-inner: var(--cnvs-brand-error-base, var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1)));
51
51
  --cnvs-background-outer: transparent;
52
52
  }
53
53
 
54
54
 
55
55
  .cnvs-checkbox-background--error-alert {
56
- --cnvs-background-inner: var(--cnvs-brand-alert-base, var(--cnvs-base-palette-cantaloupe-600));
57
- --cnvs-background-outer: var(--cnvs-brand-alert-darkest, var(--cnvs-base-palette-cantaloupe-400));
56
+ --cnvs-background-inner: var(--cnvs-brand-alert-base, var(--cnvs-base-palette-cantaloupe-600, rgba(192,108,0,1)));
57
+ --cnvs-background-outer: var(--cnvs-brand-alert-darkest, var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1)));
58
58
  }
59
59
 
60
60
 
@@ -92,8 +92,8 @@
92
92
 
93
93
 
94
94
  .cnvs-indeterminate-box {
95
- width: calc(var(--cnvs-sys-space-x2) + 0.125rem);
96
- height: calc(var(--cnvs-sys-space-x1) / 2);
95
+ width: calc(var(--cnvs-sys-space-x2, calc(0.25rem * 2)) + 0.125rem);
96
+ height: calc(var(--cnvs-sys-space-x1, 0.25rem) / 2);
97
97
  background-color: var(--cnvs-brand-primary-accent, rgba(255,255,255,1));
98
98
  }
99
99
 
@@ -144,11 +144,11 @@
144
144
  .cnvs-checkbox-input:where(:focus-visible, .focus)~div:first-of-type {
145
145
  border-color: var(--cnvs-brand-primary-base, rgba(8,117,225,1));
146
146
  border-width: 0.125rem;
147
- box-shadow: 0 0 0 0px var(--cnvs-base-palette-french-vanilla-100),0 0 0 0px var(--cnvs-brand-common-focus-outline);
147
+ 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));
148
148
  }
149
149
 
150
150
  .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 {
151
- box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100),0 0 0 4px var(--cnvs-brand-common-focus-outline, var(--cnvs-base-palette-blueberry-400));
151
+ 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, var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1)));
152
152
  border-color: var(--cnvs-brand-primary-base, rgba(8,117,225,1));
153
153
  border-width: 0.125rem;
154
154
  }
package/common.css CHANGED
@@ -14,38 +14,38 @@
14
14
 
15
15
  .cnvs-default-branding {
16
16
  --cnvs-brand-error-darkest: rgba(128,22,14,1);
17
- --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-cantaloupe-400);
18
- --cnvs-brand-common-error-inner: var(--cnvs-base-palette-cinnamon-500);
19
- --cnvs-brand-common-focus-outline: var(--cnvs-base-palette-blueberry-400);
20
- --cnvs-brand-neutral-accent: var(--cnvs-base-palette-french-vanilla-100);
21
- --cnvs-brand-neutral-darkest: var(--cnvs-base-palette-licorice-400);
22
- --cnvs-brand-neutral-dark: var(--cnvs-base-palette-licorice-300);
23
- --cnvs-brand-neutral-base: var(--cnvs-base-palette-soap-600);
24
- --cnvs-brand-neutral-light: var(--cnvs-base-palette-soap-300);
25
- --cnvs-brand-neutral-lightest: var(--cnvs-base-palette-soap-200);
26
- --cnvs-brand-success-accent: var(--cnvs-base-palette-french-vanilla-100);
27
- --cnvs-brand-success-darkest: var(--cnvs-base-palette-green-apple-600);
28
- --cnvs-brand-success-dark: var(--cnvs-base-palette-green-apple-500);
29
- --cnvs-brand-success-base: var(--cnvs-base-palette-green-apple-400);
30
- --cnvs-brand-success-light: var(--cnvs-base-palette-green-apple-300);
31
- --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-apple-100);
32
- --cnvs-brand-error-accent: var(--cnvs-base-palette-french-vanilla-100);
33
- --cnvs-brand-error-dark: var(--cnvs-base-palette-cinnamon-600);
34
- --cnvs-brand-error-base: var(--cnvs-base-palette-cinnamon-500);
35
- --cnvs-brand-error-light: var(--cnvs-base-palette-cinnamon-200);
36
- --cnvs-brand-error-lightest: var(--cnvs-base-palette-cinnamon-100);
37
- --cnvs-brand-alert-accent: var(--cnvs-base-palette-french-vanilla-100);
38
- --cnvs-brand-alert-darkest: var(--cnvs-base-palette-cantaloupe-600);
39
- --cnvs-brand-alert-dark: var(--cnvs-base-palette-cantaloupe-500);
40
- --cnvs-brand-alert-base: var(--cnvs-base-palette-cantaloupe-400);
41
- --cnvs-brand-alert-light: var(--cnvs-base-palette-cantaloupe-200);
42
- --cnvs-brand-alert-lightest: var(--cnvs-base-palette-cantaloupe-100);
43
- --cnvs-brand-primary-accent: var(--cnvs-base-palette-french-vanilla-100);
44
- --cnvs-brand-primary-darkest: var(--cnvs-base-palette-blueberry-600);
45
- --cnvs-brand-primary-dark: var(--cnvs-base-palette-blueberry-500);
46
- --cnvs-brand-primary-base: var(--cnvs-base-palette-blueberry-400);
47
- --cnvs-brand-primary-light: var(--cnvs-base-palette-blueberry-200);
48
- --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blueberry-100);
49
- --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
17
+ --cnvs-brand-common-alert-inner: var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));
18
+ --cnvs-brand-common-error-inner: var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));
19
+ --cnvs-brand-common-focus-outline: var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));
20
+ --cnvs-brand-neutral-accent: var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
21
+ --cnvs-brand-neutral-darkest: var(--cnvs-base-palette-licorice-400, rgba(74,85,97,1));
22
+ --cnvs-brand-neutral-dark: var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));
23
+ --cnvs-brand-neutral-base: var(--cnvs-base-palette-soap-600, rgba(185,192,199,1));
24
+ --cnvs-brand-neutral-light: var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));
25
+ --cnvs-brand-neutral-lightest: var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));
26
+ --cnvs-brand-success-accent: var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
27
+ --cnvs-brand-success-darkest: var(--cnvs-base-palette-green-apple-600, rgba(33,122,55,1));
28
+ --cnvs-brand-success-dark: var(--cnvs-base-palette-green-apple-500, rgba(49,156,76,1));
29
+ --cnvs-brand-success-base: var(--cnvs-base-palette-green-apple-400, rgba(67,196,99,1));
30
+ --cnvs-brand-success-light: var(--cnvs-base-palette-green-apple-300, rgba(95,227,128,1));
31
+ --cnvs-brand-success-lightest: var(--cnvs-base-palette-green-apple-100, rgba(235,255,240,1));
32
+ --cnvs-brand-error-accent: var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
33
+ --cnvs-brand-error-dark: var(--cnvs-base-palette-cinnamon-600, rgba(163,27,18,1));
34
+ --cnvs-brand-error-base: var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));
35
+ --cnvs-brand-error-light: var(--cnvs-base-palette-cinnamon-200, rgba(252,201,197,1));
36
+ --cnvs-brand-error-lightest: var(--cnvs-base-palette-cinnamon-100, rgba(255,239,238,1));
37
+ --cnvs-brand-alert-accent: var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
38
+ --cnvs-brand-alert-darkest: var(--cnvs-base-palette-cantaloupe-600, rgba(192,108,0,1));
39
+ --cnvs-brand-alert-dark: var(--cnvs-base-palette-cantaloupe-500, rgba(243,139,0,1));
40
+ --cnvs-brand-alert-base: var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));
41
+ --cnvs-brand-alert-light: var(--cnvs-base-palette-cantaloupe-200, rgba(252,212,159,1));
42
+ --cnvs-brand-alert-lightest: var(--cnvs-base-palette-cantaloupe-100, rgba(255,238,217,1));
43
+ --cnvs-brand-primary-accent: var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));
44
+ --cnvs-brand-primary-darkest: var(--cnvs-base-palette-blueberry-600, rgba(0,67,135,1));
45
+ --cnvs-brand-primary-dark: var(--cnvs-base-palette-blueberry-500, rgba(0,92,185,1));
46
+ --cnvs-brand-primary-base: var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));
47
+ --cnvs-brand-primary-light: var(--cnvs-base-palette-blueberry-200, rgba(166,210,255,1));
48
+ --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blueberry-100, rgba(215,234,252,1));
49
+ --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base, rgba(8,117,225,1)) 0%, var(--cnvs-brand-primary-dark, rgba(0,92,185,1)) 100%);
50
50
  }
51
51
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "11.0.0-alpha.700-next.0",
3
+ "version": "11.0.0-alpha.702-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": "10913088c5ce18dfaf341ed21c50f7a41b1e664e"
28
+ "gitHead": "5daa6957925ea09fab97a577c09f8d94f4f1afe9"
29
29
  }
package/switch.css CHANGED
@@ -38,7 +38,7 @@
38
38
  }
39
39
 
40
40
  .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 {
41
- box-shadow: 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100),0 0 0 4px var(--cnvs-brand-common-focus-outline);
41
+ 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));
42
42
  }
43
43
 
44
44