feat(theme): explicit accent tiers, palette template, and appearance icons

Organise palette CSS into numbered tiers (Brand → Shell → Derived → System →
Palette → Semantic → Structural) with `_template.css` as the new-palette
checklist. Set explicit `--accent` per palette and mode for reliable
sidebar/menu selection. Add `--alert-*` tokens to default palette CSS.
Replace AppearanceSwitcher menu swatches with Sun/Moon/Monitor icons. Add
Color demo page and styling-theming docs for palette authoring.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: itsprade

.changeset/appearance-switcher-icons.md

@@ -0,0 +1,5 @@
+---
+"@tailor-platform/app-shell": patch
+---
+
+Update `AppearanceSwitcher` menu options to use Sun, Moon, and Monitor icons instead of color swatches for light, dark, and system modes.

.changeset/theme-token-tiers.md

@@ -0,0 +1,5 @@
+---
+"@tailor-platform/app-shell": patch
+---
+
+Set explicit `--accent` values per palette and mode, reorganise palette CSS into numbered tiers with a `_template.css` authoring guide, and add `--alert-*` semantic tokens to the default palette.

docs/concepts/styling-theming.md

@@ -60,3 +60,21 @@ These properties are defined in `:root` and can be overridden in your own CSS:
   --z-popup: 100;
 }
 ```
+
+## Adding a palette
+
+Theme tokens live in `packages/core/src/assets/themes/`. Copy `_template.css` to start a new palette — it lists exactly which sections to fill in for light and dark mode.
+
+| Section               | Required?             | What to set                                                   |
+| --------------------- | --------------------- | ------------------------------------------------------------- |
+| **1. Brand**          | Yes                   | `primary`, `secondary`, `accent` (+ foregrounds) — both modes |
+| **2. Shell gradient** | Branded palettes only | `--shell-gradient-base`, `--shell-gradient-tint`              |
+| **3. Derived**        | Copy verbatim         | Ring, sidebar aliases, gradient stops — do not edit           |
+| **4. System**         | Tune or copy default  | Surfaces: background, card, popover, muted, borders           |
+| **5. Palette**        | Optional              | Radius, chart colors, shadows                                 |
+| **6. Semantic**       | Do not duplicate      | Status and alert tokens inherit from `default.css`            |
+| **7. Structural**     | Branded palettes      | Copy `@layer` blocks from `bloom.css` for gradient shell      |
+
+Then `@import` the new file in `theme.css` and set `defaultThemePalette` on `<AppShell />`.
+
+Preview token values at `/custom-page/color` in the Next.js example app.

examples/nextjs-app/src/modules/custom-module.tsx

@@ -21,6 +21,7 @@ import { dropdownComponentsDemoResource } from "./pages/dropdown-demo";
 import { formComponentsDemoResource, zodRHFFormDemoResource } from "./pages/form-demo";
 import { csvImporterDemoResource } from "./pages/csv-importer-demo";
 import { dataTableDemoResource } from "./pages/data-table-demo";
+import { colorDemoResource } from "./pages/color-demo";
 
 export const customPageModule = defineModule({
   path: "custom-page",
@@ -40,6 +41,17 @@ export const customPageModule = defineModule({
           <p>
             <Link to="/custom-page/sub1/sub1-1/123">{t("goToDynamicPage")}</Link>
           </p>
+          <p>
+            <Link
+              to="/custom-page/color"
+              style={{
+                color: "hsl(var(--primary))",
+                textDecoration: "underline",
+              }}
+            >
+              Color tokens (swatches & layers)
+            </Link>
+          </p>
           <p>
             <Link
               to="/custom-page/purchase-order-demo"
@@ -217,6 +229,7 @@ export const customPageModule = defineModule({
     subPageResource,
     hiddenResource,
     adminOnlyResource,
+    colorDemoResource,
     purchaseOrderDemoResource,
     actionPanelDemoResource,
     metricCardDemoResource,