styles(tailwind): enhance heroui plugin configuration with layout and theme settings

Author: tyronejosee

.github/workflows/code_atlas_flow.yml

@@ -30,12 +30,10 @@ jobs:
 
       - name: Install frontend dependencies
         run: |
-          cd frontend
           pnpm install
 
       - name: Run frontend lint
         run: |
-          cd frontend
           pnpm run lint
 
       # - name: Run frontend build

tailwind.config.ts

@@ -16,6 +16,63 @@ export default {
       },
     },
   },
-  plugins: [heroui()],
+  plugins: [
+    heroui({
+      layout: {
+        dividerWeight: "1px",
+        disabledOpacity: 0.5,
+        fontSize: {
+          tiny: "0.75rem",
+          small: "0.875rem",
+          medium: "1rem",
+          large: "1.125rem",
+        },
+        lineHeight: {
+          tiny: "1rem",
+          small: "1.25rem",
+          medium: "1.5rem",
+          large: "1.75rem",
+        },
+        radius: {
+          small: "8px",
+          medium: "12px",
+          large: "14px",
+        },
+        borderWidth: {
+          small: "1px",
+          medium: "2px",
+          large: "3px",
+        },
+      },
+      themes: {
+        light: {
+          layout: {
+            hoverOpacity: 0.8,
+            boxShadow: {
+              small:
+                "0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+              medium:
+                "0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+              large:
+                "0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+            },
+          },
+        },
+        dark: {
+          layout: {
+            hoverOpacity: 0.9,
+            boxShadow: {
+              small:
+                "0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",
+              medium:
+                "0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",
+              large:
+                "0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)",
+            },
+          },
+        },
+      },
+    }),
+  ],
   darkMode: "class",
 } satisfies Config;