From 4ae51209aa579c21d848c2067fae1f1c5ce0626c Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 12 Jan 2020 12:55:21 -0800
Subject: [PATCH 1/5] docs(palimpsest): support dark mode, local storage for
 theming

---
 palimpsest/src/components/ThemePicker.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/palimpsest/src/components/ThemePicker.svelte b/palimpsest/src/components/ThemePicker.svelte
index 95ea2c7a..4f4ed797 100644
--- a/palimpsest/src/components/ThemePicker.svelte
+++ b/palimpsest/src/components/ThemePicker.svelte
@@ -1,9 +1,26 @@
 <script>
   export let inline = false;
 
+  import { onMount, afterUpdate } from 'svelte';
   import { Select, SelectItem } from 'carbon-components-svelte';
   import { theme } from '../store';
 
+  onMount(() => {
+    let currentTheme = localStorage.getItem('theme');
+
+    if (currentTheme) {
+      theme.set(currentTheme);
+    } else {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        theme.set('g90');
+      }
+    }
+  });
+
+  afterUpdate(() => {
+    localStorage.setItem('theme', $theme);
+  });
+
   $: {
     document.documentElement.setAttribute('carbon-theme', $theme);
   }

From 1802d963acee3a9b14595df465c0b7e1870ccb13 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 20 Jan 2020 16:51:34 -0800
Subject: [PATCH 2/5] style(palimpsest): revise styles

---
 palimpsest/src/components/ButtonTile.svelte   |  2 +-
 .../src/components/Component/Component.svelte |  2 +-
 palimpsest/src/components/Home.svelte         | 49 +++++++++++--------
 palimpsest/src/components/SideNav.svelte      |  9 +++-
 4 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/palimpsest/src/components/ButtonTile.svelte b/palimpsest/src/components/ButtonTile.svelte
index c4555751..c4022589 100644
--- a/palimpsest/src/components/ButtonTile.svelte
+++ b/palimpsest/src/components/ButtonTile.svelte
@@ -36,7 +36,7 @@
   .icon {
     position: absolute;
     bottom: 1rem;
-    fill: var(--cds-ui-05);
+    fill: var(--cds-icon-01);
   }
 
   .icon--left {
diff --git a/palimpsest/src/components/Component/Component.svelte b/palimpsest/src/components/Component/Component.svelte
index 87d05cd1..fbb7ba30 100644
--- a/palimpsest/src/components/Component/Component.svelte
+++ b/palimpsest/src/components/Component/Component.svelte
@@ -60,7 +60,7 @@
 <style>
   main {
     margin-top: 5rem;
-    padding-left: 12rem;
+    padding-left: 16rem;
     padding-bottom: 2.5rem;
   }
 
diff --git a/palimpsest/src/components/Home.svelte b/palimpsest/src/components/Home.svelte
index 7da77956..6fa68dd2 100644
--- a/palimpsest/src/components/Home.svelte
+++ b/palimpsest/src/components/Home.svelte
@@ -4,14 +4,14 @@
   import ButtonTile from './ButtonTile.svelte';
 
   $: {
-    document.title = `Carbon Components Svelte`;
+    document.title = 'Carbon Components Svelte';
   }
 </script>
 
 <style>
   main {
-    margin-top: 5rem;
-    padding-left: 12rem;
+    margin-top: 2.5rem;
+    padding-left: 16rem;
     padding-bottom: 2.5rem;
   }
 
@@ -21,6 +21,11 @@
     }
   }
 
+  .banner {
+    background: var(--cds-ui-01);
+    padding: 2.5rem 0 1.5rem;
+  }
+
   .bx--grid {
     max-width: 66rem;
   }
@@ -41,31 +46,35 @@
   }
 
   h3 {
-    margin-top: 4rem;
+    margin-top: 2.5rem;
     margin-bottom: 1.5rem;
     font-size: 1.5rem;
   }
 </style>
 
 <main>
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col">
-        <img src={Logo} alt="Logo" class="logo" />
-        <h1>
-          <span>
-            <strong>Carbon</strong>
-          </span>
-          <span>
-            <strong>Components</strong>
-          </span>
-          <span>
-            <strong>Svelte</strong>
-          </span>
-        </h1>
-        <p>The Carbon Design System implemented in Svelte</p>
+  <div class="banner">
+    <div class="bx--grid">
+      <div class="bx--row">
+        <div class="bx--col">
+          <img src={Logo} alt="Logo" class="logo" />
+          <h1>
+            <span>
+              <strong>Carbon</strong>
+            </span>
+            <span>
+              <strong>Components</strong>
+            </span>
+            <span>
+              <strong>Svelte</strong>
+            </span>
+          </h1>
+          <h3>The Carbon Design System implemented in Svelte.</h3>
+        </div>
       </div>
     </div>
