From bdac00d00a2e1d3b26ae76000ee7d302dbd02b34 Mon Sep 17 00:00:00 2001 From: Sebastian Jeltsch Date: Sun, 9 Feb 2025 10:27:30 +0100 Subject: [PATCH] Minor: simplify shared styling setup for admin and auth UI. --- docs/package.json | 2 +- ...tailwind.config.mjs => tailwind.config.ts} | 5 +- trailbase-core/js/admin/src/index.tsx | 4 +- trailbase-core/js/admin/tailwind.config.ts | 10 +- trailbase-core/js/admin/tsconfig.json | 10 +- trailbase-core/js/admin/ui.config.json | 2 +- .../js/auth/src/layouts/BaseLayout.astro | 4 +- trailbase-core/js/auth/tailwind.config.ts | 10 +- trailbase-core/js/auth/tsconfig.json | 2 +- trailbase-core/js/auth/ui.config.json | 2 +- trailbase-core/js/common/tailwind.config.mjs | 153 ------------------ trailbase-core/js/common/tsconfig.base.json | 11 -- .../js/{common/css => styles}/global.css | 0 .../js/{common/css => styles}/kobalte.css | 0 .../tailwind.config.mjs} | 46 ++++-- 15 files changed, 71 insertions(+), 190 deletions(-) rename docs/{tailwind.config.mjs => tailwind.config.ts} (89%) delete mode 100644 trailbase-core/js/common/tailwind.config.mjs delete mode 100644 trailbase-core/js/common/tsconfig.base.json rename trailbase-core/js/{common/css => styles}/global.css (100%) rename trailbase-core/js/{common/css => styles}/kobalte.css (100%) rename trailbase-core/js/{auth/ui.preset.mjs => styles/tailwind.config.mjs} (77%) diff --git a/docs/package.json b/docs/package.json index deb576e5..6b82be44 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/tailwind.config.mjs b/docs/tailwind.config.ts similarity index 89% rename from docs/tailwind.config.mjs rename to docs/tailwind.config.ts index e8d9b140..625552ec 100644 --- a/docs/tailwind.config.mjs +++ b/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; diff --git a/trailbase-core/js/admin/src/index.tsx b/trailbase-core/js/admin/src/index.tsx index 551e9c44..6db6dbe8 100644 --- a/trailbase-core/js/admin/src/index.tsx +++ b/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"; diff --git a/trailbase-core/js/admin/tailwind.config.ts b/trailbase-core/js/admin/tailwind.config.ts index 70016f01..39354c93 100644 --- a/trailbase-core/js/admin/tailwind.config.ts +++ b/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; diff --git a/trailbase-core/js/admin/tsconfig.json b/trailbase-core/js/admin/tsconfig.json index eb2c9a3f..13c4d520 100644 --- a/trailbase-core/js/admin/tsconfig.json +++ b/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": [ diff --git a/trailbase-core/js/admin/ui.config.json b/trailbase-core/js/admin/ui.config.json index 21ab0836..748ea376 100644 --- a/trailbase-core/js/admin/ui.config.json +++ b/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": "" }, diff --git a/trailbase-core/js/auth/src/layouts/BaseLayout.astro b/trailbase-core/js/auth/src/layouts/BaseLayout.astro index cfadf1ae..a11e84c6 100644 --- a/trailbase-core/js/auth/src/layouts/BaseLayout.astro +++ b/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"; diff --git a/trailbase-core/js/auth/tailwind.config.ts b/trailbase-core/js/auth/tailwind.config.ts index 70016f01..39354c93 100644 --- a/trailbase-core/js/auth/tailwind.config.ts +++ b/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; diff --git a/trailbase-core/js/auth/tsconfig.json b/trailbase-core/js/auth/tsconfig.json index f25c2317..9db3bda0 100644 --- a/trailbase-core/js/auth/tsconfig.json +++ b/trailbase-core/js/auth/tsconfig.json @@ -7,7 +7,7 @@ "paths": { "@/*": ["./src/*"], "@bindings/*": ["../../bindings/*"], - "@common/*": ["../common/*"] + "@styles/*": ["../styles/*"] } }, "exclude": [ diff --git a/trailbase-core/js/auth/ui.config.json b/trailbase-core/js/auth/ui.config.json index cb48cee8..cd3dd029 100644 --- a/trailbase-core/js/auth/ui.config.json +++ b/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": "@/*" diff --git a/trailbase-core/js/common/tailwind.config.mjs b/trailbase-core/js/common/tailwind.config.mjs deleted file mode 100644 index 92f96c24..00000000 --- a/trailbase-core/js/common/tailwind.config.mjs +++ /dev/null @@ -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], -}; diff --git a/trailbase-core/js/common/tsconfig.base.json b/trailbase-core/js/common/tsconfig.base.json deleted file mode 100644 index 3e292e19..00000000 --- a/trailbase-core/js/common/tsconfig.base.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "compilerOptions": { - "strict": true, - "strictNullChecks": true, - "forceConsistentCasingInFileNames": true, - "esModuleInterop": false, - "moduleResolution": "bundler", - "target": "ESNext", - "module": "ESNext" - } -} diff --git a/trailbase-core/js/common/css/global.css b/trailbase-core/js/styles/global.css similarity index 100% rename from trailbase-core/js/common/css/global.css rename to trailbase-core/js/styles/global.css diff --git a/trailbase-core/js/common/css/kobalte.css b/trailbase-core/js/styles/kobalte.css similarity index 100% rename from trailbase-core/js/common/css/kobalte.css rename to trailbase-core/js/styles/kobalte.css diff --git a/trailbase-core/js/auth/ui.preset.mjs b/trailbase-core/js/styles/tailwind.config.mjs similarity index 77% rename from trailbase-core/js/auth/ui.preset.mjs rename to trailbase-core/js/styles/tailwind.config.mjs index c1f26946..001808be 100644 --- a/trailbase-core/js/auth/ui.preset.mjs +++ b/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 }, + }, + }, };