From d47d2c917aa19bc525ae9979ac59eda30a3038f8 Mon Sep 17 00:00:00 2001
From: IshiniAvindya <ishiniavindya2000@gmail.com>
Date: Tue, 2 Jan 2024 09:18:02 +0100
Subject: [PATCH 1/2] button updates fixes #71

Along with #70
---
 src/lib/components/Button/Button.svelte |  93 ++++++++++++------
 src/routes/[[slug]]/docs/Button.svelte  | 120 ++++++++++++++----------
 2 files changed, 135 insertions(+), 78 deletions(-)

diff --git a/src/lib/components/Button/Button.svelte b/src/lib/components/Button/Button.svelte
index f61b1a22..88c66561 100644
--- a/src/lib/components/Button/Button.svelte
+++ b/src/lib/components/Button/Button.svelte
@@ -7,9 +7,10 @@
         'green' |
         'red' |
         'blue' |
-        'orange' = 'accent';
+        'orange' |
+        'input' = 'accent';
     export let block : boolean = false;
-    export let variant : 'fill' | 'outline' | 'invisible' | 'outline-fill' = 'fill';
+    export let variant : 'fill' | 'fill-light ' | 'outline' | 'invisible' | 'outline-fill' = 'fill';
     export let align: 'start' | 'center' = 'center';
 </script>
 
@@ -160,14 +161,6 @@
         }
     }
 
-    /* styles */
-    /* .button.accent {
-        background-color: var(--accent);
-        color: var(--accent-text);
-        transition: .2s box-shadow;
-        --local-hover-shadow-color: var(--accent-light);
-    } */
-
     .button {
         &.fill {
             &.accent {
@@ -177,6 +170,57 @@
                 --local-hover-shadow-color: var(--accent-light);
             }
 
+            &.gray {
+                background-color: var(--gray-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--gray-light);
+            }
+
+            &.green {
+                background-color: var(--green-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--green-light);
+            }
+
+            &.red {
+                background-color: var(--red-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--red-light);
+            }
+
+            &.blue {
+                background-color: var(--blue-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--blue-light);
+            }
+
+            &.orange {
+                background-color: var(--orange-dark);
+                color: var(--text-white);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--orange-light);
+            }
+
+            &.input {
+                background-color: var(--input);
+                color: var(--text);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--input-hover);
+            }
+        }
+
+        &.fill-light {
+            &.accent {
+                background-color: var(--accent-light);
+                color: var(--accent);
+                transition: .2s box-shadow;
+                --local-hover-shadow-color: var(--accent-lightest);
+            }
+
             &.gray {
                 background-color: var(--gray-light);
                 color: var(--gray-dark);
@@ -315,6 +359,7 @@
                 transition: .2s box-shadow;
                 --local-hover-shadow-color: var(--orange-light);
             }
+
         }
 
         &.invisible {
@@ -370,22 +415,17 @@
                     color: var(--orange-dark);
                 }
             }
+
+            &.input {
+                &:hover {
+                    background-color: var(--input);
+                    box-shadow: none!important;
+                    color: var(--text);
+                }
+            }
         }
     }
 
-    .button.soft {
-        background-color: var(--accent-light);
-        color: var(--accent);
-        transition: .2s box-shadow;
-        --local-hover-shadow-color: #eee;
-    }
-    
-    .button.light {
-        background-color: #f5f5f5;
-        color: var(--text);
-        transition: .2s box-shadow;
-        --local-hover-shadow-color: var(--accent-light);
-    }
     :global(:root.dark) .button.light {
         background-color: #2e2e2e;
     }
@@ -400,13 +440,6 @@
         }
     }
 
