xertica-ui 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -11,6 +11,22 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.8.0] — 2026-07-09
+
+### Added
+
+- **Novo tema `xertica`** — a nova identidade visual da Xertica (papel quente `#FFFEF8`, tintas vivas e o preto da marca como acento geral), somando-se aos temas já existentes em `contexts/theme-data.ts` → `colorThemes`. Botões neste tema ganham radius pill (`buttonRadius: '9999px'`), stroke em todas as variantes preenchidas (`buttonStrokeWidth`/`buttonStrokeColor(Dark)`), botão primário amarelo (`#FAF338`) com contorno e texto pretos, e botão secundário na cor preta da marca (`buttonSecondaryBg(Dark)`/`buttonSecondaryForeground(Dark)`). O amarelo é **intencionalmente restrito** ao botão `default` e ao estado ligado do `Switch` — o acento geral do tema (`--primary`, usado por links, radio buttons, foco, logo, etc.) é Negro Xertica `#1E1E1E` (Crema `#F2EDD8` no dark mode), evitado de virar amarelo sem contraste em elementos que não são botão/switch. O tema `xertica-original` (agora exibido como **"Xertica Classic"**) permanece o padrão — o `id` não foi alterado, então projetos scaffolded e chamadas `setTheme('xertica-original')` continuam funcionando sem mudanças.
+- **`BrandColors` ganha campos opcionais de forma/estrutura de botão** — `backgroundLight`, `buttonRadius`, `buttonStrokeWidth`, `buttonStrokeColor`/`buttonStrokeColorDark`, `buttonSecondaryBg`/`buttonSecondaryBgDark`, `buttonSecondaryForeground`/`buttonSecondaryForegroundDark`, e `buttonPrimaryBg`/`buttonPrimaryBgDark`, `buttonPrimaryForeground`/`buttonPrimaryForegroundDark` (acento do botão `default` e do `Switch`, com fallback para `var(--primary)`/`var(--primary-foreground)`). Todos são opcionais e têm fallback idêntico ao comportamento anterior, então os 9 temas pré-existentes ficam pixel-idênticos. Removido o campo morto `radius?: string` (nunca lido por `applyColors()`).
+- **`components/ui/button/button.tsx`** — as variantes preenchidas (`default`, `destructive`, `secondary`, `success`, `info`, `warning`) agora aceitam um stroke via `--button-stroke-width`/`--button-stroke-color`; a variante `default` passou a usar `--button-primary-bg`/`--button-primary-foreground` (em vez de `bg-primary`/`text-primary-foreground` direto) para permitir um acento de botão distinto do `--primary` semântico geral; a variante `secondary` passou a usar os tokens `--button-secondary-bg`/`--button-secondary-foreground` (com fallback para `--secondary`/`--secondary-foreground`) em vez do modificador de opacidade `/80`, que não funcionava sobre cores vindas de `var()`.
+- **`components/ui/switch/switch.tsx`** — o estado marcado (`checked`) passou a usar `--button-primary-bg` em vez de `bg-primary`, para acompanhar o mesmo acento do botão `default`.
+
+### Changed
+
+- `bin/generate-tokens.ts` e os `tokens.css` estáticos (`styles/xertica/`, `templates/src/styles/xertica/`) passam a emitir `--button-stroke-width`, `--button-stroke-color`, `--button-secondary-bg`, `--button-secondary-foreground`, `--button-primary-bg`, `--button-primary-foreground`, e `--radius-button`/`--background` (light) respeitam os novos campos do tema quando definidos.
+- `.storybook/preview.tsx` — toolbar "Brand Color" renomeia `xertica-original` para "Xertica Classic" e adiciona a entrada "Xertica" (`xertica`).
+
+---
+
 ## [2.7.0] — 2026-07-07
 
 ### Added

package/README.md

@@ -353,11 +353,12 @@ Xertica UI uses semantic CSS tokens. **Never use raw colors or generic Tailwind
 
 ### Color Themes
 
-Nine built-in themes — each sets the primary color, sidebar, chart palette, and dark-mode surface hue. Select at `init` time or change later with `npx xertica-ui update → Theme only`.
+Ten built-in themes — each sets the primary color, sidebar, chart palette, and dark-mode surface hue. Select at `init` time or change later with `npx xertica-ui update → Theme only`.
 
 | Theme | ID | Primary | Sidebar | Dark bg |
 |---|---|---|---|---|
