Skip to content

Commit a67a8c0

Browse files
committed
fix(Button): align disabled treatment to latest design
1 parent c6c7e30 commit a67a8c0

File tree

1 file changed

+25
-4
lines changed

1 file changed

+25
-4
lines changed

src/components/Button/Button-v2.module.css

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878

7979
/**
8080
* Anatomy and iconLayout (w/ size)
81+
* lg=40, md=32, sm=24 when layout is icon-only
8182
*/
8283
.button--layout-icon-only {
8384
min-width: unset;
@@ -93,14 +94,17 @@
9394

9495
.button--lg.button--layout-icon-only {
9596
padding: 0.5rem;
97+
width: 2.5rem;
9698
}
9799

98100
.button--md.button--layout-icon-only {
99-
padding: 0.5rem
101+
padding: 0.5rem;
102+
width: 2rem;
100103
}
101104

102105
.button--sm.button--layout-icon-only {
103106
padding: 0.25rem;
107+
width: 1.5rem;
104108
}
105109

106110
.button:focus-visible {
@@ -185,23 +189,40 @@
185189
* Disabled
186190
*/
187191

188-
.button--variant-default.button--disabled,
189-
.button--variant-critical.button--disabled {
192+
.button--primary.button--variant-default.button--disabled,
193+
.button--primary.button--variant-critical.button--disabled {
190194
color: var(--eds-theme-color-text-utility-disabled-primary);
191195
border-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
192196
background-color: var(--eds-theme-color-background-utility-disabled-medium-emphasis);
193197

194198
pointer-events: none;
195199
}
196200

197-
.button--variant-inverse.button--disabled {
201+
.button--primary.button--variant-inverse.button--disabled {
198202
color: var(--eds-theme-color-text-utility-inverse-disabled);
199203
border-color: var(--eds-theme-color-background-utility-inverse-disabled);
200204
background-color: var(--eds-theme-color-background-utility-inverse-disabled);
201205

202206
pointer-events: none;
203207
}
204208

209+
.button--secondary.button--variant-default.button--disabled,
210+
.button--secondary.button--variant-critical.button--disabled {
211+
color: var(--eds-theme-color-text-utility-disabled-primary);
212+
border-color: var(--eds-theme-color-border-disabled);
213+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
214+
215+
pointer-events: none;
216+
}
217+
218+
.button--tertiary.button--variant-default.button--disabled,
219+
.button--tertiary.button--variant-critical.button--disabled {
220+
color: var(--eds-theme-color-text-utility-disabled-primary);
221+
background-color: var(--eds-theme-color-background-utility-default-no-emphasis);
222+
223+
pointer-events: none;
224+
}
225+
205226
/**
206227
* States
207228
*/

0 commit comments

Comments
 (0)