Closed Bug 1672005 Opened 4 years ago Closed 1 year ago

Unify and rename the toolbar button style

Categories

(Thunderbird :: Theme, enhancement)

enhancement

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 1814272

People

(Reporter: aleca, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

Attached image Toolbar Style.png

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.

Attachment #9182474 - Flags: feedback?(richard.marti)

Comment on attachment 9182474 [details]
Toolbar Style.png

(In reply to Alessandro Castellani (:aleca) from comment #0)

Created attachment 9182474 [details]
Toolbar Style.png

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

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).

Attachment #9182474 - Flags: feedback?(richard.marti) → feedback+

This is something we will need to tackle in the design system for 114.

Blocks: tb-super-css

obsolete?

Flags: needinfo?(alessandro)

Indeed, fixed by bug 1814272

Status: NEW → RESOLVED
Closed: 1 year ago
Duplicate of bug: 1814272
Flags: needinfo?(alessandro)
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: