Unify and rename the toolbar button style
Categories
(Thunderbird :: Theme, enhancement)
Tracking
(Not tracked)
People
(Reporter: aleca, Unassigned)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
This is a proposal to improve and unify the style of our toolbar buttons across the various tabs, views, and dialogs.
Class rename
I'd like to rename the class from the generic and non intuitive .toolbarbutton-1
, to something more semantically correct, like .button-toolbar
.
Using this naming format will allow us to introduce modifiers classes and keep the CSS declarations semantically and contextually correct, and easy to understand.
Eg:
Base class: .button-toolbar
With borders: .button-toolbar .button-toolbar--bordered
Without borders on hover: .button-toolbar .button-toolbar--hover-flat
Style unification
We currently have some styling inconsistencies based on where a button is located. Hover, focused, and checked/selected styles are different between buttons in the Main Toolbar, the Compose Editor Toolbar, the Today Pane Toolbar, and so on.
We should treat all the toolbar buttons with the same exact style.
Here's a mock-up with some styling, pretty similar to what we have now, but with some small tweaks to the contrast.
Comment 1•4 years ago
|
||
Comment on attachment 9182474 [details]
Toolbar Style.png
(In reply to Alessandro Castellani (:aleca) from comment #0)
Created attachment 9182474 [details]
Toolbar Style.pngThis is a proposal to improve and unify the style of our toolbar buttons across the various tabs, views, and dialogs.
Class rename
I'd like to rename the class from the generic and non intuitive.toolbarbutton-1
, to something more semantically correct, like.button-toolbar
.
Using this naming format will allow us to introduce modifiers classes and keep the CSS declarations semantically and contextually correct, and easy to understand.
Eg:
Base class:.button-toolbar
With borders:.button-toolbar .button-toolbar--bordered
Without borders on hover:.button-toolbar .button-toolbar--hover-flat
Sounds logical. But use only one dash: .button-toolbar-bordered
and .button-toolbar-hover-flat
. Maybe the second needs only to be named .button-toolbar-flat
.
Style unification
We currently have some styling inconsistencies based on where a button is located. Hover, focused, and checked/selected styles are different between buttons in the Main Toolbar, the Compose Editor Toolbar, the Today Pane Toolbar, and so on.We should treat all the toolbar buttons with the same exact style.
Here's a mock-up with some styling, pretty similar to what we have now, but with some small tweaks to the contrast.
I think on the dark theme the :hover:active style (the "Get Messages" button) should look different to the checked state. To look like before the unification.
Maybe we should also look if the checked button should get a inset box-shadow to mimic a recessed button (something like the light button but without the background-color).
Reporter | ||
Comment 2•2 years ago
|
||
This is something we will need to tackle in the design system for 114.
Reporter | ||
Comment 4•1 year ago
|
||
Indeed, fixed by bug 1814272
Description
•