-| ![#2C275B](https://img.shields.io/badge/-%232C275B-2C275B?style=flat-square) Xertica | `xertica-original` | `#2C275B` | `#2C275B` | `#05050d` |
+| ![#2C275B](https://img.shields.io/badge/-%232C275B-2C275B?style=flat-square) Xertica Classic | `xertica-original` | `#2C275B` | `#2C275B` | `#05050d` |
+| ![#1E1E1E](https://img.shields.io/badge/-%231E1E1E-1E1E1E?style=flat-square) Xertica | `xertica` | `#1E1E1E` | `#1E1E1E` | `#141311` |
 | ![#18181B](https://img.shields.io/badge/-%2318181B-18181B?style=flat-square) Zinc | `zinc` | `#18181B` | `#18181B` | `#05050d` |
 | ![#0F172A](https://img.shields.io/badge/-%230F172A-0F172A?style=flat-square) Slate | `slate` | `#0F172A` | `#0F172A` | `#05050d` |
 | ![#2563EB](https://img.shields.io/badge/-%232563EB-2563EB?style=flat-square) Blue | `blue` | `#2563EB` | `#1E3A8A` | `#03050f` |
@@ -369,6 +370,8 @@ Nine built-in themes — each sets the primary color, sidebar, chart palette, an
 
 > Each badge renders the **exact primary color** of that theme as a filled swatch. Generated by the CLI and stored in `src/styles/xertica/tokens.css`.
 
+**"Xertica" theme — serigrafia identity:** pill-shaped buttons (`--radius-button: 9999px`) and a visible stroke on every filled button variant. The general brand accent (`--primary`, used by links, focus rings, radio buttons, the logo, etc.) is Negro Xertica (`#1E1E1E`, `#F2EDD8` in dark mode) for reliable contrast everywhere. Yellow (`#FAF338`) is intentionally scoped to just two controls — the `Button` `default` variant and `Switch`'s checked state — via the `--button-primary-bg`/`--button-primary-foreground` tokens, both with black text/outline. The `secondary` button is black (`#1E1E1E`). The page background uses a warm off-white paper tone (`#FFFEF8`) while cards stay pure white. The full accent palette (and the "serigrafia" color-intersection combinations meant for print/marketing pieces — e.g. Celeste `#1899AF` + Magenta `#C45BAA` → Violeta `#5A4A96`) is documented in `contexts/theme-data.ts`.
+
 **CLI — Select at project creation:**
 
 ```bash
@@ -381,7 +384,7 @@ npx xertica-ui@latest init my-app
 ```bash
 npx xertica-ui update
 # → choose "Theme only"
-# → select any of the 9 themes
+# → select any of the 10 themes
 # → src/styles/xertica/tokens.css is fully regenerated
 # → .xertica.json is updated with the new themeId for future updates
 ```
@@ -396,6 +399,7 @@ npx xertica-ui update
 <XerticaProvider defaultColorTheme="violet">
 <XerticaProvider defaultColorTheme="amber">
 <XerticaProvider defaultColorTheme="orange">
+<XerticaProvider defaultColorTheme="xertica"> {/* new serigrafia identity */}
 <XerticaProvider defaultColorTheme="xertica-original"> {/* default */}
 
 // Custom hex — sets primary only; dark surfaces use the neutral default
@@ -414,7 +418,8 @@ npx xertica-ui update
 | `--card`, `--popover`| ✅ Dark mode only (hue-tinted) |
 | `--muted`, `--accent`| ✅ Dark mode only (hue-tinted) |
 | `--border`, `--input`| ✅ Dark mode only (hue-tinted) |
-| Light mode surfaces  | ❌ Always white/zinc (unchanged) |
+| Light mode surfaces  | ❌ Always white/zinc, unless the theme sets `backgroundLight` (only `xertica` does) |
+| `--radius-button`, button stroke, `secondary` button colors | ✅ Only when the theme defines `buttonRadius`/`buttonStroke*`/`buttonSecondary*` (only `xertica` does) |
 
 ### Mobile Content Padding
 
@@ -467,13 +472,16 @@ See [`docs/i18n.md`](./docs/i18n.md) for setup, runtime configuration, and addin
 
 ## 📜 Scripts
 
-| Command              | Description                            |
-| -------------------- | -------------------------------------- |
-| `npm run dev`        | Start development server               |
-| `npm run build`      | Production bundle                      |
-| `npm run storybook`  | Launch component library documentation |
-| `npm run test`       | Run unit tests via Vitest              |
-| `npm run type-check` | TypeScript validation                  |
+| Command               | Description                                                                                                                                                     |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `npm run dev`         | Runs the `templates/` scaffold with live Design System source (via monorepo alias) — the same app a `npx xertica-ui init` consumer gets. Use this to test Design System changes against real pages. |
+| `npm run dev:pages`   | Runs the root harness (`App.tsx`) for the standalone `xertica-ui/pages` showcase subpath.                                                                       |
+| `npm run build`       | Production bundle                                                                                                                                                |
+| `npm run storybook`   | Launch component library documentation                                                                                                                          |
+| `npm run test`        | Run unit tests via Vitest                                                                                                                                       |
+| `npm run type-check`  | TypeScript validation                                                                                                                                            |
+
+> **Note**: `templates/` has its own dependencies — run `npm install` inside `templates/` once before the first `npm run dev`.
 
 ---
 

package/bin/generate-tokens.ts

@@ -42,13 +42,13 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --xertica-dark: ${rgba(colors.sidebarDark)};
   
   /* Semantic Colors */
-  --background: rgba(255, 255, 255, 1);
+  --background: ${colors.backgroundLight ? rgba(colors.backgroundLight) : 'rgba(255, 255, 255, 1)'};
   --foreground: rgba(9, 9, 11, 1);
-  
-  --card: rgba(255, 255, 255, 1);
+
+  --card: ${colors.cardLight ? rgba(colors.cardLight) : 'rgba(255, 255, 255, 1)'};
   --card-foreground: rgba(9, 9, 11, 1);
-  
-  --popover: rgba(255, 255, 255, 1);
+
+  --popover: ${colors.cardLight ? rgba(colors.cardLight) : 'rgba(255, 255, 255, 1)'};
   --popover-foreground: rgba(9, 9, 11, 1);
   
   --primary: var(--xertica-primary);
@@ -59,7 +59,7 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --secondary: rgba(244, 244, 245, 1);
   --secondary-foreground: rgba(24, 24, 27, 1);
   
-  --muted: rgba(244, 244, 245, 1);
+  --muted: ${colors.backgroundLight ? rgba(colors.backgroundLight) : 'rgba(244, 244, 245, 1)'};
   --muted-foreground: rgba(113, 113, 122, 1);
   
   --accent: rgba(244, 244, 245, 1);
@@ -77,6 +77,7 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --warning-foreground: rgba(28, 25, 23, 1);
   
   --border: rgba(228, 228, 231, 1);
+  --input-border: ${colors.inputBorderColor || 'var(--border)'};
   --input: rgba(244, 244, 245, 0.5);
   --input-background: rgba(244, 244, 245, 0.5);
   --ring: ${rgba(colors.primary, 0.5)};
@@ -106,9 +107,17 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   
   /* Spacing & Radius */
   --radius: 6px;
-  --radius-button: 12px;
+  --radius-button: ${colors.buttonRadius || '12px'};
   --radius-card: 12px;
-  
+
+  /* Button stroke & secondary (theme-overridable; defaults preserve the flat look) */
+  --button-stroke-width: ${colors.buttonStrokeWidth || '0px'};
+  --button-stroke-color: ${colors.buttonStrokeColor || 'transparent'};
+  --button-secondary-bg: ${colors.buttonSecondaryBg || 'var(--secondary)'};
+  --button-secondary-foreground: ${colors.buttonSecondaryForeground || 'var(--secondary-foreground)'};
+  --button-primary-bg: ${colors.buttonPrimaryBg || 'var(--primary)'};
+  --button-primary-foreground: ${colors.buttonPrimaryForeground || 'var(--primary-foreground)'};
+
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
   
   /* Typography */
@@ -209,7 +218,14 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --input: ${rgba(colors.darkMuted, 0.5)};
   --input-background: ${rgba(colors.darkMuted, 0.5)};
   --ring: ${rgba(colors.primaryDarkMode, 0.5)};
-  
+
+  /* Button stroke & secondary (theme-overridable; defaults preserve the flat look) */
+  --button-stroke-color: ${colors.buttonStrokeColorDark || colors.buttonStrokeColor || 'transparent'};
+  --button-secondary-bg: ${colors.buttonSecondaryBgDark || colors.buttonSecondaryBg || 'var(--secondary)'};
+  --button-secondary-foreground: ${colors.buttonSecondaryForegroundDark || colors.buttonSecondaryForeground || 'var(--secondary-foreground)'};
+  --button-primary-bg: ${colors.buttonPrimaryBgDark || colors.buttonPrimaryBg || 'var(--primary)'};
+  --button-primary-foreground: ${colors.buttonPrimaryForegroundDark || colors.buttonPrimaryForeground || 'var(--primary-foreground)'};
+
   --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
 
   /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */

package/components/assistant/xertica-assistant/xertica-assistant.tsx

@@ -441,7 +441,7 @@ export function XerticaAssistant({
       {/* Main Assistant Container */}
       <div
         className={cn(
-          `${containerHeight} flex flex-col bg-background relative`,
+          `${containerHeight} flex flex-col bg-card relative`,
           !isFullPage && 'border-l border-border shadow-sm',
           isMobile && isExpanded && 'fixed inset-0 z-[100] h-[100dvh] w-full border-l-0 shadow-2xl',
           className

package/components/ui/button/button.test.tsx

@@ -8,7 +8,7 @@ describe('Button', () => {
     render(<Button>Click me</Button>);
     const button = screen.getByRole('button', { name: /click me/i });
     expect(button).toBeInTheDocument();
-    expect(button).toHaveClass('bg-primary');
+    expect(button).toHaveClass('bg-button-primary');
   });
 
   it('renders correctly with different variants', () => {
@@ -59,6 +59,6 @@ describe('Button', () => {
     );
     const link = screen.getByRole('link', { name: /link button/i });
     expect(link).toBeInTheDocument();
-    expect(link).toHaveClass('bg-primary'); // Should still have button styles
+    expect(link).toHaveClass('bg-button-primary'); // Should still have button styles
   });
 });

package/components/ui/button/button.tsx

@@ -10,18 +10,18 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'border-button-stroke bg-button-primary text-button-primary',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+          'border-button-stroke bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
         outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        secondary: 'border-button-stroke bg-button-secondary text-button-secondary',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         success:
-          'bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40',
-        info: 'bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/20 dark:focus-visible:ring-info/40',
+          'border-button-stroke bg-success text-success-foreground hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40',
+        info: 'border-button-stroke bg-info text-info-foreground hover:bg-info/90 focus-visible:ring-info/20 dark:focus-visible:ring-info/40',
         warning:
-          'bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40',
+          'border-button-stroke bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',

package/components/ui/card/card.tsx

@@ -2,6 +2,16 @@ import * as React from 'react';
 
 import { cn } from '../../shared/utils';
 
+export interface CardProps extends React.ComponentProps<'div'> {
+  /**
+   * Background variant.
+   * - `default`: uses the theme's `--card` token (e.g. Marfim on the Xertica theme).
+   * - `white`: forces a solid white background regardless of the active theme,
+   *   for cards that should stand out from the theme's own card tone.
+   */
+  variant?: 'default' | 'white';
+}
+
 /**
  * Primary content container surface.
  *
@@ -13,13 +23,15 @@ import { cn } from '../../shared/utils';
  * 1. NEVER create raw divs with `bg-white dark:bg-black rounded border shadow` — use `<Card>`.
  * 2. Compose with the semantic order: `CardHeader > CardTitle + CardDescription > CardContent > CardFooter`.
  * 3. For inline action buttons in the header, use `<CardAction>` (rendered right-aligned automatically).
+ * 4. Use `variant="white"` for cards that need a solid white background instead of the theme's card tone.
  */
-function Card({ className, ...props }: React.ComponentProps<'div'>) {
+function Card({ className, variant = 'default', ...props }: CardProps) {
   return (
     <div
       data-slot="card"
       className={cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-[var(--radius-card)]',
+        'text-card-foreground flex flex-col gap-6 rounded-[var(--radius-card)]',
+        variant === 'white' ? 'bg-white' : 'bg-card',
         className
       )}
       {...props}

package/components/ui/input/input.tsx

@@ -38,7 +38,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         data-slot="input"
         className={cn(
-          'flex w-full min-w-0 bg-background rounded-[var(--radius)] border border-border transition-colors outline-none text-foreground',
+          'flex w-full min-w-0 bg-background rounded-[var(--radius)] border border-input-stroke transition-colors outline-none text-foreground',
           'placeholder:text-muted-foreground',
           'focus:ring-2 focus:ring-primary focus:border-transparent',
           'disabled:cursor-not-allowed disabled:opacity-50',

package/components/ui/input-otp/input-otp.tsx

@@ -74,7 +74,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        'data-[active=true]:border-primary data-[active=true]:ring-primary/20 data-[active=true]:aria-invalid:ring-destructive/20 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex items-center justify-center border border-border rounded-[var(--radius)] bg-background transition-all outline-none data-[active=true]:z-10 data-[active=true]:ring-2',
+        'data-[active=true]:border-primary data-[active=true]:ring-primary/20 data-[active=true]:aria-invalid:ring-destructive/20 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex items-center justify-center border border-input-stroke rounded-[var(--radius)] bg-background transition-all outline-none data-[active=true]:z-10 data-[active=true]:ring-2',
         sizeClasses[size],
         className
       )}

package/components/ui/search/search.tsx

@@ -109,7 +109,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
           onChange={handleChange}
           onKeyDown={handleKeyDown}
           className={cn(
-            'flex w-full rounded-[var(--radius)] border border-border bg-background text-foreground transition-colors outline-none',
+            'flex w-full rounded-[var(--radius)] border border-input-stroke bg-background text-foreground transition-colors outline-none',
             'placeholder:text-muted-foreground',
             'focus:ring-2 focus:ring-primary focus:border-transparent',
             'disabled:cursor-not-allowed disabled:opacity-50',

package/components/ui/select/select.tsx

@@ -48,7 +48,7 @@ const SelectTrigger = React.forwardRef<
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        'flex w-full items-center justify-between gap-2 bg-background rounded-[var(--radius)] border border-border transition-colors outline-none whitespace-nowrap text-foreground',
+        'flex w-full items-center justify-between gap-2 bg-background rounded-[var(--radius)] border border-input-stroke transition-colors outline-none whitespace-nowrap text-foreground',
         'data-[placeholder]:text-muted-foreground',
         'focus:ring-2 focus:ring-primary focus:border-transparent',
         'disabled:cursor-not-allowed disabled:opacity-50',
@@ -107,7 +107,7 @@ const SelectContent = React.forwardRef<
       ref={ref}
       data-slot="select-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius)] border border-border shadow-md',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[var(--radius)] border border-input-stroke shadow-md',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className

package/components/ui/switch/switch.tsx

@@ -45,7 +45,7 @@ const Switch = React.forwardRef<
     <SwitchPrimitive.Root
       className={cn(
         'peer inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none disabled:cursor-not-allowed disabled:opacity-50',
-        'data-[state=checked]:bg-primary',
+        'data-[state=checked]:bg-button-primary',
         'data-[state=unchecked]:bg-muted',
         'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
         trackClasses[size],

package/components/ui/textarea/textarea.tsx

@@ -43,7 +43,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         data-slot="textarea"
         className={cn(
-          'flex min-h-16 w-full bg-background rounded-[var(--radius)] border border-border transition-colors outline-none resize-none text-foreground',
+          'flex min-h-16 w-full bg-background rounded-[var(--radius)] border border-input-stroke transition-colors outline-none resize-none text-foreground',
           'placeholder:text-muted-foreground',
           'focus:ring-2 focus:ring-primary focus:border-transparent',
           'disabled:cursor-not-allowed disabled:opacity-50',

package/contexts/BrandColorsContext.tsx

@@ -132,6 +132,10 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
     // 3. Radius
     cssVars.push(`--radius: ${radius}rem`);
 
+    // 3b. Button shape overrides (identical in both modes; theme-specific, always emitted)
+    cssVars.push(`--radius-button: ${colors.buttonRadius || '12px'}`);
+    cssVars.push(`--button-stroke-width: ${colors.buttonStrokeWidth || '0px'}`);
+
     // 4. Charts
     cssVars.push(`--chart-1: ${colors.chart1}`);
     cssVars.push(`--chart-2: ${colors.chart2}`);
@@ -193,6 +197,48 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
       darkSurfaceVars.push(`--input-background: ${colors.darkMuted}`);
     }
 
+    // 7b. Button stroke/secondary tokens + light-mode page background.
+    //     Always emitted (with fallbacks matching the pre-existing look) so
+    //     switching away from a theme that defines them never leaves a stale value.
+    const lightModeVars: string[] = [
+      `--button-stroke-color: ${colors.buttonStrokeColor || 'transparent'}`,
+      `--button-secondary-bg: ${colors.buttonSecondaryBg || 'var(--secondary)'}`,
+      `--button-secondary-foreground: ${colors.buttonSecondaryForeground || 'var(--secondary-foreground)'}`,
+      `--button-primary-bg: ${colors.buttonPrimaryBg || 'var(--primary)'}`,
+      `--button-primary-foreground: ${colors.buttonPrimaryForeground || 'var(--primary-foreground)'}`,
+    ];
+    if (colors.backgroundLight) {
+      // The app shell backdrop (e.g. AppLayout's `bg-muted` wrapper behind the
+      // sidebar/content) reads `--muted`, not `--background` — mirror the
+      // override so the shell matches the page background instead of falling
+      // back to the neutral gray every other theme uses.
+      lightModeVars.push(`--background: ${colors.backgroundLight}`);
+      lightModeVars.push(`--muted: ${colors.backgroundLight}`);
+    }
+    if (colors.cardLight) {
+      lightModeVars.push(`--card: ${colors.cardLight}`);
+      lightModeVars.push(`--popover: ${colors.cardLight}`);
+    }
+    if (colors.inputBorderColor) {
+      lightModeVars.push(`--input-border: ${colors.inputBorderColor}`);
+    }
+
+    darkSurfaceVars.push(
+      `--button-stroke-color: ${colors.buttonStrokeColorDark || colors.buttonStrokeColor || 'transparent'}`
+    );
+    darkSurfaceVars.push(
+      `--button-secondary-bg: ${colors.buttonSecondaryBgDark || colors.buttonSecondaryBg || 'var(--secondary)'}`
+    );
+    darkSurfaceVars.push(
+      `--button-secondary-foreground: ${colors.buttonSecondaryForegroundDark || colors.buttonSecondaryForeground || 'var(--secondary-foreground)'}`
+    );
+    darkSurfaceVars.push(
+      `--button-primary-bg: ${colors.buttonPrimaryBgDark || colors.buttonPrimaryBg || 'var(--primary)'}`
+    );
+    darkSurfaceVars.push(
+      `--button-primary-foreground: ${colors.buttonPrimaryForegroundDark || colors.buttonPrimaryForeground || 'var(--primary-foreground)'}`
+    );
+
     // Apply primary-related tokens directly as inline styles on <html>.
     // Inline styles have the highest possible specificity and always win over
     // any stylesheet rule, regardless of order or selector specificity.
@@ -216,13 +262,15 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
       document.head.appendChild(styleEl);
     }
 
+    const lightModeBlock = `:root:not(.dark) {\n  ${lightModeVars.join(';\n  ')};\n}`;
+
     const darkSurfaceBlock =
       darkSurfaceVars.length > 0
         ? `\n:root[data-mode='dark'], .dark {\n  ${darkSurfaceVars.join(';\n  ')};\n}`
         : '';
 
-    // The style tag handles only the surface tokens that vary per theme in dark mode.
-    styleEl.innerHTML = darkSurfaceBlock.trim();
+    // The style tag handles the surface/button tokens that vary per theme per mode.
+    styleEl.innerHTML = `${lightModeBlock}${darkSurfaceBlock}`.trim();
   }, [colors, currentTheme, radius, useCustomTokens]);
 
   // Aplicar cores quando elas mudarem

package/contexts/theme-data.ts

@@ -31,8 +31,44 @@ export interface BrandColors {
   chart4: string;
   chart5: string;
 
-  // Optional: Radius override per theme
-  radius?: string;
+  // Optional: light-mode page/shell background override (defaults to white
+  // when unset). Drives --background and --muted (the app-shell backdrop).
+  backgroundLight?: string;
+
+  // Optional: light-mode surface override for cards, popovers, the header,
+  // and the assistant panel (defaults to white when unset). Drives --card
+  // and --popover — kept distinct from backgroundLight so a theme can use a
+  // different tone for "page" vs "elevated surface".
+  cardLight?: string;
+
+  // Optional: light-mode stroke color for form fields only (Input, Select,
+  // Textarea, Search, InputOTP) — defaults to the shared --border token when
+  // unset. Deliberately scoped away from --border/--sidebar-border so
+  // structural strokes (header divider, sidebar popovers, <Separator>) keep
+  // their normal subtle look; only actual form controls need a stronger,
+  // always-visible stroke regardless of the surrounding background.
+  inputBorderColor?: string;
+
+  // Optional: Button shape & stroke overrides (defaults preserve current look when unset)
+  buttonRadius?: string;
+  buttonStrokeWidth?: string;
+  buttonStrokeColor?: string;
+  buttonStrokeColorDark?: string;
+
+  // Optional: Button `secondary` variant colors (defaults to the shared --secondary token when unset)
+  buttonSecondaryBg?: string;
+  buttonSecondaryBgDark?: string;
+  buttonSecondaryForeground?: string;
+  buttonSecondaryForegroundDark?: string;
+
+  // Optional: accent used by the Button `default` variant and Switch's checked
+  // state only (defaults to the shared --primary token when unset). Lets a
+  // theme use a vibrant color for these two controls without it bleeding into
+  // links, focus rings, radio buttons, the logo, etc. via --primary.
+  buttonPrimaryBg?: string;
+  buttonPrimaryBgDark?: string;
+  buttonPrimaryForeground?: string;
+  buttonPrimaryForegroundDark?: string;
 }
 
 export interface ColorTheme {
@@ -66,7 +102,7 @@ export const PALETTE = {
 export const colorThemes: ColorTheme[] = [
   {
     id: 'xertica-original',
-    name: 'Xertica Original',
+    name: 'Xertica Classic',
     description: 'A identidade visual clássica da Xertica com o gradiente original',
     colors: {
       primary: '#2C275B',
@@ -100,6 +136,67 @@ export const colorThemes: ColorTheme[] = [
       accent: '#72CDFD',
     },
   },
+  {
+    id: 'xertica',
+    name: 'Xertica',
+    description: 'A nova identidade visual da Xertica: papel quente, tintas vivas e botões em estilo serigrafia',
+    colors: {
+      // General-purpose brand accent (logo, links, radio buttons, focus rings,
+      // sidebar active state, badges, etc). Kept as Negro Xertica / Crema so it
+      // stays legible everywhere — yellow is reserved for buttonPrimaryBg below.
+      primary: '#1E1E1E', // Negro Xertica
+      primaryForeground: '#FFFEF8', // Marfim
+      primaryLight: '#1E1E1E',
+      primaryDarkMode: '#F2EDD8', // Crema
+      primaryForegroundDark: '#1E1E1E',
+
+      sidebarLight: '#1E1E1E', // Negro Xertica
+      sidebarDark: '#1E1E1E',
+
+      darkBackground: '#141311',
+      darkCard: '#1E1E1E',
+      darkMuted: '#26241f',
+      darkBorder: '#38352c',
+
+      gradientStart: '#1899AF', // Celeste
+      gradientEnd: '#C45BAA', // Magenta
+      gradientStartDark: '#126578',
+      gradientEndDark: '#8F3F7D',
+
+      chart1: '#3D63AC', // Azul
+      chart2: '#1899AF', // Celeste
+      chart3: '#FAF338', // Amarillo
+      chart4: '#DE5B48', // Rojo Coral
+      chart5: '#2E8B5A', // Verde
+
+      backgroundLight: '#E9E6DC', // page/shell background
+      cardLight: '#FFFEF8', // Marfim — cards, header, assistant panel
+      inputBorderColor: 'rgba(30, 30, 30, 0.4)', // Negro Xertica stroke — form fields only
+
+      buttonRadius: '9999px',
+      buttonStrokeWidth: '2px',
+      buttonStrokeColor: '#1E1E1E',
+      buttonStrokeColorDark: '#F2EDD8', // Crema
+
+      buttonSecondaryBg: '#1E1E1E',
+      buttonSecondaryBgDark: '#1E1E1E',
+      buttonSecondaryForeground: '#FFFEF8',
+      buttonSecondaryForegroundDark: '#FFFEF8',
+
+      // Amarillo stays vibrant, but only here — Button `default` variant and
+      // Switch's checked track, per the brand rule that yellow is the one
+      // accent allowed to dominate, and only in those two contexts.
+      buttonPrimaryBg: '#FAF338',
+      buttonPrimaryBgDark: '#FAF338',
+      buttonPrimaryForeground: '#1E1E1E',
+      buttonPrimaryForegroundDark: '#1E1E1E',
+    },
+    preview: {
+      primary: '#FAF338',
+      secondary: '#1E1E1E',
+      accent: '#1899AF',
+    },
+  },
   {
     id: 'zinc',
     name: 'Zinc',