feat(core): bundle fontsource fonts into default styles import

IzumiSy · IzumiSy · commit f806f48c2b4e · 2026-06-05T15:37:08.000+09:00
Merge font loading into globals.css so ThemeSwitcher font switching works out of the box without extra imports. Browsers only download @font-face resources when the font-family is actually applied to rendered text, so bundling both Geist and Inter does not add network overhead for unused fonts. - Import fontsource via src/assets/fonts.css (separation of concerns) - globals.css imports fonts.css alongside theme.css - Remove ./styles/fonts subpath export (no longer needed) - Remove @tailor-platform/app-shell/styles/fonts from examples - Add changeset
diff --git a/.changeset/bright-fonts-land.md b/.changeset/bright-fonts-land.md
@@ -0,0 +1,13 @@
+---
+"@tailor-platform/app-shell": minor
+---
+
+### Multi-theme appearance system
+
+Add `ThemeSwitcher` component and font axis.
+
+- New color palettes: `cream` and `bloom` alongside existing `light`/`dark`, plus a `system` option that follows OS preference
+- Independent font axis (`geist` / `inter`) switchable at runtime via `useFont()` hook
+- `ThemeSwitcher` dropdown component replaces the old light/dark toggle in `SidebarLayout`
+- New `defaultTheme` and `defaultFont` props on `<AppShell>`
+- Variable fonts (Geist and Inter) are bundled via fontsource and included in the default `styles` import
diff --git a/examples/nextjs-app/src/app/globals.css b/examples/nextjs-app/src/app/globals.css
@@ -1,7 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "@tailor-platform/app-shell/styles";
-@import "@tailor-platform/app-shell/styles/fonts";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/examples/vite-app/src/index.css b/examples/vite-app/src/index.css
@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "@tailor-platform/app-shell/styles";
-@import "@tailor-platform/app-shell/styles/fonts";
 
 html,
 body {
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -28,7 +28,6 @@
   "type": "module",
   "exports": {
     "./styles": "./dist/app-shell.css",
-    "./styles/fonts": "./dist/fonts.css",
     "./theme.css": "./dist/theme.css",
     ".": {
       "types": "./dist/app-shell.d.ts",
diff --git a/packages/core/src/assets/fonts.css b/packages/core/src/assets/fonts.css
@@ -1,9 +1,5 @@
 /*
- * Self-hosted variable fonts used by AppShell's appearance axis. Shipped as a
- * separate, opt-in stylesheet via the `@tailor-platform/app-shell/styles/fonts`
- * subpath so the default `@import "@tailor-platform/app-shell/styles"` stays
- * font-free and consumers can choose their own loading strategy (e.g.
- * `next/font/local`, `next/font/google`, or a CDN).
+ * Self-hosted variable fonts used by AppShell's appearance axis.
  *
  * Family names: `"Geist Variable"`, `"Inter Variable"`. AppShell's
  * `globals.css` falls back to `"Geist Sans"` / `"Inter"` after these so
diff --git a/packages/core/src/globals.css b/packages/core/src/globals.css
@@ -1,6 +1,7 @@
 @import "tailwindcss" prefix(astw);
 @import "tw-animate-css";
 @import "./assets/theme.css";
+@import "./assets/fonts.css";
 
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -38,11 +39,11 @@
   /*
    * Font axis — applied independently of color theme via `data-font` on `<html>`.
    *
-   * Family-name chain prefers the variable build (loaded by
-   * `@tailor-platform/app-shell/styles/fonts`), then the conventional static family
-   * name (`Geist Sans` / `Inter` — what `next/font/google` and most CDNs
-   * register), then the system stack. Consumers who load their own font under
-   * either name automatically participate; no font loads when nothing matches.
+   * Family-name chain prefers the variable build (bundled from fontsource),
+   * then the conventional static family name (`Geist Sans` / `Inter` — what
+   * `next/font/google` and most CDNs register), then the system stack.
+   * Consumers who load their own font under either name automatically
+   * participate.
    */
   html[data-font="geist"] body,
   html[data-font="geist"] :where(h1, h2, h3, h4, h5, h6) {
