From 8acd775e42db65b099b7e1315f3e1579320b3b40 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 9 Jan 2020 09:49:00 -0800
Subject: [PATCH] feat(palimpsest): add ThemePicker to Header

---
 palimpsest/src/components/ThemePicker.svelte |  4 +-
 palimpsest/src/containers/Header.svelte      | 51 ++++++++++++++++++++
 2 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 palimpsest/src/containers/Header.svelte

diff --git a/palimpsest/src/components/ThemePicker.svelte b/palimpsest/src/components/ThemePicker.svelte
index baa4da4a..30b804df 100644
--- a/palimpsest/src/components/ThemePicker.svelte
+++ b/palimpsest/src/components/ThemePicker.svelte
@@ -1,14 +1,14 @@
 <script>
   import { Select, SelectItem } from 'carbon-components-svelte';
 
-  let selected = 'white';
+  let selected = 'g100';
 
   $: {
     document.documentElement.setAttribute('carbon-theme', selected);
   }
 </script>
 
-<Select inline labelText="Select Carbon Theme" bind:selected>
+<Select inline labelText="Theme" bind:selected>
   <SelectItem value="white" text="White (light)" />
   <SelectItem value="g10" text="Gray 10 (light)" />
   <SelectItem value="g90" text="Gray 90 (dark)" />
diff --git a/palimpsest/src/containers/Header.svelte b/palimpsest/src/containers/Header.svelte
new file mode 100644
index 00000000..ebfd5935
--- /dev/null
+++ b/palimpsest/src/containers/Header.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { Link } from 'carbon-components-svelte';
+  import ThemePicker from '../components/ThemePicker.svelte';
+</script>
+
+<style>
+  header {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2.5rem;
+    padding: 0 1rem;
+    background-color: var(--cds-ui-01);
+    border-bottom: 1px solid var(--cds-ui-03);
+  }
+
+  nav {
+    display: flex;
+    align-items: baseline;
+  }
+
+  .bx--link {
+    font-size: 1rem;
+    color: var(--cds-text-01);
+  }
+
+  .version {
+    font-size: 0.75rem;
+    color: var(--cds-text-02);
+    margin-left: 0.5rem;
+    margin-right: 1.5rem;
+  }
+</style>
+
+<header>
+  <nav>
+    <a class="bx--link" href="/">
+      Carbon Components
+      <strong>Svelte</strong>
+    </a>
+    <span class="version">v0.2.1</span>
+    <Link href="https://github.com/IBM/carbon-components-svelte">GitHub</Link>
+  </nav>
+  <div>
+    <ThemePicker />
+  </div>
+</header>