Issue with @smui/snackbar

[varghesethomase]

Describe the bug As multiple people face the same issue as shown in the stack overflow thread, it seems like the example given here on how to have multiple variants of the snackbar eg: success, error and warning is broken. As shown in the figure below, on trying to compile sass, it errors.

To Reproduce Steps to reproduce the behavior:

1. Go to the _smui_theme.scss file
2. Add the following:

   
   @use '@material/snackbar/index' as snackabar;

.mdc-snackbar.snackbar--success { @include snackabar.fill-color(color-palette.$green-900); @include snackabar.label-ink-color(theme.accessible-ink-color(color-palette.$green-900)); }

.mdc-snackbar.snackbar--warning { @include snackabar.fill-color(color-palette.$orange-900); @include snackabar.label-ink-color(theme.accessible-ink-color(color-palette.$orange-900)); }

.mdc-snackbar.snackbar--error { @include snackabar.fill-color(color-palette.$red-900); @include snackabar.label-ink-color(theme.accessible-ink-color(color-palette.$red-900)); }

4. Compile using `npm run smui-theme`
5. See  the error

**Expected behavior**
The error is not shown but the scss compiles

**Screenshots**
<img width="894" alt="image" src="https://user-images.githubusercontent.com/5429756/221502827-7478b509-9363-4be1-9540-c937c1754dab.png">

**Desktop (please complete the following information):**
 - OS: [MacOS]

[drewsilcock]

Here's my workaround that bypasses the nice Snackbar mixins and just hardcodes the colours:

.mdc-snackbar.snackbar--success .mdc-snackbar__surface {
  background-color: color-palette.$green-500;
}

.mdc-snackbar.snackbar--success .mdc-snackbar__surface .mdc-snackbar__label,
.mdc-snackbar.snackbar--success .mdc-snackbar__surface .mdc-snackbar__actions .mdc-snackbar__dismiss {
  color: black;
}

.mdc-snackbar.snackbar--warning .mdc-snackbar__surface {
  background-color: color-palette.$orange-500;
}

.mdc-snackbar.snackbar--warning .mdc-snackbar__surface .mdc-snackbar__label,
.mdc-snackbar.snackbar--warning .mdc-snackbar__surface .mdc-snackbar__actions .mdc-snackbar__dismiss {
  color: black;
}

.mdc-snackbar.snackbar--error .mdc-snackbar__surface {
  background-color: color-palette.$red-500;
}

.mdc-snackbar.snackbar--error .mdc-snackbar__surface .mdc-snackbar__label,
.mdc-snackbar.snackbar--error .mdc-snackbar__surface .mdc-snackbar__actions .mdc-snackbar__dismiss {
  color: white;
}

[hperrin]

The problem is the import order of Sass. You need to make sure that your custom color import comes after the default SMUI imports. You can do this by adding this line before your custom color code:

@use '@smui/snackbar/style' as smui-snackabar;

So your file would look like this:

@use '@smui/snackbar/style' as smui-snackabar;
@use '@material/snackbar/index' as snackabar;

.mdc-snackbar.snackbar--success {
  @include snackabar.fill-color(color-palette.$green-900);
  @include snackabar.label-ink-color(theme.accessible-ink-color(color-palette.$green-900));
}

.mdc-snackbar.snackbar--warning {
  @include snackabar.fill-color(color-palette.$orange-900);
  @include snackabar.label-ink-color(theme.accessible-ink-color(color-palette.$orange-900));
}

.mdc-snackbar.snackbar--error {
  @include snackabar.fill-color(color-palette.$red-900);
  @include snackabar.label-ink-color(theme.accessible-ink-color(color-palette.$red-900));
}

The ensures that SMUI's import happens first.

This is definitely an issue with my documentation though, so it should be fixed.