@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/button.css CHANGED
@@ -1,15 +1,41 @@
1
+ .cnvs-button-icon {
2
+ box-sizing: border-box;
3
+ display: inline-block;
4
+ }
5
+
6
+
7
+ .cnvs-button-icon.size-extra-small {
8
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-xs, var(--cnvs-sys-space-x4, 1rem));
9
+ }
10
+
11
+
12
+ .cnvs-button-icon.size-small {
13
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
14
+ }
15
+
16
+
17
+ .cnvs-button-icon.size-medium {
18
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));
19
+ }
20
+
21
+
22
+ .cnvs-button-icon.size-large {
23
+ --cnvs-svg-size: var(--cnvs-component-system-icon-size-lg, var(--cnvs-sys-space-x6, 1.5rem));
24
+ }
25
+
26
+
1
27
  .cnvs-button {
2
28
  box-sizing: border-box;
3
- font-family: "Roboto","Helvetica Neue","Helvetica",Arial,sans-serif;
4
- font-size: 0.875rem;
5
- line-height: normal;
6
- letter-spacing: 0.015rem;
29
+ font-family: var(--cnvs-sys-font-family-default);
30
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
31
+ line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
32
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
7
33
  font-weight: var(--cnvs-sys-font-weight-bold);
8
34
  background-color: var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));
9
35
  color: var(--cnvs-button-color-prop-default-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
10
36
  border-width: 0.0625rem;
11
37
  border-style: solid;
12
- gap: var(--cnvs-sys-space-x2);
38
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
13
39
  border-color: var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));
14
40
  cursor: pointer;
15
41
  display: inline-flex;
@@ -20,7 +46,7 @@
20
46
  white-space: nowrap;
21
47
  -webkit-font-smoothing: antialiased;
22
48
  -moz-osx-font-smoothing: grayscale;
23
- border-radius: var(--cnvs-button-color-prop-default-border-radius, var(--cnvs-button-border-radius, var(--cnvs-sys-shape-round)));
49
+ border-radius: var(--cnvs-button-color-prop-default-border-radius, var(--cnvs-button-border-radius, var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem))));
24
50
  position: relative;
25
51
  vertical-align: middle;
26
52
  overflow: hidden;
@@ -41,11 +67,11 @@
41
67
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
42
68
  outline: 0.125rem solid transparent;
43
69
  outline-offset: 0.125rem;
44
- box-shadow: 0 0 0 2px var(--cnvs-button-color-prop-focus-box-shadow-inner, var(--cnvs-button-box-shadow-inner, var(--cnvs-sys-color-border-inverse))),0 0 0 4px var(--cnvs-button-color-prop-focus-box-shadow-outer, var(--cnvs-button-box-shadow-outer, var(--cnvs-brand-common-focus-outline)));
70
+ box-shadow: 0 0 0 0.125rem var(--cnvs-button-color-prop-focus-box-shadow-inner, var(--cnvs-button-box-shadow-inner, var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))))),0 0 0 0.25rem var(--cnvs-button-color-prop-focus-box-shadow-outer, var(--cnvs-button-box-shadow-outer, var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)))));
45
71
  }
46
72
 
47
73
  .cnvs-button:hover, .cnvs-button.hover {
48
- background-color: var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-bg-contrast-strong)));
74
+ background-color: var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-surface-contrast-strong, var(--cnvs-sys-color-bg-contrast-strong, oklch(0.0672 0 0 / 0.89)))));
49
75
  border-color: var(--cnvs-button-color-prop-hover-border, var(--cnvs-button-border, transparent));
50
76
  color: var(--cnvs-button-color-prop-hover-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-stronger)));
51
77
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));
@@ -66,7 +92,7 @@
66
92
  background-color: var(--cnvs-button-color-prop-disabled-background, var(--cnvs-button-background, transparent));
67
93
  border-color: var(--cnvs-button-color-prop-disabled-border, var(--cnvs-button-border, transparent));
68
94
  color: var(--cnvs-button-color-prop-disabled-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
69
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
95
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, currentColor);
70
96
  }
71
97
 
72
98
  @media (prefers-contrast: more) {
@@ -89,52 +115,44 @@
89
115
 
90
116
 
91
117
  .cnvs-button.size-large {
92
- font-family: var(--cnvs-sys-font-family-default);
93
- font-weight: var(--cnvs-sys-font-weight-bold);
94
- line-height: var(--cnvs-sys-line-height-body-small);
95
- font-size: var(--cnvs-sys-font-size-body-small);
96
- letter-spacing: var(--cnvs-base-letter-spacing-200);
97
- height: 3rem;
98
- padding-inline: var(--cnvs-sys-space-x8);
99
- min-width: 7rem;
118
+ font-size: var(--cnvs-sys-font-size-body-sm, var(--cnvs-sys-font-size-body-small, 1rem));
119
+ line-height: var(--cnvs-sys-line-height-body-sm, var(--cnvs-sys-line-height-body-small, 1.5rem));
120
+ letter-spacing: var(--cnvs-sys-letter-spacing-body-sm, var(--cnvs-sys-type-letter-spacing-body-small));
121
+ height: var(--cnvs-sys-size-lg, 3rem);
122
+ padding-inline: var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem));
123
+ min-width: var(--cnvs-base-size-1400, 7rem);
100
124
  }
