xertica-ui 2.8.0 → 2.9.7

package/components/pages/landing-page/LandingPage.tsx

@@ -0,0 +1,360 @@
+import * as React from 'react';
+import {
+  BookOpen,
+  Braces,
+  Code2,
+  Component,
+  Figma,
+  FileCode2,
+  Github,
+  Layers,
+  Package,
+  ShieldCheck,
+  Sparkles,
+  SquareTerminal,
+  SwatchBook,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { IsotypeDiagonal, IsotypeFrames } from '../../brand/isotype';
+import { XerticaLogo } from '../../brand/xertica-logo';
+import {
+  ComplianceBadgeRow,
+  CTASection,
+  FeatureRow,
+  Hero,
+  HowItWorksSteps,
+  MarketingFooter,
+  MarketingNavbar,
+  SectionHeading,
+  ServiceCardGrid,
+  StatBand,
+  TopAccentCards,
+} from '../../blocks/marketing';
+
+/**
+ * Public marketing landing page for the Xertica-ui design system.
+ *
+ * @description
+ * A full composition of the `blocks/marketing` primitives — navbar, hero,
+ * framing cards, service grids, alternating feature rows, a "how it works"
+ * steps block, compliance badges, a closing CTA, and a footer.
+ * Renders in its own scrollable root, independent of the authenticated
+ * app shell's fixed-height layout.
+ *
+ * @ai-rules
+ * 1. This page is presentational only — all CTAs use placeholder `href="#"` links; wire real routes/handlers when integrating.
+ * 2. All visuals are token-driven placeholders (brand isotypes, inline SVG logos) to avoid any network/image dependency.
+ * 3. Keep composing exclusively from `components/blocks/marketing` — do not hand-roll sections that a block already covers.
+ * 4. All copy comes from the `landing` i18n namespace (`locales/<lang>/pages/landing.json`) via `useTranslation()` — never hardcode user-facing text here.
+ */
+export function LandingPage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-full w-full overflow-y-auto bg-background">
+      <MarketingNavbar
+        logo={<XerticaLogo className="h-8 w-auto text-primary dark:text-foreground" variant="theme" />}
+        links={[
+          { label: t('landing.nav.product'), href: '#' },
+          { label: t('landing.nav.resources'), href: '#' },
+          { label: t('landing.nav.pricing'), href: '#' },
+          { label: t('landing.nav.contact'), href: '#' },
+        ]}
+        cta={{ label: t('landing.nav.login'), href: '#' }}
+        openMenuLabel={t('landing.nav.openMenu')}
+        closeMenuLabel={t('landing.nav.closeMenu')}
+      />
+
+      <Hero
+        eyebrow={{ label: t('landing.hero.eyebrow'), icon: <Sparkles /> }}
+        title={t('landing.hero.title')}
+        description={t('landing.hero.description')}
+        primaryCta={{ label: t('landing.hero.primaryCta'), href: '#' }}
+        secondaryCta={{ label: t('landing.hero.secondaryCta'), href: '#' }}
+        // Isotype (plain grid mark) is out of rotation for now — only Diagonal + Frames are in active use.
+        // visual={<Isotype className="mx-auto w-full max-w-md" />}
+        visual={<IsotypeDiagonal className="mx-auto w-full max-w-md" />}
+      />
+
+      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
+        <TopAccentCards
+          items={[
+            {
+              title: t('landing.framing.purpose.title'),
+              body: t('landing.framing.purpose.body'),
+              color: 'chart-4',
+            },
+            {
+              title: t('landing.framing.problem.title'),
+              body: t('landing.framing.problem.body'),
+              bullets: [
+                t('landing.framing.problem.bullet1'),
+                t('landing.framing.problem.bullet2'),
+                t('landing.framing.problem.bullet3'),
+              ],
+              color: 'chart-5',
+            },
+          ]}
+        />
+      </section>
+
+      <section className="bg-card">
+        <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
+          <SectionHeading
+            title={t('landing.ecosystem.title')}
+            accentColor="chart-1"
+            className="mb-12"
+          />
+
+          <ServiceCardGrid
+            variant="card"
+            columns={4}
+            items={[
+              {
+                icon: <Figma />,
+                color: 'primary',
+                title: t('landing.ecosystem.figma.title'),
+                description: t('landing.ecosystem.figma.description'),
+                bullets: [
+                  t('landing.ecosystem.figma.bullet1'),
+                  t('landing.ecosystem.figma.bullet2'),
+                ],
+              },
+              {
+                icon: <FileCode2 />,
+                color: 'chart-1',
+                title: t('landing.ecosystem.vscode.title'),
+                description: t('landing.ecosystem.vscode.description'),
+                bullets: [
+                  t('landing.ecosystem.vscode.bullet1'),
+                  t('landing.ecosystem.vscode.bullet2'),
+                ],
+              },
+              {
+                icon: <Component />,
+                color: 'chart-5',
+                title: t('landing.ecosystem.storybook.title'),
+                description: t('landing.ecosystem.storybook.description'),
+                bullets: [
+                  t('landing.ecosystem.storybook.bullet1'),
+                  t('landing.ecosystem.storybook.bullet2'),
+                ],
+              },
+              {
+                icon: <Github />,
+                color: 'chart-2',
+                title: t('landing.ecosystem.github.title'),
+                description: t('landing.ecosystem.github.description'),
+                bullets: [
+                  t('landing.ecosystem.github.bullet1'),
+                  t('landing.ecosystem.github.bullet2'),
+                ],
+              },
+            ]}
+          />
+        </div>
+      </section>
+
+      <FeatureRow
+        eyebrow={t('landing.features.theming.eyebrow')}
+        title={t('landing.features.theming.title')}
+        description={t('landing.features.theming.description')}
+        bullets={[
+          t('landing.features.theming.bullet1'),
+          t('landing.features.theming.bullet2'),
+          t('landing.features.theming.bullet3'),
+        ]}
+        visual={<IsotypeFrames variant="blue-magenta" className="mx-auto w-full max-w-md" />}
+      />
+
+      <FeatureRow
+        tone="card"
+        reverse
+        eyebrow={t('landing.features.composition.eyebrow')}
+        title={t('landing.features.composition.title')}
+        description={t('landing.features.composition.description')}
+        bullets={[
+          t('landing.features.composition.bullet1'),
+          t('landing.features.composition.bullet2'),
+          t('landing.features.composition.bullet3'),
+        ]}
+        visual={<IsotypeDiagonal className="mx-auto w-full max-w-md" />}
+      />
+
+      <FeatureRow
+        eyebrow={t('landing.features.onboarding.eyebrow')}
+        title={t('landing.features.onboarding.title')}
+        description={t('landing.features.onboarding.description')}
+        bullets={[
+          t('landing.features.onboarding.bullet1'),
+          t('landing.features.onboarding.bullet2'),
+          t('landing.features.onboarding.bullet3'),
+        ]}
+        visual={<IsotypeFrames variant="blue-yellow" className="mx-auto w-full max-w-md" />}
+      />
+
+      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
+        <SectionHeading
+          title={t('landing.useCases.title')}
+          accentColor="chart-4"
+          className="mb-12"
+        />
+
+        <ServiceCardGrid
+          variant="card"
+          columns={3}
+          items={[
+            {
+              color: 'chart-2',
+              title: t('landing.useCases.ecommerce.title'),
+              description: t('landing.useCases.ecommerce.description'),
+              checklist: [
+                t('landing.useCases.ecommerce.check1'),
+                t('landing.useCases.ecommerce.check2'),
+              ],
+              className: 'border',
+            },
+            {
+              color: 'primary',
+              title: t('landing.useCases.saas.title'),
+              description: t('landing.useCases.saas.description'),
+              checklist: [t('landing.useCases.saas.check1'), t('landing.useCases.saas.check2')],
+              className: 'border',
+            },
+            {
+              color: 'chart-4',
+              title: t('landing.useCases.fintech.title'),
+              description: t('landing.useCases.fintech.description'),
+              checklist: [
+                t('landing.useCases.fintech.check1'),
+                t('landing.useCases.fintech.check2'),
+              ],
+              className: 'border',
+            },
+          ]}
+        />
+      </section>
+
+      <section className="bg-sidebar text-sidebar-foreground">
+        <div className="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
+          <SectionHeading
+            title={t('landing.methodology.title')}
+            tone="sidebar"
+            accentColor="primary"
+            className="mb-12"
+          />
+
+          <HowItWorksSteps
+            items={[
+              {
+                icon: <SwatchBook />,
+                title: t('landing.methodology.tokensFirst.title'),
+                description: t('landing.methodology.tokensFirst.description'),
+                color: 'chart-4',
+              },
+              {
+                icon: <Layers />,
+                title: t('landing.methodology.primitives.title'),
+                description: t('landing.methodology.primitives.description'),
+                color: 'chart-2',
+              },
+              {
+                icon: <Braces />,
+                title: t('landing.methodology.compositionBlocks.title'),
+                description: t('landing.methodology.compositionBlocks.description'),
+                color: 'chart-1',
+              },
+              {
+                icon: <SquareTerminal />,
+                title: t('landing.methodology.cliTemplates.title'),
+                description: t('landing.methodology.cliTemplates.description'),
+                color: 'warning',
+              },
+            ]}
+          />
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 md:py-24">
+        <div className="rounded-2xl border border-border bg-card p-8 md:p-12">
+          <ComplianceBadgeRow
+            badges={[
+              {
+                icon: <ShieldCheck />,
+                label: t('landing.compliance.wcag.label'),
+                description: t('landing.compliance.wcag.description'),
+              },
+              {
+                icon: <Code2 />,
+                label: t('landing.compliance.typescript.label'),
+                description: t('landing.compliance.typescript.description'),
+              },
+              {
+                icon: <Package />,
+                label: t('landing.compliance.treeShakeable.label'),
+                description: t('landing.compliance.treeShakeable.description'),
+              },
+              {
+                icon: <BookOpen />,
+                label: t('landing.compliance.themeable.label'),
+                description: t('landing.compliance.themeable.description'),
+              },
+            ]}
+          />
+
+          <div className="my-10 border-t border-border" />
+
+          <StatBand
+            columns={3}
+            stats={[
+              { value: '99.9%', label: t('landing.stats.docsUptime'), color: 'success' },
+              { value: '<24h', label: t('landing.stats.avgResponseTime'), color: 'info' },
+              { value: '100%', label: t('landing.stats.typedComponents'), color: 'chart-5' },
+            ]}
+          />
+        </div>
+      </section>
+
+      <section className="mx-auto max-w-7xl px-4 pb-16 sm:px-6 lg:px-8 md:pb-24">
+        <CTASection
+          title={t('landing.cta.title')}
+          description={t('landing.cta.description')}
+          cta={{ label: t('landing.cta.primary'), href: '#' }}
+          secondaryCta={{ label: t('landing.cta.secondary'), href: '#' }}
+        />
+      </section>
+
+      <MarketingFooter
+        logo={<XerticaLogo className="h-8 w-auto text-primary dark:text-foreground" variant="theme" />}
+        tagline={t('landing.footer.tagline')}
+        columns={[
+          {
+            heading: t('landing.footer.product.heading'),
+            links: [
+              { label: t('landing.footer.product.components'), href: '#' },
+              { label: t('landing.footer.product.blocks'), href: '#' },
+              { label: t('landing.footer.product.themes'), href: '#' },
+            ],
+          },
+          {
+            heading: t('landing.footer.resources.heading'),
+            links: [
+              { label: t('landing.footer.resources.docs'), href: '#' },
+              { label: t('landing.footer.resources.cli'), href: '#' },
+              { label: t('landing.footer.resources.changelog'), href: '#' },
+            ],
+          },
+          {
+            heading: t('landing.footer.company.heading'),
+            links: [
+              { label: t('landing.footer.company.about'), href: '#' },
+              { label: t('landing.footer.company.contact'), href: '#' },
+              { label: t('landing.footer.company.careers'), href: '#' },
+            ],
+          },
+        ]}
+        copyright={t('landing.footer.copyright')}
+      />
+    </div>
+  );
+}

