refactor(themes): drop deep-dark, default to bloom, flatten button + sidebar chrome

- Remove deep-dark palette + types + switcher entry + globals selectors; dark covers the same need.
- Default theme now bloom (existing localStorage choices preserved); legacy tailor-dark id remaps to dark.
- Strip tactile button overrides; cream/bloom/dark buttons inherit default shadcn Button styling.
- Drop sidebar right-edge divider (border-r/border-l and inset-variant border-x).
- Dark --sidebar matches --background; sidebar blends with app surface.
- Unify --destructive at #dc2626 across light/cream/bloom for brand-consistent red.
- Neutral badge uses Tailwind neutral palette so lavender --secondary doesn't bleed in.
- Outline button transparent on cream/bloom only (rule sits in @layer utilities to beat
  Tailwind's astw:bg-background which also lives in utilities).
- Secondary button hover now brightness-based (visible regardless of token value).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: itsprade

docs/api/use-theme.md

@@ -12,9 +12,9 @@ React hook to access and control the current appearance theme.
 Exported types:
 
 ```typescript
-export type Theme = "light" | "dark" | "deep-dark" | "cream" | "bloom" | "system";
+export type Theme = "light" | "dark" | "cream" | "bloom" | "system";
 
-export type ResolvedTheme = "light" | "dark" | "deep-dark" | "cream" | "bloom";
+export type ResolvedTheme = "light" | "dark" | "cream" | "bloom";
 
 export type ThemeOption = { readonly value: Theme; readonly label: string };
 
@@ -37,12 +37,12 @@ const useTheme: () => {
 ### `theme`
 
 - **Type:** `Theme`
-- **Description:** Stored theme preference. **`system`** means “follow OS light/dark” for the **default** light/dark palettes only (not cream, bloom, or deep-dark).
+- **Description:** Stored theme preference. **`system`** means “follow OS light/dark” for the **default** light/dark palettes only (not cream or bloom).
 
 ### `resolvedTheme`
 
 - **Type:** `ResolvedTheme`
-- **Description:** Concrete palette after resolving **`system`** to **`light`** or **`dark`**. **`cream`**, **`bloom`**, and **`deep-dark`** are never produced by **`system`**; pick them explicitly with **`setTheme`**.
+- **Description:** Concrete palette after resolving **`system`** to **`light`** or **`dark`**. **`cream`** and **`bloom`** are never produced by **`system`**; pick them explicitly with **`setTheme`**.
 
 When **`resolvedTheme`** changes, **`document.documentElement`** gets **`data-theme`** set to this value and a **`light`** / **`dark`** class for Tailwind **`dark`** variant compatibility.
 
@@ -51,7 +51,7 @@ When **`resolvedTheme`** changes, **`document.documentElement`** gets **`data-th
 - **Type:** `(theme: Theme) => void`
 - **Description:** Set the theme. Persisted to **`localStorage`** (key **`appshell-ui-theme`** when using AppShell’s built-in provider).
 
-Previously saved ids **`tailor-light`**, **`tailor-bloom`**, **`tailor-dark`** are mapped on read to **`cream`**, **`bloom`**, **`deep-dark`** (see **`LEGACY_THEME_IDS`** in **`theme-context.tsx`**).
+Previously saved ids **`tailor-light`**, **`tailor-bloom`**, **`tailor-dark`** are mapped on read to **`cream`**, **`bloom`**, **`dark`** (see **`LEGACY_THEME_IDS`** in **`theme-context.tsx`**).
 
 ## Usage
 
@@ -114,13 +114,12 @@ function CustomThemeList() {
 
 ### Logo or assets by lightness
 
-Use **`resolvedTheme`** and treat **`light`**, **`cream`**, and **`bloom`** like “light” palettes and **`dark`** and **`deep-dark`** like “dark” for monochrome assets:
+Use **`resolvedTheme`** and treat **`light`**, **`cream`**, and **`bloom`** like “light” palettes and **`dark`** like “dark” for monochrome assets:
 
 ```typescript
 function Logo() {
   const { resolvedTheme } = useTheme();
-  const darkish =
-    resolvedTheme === "dark" || resolvedTheme === "deep-dark";
+  const darkish = resolvedTheme === "dark";
 
   return <img src={darkish ? "/logo-dark.svg" : "/logo-light.svg"} alt="Logo" />;
 }

docs/concepts/styling-theming.md

@@ -36,9 +36,8 @@ AppShell ships **five** named semantic palettes controlled by **`data-theme`** o
 | `dark`         | Default neutral dark                         |
 | `cream`        | Tailor brand — cream shell, violet accents   |
 | `bloom`        | Lavender shell (**Bloom**) and cream accents |
-| `deep-dark`    | Tailor brand — near-black tuning surface     |
 
-**`system`** resolves to **`light`** or **`dark`** only — not **`cream`**, **`bloom`**, or **`deep-dark`**. Set those with **`setTheme`** or **`AppShell`** **`defaultTheme`**.
+**`system`** resolves to **`light`** or **`dark`** only — not **`cream`** or **`bloom`**. Set those with **`setTheme`** or **`AppShell`** **`defaultTheme`**.
 
 Semantic tokens (**`--background`**, **`--primary`**, **`--border`**, sidebar tokens, **`--semantic-shadow-*`**, statuses, **`--radius`**, …) live in **`theme.css`**; override there or in host CSS keyed off **`html[data-theme='…']`**.
 

packages/core/__snapshots__/src__components__button.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Button > snapshots > link variant 1`] = `"<button type="button" data-sl
 
 exports[`Button > snapshots > outline variant 1`] = `"<button type="button" data-slot="button" class="astw:inline-flex astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:border astw:bg-background astw:shadow-xs astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:bg-input/30 astw:dark:border-input astw:dark:hover:bg-input/50 astw:dark:hover:text-foreground astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3">Outline</button>"`;
 
-exports[`Button > snapshots > secondary variant 1`] = `"<button type="button" data-slot="button" class="astw:inline-flex astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:bg-secondary astw:text-secondary-foreground astw:shadow-xs astw:hover:bg-secondary/80 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3">Secondary</button>"`;
+exports[`Button > snapshots > secondary variant 1`] = `"<button type="button" data-slot="button" class="astw:inline-flex astw:items-center astw:justify-center astw:gap-2 astw:whitespace-nowrap astw:rounded-md astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:bg-secondary astw:text-secondary-foreground astw:shadow-xs astw:hover:brightness-95 astw:dark:hover:brightness-110 astw:h-9 astw:px-4 astw:py-2 astw:has-[>svg]:px-3">Secondary</button>"`;
 
 exports[`Button > snapshots > small size 1`] = `"<button type="button" data-slot="button" class="astw:inline-flex astw:items-center astw:justify-center astw:whitespace-nowrap astw:text-sm astw:font-medium astw:transition-all astw:disabled:pointer-events-none astw:disabled:opacity-50 astw:[&amp;_svg]:pointer-events-none astw:[&amp;_svg:not([class*='size-'])]:size-4 astw:shrink-0 astw:[&amp;_svg]:shrink-0 astw:outline-none astw:focus-visible:border-ring astw:focus-visible:ring-ring/50 astw:focus-visible:ring-[3px] astw:aria-invalid:ring-destructive/20 astw:dark:aria-invalid:ring-destructive/40 astw:aria-invalid:border-destructive astw:bg-primary astw:text-primary-foreground astw:shadow-xs astw:hover:bg-primary/90 astw:h-8 astw:rounded-md astw:gap-1.5 astw:px-3 astw:has-[>svg]:px-2.5">Small</button>"`;
 

packages/core/src/assets/theme.css

@@ -73,7 +73,8 @@
   --chart-3: rgba(245, 158, 11, 1);
   --chart-4: rgba(168, 85, 247, 1);
   --chart-5: rgba(244, 63, 94, 1);
-  --sidebar: rgba(23, 23, 23, 1);
+  /* Match --background so sidebar blends with the app surface. */
+  --sidebar: rgba(10, 10, 10, 1);
   --sidebar-foreground: rgba(250, 250, 250, 1);
   --sidebar-primary: rgba(29, 78, 216, 1);
   --sidebar-primary-foreground: rgba(250, 250, 250, 1);
@@ -113,7 +114,8 @@ html[data-theme="cream"] {
   --muted-foreground: rgba(16, 18, 43, 0.72);
   --accent: rgba(226, 212, 254, 1);
   --accent-foreground: rgba(1, 55, 66, 1);
-  --destructive: rgba(185, 28, 28, 1);
+  /* Destructive matches default light theme so the brand red stays consistent across light/cream/bloom. */
+  --destructive: rgba(220, 38, 38, 1);
   --destructive-foreground: rgba(254, 242, 242, 1);
   --border: rgba(0, 0, 0, 0.08);
   --input: rgba(0, 0, 0, 0.08);
@@ -166,9 +168,9 @@ html[data-theme="bloom"] {
   --muted-foreground: rgba(16, 18, 43, 0.72);
   --accent: rgba(248, 243, 228, 1);
   --accent-foreground: rgba(16, 18, 43, 1);
-  /* Softer reds than cream — less harsh against lavender gradient / cream fills */
-  --destructive: rgba(176, 45, 64, 1);
-  --destructive-foreground: rgba(255, 251, 252, 1);
+  /* Destructive matches default light theme so the brand red stays consistent across light/cream/bloom. */
+  --destructive: rgba(220, 38, 38, 1);
+  --destructive-foreground: rgba(254, 242, 242, 1);
   --border: rgba(0, 0, 0, 0.08);
   --input: rgba(0, 0, 0, 0.08);
   --ring: rgba(83, 90, 232, 0.45);
@@ -199,61 +201,6 @@ html[data-theme="bloom"] {
   --semantic-shadow-lg: 0 10px 15px -3px rgb(16 18 43 / 0.12), 0 4px 6px -4px rgb(83 90 232 / 0.1);
 }
 
-/**
- * Tailor brand — dark palette (`deep-dark`): near-black shell; same primaries / secondaries as cream.
- */
-html[data-theme="deep-dark"] {
-  color-scheme: dark;
-  --background: rgba(10, 10, 11, 1);
-  --foreground: rgba(237, 238, 242, 1);
-  --card: rgba(18, 18, 21, 1);
-  --card-foreground: rgba(237, 238, 242, 1);
-  --popover: rgba(22, 22, 26, 1);
-  --popover-foreground: rgba(237, 238, 242, 1);
-  /* Match cream — Primary #535AE8 */
-  --primary: rgba(83, 90, 232, 1);
-  --primary-foreground: rgba(255, 255, 255, 1);
-  /* Light violet + dark green text (same pairing as cream) */
-  --secondary: rgba(226, 212, 254, 1);
-  --secondary-foreground: rgba(1, 55, 66, 1);
-  --muted: rgba(28, 28, 34, 1);
-  --muted-foreground: rgba(163, 167, 180, 1);
-  --accent: rgba(226, 212, 254, 1);
-  --accent-foreground: rgba(1, 55, 66, 1);
-  --destructive: rgba(185, 28, 28, 1);
-  --destructive-foreground: rgba(254, 242, 242, 1);
-  --border: rgba(255, 255, 255, 0.1);
-  --input: rgba(255, 255, 255, 0.12);
-  --ring: rgba(83, 90, 232, 0.45);
-  --chart-1: rgba(83, 90, 232, 1);
-  --chart-2: rgba(0, 151, 156, 1);
-  --chart-3: rgba(1, 55, 66, 1);
-  --chart-4: rgba(110, 95, 195, 1);
-  --chart-5: rgba(217, 119, 6, 1);
-  --radius: 1rem;
-  --sidebar: rgba(10, 10, 11, 1);
-  --sidebar-foreground: rgba(237, 238, 242, 1);
-  --sidebar-primary: rgba(83, 90, 232, 1);
-  --sidebar-primary-foreground: rgba(255, 255, 255, 1);
-  /*
-   * Hover + current row: dark elevated chip on near-black sidebar — light label.
-   * (Lavender wash reads as a “light tab” here; a muted lift matches dark UI better.)
-   */
-  --sidebar-accent: rgba(42, 43, 54, 1);
-  --sidebar-accent-foreground: rgba(238, 239, 246, 1);
-  --sidebar-border: rgba(255, 255, 255, 0.1);
-  --sidebar-ring: rgba(83, 90, 232, 0.45);
-  --status-default: rgba(144, 150, 168, 0.88);
-  --status-neutral: #00979c;
-  --status-completed: #00979c;
-  --status-attention: #d97706;
-  --status-danger: #dc2626;
-  --semantic-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.42);
-  --semantic-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.42), 0 1px 2px -1px rgb(0 0 0 / 0.36);
-  --semantic-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.46), 0 2px 4px -2px rgb(0 0 0 / 0.36);
-  --semantic-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.54), 0 4px 6px -4px rgb(83 90 232 / 0.12);
-}
-
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

packages/core/src/components/appshell.tsx

@@ -173,10 +173,10 @@ type SharedAppShellProps = React.PropsWithChildren<{
    * Initial theme before any value is loaded from localStorage (`appshell-ui-theme`).
    * Does not replace a stored preference.
    *
-   * Named palettes **`cream`**, **`bloom`**, **`deep-dark`**, plus default **`light`** / **`dark`**, in addition to
-   * default light/dark and `system` (OS preference maps to **default** light or dark only).
+   * Named palettes **`cream`**, **`bloom`**, plus default **`light`** / **`dark`**, in addition to
+   * `system` (OS preference maps to **default** light or dark only — not cream or bloom).
    *
-   * @default "system"
+   * @default "bloom"
    */
   defaultTheme?: Theme;
 }>;
@@ -286,7 +286,7 @@ export const AppShell = (props: AppShellProps) => {
         <BreadcrumbOverrideProvider>
           <CommandPaletteProvider searchSources={props.searchSources}>
             <ThemeProvider
-              defaultTheme={props.defaultTheme ?? "system"}
+              defaultTheme={props.defaultTheme ?? "bloom"}
               storageKey="appshell-ui-theme"
             >
               <RouterContainer rootComponent={props.rootComponent} rootGuards={props.rootGuards}>

packages/core/src/components/badge.tsx

@@ -16,7 +16,7 @@ const badgeVariants = cva(
         error:
           "astw:border-transparent astw:bg-destructive astw:text-destructive-foreground astw:hover:bg-destructive/80",
         neutral:
-          "astw:border-transparent astw:bg-secondary astw:text-secondary-foreground astw:hover:bg-secondary/80",
+          "astw:border-transparent astw:bg-neutral-200 astw:text-neutral-700 astw:hover:bg-neutral-300 astw:dark:bg-neutral-800 astw:dark:text-neutral-200 astw:dark:hover:bg-neutral-700",
         // Outline variants with status dots - matches Figma design
         "outline-success":
           "astw:gap-0.5 astw:pl-1.5 astw:pr-2 astw:border-border astw:bg-card astw:text-foreground",

packages/core/src/components/button.tsx

@@ -16,7 +16,7 @@ const buttonVariants = cva(
         outline:
           "astw:border astw:bg-background astw:shadow-xs astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:bg-input/30 astw:dark:border-input astw:dark:hover:bg-input/50 astw:dark:hover:text-foreground",
         secondary:
-          "astw:bg-secondary astw:text-secondary-foreground astw:shadow-xs astw:hover:bg-secondary/80",
+          "astw:bg-secondary astw:text-secondary-foreground astw:shadow-xs astw:hover:brightness-95 astw:dark:hover:brightness-110",
         ghost:
           "astw:hover:bg-accent astw:hover:text-accent-foreground astw:dark:hover:bg-accent/50 astw:dark:hover:text-foreground",
         link: "astw:text-primary astw:underline-offset-4 astw:hover:underline",

packages/core/src/components/sidebar.tsx

@@ -243,8 +243,7 @@ function Sidebar({
               side === "left" ? "astw:left-0" : "astw:right-0",
               variant === "floating" || variant === "inset"
                 ? "astw:p-2 astw:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-                : "astw:group-data-[collapsible=icon]:w-(--sidebar-width-icon) astw:group-data-[side=left]:border-r astw:group-data-[side=right]:border-l",
-              variant === "inset" && "astw:border-x astw:border-x-border",
+                : "astw:group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
             )}
           >
             <div
@@ -311,8 +310,7 @@ function Sidebar({
           // Adjust the padding for floating and inset variants.
           variant === "floating" || variant === "inset"
             ? "astw:p-2 astw:group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
-            : "astw:group-data-[collapsible=icon]:w-(--sidebar-width-icon) astw:group-data-[side=left]:border-r astw:group-data-[side=right]:border-l",
-          variant === "inset" && "astw:border-x astw:border-x-border",
+            : "astw:group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
           className,
         )}
         {...props}

packages/core/src/components/theme-switcher.tsx

@@ -8,7 +8,6 @@ import { useTheme, type ResolvedTheme, type Theme, THEME_OPTIONS } from "@/conte
 const RESOLVED_THEME_SHORT: Record<ResolvedTheme, string> = {
   light: "Light",
   dark: "Dark",
-  "deep-dark": "Deep dark",
   cream: "Cream",
   bloom: "Bloom",
 };
@@ -19,7 +18,6 @@ const RESOLVED_THEME_SHORT: Record<ResolvedTheme, string> = {
 const THEME_PREVIEW: Record<Theme, { readonly a: `#${string}`; readonly b: `#${string}` }> = {
   light: { a: "#ffffff", b: "#d4d4d8" },
   dark: { a: "#3f3f46", b: "#d4d4d8" },
-  "deep-dark": { a: "#09090b", b: "#a1a1aa" },
   cream: { a: "#f8f3e4", b: "#e2d4fe" },
   bloom: { a: "#535ae8", b: "#f8f3e4" },
   system: { a: "#52525b", b: "#7c73e6" },

packages/core/src/contexts/theme-context.tsx

@@ -1,27 +1,19 @@
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
-/** User-selectable theme. `system` follows OS light/dark (default palettes only — not cream/bloom/deep-dark). */
-export type Theme = "light" | "dark" | "deep-dark" | "cream" | "bloom" | "system";
+/** User-selectable theme. `system` follows OS light/dark (default palettes only — not cream/bloom). */
+export type Theme = "light" | "dark" | "cream" | "bloom" | "system";
 
 /** Resolved paint after applying `system`. */
-export type ResolvedTheme = "light" | "dark" | "deep-dark" | "cream" | "bloom";
-
-const ALL_THEMES: readonly Theme[] = [
-  "light",
-  "dark",
-  "deep-dark",
-  "cream",
-  "bloom",
-  "system",
-] as const;
+export type ResolvedTheme = "light" | "dark" | "cream" | "bloom";
+
+const ALL_THEMES: readonly Theme[] = ["light", "dark", "cream", "bloom", "system"] as const;
 
 /** Dropdown / switcher entries: order matches selectable themes; labels are user-facing. */
 export type ThemeOption = { readonly value: Theme; readonly label: string };
 
 export const THEME_OPTIONS: readonly ThemeOption[] = [
   { value: "light", label: "Light" },
   { value: "dark", label: "Dark" },
-  { value: "deep-dark", label: "Deep dark" },
   { value: "cream", label: "Cream" },
   { value: "bloom", label: "Bloom" },
   { value: "system", label: "System" },
@@ -31,7 +23,7 @@ export const THEME_OPTIONS: readonly ThemeOption[] = [
 const LEGACY_THEME_IDS: Partial<Record<string, Theme>> = {
   "tailor-light": "cream",
   "tailor-bloom": "bloom",
-  "tailor-dark": "deep-dark",
+  "tailor-dark": "dark",
 };
 
 function parseStoredTheme(value: string | null, fallback: Theme): Theme {
@@ -78,8 +70,8 @@ type ThemeProviderState = {
 };
 
 const initialState: ThemeProviderState = {
-  resolvedTheme: "light",
-  theme: "system",
+  resolvedTheme: "bloom",
+  theme: "bloom",
   setTheme: () => null,
 };
 
@@ -94,7 +86,7 @@ function resolveTheme(theme: Theme): ResolvedTheme {
 export function ThemeProvider({
   children,
   storageKey,
-  defaultTheme = "system",
+  defaultTheme = "bloom",
   ...props
 }: ThemeProviderProps) {
   const [theme, setThemeState] = useState<Theme>(() => readStoredTheme(storageKey, defaultTheme));
@@ -104,9 +96,7 @@ export function ThemeProvider({
   useEffect(() => {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
-    root.classList.add(
-      resolvedTheme === "dark" || resolvedTheme === "deep-dark" ? "dark" : "light",
-    );
+    root.classList.add(resolvedTheme === "dark" ? "dark" : "light");
     root.dataset.theme = resolvedTheme;
   }, [resolvedTheme]);