Merge branch 'JWorthington97-demo-add-colour-snackbars'

Author: hperrin

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

@@ -0,0 +1,26 @@
+// 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';
+
+.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)
+  );
+}
+
+.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)
+  );
+}
+
+.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

@@ -0,0 +1,50 @@
+<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="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="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>Open Success Snackbar</Label>
+</Button>
+
+<Button on:click={() => snackbarWarning && snackbarWarning.open()}>
+  <Label>Open Warning Snackbar</Label>
+</Button>
+
+<Button on:click={() => snackbarError && snackbarError.open()}>
+  <Label>Open Error Snackbar</Label>
+</Button>
+
+<script lang="ts">
+  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;
+</script>

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

@@ -25,6 +25,13 @@
     Using dynamic text
   </Demo>
 
+  <Demo
+    component={Colors}
+    files={['snackbar/_Colors.svelte', 'snackbar/_Colors.scss']}
+  >
+    Colored snackbars
+  </Demo>
+
   <Demo component={Kitchen} file="snackbar/_Kitchen.svelte">
     The "Kitchen" Snackbar generator
   </Demo>
@@ -37,5 +44,6 @@
   import LeadingWithAction from './_LeadingWithAction.svelte';
   import StackedWithAction from './_StackedWithAction.svelte';
   import DynamicText from './_DynamicText.svelte';
+  import Colors from './_Colors.svelte';
   import Kitchen from './_Kitchen.svelte';
 </script>

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';