ui-components
ui-components copied to clipboard
Standardise hover behaviour
Throughout Weave Cloud, buttons often hover like
hoverBackground: darken(0.05, colors.somecolor)
and text links generally lighten.
Outside of that, there are quite a few random opacity changes happening throughout.
Now that button backgrounds are generally becoming darker for AA compliance with white text, we might want to consider lightening on hover instead.
Anyways, we should do a pass of noting all of these different behaviours and grouping them, just as the colors. It would be a fairly easy win.
Here's an overview of the 7 different hover styles existing in our app :
| Style | Before | After | Change | |
|---|---|---|---|---|
![]() |
Background | purple25 | purple100 | darken |
| Text | purple800 | purple900 | darken | |
![]() |
Background | purple25 | white | lighten |
| Text | black | blue700 | lighten | |
![]() |
Background | purple50 | - | none |
| Text | purple400 | purple900 | darken | |
![]() |
Background | purple25 | purple100 | darken |
| Text | purple900 | - | none | |
![]() |
Background | white | gray50 | darken |
| Text | purple900 | - | none | |
![]() |
Background | purple25 | - | none |
| Text | gray600 | 80% opacity | lighten | |
![]() |
Background | purple700 | purple400 | lighten |
| Text | white | - | none | |
![]() |
Background | purple25, close dropshadow | purple25, far dropshadow | none |
| Text | blue700 | - | none |
To summarise the color changes on hover,
| lighten | darken | none | |
|---|---|---|---|
| Background | 2 | 3 | 3 |
| Text | 2 | 2 | 4 |
Apart from existing hover behaviours, the expansion triangle of deployment images and the top Resources/History tabs are in need of hover behaviour to make them more discoverable and to match the style of the existing app. They could look like
| Existing | On hover |
|---|---|
![]() |
![]() |
![]() |
![]() |











