xertica-ui 2.6.0 → 2.8.0

package/components/pages/verify-email-page/VerifyEmailPage.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { Button } from '../../ui/button';
 import { XerticaLogo } from '../../brand/xertica-logo';
-import { ImageWithFallback } from '../../figma/ImageWithFallback';
-import { LanguageSelector } from '../../brand/language-selector';
-import { ArrowLeft, Mail, CheckCircle2, Lock } from 'lucide-react';
+import { AuthPageShell, SocialLoginButtons } from '../../blocks/auth';
+import { ArrowLeft, Mail, CheckCircle2 } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -47,160 +46,59 @@ export function VerifyEmailPage() {
   };
 
   return (
-    <div className="h-screen w-full flex overflow-y-auto">
-      {/* Left side - Full background image */}
-      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
-        {/* Background image filling all space */}
-        <ImageWithFallback
-          src="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format"
-          alt={t('verifyEmail.heroImageAlt')}
-          className="absolute inset-0 w-full h-full object-cover"
-        />
-
-        {/* Gradient overlay */}
-        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
-      </div>
-
-      {/* Right side - Content */}
-      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted">
-        {/* Language selector in the top right corner */}
-        <div className="absolute top-4 right-4 z-20">
-          <LanguageSelector variant="minimal" showIcon={false} />
+    <AuthPageShell
+      imageSrc="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format"
+      imageAlt={t('verifyEmail.heroImageAlt')}
+    >
+      <div className="text-center">
+        <div className="flex items-center justify-center mb-4">
+          <XerticaLogo className="h-12 w-auto text-primary dark:text-foreground" variant="theme" />
         </div>
 
-        {/* Mobile background gradient */}
-        <div className="absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" />
-
-        <div className="w-full max-w-sm space-y-6 relative z-10">
-          {/* Form header */}
-          <div className="text-center">
-            <div className="flex items-center justify-center mb-4">
-              <XerticaLogo
-                className="h-12 w-auto text-primary dark:text-foreground"
-                variant="theme"
-              />
-            </div>
-
-            {/* Email icon */}
-            <div className="flex items-center justify-center mb-4">
-              <div className="p-4 bg-primary/10 rounded-[var(--radius)]">
-                <Mail className="w-12 h-12 text-primary" />
-              </div>
-            </div>
-
-            <h2 className="text-sm text-muted-foreground">{t('verifyEmail.heading')}</h2>
-            <p className="mt-2 text-muted-foreground">{t('verifyEmail.instructionsSent')}</p>
-            <p className="mt-1 text-primary">{email}</p>
-          </div>
-
-          {/* Instructions */}
-          <div className="bg-accent rounded-[var(--radius)] p-4 space-y-3">
-            <p className="text-muted-foreground">{t('verifyEmail.instructions')}</p>
-            <div className="flex items-start gap-2 text-muted-foreground">
-              <CheckCircle2 className="w-4 h-4 mt-0.5 flex-shrink-0 text-[var(--chart-2)]" />
-              <span className="text-sm">{t('verifyEmail.checkSpam')}</span>
-            </div>
-          </div>
-
-          {/* Success message on resend */}
-          {resendSuccess && (
-            <div className="bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 rounded-[var(--radius)] p-3 flex items-center gap-2">
-              <CheckCircle2 className="w-5 h-5 text-[var(--chart-2)] flex-shrink-0" />
-              <span className="text-sm text-[var(--chart-2)]">
-                {t('verifyEmail.resentSuccess')}
-              </span>
-            </div>
-          )}
-
-          {/* Action buttons */}
-          <div className="space-y-3">
-            <p className="text-center text-muted-foreground">{t('verifyEmail.notReceived')}</p>
-            <Button
-              variant="outline"
-              className="w-full"
-              onClick={handleResend}
-              disabled={isResending}
-            >
-              {isResending ? t('verifyEmail.resending') : t('verifyEmail.resend')}
-            </Button>
-
-            <Button
-              type="button"
-              onClick={() => navigate('/login')}
-              variant="outline"
-              className="w-full text-muted-foreground hover:text-foreground"
-            >
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              {t('verifyEmail.backToLogin')}
-            </Button>
-          </div>
-
-          {/* Divider */}
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-border"></div>
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="bg-muted px-2 text-muted-foreground">
-                {t('login.orContinueWith')}
-              </span>
-            </div>
+        <div className="flex items-center justify-center mb-4">
+          <div className="p-4 bg-primary/10 rounded-[var(--radius)]">
+            <Mail className="w-12 h-12 text-primary" />
           </div>
+        </div>
 
-          {/* Social/SSO login options */}
-          <div className="space-y-3">
-            {/* Google */}
-            <Button
-              type="button"
-              variant="outline"
-              className="w-full justify-center"
-              onClick={() => handleSocialLogin('Google')}
-            >
-              <svg className="w-5 h-5 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  fill="#EA4335"
-                  d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-                ></path>
-                <path
-                  fill="#4285F4"
-                  d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-                ></path>
-                <path
-                  fill="#FBBC05"
-                  d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-                ></path>
-                <path
-                  fill="#34A853"
-                  d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-                ></path>
-                <path fill="none" d="M0 0h48v48H0z"></path>
-              </svg>
-              <span>{t('login.signInWithGoogle')}</span>
-            </Button>
+        <h2 className="text-sm text-muted-foreground">{t('verifyEmail.heading')}</h2>
+        <p className="mt-2 text-muted-foreground">{t('verifyEmail.instructionsSent')}</p>
+        <p className="mt-1 text-primary">{email}</p>
+      </div>
 
-            {/* MT Login */}
-            <Button
-              type="button"
-              variant="outline"
-              className="w-full justify-center"
-              onClick={() => handleSocialLogin('MT Login')}
-            >
-              <Lock className="w-5 h-5 mr-2 text-[var(--chart-4)]" />
-              <span>{t('login.signInWithMTLogin')}</span>
-            </Button>
+      <div className="bg-accent rounded-[var(--radius)] p-4 space-y-3">
+        <p className="text-muted-foreground">{t('verifyEmail.instructions')}</p>
+        <div className="flex items-start gap-2 text-muted-foreground">
+          <CheckCircle2 className="w-4 h-4 mt-0.5 flex-shrink-0 text-[var(--chart-2)]" />
+          <span className="text-sm">{t('verifyEmail.checkSpam')}</span>
+        </div>
+      </div>
 
-            {/* gov.br */}
-            <Button
-              type="button"
-              variant="outline"
-              className="w-full justify-center font-normal"
-              onClick={() => handleSocialLogin('gov.br')}
-            >
-              <span>{t('login.signInWithGovBr')}</span>
-            </Button>
-          </div>
+      {resendSuccess && (
+        <div className="bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 rounded-[var(--radius)] p-3 flex items-center gap-2">
+          <CheckCircle2 className="w-5 h-5 text-[var(--chart-2)] flex-shrink-0" />
+          <span className="text-sm text-[var(--chart-2)]">{t('verifyEmail.resentSuccess')}</span>
         </div>
+      )}
+
+      <div className="space-y-3">
+        <p className="text-center text-muted-foreground">{t('verifyEmail.notReceived')}</p>
+        <Button variant="outline" className="w-full" onClick={handleResend} disabled={isResending}>
+          {isResending ? t('verifyEmail.resending') : t('verifyEmail.resend')}
+        </Button>
+
+        <Button
+          type="button"
+          onClick={() => navigate('/login')}
+          variant="outline"
+          className="w-full text-muted-foreground hover:text-foreground"
+        >
+          <ArrowLeft className="w-4 h-4 mr-2" />
+          {t('verifyEmail.backToLogin')}
+        </Button>
       </div>
-    </div>
+
+      <SocialLoginButtons onSocialLogin={handleSocialLogin} />
+    </AuthPageShell>
   );
 }

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',