docs: update colored snackbar demo to use mixins and material palette

Author: hperrin

packages/site/src/routes/demo/snackbar/_Colors.scss

@@ -1,13 +1,26 @@
-// Add the below to your _smui-theme.scss file
+// See https://github.com/material-components/material-components-web/blob/v13.0.0/packages/mdc-snackbar/
+@use '@material/snackbar/mixins';
+// See https://github.com/material-components/material-components-web/blob/v13.0.0/packages/mdc-theme/
+@use '@material/theme/color-palette';
+@use '@material/theme/theme-color';
 
-.success .mdc-snackbar__surface {
-  background-color: green;
+.mdc-snackbar.demo-success {
+  @include mixins.fill-color(color-palette.$green-500);
+  @include mixins.label-ink-color(
+    theme-color.accessible-ink-color(color-palette.$green-500)
+  );
 }
 
-.warning .mdc-snackbar__surface {
-  background-color: orange;
+.mdc-snackbar.demo-warning {
+  @include mixins.fill-color(color-palette.$orange-500);
+  @include mixins.label-ink-color(
+    theme-color.accessible-ink-color(color-palette.$orange-500)
+  );
 }
 
-.error .mdc-snackbar__surface {
-  background-color: red;
+.mdc-snackbar.demo-error {
+  @include mixins.fill-color(color-palette.$red-500);
+  @include mixins.label-ink-color(
+    theme-color.accessible-ink-color(color-palette.$red-500)
+  );
 }

packages/site/src/routes/demo/snackbar/_Colors.svelte

@@ -1,48 +1,50 @@
-<Snackbar bind:this={snackbarSuccess} class="success">
-  <Label>{snackbarText}</Label>
+<Snackbar bind:this={snackbarSuccess} class="demo-success">
+  <Label
+    >That thing you tried to do actually worked, if you can believe it!</Label
+  >
   <Actions>
     <IconButton class="material-icons" title="Dismiss">close</IconButton>
   </Actions>
 </Snackbar>
 
-<Snackbar bind:this={snackbarWarning} class="warning">
-  <Label>{snackbarText}</Label>
+<Snackbar bind:this={snackbarWarning} class="demo-warning">
+  <Label
+    >Ok, it looks like that thing you tried to do might not have work.</Label
+  >
   <Actions>
     <IconButton class="material-icons" title="Dismiss">close</IconButton>
   </Actions>
 </Snackbar>
 
-<Snackbar bind:this={snackbarError} class="error">
-  <Label>{snackbarText}</Label>
+<Snackbar bind:this={snackbarError} class="demo-error">
+  <Label
+    >That thing you tried to do didn't work. Honestly, I'm not sure why you even
+    tried.</Label
+  >
   <Actions>
     <IconButton class="material-icons" title="Dismiss">close</IconButton>
   </Actions>
 </Snackbar>
 
 <Button on:click={() => snackbarSuccess && snackbarSuccess.open()}>
-  <Label style="color:green">Open Snackbar Success</Label>
+  <Label>Open Success Snackbar</Label>
 </Button>
 
 <Button on:click={() => snackbarWarning && snackbarWarning.open()}>
-  <Label style="color:orange">Open Snackbar Warning</Label>
+  <Label>Open Warning Snackbar</Label>
 </Button>
 
 <Button on:click={() => snackbarError && snackbarError.open()}>
-  <Label style="color:red">Open Snackbar Error</Label>
+  <Label>Open Error Snackbar</Label>
 </Button>
 
 <script lang="ts">
-  import Snackbar, {
-    Label,
-    Actions,
-    SnackbarComponentDev,
-  } from '@smui/snackbar';
+  import type { SnackbarComponentDev } from '@smui/snackbar';
+  import Snackbar, { Label, Actions } from '@smui/snackbar';
   import IconButton from '@smui/icon-button';
   import Button from '@smui/button';
 
   let snackbarSuccess: SnackbarComponentDev;
   let snackbarWarning: SnackbarComponentDev;
   let snackbarError: SnackbarComponentDev;
-
-  let snackbarText = 'Snackbar Text';
 </script>

packages/site/src/routes/demo/snackbar/index.svelte

@@ -25,7 +25,10 @@
     Using dynamic text
   </Demo>
 
-  <Demo component={Colors} file="snackbar/_Colors.svelte">
+  <Demo
+    component={Colors}
+    files={['snackbar/_Colors.svelte', 'snackbar/_Colors.scss']}
+  >
     Colored snackbars
   </Demo>
 

packages/site/src/site.scss

@@ -27,4 +27,5 @@
 @use './routes/demo/linear-progress/_Colored.scss' as linear-progress-colored;
 @use './routes/demo/menu-surface/_ManualAnchor.scss';
 @use './routes/demo/paper/_CustomColor.scss' as paper-custom-color;
+@use './routes/demo/snackbar/_Colors.scss';
 @use './routes/demo/typography/_Typography.scss';