101
125
 
102
126
 
103
127
  .cnvs-button.size-medium {
104
- font-family: var(--cnvs-sys-font-family-default);
105
- font-weight: var(--cnvs-sys-font-weight-bold);
106
- line-height: var(--cnvs-sys-line-height-subtext-large);
107
- font-size: var(--cnvs-sys-font-size-subtext-large);
108
- letter-spacing: var(--cnvs-base-letter-spacing-150);
109
- min-width: 6rem;
110
- padding-inline: var(--cnvs-sys-space-x6);
111
- height: var(--cnvs-sys-space-x10);
128
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
129
+ line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
130
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
131
+ min-width: var(--cnvs-base-size-1200, 6rem);
132
+ padding-inline: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
133
+ height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
112
134
  }
113
135
 
114
136
 
115
137
  .cnvs-button.size-small {
116
- font-family: var(--cnvs-sys-font-family-default);
117
- font-weight: var(--cnvs-sys-font-weight-bold);
118
- line-height: var(--cnvs-sys-line-height-subtext-large);
119
- font-size: var(--cnvs-sys-font-size-subtext-large);
120
- letter-spacing: var(--cnvs-base-letter-spacing-150);
121
- height: var(--cnvs-sys-space-x8);
122
- min-width: var(--cnvs-sys-space-x20);
123
- padding-inline: var(--cnvs-sys-space-x4);
124
- gap: var(--cnvs-sys-space-x1);
138
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
139
+ line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
140
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-lg, var(--cnvs-sys-type-letter-spacing-subtext-large));
141
+ height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
142
+ min-width: var(--cnvs-base-size-1000, 5rem);
143
+ padding-inline: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
144
+ gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
125
145
  }
126
146
 
127
147
 
128
148
  .cnvs-button.size-extra-small {
129
- font-family: var(--cnvs-sys-font-family-default);
130
- font-weight: var(--cnvs-sys-font-weight-bold);
131
- line-height: var(--cnvs-sys-line-height-subtext-medium);
132
- font-size: var(--cnvs-sys-font-size-subtext-medium);
133
- letter-spacing: var(--cnvs-base-letter-spacing-100);
134
- height: var(--cnvs-sys-space-x6);
149
+ font-size: var(--cnvs-sys-font-size-subtext-md, var(--cnvs-sys-font-size-subtext-medium, 0.75rem));
150
+ line-height: var(--cnvs-sys-line-height-subtext-md, var(--cnvs-sys-line-height-subtext-medium, 1rem));
151
+ letter-spacing: var(--cnvs-sys-letter-spacing-subtext-md, var(--cnvs-sys-type-letter-spacing-subtext-medium));
152
+ height: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
135
153
  min-width: auto;
136
- padding-inline: var(--cnvs-sys-space-x3);
137
- gap: var(--cnvs-sys-space-x1);
154
+ padding-inline: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
155
+ gap: var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));
138
156
  }
139
157
 
140
158
 
@@ -145,123 +163,125 @@
145
163
 
146
164
 
147
165
  .cnvs-button.icon-position-only {
148
- padding: var(--cnvs-sys-space-zero);
166
+ padding: 0;
149
167
  }
150
168
 
151
169
 
152
170
 
153
171
 
154
172
  .cnvs-button.size-large.icon-position-only {
155
- min-width: calc(var(--cnvs-sys-space-x4) * 3);
173
+ min-width: var(--cnvs-sys-size-lg, 3rem);
156
174
  }
157
175
 
158
176
 
159
177
  .cnvs-button.size-large.icon-position-start {
160
- padding-inline-start: var(--cnvs-sys-space-x6);
161
- padding-inline-end: var(--cnvs-sys-space-x8);
178
+ padding-inline-start: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
179
+ padding-inline-end: var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem));
162
180
  }
163
181
 
164
182
 
165
183
  .cnvs-button.size-large.icon-position-end {
166
- padding-inline-start: var(--cnvs-sys-space-x8);
167
- padding-inline-end: var(--cnvs-sys-space-x6);
184
+ padding-inline-start: var(--cnvs-sys-padding-xxl, var(--cnvs-sys-space-x8, 2rem));
185
+ padding-inline-end: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
168
186
  }
169
187
 
170
188
 
171
189
  .cnvs-button.size-medium.icon-position-only {
172
- min-width: var(--cnvs-sys-space-x10);
190
+ min-width: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
173
191
  }
174
192
 
175
193
 
