You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Now that OE's over, I'm working on updating MCT to MDS 6.0.5 (more to come). This update involves the migration to v4 Buttons.
I noticed in working on this that solid buttons on dark backgrounds now, like other button "variations" (using the term loosely), have :hover and :active states that I don't think they had before. They're not that common in MCT, but currently, where we have them, hovering over a solid button on a dark background (the button is white with dark text) does not change its style.
With v4 Buttons, the solid button set to onDark does change on :hover (also :active), such that it gets either the primary or primary-alt background color and the text becomes white.
Stylistically, it makes the most sense for the button to use the foundational color theme of its background, so on a $color-primary background, the hovered button's backgroundColor becomes $color-primary-dark, and on a $color-primary-alt background, becomes $color-primary-alt-dark (that is, the button is classed --alternative).
Unfortunately, this isn't really great visually, as the button nearly disappears into its background.
Consulting with MCT UX, we've decided to override this a bit, so that the hovered (or :active), solid, onDark button gets the same border and color as a default button does. The end result is that when hovered or :active, these buttons get a visible border, so they don't disappear into their background.
I'm attaching a screenshot of what I mean, in this case showing an --alternative button on a $color-primary-alt background.
I want to start making a habit of seeing whether we can bubble up at least some of our overrides into the DS, so that we can get rid of them in our repo.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
👋 from MCT
Now that OE's over, I'm working on updating MCT to MDS 6.0.5 (more to come). This update involves the migration to v4 Buttons.
I noticed in working on this that solid buttons on dark backgrounds now, like other button "variations" (using the term loosely), have
:hover
and:active
states that I don't think they had before. They're not that common in MCT, but currently, where we have them, hovering over a solid button on a dark background (the button is white with dark text) does not change its style.With v4 Buttons, the solid button set to
onDark
does change on:hover
(also:active
), such that it gets either theprimary
orprimary-alt
background color and the text becomes white.Stylistically, it makes the most sense for the button to use the foundational color theme of its background, so on a
$color-primary
background, the hovered button'sbackgroundColor
becomes$color-primary-dark
, and on a$color-primary-alt
background, becomes$color-primary-alt-dark
(that is, the button is classed--alternative
).Unfortunately, this isn't really great visually, as the button nearly disappears into its background.
Consulting with MCT UX, we've decided to override this a bit, so that the hovered (or
:active
),solid
,onDark
button gets the sameborder
andcolor
as a default button does. The end result is that when hovered or:active
, these buttons get a visible border, so they don't disappear into their background.I'm attaching a screenshot of what I mean, in this case showing an
--alternative
button on a$color-primary-alt
background.I want to start making a habit of seeing whether we can bubble up at least some of our overrides into the DS, so that we can get rid of them in our repo.
Want to see what the team thinks. Thanks
Beta Was this translation helpful? Give feedback.
All reactions