@workday/canvas-kit-preview-css 16.0.0-alpha.0441-next.0 → 16.0.0-alpha.0445-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/package.json +2 -2
  2. package/radio.css +20 -20
  3. package/switch.css +12 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-css",
3
- "version": "16.0.0-alpha.0441-next.0",
3
+ "version": "16.0.0-alpha.0445-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": "df9a69acd1329b7bc14a225dfbe46d4cfe3265c0"
28
+ "gitHead": "fc927ea8a9cdb16ad227bbfc5d843dba09009b43"
29
29
  }
package/radio.css CHANGED
@@ -1,25 +1,25 @@
1
1
  .cnvs-preview-radio-input {
2
2
  box-sizing: border-box;
3
3
  cursor: pointer;
4
- height: var(--cnvs-base-size-225, 1.125rem);
5
- width: var(--cnvs-base-size-225, 1.125rem);
4
+ height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
5
+ width: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
6
6
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
7
7
  position: absolute;
8
8
  margin: 0;
9
+ opacity: var(--cnvs-sys-opacity-zero);
9
10
  }
10
11
 
11
12
  .cnvs-preview-radio-input:focus-visible, .cnvs-preview-radio-input.focus, .cnvs-preview-radio-input:active {
12
- outline: transparent;
13
+ outline: 0.0625rem solid transparent;
13
14
  }
14
15
 
15
16
  .cnvs-preview-radio-input:disabled, .cnvs-preview-radio-input.disabled {
16
17
  cursor: auto;
17
- opacity: var(--cnvs-sys-opacity-disabled);
18
18
  }
19
19
 
20
20
  .cnvs-preview-radio-input:disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input:disabled.checked+.cnvs-radio-check, .cnvs-preview-radio-input.disabled.checked+.cnvs-radio-check {
21
21
  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
22
- border: 0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
22
+ border: 0.3125rem solid var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));
23
23
  }
24
24
 
25
25
  .cnvs-preview-radio-input +.cnvs-radio-check {
@@ -29,8 +29,8 @@
29
29
  background-color: var(--cnvs-sys-color-bg-default);
30
30
  box-sizing: border-box;
31
31
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
32
- height: var(--cnvs-base-size-225, 1.125rem);
33
- width: var(--cnvs-base-size-225, 1.125rem);
32
+ height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
33
+ width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
34
34
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
35
35
  justify-content: center;
36
36
  pointer-events: none;
@@ -51,7 +51,7 @@
51
51
 
52
52
  .cnvs-preview-radio-input:checked+.cnvs-radio-check, .cnvs-preview-radio-input.checked+.cnvs-radio-check {
53
53
  background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
54
- border: 0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
54
+ border: 0.3125rem solid var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));
55
55
  }
56
56
 
57
57
  .cnvs-preview-radio-input:focus-visible:checked+.cnvs-radio-check, .cnvs-preview-radio-input:focus-visible:hover:checked+.cnvs-radio-check, .cnvs-preview-radio-input.focus:checked+.cnvs-radio-check, .cnvs-preview-radio-input.focus:hover:checked+.cnvs-radio-check {
@@ -75,7 +75,7 @@
75
75
  }
76
76
 
77
77
  .cnvs-preview-radio-input.variant-inverse:disabled:checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.disabled:checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse:disabled.checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.disabled.checked+[data-part="cnvs-radio-check"] {
78
- background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
78
+ background-color: var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));
79
79
  border-color: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
80
80
  }
81
81
 
@@ -103,29 +103,31 @@
103
103
 
104
104
  .cnvs-preview-radio-input-wrapper {
105
105
  box-sizing: border-box;
106
- height: var(--cnvs-base-size-225, 1.125rem);
107
- width: var(--cnvs-base-size-225, 1.125rem);
106
+ height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
107
+ width: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
108
108
  flex: 0 0 auto;
109
+ align-items: center;
110
+ justify-content: center;
109
111
  }
110
112
 
111
113
  .cnvs-preview-radio-input-wrapper ::before {
112
114
  content: '';
113
115
  position: absolute;
114
116
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
115
- height: var(--cnvs-base-size-225, 1.125rem);
117
+ height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
116
118
  transition: box-shadow 150ms ease-out;
117
- width: var(--cnvs-base-size-225, 1.125rem);
119
+ width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
118
120
  pointer-events: none;
119
121
  opacity: var(--cnvs-sys-opacity-full);
120
122
  }
121
123
 
122
124
  .cnvs-preview-radio-input-wrapper:hover:before, .cnvs-preview-radio-input-wrapper.hover:before {
123
- box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
125
+ box-shadow: 0 0 0 0.25rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
124
126
  }
125
127
 
126
128
 
127
129
  .cnvs-preview-radio-input-wrapper.variant-inverse:hover:before, .cnvs-preview-radio-input-wrapper.variant-inverse.hover:before {
128
- box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));
130
+ box-shadow: 0 0 0 0.25rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));
129
131
  }
