chore(examples): add sapper set-up

examples/sapper/src/components/Header.svelte

@@ -0,0 +1,37 @@
+<script>
+  export let segment = undefined;
+
+  import {
+    SkipToContent,
+    Header,
+    HeaderUtilities,
+    HeaderGlobalAction,
+  } from "carbon-components-svelte";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
+  import { getContext } from "svelte";
+
+  const ctx = getContext("Theme");
+
+  $: if (ctx) {
+    ctx.dark.subscribe((value) => {
+      console.log("dark mode?", value);
+    });
+    ctx.light.subscribe((value) => {
+      console.log("light mode?", value);
+    });
+    ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
+  }
+</script>
+
+<Header company="IBM" platformName="Carbon Components Svelte" href="/">
+  <div slot="skip-to-content">
+    <SkipToContent />
+  </div>
+  <HeaderUtilities>
+    <HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
+    <HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
+    <HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
+  </HeaderUtilities>
+</Header>

examples/sapper/src/components/Nav.svelte

@@ -0,0 +1,73 @@
+<script>
+  export let segment;
+</script>
+
+<style>
+  nav {
+    border-bottom: 1px solid rgba(255, 62, 0, 0.1);
+    font-weight: 300;
+    padding: 0 1em;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* clearfix */
+  ul::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  li {
+    display: block;
+    float: left;
+  }
+
+  [aria-current] {
+    position: relative;
+    display: inline-block;
+  }
+
+  [aria-current]::after {
+    position: absolute;
+    content: "";
+    width: calc(100% - 1em);
+    height: 2px;
+    background-color: rgb(255, 62, 0);
+    display: block;
+    bottom: -1px;
+  }
+
+  a {
+    text-decoration: none;
+    padding: 1em 0.5em;
+    display: block;
+  }
+</style>
+
+<nav>
+  <ul>
+    <li>
+      <a
+        aria-current="{segment === undefined ? 'page' : undefined}"
+        href=".">home</a>
+    </li>
+    <li>
+      <a
+        aria-current="{segment === 'about' ? 'page' : undefined}"
+        href="about">about</a>
+    </li>
+
+    <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+		     the blog data when we hover over the link or tap it on a touchscreen -->
+    <li>
+      <a
+        rel="prefetch"
+        aria-current="{segment === 'blog' ? 'page' : undefined}"
+        href="blog">blog</a>
+    </li>
+  </ul>
+</nav>

examples/sapper/src/components/Theme.svelte

@@ -0,0 +1,74 @@
+<script>
+  export let persist = false;
+  export let persistKey = "theme";
+  export let theme = "white";
+  export const themes = ["white", "g10", "g90", "g100"];
+
+  import { onMount, afterUpdate, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const isValidTheme = (value) => themes.includes(value);
+  const isDark = (value) =>
+    isValidTheme(value) && (value === "g90" || value === "g100");
+
+  const carbon_theme = writable(theme);
+  const dark = writable(isDark(theme));
+  const light = derived(dark, (_) => !_);
+
+  const unsubscribe = carbon_theme.subscribe((value) => {
+    theme = value;
+  });
+
+  let _document = null;
+
+  setContext("Theme", {
+    updateVar: (name, value) => {
+      if (_document != null) {
+        _document.documentElement.style.setProperty(name, value);
+      }
+    },
+    carbon_theme,
+    dark,
+    light,
+  });
+
+  onMount(() => {
+    _document = window.document;
+
+    try {
+      const persisted_theme = localStorage.getItem(persistKey);
+
+      if (isValidTheme(persisted_theme)) {
+        carbon_theme.set(persisted_theme);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    return () => {
+      unsubscribe();
+    };
+  });
+
+  afterUpdate(() => {
+    if (isValidTheme(theme)) {
+      if (_document != null) {
+        _document.documentElement.setAttribute("theme", theme);
+      }
+
+      if (persist) {
+        localStorage.setItem(persistKey, theme);
+      }
+    } else {
+      console.warn(
+        `"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
+          themes
+        )}`
+      );
+    }
+  });
+
+  $: dark.set(isDark(theme));
+</script>
+
+<slot />