@workday/canvas-kit-css 15.0.0-alpha.1303-next.0 → 15.0.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 (37) hide show
  1. package/LICENSE +2 -1
  2. package/action-bar.css +7 -8
  3. package/avatar.css +90 -97
  4. package/badge.css +14 -13
  5. package/banner.css +36 -35
  6. package/breadcrumbs.css +48 -48
  7. package/button.css +292 -265
  8. package/card.css +12 -12
  9. package/checkbox.css +107 -100
  10. package/collection.css +1 -2
  11. package/color-picker.css +7 -13
  12. package/combobox.css +9 -0
  13. package/common.css +30 -0
  14. package/expandable.css +42 -40
  15. package/form-field.css +70 -76
  16. package/icon.css +58 -29
  17. package/information-highlight.css +122 -0
  18. package/loading-dots.css +9 -10
  19. package/menu.css +76 -73
  20. package/modal.css +55 -55
  21. package/package.json +4 -3
  22. package/pagination.css +67 -60
  23. package/pill.css +221 -0
  24. package/popup.css +22 -21
  25. package/segmented-control.css +119 -45
  26. package/select.css +19 -15
  27. package/side-panel.css +157 -0
  28. package/skeleton.css +14 -14
  29. package/switch.css +22 -24
  30. package/table.css +33 -33
  31. package/tabs.css +45 -36
  32. package/text-area.css +2 -2
  33. package/text-input.css +29 -31
  34. package/text.css +52 -52
  35. package/toast.css +17 -18
  36. package/tooltip.css +25 -23
  37. package/README.md +0 -4
package/card.css CHANGED
@@ -1,13 +1,13 @@
1
- .cnvs-card-heading {
1
+ .cnvs-card-body {
2
2
  box-sizing: border-box;
3
- color: var(--cnvs-sys-color-fg-strong);
4
- font-weight: var(--cnvs-sys-font-weight-bold);
5
- margin-block: var(--cnvs-sys-space-zero);
6
3
  }
7
4
 
8
5
 
9
- .cnvs-card-body {
6
+ .cnvs-card-heading {
10
7
  box-sizing: border-box;
8
+ color: var(--cnvs-sys-color-fg-strong);
9
+ font-weight: var(--cnvs-sys-font-weight-bold);
10
+ margin-block: var(--cnvs-sys-padding-none, var(--cnvs-sys-space-zero, 0));
11
11
  }
12
12
 
13
13
 
@@ -15,11 +15,11 @@
15
15
  box-sizing: border-box;
16
16
  display: flex;
17
17
  flex-direction: column;
18
- gap: var(--cnvs-sys-space-x6);
19
- padding: var(--cnvs-sys-space-x8);
20
- background-color: var(--cnvs-sys-color-bg-default);
21
- border-radius: var(--cnvs-sys-shape-x2);
22
- border: 0.0625rem solid var(--cnvs-sys-color-border-container);
18
+ gap: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
19
+ padding: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
20
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
21
+ border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
22
+ border: 0.0625rem solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
23
23
  }
24
24
 
25
25
 
@@ -28,8 +28,8 @@
28
28
  }
29
29
 
30
30
 
31
- .cnvs-card.variant-filled {
32
- background-color: var(--cnvs-sys-color-bg-alt-soft);
31
+ .cnvs-card.variant-tonal {
32
+ background-color: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
33
33
  border-color: var(--cnvs-sys-color-border-transparent);
34
34
  }
35
35
 
package/checkbox.css CHANGED
@@ -1,64 +1,46 @@
1
- .cnvs-checkbox-ripple {
2
- box-sizing: border-box;
3
- border-radius: var(--cnvs-sys-shape-round);
4
- box-shadow: none;
5
- height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
6
- width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
7
- transition: box-shadow 150ms ease-out;
8
- position: absolute;
9
- pointer-events: none;
10
- }
11
-
12
-
13
- .cnvs-checkbox-container {
14
- box-sizing: border-box;
15
- display: flex;
16
- align-items: center;
17
- min-height: var(--cnvs-sys-space-x6);
18
- position: relative;
19
- }
20
-
21
- .cnvs-checkbox-container>div {
22
- display: flex;
23
- height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
24
- min-width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
25
- margin-top: 0.1875rem;
26
- align-self: flex-start;
27
- }
28
-
29
- .cnvs-checkbox-container>label {
30
- padding-inline-start: var(--cnvs-sys-space-x3);
31
- }
32
-
33
-
34
1
  .cnvs-checkbox-background {
35
2
  box-sizing: border-box;
36
3
  align-items: center;
37
- background-color: var(--cnvs-sys-color-bg-default);
38
- border-radius: var(--cnvs-sys-shape-half);
4
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
5
+ border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
39
6
  display: flex;
40
- height: calc(var(--cnvs-sys-space-x4) + 0.125rem);
7
+ height: var(--cnvs-base-size-225, 1.125rem);
41
8
  justify-content: center;
42
- padding: var(--cnvs-sys-space-zero) calc(var(--cnvs-sys-space-x1) / 2);
9
+ padding: 0 0.125rem;
43
10
  pointer-events: none;
44
11
  position: absolute;
45
12
  transition: border 200ms ease,background 200ms;
46
- width: calc(var(--cnvs-sys-space-x4) + 0.125rem);
13
+ width: var(--cnvs-base-size-225, 1.125rem);
47
14
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
48
15
  }
49
16
 
50
17
 
18
+ .cnvs-checkbox-background.variant-inverse {
19
+ background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
20
+ }
21
+
22
+
51
23
  .cnvs-checkbox-background.error-error {
52
- --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-common-error-inner);
24
+ --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
53
25
  --cnvs-checkbox-background-error-ring-color-outer: transparent;
54
- background-color: var(--cnvs-brand-error-lightest);
26
+ background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
55
27
  }
56
28
 
57
29
 
58
30
  .cnvs-checkbox-background.error-caution {
59
- --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-brand-common-alert-inner);
60
- --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-brand-common-alert-outer);
61
- background-color: var(--cnvs-brand-alert-lightest);
31
+ --cnvs-checkbox-background-error-ring-color-inner: var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
32
+ --cnvs-checkbox-background-error-ring-color-outer: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
33
+ background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
34
+ }
35
+
36
+
37
+ .cnvs-checkbox-background.variant-inverse.error-error {
38
+ background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
39
+ }
40
+
41
+
42
+ .cnvs-checkbox-background.variant-inverse.error-caution {
43
+ background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
62
44
  }
63
45
 
64
46
 
@@ -80,7 +62,7 @@
80
62
 
81
63
 
82
64
  .cnvs-checkbox-check.checked {
83
- --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
65
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
84
66
  opacity: var(--cnvs-sys-opacity-full);
85
67
  transform: scale(1);
86
68
  }
@@ -93,28 +75,66 @@
93
75
 
94
76
 
