Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

mat-*-button don't respect foreground color of dark theme when [color] not set #9231

Closed
mstawick opened this issue Jan 4, 2018 · 1 comment · Fixed by #9234 or #9771
Closed

mat-*-button don't respect foreground color of dark theme when [color] not set #9231

mstawick opened this issue Jan 4, 2018 · 1 comment · Fixed by #9234 or #9771
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@mstawick
Copy link

mstawick commented Jan 4, 2018

Bug, feature request, or proposal:

When using dark theme, and using 'default' color (so [color] not set), button text (or icon) is rendered black, and hover overlay is also dark. I think ripple effect is actually correct.

What is the expected behavior?

Material buttons should obey theme colors.

What is the current behavior?

The don't

What are the steps to reproduce?

Here is very simple demo:
https://stackblitz.com/edit/angular-material2-issue-t2aufv

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

Angular 5.1.2, Material 5.0.3
@crisbeto crisbeto self-assigned this Jan 4, 2018
@crisbeto crisbeto added has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Jan 4, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 4, 2018
@crisbeto
fix(button): incorrect text color when no color is passed in on dark …
cd2b6df 
…theme

Fixes buttons without a set `color` having a dark text color on a dark background, if they aren't inside a component that provides the color for them (e.g. a sidenav container).

Fixes angular#9231.
@crisbeto crisbeto mentioned this issue Jan 4, 2018
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 6, 2018
@crisbeto
fix(theming): provide text color through mat-app-background
f05850f 
Add the default foreground text color to the `.mat-app-background`, otherwise the consumer can end up with dark text on a dark background if they're using a dark theme.

Relates to angular#9231.
@crisbeto crisbeto mentioned this issue Jan 6, 2018
Merged
jelbourn pushed a commit that referenced this issue Jan 21, 2018
@crisbeto @jelbourn
fix(theming): provide text color through mat-app-background
b830384 
Add the default foreground text color to the `.mat-app-background`, otherwise the consumer can end up with dark text on a dark background if they're using a dark theme.

Relates to #9231.
jelbourn pushed a commit that referenced this issue Jan 23, 2018
@crisbeto @jelbourn
fix(button): incorrect text color when no color is passed in on dark …
6824375 
…theme (#9234)

Fixes buttons without a set `color` having a dark text color on a dark background, if they aren't inside a component that provides the color for them (e.g. a sidenav container).

Fixes #9231.
jelbourn pushed a commit that referenced this issue Jan 24, 2018
@crisbeto @jelbourn
fix(theming): provide text color through mat-app-background (#9262)
1e7eeab 
Add the default foreground text color to the `.mat-app-background`, otherwise the consumer can end up with dark text on a dark background if they're using a dark theme.

Relates to #9231.
devversion added a commit to devversion/material2 that referenced this issue Jan 27, 2018
@devversion
fix(button): no color set for flat and icon buttons
0806b29 
* Currently for flat buttons and icon buttons, the font color is not set by the theme. This can cause the text to be invisible on those buttons in a dark theme. From now on, those buttons will also receive a font color by the theme.
* Flat buttons and icon buttons inside of a `<mat-toolbar>` will inherit the font color from the toolbar row. This ensures that those buttons are looking as expected in themed toolbars (e.g. primary, accent, warn)

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
@devversion devversion mentioned this issue Jan 27, 2018
Closed
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 29, 2018
@crisbeto @jelbourn
fix(button): incorrect text color when no color is passed in on dark …
0615f1a 
…theme (angular#9234)

Fixes buttons without a set `color` having a dark text color on a dark background, if they aren't inside a component that provides the color for them (e.g. a sidenav container).

Fixes angular#9231.
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 29, 2018
@crisbeto @jelbourn
fix(theming): provide text color through mat-app-background (angular#…
6d66a16 
…9262)

Add the default foreground text color to the `.mat-app-background`, otherwise the consumer can end up with dark text on a dark background if they're using a dark theme.

Relates to angular#9231.
devversion added a commit to devversion/material2 that referenced this issue Feb 3, 2018
@devversion
fix(button): no color set for flat, stroked and icon buttons
5f96312 
* Currently for normal buttons, stroked buttons and icon buttons, the font color is not set by the theme. This can cause the text to be invisible on those buttons in a dark theme. From now on, those buttons will also receive a font color by the theme.
* Normal buttons, stroked buttons and icon buttons inside of a `<mat-toolbar>` will inherit the font color from the toolbar row. This ensures that those buttons are looking as expected in themed toolbars (e.g. primary, accent, warn)
* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)
* Cleans up the button theme while being at it

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
@devversion devversion mentioned this issue Feb 3, 2018
Merged
devversion added a commit to devversion/material2 that referenced this issue Feb 3, 2018
@devversion
fix(button): no color set for normal, stroked and icon buttons
1725324 
* Currently for normal buttons, stroked buttons and icon buttons, the font color is not set by the theme. This can cause the text to be invisible on those buttons in a dark theme. From now on, those buttons will also receive a font color by the theme.
* Normal buttons, stroked buttons and icon buttons inside of a `<mat-toolbar>` will inherit the font color from the toolbar row. This ensures that those buttons are looking as expected in themed toolbars (e.g. primary, accent, warn)
* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)
* Cleans up the button theme while being at it

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
devversion added a commit to devversion/material2 that referenced this issue Feb 7, 2018
@devversion
fix(button): no color set for normal, stroked and icon buttons
8beb133 
* Currently for normal buttons, stroked buttons and icon buttons, the font color is not set by the theme. This can cause the text to be invisible on those buttons in a dark theme. From now on, those buttons will also receive a font color by the theme.
* Normal buttons, stroked buttons and icon buttons inside of a `<mat-toolbar>` will inherit the font color from the toolbar row. This ensures that those buttons are looking as expected in themed toolbars (e.g. primary, accent, warn)
* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)
* Cleans up the button theme while being at it

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
devversion added a commit to devversion/material2 that referenced this issue Feb 10, 2018
@devversion
fix(button): theme font color being overwritten
f3b930b 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
devversion added a commit to devversion/material2 that referenced this issue Feb 10, 2018
@devversion
fix(button): theme font color being overwritten
32b234e 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes angular#4614. Fixes angular#9231. Fixes angular#9634
jelbourn pushed a commit that referenced this issue Feb 14, 2018
@devversion @jelbourn
fix(button): theme font color being overwritten
e5afb36 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes #4614. Fixes #9231. Fixes #9634
jelbourn pushed a commit that referenced this issue Mar 16, 2018
@devversion @jelbourn
fix(button): theme font color being overwritten
5f67d24 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes #4614. Fixes #9231. Fixes #9634
andrewseguin pushed a commit that referenced this issue Mar 19, 2018
@devversion @andrewseguin
fix(button): theme font color being overwritten (#9771)
c3a8d0c 
* Currently buttons with a background color (e.g. flat buttons, raised buttons, fabs) receive a font color by the theme. This font color is accidentally being overwritten by the normal button CSS that sets the `color` for every button to `inherit`. This can cause the text to be invisible in a dark theme. From now on, those buttons will no longer inherit the font color accidentally.

* Normal buttons, stroked buttons and icon buttons will still inherit the font color, because it's wrong to assume that those buttons are always placed inside of containers with the default background color. Otherwise those buttons would be invisible in some containers with a different background color (e.g. in a  themed toolbar).

* Removes the SSR check for `hasHostAttributes`. This method is essential for the color of the buttons, and needs to run inside of SSR. (now possible with Domino anyway)

* Cleans up the button theme while being at it.

Fixes #4614. Fixes #9231. Fixes #9634
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
2 participants
@mstawick @crisbeto