From 7e6a92ebd4111cc8a373e8a435db0f1f88a2ee45 Mon Sep 17 00:00:00 2001
From: fall simply <simply@fallproject.org>
Date: Wed, 2 Oct 2019 13:09:54 -0500
Subject: [PATCH 1/4] Add Third Switch to Web Components Example

---
 switch.lit.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/switch.lit.html b/switch.lit.html
index cb4409e..ee592e1 100644
--- a/switch.lit.html
+++ b/switch.lit.html
@@ -10,6 +10,7 @@
         <form>
             <mk-switch></mk-switch>
             <mk-switch name="two" checked="true" style="--switch-active: hsl(138, 48%, 48%)"></mk-switch>
+            <mk-switch name="three" style="--switch-active: hsl(34, 48%, 48%)">
             <input type="submit" value="sumbit">
         </form>
         <script src="./switch.lit.js" type="module"></script>

From 4b896abd8bc4b95a67557b05e2cc22a21d08952c Mon Sep 17 00:00:00 2001
From: fall simply <simply@fallproject.org>
Date: Wed, 2 Oct 2019 13:13:41 -0500
Subject: [PATCH 2/4] [Web Components] Use div for nub

---
 switch.lit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/switch.lit.js b/switch.lit.js
index 5a9c5b5..52f3359 100644
--- a/switch.lit.js
+++ b/switch.lit.js
@@ -16,7 +16,7 @@ class Switch extends LitElement {
         return html`
             <label class="switch" role="tab">
                 <input type="checkbox" name="${this.name}" id="nub" ?checked=${this.checked}>
-                <span class="nub"></span>
+                <div class="nub"></div>
                 <div class="switchbg"></div>
             </label>
             <link rel="stylesheet" href="https://switch.fallproject.org/switch.css">

From 43cab420ba6cee9fab29a27fdaf92d797dce559f Mon Sep 17 00:00:00 2001
From: fall simply <simply@fallproject.org>
Date: Wed, 2 Oct 2019 13:16:58 -0500
Subject: [PATCH 3/4] Change Color on third switch

---
 switch.lit.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/switch.lit.html b/switch.lit.html
index ee592e1..13a49e3 100644
--- a/switch.lit.html
+++ b/switch.lit.html
@@ -10,7 +10,7 @@
         <form>
             <mk-switch></mk-switch>
             <mk-switch name="two" checked="true" style="--switch-active: hsl(138, 48%, 48%)"></mk-switch>
-            <mk-switch name="three" style="--switch-active: hsl(34, 48%, 48%)">
+            <mk-switch name="three" style="--switch-active: hsl(205, 48%, 48%)">
             <input type="submit" value="sumbit">
         </form>
         <script src="./switch.lit.js" type="module"></script>

From 7d4d593db9d96f5daf60d03cd77c2e06627776da Mon Sep 17 00:00:00 2001
From: fall simply <simply@fallproject.org>
Date: Wed, 2 Oct 2019 13:19:07 -0500
Subject: [PATCH 4/4] Update Color

---
 switch.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/switch.css b/switch.css
index e3f7c98..afc2a03 100644
--- a/switch.css
+++ b/switch.css
@@ -17,7 +17,7 @@
 }
 .switch input:checked ~ .switchbg{
     background: var(--switch-active);
-    filter: saturate(50%) brightness(150%)
+    filter: saturate(50%) brightness(125%)
 }
 .switch input:checked ~ .nub {
     background: var(--switch-active);
@@ -51,4 +51,4 @@
     background: white;
     z-index: 1;
     box-shadow: 0px 0px 5px rgba(0,0,0,0.2)
-}
\ No newline at end of file
+}