Components: Tab label opacity does not correspond to Material spec

[benelliott]

Bug, feature request, or proposal:

Tab labels are given opacity: 0.6 unless focused as per https://github.com/angular/material2/blob/master/src/lib/tabs/_tabs-common.scss#L13

What is the expected behavior?

The Material design spec makes no mention of this opacity. The closest thing I can find is the mention of "Unfocused tab color: #fff 70%", however based on the screenshots I believe they are using "unfocused" to mean "inactive", as there is no suggestion that the active tab will not have full opacity when the user is interacting with the content. This is supported later in the spec (see "App bar with tabs") where an animation shows the user interacting with tab content without the tab label opacity changing.

What is the current behavior?

Active tab labels are translucent when not focused.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-yxcskn

What is the use-case or motivation for changing an existing behavior?

The implementation is not aligned with the spec, and the opacity rule can cause legibility issues when using a lighter font than Roboto.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Latest StackBlitz, Chrome 64, Windows 10

Is there anything else we should know?

I would suggest applying opacity: 1 on any active tab label.

[gtranter]

IMO, the fix being implemented is still wrong. All tab labels should be fully opaque (opacity: 1), not just that active tab.

The spec only describes colors for tab groups with a colored background (i.e. 'mat-background-*'). In this light, "#fff 70%" should be recognized as the 'secondary-text' foreground color for dark themes. Therefore, for light themes, the unfocused tab text color should also the secondary text color - 54% black. At present, the color is 'text' or 87% black combined with .6 opacity. This is close to but not quite as dark as 54%.

My recommendation is to remove the .6 opacity setting from all tab labels and set the text color appropriately: theme color for active, 'secondary-text' for other tabs, 'disabled-text' for disabled tabs.

Additionally, the _active_ tab text color is not properly implemented according to the spec. It should be the theme's accent color (or #fff for dark/colored backgrounds), and be assignable as primary or warn color using color="primary" (or "warn") on mat-tab-group. It is currently just the foreground 'text' color, and does not respond to the color assignment. The active tab ink bar and focus highlight background are currently using the primary color - that should also be changed to accent or assignable to match the active text color.

[salemdar]

Any update on the issue?

[jelbourn]

Duplicate of #2058

[angular-automatic-lock-bot[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._}