95
77
  .cnvs-checkbox-check.variant-inverse {
96
- --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
78
+ --cnvs-system-icon-color: var(--cnvs-sys-color-brand-fg-primary-default, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
97
79
  }
98
80
 
99
81
  .cnvs-checkbox-check.variant-inverse>div {
100
- background-color: var(--cnvs-brand-primary-base);
82
+ background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
101
83
  }
102
84
 
103
85
 
104
86
  .cnvs-indeterminate-box {
105
87
  box-sizing: border-box;
106
88
  width: 0.625rem;
107
- height: calc(var(--cnvs-sys-space-x1) / 2);
108
- background-color: var(--cnvs-brand-primary-accent);
89
+ height: 0.125rem;
90
+ background-color: var(--cnvs-sys-color-fg-inverse);
91
+ }
92
+
93
+
94
+ .cnvs-indeterminate-box.variant-inverse {
95
+ background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
96
+ }
97
+
98
+
99
+ .cnvs-checkbox-container {
100
+ box-sizing: border-box;
101
+ display: flex;
102
+ align-items: center;
103
+ min-height: var(--cnvs-base-size-225, 1.125rem);
104
+ position: relative;
105
+ }
106
+
107
+ .cnvs-checkbox-container>div {
108
+ display: flex;
109
+ height: var(--cnvs-base-size-225, 1.125rem);
110
+ min-width: var(--cnvs-base-size-225, 1.125rem);
111
+ align-self: flex-start;
112
+ position: relative;
113
+ }
114
+
115
+ .cnvs-checkbox-container>label {
116
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
117
+ }
118
+
119
+
120
+ .cnvs-checkbox-ripple {
121
+ box-sizing: border-box;
122
+ border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
123
+ box-shadow: none;
124
+ height: var(--cnvs-base-size-225, 1.125rem);
125
+ width: var(--cnvs-base-size-225, 1.125rem);
126
+ transition: box-shadow 150ms ease-out;
127
+ position: absolute;
128
+ pointer-events: none;
109
129
  }
110
130
 
111
131
 
112
132
  .cnvs-checkbox-input {
113
133
  box-sizing: border-box;
114
- border-radius: var(--cnvs-sys-shape-half);
115
- width: var(--cnvs-sys-space-x6);
116
- height: var(--cnvs-sys-space-x6);
117
- margin: var(--cnvs-sys-space-zero);
134
+ border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
135
+ width: var(--cnvs-base-size-300, 1.5rem);
136
+ height: var(--cnvs-base-size-300, 1.5rem);
137
+ margin: 0;
118
138
  margin-top: calc(0.1875rem * -1);
119
139
  margin-inline-start: calc(0.1875rem * -1);
120
140
  position: absolute;
@@ -125,86 +145,73 @@
125
145
  cursor: pointer;
126
146
  }
127
147
 
128
- .cnvs-checkbox-input:where(:hover,.hover)~span:first-of-type {
129
- box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-bg-alt-soft);
130
- }
131
-
132
- .cnvs-checkbox-input:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
133
- border-color: var(--cnvs-sys-color-border-input-strong);
148
+ .cnvs-checkbox-input:where(:hover,.hover)~[data-part="checkbox-ripple"] {
149
+ box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
134
150
  }
135
151
 
136
- .cnvs-checkbox-input:where(:checked, :indeterminate)~div:first-of-type {
137
- border-color: var(--cnvs-brand-primary-base);
138
- background-color: var(--cnvs-brand-primary-base);
152
+ .cnvs-checkbox-input:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~[data-part="checkbox-background"] {
153
+ border-color: var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));
139
154
  }
140
155
 