176
194
  .cnvs-button.size-medium.icon-position-start {
177
- padding-inline-start: calc(var(--cnvs-sys-space-x1) * 5);
178
- padding-inline-end: var(--cnvs-sys-space-x6);
195
+ padding-inline-start: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
196
+ padding-inline-end: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
179
197
  }
180
198
 
181
199
 
182
200
  .cnvs-button.size-medium.icon-position-end {
183
- padding-inline-start: var(--cnvs-sys-space-x6);
184
- padding-inline-end: calc(var(--cnvs-sys-space-x1) * 5);
201
+ padding-inline-start: var(--cnvs-sys-padding-xl, var(--cnvs-sys-space-x6, 1.5rem));
202
+ padding-inline-end: var(--cnvs-sys-padding-lg, var(--cnvs-sys-space-x5, 1.25rem));
185
203
  }
186
204
 
187
205
 
188
206
  .cnvs-button.size-small.icon-position-only {
189
- min-width: var(--cnvs-sys-space-x8);
207
+ min-width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
190
208
  }
191
209
 
192
210
 
193
211
  .cnvs-button.size-small.icon-position-start {
194
- padding-inline-start: var(--cnvs-sys-space-x3);
195
- padding-inline-end: var(--cnvs-sys-space-x4);
212
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
213
+ padding-inline-end: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
196
214
  }
197
215
 
198
216
 
199
217
  .cnvs-button.size-small.icon-position-end {
200
- padding-inline-start: var(--cnvs-sys-space-x4);
201
- padding-inline-end: var(--cnvs-sys-space-x3);
218
+ padding-inline-start: var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
219
+ padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
202
220
  }
203
221
 
204
222
 
205
223
  .cnvs-button.size-extraSmall.icon-position-only {
206
- min-width: var(--cnvs-sys-space-x6);
224
+ min-width: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
207
225
  }
208
226
 
209
227
 
210
228
  .cnvs-button.size-extraSmall.icon-position-start {
211
- padding-inline-start: var(--cnvs-sys-space-x2);
212
- padding-inline-end: var(--cnvs-sys-space-x3);
229
+ padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
230
+ padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
213
231
  }
214
232
 
215
233
 
216
234
  .cnvs-button.size-extraSmall.icon-position-end {
217
- padding-inline-start: var(--cnvs-sys-space-x3);
218
- padding-inline-end: var(--cnvs-sys-space-x2);
235
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
236
+ padding-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
219
237
  }
220
238
 
221
239
 
222
240
  .cnvs-tertiary-button {
223
241
  box-sizing: border-box;
224
- padding-inline: var(--cnvs-sys-space-x2);
242
+ padding-inline: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
225
243
  min-width: auto;
226
244
  border-width: 0.125rem;
227
- --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
228
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
229
- --cnvs-button-label: var(--cnvs-brand-primary-base);
230
- --cnvs-system-icon-color: currentColor;
245
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
246
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
247
+ --cnvs-button-label: var(--cnvs-sys-color-fg-default);
248
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
231
249
  }
232
250
 
233
251
  .cnvs-tertiary-button:focus-visible, .cnvs-tertiary-button.focus {
234
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
235
- --cnvs-button-label: var(--cnvs-brand-primary-base);
236
- --cnvs-system-icon-color: currentColor;
237
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
252
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
253
+ --cnvs-button-label: var(--cnvs-sys-color-fg-contrast-default);
254
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
255
+ --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
256
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
238
257
  }
239
258
 
240
259
  .cnvs-tertiary-button:hover, .cnvs-tertiary-button.hover {
241
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
242
- --cnvs-button-label: var(--cnvs-brand-primary-dark);
243
- --cnvs-system-icon-color: currentColor;
260
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
261
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
262
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
244
263
  text-decoration: underline;
245
264
  }
246
265
 
247
266
  .cnvs-tertiary-button:active, .cnvs-tertiary-button.active {
248
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
249
- --cnvs-button-label: var(--cnvs-brand-primary-darkest);
250
- --cnvs-system-icon-color: currentColor;
267
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
268
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
269
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
251
270
  text-decoration: underline;
252
271
  }
253
272
 
254
273
  .cnvs-tertiary-button:disabled, .cnvs-tertiary-button.disabled {
255
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
256
- --cnvs-button-label: var(--cnvs-brand-primary-base);
274
+ text-decoration: none;
257
275
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
258
- --cnvs-system-icon-color: currentColor;
276
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
277
+ --cnvs-button-label: var(--cnvs-sys-color-fg-default);
278
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
259
279
  }
260
280
 
261
281
 
262
282
  .cnvs-tertiary-button.icon-position-only {
263
283
  padding: 0;
264
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));
284
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-default));
265
285
  }
266
286
 
267
287
  .cnvs-tertiary-button.icon-position-only:focus-visible, .cnvs-tertiary-button.icon-position-only.focus {
@@ -277,193 +297,199 @@
277
297
  }
278
298
 
279
299
  .cnvs-tertiary-button.icon-position-only:disabled, .cnvs-tertiary-button.icon-position-only.disabled {
280
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
300
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
301
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-default));
281
302
  }
