xertica-ui 2.7.0 → 2.9.6

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

@@ -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', () => {
@@ -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');
@@ -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

@@ -6,15 +6,16 @@ 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: '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',
-        outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        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:

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

@@ -2,6 +2,18 @@ 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. Pairs
+   *   with a fixed dark text color, since the theme's `--card-foreground` can
+   *   be near-white in dark mode.
+   */
+  variant?: 'default' | 'white';
+}
+
 /**
  * Primary content container surface.
  *
@@ -13,13 +25,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)]',
+        '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/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',