@workday/canvas-kit-css 11.0.0-alpha.769-next.0 → 11.0.0-alpha.770-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/button.css +283 -271
  2. package/package.json +2 -2
package/button.css CHANGED
@@ -1,95 +1,103 @@
1
- .cnvs-base-button {
1
+ .cnvs-button {
2
+ box-sizing: border-box;
2
3
  font-family: "Roboto","Helvetica Neue","Helvetica",Arial,sans-serif;
3
4
  font-size: 0.875rem;
4
5
  line-height: normal;
5
6
  letter-spacing: 0.015rem;
6
- font-weight: bold;
7
- background-color: var(--cnvs-button-default-background, transparent);
8
- color: var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));
9
- border-width: 1px;
7
+ font-weight: var(--cnvs-sys-font-weight-bold);
8
+ background-color: var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));
9
+ color: var(--cnvs-button-color-prop-default-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));
10
+ border-width: 0.0625rem;
10
11
  border-style: solid;
11
12
  gap: var(--cnvs-sys-space-x2);
12
- border-color: var(--cnvs-button-default-border, transparent);
13
+ border-color: var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));
13
14
  cursor: pointer;
14
15
  display: inline-flex;
15
16
  box-shadow: none;
16
17
  align-items: center;
17
18
  justify-content: center;
18
- box-sizing: border-box;
19
- outline: 2px transparent;
19
+ outline: 0.125rem transparent;
20
20
  white-space: nowrap;
21
21
  -webkit-font-smoothing: antialiased;
22
22
  -moz-osx-font-smoothing: grayscale;
23
- border-radius: var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round));
23
+ border-radius: var(--cnvs-button-color-prop-default-borderRadius, var(--cnvs-button-borderRadius, var(--cnvs-sys-shape-round)));
24
24
  position: relative;
25
25
  vertical-align: middle;
26
26
  overflow: hidden;
27
- --cnvs-system-icon-color: var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400));
27
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));
28
28
  transition: box-shadow 120ms linear,border 120ms linear,background-color 120ms linear,color 120ms linear;
29
29
  }
30
30
 
31
- .cnvs-base-button:disabled, .cnvs-base-button:disabled:active, .cnvs-base-button.disabled {
31
+ .cnvs-button:disabled, .cnvs-button:disabled:active, .cnvs-button.disabled {
32
32
  cursor: default;
33
33
  box-shadow: none;
34
- opacity: var(--cnvs-button-disabled-opacity, 1);
34
+ opacity: var(--cnvs-button-color-prop-default-opacity, var(--cnvs-button-opacity, var(--cnvs-sys-opacity-full)));
35
35
  }
36
36
 
37
- .cnvs-base-button:focus-visible, .cnvs-base-button.focus {
38
- background-color: var(--cnvs-button-focus-background, transparent);
39
- border-color: var(--cnvs-button-focus-border, transparent);
40
- color: var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));
41
- --cnvs-system-icon-color: var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400));
42
- box-shadow: 0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100)),0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base));
37
+ .cnvs-button:focus-visible, .cnvs-button.focus {
38
+ background-color: var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));
39
+ border-color: var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));
40
+ color: var(--cnvs-button-color-prop-focus-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));
41
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
42
+ box-shadow: 0 0 0 2px var(--cnvs-button-color-prop-focus-boxShadowInner, var(--cnvs-button-boxShadowInner, var(--cnvs-sys-color-fg-inverse))),0 0 0 4px var(--cnvs-button-color-prop-focus-boxShadowOuter, var(--cnvs-button-boxShadowOuter, var(--cnvs-brand-primary-base)));
43
43
  }
44
44
 
45
- .cnvs-base-button:hover, .cnvs-base-button.hover {
46
- background-color: var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500));
47
- border-color: var(--cnvs-button-hover-border, transparent);
48
- color: var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500));
49
- --cnvs-system-icon-color: var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500));
45
+ .cnvs-button:hover, .cnvs-button.hover {
46
+ background-color: var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-bg-contrast-strong)));
47
+ border-color: var(--cnvs-button-color-prop-hover-border, var(--cnvs-button-border, transparent));
48
+ color: var(--cnvs-button-color-prop-hover-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-stronger)));
49
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));
50
50
  }
51
51
 
52
- .cnvs-base-button:hover:active {
52
+ .cnvs-button:hover:active {
53
53
  transition-duration: 40ms;
54
54
  }
55
55
 
56
- .cnvs-base-button:active, .cnvs-base-button.active {
57
- background-color: var(--cnvs-button-active-background, transparent);
58
- border-color: var(--cnvs-button-active-border, transparent);
59
- color: var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));
60
- --cnvs-system-icon-color: var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400));
56
+ .cnvs-button:active, .cnvs-button.active {
57
+ background-color: var(--cnvs-button-color-prop-active-background, var(--cnvs-button-background, transparent));
58
+ border-color: var(--cnvs-button-color-prop-active-border, var(--cnvs-button-border, transparent));
59
+ color: var(--cnvs-button-color-prop-active-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));
60
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
61
61
  }
62
62
 