282
303
 
283
304
 
284
305
 
285
306
 
286
307
  .cnvs-tertiary-button.variant-inverse {
287
- --cnvs-button-background: transparent;
308
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
288
309
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
289
- --cnvs-system-icon-color: currentColor;
310
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
290
311
  }
291
312
 
292
- .cnvs-tertiary-button.variant-inverse:focus-visible, .cnvs-tertiary-button.variant-inverse.focus {
293
- --cnvs-button-background: var(--cnvs-sys-color-bg-translucent);
313
+ .cnvs-tertiary-button.variant-inverse:hover, .cnvs-tertiary-button.variant-inverse.hover {
314
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
294
315
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
295
- --cnvs-system-icon-color: currentColor;
296
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 2px var(--cnvs-sys-color-border-inverse);
316
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
297
317
  }
298
318
 
299
- .cnvs-tertiary-button.variant-inverse:hover, .cnvs-tertiary-button.variant-inverse.hover {
300
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-strong);
301
- --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
302
- --cnvs-system-icon-color: currentColor;
319
+ .cnvs-tertiary-button.variant-inverse:focus-visible, .cnvs-tertiary-button.variant-inverse.focus {
320
+ --cnvs-button-background: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
321
+ --cnvs-button-label: var(--cnvs-sys-color-fg-contrast-default);
322
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
323
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
303
324
  }
304
325
 
305
326
  .cnvs-tertiary-button.variant-inverse:active, .cnvs-tertiary-button.variant-inverse.active {
306
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-stronger);
327
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
307
328
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
308
- --cnvs-system-icon-color: currentColor;
329
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
309
330
  }
310
331
 
311
332
  .cnvs-tertiary-button.variant-inverse:disabled, .cnvs-tertiary-button.variant-inverse.disabled {
312
- --cnvs-button-background: transparent;
333
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
334
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
313
335
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
314
- --cnvs-system-icon-color: currentColor;
336
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
315
337
  }
316
338
 
317
339
 
318
340
  .cnvs-tertiary-button.size-large.icon-position-only {
319
- min-width: calc(var(--cnvs-sys-space-x4) * 3);
341
+ min-width: var(--cnvs-sys-size-lg, 3rem);
320
342
  }
321
343
 
322
344
 
323
345
  .cnvs-tertiary-button.size-large.icon-position-start {
324
- padding-inline-start: var(--cnvs-sys-space-x2);
325
- padding-inline-end: var(--cnvs-sys-space-x3);
346
+ padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
347
+ padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
326
348
  }
327
349
 
328
350
 
329
351
  .cnvs-tertiary-button.size-large.icon-position-end {
330
- padding-inline-start: var(--cnvs-sys-space-x3);
331
- padding-inline-end: var(--cnvs-sys-space-x2);
352
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
353
+ padding-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
332
354
  }
333
355
 
334
356
 
335
357
  .cnvs-tertiary-button.size-medium.icon-position-only {
336
- min-width: var(--cnvs-sys-space-x10);
358
+ min-width: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
337
359
  }
338
360
 
339
361
 
340
362
  .cnvs-tertiary-button.size-medium.icon-position-start {
341
- padding-inline-start: var(--cnvs-sys-space-x2);
342
- padding-inline-end: var(--cnvs-sys-space-x3);
363
+ padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
364
+ padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
343
365
  }
344
366
 
345
367
 
346
368
  .cnvs-tertiary-button.size-medium.icon-position-end {
347
- padding-inline-start: var(--cnvs-sys-space-x3);
348
- padding-inline-end: var(--cnvs-sys-space-x2);
369
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
370
+ padding-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
349
371
  }
350
372
 
351
373
 
352
374
  .cnvs-tertiary-button.size-small.icon-position-only {
353
- min-width: var(--cnvs-sys-space-x8);
375
+ min-width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
354
376
  }
355
377
 
356
378
 
357
379
  .cnvs-tertiary-button.size-small.icon-position-start {
358
- padding-inline-start: var(--cnvs-sys-space-x2);
359
- padding-inline-end: var(--cnvs-sys-space-x3);
380
+ padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
381
+ padding-inline-end: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
360
382
  }
361
383
 
362
384
 
363
385
  .cnvs-tertiary-button.size-small.icon-position-end {
364
- padding-inline-start: var(--cnvs-sys-space-x3);
365
- padding-inline-end: var(--cnvs-sys-space-x2);
386
+ padding-inline-start: var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));
387
+ padding-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
366
388
  }
367
389
 
368
390
 
369
391
  .cnvs-tertiary-button.size-extraSmall.icon-position-only {
370
- min-width: var(--cnvs-sys-space-x6);
392
+ min-width: var(--cnvs-sys-size-xs, var(--cnvs-sys-space-x6, 1.5rem));
371
393
  }
372
394
 
373
395
 
