refactor: replace defaultThemePalette prop with static CSS theme imports

IzumiSy · IzumiSy · commit e6453fa50f67 · 2026-06-16T15:05:46.000+09:00
Remove runtime palette selection via prop in favor of static CSS imports. Each theme (default, cream, bloom) is now imported directly: import "@tailor-platform/app-shell/themes/cream"; Changes: - Remove defaultThemePalette prop from AppShell and ThemeProvider - Remove ThemePalette type, THEME_PALETTE_OPTIONS, data-theme logic - Change theme CSS selectors from [data-theme=x] to :root - Wrap default theme in @layer theme.defaults so custom themes always win - Move structural overrides (gradient, transparent chrome) out of @layer to ensure they override Tailwind utilities - Add subpath pattern export: "./themes/*" -> "./dist/themes/*.css" - Update examples and e2e to use CSS imports instead of prop
diff --git a/.changeset/theme-mode-palette-axes.md b/.changeset/theme-mode-palette-axes.md
@@ -2,21 +2,25 @@
 "@tailor-platform/app-shell": minor
 ---
 
-Introduce two independent theming axes — **ColorTheme** and **ThemePalette** — plus a new `AppearanceSwitcher` component and bundled Inter variable fonts.
+Introduce theming support — **ColorTheme** axis, static **theme palettes** via CSS imports, a new `AppearanceSwitcher` component, and bundled Inter variable fonts.
 
 #### ColorTheme (end-user preference, persisted)
 
 `ColorTheme` (`"light" | "dark" | "system"`) is the end-user color mode preference. Applied to `<html>` as `.light` / `.dark` class.
 
 - `<AppShell defaultColorTheme="system">` sets the initial preference; user choice is persisted to localStorage.
-- `useTheme()` hook returns `{ theme, resolvedTheme, setTheme }` (backward compatible).
+- `useTheme()` hook returns `{ theme, resolvedTheme, setTheme }`.
 
-#### ThemePalette (developer configuration, not persisted)
+#### Theme Palettes (static CSS imports)
 
-`ThemePalette` (`"default" | "cream" | "bloom"`) is the brand palette. Each palette ships both light and dark variants.
+Each palette (`default`, `cream`, `bloom`) ships both light and dark variants.
+Select a palette by importing its CSS file — no prop needed:
 
-- `<AppShell defaultThemePalette="default">` selects the palette; not stored in localStorage so a stale value never shadows the configured brand.
-- Applied via `data-theme` attribute on `<html>`.
+```ts
+import "@tailor-platform/app-shell/themes/cream";
+```
+
+The default palette is included automatically via `@tailor-platform/app-shell/styles`.
 
 #### AppearanceSwitcher
 
diff --git a/e2e/app/src/index.css b/e2e/app/src/index.css
@@ -1,3 +1,2 @@
 @import "tailwindcss";
 @import "@tailor-platform/app-shell/styles";
-@import "@tailor-platform/app-shell/theme.css";
diff --git a/examples/nextjs-app/src/app/dashboard/[[...props]]/page.tsx b/examples/nextjs-app/src/app/dashboard/[[...props]]/page.tsx
@@ -13,7 +13,6 @@ const App = () => {
   const appShellConfig: AppShellProps = {
     title: "AppShell",
     basePath: "dashboard",
-    defaultThemePalette: "cream",
     modules: [customPageModule],
     rootComponent: () => <div>Dashboard Home (accessible at /dashboard)</div>,
     settingsResources: [profileResource],
diff --git a/examples/nextjs-app/src/app/globals.css b/examples/nextjs-app/src/app/globals.css
@@ -1,71 +1,3 @@
 @import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme {
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-
-  --color-border: var(--border);
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-
-  --color-chart-1: hsl(var(--chart-1));
-  --color-chart-2: hsl(var(--chart-2));
-  --color-chart-3: hsl(var(--chart-3));
-  --color-chart-4: hsl(var(--chart-4));
-  --color-chart-5: hsl(var(--chart-5));
-
-  --color-sidebar: hsl(var(--sidebar-background));
-  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
-  --color-sidebar-primary: hsl(var(--sidebar-primary));
-  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
-  --color-sidebar-accent: hsl(var(--sidebar-accent));
-  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
-  --color-sidebar-border: hsl(var(--sidebar-border));
-  --color-sidebar-ring: hsl(var(--sidebar-ring));
-
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-}
-
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-border, currentcolor);
-  }
-}
+@import "@tailor-platform/app-shell/styles";
+@import "@tailor-platform/app-shell/themes/cream";
diff --git a/examples/nextjs-app/src/app/layout.tsx b/examples/nextjs-app/src/app/layout.tsx
@@ -1,5 +1,4 @@
 import type { Metadata } from "next";
