Themes

The YaVendio theme provides a complete design system built on shadcn UI conventions, featuring brand color primitives, gradients, custom shadows, and seamless integration with standard shadcn components.

Installation

Install the theme using the shadcn CLI:

npx shadcn@latest add https://www.ya.style/r/ya-theme

This adds all CSS variables to your stylesheet, including:

Brand color primitives (--ya-plum-*, --ya-stone-*)
Shadcn standard variables configured with YA colors
Custom shadows and effects
Semantic color palettes

Copy the CSS variables to your globals.css:

globals.css

@layer base {
  :root {
    /* Brand Primitives */
    --ya-plum-100: #e5dcef;
    --ya-plum-200: #ab84c8;
    --ya-plum-300: #8d3f87;
    --ya-plum-400: #6a2f65;
    --ya-plum-500: #31162f;

    --ya-stone-50: #fafaf9;
    --ya-stone-100: #f5f5f4;
    --ya-stone-200: #e7e5e4;
    /* ... more stone shades ... */

    /* Shadcn Standard Variables */
    --primary: var(--ya-plum-300);
    --primary-foreground: #ffffff;
    --secondary: var(--ya-stone-100);
    --secondary-foreground: var(--ya-stone-800);
    --destructive: #be2020;
    --destructive-foreground: var(--ya-stone-50);
    --muted: var(--ya-stone-100);
    --muted-foreground: var(--ya-stone-500);
    --accent: transparent;
    --accent-foreground: var(--ya-stone-800);
    --border: var(--ya-stone-200);

    /* Border Radius Scale */
    --radius: 0.5rem;
    --radius-xs: calc(var(--radius) - 6px);  /* Custom extension */
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);

    /* Custom Effects */
    --ya-shadow-inset: inset 0px -2px 0.3px 0px rgba(14, 56, 125, 0.18),
                       inset 0px 2px 1px 0px rgba(255, 255, 255, 0.22);
    --ya-shadow-elev-1: 0px 8px 15px 0px rgba(25, 33, 61, 0.1);
    --ya-ring: var(--ya-yellow-300);
  }

  .dark {
    --primary: var(--ya-plum-400);
    --secondary: var(--ya-stone-800);
    --secondary-foreground: var(--ya-stone-100);
    --ya-shadow-elev-1: 0px 8px 15px 0px rgba(0, 0, 0, 0.35);
    /* ... more dark mode overrides ... */
  }
}

Architecture

The theme follows a two-layer architecture:

flowchart LR
    Primitives["Brand Primitives<br/>--ya-plum-300<br/>--ya-stone-100"] --> Semantic["Shadcn Variables<br/>--primary<br/>--secondary"]
    Semantic --> Components["Components<br/>bg-primary<br/>text-secondary"]

Layer 1: Brand Primitives

Color palettes and unique tokens that define the YaVendio brand:

--ya-plum-300: #8d3f87;      /* Brand color */
--ya-stone-100: #f5f5f4;     /* Neutral light */
--ya-yellow-300: #f4ec7a;    /* Accent */

Layer 2: Shadcn Standard Variables

Standard shadcn variables that reference the primitives:

--primary: var(--ya-plum-300);
--secondary: var(--ya-stone-100);
--border: var(--ya-stone-200);

Benefits

✅ Universal Compatibility — Works in any shadcn project
✅ No Conflicts — Components use standard bg-primary classes
✅ Brand Consistency — Primitives maintain single source of truth
✅ Easy Customization — Override shadcn variables to rebrand

Gradients

Plum-Indigo#e5dcef → #b6c0e2

Yellow-Plum#fbf8d2 → #e5dcef

Yellow-Indigo#fbf8d2 → #edf1f8

Plum Dark#31162f → #6a2f65

Indigo Dark#2a396b → #3a4e92

Yellow-Plum#f4ec7a → #6a2f65

Yellow-Indigo#f4ec7a → #2a396b

Using Gradients

// Using CSS variables
<div className="bg-[image:var(--ya-gradient-plum-dark)] text-white">
  Dark gradient background
</div>

// Direct usage
<div style={{ background: 'var(--ya-gradient-yellow-plum-light)' }}>
  Light gradient
</div>

Border Radius

YaVendio extends Tailwind's default border radius scale with custom values:

The rounded-xs utility is a YaVendio extension not available in Tailwind CSS v4 by default.