374
396
  .cnvs-tertiary-button.size-extraSmall.icon-position-start {
375
- padding-inline-start: var(--cnvs-sys-space-x1);
376
- padding-inline-end: var(--cnvs-sys-space-x2);
397
+ padding-inline-start: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
398
+ padding-inline-end: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
377
399
  }
378
400
 
379
401
 
380
402
  .cnvs-tertiary-button.size-extraSmall.icon-position-end {
381
- padding-inline-start: var(--cnvs-sys-space-x2);
382
- padding-inline-end: var(--cnvs-sys-space-x1);
403
+ padding-inline-start: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
404
+ padding-inline-end: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
383
405
  }
384
406
 
385
407
 
386
408
  .cnvs-toolbar-icon-button {
387
409
  box-sizing: border-box;
388
- min-width: var(--cnvs-sys-space-x8);
389
- padding: var(--cnvs-sys-space-zero);
390
- height: var(--cnvs-sys-space-x8);
391
- --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
392
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
410
+ min-width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
411
+ padding: 0;
412
+ height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
413
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
414
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
415
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
393
416
  }
394
417
 
395
418
  .cnvs-toolbar-icon-button:focus-visible, .cnvs-toolbar-icon-button.focus {
396
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
397
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline);
419
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
420
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
398
421
  }
399
422
 
400
423
  .cnvs-toolbar-icon-button:hover, .cnvs-toolbar-icon-button.hover {
401
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
402
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
424
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
425
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
403
426
  }
404
427
 
405
428
  .cnvs-toolbar-icon-button:active, .cnvs-toolbar-icon-button.active {
406
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
429
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
430
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
407
431
  }
408
432
 
409
433
  .cnvs-toolbar-icon-button:disabled, .cnvs-toolbar-icon-button.disabled {
410
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
411
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
434
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
435
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
436
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
412
437
  }
413
438
 
414
439
  .cnvs-toolbar-icon-button[aria-pressed='true'] {
415
- --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
416
- --cnvs-button-background: var(--cnvs-brand-primary-lightest);
440
+ --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)));
441
+ --cnvs-button-background: var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08));
417
442
  }
418
443
 
419
- .cnvs-toolbar-icon-button[aria-pressed='true']:hover, .cnvs-toolbar-icon-button[aria-pressed='true'].hover {
420
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
421
- --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
444
+ .cnvs-toolbar-icon-button[aria-pressed='true']:focus-visible, .cnvs-toolbar-icon-button[aria-pressed='true'].focus {
445
+ --cnvs-system-icon-color: var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
422
446
  }
423
447
 
424
- .cnvs-toolbar-icon-button[aria-pressed='true']:active, .cnvs-toolbar-icon-button[aria-pressed='true'].active {
425
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
426
- --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
448
+ .cnvs-toolbar-icon-button[aria-pressed='true']:hover, .cnvs-toolbar-icon-button[aria-pressed='true'].hover {
449
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08)) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
450
+ --cnvs-system-icon-color: var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
427
451
  }
428
452
 
429
- .cnvs-toolbar-icon-button[aria-pressed='true']:disabled, .cnvs-toolbar-icon-button[aria-pressed='true'].disabled {
430
- --cnvs-button-background: var(--cnvs-brand-primary-lightest);
431
- --cnvs-system-icon-color: var(--cnvs-brand-primary-light);
453
+ .cnvs-toolbar-icon-button[aria-pressed='true']:active, .cnvs-toolbar-icon-button[aria-pressed='true'].active {
454
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-brand-surface-primary-default, oklch(0.6499 0.1912 253.52 / 0.08)) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
455
+ --cnvs-system-icon-color: var(--cnvs-sys-color-brand-fg-primary-strong, var(--cnvs-brand-primary-dark, oklch(0.4658 0.1562 255.5 / 1)));
432
456
  }
433
457
 
434
458
 
435
459
  .cnvs-toolbar-dropdown-button {
436
460
  box-sizing: border-box;
437
- padding: var(--cnvs-sys-space-zero);
438
- min-width: var(--cnvs-sys-space-x8);
439
- gap: var(--cnvs-sys-space-zero);
440
- --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
441
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
461
+ padding: 0;
462
+ min-width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
463
+ gap: 0;
464
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
465
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-default));
466
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
442
467
  }
443
468
 
444
469
  .cnvs-toolbar-dropdown-button:focus-visible, .cnvs-toolbar-dropdown-button.focus {
445
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
446
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
447
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline);
470
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
471
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
472
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 2px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
448
473
  }
449
474
 
450
475
  .cnvs-toolbar-dropdown-button:hover, .cnvs-toolbar-dropdown-button.hover {
451
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
452
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
476
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
477
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-default));
453
478
  }
454
479
 
455
480
  .cnvs-toolbar-dropdown-button:active, .cnvs-toolbar-dropdown-button.active {
456
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
457
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
481
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
482
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
458
483
  }
459
484
 