141
- .cnvs-checkbox-input:disabled~div:first-of-type {
142
- border-color: var(--cnvs-sys-color-border-input-disabled);
143
- background-color: var(--cnvs-sys-color-bg-alt-softer);
144
- opacity: var(--cnvs-sys-opacity-full);
156
+ .cnvs-checkbox-input:where(:checked, :indeterminate)~[data-part="checkbox-background"] {
157
+ border-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
158
+ background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
145
159
  }
146
160
 
147
- .cnvs-checkbox-input:disabled:where(:checked, :indeterminate)~div:first-of-type {
148
- border-color: var(--cnvs-brand-primary-light);
149
- background-color: var(--cnvs-brand-primary-light);
161
+ .cnvs-checkbox-input:where(:disabled, .disabled)~[data-part="checkbox-background"] {
162
+ opacity: var(--cnvs-sys-opacity-disabled);
150
163
  }
151
164
 
152
165
  .cnvs-checkbox-input:where(:focus-visible, :active, .focus, .active) {
153
166
  outline: none;
154
167
  }
155
168
 
156
- .cnvs-checkbox-input:where(:focus-visible, .focus)~div:first-of-type {
157
- border-color: var(--cnvs-brand-primary-base);
169
+ .cnvs-checkbox-input:where(:focus-visible, .focus)~[data-part="checkbox-background"] {
170
+ border-color: var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
158
171
  border-width: 0.125rem;
159
- 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));
172
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 0px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
160
173
  }
161
174
 
162
- .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 {
163
- 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);
164
- border-color: var(--cnvs-brand-primary-base);
175
+ .cnvs-checkbox-input:checked:focus-visible~[data-part="checkbox-background"], .cnvs-checkbox-input:indeterminate:focus-visible~[data-part="checkbox-background"], .cnvs-checkbox-input:checked.focus~[data-part="checkbox-background"], .cnvs-checkbox-input:indeterminate.focus~[data-part="checkbox-background"] {
176
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
177
+ border-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
165
178
  border-width: 0.125rem;
166
179
  }
167
180
 
168
- .cnvs-checkbox-input:checked:focus-visible~div:first-of-type span, .cnvs-checkbox-input:indeterminate:focus-visible~div:first-of-type span, .cnvs-checkbox-input:checked.focus~div:first-of-type span, .cnvs-checkbox-input:indeterminate.focus~div:first-of-type span {
169
- margin-inline-start: calc(0.4375rem * -1);
170
- }
171
-
172
181
 
173
- .cnvs-checkbox-input.variant-inverse~span:first-of-type {
174
- opacity: var(--cnvs-sys-opacity-disabled);
182
+ .cnvs-checkbox-input.variant-inverse~[data-part="checkbox-background"] {
183
+ border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
175
184
  }
176
185
 
177
- .cnvs-checkbox-input.variant-inverse~div:first-of-type {
178
- border-color: var(--cnvs-sys-color-border-input-inverse);
186
+ .cnvs-checkbox-input.variant-inverse:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~[data-part="checkbox-background"] {
187
+ border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
179
188
  }
180
189
 
181
- .cnvs-checkbox-input.variant-inverse:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
182
- border-color: var(--cnvs-sys-color-border-input-inverse);
190
+ .cnvs-checkbox-input.variant-inverse:where(:hover,.hover)~[data-part="checkbox-ripple"] {
191
+ box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));
183
192
  }
184
193
 
185
- .cnvs-checkbox-input.variant-inverse:where(:checked, :indeterminate)~div:first-of-type {
186
- border-color: var(--cnvs-sys-color-border-input-inverse);
187
- background-color: var(--cnvs-sys-color-bg-default);
194
+ .cnvs-checkbox-input.variant-inverse:where(:checked, :indeterminate):not(:disabled):not(.disabled)~[data-part="checkbox-background"] {
195
+ border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
196
+ background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
188
197
  }
189
198
 
190
- .cnvs-checkbox-input.variant-inverse:disabled~div:first-of-type {
191
- background-color: var(--cnvs-sys-color-bg-alt-default);
199
+ .cnvs-checkbox-input.variant-inverse:disabled~[data-part="checkbox-background"] {
192
200
  opacity: var(--cnvs-sys-opacity-disabled);
193
201
  }
194
202
 
195
- .cnvs-checkbox-input.variant-inverse:disabled:where(:checked, :indeterminate)~div:first-of-type {
196
- border-color: var(--cnvs-sys-color-border-input-inverse);
197
- background-color: var(--cnvs-sys-color-bg-default);
203
+ .cnvs-checkbox-input.variant-inverse:where(:checked, :indeterminate):where(:disabled, .disabled)~[data-part="checkbox-background"] {
204
+ background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
198
205
  }
199
206
 
200
- .cnvs-checkbox-input.variant-inverse:where(:focus-visible, .focus)~div:first-of-type {
207
+ .cnvs-checkbox-input.variant-inverse:where(:focus-visible, .focus)~[data-part="checkbox-background"] {
201
208
  border-color: var(--cnvs-sys-color-border-contrast-default);
202
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
209
+ box-shadow: 0 0 0 0rem var(--cnvs-sys-color-border-contrast-default),0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
203
210
  }
204
211
 
205
212
  .cnvs-checkbox-input.variant-inverse:checked:focus-visible~div:first-of-type, .cnvs-checkbox-input.variant-inverse:checked.focus~div:first-of-type, .cnvs-checkbox-input.variant-inverse:indeterminate:focus-visible~div:first-of-type, .cnvs-checkbox-input.variant-inverse:indeterminate.focus~div:first-of-type {
206
- box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-border-inverse);
207
- border-color: var(--cnvs-sys-color-border-inverse);
213
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default),0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
214
+ border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
208
215
  }
209
216
 
210
217
 
@@ -220,7 +227,7 @@
220
227
 
221
228
  .cnvs-checkbox-input.error:where(:checked, :indeterminate)~div:first-of-type {
222
229
  border-color: transparent;
223
- box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-inverse),0 0 0 0.25rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.3125rem var(--cnvs-checkbox-background-error-ring-color-outer);
230
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-checkbox-background-error-ring-color-inner),0 0 0 0.3125rem var(--cnvs-checkbox-background-error-ring-color-outer);
224
231
  }
225
232
 
226
233
  .cnvs-checkbox-input.error:not(:where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
@@ -229,14 +236,14 @@
229
236
 
230
237
 
231
238
  .cnvs-checkbox-input.variant-inverse.error:not(:where(:focus-visible, .focus))~div:first-of-type {
232
- border: 0.0625rem solid var(--cnvs-sys-color-border-input-inverse);
239
+ border: 0.0625rem solid var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
233
240
  }
234
241
 
235
242
  .cnvs-checkbox-input.variant-inverse.error:not(where(:checked, :indeterminate, :disabled, :focus-visible, .focus)):where(:hover, .hover, :active, .active)~div:first-of-type {
236
- border-color: var(--cnvs-sys-color-border-input-inverse);
243
+ border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
237
244
  }
238
245
 
239
246
  .cnvs-checkbox-input.variant-inverse.error:where(:checked, :indeterminate)~div:first-of-type {
240
- border-color: var(--cnvs-sys-color-border-input-inverse);
247
+ border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
241
248
  }
242
249
 
package/collection.css CHANGED
@@ -5,8 +5,7 @@
5
5
  .cnvs-list-box-container :where([data-part="list"]) {
6
6
  display: flex;
7
7
  flex-direction: column;
8
- margin-block-start: var(--cnvs-sys-space-zero);
9
- margin-block-end: var(--cnvs-sys-space-zero);
8
+ margin-block: 0;
10
9
  }
11
10
 
12
11
 
package/color-picker.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .cnvs-color-picker-color-swatch {
2
2
  box-sizing: border-box;
3
3
  --cnvs-system-icon-color: var(--cnvs-color-picker-color-swatch-icon-color);
4
- width: 1.25rem;
5
- height: 1.25rem;
6
- border-radius: var(--cnvs-sys-shape-half);
4
+ width: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
5
+ height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
6
+ border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
7
7
  background-color: var(--cnvs-color-picker-color-swatch-color);
8
8
  display: flex;
9
9
  align-items: center;
@@ -48,7 +48,7 @@
48
48
  .cnvs-color-picker-hex-input [data-part="color-picker-hex-input-swatch"] {
49
49
  position: absolute;
50
50
  top: 0.625rem;
51
- left: var(--cnvs-sys-space-x2);
51
+ left: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
52
52
  box-shadow: inset 0 0 0 0.0625rem rgba(0,0,0,0.25);
53
53
  pointer-events: none;
54
54
  }
@@ -67,21 +67,15 @@
67
67
  }
68
68
 
69
69
 
70
- .cnvs-color-picker-hex-input.disabled [data-part="color-picker-hex-input"] {
71
- border-color: var(--cnvs-sys-color-border-input-disabled);
72
- background-color: var(--cnvs-sys-color-bg-alt-soft);
73
- color: var(--cnvs-sys-color-text-disabled);
74
- }
75
-
76
70
  .cnvs-color-picker-hex-input.disabled [data-part="color-picker-hex-input-pound-sign"] {
77
- color: var(--cnvs-sys-color-text-disabled);
71
+ opacity: var(--cnvs-sys-opacity-disabled);
78
72
  }
79
73
 
80
74
 
81
75
  .cnvs-color-preview {
82
76
  box-sizing: border-box;
83
- background-color: var(--cnvs-sys-color-bg-default);
84
- border-color: var(--cnvs-sys-color-border-inverse);
77
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
78
+ border-color: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
85
79
  pointer-events: none;
86
80
  }
87
81
 
package/combobox.css CHANGED
@@ -1,3 +1,12 @@
1
+ .cnvs-combobox-card {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ .cnvs-combobox-card :where([data-part="list-box-container"]) {
6
+ border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
7
+ }
8
+
9
+
1
10
  .cnvs-combobox-menu-list {
2
11
  box-sizing: border-box;
3
12
  }
package/common.css CHANGED
@@ -55,5 +55,35 @@
55
55
  --cnvs-brand-primary-lighter: var(--cnvs-base-palette-blue-50);
56
56
  --cnvs-brand-primary-lightest: var(--cnvs-base-palette-blue-25);
57
57
  --cnvs-brand-gradient-primary: linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);
58
+ --cnvs-sys-color-brand-focus-primary: var(--cnvs-brand-common-focus-outline);
59
+ --cnvs-sys-color-brand-border-primary: var(--cnvs-brand-common-focus-outline);
60
+ --cnvs-sys-color-brand-accent-primary: var(--cnvs-brand-primary-base);
61
+ --cnvs-sys-color-brand-accent-action: var(--cnvs-brand-primary-base);
62
+ --cnvs-sys-color-brand-accent-critical: var(--cnvs-brand-error-base);
63
+ --cnvs-sys-color-brand-accent-caution: var(--cnvs-brand-alert-base);
64
+ --cnvs-sys-color-brand-accent-positive: var(--cnvs-brand-success-base);
65
+ --cnvs-sys-color-brand-fg-primary-default: var(--cnvs-brand-primary-base);
66
+ --cnvs-sys-color-brand-fg-primary-strong: var(--cnvs-brand-primary-dark);
67
+ --cnvs-sys-color-brand-fg-critical-default: var(--cnvs-brand-error-base);
68
+ --cnvs-sys-color-brand-fg-critical-strong: var(--cnvs-brand-error-dark);
69
+ --cnvs-sys-color-brand-fg-caution-default: var(--cnvs-brand-alert-darkest);
70
+ --cnvs-sys-color-brand-fg-caution-strong: var(--cnvs-brand-alert-darkest);
71
+ --cnvs-sys-color-brand-fg-positive-default: var(--cnvs-brand-success-base);
72
+ --cnvs-sys-color-brand-fg-positive-strong: var(--cnvs-brand-success-dark);
73
+ --cnvs-sys-color-brand-fg-selected: var(--cnvs-brand-primary-dark);
74
+ --cnvs-sys-color-brand-focus-critical: var(--cnvs-brand-error-dark);
75
+ --cnvs-sys-color-brand-border-critical: var(--cnvs-brand-error-dark);
76
+ --cnvs-sys-color-brand-focus-caution-inner: var(--cnvs-brand-common-alert-inner);
77
+ --cnvs-sys-color-brand-focus-caution-outer: var(--cnvs-brand-alert-dark);
78
+ --cnvs-sys-color-brand-border-caution: var(--cnvs-brand-alert-dark);
79
+ --cnvs-sys-color-brand-surface-primary-default: var(--cnvs-brand-primary-lightest);
80
+ --cnvs-sys-color-brand-surface-primary-strong: var(--cnvs-brand-primary-lighter);
81
+ --cnvs-sys-color-brand-surface-critical-default: var(--cnvs-brand-error-lightest);
82
+ --cnvs-sys-color-brand-surface-critical-strong: var(--cnvs-brand-error-lighter);
83
+ --cnvs-sys-color-brand-surface-caution-default: var(--cnvs-brand-alert-lightest);
84
+ --cnvs-sys-color-brand-surface-caution-strong: var(--cnvs-brand-alert-lighter);
85
+ --cnvs-sys-color-brand-surface-positive-default: var(--cnvs-brand-success-lightest);
86
+ --cnvs-sys-color-brand-surface-positive-strong: var(--cnvs-brand-success-lighter);
87
+ --cnvs-sys-color-brand-surface-selected: var(--cnvs-brand-primary-lighter);
58
88
  }
59
89
 
package/expandable.css CHANGED
@@ -1,38 +1,21 @@
1
- .cnvs-expandable-content {
1
+ .cnvs-expandable-avatar {
2
2
  box-sizing: border-box;
3
- background: var(--cnvs-sys-color-bg-transparent-default);
4
- padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2);
3
+ flex-shrink: 0;
5
4
  }
6
5
 
7
6
 
8
- .cnvs-expandable-target {
7
+ .cnvs-expandable-content {
9
8
  box-sizing: border-box;
10
- background: var(--cnvs-sys-color-bg-transparent-default);
11
- border-color: var(--cnvs-sys-color-bg-transparent-default);
12
- border-radius: var(--cnvs-sys-shape-x1);
13
- border-width: 0;
14
- display: flex;
15
- align-items: center;
16
- flex-direction: row;
17
- gap: var(--cnvs-sys-space-x2);
18
- justify-content: start;
19
- padding: var(--cnvs-sys-space-x2);
20
- cursor: pointer;
21
- width: 100%;
22
- }
23
-
24
- .cnvs-expandable-target:hover, .cnvs-expandable-target.hover {
25
- background-color: var(--cnvs-sys-color-bg-alt-soft);
26
- }
27
-
28
- .cnvs-expandable-target:focus-visible, .cnvs-expandable-target.focus {
29
- outline: var(--cnvs-brand-common-focus-outline) solid 0.125rem;
9
+ background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
10
+ padding: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
30
11
  }
31
12
 
32
13
 
33
14
  .cnvs-expandable-icon {
34
15
  box-sizing: border-box;
35
- padding: var(--cnvs-sys-space-x1);
16
+ padding: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
17
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
18
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));
36
19
  }
