From 26981ae7a6d2d4de896ab0cb17a815e386ae3fa4 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Mon, 22 Dec 2025 22:42:26 +0100
Subject: [PATCH 01/33] chore: remove unnecessary styles of vitepress vue
 components

---
 docs/.vitepress/components/BlogHome.vue       |  8 ++---
 docs/.vitepress/components/BlogLayout.vue     | 17 ++++-------
 .../.vitepress/components/BlogPostPreview.vue | 19 +++---------
 docs/.vitepress/components/ExampleSearch.vue  | 30 -------------------
 .../components/ExampleSearchFilterByItem.vue  |  1 -
 .../components/ExampleSearchResult.vue        |  3 --
 6 files changed, 12 insertions(+), 66 deletions(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index d6843cdc2..e099d8cc8 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -36,11 +36,11 @@ const posts = computed<Post[]>(() =>
   flex-direction: column;
   align-items: center;
 }
+
 .container > div {
   padding: 32px;
   max-width: 900px;
   width: 100%;
-  min-width: 0;
 }
 
 h1 {
@@ -52,17 +52,13 @@ ul {
   flex-direction: column;
   list-style: none;
 }
-ul,
-li {
-  padding: 0;
-  margin: 0;
-}
 
 ul li {
   padding-top: 16px;
   margin-top: 16px;
   border-top: 1px solid var(--vp-c-default);
 }
+
 ul li:last-child {
   padding-bottom: 16px;
   margin-bottom: 16px;
diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 4573dd0b1..516f2c967 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -8,7 +8,7 @@ const date = useBlogDate(() => frontmatter.value.date);
 </script>
 
 <template>
-  <div class="vp-doc">
+  <div>
     <main class="container-content">
       <h1 v-html="frontmatter.title" />
       <p class="meta-row">
@@ -30,19 +30,18 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-vp-doc {
-  display: flex;
-}
 main {
   max-width: 1080px;
   padding: 32px;
   margin: auto;
 }
+
 @media (min-width: 768px) {
   main {
     padding: 64px;
   }
 }
+
 .meta-row {
   display: flex;
   color: var(--vp-c-text-2);
@@ -50,9 +49,7 @@ main {
   overflow: hidden;
   padding-bottom: 32px;
 }
-.meta-row > * {
-  flex-shrink: 0;
-}
+
 .author {
   display: flex;
   gap: 8px;
@@ -61,15 +58,13 @@ main {
   font-weight: normal;
   text-decoration: none;
 }
+
 .author img {
   width: 24px;
   height: 24px;
   border-radius: 100%;
 }
-.author span {
-  padding: 0;
-  margin: 0;
-}
+
 .author:hover {
   text-decoration: underline;
   color: var(--vp-c-text-2);
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index 405822189..09b26c7b8 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -31,39 +31,28 @@ const date = useBlogDate(() => props.post.date);
 </template>
 
 <style scoped>
-li {
-  padding: 0;
-  margin: 0;
-}
-
-p {
-  margin: 0;
-}
-h3 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-
 li > a > div {
   display: flex;
   flex-direction: column;
-  margin: 0 -16px;
   padding: 16px;
   border-radius: 16px;
 }
+
 li > a > div:hover {
   background: var(--vp-c-default);
 }
+
 li .title {
   color: var(--vp-c-text);
   margin-bottom: 12px;
 }
+
 li .description {
   font-size: 16px;
   color: var(--vp-c-text-2);
   margin-bottom: 8px;
 }
+
 li .meta {
   font-weight: 400;
   font-size: 12px;
diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index 98f79269d..58b003788 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -149,38 +149,12 @@ const filteredExamples = computed(() => {
   grid-area: results;
 }
 
-.box {
-  border-radius: 16px;
-  overflow: hidden;
-}
-
 .search input {
   min-width: 0;
   flex: 1;
   font-size: 16px;
 }
 
-.checkbox-col {
-  flex: 1;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  max-height: 200px;
-  font-size: 14px;
-  gap: 4px;
-}
-
-.filter-btn {
-  color: var(--vp-c-brand-1);
-}
-
-.checkbox-col .header {
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 50%;
-}
-
 .checkbox-col p {
   display: flex;
   gap: 4px;
@@ -200,10 +174,6 @@ span {
   flex-shrink: 0;
 }
 
-.checkbox-col-container {
-  display: flex;
-}
-
 .search-results {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index a7752fe09..7e2342e2c 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -83,7 +83,6 @@ label {
   display: flex;
   gap: 4px;
   align-items: flex-start;
-  text-wrap: wrap;
   overflow-wrap: anywhere;
   line-height: 140%;
   cursor: pointer;
diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index ef25b7da4..4ad881f7f 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -36,9 +36,6 @@ a:hover {
 .name {
   font-size: 16px;
   font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   flex-shrink: 0;
 
   text-overflow: ellipsis;

From efba663ddef9e51a0db9b2d4ede7ec4eb898cf38 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 12:22:54 +0100
Subject: [PATCH 02/33] clean: remove unnecessary/unused code of Example
 components and simplify code

---
 docs/.vitepress/components/ExampleSearch.vue  | 35 ++++---------------
 .../components/ExampleSearchFilterByItem.vue  | 20 ++++-------
 .../components/ExampleSearchResult.vue        | 16 +++------
 3 files changed, 17 insertions(+), 54 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index 58b003788..b4a1acf68 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -114,6 +114,7 @@ const filteredExamples = computed(() => {
     'results';
   gap: 16px;
 }
+
 @media only screen and (min-width: 720px) {
   .example-layout {
     grid-template-columns: 256px 1fr;
@@ -123,62 +124,40 @@ const filteredExamples = computed(() => {
       'filters results';
   }
 }
+
 .search {
   grid-area: search;
   background: var(--vp-c-bg-soft);
   padding: 20px;
-  width: 100%;
-  display: flex;
   border-radius: 16px;
 }
+
 .filters {
-  display: none;
   grid-area: filters;
 }
+
 @media only screen and (min-width: 720px) {
   .filters {
     display: flex;
     flex-direction: column;
-    gap: 2px;
+    gap: 10px;
     border-radius: 16px;
-    overflow: hidden;
-    align-self: flex-start;
   }
 }
+
 .results {
   grid-area: results;
 }
 
 .search input {
-  min-width: 0;
-  flex: 1;
   font-size: 16px;
 }
 
-.checkbox-col p {
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  text-wrap: wrap;
-  overflow-wrap: anywhere;
-  line-height: 140%;
-}
-
-span {
-  padding-top: 1px;
-}
-
-.checkbox-col input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
 .search-results {
   display: grid;
-  grid-template-columns: repeat(1, 1fr);
   gap: 16px;
 }
+
 @media only screen and (min-width: 800px) {
   .search-results {
     grid-template-columns: repeat(2, 1fr);
diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index 7e2342e2c..0c3835d36 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -55,22 +55,18 @@ function toggleItem(pkg: string) {
 
 .scroll-container {
   flex: 1;
-  overflow: hidden;
   position: relative;
 }
 
 .scroll-container ul {
   position: absolute;
   overflow-y: auto;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-size: small;
-  padding: 8px 16px 16px 16px;
+  padding: 8px 16px 16px;
 }
 
 .header {
@@ -79,18 +75,14 @@ function toggleItem(pkg: string) {
   font-weight: bold;
   opacity: 50%;
 }
+
 label {
   display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  overflow-wrap: anywhere;
-  line-height: 140%;
+  align-items: center;
+  gap: 6px;
   cursor: pointer;
-  text-wrap: nowrap;
-}
-span {
-  padding-top: 1px;
 }
+
 input[type='checkbox'] {
   width: 16px;
   height: 16px;
diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index 4ad881f7f..afd529fbb 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -17,39 +17,30 @@ defineProps<{
 </template>
 
 <style scoped>
-* {
-  min-width: 0;
-}
 a {
   padding: 16px;
   display: flex;
   flex-direction: column;
   border: 2px solid var(--vp-c-bg-soft);
   border-radius: 16px;
-  color: var(--vp-c-text-1) !important;
   gap: 8px;
 }
 
 a:hover {
   outline: 2px solid var(--vp-c-brand-2);
 }
+
 .name {
-  font-size: 16px;
   font-weight: 500;
-  flex-shrink: 0;
-
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
+
 .description {
-  height: 53px;
   opacity: 70%;
   font-size: 14px;
-  font-weight: normal;
-  line-height: 120%;
-  min-height: 0;
-
+  line-height: 130%;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -63,6 +54,7 @@ a:hover {
   font-weight: bold;
   text-align: right;
 }
+
 a:hover .link {
   opacity: 100%;
 }

From 02d025d1d53e108ab0f26278b93fbf8c379c1c6b Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Thu, 16 Apr 2026 21:40:57 +0200
Subject: [PATCH 03/33] chore: add global reset styles to custom.css

---
 docs/.vitepress/theme/custom.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index caebbeb1a..4a7fd744d 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -33,6 +33,12 @@
   border: 1px solid var(--vp-c-divider);
 }
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
   overflow-y: scroll;
 }

From 674fa36f7c1140a39b2a0b101f7c9ea7a0fe6df3 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 12:57:13 +0100
Subject: [PATCH 04/33] clean: simplify css code of Blog

---
 docs/.vitepress/components/BlogLayout.vue      | 6 ++----
 docs/.vitepress/components/BlogPostPreview.vue | 8 ++++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 516f2c967..1576f4cc9 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -30,14 +30,12 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-main {
+.container-content {
   max-width: 1080px;
   padding: 32px;
   margin: auto;
-}
 
-@media (min-width: 768px) {
-  main {
+  @media (min-width: 768px) {
     padding: 64px;
   }
 }
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index 09b26c7b8..1ecc4ab82 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -36,14 +36,14 @@ li > a > div {
   flex-direction: column;
   padding: 16px;
   border-radius: 16px;
-}
 
-li > a > div:hover {
-  background: var(--vp-c-default);
+  &:hover {
+    background: var(--vp-c-default-3);
+  }
 }
 
 li .title {
-  color: var(--vp-c-text);
+  color: var(--vp-c-text-1);
   margin-bottom: 12px;
 }
 

From c939f95027631ab6fda53481eb39152e16ad043b Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Wed, 24 Dec 2025 13:33:18 +0100
Subject: [PATCH 05/33] fix: displaying filters on width < 720px

---
 docs/.vitepress/components/ExampleSearch.vue | 32 ++++++--------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index b4a1acf68..e139b8ca7 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -107,21 +107,14 @@ const filteredExamples = computed(() => {
 <style scoped>
 .example-layout {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
   grid-template-areas:
-    'search'
-    'results';
+    'filters search'
+    'filters results';
   gap: 16px;
-}
 
-@media only screen and (min-width: 720px) {
-  .example-layout {
+  @media only screen and (min-width: 720px) {
     grid-template-columns: 256px 1fr;
     grid-template-rows: auto 1fr;
-    grid-template-areas:
-      'filters search'
-      'filters results';
   }
 }
 
@@ -134,13 +127,11 @@ const filteredExamples = computed(() => {
 
 .filters {
   grid-area: filters;
-}
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 
-@media only screen and (min-width: 720px) {
-  .filters {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  @media only screen and (min-width: 720px) {
     border-radius: 16px;
   }
 }
@@ -156,15 +147,12 @@ const filteredExamples = computed(() => {
 .search-results {
   display: grid;
   gap: 16px;
-}
 
-@media only screen and (min-width: 800px) {
-  .search-results {
+  @media only screen and (min-width: 800px) {
     grid-template-columns: repeat(2, 1fr);
   }
-}
-@media only screen and (min-width: 1024px) {
-  .search-results {
+
+  @media only screen and (min-width: 1024px) {
     grid-template-columns: repeat(3, 1fr);
   }
 }

From bc884f7c4955138f6d0be8b7d0e04936343d7ba1 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Thu, 16 Apr 2026 21:55:57 +0200
Subject: [PATCH 06/33] clean: custom.css

---
 docs/.vitepress/theme/custom.css | 51 ++++++++++++++++----------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 4a7fd744d..40cd2b157 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,50 +1,44 @@
+/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
 /* Colors */
 :root {
   --wxt-c-green-1: #0b8a00;
   --wxt-c-green-2: #096600;
   --wxt-c-green-3: #096600;
   --wxt-c-green-soft: rgba(11, 138, 0, 0.14);
-}
-
-.dark {
-  --wxt-c-green-1: #67d45e;
-  --wxt-c-green-2: #329929;
-  --wxt-c-green-3: #21651b;
-  --wxt-c-green-soft: rgba(103, 212, 94, 0.14);
-}
 
-/* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
-
-:root {
   --vp-c-brand-1: var(--wxt-c-green-1);
   --vp-c-brand-2: var(--wxt-c-green-2);
   --vp-c-brand-3: var(--wxt-c-green-3);
   --vp-c-brand-soft: var(--wxt-c-green-soft);
 }
 
-/* Customize Individual Components */
-
-.vp-doc .no-vertical-dividers th,
-.vp-doc .no-vertical-dividers td {
-  border: none;
-}
-
-.vp-doc .no-vertical-dividers tr {
-  border: 1px solid var(--vp-c-divider);
-}
-
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-body {
-  overflow-y: scroll;
+.dark {
+  --wxt-c-green-1: #67d45e;
+  --wxt-c-green-2: #329929;
+  --wxt-c-green-3: #21651b;
+  --wxt-c-green-soft: rgba(103, 212, 94, 0.14);
+}
+
+/* Customize Individual Components */
+.vp-doc .no-vertical-dividers {
+  th,
+  td {
+    border: none;
+  }
+
+  tr {
+    border: 1px solid var(--vp-c-divider);
+  }
 }
 
-.VPSidebar {
-  user-select: none;
+body {
+  overflow-y: scroll;
 }
 
 .VPSidebarItem .badge {
@@ -63,12 +57,15 @@ body {
 .light-netlify {
   display: inline;
 }
+
 .dark .light-netlify {
   display: none;
 }
+
 .dark-netlify {
   display: none;
 }
+
 .dark .dark-netlify {
   display: inline;
 }
@@ -85,6 +82,7 @@ body {
   background-position: 90%;
   pointer-events: none;
 }
+
 .dark .VPHome::after {
   content: '';
   position: absolute;
@@ -95,6 +93,7 @@ body {
   pointer-events: none;
   z-index: 0;
 }
+
 .item {
   z-index: 1;
 }

From 7518388aae8a2abed48c9d03d581623d4d8d08d2 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Thu, 16 Apr 2026 22:03:45 +0200
Subject: [PATCH 07/33] clean: refine badge styles in sidebar for improved
 alignment and appearance

---
 docs/.vitepress/theme/custom.css | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 40cd2b157..d7868666c 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -42,15 +42,14 @@ body {
 }
 
 .VPSidebarItem .badge {
-  display: inline-block;
-  min-width: 1.6em;
-  padding: 0.3em 0.4em 0.2em;
-  border-radius: 1rem;
-  font-size: 0.75em;
-  line-height: 1;
-  margin-left: 0.5rem;
-  text-align: center;
-  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.75em;
+  height: 1.75em;
+  border-radius: 10rem;
+  font-size: 0.8em;
+  margin-left: 0.25rem;
   background-color: var(--vp-c-default-2);
 }
 

From 7dca3237648ba143eff656c9fd866e1d66dae62c Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Thu, 16 Apr 2026 22:21:37 +0200
Subject: [PATCH 08/33] clean: Remove unnecessary code of custom.css

---
 docs/.vitepress/theme/custom.css | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index d7868666c..35d73f236 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -41,18 +41,6 @@ body {
   overflow-y: scroll;
 }
 
-.VPSidebarItem .badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1.75em;
-  height: 1.75em;
-  border-radius: 10rem;
-  font-size: 0.8em;
-  margin-left: 0.25rem;
-  background-color: var(--vp-c-default-2);
-}
-
 .light-netlify {
   display: inline;
 }

From 1bfe301076f1816e931e0391e288692a69b62317 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:00:28 +0200
Subject: [PATCH 09/33] clean: Simplify BlogLayout.vue css

---
 docs/.vitepress/components/BlogLayout.vue | 44 ++++++++++-------------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 1576f4cc9..1cba42654 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -30,7 +30,7 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-.container-content {
+.container {
   max-width: 1080px;
   padding: 32px;
   margin: auto;
@@ -38,33 +38,27 @@ const date = useBlogDate(() => frontmatter.value.date);
   @media (min-width: 768px) {
     padding: 64px;
   }
-}
 
-.meta-row {
-  display: flex;
-  color: var(--vp-c-text-2);
-  gap: 16px;
-  overflow: hidden;
-  padding-bottom: 32px;
-}
+  .meta-row {
+    display: flex;
+    color: var(--vp-c-text-2);
+    gap: 16px;
+    overflow: hidden;
+    padding-bottom: 32px;
 
-.author {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--vp-c-text-2);
-  font-weight: normal;
-  text-decoration: none;
-}
+    .author {
+      display: flex;
+      gap: 8px;
 
-.author img {
-  width: 24px;
-  height: 24px;
-  border-radius: 100%;
-}
+      :hover {
+        text-decoration: underline;
+      }
 
-.author:hover {
-  text-decoration: underline;
-  color: var(--vp-c-text-2);
+      img {
+        width: 24px;
+        border-radius: 100%;
+      }
+    }
+  }
 }
 </style>

From eb2837d84d8f5dc8b62e3fb1581aaa81c55f0d28 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:02:47 +0200
Subject: [PATCH 10/33] clean: Simplify BlogHome.vue css and html

---
 docs/.vitepress/components/BlogHome.vue | 51 ++++++++++++-------------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index e099d8cc8..53a7e8f5f 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -18,10 +18,8 @@ const posts = computed<Post[]>(() =>
 
 <template>
   <div class="container">
-    <div>
-      <div class="vp-doc">
-        <h1>Blog</h1>
-      </div>
+    <div class="inner-container">
+      <h1>Blog</h1>
 
       <ul>
         <BlogPostPreview v-for="post of posts" :key="post.url" :post />
@@ -35,33 +33,32 @@ const posts = computed<Post[]>(() =>
   display: flex;
   flex-direction: column;
   align-items: center;
-}
 
-.container > div {
-  padding: 32px;
-  max-width: 900px;
-  width: 100%;
-}
+  .inner-container {
+    padding: 32px;
+    max-width: 900px;
+    width: 100%;
 
-h1 {
-  padding-bottom: 16px;
-}
+    h1 {
+      padding-bottom: 16px;
+    }
 
-ul {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-}
+    ul {
+      display: flex;
+      flex-direction: column;
 
-ul li {
-  padding-top: 16px;
-  margin-top: 16px;
-  border-top: 1px solid var(--vp-c-default);
-}
+      li {
+        padding-top: 16px;
+        margin-top: 16px;
+        border-top: 1px solid var(--vp-c-divider);
 
-ul li:last-child {
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-default);
+        &:last-child {
+          padding-bottom: 16px;
+          margin-bottom: 16px;
+          border-bottom: 1px solid var(--vp-c-divider);
+        }
+      }
+    }
+  }
 }
 </style>

From 8cc6f6aeeac901ab725c8036b9409e64934e658d Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:04:34 +0200
Subject: [PATCH 11/33] clean: Simplify BlogPostPreview.vue css

---
 .../.vitepress/components/BlogPostPreview.vue | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index 1ecc4ab82..9c2099b11 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -16,7 +16,7 @@ const date = useBlogDate(() => props.post.date);
 
 <template>
   <li class="blog-list-item">
-    <a :href="post.url">
+    <a :href="post.url" class="post-link">
       <div class="vp-doc">
         <h3 class="title" v-html="post.title" />
         <p class="description" v-html="post.description" />
@@ -31,31 +31,32 @@ const date = useBlogDate(() => props.post.date);
 </template>
 
 <style scoped>
-li > a > div {
+.post-link .vp-doc {
   display: flex;
   flex-direction: column;
   padding: 16px;
   border-radius: 16px;
+  transition: background 0.2s;
 
   &:hover {
     background: var(--vp-c-default-3);
   }
-}
 
-li .title {
-  color: var(--vp-c-text-1);
-  margin-bottom: 12px;
-}
+  .title {
+    color: var(--vp-c-text-1);
+    margin-bottom: 12px;
+  }
 
-li .description {
-  font-size: 16px;
-  color: var(--vp-c-text-2);
-  margin-bottom: 8px;
-}
+  .description {
+    font-size: 16px;
+    color: var(--vp-c-text-2);
+    margin-bottom: 8px;
+  }
 
-li .meta {
-  font-weight: 400;
-  font-size: 12px;
-  color: var(--vp-c-text-2);
+  .meta {
+    font-weight: 400;
+    font-size: 12px;
+    color: var(--vp-c-text-2);
+  }
 }
 </style>

From 5af1f46f0c05110e2646ee981f0bd615530db6a3 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:06:26 +0200
Subject: [PATCH 12/33] clean: Remove unnecessary props and vars of custom.css

---
 docs/.vitepress/theme/custom.css | 22 +---------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 35d73f236..69c2ec5f3 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,15 +1,7 @@
 /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
 /* Colors */
 :root {
-  --wxt-c-green-1: #0b8a00;
-  --wxt-c-green-2: #096600;
-  --wxt-c-green-3: #096600;
-  --wxt-c-green-soft: rgba(11, 138, 0, 0.14);
-
-  --vp-c-brand-1: var(--wxt-c-green-1);
-  --vp-c-brand-2: var(--wxt-c-green-2);
-  --vp-c-brand-3: var(--wxt-c-green-3);
-  --vp-c-brand-soft: var(--wxt-c-green-soft);
+  --vp-c-brand: #096600;
 }
 
 * {
@@ -18,13 +10,6 @@
   box-sizing: border-box;
 }
 
-.dark {
-  --wxt-c-green-1: #67d45e;
-  --wxt-c-green-2: #329929;
-  --wxt-c-green-3: #21651b;
-  --wxt-c-green-soft: rgba(103, 212, 94, 0.14);
-}
-
 /* Customize Individual Components */
 .vp-doc .no-vertical-dividers {
   th,
@@ -78,9 +63,4 @@ body {
   top: 100vh;
   background: linear-gradient(to bottom, transparent, var(--vp-c-bg));
   pointer-events: none;
-  z-index: 0;
-}
-
-.item {
-  z-index: 1;
 }

From f1b10901c946c8ac712af073513b28551c93342d Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:08:26 +0200
Subject: [PATCH 13/33] fix: path of artemis bg img

---
 docs/.vitepress/theme/custom.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 69c2ec5f3..dc1a03b3b 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -45,7 +45,7 @@ body {
 /* Add Aaron's favorite pic from Artemis II to the hero section because it's cool. */
 .dark .VPHome::before {
   content: '';
-  background-image: url('/assets/art002e009298.jpg');
+  background-image: url('../../assets/art002e009298.jpg');
   opacity: 50%;
   position: absolute;
   width: 100vw;

From 173467cba95315eaf75487666bce76e173eb47d3 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:12:39 +0200
Subject: [PATCH 14/33] docs: Remove unnecessary style of index.md

---
 .../components/EntrypointPatterns.vue         | 37 ++++++++++++++++---
 docs/index.md                                 |  2 +-
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/components/EntrypointPatterns.vue b/docs/.vitepress/components/EntrypointPatterns.vue
index df3f661ae..6cc004654 100644
--- a/docs/.vitepress/components/EntrypointPatterns.vue
+++ b/docs/.vitepress/components/EntrypointPatterns.vue
@@ -5,20 +5,20 @@ defineProps<{
 </script>
 
 <template>
-  <table class="no-vertical-dividers">
+  <table class="no-vertical-dividers entrypoint-patterns">
     <thead>
       <tr>
-        <th style="width: 100%">Filename</th>
+        <th class="col-filename">Filename</th>
         <th></th>
         <th>Output Path</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="pattern of patterns">
-        <td style="white-space: nowrap; padding-right: 8px">
+      <tr v-for="pattern of patterns" :key="pattern[0]">
+        <td class="cell-input">
           <code>entrypoints/{{ pattern[0] }}</code>
         </td>
-        <td style="padding: 6px; opacity: 50%">
+        <td class="cell-arrow">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -31,10 +31,35 @@ defineProps<{
             />
           </svg>
         </td>
-        <td style="white-space: nowrap; padding-left: 8px">
+        <td class="cell-output">
           <code>/{{ pattern[1] }}</code>
         </td>
       </tr>
     </tbody>
   </table>
 </template>
+
+<style scoped>
+.entrypoint-patterns {
+  width: 100%;
+
+  .col-filename {
+    width: 100%;
+  }
+
+  .cell-input {
+    white-space: nowrap;
+    padding-right: 8px;
+  }
+
+  .cell-arrow {
+    padding: 6px;
+    opacity: 0.5;
+  }
+
+  .cell-output {
+    white-space: nowrap;
+    padding-left: 8px;
+  }
+}
+</style>
diff --git a/docs/index.md b/docs/index.md
index eaa819134..b7a955fc3 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -79,7 +79,7 @@ WXT is a [MIT-licensed](https://github.com/wxt-dev/wxt/blob/main/LICENSE) open s
 
 <a href="https://github.com/sponsors/wxt-dev"><img alt="WXT Sponsors" src="https://raw.githubusercontent.com/wxt-dev/static/refs/heads/main/sponsorkit/sponsors-wide.svg"></a>
 
-## Put <span style="color: var(--vp-c-brand-1)">Developer Experience</span> First
+## Put Developer Experience First
 
 WXT simplifies the web extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.
 

From 4c9db26470ef9bc92b44d6a0e3afdbe3794c755f Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:13:45 +0200
Subject: [PATCH 15/33] docs: rollback .item class of custom.css

---
 docs/.vitepress/theme/custom.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index dc1a03b3b..cfd2ae449 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -64,3 +64,7 @@ body {
   background: linear-gradient(to bottom, transparent, var(--vp-c-bg));
   pointer-events: none;
 }
+
+.item {
+  z-index: 1;
+}

From 57b9d8baf5ce7aeadfc5dd23021d21320ae070a5 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:16:07 +0200
Subject: [PATCH 16/33] docs: Simplify css ExampleSearch.vue

---
 docs/.vitepress/components/ExampleSearch.vue | 66 ++++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index e139b8ca7..284749892 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -116,48 +116,48 @@ const filteredExamples = computed(() => {
     grid-template-columns: 256px 1fr;
     grid-template-rows: auto 1fr;
   }
-}
 
-.search {
-  grid-area: search;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  border-radius: 16px;
-}
+  .search {
+    grid-area: search;
+    background: var(--vp-c-bg-soft);
+    padding: 20px;
+    border-radius: 16px;
+
+    input {
+      font-size: 16px;
+    }
+  }
 
-.filters {
-  grid-area: filters;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  .filters {
+    grid-area: filters;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 
-  @media only screen and (min-width: 720px) {
-    border-radius: 16px;
+    @media only screen and (min-width: 720px) {
+      border-radius: 16px;
+    }
   }
-}
 
-.results {
-  grid-area: results;
-}
+  .results {
+    grid-area: results;
 
-.search input {
-  font-size: 16px;
-}
+    .search-results {
+      display: grid;
+      gap: 16px;
 
-.search-results {
-  display: grid;
-  gap: 16px;
+      @media only screen and (min-width: 800px) {
+        grid-template-columns: repeat(2, 1fr);
+      }
 
-  @media only screen and (min-width: 800px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
+      @media only screen and (min-width: 1024px) {
+        grid-template-columns: repeat(3, 1fr);
+      }
 
-  @media only screen and (min-width: 1024px) {
-    grid-template-columns: repeat(3, 1fr);
+      a {
+        background-color: red;
+      }
+    }
   }
 }
-
-a {
-  background-color: red;
-}
 </style>

From 37e72a0e674e5adc13b31c8894bb8f55e9454c13 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:25:17 +0200
Subject: [PATCH 17/33] docs: Simplify css of ExampleSearchFilterByItem.vue

---
 .../components/ExampleSearchFilterByItem.vue  | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index 0c3835d36..bc3c94a27 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -29,9 +29,9 @@ function toggleItem(pkg: string) {
       <span>Filter by {{ label }}</span> <span v-if="count">({{ count }})</span>
     </p>
     <div class="scroll-container">
-      <ul>
+      <ul class="items">
         <li v-for="item in items">
-          <label :title="item">
+          <label :title="item" class="item-label">
             <input
               type="checkbox"
               :checked="selectedItems[item]"
@@ -51,41 +51,41 @@ function toggleItem(pkg: string) {
   display: flex;
   flex-direction: column;
   background: var(--vp-c-bg-soft);
-}
 
-.scroll-container {
-  flex: 1;
-  position: relative;
-}
+  .header {
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 50%;
+  }
 
-.scroll-container ul {
-  position: absolute;
-  overflow-y: auto;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: small;
-  padding: 8px 16px 16px;
-}
+  .scroll-container {
+    flex: 1;
+    position: relative;
 
-.header {
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: bold;
-  opacity: 50%;
-}
+    .items {
+      position: absolute;
+      overflow-y: auto;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      font-size: small;
+      padding: 8px 16px 16px;
 
-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-}
+      .item-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
 
-input[type='checkbox'] {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
+        input[type='checkbox'] {
+          width: 16px;
+          height: 16px;
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
 }
 </style>

From 06384bd09f2da4ea882dd0c3da9b0dce69ca5727 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:27:59 +0200
Subject: [PATCH 18/33] docs: Simplify css of ExampleSearchResult.vue

---
 .../components/ExampleSearchResult.vue        | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index afd529fbb..c3099c216 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -24,38 +24,38 @@ a {
   border: 2px solid var(--vp-c-bg-soft);
   border-radius: 16px;
   gap: 8px;
-}
-
-a:hover {
-  outline: 2px solid var(--vp-c-brand-2);
-}
-
-.name {
-  font-weight: 500;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.description {
-  opacity: 70%;
-  font-size: 14px;
-  line-height: 130%;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.link {
-  opacity: 0;
-  transition: 250ms;
-  color: var(--vp-c-brand-2);
-  font-weight: bold;
-  text-align: right;
-}
 
-a:hover .link {
-  opacity: 100%;
+  &:hover {
+    outline: 2px solid var(--vp-c-brand);
+
+    .link {
+      opacity: 100%;
+    }
+  }
+
+  .name {
+    font-weight: 500;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .description {
+    opacity: 70%;
+    font-size: 14px;
+    line-height: 130%;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .link {
+    opacity: 0;
+    transition: 250ms;
+    color: var(--vp-c-brand);
+    font-weight: bold;
+    text-align: right;
+  }
 }
 </style>

From 7a6488169a536e26409e4ea54ed960e5c6315dac Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 10:32:12 +0200
Subject: [PATCH 19/33] docs: Add `noinspection CssUnresolvedCustomProperty`
 for build time css vars

---
 docs/.vitepress/components/BlogHome.vue                  | 2 ++
 docs/.vitepress/components/BlogLayout.vue                | 6 +++++-
 docs/.vitepress/components/BlogPostPreview.vue           | 4 ++++
 docs/.vitepress/components/ExampleSearch.vue             | 1 +
 docs/.vitepress/components/ExampleSearchFilterByItem.vue | 1 +
 docs/.vitepress/components/ExampleSearchResult.vue       | 1 +
 docs/.vitepress/components/UsingWxtSection.vue           | 4 ++++
 7 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index 53a7e8f5f..4e76a88d3 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -50,11 +50,13 @@ const posts = computed<Post[]>(() =>
       li {
         padding-top: 16px;
         margin-top: 16px;
+        /*noinspection CssUnresolvedCustomProperty*/
         border-top: 1px solid var(--vp-c-divider);
 
         &:last-child {
           padding-bottom: 16px;
           margin-bottom: 16px;
+          /*noinspection CssUnresolvedCustomProperty*/
           border-bottom: 1px solid var(--vp-c-divider);
         }
       }
diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 1cba42654..f1641420f 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -18,7 +18,10 @@ const date = useBlogDate(() => frontmatter.value.date);
           :href="`https://github.com/${author.github}`"
           class="author"
         >
-          <img :src="`https://github.com/${author.github}.png?size=96`" />
+          <img
+            :src="`https://github.com/${author.github}.png?size=96`"
+            alt="Author's avatar"
+          />
           <span>{{ author.name }}</span>
         </a>
         <span>&bull;</span>
@@ -41,6 +44,7 @@ const date = useBlogDate(() => frontmatter.value.date);
 
   .meta-row {
     display: flex;
+    /*noinspection CssUnresolvedCustomProperty*/
     color: var(--vp-c-text-2);
     gap: 16px;
     overflow: hidden;
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index 9c2099b11..92ddce2c1 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -39,16 +39,19 @@ const date = useBlogDate(() => props.post.date);
   transition: background 0.2s;
 
   &:hover {
+    /*noinspection CssUnresolvedCustomProperty*/
     background: var(--vp-c-default-3);
   }
 
   .title {
+    /*noinspection CssUnresolvedCustomProperty*/
     color: var(--vp-c-text-1);
     margin-bottom: 12px;
   }
 
   .description {
     font-size: 16px;
+    /*noinspection CssUnresolvedCustomProperty*/
     color: var(--vp-c-text-2);
     margin-bottom: 8px;
   }
@@ -56,6 +59,7 @@ const date = useBlogDate(() => props.post.date);
   .meta {
     font-weight: 400;
     font-size: 12px;
+    /*noinspection CssUnresolvedCustomProperty*/
     color: var(--vp-c-text-2);
   }
 }
diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index 284749892..310607897 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -119,6 +119,7 @@ const filteredExamples = computed(() => {
 
   .search {
     grid-area: search;
+    /*noinspection CssUnresolvedCustomProperty*/
     background: var(--vp-c-bg-soft);
     padding: 20px;
     border-radius: 16px;
diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index bc3c94a27..4eb35b1a2 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -50,6 +50,7 @@ function toggleItem(pkg: string) {
   height: 300px;
   display: flex;
   flex-direction: column;
+  /*noinspection CssUnresolvedCustomProperty*/
   background: var(--vp-c-bg-soft);
 
   .header {
diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index c3099c216..6c87efad2 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -21,6 +21,7 @@ a {
   padding: 16px;
   display: flex;
   flex-direction: column;
+  /*noinspection CssUnresolvedCustomProperty*/
   border: 2px solid var(--vp-c-bg-soft);
   border-radius: 16px;
   gap: 8px;
diff --git a/docs/.vitepress/components/UsingWxtSection.vue b/docs/.vitepress/components/UsingWxtSection.vue
index 8de415fb9..dc3f9b6dc 100644
--- a/docs/.vitepress/components/UsingWxtSection.vue
+++ b/docs/.vitepress/components/UsingWxtSection.vue
@@ -170,6 +170,7 @@ function formatStars(r: number): string {
   height: 116px;
   padding: 16px;
   border-radius: 8px;
+  /*noinspection CssUnresolvedCustomProperty*/
   background-color: var(--vp-c-default-soft);
 }
 
@@ -192,6 +193,7 @@ function formatStars(r: number): string {
   margin: 0 !important;
   padding: 16px;
   display: flex;
+  /*noinspection CssUnresolvedCustomProperty*/
   background-color: var(--vp-c-bg-soft);
   border-radius: 12px;
   flex: 1;
@@ -230,6 +232,7 @@ function formatStars(r: number): string {
   font-size: 12px;
   line-height: 1.45;
   opacity: 0.72;
+  /*noinspection CssUnresolvedCustomProperty*/
   color: var(--vp-c-text-2);
 }
 
@@ -253,6 +256,7 @@ function formatStars(r: number): string {
 }
 
 .store-link:hover {
+  /*noinspection CssUnresolvedCustomProperty*/
   color: var(--vp-c-text-1);
   text-decoration: underline;
 }

From 94a892d3103026c651a7fe6e3875748ee9fb63a4 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 11:18:35 +0200
Subject: [PATCH 20/33] docs: Remove rest colors of custom.css and use
 predefined one

---
 docs/.vitepress/components/ExampleSearchResult.vue | 6 ++++--
 docs/.vitepress/theme/custom.css                   | 5 -----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index 6c87efad2..051c500b5 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -27,7 +27,8 @@ a {
   gap: 8px;
 
   &:hover {
-    outline: 2px solid var(--vp-c-brand);
+    /*noinspection CssUnresolvedCustomProperty*/
+    outline: 2px solid var(--vp-c-brand-1);
 
     .link {
       opacity: 100%;
@@ -54,7 +55,8 @@ a {
   .link {
     opacity: 0;
     transition: 250ms;
-    color: var(--vp-c-brand);
+    /*noinspection CssUnresolvedCustomProperty*/
+    color: var(--vp-c-brand-1);
     font-weight: bold;
     text-align: right;
   }
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index cfd2ae449..dab5fcd14 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,9 +1,4 @@
 /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
-/* Colors */
-:root {
-  --vp-c-brand: #096600;
-}
-
 * {
   margin: 0;
   padding: 0;

From 0caeef6bf99bafe11f6df0b62d53b1bf2068ca4f Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 11:19:14 +0200
Subject: [PATCH 21/33] docs: Add noinspection for theme.css

---
 docs/.vitepress/theme/custom.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index dab5fcd14..ce4060806 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -13,6 +13,7 @@
   }
 
   tr {
+    /*noinspection CssUnresolvedCustomProperty*/
     border: 1px solid var(--vp-c-divider);
   }
 }
@@ -56,6 +57,7 @@ body {
   width: 100vw;
   height: 10vh;
   top: 100vh;
+  /*noinspection CssUnresolvedCustomProperty*/
   background: linear-gradient(to bottom, transparent, var(--vp-c-bg));
   pointer-events: none;
 }

From d122c7aa19444145596f468fc050f3a3f7c3a1d7 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 11:21:42 +0200
Subject: [PATCH 22/33] Revert "docs: Remove rest colors of custom.css and use
 predefined one"

This reverts commit eefe5ebb24dca177428fd85e117ff935e6a17ecb.
---
 docs/.vitepress/components/ExampleSearchResult.vue | 6 ++----
 docs/.vitepress/theme/custom.css                   | 5 +++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index 051c500b5..6c87efad2 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -27,8 +27,7 @@ a {
   gap: 8px;
 
   &:hover {
-    /*noinspection CssUnresolvedCustomProperty*/
-    outline: 2px solid var(--vp-c-brand-1);
+    outline: 2px solid var(--vp-c-brand);
 
     .link {
       opacity: 100%;
@@ -55,8 +54,7 @@ a {
   .link {
     opacity: 0;
     transition: 250ms;
-    /*noinspection CssUnresolvedCustomProperty*/
-    color: var(--vp-c-brand-1);
+    color: var(--vp-c-brand);
     font-weight: bold;
     text-align: right;
   }
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index ce4060806..9aaa79988 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,4 +1,9 @@
 /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
+/* Colors */
+:root {
+  --vp-c-brand: #096600;
+}
+
 * {
   margin: 0;
   padding: 0;

From 2e0d4e9c2382a0ed84e4a390862a7ce48d05629b Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 11:22:20 +0200
Subject: [PATCH 23/33] Revert "docs: Remove unnecessary style of index.md"

This reverts commit 1117a7823806e3001e5dac58bbc0d664602bc5f8.
---
 .../components/EntrypointPatterns.vue         | 37 +++----------------
 docs/index.md                                 |  2 +-
 2 files changed, 7 insertions(+), 32 deletions(-)

diff --git a/docs/.vitepress/components/EntrypointPatterns.vue b/docs/.vitepress/components/EntrypointPatterns.vue
index 6cc004654..df3f661ae 100644
--- a/docs/.vitepress/components/EntrypointPatterns.vue
+++ b/docs/.vitepress/components/EntrypointPatterns.vue
@@ -5,20 +5,20 @@ defineProps<{
 </script>
 
 <template>
-  <table class="no-vertical-dividers entrypoint-patterns">
+  <table class="no-vertical-dividers">
     <thead>
       <tr>
-        <th class="col-filename">Filename</th>
+        <th style="width: 100%">Filename</th>
         <th></th>
         <th>Output Path</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="pattern of patterns" :key="pattern[0]">
-        <td class="cell-input">
+      <tr v-for="pattern of patterns">
+        <td style="white-space: nowrap; padding-right: 8px">
           <code>entrypoints/{{ pattern[0] }}</code>
         </td>
-        <td class="cell-arrow">
+        <td style="padding: 6px; opacity: 50%">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -31,35 +31,10 @@ defineProps<{
             />
           </svg>
         </td>
-        <td class="cell-output">
+        <td style="white-space: nowrap; padding-left: 8px">
           <code>/{{ pattern[1] }}</code>
         </td>
       </tr>
     </tbody>
   </table>
 </template>
-
-<style scoped>
-.entrypoint-patterns {
-  width: 100%;
-
-  .col-filename {
-    width: 100%;
-  }
-
-  .cell-input {
-    white-space: nowrap;
-    padding-right: 8px;
-  }
-
-  .cell-arrow {
-    padding: 6px;
-    opacity: 0.5;
-  }
-
-  .cell-output {
-    white-space: nowrap;
-    padding-left: 8px;
-  }
-}
-</style>
diff --git a/docs/index.md b/docs/index.md
index b7a955fc3..eaa819134 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -79,7 +79,7 @@ WXT is a [MIT-licensed](https://github.com/wxt-dev/wxt/blob/main/LICENSE) open s
 
 <a href="https://github.com/sponsors/wxt-dev"><img alt="WXT Sponsors" src="https://raw.githubusercontent.com/wxt-dev/static/refs/heads/main/sponsorkit/sponsors-wide.svg"></a>
 
-## Put Developer Experience First
+## Put <span style="color: var(--vp-c-brand-1)">Developer Experience</span> First
 
 WXT simplifies the web extension development process by providing tools for zipping and publishing, the best-in-class dev mode, an opinionated project structure, and more. Iterate faster, develop features not build scripts, and use everything the JS ecosystem has to offer.
 

From 45ed91a828e76df9af67e8cac1e8615c34d1aaaa Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 11:22:59 +0200
Subject: [PATCH 24/33] docs: Make css and html of EntrypointPatterns.vue more
 clean

---
 .../components/EntrypointPatterns.vue         | 43 +++++++++++++++----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/docs/.vitepress/components/EntrypointPatterns.vue b/docs/.vitepress/components/EntrypointPatterns.vue
index df3f661ae..a7fad8aaa 100644
--- a/docs/.vitepress/components/EntrypointPatterns.vue
+++ b/docs/.vitepress/components/EntrypointPatterns.vue
@@ -5,36 +5,61 @@ defineProps<{
 </script>
 
 <template>
-  <table class="no-vertical-dividers">
+  <table class="no-vertical-dividers entrypoint-patterns">
     <thead>
       <tr>
-        <th style="width: 100%">Filename</th>
+        <th class="col-filename">Filename</th>
         <th></th>
         <th>Output Path</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="pattern of patterns">
-        <td style="white-space: nowrap; padding-right: 8px">
+      <tr v-for="pattern of patterns" :key="pattern[0]">
+        <td class="cell-input">
           <code>entrypoints/{{ pattern[0] }}</code>
         </td>
-        <td style="padding: 6px; opacity: 50%">
+        <td class="cell-arrow">
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
             height="20"
             viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill="currentColor"
               d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4Z"
+              fill="currentColor"
             />
           </svg>
         </td>
-        <td style="white-space: nowrap; padding-left: 8px">
+        <td class="cell-output">
           <code>/{{ pattern[1] }}</code>
         </td>
       </tr>
     </tbody>
   </table>
 </template>
+
+<style scoped>
+.entrypoint-patterns {
+  width: 100%;
+
+  .col-filename {
+    width: 100%;
+  }
+
+  .cell-input {
+    white-space: nowrap;
+    padding-right: 8px;
+  }
+
+  .cell-arrow {
+    padding: 6px;
+    opacity: 0.5;
+  }
+
+  .cell-output {
+    white-space: nowrap;
+    padding-left: 8px;
+  }
+}
+</style>

From ef7d103493ce3d67e839d874bf968ccf6476543d Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 12:19:03 +0200
Subject: [PATCH 25/33] revert: Rollback root theme colors

---
 docs/.vitepress/components/ExampleSearchResult.vue |  4 ++--
 docs/.vitepress/theme/custom.css                   | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index 6c87efad2..c727af2a6 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -27,7 +27,7 @@ a {
   gap: 8px;
 
   &:hover {
-    outline: 2px solid var(--vp-c-brand);
+    outline: 2px solid var(--vp-c-brand-3);
 
     .link {
       opacity: 100%;
@@ -54,7 +54,7 @@ a {
   .link {
     opacity: 0;
     transition: 250ms;
-    color: var(--vp-c-brand);
+    color: var(--vp-c-brand-3);
     font-weight: bold;
     text-align: right;
   }
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 9aaa79988..309e75d21 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,7 +1,15 @@
 /* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css */
 /* Colors */
 :root {
-  --vp-c-brand: #096600;
+  --wxt-c-green-1: #0b8a00;
+  --wxt-c-green-2: #096600;
+  --wxt-c-green-3: #096600;
+  --wxt-c-green-soft: rgba(11, 138, 0, 0.14);
+
+  --vp-c-brand-1: var(--wxt-c-green-1);
+  --vp-c-brand-2: var(--wxt-c-green-2);
+  --vp-c-brand-3: var(--wxt-c-green-3);
+  --vp-c-brand-soft: var(--wxt-c-green-soft);
 }
 
 * {

From d85413f62190bfd9bb7cdce122be4cf64b49a73c Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Fri, 17 Apr 2026 12:26:49 +0200
Subject: [PATCH 26/33] revert: Rollback .dark colors of main page

---
 docs/.vitepress/theme/custom.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 309e75d21..39cd5d55c 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -12,6 +12,13 @@
   --vp-c-brand-soft: var(--wxt-c-green-soft);
 }
 
+.dark {
+  --wxt-c-green-1: #67d45e;
+  --wxt-c-green-2: #329929;
+  --wxt-c-green-3: #21651b;
+  --wxt-c-green-soft: rgba(103, 212, 94, 0.14);
+}
+
 * {
   margin: 0;
   padding: 0;

From a2ae2c45048f5895240f3ed4aaea827d0f56fd62 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Mon, 27 Apr 2026 19:53:25 +0200
Subject: [PATCH 27/33] fix: class name of BlogLayout.vue after conflicts
 resolve

---
 docs/.vitepress/components/BlogLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index f1641420f..3a263064c 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -9,7 +9,7 @@ const date = useBlogDate(() => frontmatter.value.date);
 
 <template>
   <div>
-    <main class="container-content">
+    <main class="container">
       <h1 v-html="frontmatter.title" />
       <p class="meta-row">
         <a

From 53c082f7cbabb3f5a24b202f34cb4baac5e80387 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Mon, 27 Apr 2026 19:54:07 +0200
Subject: [PATCH 28/33] fix: remove `noinspection` from vue components

---
 docs/.vitepress/components/BlogHome.vue                  | 2 --
 docs/.vitepress/components/BlogLayout.vue                | 1 -
 docs/.vitepress/components/BlogPostPreview.vue           | 4 ----
 docs/.vitepress/components/ExampleSearch.vue             | 1 -
 docs/.vitepress/components/ExampleSearchFilterByItem.vue | 1 -
 docs/.vitepress/components/ExampleSearchResult.vue       | 1 -
 docs/.vitepress/components/UsingWxtSection.vue           | 4 ----
 docs/.vitepress/theme/custom.css                         | 2 --
 8 files changed, 16 deletions(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index 4e76a88d3..53a7e8f5f 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -50,13 +50,11 @@ const posts = computed<Post[]>(() =>
       li {
         padding-top: 16px;
         margin-top: 16px;
-        /*noinspection CssUnresolvedCustomProperty*/
         border-top: 1px solid var(--vp-c-divider);
 
         &:last-child {
           padding-bottom: 16px;
           margin-bottom: 16px;
-          /*noinspection CssUnresolvedCustomProperty*/
           border-bottom: 1px solid var(--vp-c-divider);
         }
       }
diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 3a263064c..8bf6a29ab 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -44,7 +44,6 @@ const date = useBlogDate(() => frontmatter.value.date);
 
   .meta-row {
     display: flex;
-    /*noinspection CssUnresolvedCustomProperty*/
     color: var(--vp-c-text-2);
     gap: 16px;
     overflow: hidden;
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index 92ddce2c1..9c2099b11 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -39,19 +39,16 @@ const date = useBlogDate(() => props.post.date);
   transition: background 0.2s;
 
   &:hover {
-    /*noinspection CssUnresolvedCustomProperty*/
     background: var(--vp-c-default-3);
   }
 
   .title {
-    /*noinspection CssUnresolvedCustomProperty*/
     color: var(--vp-c-text-1);
     margin-bottom: 12px;
   }
 
   .description {
     font-size: 16px;
-    /*noinspection CssUnresolvedCustomProperty*/
     color: var(--vp-c-text-2);
     margin-bottom: 8px;
   }
@@ -59,7 +56,6 @@ const date = useBlogDate(() => props.post.date);
   .meta {
     font-weight: 400;
     font-size: 12px;
-    /*noinspection CssUnresolvedCustomProperty*/
     color: var(--vp-c-text-2);
   }
 }
diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index 310607897..284749892 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -119,7 +119,6 @@ const filteredExamples = computed(() => {
 
   .search {
     grid-area: search;
-    /*noinspection CssUnresolvedCustomProperty*/
     background: var(--vp-c-bg-soft);
     padding: 20px;
     border-radius: 16px;
diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index 4eb35b1a2..bc3c94a27 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -50,7 +50,6 @@ function toggleItem(pkg: string) {
   height: 300px;
   display: flex;
   flex-direction: column;
-  /*noinspection CssUnresolvedCustomProperty*/
   background: var(--vp-c-bg-soft);
 
   .header {
diff --git a/docs/.vitepress/components/ExampleSearchResult.vue b/docs/.vitepress/components/ExampleSearchResult.vue
index c727af2a6..b093e7273 100644
--- a/docs/.vitepress/components/ExampleSearchResult.vue
+++ b/docs/.vitepress/components/ExampleSearchResult.vue
@@ -21,7 +21,6 @@ a {
   padding: 16px;
   display: flex;
   flex-direction: column;
-  /*noinspection CssUnresolvedCustomProperty*/
   border: 2px solid var(--vp-c-bg-soft);
   border-radius: 16px;
   gap: 8px;
diff --git a/docs/.vitepress/components/UsingWxtSection.vue b/docs/.vitepress/components/UsingWxtSection.vue
index dc3f9b6dc..8de415fb9 100644
--- a/docs/.vitepress/components/UsingWxtSection.vue
+++ b/docs/.vitepress/components/UsingWxtSection.vue
@@ -170,7 +170,6 @@ function formatStars(r: number): string {
   height: 116px;
   padding: 16px;
   border-radius: 8px;
-  /*noinspection CssUnresolvedCustomProperty*/
   background-color: var(--vp-c-default-soft);
 }
 
@@ -193,7 +192,6 @@ function formatStars(r: number): string {
   margin: 0 !important;
   padding: 16px;
   display: flex;
-  /*noinspection CssUnresolvedCustomProperty*/
   background-color: var(--vp-c-bg-soft);
   border-radius: 12px;
   flex: 1;
@@ -232,7 +230,6 @@ function formatStars(r: number): string {
   font-size: 12px;
   line-height: 1.45;
   opacity: 0.72;
-  /*noinspection CssUnresolvedCustomProperty*/
   color: var(--vp-c-text-2);
 }
 
@@ -256,7 +253,6 @@ function formatStars(r: number): string {
 }
 
 .store-link:hover {
-  /*noinspection CssUnresolvedCustomProperty*/
   color: var(--vp-c-text-1);
   text-decoration: underline;
 }
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 39cd5d55c..2e5e1510e 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -33,7 +33,6 @@
   }
 
   tr {
-    /*noinspection CssUnresolvedCustomProperty*/
     border: 1px solid var(--vp-c-divider);
   }
 }
@@ -77,7 +76,6 @@ body {
   width: 100vw;
   height: 10vh;
   top: 100vh;
-  /*noinspection CssUnresolvedCustomProperty*/
   background: linear-gradient(to bottom, transparent, var(--vp-c-bg));
   pointer-events: none;
 }

From e1788859f93cd038fe306531b0d5b8ed19e27b1b Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Sat, 2 May 2026 09:51:12 +0200
Subject: [PATCH 29/33] docs: remove unnecessary pointer-events prop for
 custom.css

---
 docs/.vitepress/theme/custom.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 2e5e1510e..6c21e3600 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -60,14 +60,13 @@ body {
 /* Add Aaron's favorite pic from Artemis II to the hero section because it's cool. */
 .dark .VPHome::before {
   content: '';
+  position: absolute;
   background-image: url('../../assets/art002e009298.jpg');
   opacity: 50%;
-  position: absolute;
   width: 100vw;
   height: 110vh;
   background-size: cover;
   background-position: 90%;
-  pointer-events: none;
 }
 
 .dark .VPHome::after {
@@ -77,7 +76,6 @@ body {
   height: 10vh;
   top: 100vh;
   background: linear-gradient(to bottom, transparent, var(--vp-c-bg));
-  pointer-events: none;
 }
 
 .item {

From 93ba58be850fa7955b254d0d3f2556a05c51f428 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Mon, 11 May 2026 17:12:58 +0200
Subject: [PATCH 30/33] Make BlogHome and PostPreview like before

---
 docs/.vitepress/components/BlogHome.vue        |  5 +++--
 docs/.vitepress/components/BlogPostPreview.vue | 17 ++++-------------
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/docs/.vitepress/components/BlogHome.vue b/docs/.vitepress/components/BlogHome.vue
index 53a7e8f5f..8c6fb0a91 100644
--- a/docs/.vitepress/components/BlogHome.vue
+++ b/docs/.vitepress/components/BlogHome.vue
@@ -40,6 +40,9 @@ const posts = computed<Post[]>(() =>
     width: 100%;
 
     h1 {
+      font-size: 32px;
+      font-weight: 600;
+      margin-top: 10px;
       padding-bottom: 16px;
     }
 
@@ -50,12 +53,10 @@ const posts = computed<Post[]>(() =>
       li {
         padding-top: 16px;
         margin-top: 16px;
-        border-top: 1px solid var(--vp-c-divider);
 
         &:last-child {
           padding-bottom: 16px;
           margin-bottom: 16px;
-          border-bottom: 1px solid var(--vp-c-divider);
         }
       }
     }
diff --git a/docs/.vitepress/components/BlogPostPreview.vue b/docs/.vitepress/components/BlogPostPreview.vue
index 9c2099b11..24b682fd6 100644
--- a/docs/.vitepress/components/BlogPostPreview.vue
+++ b/docs/.vitepress/components/BlogPostPreview.vue
@@ -16,7 +16,7 @@ const date = useBlogDate(() => props.post.date);
 
 <template>
   <li class="blog-list-item">
-    <a :href="post.url" class="post-link">
+    <a :href="post.url">
       <div class="vp-doc">
         <h3 class="title" v-html="post.title" />
         <p class="description" v-html="post.description" />
@@ -31,26 +31,17 @@ const date = useBlogDate(() => props.post.date);
 </template>
 
 <style scoped>
-.post-link .vp-doc {
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-  border-radius: 16px;
-  transition: background 0.2s;
-
-  &:hover {
-    background: var(--vp-c-default-3);
+.vp-doc {
+  * {
+    margin-block: 10px;
   }
 
   .title {
     color: var(--vp-c-text-1);
-    margin-bottom: 12px;
   }
 
   .description {
-    font-size: 16px;
     color: var(--vp-c-text-2);
-    margin-bottom: 8px;
   }
 
   .meta {

From 7fe2d2e7c2ed2eec6447e372fd3c32ea74f21369 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Mon, 11 May 2026 17:34:53 +0200
Subject: [PATCH 31/33] Make BlogLayout like before

---
 docs/.vitepress/components/BlogLayout.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/components/BlogLayout.vue b/docs/.vitepress/components/BlogLayout.vue
index 8bf6a29ab..0c58ba977 100644
--- a/docs/.vitepress/components/BlogLayout.vue
+++ b/docs/.vitepress/components/BlogLayout.vue
@@ -8,7 +8,7 @@ const date = useBlogDate(() => frontmatter.value.date);
 </script>
 
 <template>
-  <div>
+  <div class="vp-doc">
     <main class="container">
       <h1 v-html="frontmatter.title" />
       <p class="meta-row">
@@ -33,13 +33,17 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-.container {
-  max-width: 1080px;
-  padding: 32px;
-  margin: auto;
+.vp-doc {
+  display: flex;
 
-  @media (min-width: 768px) {
-    padding: 64px;
+  .container {
+    max-width: 1080px;
+    padding: 32px;
+    margin: auto;
+
+    @media (min-width: 768px) {
+      padding: 64px;
+    }
   }
 
   .meta-row {
@@ -52,6 +56,10 @@ const date = useBlogDate(() => frontmatter.value.date);
     .author {
       display: flex;
       gap: 8px;
+      align-items: center;
+      color: var(--vp-c-text-2);
+      font-weight: normal;
+      text-decoration: none;
 
       :hover {
         text-decoration: underline;

From eeff6612ce126901c790f385b48bd89d698faa43 Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Tue, 12 May 2026 17:05:08 +0200
Subject: [PATCH 32/33] Make necessary changes to Examples

---
 docs/.vitepress/components/ExampleSearch.vue     | 16 ++++++++--------
 .../components/ExampleSearchFilterByItem.vue     |  1 +
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/docs/.vitepress/components/ExampleSearch.vue b/docs/.vitepress/components/ExampleSearch.vue
index 284749892..417247b1b 100644
--- a/docs/.vitepress/components/ExampleSearch.vue
+++ b/docs/.vitepress/components/ExampleSearch.vue
@@ -72,19 +72,19 @@ const filteredExamples = computed(() => {
 
     <div class="filters">
       <ExampleSearchFilterByItem
-        label="APIs"
-        :items="exampleMetadata?.allApis"
         v-model="selectedApis"
+        :items="exampleMetadata?.allApis"
+        label="APIs"
       />
       <ExampleSearchFilterByItem
-        label="Permissions"
-        :items="exampleMetadata?.allPermissions"
         v-model="selectedPermissions"
+        :items="exampleMetadata?.allPermissions"
+        label="Permissions"
       />
       <ExampleSearchFilterByItem
-        label="Packages"
-        :items="exampleMetadata?.allPackages"
         v-model="selectedPackages"
+        :items="exampleMetadata?.allPackages"
+        label="Packages"
       />
     </div>
 
@@ -112,7 +112,7 @@ const filteredExamples = computed(() => {
     'filters results';
   gap: 16px;
 
-  @media only screen and (min-width: 720px) {
+  @media only screen and (min-width: 710px) {
     grid-template-columns: 256px 1fr;
     grid-template-rows: auto 1fr;
   }
@@ -134,7 +134,7 @@ const filteredExamples = computed(() => {
     flex-direction: column;
     gap: 10px;
 
-    @media only screen and (min-width: 720px) {
+    @media only screen and (min-width: 710px) {
       border-radius: 16px;
     }
   }
diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index bc3c94a27..f7ce10d6f 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -51,6 +51,7 @@ function toggleItem(pkg: string) {
   display: flex;
   flex-direction: column;
   background: var(--vp-c-bg-soft);
+  border-radius: 20px;
 
   .header {
     padding: 8px 16px;

From 6239a8f8799d5adc1b610a22846a1d1329b1da3f Mon Sep 17 00:00:00 2001
From: PatrykKuniczak <p.kuniczak@gmail.com>
Date: Tue, 12 May 2026 17:10:24 +0200
Subject: [PATCH 33/33] Create styles for ExampleSearchFilterByItem
 .filter-container scrollbars

---
 docs/.vitepress/components/ExampleSearchFilterByItem.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/docs/.vitepress/components/ExampleSearchFilterByItem.vue b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
index f7ce10d6f..3c174c9a2 100644
--- a/docs/.vitepress/components/ExampleSearchFilterByItem.vue
+++ b/docs/.vitepress/components/ExampleSearchFilterByItem.vue
@@ -33,8 +33,8 @@ function toggleItem(pkg: string) {
         <li v-for="item in items">
           <label :title="item" class="item-label">
             <input
-              type="checkbox"
               :checked="selectedItems[item]"
+              type="checkbox"
               @input="toggleItem(item)"
             />
             <span>{{ item }}</span>
@@ -52,6 +52,9 @@ function toggleItem(pkg: string) {
   flex-direction: column;
   background: var(--vp-c-bg-soft);
   border-radius: 20px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--vp-c-brand-3) transparent;
+  padding-bottom: 10px;
 
   .header {
     padding: 8px 16px;