63
- .cnvs-base-button:disabled, .cnvs-base-button.disabled {
64
- background-color: var(--cnvs-button-disabled-background, transparent);
65
- border-color: var(--cnvs-button-disabled-border, transparent);
66
- color: var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400));
67
- --cnvs-system-icon-color: var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400));
63
+ .cnvs-button:disabled, .cnvs-button.disabled {
64
+ background-color: var(--cnvs-button-color-prop-disabled-background, var(--cnvs-button-background, transparent));
65
+ border-color: var(--cnvs-button-color-prop-disabled-border, var(--cnvs-button-border, transparent));
66
+ color: var(--cnvs-button-color-prop-disabled-label-emotion-safe, var(--cnvs-button-label-emotion-safe, var(--cnvs-sys-color-fg-strong)));
67
+ --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
68
68
  }
69
69
 
70
70
 
71
71
  .cnvs-button--size-large {
72
- font-size: var(--cnvs-sys-space-x4);
73
- line-height: var(--cnvs-sys-space-x6);
74
- letter-spacing: 0.01rem;
75
- height: 48px;
72
+ font-family: var(--cnvs-base-font-family-50);
73
+ font-weight: var(--cnvs-sys-font-weight-bold);
74
+ line-height: var(--cnvs-base-line-height-150);
75
+ font-size: var(--cnvs-base-font-size-100);
76
+ letter-spacing: var(--cnvs-base-letter-spacing-200);
77
+ height: 3rem;
76
78
  padding-inline: var(--cnvs-sys-space-x8);
77
- min-width: 112px;
79
+ min-width: 7rem;
78
80
  }
79
81
 
80
82
 
81
83
  .cnvs-button--size-medium {
82
- font-size: 0.875rem;
83
- letter-spacing: 0.015rem;
84
- min-width: 96px;
84
+ font-family: var(--cnvs-base-font-family-50);
85
+ font-weight: var(--cnvs-sys-font-weight-bold);
86
+ line-height: var(--cnvs-base-line-height-100);
87
+ font-size: var(--cnvs-base-font-size-75);
88
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
89
+ min-width: 6rem;
85
90
  padding-inline: var(--cnvs-sys-space-x6);
86
91
  height: var(--cnvs-sys-space-x10);
87
92
  }
88
93
 
89
94
 
