fix: refactor css

theme/static/css/components.css

@@ -0,0 +1,80 @@
+@layer components {
+    .card {
+        @apply rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800;
+    }
+
+    .link {
+        @apply text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white;
+    }
+
+    .product-grid {
+        @apply mb-4 grid gap-4 sm:grid-cols-2 md:mb-8 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5;
+    }
+
+    .button-gray {
+        @apply rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900
+        hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4
+        focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700
+        dark:hover:text-white dark:focus:ring-gray-700 cursor-pointer;
+    }
+
+    .page {
+        @apply flex justify-center items-center text-lg text-gray-900 dark:text-gray-400 mt-4;
+    }
+
+    .navbar-bg {
+        @apply bg-white dark:bg-gray-800 antialiased;
+    }
+
+    .navbar-content {
+        @apply max-w-screen-xl px-4 mx-auto 2xl:px-0 py-4;
+    }
+
+    .navbar-align {
+        @apply flex items-center justify-between;
+    }
+
+    .navbar-categories {
+        @apply hidden lg:flex items-center justify-start gap-6 md:gap-8 py-3 sm:justify-center;
+    }
+
+    .navbar-web-title {
+        @apply text-xl font-semibold text-gray-900 dark:text-white;
+    }
+
+    .navbar-title {
+        @apply flex items-center space-x-8;
+    }
+
+    .navbar-category-link {
+        @apply flex text-sm font-medium text-gray-900 hover:text-primary-700 dark:text-white dark:hover:text-primary-500;
+    }
+
+    .navbar-dropdown-menu {
+        @apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 border border-gray-200 rounded-lg py-3  px-4 mt-4;
+    }
+
+    .navbar-dropdown-menu-list {
+        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
+    }
+
+    .navbar-dropdown-menu-list-items {
+        @apply text-gray-900 dark:text-white text-sm font-medium dark:text-white space-y-3;
+    }
+
+    .navbar-dropdown-menu-title {
+        @apply hover:text-primary-700 dark:hover:text-primary-500;
+    }
+
+    .icon-button {
+        @apply flex text-gray-500 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer;
+    }
+
+    .link-button {
+        @apply inline-flex items-center rounded-lg justify-center p-4 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm font-medium leading-none text-gray-900 dark:text-white;
+    }
+
+    .cart-navbar-floating {
+        @apply absolute top-12 z-10 w-75 divide-y divide-gray-100 overflow-hidden overflow-y-auto rounded-lg bg-white antialiased shadow dark:divide-gray-600 dark:bg-gray-700 right-0 p-4;
+    }
+}

theme/static/css/main.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./components.css";
 
 
 @theme {
@@ -7,7 +8,6 @@
 
     --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
     --ease-snappy: cubic-bezier(0.2, 0, 0, 1);  /* ... */
-
     --color-primary-50: #fff1f2;
     --color-primary-100: #ffe4e6;
     --color-primary-200: #fecdd3;

theme/templates/components/theme-switch.html

@@ -3,7 +3,7 @@
   id="theme-toggle"
   type="button"
   aria-label="switchtheme"
-  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-lg text-sm p-4 cursor-pointer">
+  class="icon-button">
     {% include 'components/icons/moon.svg' %}
     {% include 'components/icons/sun.svg' %}
 </button>

theme/templates/theme/main.css.template

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./components.css";
 
 
 @theme {