460
485
  .cnvs-toolbar-dropdown-button:disabled, .cnvs-toolbar-dropdown-button.disabled {
461
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
462
- --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
486
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
487
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
488
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-default));
463
489
  }
464
490
 
465
491
  .cnvs-toolbar-dropdown-button [data-part="toolbar-dropdown-btn-custom-icon"] {
466
- margin-inline-start: var(--cnvs-sys-space-x1);
492
+ margin-inline-start: var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));
467
493
  margin-inline-end: calc(0.125rem * -1);
468
494
  }
469
495
 
@@ -489,9 +515,9 @@
489
515
  box-sizing: border-box;
490
516
  font-family: var(--cnvs-sys-font-family-default);
491
517
  text-decoration: underline;
492
- color: var(--cnvs-sys-color-text-primary-default);
518
+ color: var(--cnvs-sys-color-fg-info-default, var(--cnvs-sys-color-fg-primary-default, oklch(0.5198 0.1782 256.11 / 1)));
493
519
  cursor: pointer;
494
- border-radius: var(--cnvs-sys-shape-half);
520
+ border-radius: 0.125rem;
495
521
  padding: 0 0.125rem;
496
522
  margin: 0 -2px;
497
523
  transition: color 0.15s,background-color 0.15s;
@@ -499,37 +525,37 @@
499
525
  }
500
526
 
501
527
  .cnvs-hyperlink:hover, .cnvs-hyperlink.hover {
502
- color: var(--cnvs-sys-color-text-primary-strong);
503
- background: var(--cnvs-sys-color-bg-alt-soft);
528
+ color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
529
+ background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
504
530
  }
505
531
 
506
532
  .cnvs-hyperlink:focus, .cnvs-hyperlink.focus, .cnvs-hyperlink:focus-visible {
507
- box-shadow: 0 0 0 0.125rem var(--cnvs-brand-common-focus-outline);
533
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
508
534
  outline: none;
509
535
  }
510
536
 
511
537
  .cnvs-hyperlink:active, .cnvs-hyperlink.active {
512
- color: var(--cnvs-sys-color-text-primary-stronger);
513
- background: var(--cnvs-sys-color-bg-alt-default);
538
+ color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
539
+ background: var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));
514
540
  }
515
541
 
516
542
 
517
543
  .cnvs-hyperlink.variant-inverse {
518
- color: var(--cnvs-sys-color-text-inverse);
544
+ color: var(--cnvs-sys-color-fg-inverse);
519
545
  }
520
546
 
521
547
  .cnvs-hyperlink.variant-inverse:hover, .cnvs-hyperlink.variant-inverse.hover {
522
- color: var(--cnvs-sys-color-text-inverse);
548
+ color: var(--cnvs-sys-color-fg-inverse);
523
549
  background: rgba(255, 255, 255, 0.1);
524
550
  }
525
551
 
526
552
  .cnvs-hyperlink.variant-inverse:focus, .cnvs-hyperlink.variant-inverse.focus, .cnvs-hyperlink.variant-inverse:focus-visible {
527
- box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-text-inverse);
553
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-fg-inverse);
528
554
  }
529
555
 
530
556
  .cnvs-hyperlink.variant-inverse:active, .cnvs-hyperlink.variant-inverse.active {
531
- color: var(--cnvs-sys-color-text-primary-stronger);
532
- background: var(--cnvs-sys-color-bg-alt-soft);
557
+ color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
558
+ background: var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));
533
559
  }
534
560
 
535
561
 
@@ -540,21 +566,21 @@
540
566
 
541
567
  .cnvs-hyperlink.variant-standalone-inverse {
542
568
  text-decoration: none;
543
- color: var(--cnvs-sys-color-text-inverse);
569
+ color: var(--cnvs-sys-color-fg-inverse);
544
570
  }
545
571
 
546
572
  .cnvs-hyperlink.variant-standalone-inverse:hover, .cnvs-hyperlink.variant-standalone-inverse.hover {
547
- color: var(--cnvs-sys-color-text-inverse);
573
+ color: var(--cnvs-sys-color-fg-inverse);
548
574
  background: rgba(255, 255, 255, 0.1);
549
575
  }
550
576
 
551
577
  .cnvs-hyperlink.variant-standalone-inverse:focus, .cnvs-hyperlink.variant-standalone-inverse.focus, .cnvs-hyperlink.variant-standalone-inverse:focus-visible {
552
- box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-text-inverse);
578
+ 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)));
553
579
  }
554
580
 
555
581
  .cnvs-hyperlink.variant-standalone-inverse:active, .cnvs-hyperlink.variant-standalone-inverse.active {
556
- color: var(--cnvs-sys-color-text-primary-stronger);
557
- background: var(--cnvs-sys-color-bg-alt-soft);
582
+ color: var(--cnvs-sys-color-fg-info-strong, var(--cnvs-sys-color-fg-primary-strong, oklch(0.4658 0.1562 255.5 / 1)));
583
+ background: var(--cnvs-sys-color-surface-navigation, oklch(0.9692 0.0035 248.23 / 1));
558
584
  }
559
585
 
560
586
 
@@ -567,13 +593,13 @@
567
593
  --cnvs-system-icon-color: currentColor;
568
594
  --cnvs-svg-size: 1em;
569
595
  width: calc(1em - 0.0625rem);
570
- min-width: calc(var(--cnvs-sys-space-x4) - 0.0625rem);
571
- margin-inline-start: calc(var(--cnvs-sys-space-x1) - 0.125rem);
596
+ min-width: calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) - 0.0625rem);
597
+ margin-inline-start: calc(var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem)) - 0.125rem);
572
598
  }
573
599
 
574
600
  .cnvs-external-hyperlink [data-part="external-hyperlink-icon"]>svg {
575
- min-width: var(--cnvs-sys-space-x4);
576
- min-height: var(--cnvs-sys-space-x4);
601
+ min-width: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
602
+ min-height: var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem));
577
603
  }
578
604
 
579
605
  .cnvs-external-hyperlink [data-part="external-hyperlink-icon"] :dir(rtl) {
@@ -583,183 +609,184 @@
583
609
 
584
610
  .cnvs-primary-button {
585
611
  box-sizing: border-box;
586
- --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
587
- --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
588
- --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
589
- --cnvs-system-icon-color: currentColor;
612
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));
613
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
614
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
615
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
590
616
  }
591
617
 
592
618
  .cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
593
- --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
594
- --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
595
- --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
596
- --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
597
- --cnvs-system-icon-color: currentColor;
619
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));
620
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
621
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
622
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
623
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
598
624
  }
599
625
 
600
626
  .cnvs-primary-button:hover, .cnvs-primary-button.hover {
601
- --cnvs-button-background: var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));
602
- --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
603
- --cnvs-system-icon-color: currentColor;
627
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
628
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
629
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
604
630
  }
605
631
 
606
632
  .cnvs-primary-button:active, .cnvs-primary-button.active {
607
- --cnvs-button-background: var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));
608
- --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
609
- --cnvs-system-icon-color: currentColor;
633
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%));
634
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
635
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
610
636
  }
611
637
 
612
638
  .cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
613
- --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
614
- --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
615
639
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
616
- --cnvs-system-icon-color: currentColor;
640
+ --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1))));
641
+ --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-sys-color-fg-inverse));
642
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
617
643
  }
618
644
 
619
645
 
620
646
  .cnvs-primary-button.variant-inverse {
621
- --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
622
- --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
647
+ --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));
648
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
623
649
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
624
- --cnvs-system-icon-color: currentColor;
650
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
651
+ }
652
+
653
+ .cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
654
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
655
+ --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
656
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
625
657
  }
626
658
 
627
659
  .cnvs-primary-button.variant-inverse:focus-visible, .cnvs-primary-button.variant-inverse.focus {
628
- --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
660
+ --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));
629
661
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
630
662
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
631
- --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
632
- --cnvs-system-icon-color: currentColor;
633
- }
634
-
635
- .cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
636
- --cnvs-button-background: var(--cnvs-brand-action-lighter, var(--cnvs-brand-primary-lightest));
637
- --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
638
- --cnvs-system-icon-color: currentColor;
663
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
664
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
639
665
  }
640
666
 
641
667
  .cnvs-primary-button.variant-inverse:active, .cnvs-primary-button.variant-inverse.active {
642
- --cnvs-button-background: var(--cnvs-brand-action-light, var(--cnvs-brand-primary-light));
668
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%));
643
669
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
644
- --cnvs-system-icon-color: currentColor;
670
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
645
671
  }
646
672
 
647
673
  .cnvs-primary-button.variant-inverse:disabled, .cnvs-primary-button.variant-inverse.disabled {
648
- --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
674
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
675
+ --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));
649
676
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
650
- --cnvs-system-icon-color: currentColor;
677
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, currentColor);
651
678
  }
652
679
 
653
680
 
654
681
  .cnvs-secondary-button {
655
682
  box-sizing: border-box;
656
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
657
- --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
683
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
684
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
658
685
  --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
659
- --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
660
- --cnvs-system-icon-color: currentColor;
686
+ --cnvs-button-label: var(--cnvs-sys-color-fg-default);
687
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
661
688
  }
662
689
 
663
690
  .cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
664
- --cnvs-button-background: var(--cnvs-sys-color-bg-default);
665
- --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
666
- --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
667
- --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
668
- --cnvs-system-icon-color: currentColor;
691
+ --cnvs-button-background: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
692
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
693
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
694
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
695
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
669
696
  }
670
697
 
671
698
  .cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
672
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
673
- --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
674
- --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
675
- --cnvs-system-icon-color: currentColor;
699
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
700
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
701
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));
702
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
676
703
  }
677
704
 