package/components/pages/landing-page/index.ts

@@ -0,0 +1 @@
+export { LandingPage } from './LandingPage';

package/components/pages/login-page/LoginPage.tsx

@@ -22,13 +22,13 @@ interface LoginPageProps {
  * Standard Login Page component.
  *
  * @description
- * A complete, responsive login screen featuring a hero image side-panel (on desktop)
+ * A complete, responsive login screen featuring a brand isotype side-panel (on desktop)
  * and a focused authentication form. Supports email/password login and placeholders
  * for Social/SSO providers (Google, MT Login, gov.br).
  *
  * @ai-rules
  * 1. State Management: You must provide the `onLogin` callback to handle the actual authentication logic.
- * 2. Visuals: Hero images use `ImageWithFallback`. You can customize the `src` if needed.
+ * 2. Visuals: Left panel renders `IsotypeTwist` via `AuthPageShell`'s `leftPanel="isotype"` — no hero image on this page.
  * 3. Routing: Uses `react-router` for navigation to the forgot-password flow.
  */
 export function LoginPage({ onLogin }: LoginPageProps) {
@@ -62,10 +62,7 @@ export function LoginPage({ onLogin }: LoginPageProps) {
   };
 
   return (
-    <AuthPageShell
-      imageSrc="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format"
-      imageAlt={t('login.heroImageAlt')}
-    >
+    <AuthPageShell leftPanel="isotype">
       <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" />

package/components/pages/reset-password-page/ResetPasswordPage.tsx

@@ -62,10 +62,7 @@ export function ResetPasswordPage() {
   };
 
   return (
-    <AuthPageShell
-      imageSrc="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=1200&h=800&fit=crop&auto=format"
-      imageAlt={t('resetPassword.heroImageAlt')}
-    >
+    <AuthPageShell leftPanel="isotype">
       <button
         onClick={() => navigate('/login')}
         className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"

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

@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next';
  * @description
  * An informative screen shown after a password reset request. It instructs
  * the user to check their email and provides a "Resend email" feature.
- * Includes the same consistent layout with a hero image side-panel.
+ * Includes the same consistent layout with the shared brand isotype side-panel.
  *
  * @ai-rules
  * 1. Data Source: It retrieves the email from the router's `location.state`.
@@ -46,10 +46,7 @@ export function VerifyEmailPage() {
   };
 
   return (
-    <AuthPageShell
-      imageSrc="https://images.unsplash.com/photo-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format"
-      imageAlt={t('verifyEmail.heroImageAlt')}
-    >
+    <AuthPageShell leftPanel="isotype">
       <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" />

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

@@ -16,7 +16,7 @@ describe('Button', () => {
     expect(screen.getByRole('button')).toHaveClass('bg-destructive');
 
     rerender(<Button variant="outline">Outline</Button>);
-    expect(screen.getByRole('button')).toHaveClass('border-border');
+    expect(screen.getByRole('button')).toHaveClass('border-outline-stroke');
 
     rerender(<Button variant="ghost">Ghost</Button>);
     expect(screen.getByRole('button')).toHaveClass('hover:bg-accent');

package/components/ui/button/button.tsx

@@ -6,22 +6,23 @@ import { Loader2 } from 'lucide-react';
 import { cn } from '../../shared/utils';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-button)] text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-button)] text-sm font-button-weight transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
         default: 'border-button-stroke bg-button-primary text-button-primary',
         destructive:
-          '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',
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+        outline:
+          'border border-outline-stroke bg-background hover:bg-accent hover:text-accent-foreground',
         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:
-          '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',
+          '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',
         warning:
-          'border-button-stroke bg-warning text-warning-foreground hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40',
+          '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.test.tsx

@@ -52,4 +52,16 @@ describe('Card', () => {
     const { container } = render(<Card className="custom-card">Content</Card>);
     expect(container.querySelector('[data-slot="card"]')).toHaveClass('custom-card');
   });
+
+  it('defaults to the theme-reactive card background and foreground', () => {
+    const { container } = render(<Card>Content</Card>);
+    expect(container.querySelector('[data-slot="card"]')).toHaveClass('bg-card', 'text-card-foreground');
+  });
+
+  it('pairs variant="white" with a fixed dark text color, not the theme-reactive one', () => {
+    const { container } = render(<Card variant="white">Content</Card>);
+    const card = container.querySelector('[data-slot="card"]');
+    expect(card).toHaveClass('bg-white', 'text-neutral-900');
+    expect(card).not.toHaveClass('text-card-foreground');
+  });
 });

package/components/ui/card/card.tsx

@@ -7,7 +7,9 @@ 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.
+   *   for cards that should stand out from the theme's own card tone. Pairs
+   *   with a fixed dark text color, since the theme's `--card-foreground` can
+   *   be near-white in dark mode.
    */
   variant?: 'default' | 'white';
 }
