Update button-toggle styles

[jelbourn]

New guidance from Material Design UX:

Multiple selection uses borders between items since they are unrelated and independent. E.g., Toggling Bold does not affect Italic.
Exclusive selection does not use borders between items since they are related and dependent. E.g., Turning on left aligned means center aligned must be turned off.

Dark theme colors

background color: grey 900
Active icon: white 100%
Inactive icon: white 30%
background fill on active: white 20%

Light theme colors

Active icon: 54%
Inactive icon: 26%
background fill on active: black 12%

Guidance on disabled button-toggles is that they should look the same as regular, not selected toggle. I think this is rather confusing, and think that we should offer guidance that button-toggles should never be disabled (instead they should be hidden).

[jelbourn]

Additional notes from UX:

• button-toggles should have ripples
• The hover / focus / pressed states should behave similar to the spec behavior for dropdowns:

The spec shows these two images without clarifying:

(Exclusive selection)

(No options selected)

The new guidance is that former (background color, border, box-shadow) is meant for hover/focus/pressed state, similar to the dropdown spec:

[jelbourn]

Additional note: UX says that the dropdown-like behavior only applies to exclusive-selection button-toggle groups.

[WizardPC]

@jelbourn Toggle button will have an hover style and ripples ? Like mat-button.

I have a use case with a toolbar where some command (align, bold...) are toggles and some others are buttons (indent, increase size...).
And it's weird than toggle haven't ripple and hover because in the same toolbar all buttons look like the same, but style behavior is inconsistent...

[jelbourn]

Closing this since the latest update to the Material Design spec will supersede what's described here

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}