678
705
  .cnvs-secondary-button:active, .cnvs-secondary-button.active {
679
- --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
680
- --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
681
- --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
682
- --cnvs-system-icon-color: currentColor;
706
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
707
+ --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
708
+ --cnvs-button-border: var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));
709
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
683
710
  }
684
711
 
685
712
  .cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
686
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
687
- --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
688
713
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
689
- --cnvs-system-icon-color: currentColor;
714
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
715
+ --cnvs-button-label: var(--cnvs-sys-color-fg-default);
716
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
690
717
  }
691
718
 
692
719
 
693
720
  .cnvs-secondary-button.variant-inverse {
694
- --cnvs-button-background: transparent;
695
- --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
721
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
722
+ --cnvs-button-border: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
696
723
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
697
- --cnvs-system-icon-color: currentColor;
724
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
698
725
  }
699
726
 
700
727
  .cnvs-secondary-button.variant-inverse:hover, .cnvs-secondary-button.variant-inverse.hover {
701
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-strong);
702
- --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
728
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-hover, 0.08) * 100%));
729
+ --cnvs-button-border: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
703
730
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
704
- --cnvs-system-icon-color: currentColor;
731
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, currentColor);
705
732
  }
706
733
 
707
734
  .cnvs-secondary-button.variant-inverse:focus-visible, .cnvs-secondary-button.variant-inverse.focus {
708
- --cnvs-button-background: var(--cnvs-sys-color-bg-translucent);
709
- --cnvs-button-border: transparent;
710
- --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
735
+ --cnvs-button-background: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
736
+ --cnvs-button-border: var(--cnvs-sys-color-border-transparent);
737
+ --cnvs-button-label: var(--cnvs-sys-color-fg-contrast-default);
711
738
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
712
- --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
713
- --cnvs-system-icon-color: currentColor;
739
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
740
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, currentColor);
714
741
  }
715
742
 
716
743
  .cnvs-secondary-button.variant-inverse:active, .cnvs-secondary-button.variant-inverse.active {
717
- --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-stronger);
718
- --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
744
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0))) , var(--cnvs-sys-color-surface-overlay-mixin, oklch(0.629 0.0281 255.62 / 1)) calc(var(--cnvs-sys-opacity-surface-pressed, 0.18) * 100%));
745
+ --cnvs-button-border: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
719
746
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
720
- --cnvs-system-icon-color: currentColor;
747
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, currentColor);
721
748
  }
722
749
 
723
750
  .cnvs-secondary-button.variant-inverse:disabled, .cnvs-secondary-button.variant-inverse.disabled {
724
- --cnvs-button-background: transparent;
725
- --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
751
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
752
+ --cnvs-button-background: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
726
753
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
727
- --cnvs-system-icon-color: currentColor;
754
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, currentColor);
728
755
  }
729
756
 
730
757
 
731
758
  .cnvs-delete-button {
732
759
  box-sizing: border-box;
733
- --cnvs-button-background: var(--cnvs-brand-error-base);
734
- --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
735
- --cnvs-button-label: var(--cnvs-brand-error-accent);
736
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-error-accent));
760
+ --cnvs-button-background: var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
761
+ --cnvs-button-border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
762
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
763
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-inverse));
737
764
  }
738
765
 
739
766
  .cnvs-delete-button:focus-visible, .cnvs-delete-button.focus {
740
- --cnvs-button-background: var(--cnvs-brand-error-base);
741
- --cnvs-button-label: var(--cnvs-brand-error-accent);
742
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-error-accent));
743
- --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
744
- --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
767
+ --cnvs-button-background: var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
768
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
769
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-inverse));
770
+ --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
771
+ --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
745
772
  }
746
773
 
747
774
  .cnvs-delete-button:hover, .cnvs-delete-button.hover {
748
- --cnvs-button-background: var(--cnvs-brand-error-dark);
749
- --cnvs-button-label: var(--cnvs-brand-error-accent);
750
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-error-accent));
775
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-hover, 0.18) * 100%));
776
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
777
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-inverse));
751
778
  }
752
779
 
753
780
  .cnvs-delete-button:active, .cnvs-delete-button.active {
754
- --cnvs-button-background: var(--cnvs-brand-error-darkest);
755
- --cnvs-button-label: var(--cnvs-brand-error-accent);
756
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-error-accent));
781
+ --cnvs-button-background: color-mix(in srgb, var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1))) , var(--cnvs-sys-color-accent-overlay-mixin, oklch(0 0 0 / 1)) calc(var(--cnvs-sys-opacity-accent-pressed, 0.36) * 100%));
782
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
783
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-inverse));
757
784
  }
758
785
 
759
786
  .cnvs-delete-button:disabled, .cnvs-delete-button.disabled {
760
- --cnvs-button-background: var(--cnvs-brand-error-base);
761
- --cnvs-button-label: var(--cnvs-brand-error-accent);
762
- --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-error-accent));
763
787
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
788
+ --cnvs-button-background: var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));
789
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-inverse));
790
+ --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
764
791
  }
765
792