Align button styles across all eight variants

docs/css/style-luma.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "../../src/css/base/base.css";
+@import "../../src/css/styles/style-luma.css";

docs/css/style-lyra.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "../../src/css/base/base.css";
+@import "../../src/css/styles/style-lyra.css";

docs/css/style-maia.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "../../src/css/base/base.css";
+@import "../../src/css/styles/style-maia.css";

docs/css/style-mira.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "../../src/css/base/base.css";
+@import "../../src/css/styles/style-mira.css";

docs/css/style-nova.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "../../src/css/base/base.css";
+@import "../../src/css/styles/style-nova.css";

docs/css/style-rhea.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "../../src/css/base/base.css";
+@import "../../src/css/styles/style-rhea.css";

docs/css/style-sera.css

@@ -0,0 +1,3 @@
+@import "tailwindcss" source(none);
+@import "../../src/css/base/base.css";
+@import "../../src/css/styles/style-sera.css";

docs/src/_includes/layouts/base.njk

@@ -36,6 +36,17 @@
       }
     })();
   </script>
+  {# Style variant #}
+  <script>
+    (function() {
+      try {
+        const storedStyle = localStorage.getItem('styleVariant') || 'vega';
+        document.documentElement.dataset.styleVariant = storedStyle;
+      } catch (event) {
+        console.error('Could not apply style variant from localStorage', event);
+      }
+    })();
+  </script>
   {# Meta #}
   <meta charset="utf-8">
   <meta http-equiv="Content-Language" content="en">
@@ -68,6 +79,18 @@
   <meta name="twitter:creator" content="{{ site.author.x }}">
   {# CSS #}
   <link rel="stylesheet" href="/assets/styles.css">
+  <link rel="stylesheet" id="style-variant-stylesheet">
+  <script>
+    (() => {
+      const styleLink = document.getElementById('style-variant-stylesheet');
+      const styleVariant = document.documentElement.dataset.styleVariant || 'vega';
+      if (styleVariant === 'vega') {
+        styleLink.removeAttribute('href');
+      } else {
+        styleLink.href = `/assets/style-${styleVariant}.css`;
+      }
+    })();
+  </script>
   {# JS #}
   <script src="/assets/js/basecoat.js?v={{ pkg.version }}" defer></script>
   <script src="/assets/js/command.js?v={{ pkg.version }}" defer></script>
@@ -109,4 +132,4 @@
 {% from "toast.njk" import toaster %}
 {{ toaster() }}
 </body>
-</html>
+</html>

docs/src/_includes/partials/header.njk

@@ -38,6 +38,44 @@
       });
     })();
   </script>
+  <select
+    class="select h-8 leading-none"
+    id="style-select"
+  >
+    <option value="vega">Vega</option>
+    <option value="nova">Nova</option>
+    <option value="maia">Maia</option>
+    <option value="lyra">Lyra</option>
+    <option value="mira">Mira</option>
+    <option value="luma">Luma</option>
+    <option value="sera">Sera</option>
+    <option value="rhea">Rhea</option>
+  </select>
+  <script>
+    (() => {
+      const styleSelect = document.getElementById('style-select');
+      const styleLink = document.getElementById('style-variant-stylesheet');
+      const applyStyle = (styleName) => {
+        const nextStyle = styleName || 'vega';
+        document.documentElement.dataset.styleVariant = nextStyle;
+        if (nextStyle === 'vega') {
+          styleLink.removeAttribute('href');
+        } else {
+          styleLink.href = `/assets/style-${nextStyle}.css`;
+        }
+      };
+
+      const storedStyle = localStorage.getItem('styleVariant') || 'vega';
+      if (styleSelect) styleSelect.value = storedStyle;
+      applyStyle(storedStyle);
+
+      styleSelect.addEventListener('change', () => {
+        const newStyle = styleSelect.value || 'vega';
+        applyStyle(newStyle);
+        localStorage.setItem('styleVariant', newStyle);
+      });
+    })();
+  </script>
 
   <button
     type="button"
@@ -61,4 +99,4 @@
   >
     {% lucide "github" %}
   </a>
-</div>
+</div>

docs/src/_includes/partials/sidebar.njk

@@ -173,4 +173,4 @@
   footer=footer,
   content_attrs={ "class": "scrollbar [&_[data-new-link]::after]:content-['New'] [&_[data-new-link]::after]:ml-auto [&_[data-new-link]::after]:text-xs [&_[data-new-link]::after]:font-medium [&_[data-new-link]::after]:bg-sidebar-primary [&_[data-new-link]::after]:text-sidebar-primary-foreground [&_[data-new-link]::after]:px-2 [&_[data-new-link]::after]:py-0.5 [&_[data-new-link]::after]:rounded-md" },
   menu=menu
-) }}
+) }}

docs/src/components/button.njk

@@ -28,6 +28,10 @@ toc:
         id: example-loading
       - label: Large
         id: example-large
+      - label: Extra Small
+        id: example-extra-small
+      - label: Extra Small Icon
+        id: example-extra-small-icon
       - label: Small
         id: example-small
 ---
@@ -60,9 +64,10 @@ toc:
     <li>
       <b>Sizes</b>:
       <ul>
+        <li><code>btn-xs</code> for extra small buttons.</li>
         <li><code>btn-sm</code> for small buttons.</li>
         <li><code>btn-lg</code> for large buttons.</li>
-        <li>You can combine sizes with any variant, for example <code>btn-lg-destructive</code> or <code>btn-sm-icon-outline</code>.</li>
+        <li>You can combine sizes with any variant, for example <code>btn-lg-destructive</code>, <code>btn-xs-outline</code> or <code>btn-sm-icon-outline</code>.</li>
       </ul>
     </li>
   </ul>
@@ -133,9 +138,23 @@ toc:
 </button>{% endset %}
 {{ code_preview("button-large", code) }}
 
+<h3 id="example-extra-small"><a href="#example-extra-small">Extra Small</a></h3>
+
+{% set code %}<button class="btn-xs-outline">
+  XS outline
+</button>{% endset %}
+{{ code_preview("button-extra-small", code) }}
+
+<h3 id="example-extra-small-icon"><a href="#example-extra-small-icon">Extra Small Icon</a></h3>
+
+{% set code %}<button class="btn-xs-icon-outline">
+  {% lucide "plus" %}
+</button>{% endset %}
+{{ code_preview("button-extra-small-icon", code) }}
+
 <h3 id="example-small"><a href="#example-small">Small</a></h3>
 
 {% set code %}<button class="btn-sm-icon-destructive">
   {% lucide "trash" %}
 </button>{% endset %}
-{{ code_preview("button-small", code) }}
+{{ code_preview("button-small", code) }}