90
95
  .cnvs-button--size-small {
91
- font-size: 0.875rem;
92
- letter-spacing: 0.015rem;
96
+ font-family: var(--cnvs-base-font-family-50);
97
+ font-weight: var(--cnvs-sys-font-weight-bold);
98
+ line-height: var(--cnvs-base-line-height-100);
99
+ font-size: var(--cnvs-base-font-size-75);
100
+ letter-spacing: var(--cnvs-base-letter-spacing-150);
93
101
  height: var(--cnvs-sys-space-x8);
94
102
  min-width: var(--cnvs-sys-space-x20);
95
103
  padding-inline: var(--cnvs-sys-space-x4);
@@ -98,9 +106,11 @@
98
106
 
99
107
 
100
108
  .cnvs-button--size-extra-small {
101
- font-size: 0.75rem;
102
- line-height: var(--cnvs-sys-space-x4);
103
- letter-spacing: 0.02rem;
109
+ font-family: var(--cnvs-base-font-family-50);
110
+ font-weight: var(--cnvs-sys-font-weight-bold);
111
+ line-height: var(--cnvs-base-line-height-50);
112
+ font-size: var(--cnvs-base-font-size-50);
113
+ letter-spacing: var(--cnvs-base-letter-spacing-100);
104
114
  height: var(--cnvs-sys-space-x6);
105
115
  min-width: auto;
106
116
  padding-inline: var(--cnvs-sys-space-x3);
@@ -108,119 +118,140 @@
108
118
  }
109
119
 
110
120
 
111
- .cnvs-button--icon-position-large-only {
112
- padding: 0;
121
+ .cnvs-button--icon-position-only {
122
+ padding: var(--cnvs-sys-space-zero);
123
+ }
124
+
125
+
126
+ .cnvs-button--size-large.cnvs-button--icon-position-only {
113
127
  min-width: calc(var(--cnvs-sys-space-x4) * 3);
114
128
  }
115
129
 
116
130
 
117
- .cnvs-button--icon-position-large-start {
131
+ .cnvs-button--size-large.cnvs-button--icon-position-start {
118
132
  padding-inline-start: var(--cnvs-sys-space-x6);
119
133
  padding-inline-end: var(--cnvs-sys-space-x8);
120
134
  }
121
135
 
122
136
 
123
- .cnvs-button--icon-position-large-end {
137
+ .cnvs-button--size-large.cnvs-button--icon-position-end {
124
138
  padding-inline-start: var(--cnvs-sys-space-x8);
125
139
  padding-inline-end: var(--cnvs-sys-space-x6);
126
140
  }
127
141
 
128
142
 
129
- .cnvs-button--icon-position-medium-only {
130
- padding: 0;
143
+ .cnvs-button--size-medium.cnvs-button--icon-position-only {
131
144
  min-width: var(--cnvs-sys-space-x10);
132
145
  }
133
146
 
134
147
 
135
- .cnvs-button--icon-position-medium-start {
148
+ .cnvs-button--size-medium.cnvs-button--icon-position-start {
136
149
  padding-inline-start: calc(var(--cnvs-sys-space-x1) * 5);
137
150
  padding-inline-end: var(--cnvs-sys-space-x6);
138
151
  }
139
152
 
140
153
 
141
- .cnvs-button--icon-position-medium-end {
154
+ .cnvs-button--size-medium.cnvs-button--icon-position-end {
142
155
  padding-inline-start: var(--cnvs-sys-space-x6);
143
156
  padding-inline-end: calc(var(--cnvs-sys-space-x1) * 5);
144
157
  }
145
158
 
146
159
 
147
- .cnvs-button--icon-position-small-only {
148
- padding: 0;
160
+ .cnvs-button--size-small.cnvs-button--icon-position-only {
149
161
  min-width: var(--cnvs-sys-space-x8);
150
162
  }
151
163
 
152
164
 
153
- .cnvs-button--icon-position-small-start {
165
+ .cnvs-button--size-small.cnvs-button--icon-position-start {
154
166
  padding-inline-start: var(--cnvs-sys-space-x3);
155
167
  padding-inline-end: var(--cnvs-sys-space-x4);
156
168
  }
157
169
 
158
170
 
159
- .cnvs-button--icon-position-small-end {
171
+ .cnvs-button--size-small.cnvs-button--icon-position-end {
160
172
  padding-inline-start: var(--cnvs-sys-space-x4);
161
173
  padding-inline-end: var(--cnvs-sys-space-x3);
162
174
  }
163
175
 
164
176
 
165
- .cnvs-button--icon-position-extra-small-only {
166
- padding: 0;
177
+ .cnvs-button--size-extraSmall.cnvs-button--icon-position-only {
167
178
  min-width: var(--cnvs-sys-space-x6);
168
179
  }
169
180
 
170
181
 
171
- .cnvs-button--icon-position-extra-small-start {
182
+ .cnvs-button--size-extraSmall.cnvs-button--icon-position-start {
172
183
  padding-inline-start: var(--cnvs-sys-space-x2);
173
184
  padding-inline-end: var(--cnvs-sys-space-x3);
174
185
  }
175
186
 
176
187
 
177
- .cnvs-button--icon-position-extra-small-end {
188
+ .cnvs-button--size-extraSmall.cnvs-button--icon-position-end {
178
189
  padding-inline-start: var(--cnvs-sys-space-x3);
179
190
  padding-inline-end: var(--cnvs-sys-space-x2);
180
191
  }
181
192
 
182
193
 
183
- .cnvs-tertiary {
194
+ .cnvs-tertiary-button {
195
+ box-sizing: border-box;
184
196
  padding-inline: var(--cnvs-sys-space-x2);
185
197
  min-width: auto;
186
198
  text-decoration: underline;
187
- border: 0;
188
- --cnvs-button-default-background: transparent;
189
- --cnvs-button-default-border: transparent;
190
- --cnvs-button-default-borderRadius: var(--cnvs-sys-shape-x1);
191
- --cnvs-button-default-label-emotion-safe: var(--cnvs-brand-primary-base);
192
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
199
+ border: var(--cnvs-sys-space-zero);
200
+ --cnvs-button-background: transparent;
201
+ --cnvs-button-borderRadius: var(--cnvs-sys-shape-x1);
202
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-base);
203
+ --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
193
204
  }
194
205
 
195
- .cnvs-tertiary:focus-visible, .cnvs-tertiary.focus {
196
- --cnvs-button-focus-background: transparent;
197
- --cnvs-button-focus-border: transparent;
198
- --cnvs-button-focus-label-emotion-safe: var(--cnvs-brand-primary-base);
199
- --cnvs-button-focus-boxShadowInner: var(--cnvs-brand-common-focus-outline);
200
- --cnvs-button-focus-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
201
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
202
- box-shadow: 0 0 0 0px var(--cnvs-base-palette-french-vanilla-100),0 0 0 2px var(--cnvs-brand-common-focus-outline);
206
+ .cnvs-tertiary-button:focus-visible, .cnvs-tertiary-button.focus {
207
+ --cnvs-button-background: transparent;
208
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-base);
209
+ --cnvs-button-boxShadowInner: var(--cnvs-brand-common-focus-outline);
210
+ --cnvs-button-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
211
+ --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
212
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-fg-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
213
+ }
214
+
215
+ .cnvs-tertiary-button:hover, .cnvs-tertiary-button.hover {
216
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
217
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-dark);
218
+ --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
203
219
  }
204
220
 
205
- .cnvs-tertiary:hover, .cnvs-tertiary.hover {
206
- --cnvs-button-hover-background: var(--cnvs-base-palette-soap-300);
207
- --cnvs-button-hover-border: transparent;
208
- --cnvs-button-hover-label-emotion-safe: var(--cnvs-brand-primary-dark);
209
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
221
+ .cnvs-tertiary-button:active, .cnvs-tertiary-button.active {
222
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
223
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-darkest);
224
+ --cnvs-system-icon-color: var(--cnvs-brand-primary-darkest);
210
225
  }
211
226
 
212
- .cnvs-tertiary:active, .cnvs-tertiary.active {
213
- --cnvs-button-active-background: var(--cnvs-base-palette-soap-400);
214
- --cnvs-button-active-border: transparent;
215
- --cnvs-button-active-label-emotion-safe: var(--cnvs-brand-primary-darkest);
216
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-500);
227
+ .cnvs-tertiary-button:disabled, .cnvs-tertiary-button.disabled {
228
+ --cnvs-button-background: transparent;
229
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-base);
230
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
231
+ --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
217
232
  }
218
233
 
219
- .cnvs-tertiary:disabled, .cnvs-tertiary.disabled {
220
- --cnvs-button-disabled-background: transparent;
221
- --cnvs-button-disabled-border: transparent;
222
- --cnvs-button-disabled-label-emotion-safe: var(--cnvs-brand-primary-base);
223
- --cnvs-button-disabled-opacity: 0.4;
234
+
235
+ .cnvs-tertiary-button--icon-position-only {
236
+ padding: 0;
237
+ border-radius: var(--cnvs-sys-shape-round);
238
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
239
+ }
240
+
241
+ .cnvs-tertiary-button--icon-position-only:focus-visible, .cnvs-tertiary-button--icon-position-only.focus {
242
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
243
+ }
244
+
245
+ .cnvs-tertiary-button--icon-position-only:hover, .cnvs-tertiary-button--icon-position-only.hover {
246
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
247
+ }
248
+
249
+ .cnvs-tertiary-button--icon-position-only:active, .cnvs-tertiary-button--icon-position-only.active {
250
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
251
+ }
252
+
253
+ .cnvs-tertiary-button--icon-position-only:disabled, .cnvs-tertiary-button--icon-position-only.disabled {
254
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
224
255
  }
225
256
 
226
257
 
@@ -246,305 +277,286 @@
246
277
 
247
278
 
248
279
  .cnvs-tertiary-button--variant-inverse {
249
- --cnvs-button-default-background: transparent;
250
- --cnvs-button-default-border: transparent;
251
- --cnvs-button-default-label-emotion-safe: var(--cnvs-base-palette-french-vanilla-100);
252
- --cnvs-system-icon-color: var(--cnvs-base-palette-french-vanilla-100);
280
+ --cnvs-button-background: transparent;
281
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-inverse);
282
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
253
283
  }
254
284
 
255
285
  .cnvs-tertiary-button--variant-inverse:focus-visible, .cnvs-tertiary-button--variant-inverse.focus {
256
- --cnvs-button-focus-background: var(--cnvs-base-palette-french-vanilla-100);
257
- --cnvs-button-focus-border: transparent;
258
- --cnvs-button-focus-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
259
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
260
- box-shadow: inset 0 0 0 2px var(--cnvs-base-palette-black-pepper-400),0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);
286
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
287
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
288
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
289
+ box-shadow: inset 0 0 0 2px var(--cnvs-sys-color-fg-strong),0 0 0 2px var(--cnvs-sys-color-fg-inverse);
261
290
  }
262
291
 
263
292
  .cnvs-tertiary-button--variant-inverse:hover, .cnvs-tertiary-button--variant-inverse.hover {
264
- --cnvs-button-hover-background: var(--cnvs-base-palette-french-vanilla-100);
265
- --cnvs-button-hover-border: transparent;
266
- --cnvs-button-hover-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
267
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
293
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
294
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
295
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
268
296
  }
269
297
 
270
298
  .cnvs-tertiary-button--variant-inverse:active, .cnvs-tertiary-button--variant-inverse.active {
271
- --cnvs-button-active-background: var(--cnvs-base-palette-soap-200);
272
- --cnvs-button-active-border: transparent;
273
- --cnvs-button-active-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
274
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
299
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
300
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
301
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
275
302
  }
276
303
 
277
304
  .cnvs-tertiary-button--variant-inverse:disabled, .cnvs-tertiary-button--variant-inverse.disabled {
278
- --cnvs-button-disabled-background: transparent;
279
- --cnvs-button-disabled-border: var(--cnvs-base-palette-french-vanilla-100);
280
- --cnvs-button-disabled-label-emotion-safe: var(--cnvs-base-palette-french-vanilla-100);
281
- --cnvs-system-icon-color: var(--cnvs-base-palette-french-vanilla-100);
305
+ --cnvs-button-background: transparent;
306
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-inverse);
307
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
282
308
  }
283
309
 
284
310
 
285
- .cnvs-tertiary-button--icon-position-large-only {
286
- border-radius: 999px;
287
- padding: 0;
311
+ .cnvs-tertiary-button.cnvs-button--size-large.cnvs-button--icon-position-only {
288
312
  min-width: calc(var(--cnvs-sys-space-x4) * 3);
289
313
  }
290
314
 
291
315
 
292
- .cnvs-tertiary-button--icon-position-large-start {
293
- padding-inline-start: 0.5rem;
294
- padding-inline-end: 0.75rem;
316
+ .cnvs-tertiary-button.cnvs-button--size-large.cnvs-button--icon-position-start {
317
+ padding-inline-start: var(--cnvs-sys-space-x2);
318
+ padding-inline-end: var(--cnvs-sys-space-x3);
295
319
  }
296
320
 
297
321
 
298
- .cnvs-tertiary-button--icon-position-large-end {
299
- padding-inline-start: 0.75rem;
300
- padding-inline-end: 0.5rem;
322
+ .cnvs-tertiary-button.cnvs-button--size-large.cnvs-button--icon-position-end {
323
+ padding-inline-start: var(--cnvs-sys-space-x3);
324
+ padding-inline-end: var(--cnvs-sys-space-x2);
301
325
  }
302
326
 
303
327
 
304
- .cnvs-tertiary-button--icon-position-medium-only {
305
- padding: 0;
306
- min-width: 2.5rem;
307
- border-radius: 999px;
328
+ .cnvs-tertiary-button.cnvs-button--size-medium.cnvs-button--icon-position-only {
329
+ min-width: var(--cnvs-sys-space-x10);
308
330
  }
309
331
 
310
332
 
311
- .cnvs-tertiary-button--icon-position-medium-start {
312
- padding-inline-start: 0.5rem;
313
- padding-inline-end: 0.75rem;
333
+ .cnvs-tertiary-button.cnvs-button--size-medium.cnvs-button--icon-position-start {
334
+ padding-inline-start: var(--cnvs-sys-space-x2);
335
+ padding-inline-end: var(--cnvs-sys-space-x3);
314
336
  }
315
337
 
316
338
 
317
- .cnvs-tertiary-button--icon-position-medium-end {
318
- padding-inline-start: 0.75rem;
319
- padding-inline-end: 0.5rem;
339
+ .cnvs-tertiary-button.cnvs-button--size-medium.cnvs-button--icon-position-end {
340
+ padding-inline-start: var(--cnvs-sys-space-x3);
341
+ padding-inline-end: var(--cnvs-sys-space-x2);
320
342
  }
321
343
 
322
344
 
323
- .cnvs-tertiary-button--icon-position-small-only {
324
- padding: 0;
325
- min-width: 2rem;
326
- border-radius: 999px;
345
+ .cnvs-tertiary-button.cnvs-button--size-small.cnvs-button--icon-position-only {
346
+ min-width: var(--cnvs-sys-space-x8);
327
347
  }
328
348
 
329
349
 
330
- .cnvs-tertiary-button--icon-position-small-start {
331
- padding-inline-start: 0.5rem;
332
- padding-inline-end: 0.75rem;
350
+ .cnvs-tertiary-button.cnvs-button--size-small.cnvs-button--icon-position-start {
351
+ padding-inline-start: var(--cnvs-sys-space-x2);
352
+ padding-inline-end: var(--cnvs-sys-space-x3);
333
353
  }
334
354
 
335
355
 
336
- .cnvs-tertiary-button--icon-position-small-end {
337
- padding-inline-start: 0.75rem;
338
- padding-inline-end: 0.5rem;
356
+ .cnvs-tertiary-button.cnvs-button--size-small.cnvs-button--icon-position-end {
357
+ padding-inline-start: var(--cnvs-sys-space-x3);
358
+ padding-inline-end: var(--cnvs-sys-space-x2);
339
359
  }
340
360
 
341
361
 
342
- .cnvs-tertiary-button--icon-position-extra-small-only {
343
- padding: 0;
344
- min-width: 1.5rem;
345
- border-radius: 999px;
362
+ .cnvs-tertiary-button.cnvs-button--size-extra-small.cnvs-button--icon-position-only {
363
+ min-width: var(--cnvs-sys-space-x6);
346
364
  }
347
365
 
348
366
 
349
- .cnvs-tertiary-button--icon-position-extra-small-start {
350
- padding-inline-start: 0.25rem;
351
- padding-inline-end: 0.5rem;
367
+ .cnvs-tertiary-button.cnvs-button--size-extra-small.cnvs-button--icon-position-start {
368
+ padding-inline-start: var(--cnvs-sys-space-x1);
369
+ padding-inline-end: var(--cnvs-sys-space-x2);
352
370
  }
353
371
 
354
372
 
355
- .cnvs-tertiary-button--icon-position-extra-small-end {
356
- padding-inline-start: 0.5rem;
357
- padding-inline-end: 0.25rem;
373
+ .cnvs-tertiary-button.cnvs-button--size-extra-small.cnvs-button--icon-position-end {
374
+ padding-inline-start: var(--cnvs-sys-space-x2);
375
+ padding-inline-end: var(--cnvs-sys-space-x1);
358
376
  }
359
377
 
360
378
 
361
- .cnvs-primary {
362
- --cnvs-button-default-background: var(--cnvs-brand-primary-base);
363
- --cnvs-button-default-border: transparent;
364
- --cnvs-button-default-borderRadius: var(--cnvs-sys-shape-round);
365
- --cnvs-button-default-label-emotion-safe: var(--cnvs-brand-primary-accent);
379
+ .cnvs-primary-button {
380
+ box-sizing: border-box;
381
+ --cnvs-button-background: var(--cnvs-brand-primary-base);
382
+ --cnvs-button-borderRadius: var(--cnvs-sys-shape-round);
383
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
366
384
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
367
385
  }
368
386
 
369
- .cnvs-primary:focus-visible, .cnvs-primary.focus {
370
- --cnvs-button-focus-background: var(--cnvs-brand-primary-base);
371
- --cnvs-button-focus-border: transparent;
372
- --cnvs-button-focus-label-emotion-safe: var(--cnvs-brand-primary-accent);
373
- --cnvs-button-focus-boxShadowInner: var(--cnvs-base-palette-french-vanilla-100);
374
- --cnvs-button-focus-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
387
+ .cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
388
+ --cnvs-button-background: var(--cnvs-brand-primary-base);
389
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
390
+ --cnvs-button-boxShadowInner: var(--cnvs-sys-color-fg-inverse);
391
+ --cnvs-button-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
375
392
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
376
393
  }
377
394
 
378
- .cnvs-primary:hover, .cnvs-primary.hover {
379
- --cnvs-button-hover-background: var(--cnvs-brand-primary-dark);
380
- --cnvs-button-hover-border: transparent;
381
- --cnvs-button-hover-label-emotion-safe: var(--cnvs-brand-primary-accent);
395
+ .cnvs-primary-button:hover, .cnvs-primary-button.hover {
396
+ --cnvs-button-background: var(--cnvs-brand-primary-dark);
397
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
382
398
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
383
399
  }
384
400
 
385
- .cnvs-primary:active, .cnvs-primary.active {
386
- --cnvs-button-active-background: var(--cnvs-brand-primary-darkest);
387
- --cnvs-button-active-border: transparent;
388
- --cnvs-button-active-label-emotion-safe: var(--cnvs-brand-primary-accent);
401
+ .cnvs-primary-button:active, .cnvs-primary-button.active {
402
+ --cnvs-button-background: var(--cnvs-brand-primary-darkest);
403
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
389
404
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
390
405
  }
391
406
 
392
- .cnvs-primary:disabled, .cnvs-primary.disabled {
393
- --cnvs-button-disabled-background: var(--cnvs-brand-primary-base);
394
- --cnvs-button-disabled-border: transparent;
395
- --cnvs-button-disabled-label-emotion-safe: var(--cnvs-brand-primary-accent);
396
- --cnvs-button-disabled-opacity: 0.4;
407
+ .cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
408
+ --cnvs-button-background: var(--cnvs-brand-primary-base);
409
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
410
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
397
411
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
398
412
  }
399
413
 
400
414
 
401
415
  .cnvs-primary-button--variant-inverse {
402
- --cnvs-button-default-background: var(--cnvs-base-palette-french-vanilla-100);
403
- --cnvs-button-default-borderRadius: var(--cnvs-sys-shape-round);
404
- --cnvs-button-default-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
405
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
416
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
417
+ --cnvs-button-borderRadius: var(--cnvs-sys-shape-round);
418
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
419
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
406
420
  }
407
421
 
408
422
  .cnvs-primary-button--variant-inverse:focus-visible, .cnvs-primary-button--variant-inverse.focus {
409
- --cnvs-button-focus-background: var(--cnvs-base-palette-french-vanilla-100);
410
- --cnvs-button-focus-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
411
- --cnvs-button-focus-boxShadowInner: var(--cnvs-base-palette-black-pepper-400);
412
- --cnvs-button-focus-boxShadowOuter: var(--cnvs-base-palette-french-vanilla-100);
413
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
423
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
424
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
425
+ --cnvs-button-boxShadowInner: var(--cnvs-sys-color-fg-strong);
426
+ --cnvs-button-boxShadowOuter: var(--cnvs-sys-color-fg-inverse);
427
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
414
428
  }
415
429
 
416
430
  .cnvs-primary-button--variant-inverse:hover, .cnvs-primary-button--variant-inverse.hover {
417
- --cnvs-button-hover-background: var(--cnvs-base-palette-soap-300);
418
- --cnvs-button-hover-label-emotion-safe: var(--cnvs-base-palette-black-pepper-500);
419
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-500);
431
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
432
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-stronger);
433
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
420
434
  }
421
435
 
422
436
  .cnvs-primary-button--variant-inverse:active, .cnvs-primary-button--variant-inverse.active {
423
- --cnvs-button-active-background: var(--cnvs-base-palette-soap-400);
424
- --cnvs-button-active-label-emotion-safe: var(--cnvs-base-palette-black-pepper-500);
425
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-500);
437
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
438
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-stronger);
439
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
426
440
  }
427
441
 
428
442
  .cnvs-primary-button--variant-inverse:disabled, .cnvs-primary-button--variant-inverse.disabled {
429
- --cnvs-button-disabled-background: var(--cnvs-base-palette-french-vanilla-100);
430
- --cnvs-button-disabled-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
431
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
443
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
444
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
445
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
432
446
  }
433
447
 
434
448
 
435
- .cnvs-secondary {
436
- --cnvs-button-default-background: transparent;
437
- --cnvs-button-default-border: var(--cnvs-base-palette-black-pepper-400);
438
- --cnvs-button-default-borderRadius: var(--cnvs-sys-shape-round);
439
- --cnvs-button-default-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
440
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
441
- }
442
-
443
- .cnvs-secondary:focus-visible, .cnvs-secondary.focus {
444
- --cnvs-button-focus-background: transparent;
445
- --cnvs-button-focus-border: var(--cnvs-base-palette-black-pepper-400);
446
- --cnvs-button-focus-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
447
- --cnvs-button-focus-boxShadowInner: var(--cnvs-base-palette-french-vanilla-100);
448
- --cnvs-button-focus-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
449
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
450
- }
451
-
452
- .cnvs-secondary:hover, .cnvs-secondary.hover {
453
- --cnvs-button-hover-background: var(--cnvs-base-palette-black-pepper-400);
454
- --cnvs-button-hover-border: var(--cnvs-base-palette-black-pepper-400);
455
- --cnvs-button-hover-label-emotion-safe: var(--cnvs-brand-primary-accent);
449
+ .cnvs-secondary-button {
450
+ box-sizing: border-box;
451
+ --cnvs-button-background: transparent;
452
+ --cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
453
+ --cnvs-button-borderRadius: var(--cnvs-sys-shape-round);
454
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
455
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
456
+ }
457
+
458
+ .cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
459
+ --cnvs-button-background: transparent;
460
+ --cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
461
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
462
+ --cnvs-button-boxShadowInner: var(--cnvs-sys-color-fg-inverse);
463
+ --cnvs-button-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
464
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
465
+ }
466
+
467
+ .cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
468
+ --cnvs-button-background: var(--cnvs-sys-color-bg-contrast-default);
469
+ --cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
470
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
456
471
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
457
472
  }
458
473
 
459
- .cnvs-secondary:active, .cnvs-secondary.active {
460
- --cnvs-button-active-background: var(--cnvs-base-palette-black-pepper-500);
461
- --cnvs-button-active-border: var(--cnvs-base-palette-black-pepper-500);
462
- --cnvs-button-active-label-emotion-safe: var(--cnvs-brand-primary-accent);
474
+ .cnvs-secondary-button:active, .cnvs-secondary-button.active {
475
+ --cnvs-button-background: var(--cnvs-sys-color-bg-contrast-strong);
476
+ --cnvs-button-border: var(--cnvs-sys-color-border-contrast-strong);
477
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-primary-accent);
463
478
  --cnvs-system-icon-color: var(--cnvs-brand-primary-accent);
464
479
  }
465
480
 
466
- .cnvs-secondary:disabled, .cnvs-secondary.disabled {
467
- --cnvs-button-disabled-background: transparent;
468
- --cnvs-button-disabled-border: var(--cnvs-base-palette-black-pepper-400);
469
- --cnvs-button-disabled-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
470
- --cnvs-button-disabled-opacity: 0.4;
471
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
481
+ .cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
482
+ --cnvs-button-background: transparent;
483
+ --cnvs-button-border: var(--cnvs-sys-color-border-contrast-default);
484
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
485
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
486
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
472
487
  }
473
488
 
474
489
 
475
490
  .cnvs-secondary-button--variant-inverse {
476
- --cnvs-button-default-background: transparent;
477
- --cnvs-button-default-border: var(--cnvs-base-palette-french-vanilla-100);
478
- --cnvs-button-default-label-emotion-safe: var(--cnvs-base-palette-french-vanilla-100);
479
- --cnvs-system-icon-color: var(--cnvs-base-palette-french-vanilla-100);
491
+ --cnvs-button-background: transparent;
492
+ --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
493
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-inverse);
494
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
480
495
  }
481
496
 
482
497
  .cnvs-secondary-button--variant-inverse:focus-visible, .cnvs-secondary-button--variant-inverse.focus {
483
- --cnvs-button-focus-background: var(--cnvs-base-palette-french-vanilla-100);
484
- --cnvs-button-focus-border: var(--cnvs-base-palette-french-vanilla-100);
485
- --cnvs-button-focus-label-emotion-safe: var(--cnvs-base-palette-black-pepper-400);
486
- --cnvs-button-focus-boxShadowInner: var(--cnvs-base-palette-black-pepper-400);
487
- --cnvs-button-focus-boxShadowOuter: var(--cnvs-base-palette-french-vanilla-100);
488
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-400);
498
+ --cnvs-button-background: var(--cnvs-sys-color-bg-default);
499
+ --cnvs-button-border: transparent;
500
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-strong);
501
+ --cnvs-button-boxShadowInner: var(--cnvs-sys-color-fg-strong);
502
+ --cnvs-button-boxShadowOuter: var(--cnvs-sys-color-fg-inverse);
503
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-strong);
489
504
  }
490
505
 
491
506
  .cnvs-secondary-button--variant-inverse:hover, .cnvs-secondary-button--variant-inverse.hover {
492
- --cnvs-button-hover-background: var(--cnvs-base-palette-soap-300);
493
- --cnvs-button-hover-border: var(--cnvs-base-palette-soap-300);
494
- --cnvs-button-hover-label-emotion-safe: var(--cnvs-base-palette-black-pepper-500);
495
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-500);
507
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
508
+ --cnvs-button-border: transparent;
509
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-stronger);
510
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
496
511
  }
497
512
 
498
513
  .cnvs-secondary-button--variant-inverse:active, .cnvs-secondary-button--variant-inverse.active {
499
- --cnvs-button-active-background: var(--cnvs-base-palette-soap-400);
500
- --cnvs-button-active-border: var(--cnvs-base-palette-soap-400);
501
- --cnvs-button-active-label-emotion-safe: var(--cnvs-base-palette-black-pepper-500);
502
- --cnvs-system-icon-color: var(--cnvs-base-palette-black-pepper-500);
514
+ --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
515
+ --cnvs-button-border: transparent;
516
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-stronger);
517
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-stronger);
503
518
  }
504
519
 
505
520
  .cnvs-secondary-button--variant-inverse:disabled, .cnvs-secondary-button--variant-inverse.disabled {
506
- --cnvs-button-disabled-background: transparent;
507
- --cnvs-button-disabled-border: var(--cnvs-base-palette-french-vanilla-100);
508
- --cnvs-button-disabled-label-emotion-safe: var(--cnvs-base-palette-french-vanilla-100);
509
- --cnvs-system-icon-color: var(--cnvs-base-palette-french-vanilla-100);
521
+ --cnvs-button-background: transparent;
522
+ --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
523
+ --cnvs-button-label-emotion-safe: var(--cnvs-sys-color-fg-inverse);
524
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
510
525
  }
511
526
 
512
527
 
513
- .cnvs-delete {
514
- --cnvs-button-default-background: var(--cnvs-brand-error-base);
515
- --cnvs-button-default-border: transparent;
516
- --cnvs-button-default-borderRadius: var(--cnvs-sys-shape-round);
517
- --cnvs-button-default-label-emotion-safe: var(--cnvs-brand-error-accent);
528
+ .cnvs-delete-button {
529
+ box-sizing: border-box;
530
+ --cnvs-button-background: var(--cnvs-brand-error-base);
531
+ --cnvs-button-borderRadius: var(--cnvs-sys-shape-round);
532
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
518
533
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
519
534
  }
520
535
 
521
- .cnvs-delete:focus-visible, .cnvs-delete.focus {
522
- --cnvs-button-focus-background: var(--cnvs-brand-error-base);
523
- --cnvs-button-focus-border: transparent;
524
- --cnvs-button-focus-label-emotion-safe: var(--cnvs-brand-error-accent);
536
+ .cnvs-delete-button:focus-visible, .cnvs-delete-button.focus {
537
+ --cnvs-button-background: var(--cnvs-brand-error-base);
538
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
525
539
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
526
- --cnvs-button-focus-boxShadowInner: var(--cnvs-base-palette-french-vanilla-100);
527
- --cnvs-button-focus-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
540
+ --cnvs-button-boxShadowInner: var(--cnvs-sys-color-fg-inverse);
541
+ --cnvs-button-boxShadowOuter: var(--cnvs-brand-common-focus-outline);
528
542
  }
529
543
 
530
- .cnvs-delete:hover, .cnvs-delete.hover {
531
- --cnvs-button-hover-background: var(--cnvs-brand-error-dark);
532
- --cnvs-button-hover-border: transparent;
533
- --cnvs-button-hover-label-emotion-safe: var(--cnvs-brand-error-accent);
544
+ .cnvs-delete-button:hover, .cnvs-delete-button.hover {
545
+ --cnvs-button-background: var(--cnvs-brand-error-dark);
546
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
534
547
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
535
548
  }
536
549
 
537
- .cnvs-delete:active, .cnvs-delete.active {
538
- --cnvs-button-active-background: var(--cnvs-brand-error-darkest);
539
- --cnvs-button-active-border: transparent;
540
- --cnvs-button-active-label-emotion-safe: var(--cnvs-brand-error-accent);
550
+ .cnvs-delete-button:active, .cnvs-delete-button.active {
551
+ --cnvs-button-background: var(--cnvs-brand-error-darkest);
552
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
541
553
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
542
554
  }
543
555
 
544
- .cnvs-delete:disabled, .cnvs-delete.disabled {
545
- --cnvs-button-disabled-background: var(--cnvs-brand-error-base);
546
- --cnvs-button-disabled-label-emotion-safe: var(--cnvs-brand-error-accent);
556
+ .cnvs-delete-button:disabled, .cnvs-delete-button.disabled {
557
+ --cnvs-button-background: var(--cnvs-brand-error-base);
558
+ --cnvs-button-label-emotion-safe: var(--cnvs-brand-error-accent);
547
559
  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
548
- --cnvs-button-disabled-opacity: 0.4;
560
+ --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
549
561
  }
550
562
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-css",
3
- "version": "11.0.0-alpha.769-next.0",
3
+ "version": "11.0.0-alpha.770-next.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit CSS components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -25,5 +25,5 @@
25
25
  "components",
26
26
  "workday"
27
27
  ],
28
- "gitHead": "6ccdc31e5c364c7a8a6f29f7b797032a914ca2c5"
28
+ "gitHead": "54f26ac17e2a7d579539ae11adcaa1912faeef2e"
29
29
  }