37
20
 
38
21
 
@@ -44,18 +27,18 @@
44
27
  .cnvs-expandable-icon.position-end.is-expanded {
45
28
  margin-inline-start: auto;
46
29
  transform: rotate(180deg);
47
- padding-inline-end: var(--cnvs-sys-space-x3);
30
+ padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
48
31
  }
49
32
 
50
33
 
51
34
  .cnvs-expandable-icon.position-end.is-expanded {
52
35
  margin-inline-start: auto;
53
- padding-inline-start: var(--cnvs-sys-space-x3);
36
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
54
37
  }
55
38
 
56
39
 
57
40
  .cnvs-expandable-icon.position-start.is-expanded {
58
- margin-inline-end: var(--cnvs-sys-space-x2);
41
+ margin-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
59
42
  transform: rotate(90deg);
60
43
  }
61
44
 
@@ -65,26 +48,45 @@
65
48
 
66
49
 
67
50
  .cnvs-expandable-icon.position-start.is-expanded {
68
- margin-inline-end: var(--cnvs-sys-space-x2);
51
+ margin-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
69
52
  transform: rotate(180deg);
70
53
  }
71
54
 
72
55
 
73
- .cnvs-expandable-title {
56
+ .cnvs-expandable-target {
74
57
  box-sizing: border-box;
75
- font-family: var(--cnvs-sys-font-family-default);
76
- font-weight: var(--cnvs-sys-font-weight-bold);
77
- line-height: var(--cnvs-sys-line-height-body-medium);
78
- font-size: var(--cnvs-sys-font-size-body-medium);
79
- color: var(--cnvs-sys-color-text-strong);
80
- padding: 0.125rem var(--cnvs-sys-space-zero);
81
- text-align: left;
58
+ background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
59
+ border-color: var(--cnvs-sys-color-border-transparent);
60
+ border-radius: var(--cnvs-sys-shape-xxl, var(--cnvs-sys-shape-x6, 1.5rem));
61
+ border-width: 0;
62
+ display: flex;
63
+ align-items: center;
64
+ flex-direction: row;
65
+ gap: var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));
66
+ justify-content: start;
67
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
68
+ cursor: pointer;
69
+ width: 100%;
82
70
  }
83
71
 
72
+ .cnvs-expandable-target:hover, .cnvs-expandable-target.hover {
73
+ background-color: var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
74
+ }
84
75
 
85
- .cnvs-expandable-avatar {
76
+ .cnvs-expandable-target:focus-visible, .cnvs-expandable-target.focus {
77
+ outline: var(var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1)), var(--cnvs-brand-common-focus-outline)) solid 0.125rem;
78
+ }
79
+
80
+
81
+ .cnvs-expandable-title {
86
82
  box-sizing: border-box;
87
- flex-shrink: 0;
83
+ font-family: var(--cnvs-sys-font-family-default);
84
+ line-height: var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));
85
+ font-size: var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));
86
+ font-weight: var(--cnvs-sys-font-weight-bold);
87
+ color: var(--cnvs-sys-color-fg-strong);
88
+ padding: 0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
89
+ text-align: left;
88
90
  }
89
91
 
90
92
 
@@ -92,6 +94,6 @@
92
94
  box-sizing: border-box;
93
95
  display: flex;
94
96
  flex-direction: column;
95
- padding: var(--cnvs-sys-space-x2);
97
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
96
98
  }
97
99