130
132
 
131
133
 
@@ -159,7 +161,7 @@
159
161
  .cnvs-preview-radio-label {
160
162
  box-sizing: border-box;
161
163
  align-items: flex-start;
162
- min-height: var(--cnvs-base-size-225, 1.125rem);
164
+ min-height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
163
165
  position: relative;
164
166
  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
165
167
  }
@@ -167,11 +169,11 @@
167
169
 
168
170
  .cnvs-preview-radio-group {
169
171
  box-sizing: border-box;
172
+ --cnvs-corner-shape-shape: var(--cnvs-sys-shape-lg, 0.75rem);
170
173
  display: flex;
171
174
  flex-direction: column;
172
- border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
173
175
  gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
174
- padding: 0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
176
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
175
177
  margin: 0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);
176
178
  transition: 100ms box-shadow;
177
179
  width: fit-content;
@@ -180,12 +182,10 @@
180
182
 
181
183
  .cnvs-preview-radio-group.error-error {
182
184
  box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
183
- background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
184
185
  }
185
186
 
186
187
 
187
188
  .cnvs-preview-radio-group.error-caution {
188
- background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
189
189
  box-shadow: inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
190
190
  }
191
191
 
package/switch.css CHANGED
@@ -5,19 +5,19 @@
5
5
  align-items: center;
6
6
  pointer-events: none;
7
7
  border: 0.0625rem solid transparent;
8
- height: var(--cnvs-base-size-225, 1.125rem);
8
+ height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
9
9
  width: 2.125rem;
10
10
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
11
- padding: 0 0.125rem;
11
+ padding: 0 0.0625rem;
12
12
  transition: background-color 200ms ease;
13
- background-color: var(--cnvs-sys-color-accent-muted-soft, var(--cnvs-sys-color-bg-muted-softer, oklch(0.754 0.0181 256.33 / 1)));
13
+ background-color: var(--cnvs-sys-color-accent-muted-default, var(--cnvs-sys-color-bg-muted-default, oklch(0.5103 0.0255 256.8 / 1)));
14
14
  }
15
15
 
16
16
 
17
17
  .cnvs-preview-switch-circle {
18
18
  box-sizing: border-box;
19
- width: var(--cnvs-base-size-150, 0.75rem);
20
- height: var(--cnvs-base-size-150, 0.75rem);
19
+ width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
20
+ height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
21
21
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
22
22
  border: 0.0625rem solid transparent;
23
23
  box-shadow: var(--cnvs-sys-depth-1);
@@ -29,11 +29,11 @@
29
29
 
30
30
 
31
31
  .cnvs-preview-switch-circle.checked {
32
- transform: translateX(1rem);
32
+ transform: translateX(0.875rem);
33
33
  }
34
34
 
35
35
  .cnvs-preview-switch-circle.checked :dir(rtl) {
36
- transform: translateX(-1rem);
36
+ transform: translateX(-0.875rem);
37
37
  }
38
38
 
39
39
 
@@ -41,7 +41,7 @@
41
41
  box-sizing: border-box;
42
42
  position: relative;
43
43
  margin-block-start: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
44
- height: var(--cnvs-base-size-225, 1.125rem);
44
+ height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
45
45
  width: 2.125rem;
46
46
  }
47
47
 
@@ -53,11 +53,11 @@
53
53
  position: absolute;
54
54
  transition: transform 0ms;
55
55
  pointer-events: none;
56
- transform: translateX(0.75rem);
56
+ transform: translateX(0.875rem);
57
57
  }
58
58
 
59
59
  .cnvs-preview-switch-icon :dir(rtl) {
60
- transform: translateX(-0.75rem);
60
+ transform: translateX(-0.875rem);
61
61
  }
62
62
 
63
63
 
@@ -75,7 +75,7 @@
75
75
  display: flex;
76
76
  position: absolute;
77
77
  margin: 0;
78
- height: var(--cnvs-base-size-225, 1.125rem);
78
+ height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
79
79
  width: 2.125rem;
80
80
  border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
81
81
  opacity: 0;
@@ -87,7 +87,7 @@
87
87
  }
88
88
 
89
89
  .cnvs-preview-switch-input:checked~div:first-of-type, .cnvs-preview-switch-input.checked~div:first-of-type {
90
- background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
90
+ background-color: var(--cnvs-sys-color-brand-accent-positive, var(--cnvs-brand-success-base, oklch(0.5069 0.1569 145.56 / 1)));
91
91
  }
92
92
 
93
93
  .cnvs-preview-switch-input:checked:disabled~div:first-of-type, .cnvs-preview-switch-input.checked:disabled~div:first-of-type, .cnvs-preview-switch-input:checked.disabled~div:first-of-type, .cnvs-preview-switch-input.checked.disabled~div:first-of-type {