@@ -30,8 +32,8 @@ function Card({ className, variant = 'default', ...props }: CardProps) {
     <div
       data-slot="card"
       className={cn(
-        'text-card-foreground flex flex-col gap-6 rounded-[var(--radius-card)]',
-        variant === 'white' ? 'bg-white' : 'bg-card',
+        'flex flex-col gap-6 rounded-[var(--radius-card)]',
+        variant === 'white' ? 'bg-white text-neutral-900' : 'bg-card text-card-foreground',
         className
       )}
       {...props}

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

@@ -1,10 +1,23 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './input-otp';
 import { OTPInputContext } from 'input-otp';
 import React from 'react';
 
 describe('InputOTP', () => {
+  // input-otp schedules internal setTimeout(0/10/50) calls on mount that it
+  // never cancels on unmount. Under real timers those fire after this file's
+  // jsdom environment is torn down, throwing `window is not defined` as an
+  // unhandled error in later test files. Fake timers keep them from ever
+  // firing for real.
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('renders children correctly', () => {
     render(
       <OTPInputContext.Provider value={{ slots: [{ char: 'A' }] } as any}>

package/contexts/BrandColorsContext.tsx

@@ -87,13 +87,13 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
     const gradientStart = isDark ? colors.gradientStartDark : colors.gradientStart;
     const gradientEnd = isDark ? colors.gradientEndDark : colors.gradientEnd;
 
-    // --- Semantic Colors (Fixed Standard) ---
+    // --- Semantic Colors (Fixed Standard, overridable per theme in light mode) ---
     // Success (Green), Warning (Amber/Yellow), Info (Blue), Destructive (Red)
     const semantic = {
-      success: isDark ? '#4ade80' : '#047857', // Green 400 / 700
-      warning: isDark ? '#fbbf24' : '#b45309', // Amber 400 / 700
-      info: isDark ? '#60a5fa' : '#1d4ed8', // Blue 400 / 700
-      destructive: isDark ? '#f87171' : '#b91c1c', // Red 400 / 700
+      success: isDark ? '#4ade80' : colors.successColor || '#047857', // Green 400 / 700
+      warning: isDark ? '#fbbf24' : colors.warningColor || '#b45309', // Amber 400 / 700
+      info: isDark ? '#60a5fa' : colors.infoColor || '#1d4ed8', // Blue 400 / 700
+      destructive: isDark ? '#f87171' : colors.destructiveColor || '#b91c1c', // Red 400 / 700
       foreground: isDark ? '#050505' : '#ffffff',
     };
 
@@ -135,6 +135,7 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
     // 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'}`);
+    cssVars.push(`--button-font-weight: ${colors.buttonFontWeight || '500'}`);
 
     // 4. Charts
     cssVars.push(`--chart-1: ${colors.chart1}`);
@@ -222,6 +223,9 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
     if (colors.inputBorderColor) {
       lightModeVars.push(`--input-border: ${colors.inputBorderColor}`);
     }
+    if (colors.outlineBorderColor) {
+      lightModeVars.push(`--outline-border: ${colors.outlineBorderColor}`);
+    }
 
     darkSurfaceVars.push(
       `--button-stroke-color: ${colors.buttonStrokeColorDark || colors.buttonStrokeColor || 'transparent'}`

package/contexts/theme-data.ts

@@ -49,11 +49,29 @@ export interface BrandColors {
   // always-visible stroke regardless of the surrounding background.
   inputBorderColor?: string;
 
+  // Optional: light-mode border color for the Button `outline` variant only
+  // — defaults to the shared --border token when unset. Same rationale as
+  // inputBorderColor: an outline button needs a stronger, always-visible
+  // contour when a theme makes --background and --muted identical, without
+  // affecting structural strokes elsewhere.
+  outlineBorderColor?: string;
+
+  // Optional: light-mode overrides for the semantic status colors (success,
+  // warning, info, destructive) used by alerts, badges, and status buttons —
+  // each defaults to the shared fixed value (see BrandColorsContext) when
+  // unset. Dark mode always uses the fixed value regardless of these, since
+  // no dark-mode-specific brand value has been defined yet.
+  successColor?: string;
+  warningColor?: string;
+  infoColor?: string;
+  destructiveColor?: string;
+
   // Optional: Button shape & stroke overrides (defaults preserve current look when unset)
   buttonRadius?: string;
   buttonStrokeWidth?: string;
   buttonStrokeColor?: string;
   buttonStrokeColorDark?: string;
+  buttonFontWeight?: string;
 
   // Optional: Button `secondary` variant colors (defaults to the shared --secondary token when unset)
   buttonSecondaryBg?: string;
@@ -158,10 +176,12 @@ export const colorThemes: ColorTheme[] = [
       darkMuted: '#26241f',
       darkBorder: '#38352c',
 
-      gradientStart: '#1899AF', // Celeste
-      gradientEnd: '#C45BAA', // Magenta
-      gradientStartDark: '#126578',
-      gradientEndDark: '#8F3F7D',
+      // Flat fill, same value on every stop — this theme uses solid ink
+      // colors, never gradients (Negro Xertica, matching sidebar/secondary-button).
+      gradientStart: '#1E1E1E',
+      gradientEnd: '#1E1E1E',
+      gradientStartDark: '#1E1E1E',
+      gradientEndDark: '#1E1E1E',
 
       chart1: '#3D63AC', // Azul
       chart2: '#1899AF', // Celeste
@@ -172,11 +192,18 @@ export const colorThemes: ColorTheme[] = [
       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
+      outlineBorderColor: 'rgba(30, 30, 30, 0.4)', // Negro Xertica stroke — Button `outline` variant only
+
+      successColor: '#2E8B5A', // Verde
+      warningColor: '#E37744', // Naranja
+      infoColor: '#3D63AC', // Azul
+      destructiveColor: '#DE5B48', // Rojo Coral
 
       buttonRadius: '9999px',
-      buttonStrokeWidth: '2px',
+      buttonStrokeWidth: '1px',
       buttonStrokeColor: '#1E1E1E',
       buttonStrokeColorDark: '#F2EDD8', // Crema
+      buttonFontWeight: '400',
 
       buttonSecondaryBg: '#1E1E1E',
       buttonSecondaryBgDark: '#1E1E1E',