-import "@tailor-platform/app-shell/styles";
 import "./globals.css";
 
 export const metadata: Metadata = {
diff --git a/examples/vite-app/src/App.tsx b/examples/vite-app/src/App.tsx
@@ -25,11 +25,7 @@ const searchSources: SearchSource[] = [
 
 const App = () => {
   return (
-    <AppShell
-      title="File-Based Routing Demo"
-      searchSources={searchSources}
-      defaultThemePalette="bloom"
-    >
+    <AppShell title="File-Based Routing Demo" searchSources={searchSources}>
       <SidebarLayout
         sidebar={
           <DefaultSidebar>
diff --git a/examples/vite-app/src/index.css b/examples/vite-app/src/index.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "@tailor-platform/app-shell/styles";
+@import "@tailor-platform/app-shell/themes/bloom";
 
 html,
 body {
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -28,7 +28,7 @@
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
-    "./theme.css": "./dist/theme.css",
+    "./themes/*": "./dist/themes/*.css",
     ".": {
       "types": "./dist/app-shell.d.ts",
       "default": "./dist/app-shell.js"
diff --git a/packages/core/src/assets/theme.css b/packages/core/src/assets/theme.css
@@ -10,11 +10,10 @@
  *   SYSTEM  — neutral surfaces/text; accessibility-locked, brand-independent.
  *   STATUS  — semantic status, charts, radius, shadows; fixed.
  *
- * Mode is the `.dark` class on <html>; palette is `data-theme`.
+ * Mode is the `.dark` class on <html>; palette is selected by importing one
+ * of the theme CSS files (e.g. `@tailor-platform/app-shell/themes/cream`).
  */
-@import "./themes/default.css";
-@import "./themes/cream.css";
-@import "./themes/bloom.css";
+@import "./themes/default.css" layer(theme.defaults);
 
 @custom-variant dark (&:where(.dark, .dark *));
 
diff --git a/packages/core/src/assets/themes/bloom.css b/packages/core/src/assets/themes/bloom.css
@@ -1,5 +1,5 @@
 /** Bloom — lavender shell + indigo brand (light + dark). */
-html[data-theme="bloom"] {
+:root {
   color-scheme: light;
 
   /* ───── BRAND — override to re-skin ───── */
@@ -63,7 +63,7 @@ html[data-theme="bloom"] {
  * re-resolves against the dark `--primary` / `--card` / `--shell-gradient-base`.
  * Surfaces reuse the default-dark neutrals so cards sit clearly above the canvas.
  */
-html[data-theme="bloom"].dark {
+:root.dark {
   color-scheme: dark;
 
   /* ───── BRAND ───── */
@@ -108,74 +108,71 @@ html[data-theme="bloom"].dark {
  * Structural overrides — shell gradient, transparent chrome, squircle corners,
  * tighter heading rhythm. Apply in both modes (gradient reads `--shell-gradient-base`
  * + the per-mode `--shell-gradient-tint`).
+ *
+ * These must NOT be in a @layer so they override Tailwind utilities (which are layered).
  */
 
-@layer base {
-  /* Vertical shell gradient: tinted lift at top -> base surface at bottom. */
-  html[data-theme="bloom"] {
-    min-height: 100vh;
-    min-height: 100dvh;
-    background-color: var(--shell-gradient-base);
-    background-image: linear-gradient(
-      to bottom,
-      var(--shell-gradient-start) 0%,
-      color-mix(in srgb, var(--shell-gradient-base) 45%, var(--shell-gradient-tint)) 20%,
-      color-mix(in srgb, var(--shell-gradient-base) 30%, var(--shell-gradient-tint)) 40%,
-      color-mix(in srgb, var(--shell-gradient-base) 15%, var(--shell-gradient-tint)) 55%,
-      color-mix(in srgb, var(--shell-gradient-base) 6%, var(--shell-gradient-tint)) 65%,
-      var(--shell-gradient-end) 70%,
-      var(--shell-gradient-end) 100%
-    );
-    background-attachment: fixed;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
+/* Vertical shell gradient: tinted lift at top -> base surface at bottom. */
+html {
+  min-height: 100vh;
+  min-height: 100dvh;
+  background-color: var(--shell-gradient-base);
+  background-image: linear-gradient(
+    to bottom,
+    var(--shell-gradient-start) 0%,
+    color-mix(in srgb, var(--shell-gradient-base) 45%, var(--shell-gradient-tint)) 20%,
+    color-mix(in srgb, var(--shell-gradient-base) 30%, var(--shell-gradient-tint)) 40%,
+    color-mix(in srgb, var(--shell-gradient-base) 15%, var(--shell-gradient-tint)) 55%,
+    color-mix(in srgb, var(--shell-gradient-base) 6%, var(--shell-gradient-tint)) 65%,
+    var(--shell-gradient-end) 70%,
+    var(--shell-gradient-end) 100%
+  );
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
 
-  /* Tighter heading rhythm for branded feel. */
-  html[data-theme="bloom"] :where(h1, h2, h3, h4, h5, h6) {
-    letter-spacing: -0.03em;
-    line-height: 1.2;
-  }
+/* Tighter heading rhythm for branded feel. */
+html :where(h1, h2, h3, h4, h5, h6) {
+  letter-spacing: -0.03em;
+  line-height: 1.2;
+}
 
-  /* Apple-style squircle corners where engine supports corner-shape (Chromium). */
-  @supports (corner-shape: squircle) {
-    html[data-theme="bloom"] * {
-      corner-shape: squircle;
-    }
-    html[data-theme="bloom"] [class*="rounded-full"] {
-      corner-shape: round;
-    }
+/* Apple-style squircle corners where engine supports corner-shape (Chromium). */
+@supports (corner-shape: squircle) {
+  html * {
+    corner-shape: squircle;
+  }
+  html [class*="rounded-full"] {
+    corner-shape: round;
   }
 }
 
-@layer utilities {
-  /* Body and sidebar chrome stay transparent so the shell gradient shows through. */
-  html[data-theme="bloom"] body {
-    background-color: transparent;
-    background-image: none;
-  }
+/* Body and sidebar chrome stay transparent so the shell gradient shows through. */
+html body {
+  background-color: transparent;
+  background-image: none;
+}
 
-  html[data-theme="bloom"] [data-slot="sidebar-wrapper"],
-  html[data-theme="bloom"] [data-slot="sidebar-inner"],
-  html[data-theme="bloom"] main[data-slot="sidebar-inset"],
-  html[data-theme="bloom"]
-    [data-slot="sidebar"][class*="bg-sidebar"]:not([data-mobile="true"]):not(
-      [data-icon-mode="true"]
-    ) {
-    background-color: transparent;
-  }
+html [data-slot="sidebar-wrapper"],
+html [data-slot="sidebar-inner"],
+html main[data-slot="sidebar-inset"],
+html
+  [data-slot="sidebar"][class*="bg-sidebar"]:not([data-mobile="true"]):not(
+    [data-icon-mode="true"]
+  ) {
+  background-color: transparent;
+}
 
-  /* Outline button: transparent fill so the shell gradient shows through. */
-  html[data-theme="bloom"] [data-slot="button"][class*="astw:bg-background"][class*="astw:border"] {
-    background-color: transparent;
-    transition:
-      background-color 0.12s ease,
-      color 0.12s ease;
-  }
+/* Outline button: transparent fill so the shell gradient shows through. */
+html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"] {
+  background-color: transparent;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease;
+}
 
-  html[data-theme="bloom"]
-    [data-slot="button"][class*="astw:bg-background"][class*="astw:border"]:hover:not(:disabled) {
-    background-color: var(--accent);
-    color: var(--accent-foreground);
-  }
+html [data-slot="button"][class*="astw:bg-background"][class*="astw:border"]:hover:not(:disabled) {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
 }
diff --git a/packages/core/src/assets/themes/cream.css b/packages/core/src/assets/themes/cream.css
diff --git a/packages/core/src/assets/themes/default.css b/packages/core/src/assets/themes/default.css
diff --git a/packages/core/src/components/appshell.tsx b/packages/core/src/components/appshell.tsx
diff --git a/packages/core/src/contexts/theme-context.test.tsx b/packages/core/src/contexts/theme-context.test.tsx
diff --git a/packages/core/src/contexts/theme-context.tsx b/packages/core/src/contexts/theme-context.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,2 @@`
`1`	`1`	`@import "tailwindcss";`
`2`	`2`	`@import "@tailor-platform/app-shell/styles";`
`3`		`-@import "@tailor-platform/app-shell/theme.css";`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import type { Metadata } from "next";`
`2`		`-import "@tailor-platform/app-shell/styles";`
`3`	`2`	`import "./globals.css";`
`4`	`3`
`5`	`4`	`export const metadata: Metadata = {`