material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.15k forks source link

[mdc-snackbar] Snackbar actions are not using a theme color #5726

Open kimurakenshi opened 4 years ago

kimurakenshi commented 4 years ago

Bug report

Snackbar actions are using a custom color that is not part of the theme color palette. Due to this implementation a custom theme cannot be created without introducing a new color that would be specific for this component.

Steps to reproduce

  1. https://github.com/material-components/material-components-web/blob/master/packages/mdc-snackbar/_variables.scss#L29 is defining the action color for actions inside a snackbar:
$action-ink-color: #bb86fc !default;
  1. https://github.com/material-components/material-components-web/blob/master/packages/mdc-snackbar/_mixins.scss#L169 is setting the button color to $action-ink-color:
.mdc-snackbar__action {
    @include button-mixins.ink-color(variables.$action-ink-color, $query: $query);
    @include ripple-mixins.states(variables.$action-ink-color, $query: $query);
  }
  1. Based on the changes listed above we can see snackbar is not using a theme color to define the text color of its actions.

Actual behavior

Actions text color is defined in snackbar variables.

Expected behavior

Actions text color should be set using a theme color.

Additional context

I kind of understand the reasoning behind having this custom color specific to snackbar and i believe this was needed due to the snackbar background color that is black and the default light theme primary color would not pass an accessibility check. However, the current implementation doesn't allow us to use the theme color palette across components in a consistent way if we have exceptions like this.

joyzhong commented 4 years ago

Thanks for reporting! Added to backlog.

In go/material-params, snackbar's action button text is set to "PrimaryVariant2". However, this is not a valid value in MDC Web theming currently, nor is it mentioned in the theming spec.

AI: Check with design to see status of "primary variants" with regards to theming.