Variable	Value	Tailwind Class
`--radius`	0.5rem (8px)	Base value
`--radius-xs`	calc(var(--radius) - 6px) → 2px	`rounded-xs` (custom)
`--radius-sm`	calc(var(--radius) - 4px) → 4px	`rounded-sm`
`--radius-md`	calc(var(--radius) - 2px) → 6px	`rounded-md`
`--radius-lg`	var(--radius) → 8px	`rounded-lg`
`--radius-xl`	calc(var(--radius) + 4px) → 12px	`rounded-xl`

Tailwind v4 Configuration

For Tailwind v4, add these to your @theme inline block to enable the utilities:

@theme inline {
  --radius-xs: calc(var(--radius) - 6px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

Custom Shadows

YaVendio includes unique shadow effects not available in standard Tailwind:

Token	Description	Usage
`--ya-shadow-inset`	3D inset effect	Primary buttons

// Used automatically in YaButton variant="primary"
<YaButton variant="primary">Has inset shadow</YaButton>

// Manual usage
<div className="[box-shadow:var(--ya-shadow-inset)]">
  Custom element with inset shadow
</div>

Shadcn Integration

Components use standard shadcn variables, allowing seamless integration:

// With YaVendio theme installed
import { YaButton } from '@/components/ui/ya-button'

// Uses --primary (which is --ya-plum-300)
<YaButton variant="primary">YA Style</YaButton>

// With your own theme
:root {
  --primary: #ff0000;  /* Your brand red */
}

// YaButton adapts to your theme!
<YaButton variant="primary">Your Brand Style</YaButton>

Dark Mode

Component tokens adjust automatically based on the .dark class:

Variable	Light	Dark
`--primary`	plum-300 (#8d3f87)	plum-400 (#6a2f65)
`--secondary`	stone-100 (#f5f5f4)	stone-800 (#292524)
`--border`	stone-200 (#e7e5e4)	stone-700 (#44403c)
`--ya-ring`	yellow-300 (#f4ec7a)	stone-500 (#78716c)

Enabling Dark Mode

// Toggle dark class on root element
<html className="dark">
  <body>{children}</body>
</html>

// Or toggle dynamically
document.documentElement.classList.toggle('dark');

Customization

Override Shadcn Variables

Rebrand components by overriding shadcn variables:

:root {
  /* Change primary to your brand color */
  --primary: #ff6b35;
  --primary-foreground: #ffffff;
  
  /* Change secondary */
  --secondary: #f0f0f0;
  --secondary-foreground: #333333;
}

All YaVendio components will automatically use your custom colors.

Use Brand Primitives

Access YA's curated color palette directly:

// Use specific brand colors
<div className="bg-[var(--ya-plum-200)] text-white">
  Light plum background
</div>

<div className="bg-[var(--ya-indigo-400)] text-white">
  Indigo accent
</div>

Extend with Semantic Colors

:root {
  /* Create custom semantic mappings */
  --success: var(--ya-forest-dark);
  --success-foreground: white;
  
  --warning: var(--ya-caramel-dark);
  --warning-foreground: white;
  
  --info: var(--ya-teal-dark);
  --info-foreground: white;
}

Token Reference

Migration Guide

If you're upgrading from an older version of YaVendio that used custom --ya-primary tokens:

Before (Old Architecture)

// Components used custom variables
className="bg-[var(--ya-primary)] text-[var(--ya-primary-foreground)]"

// Required YA-specific theme variables
:root {
  --ya-primary: #8d3f87;
  --ya-secondary: #f5f5f4;
}

After (New Architecture)

// Components use shadcn standard classes
className="bg-primary text-primary-foreground"

// Shadcn variables reference YA primitives
:root {
  --ya-plum-300: #8d3f87;      /* Primitive */
  --primary: var(--ya-plum-300); /* Shadcn variable */
}

Benefits:

✅ Works with any shadcn project out-of-the-box
✅ No need to learn custom variable names
✅ Easier to rebrand (just change --primary)
✅ Compatible with shadcn themes

Component Integration

Components automatically use theme tokens:

import { YaButton } from "@/components/ui/ya-button"

// Automatically uses --primary, --primary-foreground, --ya-shadow-inset
<YaButton variant="primary">Click me</YaButton>

// Automatically uses --secondary, --secondary-foreground
<YaButton variant="secondary">Cancel</YaButton>

// Automatically uses --destructive, --destructive-foreground
<YaButton variant="destructive">Delete</YaButton>

Themes

Shadcn Standard Variables

YA Brand Primitives

Pill Badge Colors

Custom Effects

Border Radius Scale

On this page