From 6e9eb2c6c2a7bb4c2cc72102f31fe379156151ad Mon Sep 17 00:00:00 2001
From: tanujkanti4441 <tanujkanti4441@gmail.com>
Date: Sun, 12 Mar 2023 14:28:03 +0530
Subject: [PATCH 1/8] docs: add back to top button

---
 docs/src/_includes/layouts/base.html |  1 +
 docs/src/_includes/layouts/doc.html  |  1 +
 docs/src/assets/js/scroll-up-btn.js  | 18 ++++++++++++++++++
 docs/src/assets/scss/docs.scss       | 24 ++++++++++++++++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 docs/src/assets/js/scroll-up-btn.js

diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
index 13779e5dd86..115f5671543 100644
--- a/docs/src/_includes/layouts/base.html
+++ b/docs/src/_includes/layouts/base.html
@@ -154,6 +154,7 @@
     <script src="{{ '/assets/js/focus-visible.js' | url }}"></script>
     <script src="{{ '/assets/js/main.js' | url }}"></script>
     <script src="{{ '/assets/js/tabs.js' | url }}"></script>
+    <script src="{{ '/assets/js/scroll-up-btn.js' | url }}"></script>
     {% include 'partials/analytics.html' %}
 
     {%- if hook == "component-library" -%}
diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
index 70888cd6b81..4af40aceb47 100644
--- a/docs/src/_includes/layouts/doc.html
+++ b/docs/src/_includes/layouts/doc.html
@@ -102,6 +102,7 @@ <h1>{{ title }}</h1>
             {% include "partials/docs-footer.html" %}
         </div>
     </div>
+    <button class="scroll-up-btn" id="scroll_up_btn">↑</button>
 </div>
 
 <script src="{{ '/assets/js/tabs.js' | url }}"></script>
diff --git a/docs/src/assets/js/scroll-up-btn.js b/docs/src/assets/js/scroll-up-btn.js
new file mode 100644
index 00000000000..84dd5e4167b
--- /dev/null
+++ b/docs/src/assets/js/scroll-up-btn.js
@@ -0,0 +1,18 @@
+(function () {
+    const scrollUpBtn = document.getElementById("scroll_up_btn");
+
+    if(window.innerWidth < 1400) {
+        window.addEventListener("scroll", function () {
+            if(this.document.body.scrollTop > 500 || this.document.documentElement.scrollTop > 500) {
+                scrollUpBtn.style.display = "block";
+            } else {
+                scrollUpBtn.style.display = "none";
+            }
+        });
+    }
+
+    scrollUpBtn.addEventListener("click", function () {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+    });
+})();
\ No newline at end of file
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 4aa106546c1..691e4d0052e 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -157,3 +157,27 @@ pre[class*="language-"] {
         opacity: 1;
     }
 }
+
+.scroll-up-btn {
+    width: 50px;
+    height: 50px;
+    display: none;
+    position: fixed;
+    right: 50px;
+    bottom: 35px;
+    font-size: 1.5rem;
+    border-radius: 50%;
+    background-color: rgba(20, 20, 247, 0.5);
+
+    @media (max-width: 800px) {
+        right: 35px;
+    }
+
+    @media (max-width: 600px) {
+        right: 25px;
+    }
+
+    [data-theme="dark"] & {
+        background-color: rgba(238, 239, 240, .9);
+    }
+}
\ No newline at end of file

From b4845390ad1b04656bebd702403ab143c558c846 Mon Sep 17 00:00:00 2001
From: tanujkanti4441 <tanujkanti4441@gmail.com>
Date: Sun, 12 Mar 2023 15:19:27 +0530
Subject: [PATCH 2/8] fix: spacing errors of previous commit

