Minor: simplify shared styling setup for admin and auth UI.

docs/package.json

@@ -9,7 +9,7 @@
     "preview": "astro preview",
     "astro": "astro",
     "check": "astro check",
-    "format": "prettier -w tailwind.config.mjs astro.config.mjs src "
+    "format": "prettier -w tailwind.config.ts astro.config.mjs src "
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",

docs/tailwind.config.ts

@@ -1,3 +1,5 @@
+import type { Config } from "tailwindcss";
+
 import starlightPlugin from "@astrojs/starlight-tailwind";
 
 // Generated color palettes
@@ -18,7 +20,6 @@ const gray = {
   900: "#121a1c",
 };
 
-/** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
@@ -30,4 +31,4 @@ export default {
     },
   },
   plugins: [starlightPlugin()],
-};
+} satisfies Config;

trailbase-core/js/admin/src/index.tsx

@@ -1,8 +1,8 @@
 /* @refresh reload */
 import { render } from "solid-js/web";
 
-import "@common/css/global.css";
-import "@common/css/kobalte.css";
+import "@styles/global.css";
+import "@styles/kobalte.css";
 
 import App from "./App";
 

trailbase-core/js/admin/tailwind.config.ts

@@ -1,5 +1,11 @@
+import animate from "tailwindcss-animate";
+import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
-import { commonTailwindConfig } from "../common/tailwind.config.mjs";
+import { commonTailwindConfig } from "../styles/tailwind.config.mjs";
 
-export default commonTailwindConfig satisfies Config;
+export default {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
+  presets: [commonTailwindConfig],
+  plugins: [animate, typography],
+} satisfies Config;

trailbase-core/js/admin/tsconfig.json