+  </div>
+  <div class="bx--grid">
     <div class="bx--row">
       <div class="bx--col">
         <h3>Packages</h3>
diff --git a/palimpsest/src/components/SideNav.svelte b/palimpsest/src/components/SideNav.svelte
index cc9438b1..8be80aac 100644
--- a/palimpsest/src/components/SideNav.svelte
+++ b/palimpsest/src/components/SideNav.svelte
@@ -30,7 +30,7 @@
     z-index: 9999;
     top: 2.5rem;
     left: 0;
-    width: 12rem;
+    width: 16rem;
     height: calc(100% - 2.5rem);
     background-color: var(--cds-ui-01);
     overflow-y: scroll;
@@ -110,7 +110,12 @@
   }} />
 
 <nav class:toggled={$sideNavToggled}>
-  <Search small id="search-components" labelText="Components" bind:value />
+  <Search
+    small
+    id="search-components"
+    labelText="Components"
+    placeholder="Search components..."
+    bind:value />
   <ul>
     {#each results as { name }, i (name)}
       <li>

From 45f3a8ca6588a53c003d28957775c4e5a2c7a381 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 20 Jan 2020 16:52:06 -0800
Subject: [PATCH 3/5] refactor(theme-picker): use two-way binding

---
 palimpsest/src/components/ThemePicker.svelte | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/palimpsest/src/components/ThemePicker.svelte b/palimpsest/src/components/ThemePicker.svelte
index 4f4ed797..bc390f85 100644
--- a/palimpsest/src/components/ThemePicker.svelte
+++ b/palimpsest/src/components/ThemePicker.svelte
@@ -19,20 +19,11 @@
 
   afterUpdate(() => {
     localStorage.setItem('theme', $theme);
-  });
-
-  $: {
     document.documentElement.setAttribute('carbon-theme', $theme);
-  }
+  });
 </script>
 
-<Select
-  {inline}
-  labelText="Theme"
-  selected={$theme}
-  on:change={({ detail }) => {
-    theme.set(detail);
-  }}>
+<Select {inline} labelText="Theme" bind:selected={$theme}>
   <SelectItem value="white" text="White" />
   <SelectItem value="g10" text="Gray 10" />
   <SelectItem value="g90" text="Gray 90" />

From 6a97175f757dfbfcb9a74c8f38005af39379bec6 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 20 Jan 2020 16:52:36 -0800
Subject: [PATCH 4/5] fix(select): update selected prop after update

---
 src/components/Select/Select.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Select/Select.svelte b/src/components/Select/Select.svelte
index a490d73c..c3b5c941 100644
--- a/src/components/Select/Select.svelte
+++ b/src/components/Select/Select.svelte
@@ -14,7 +14,7 @@
   export let selected = undefined;
   export let style = undefined;
 
-  import { createEventDispatcher, setContext } from 'svelte';
+  import { createEventDispatcher, setContext, afterUpdate } from 'svelte';
   import { writable } from 'svelte/store';
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
   import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
@@ -26,12 +26,13 @@
 
   setContext('Select', { selectedValue });
 
+  afterUpdate(() => {
+    selected = $selectedValue;
+    dispatch('change', $selectedValue);
+  });
+
   $: errorId = `error-${id}`;
   $: selectedValue.set(selected);
-  $: selected = $selectedValue;
-  $: {
-    dispatch('change', $selectedValue);
-  }
 </script>
 
 <div class={cx('--form-item')} {style}>
@@ -85,7 +86,6 @@
           aria-describedby={invalid ? errorId : undefined}
           disabled={disabled || undefined}
           aria-invalid={invalid || undefined}
-          on:change
           on:change={({ target }) => {
             selectedValue.set(target.value);
           }}

From 9824b7458ef226b7dc18dbffdddd1f6783a84a1e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 20 Jan 2020 16:53:06 -0800
Subject: [PATCH 5/5] fix(select-item): remove condition in selectedValue
 subscription

---
 src/components/Select/SelectItem.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Select/SelectItem.svelte b/src/components/Select/SelectItem.svelte
index 8cf63f6e..c04fb683 100644
--- a/src/components/Select/SelectItem.svelte
+++ b/src/components/Select/SelectItem.svelte
@@ -15,9 +15,7 @@
   let selected = false;
 
   ctx.selectedValue.subscribe(currentValue => {
-    if (currentValue === value) {
-      selected = true;
-    }
+    selected = currentValue === value;
   });
 </script>