---
 docs/src/assets/scss/docs.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 691e4d0052e..f48ff5e1a22 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -30,7 +30,7 @@ html {
     grid-row: 1 / 2;
     padding-top: var(--space-l-xl);
     padding-block-start: var(--space-l-xl);
-    font-size: .875rem;
+    font-size: 0.875rem;
     display: grid;
     grid-auto-rows: max-content;
     align-items: start;
@@ -142,10 +142,10 @@ pre[class*="language-"] {
 .c-btn.c-btn--playground {
     position: absolute;
     font-size: var(--step--1);
-    bottom: .5rem;
-    right: .5rem;
-    offset-block-end: .5rem;
-    offset-inline-end: .5rem;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    offset-block-end: 0.5rem;
+    offset-inline-end: 0.5rem;
 
     @media all and (max-width: 768px) {
         display: none;
@@ -178,6 +178,6 @@ pre[class*="language-"] {
     }
 
     [data-theme="dark"] & {
-        background-color: rgba(238, 239, 240, .9);
+        background-color: rgba(238, 239, 240, 0.9);
     }
-}
\ No newline at end of file
+}

From 1e83bd57c000598de393ecab6e05ffede60c5876 Mon Sep 17 00:00:00 2001
From: tanujkanti4441 <tanujkanti4441@gmail.com>
Date: Tue, 14 Mar 2023 10:01:42 +0530
Subject: [PATCH 3/8] docs: update css of scrollup button

---
 docs/src/assets/scss/docs.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index f48ff5e1a22..15c8d4b85e8 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -167,7 +167,9 @@ pre[class*="language-"] {
     bottom: 35px;
     font-size: 1.5rem;
     border-radius: 50%;
-    background-color: rgba(20, 20, 247, 0.5);
+    color: #fff;
+    background-color: rgba(75, 50, 195, 0.9);
+    box-shadow: 4px 4px 15px #8e8a8a;
 
     @media (max-width: 800px) {
         right: 35px;
@@ -178,6 +180,8 @@ pre[class*="language-"] {
     }
 
     [data-theme="dark"] & {
-        background-color: rgba(238, 239, 240, 0.9);
+        background-color: rgba(251, 251, 255, 0.9);
+        color: #000;
+        box-shadow: none;
     }
 }

From 361aafcd963a537c6741ad89df58234f834ce39f Mon Sep 17 00:00:00 2001
From: tanujkanti4441 <tanujkanti4441@gmail.com>
Date: Tue, 14 Mar 2023 10:53:06 +0530
Subject: [PATCH 4/8] docs: add css comments for color

---
 docs/src/assets/scss/docs.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 15c8d4b85e8..3dc9fc77fdc 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -168,7 +168,7 @@ pre[class*="language-"] {
     font-size: 1.5rem;
     border-radius: 50%;
     color: #fff;
-    background-color: rgba(75, 50, 195, 0.9);
+    background-color: rgba(75, 50, 195, 0.9); //rgba of #4b32c3
     box-shadow: 4px 4px 15px #8e8a8a;
 
     @media (max-width: 800px) {
@@ -180,7 +180,7 @@ pre[class*="language-"] {
     }
 
     [data-theme="dark"] & {
-        background-color: rgba(251, 251, 255, 0.9);
+        background-color: rgba(251, 251, 255, 0.9); //rgba of #fbfbff
         color: #000;
         box-shadow: none;
     }

From eb701bcc96b3651545fda9526f6d2728b1eae600 Mon Sep 17 00:00:00 2001
From: tanujkanti4441 <tanujkanti4441@gmail.com>
Date: Tue, 14 Mar 2023 11:04:54 +0530
Subject: [PATCH 5/8] fix: spacing issues of last commit

---
 docs/src/assets/scss/docs.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 3dc9fc77fdc..a4ee9f5a052 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -168,7 +168,7 @@ pre[class*="language-"] {
     font-size: 1.5rem;
     border-radius: 50%;
     color: #fff;
-    background-color: rgba(75, 50, 195, 0.9); //rgba of #4b32c3
+    background-color: rgba(75, 50, 195, 0.9); // rgba of #4b32c3
     box-shadow: 4px 4px 15px #8e8a8a;
 
     @media (max-width: 800px) {
@@ -180,7 +180,7 @@ pre[class*="language-"] {
     }
 
     [data-theme="dark"] & {
-        background-color: rgba(251, 251, 255, 0.9); //rgba of #fbfbff
+        background-color: rgba(251, 251, 255, 0.9); // rgba of #fbfbff
         color: #000;
         box-shadow: none;
     }

From cd9f9aa462244be64ba86cc76d597b153dd60bfd Mon Sep 17 00:00:00 2001
From: tanujkanti4441 <tanujkanti4441@gmail.com>
Date: Sat, 18 Mar 2023 15:45:56 +0530
Subject: [PATCH 6/8] docs: set the scroll btn to work without js

---
 docs/src/_includes/layouts/base.html | 2 +-
 docs/src/_includes/layouts/doc.html  | 2 +-
 docs/src/assets/js/scroll-up-btn.js  | 7 +------
 docs/src/assets/scss/docs.scss       | 3 +++
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
index 115f5671543..69b9951341e 100644
--- a/docs/src/_includes/layouts/base.html
+++ b/docs/src/_includes/layouts/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ config.lang }}" class="no-js">
+<html lang="{{ config.lang }}" class="no-js" id="scroll_to_top">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
index 4af40aceb47..f517c64d0f1 100644
--- a/docs/src/_includes/layouts/doc.html
+++ b/docs/src/_includes/layouts/doc.html
@@ -102,7 +102,7 @@ <h1>{{ title }}</h1>
             {% include "partials/docs-footer.html" %}
         </div>
     </div>
-    <button class="scroll-up-btn" id="scroll_up_btn">↑</button>
+    <a class="scroll-up-btn" id="scroll_up_btn" href="#scroll_to_top">↑</a>
 </div>
 
 <script src="{{ '/assets/js/tabs.js' | url }}"></script>
diff --git a/docs/src/assets/js/scroll-up-btn.js b/docs/src/assets/js/scroll-up-btn.js
index 84dd5e4167b..9abc741a75d 100644
--- a/docs/src/assets/js/scroll-up-btn.js
+++ b/docs/src/assets/js/scroll-up-btn.js
@@ -4,15 +4,10 @@
     if(window.innerWidth < 1400) {
         window.addEventListener("scroll", function () {
             if(this.document.body.scrollTop > 500 || this.document.documentElement.scrollTop > 500) {
-                scrollUpBtn.style.display = "block";
+                scrollUpBtn.style.display = "flex";
             } else {
                 scrollUpBtn.style.display = "none";
             }
         });
     }
-
-    scrollUpBtn.addEventListener("click", function () {
-        document.body.scrollTop = 0;
-        document.documentElement.scrollTop = 0;
-    });
 })();
\ No newline at end of file
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index a4ee9f5a052..2f0176aa063 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -168,6 +168,9 @@ pre[class*="language-"] {
     font-size: 1.5rem;
     border-radius: 50%;
     color: #fff;
+    text-decoration: none;
+    justify-content: center;
+    align-items: center;
     background-color: rgba(75, 50, 195, 0.9); // rgba of #4b32c3
     box-shadow: 4px 4px 15px #8e8a8a;
 

From dbfb1d51713d1533d79246216bbb7f1b5f158bb8 Mon Sep 17 00:00:00 2001
From: tanujkanti4441 <tanujkanti4441@gmail.com>
Date: Mon, 20 Mar 2023 18:39:54 +0530
Subject: [PATCH 7/8] docs: update previous code

---
 docs/src/_includes/layouts/base.html | 2 +-
 docs/src/_includes/layouts/doc.html  | 4 +++-
 docs/src/assets/js/scroll-up-btn.js  | 2 +-
 docs/src/assets/scss/docs.scss       | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/src/_includes/layouts/base.html b/docs/src/_includes/layouts/base.html
index 69b9951341e..49bdf8522c8 100644
--- a/docs/src/_includes/layouts/base.html
+++ b/docs/src/_includes/layouts/base.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ config.lang }}" class="no-js" id="scroll_to_top">
+<html lang="{{ config.lang }}" class="no-js" id="site_top">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
index f517c64d0f1..c4f990cd2db 100644
--- a/docs/src/_includes/layouts/doc.html
+++ b/docs/src/_includes/layouts/doc.html
@@ -102,7 +102,9 @@ <h1>{{ title }}</h1>
             {% include "partials/docs-footer.html" %}
         </div>
     </div>
-    <a class="scroll-up-btn" id="scroll_up_btn" href="#scroll_to_top">↑</a>
+    <a id="scroll_up_btn" href="#site_top">
+        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"><line x1="12" x2="12" y1="19" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
+    </a>
 </div>
 
 <script src="{{ '/assets/js/tabs.js' | url }}"></script>
diff --git a/docs/src/assets/js/scroll-up-btn.js b/docs/src/assets/js/scroll-up-btn.js
index 9abc741a75d..701a57441b8 100644
--- a/docs/src/assets/js/scroll-up-btn.js
+++ b/docs/src/assets/js/scroll-up-btn.js
@@ -3,7 +3,7 @@
 
     if(window.innerWidth < 1400) {
         window.addEventListener("scroll", function () {
-            if(this.document.body.scrollTop > 500 || this.document.documentElement.scrollTop > 500) {
+            if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
                 scrollUpBtn.style.display = "flex";
             } else {
                 scrollUpBtn.style.display = "none";
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 2f0176aa063..8743c3ca18e 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -158,7 +158,7 @@ pre[class*="language-"] {
     }
 }
 
-.scroll-up-btn {
+#scroll_up_btn {
     width: 50px;
     height: 50px;
     display: none;

From 5aa9eab025dc2c6942bcc425466c559ff492de67 Mon Sep 17 00:00:00 2001
From: tanujkanti4441 <tanujkanti4441@gmail.com>
Date: Tue, 21 Mar 2023 12:04:11 +0530
Subject: [PATCH 8/8] docs: update previous code

---
 docs/src/_includes/layouts/doc.html |  2 +-
 docs/src/assets/js/scroll-up-btn.js |  2 +-
 docs/src/assets/scss/docs.scss      | 13 +++----------
 docs/src/assets/scss/print.scss     |  4 ++++
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/docs/src/_includes/layouts/doc.html b/docs/src/_includes/layouts/doc.html
index c4f990cd2db..4050a901063 100644
--- a/docs/src/_includes/layouts/doc.html
+++ b/docs/src/_includes/layouts/doc.html
@@ -102,7 +102,7 @@ <h1>{{ title }}</h1>
             {% include "partials/docs-footer.html" %}
         </div>
     </div>
-    <a id="scroll_up_btn" href="#site_top">
+    <a id="scroll-up-btn" href="#site_top">
         <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24"><line x1="12" x2="12" y1="19" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
     </a>
 </div>
diff --git a/docs/src/assets/js/scroll-up-btn.js b/docs/src/assets/js/scroll-up-btn.js
index 701a57441b8..cb77af1bcbe 100644
--- a/docs/src/assets/js/scroll-up-btn.js
+++ b/docs/src/assets/js/scroll-up-btn.js
@@ -1,5 +1,5 @@
 (function () {
-    const scrollUpBtn = document.getElementById("scroll_up_btn");
+    const scrollUpBtn = document.getElementById("scroll-up-btn");
 
     if(window.innerWidth < 1400) {
         window.addEventListener("scroll", function () {
diff --git a/docs/src/assets/scss/docs.scss b/docs/src/assets/scss/docs.scss
index 8743c3ca18e..ee40123891d 100644
--- a/docs/src/assets/scss/docs.scss
+++ b/docs/src/assets/scss/docs.scss
@@ -158,7 +158,7 @@ pre[class*="language-"] {
     }
 }
 
-#scroll_up_btn {
+#scroll-up-btn {
     width: 50px;
     height: 50px;
     display: none;
@@ -167,12 +167,11 @@ pre[class*="language-"] {
     bottom: 35px;
     font-size: 1.5rem;
     border-radius: 50%;
-    color: #fff;
+    color: var(--body-background-color);
     text-decoration: none;
     justify-content: center;
     align-items: center;
-    background-color: rgba(75, 50, 195, 0.9); // rgba of #4b32c3
-    box-shadow: 4px 4px 15px #8e8a8a;
+    background-color: var(--link-color);
 
     @media (max-width: 800px) {
         right: 35px;
@@ -181,10 +180,4 @@ pre[class*="language-"] {
     @media (max-width: 600px) {
         right: 25px;
     }
-
-    [data-theme="dark"] & {
-        background-color: rgba(251, 251, 255, 0.9); // rgba of #fbfbff
-        color: #000;
-        box-shadow: none;
-    }
 }
diff --git a/docs/src/assets/scss/print.scss b/docs/src/assets/scss/print.scss
index 68d4146240e..39dcc9470cd 100644
--- a/docs/src/assets/scss/print.scss
+++ b/docs/src/assets/scss/print.scss
@@ -207,3 +207,7 @@ ul {
         margin: 1cm;
     }
 }
+
+#scroll-up-btn {
+    display: none;
+}