@@ -1,6 +1,12 @@
 {
-  "extends": "../common/tsconfig.base.json",
   "compilerOptions": {
+    "strict": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": false,
+    "moduleResolution": "bundler",
+    "target": "ESNext",
+    "module": "ESNext",
     "jsx": "preserve",
     "jsxImportSource": "solid-js",
     "types": [
@@ -11,7 +17,7 @@
       "@/*": ["./src/*"],
       "@proto/*": ["./proto/*"],
       "@bindings/*": ["../../bindings/*"],
-      "@common/*": ["../common/*"]
+      "@styles/*": ["../styles/*"]
     }
   },
   "exclude": [

trailbase-core/js/admin/ui.config.json

@@ -2,7 +2,7 @@
   "$schema": "https://solid-ui.com/schema.json",
   "tsx": true,
   "tailwind": {
-    "css": "../common/css/global.css",
+    "css": "../styles/global.css",
     "config": "tailwind.config.ts",
     "prefix": ""
   },

trailbase-core/js/auth/src/layouts/BaseLayout.astro

@@ -1,6 +1,6 @@
 ---
-import "@common/css/global.css";
-import "@common/css/kobalte.css";
+import "@styles/global.css";
+import "@styles/kobalte.css";
 
 import favicon from "@/assets/favicon.svg";
 

trailbase-core/js/auth/tailwind.config.ts

@@ -1,5 +1,11 @@
+import animate from "tailwindcss-animate";
+import typography from "@tailwindcss/typography";
 import type { Config } from "tailwindcss";
 
-import { commonTailwindConfig } from "../common/tailwind.config.mjs";
+import { commonTailwindConfig } from "../styles/tailwind.config.mjs";
 
-export default commonTailwindConfig satisfies Config;
+export default {
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
+  presets: [commonTailwindConfig],
+  plugins: [animate, typography],
+} satisfies Config;

trailbase-core/js/auth/tsconfig.json

@@ -7,7 +7,7 @@
     "paths": {
       "@/*": ["./src/*"],
       "@bindings/*": ["../../bindings/*"],
-      "@common/*": ["../common/*"]
+      "@styles/*": ["../styles/*"]
     }
   },
   "exclude": [

trailbase-core/js/auth/ui.config.json

@@ -3,7 +3,7 @@
   "componentDir": "./src/components/ui",
   "tailwind": {
     "config": "tailwind.config.cjs",
-    "css": "src/styles/global.css"
+    "css": "../styles/global.css"
   },
   "aliases": {
     "path": "@/*"

trailbase-core/js/common/tailwind.config.mjs

@@ -1,153 +0,0 @@
-import animate from "tailwindcss-animate";
-import typography from "@tailwindcss/typography";
-import { fontFamily } from "tailwindcss/defaultTheme";
-
-/**@type {import("tailwindcss").Config} */
-const solidUiPreset = {
-  darkMode: ["class", '[data-kb-theme="dark"]'],
-  content: [
-    "./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        info: {
-          DEFAULT: "hsl(var(--info))",
-          foreground: "hsl(var(--info-foreground))",
-        },
-        success: {
-          DEFAULT: "hsl(var(--success))",
-          foreground: "hsl(var(--success-foreground))",
-        },
-        warning: {
-          DEFAULT: "hsl(var(--warning))",
-          foreground: "hsl(var(--warning-foreground))",
-        },
-        error: {
-          DEFAULT: "hsl(var(--error))",
-          foreground: "hsl(var(--error-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        xl: "calc(var(--radius) + 4px)",
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["Inter", ...fontFamily.sans],
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--kb-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--kb-accordion-content-height)" },
-          to: { height: 0 },
-        },
-        "content-show": {
-          from: { opacity: 0, transform: "scale(0.96)" },
-          to: { opacity: 1, transform: "scale(1)" },
-        },
-        "content-hide": {
-          from: { opacity: 1, transform: "scale(1)" },
-          to: { opacity: 0, transform: "scale(0.96)" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "content-show": "content-show 0.2s ease-out",
-        "content-hide": "content-hide 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [animate],
-};
-
-// Colors from starlight.
-const accent = {
-  200: "#92d1fe",
-  600: "#0073aa",
-  900: "#003653",
-  950: "#00273d",
-};
-
-const gray = {
-  100: "#f3f7f9",
-  200: "#e7eff2",
-  300: "#bac4c8",
-  400: "#7b8f96",
-  500: "#495c62",
-  700: "#2a3b41",
-  800: "#182a2f",
-  900: "#121a1c",
-};
-
-/**@type {import("tailwindcss").Config} */
-export const commonTailwindConfig = {
-  darkMode: ["class", '[data-kb-theme="dark"]'],
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts,tsx}"],
-  presets: [solidUiPreset],
-  theme: {
-    extend: {
-      colors: { accent, gray },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--kb-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--kb-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [typography],
-};

trailbase-core/js/common/tsconfig.base.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
-    "esModuleInterop": false,
-    "moduleResolution": "bundler",
-    "target": "ESNext",
-    "module": "ESNext"
-  }
-}

trailbase-core/js/styles/tailwind.config.mjs

@@ -1,10 +1,8 @@
 import { fontFamily } from "tailwindcss/defaultTheme";
-import animate from "tailwindcss-animate";
 
 /**@type {import("tailwindcss").Config} */
-export default {
+const solidUiPreset = {
   darkMode: ["class", '[data-kb-theme="dark"]'],
-  content: ["./src/**/*.{astro,js,jsx,md,mdx,ts,tsx}"],
   theme: {
     container: {
       center: true,
@@ -76,20 +74,20 @@ export default {
       },
       keyframes: {
         "accordion-down": {
-          from: { height: 0 },
+          from: { height: "0" },
           to: { height: "var(--kb-accordion-content-height)" },
         },
         "accordion-up": {
           from: { height: "var(--kb-accordion-content-height)" },
-          to: { height: 0 },
+          to: { height: "0" },
         },
         "content-show": {
-          from: { opacity: 0, transform: "scale(0.96)" },
-          to: { opacity: 1, transform: "scale(1)" },
+          from: { opacity: "0", transform: "scale(0.96)" },
+          to: { opacity: "1", transform: "scale(1)" },
         },
         "content-hide": {
-          from: { opacity: 1, transform: "scale(1)" },
-          to: { opacity: 0, transform: "scale(0.96)" },
+          from: { opacity: "1", transform: "scale(1)" },
+          to: { opacity: "0", transform: "scale(0.96)" },
         },
       },
       animation: {
@@ -100,5 +98,33 @@ export default {
       },
     },
   },
-  plugins: [animate],
+};
+
+// Colors from starlight.
+const accent = {
+  200: "#92d1fe",
+  600: "#0073aa",
+  900: "#003653",
+  950: "#00273d",
+};
+
+const gray = {
+  100: "#f3f7f9",
+  200: "#e7eff2",
+  300: "#bac4c8",
+  400: "#7b8f96",
+  500: "#495c62",
+  700: "#2a3b41",
+  800: "#182a2f",
+  900: "#121a1c",
+};
+
+/**@type {import("tailwindcss").Config} */
+export const commonTailwindConfig = {
+  presets: [solidUiPreset],
+  theme: {
+    extend: {
+      colors: { accent, gray },
+    },
+  },
 };