Material-components-web: [mdc-snackbar] Snackbar actions are not using a theme color

Created on 18 Mar 2020  路  1Comment  路  Source: material-components/material-components-web

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.

bug

Most helpful comment

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.

>All comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

m-alzam picture m-alzam  路  3Comments

traviskaufman picture traviskaufman  路  3Comments

yapryntsev picture yapryntsev  路  3Comments

AbuMareBear picture AbuMareBear  路  3Comments

cintaccs picture cintaccs  路  3Comments