-    .button.danger {
-        background-color: var(--red-dark);
-        color: var(--text-white);
-        transition: .2s box-shadow;
-        --local-hover-shadow-color: var(--red-light);
-    }
-
     /*Styles for button disabled state*/
     .button[disabled] {
         cursor: not-allowed;
diff --git a/src/routes/[[slug]]/docs/Button.svelte b/src/routes/[[slug]]/docs/Button.svelte
index a2fc3eb2..254dc15c 100644
--- a/src/routes/[[slug]]/docs/Button.svelte
+++ b/src/routes/[[slug]]/docs/Button.svelte
@@ -120,81 +120,105 @@ All other properties will be forwarded to the underlying element.
 <h4>Fill</h4>
 
 <CodeBlock code={`
-    <Button color="accent" variant="fill">Fill Button</Button>
-    <Button color="gray" variant="fill">Fill Button</Button>
-    <Button color="green" variant="fill">Fill Button</Button>
-    <Button color="red" variant="fill">Fill Button</Button>
-    <Button color="blue" variant="fill">Fill Button</Button>
-    <Button color="orange" variant="fill">Fill Button</Button>
+    <Button color="accent" variant="fill">Fill Accent</Button>
+    <Button color="gray" variant="fill">Fill Gray</Button>
+    <Button color="green" variant="fill">Fill Green</Button>
+    <Button color="red" variant="fill">Fill Red</Button>
+    <Button color="blue" variant="fill">Fill Blue</Button>
+    <Button color="orange" variant="fill">Fill Orange</Button>
+    <Button color="input" variant="fill">Fill Button</Button>
 `} />
 
 <CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
-    <Button color="accent" variant="fill">Fill Button</Button>
-    <Button color="gray" variant="fill">Fill Button</Button>
-    <Button color="green" variant="fill">Fill Button</Button>
-    <Button color="red" variant="fill">Fill Button</Button>
-    <Button color="blue" variant="fill">Fill Button</Button>
-    <Button color="orange" variant="fill">Fill Button</Button>
+    <Button color="accent" variant="fill">Fill Accent</Button>
+    <Button color="gray" variant="fill">Fill Gray</Button>
+    <Button color="green" variant="fill">Fill Green</Button>
+    <Button color="red" variant="fill">Fill Red</Button>
+    <Button color="blue" variant="fill">Fill Blue</Button>
+    <Button color="orange" variant="fill">Fill Orange</Button>
+    <Button color="input" variant="fill">Fill Input</Button>
+</CodeResult>
+
+<h4>Fill-Light</h4>
+
+<CodeBlock code={`
+    <Button color="accent" variant="fill-light">Fill Accent</Button>
+    <Button color="gray" variant="fill-light">Fill Gray</Button>
+    <Button color="green" variant="fil-light">Fill Green</Button>
+    <Button color="red" variant="fill-light">Fill Red</Button>
+    <Button color="blue" variant="fill-light">Fill Blue</Button>
+    <Button color="orange" variant="fill-light">Fill Orange</Button>
+`} />
+
+<CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
+    <Button color="accent" variant="fill-light">Fill Accent</Button>
+    <Button color="gray" variant="fill-light">Fill Gray</Button>
+    <Button color="green" variant="fill-light">Fill Green</Button>
+    <Button color="red" variant="fill-light">Fill Red</Button>
+    <Button color="blue" variant="fill-light">Fill Blue</Button>
+    <Button color="orange" variant="fill-light">Fill Orange</Button>
 </CodeResult>
 
 <h4>Outline</h4>
 
 <CodeBlock code={`
-    <Button color="accent" variant="outline">Outline Button</Button>
-    <Button color="gray" variant="outline">Outline Button</Button>
-    <Button color="green" variant="outline">Outline Button</Button>
-    <Button color="red" variant="outline">Outline Button</Button>
-    <Button color="blue" variant="outline">Outline Button</Button>
-    <Button color="orange" variant="outline">Outline Button</Button>
+    <Button color="accent" variant="outline">Outline Accent</Button>
+    <Button color="gray" variant="outline">Outline Gray</Button>
+    <Button color="green" variant="outline">Outline Green</Button>
+    <Button color="red" variant="outline">Outline Red</Button>
+    <Button color="blue" variant="outline">Outline Blue</Button>
+    <Button color="orange" variant="outline">Outline Orange</Button>
 `} />
 
 <CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
-    <Button color="accent" variant="outline">Outline Button</Button>
-    <Button color="gray" variant="outline">Outline Button</Button>
-    <Button color="green" variant="outline">Outline Button</Button>
-    <Button color="red" variant="outline">Outline Button</Button>
-    <Button color="blue" variant="outline">Outline Button</Button>
-    <Button color="orange" variant="outline">Outline Button</Button>
+    <Button color="accent" variant="outline">Outline Accent</Button>
+    <Button color="gray" variant="outline">Outline Gray</Button>
+    <Button color="green" variant="outline">Outline Green</Button>
+    <Button color="red" variant="outline">Outline Red</Button>
+    <Button color="blue" variant="outline">Outline Blue</Button>
+    <Button color="orange" variant="outline">Outline Orange</Button>
 </CodeResult>
 
 <h4>Outline Fill</h4>
 
 <CodeBlock code={`
-    <Button color="accent" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="gray" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="green" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="red" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="blue" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="orange" variant="outline-fill">Outline-fill Button</Button>
+    <Button color="accent" variant="outline-fill">Outline-fill Accent</Button>
+    <Button color="gray" variant="outline-fill">Outline-fill Gray</Button>
+    <Button color="green" variant="outline-fill">Outline-fill Green</Button>
+    <Button color="red" variant="outline-fill">Outline-fill Red</Button>
+    <Button color="blue" variant="outline-fill">Outline-fill Blue</Button>
+    <Button color="orange" variant="outline-fill">Outline-fill Orange</Button>
 `} />
 
 <CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
-    <Button color="accent" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="gray" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="green" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="red" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="blue" variant="outline-fill">Outline-fill Button</Button>
-    <Button color="orange" variant="outline-fill">Outline-fill Button</Button>
+    <Button color="accent" variant="outline-fill">Outline-fill Accent</Button>
+    <Button color="gray" variant="outline-fill">Outline-fill Gray</Button>
+    <Button color="green" variant="outline-fill">Outline-fill Green</Button>
+    <Button color="red" variant="outline-fill">Outline-fill Red</Button>
+    <Button color="blue" variant="outline-fill">Outline-fill Blue</Button>
+    <Button color="orange" variant="outline-fill">Outline-fill Orange</Button>
 </CodeResult>
 
 <h4>Invisible</h4>
 
 <CodeBlock code={`
-    <Button color="accent" variant="invisible">Invisible Button</Button>
-    <Button color="gray" variant="invisible">Invisible Button</Button>
-    <Button color="green" variant="invisible">Invisible Button</Button>
-    <Button color="red" variant="invisible">Invisible Button</Button>
-    <Button color="blue" variant="invisible">Invisible Button</Button>
-    <Button color="orange" variant="invisible">Invisible Button</Button>
+    <Button color="accent" variant="invisible">Invisible Accent</Button>
+    <Button color="gray" variant="invisible">Invisible Gray</Button>
+    <Button color="green" variant="invisible">Invisible Green</Button>
+    <Button color="red" variant="invisible">Invisible Red</Button>
+    <Button color="blue" variant="invisible">Invisible Blue</Button>
+    <Button color="orange" variant="invisible">Invisible Orange</Button>
+    <Button color="input" variant="invisible">Invisible Input</Button>
 `} />   
 
 <CodeResult style="display:flex;flex-direction:column;gap:15px;align-items:flex-start" white>
-    <Button color="accent" variant="invisible">Invisible Button</Button>
-    <Button color="gray" variant="invisible">Invisible Button</Button>
-    <Button color="green" variant="invisible">Invisible Button</Button>
-    <Button color="red" variant="invisible">Invisible Button</Button>
-    <Button color="blue" variant="invisible">Invisible Button</Button>
-    <Button color="orange" variant="invisible">Invisible Button</Button>
+    <Button color="accent" variant="invisible">Invisible Accent</Button>
+    <Button color="gray" variant="invisible">Invisible Gray</Button>
+    <Button color="green" variant="invisible">Invisible Green</Button>
+    <Button color="red" variant="invisible">Invisible Red</Button>
+    <Button color="blue" variant="invisible">Invisible Blue</Button>
+    <Button color="orange" variant="invisible">Invisible Orange</Button>
+    <Button color="input" variant="invisible">Invisible Input</Button>
 </CodeResult>
 
 <h2 id="slots">Slots</h2>

From 5d30c5745778793102cf67480c9f2fe0e1619444 Mon Sep 17 00:00:00 2001
From: IshiniAvindya <ishiniavindya2000@gmail.com>
Date: Tue, 2 Jan 2024 11:46:28 +0100
Subject: [PATCH 2/2] error fixes

---
 src/lib/components/Button/Button.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Button/Button.svelte b/src/lib/components/Button/Button.svelte
index 88c66561..ff6817dd 100644
--- a/src/lib/components/Button/Button.svelte
+++ b/src/lib/components/Button/Button.svelte
@@ -10,7 +10,7 @@
         'orange' |
         'input' = 'accent';
     export let block : boolean = false;
-    export let variant : 'fill' | 'fill-light ' | 'outline' | 'invisible' | 'outline-fill' = 'fill';
+    export let variant : 'fill' | 'fill-light' | 'outline' | 'invisible' | 'outline-fill' = 'fill';
     export let align: 'start' | 'center' = 'center';
 </script>