theme-o-rama/dist/tailwind-v4-theme.css

A TypeScript library for dynamic theme management in react + shadcn + tailwind applications

/*
 * Theme-o-rama Tailwind v4 @theme Configuration
 * 
 * This file provides a default @theme block that maps theme-o-rama CSS variables
 * to Tailwind v4's expected variable naming conventions.
 * 
 * Usage in your app's globals.css:
 * @import "tailwindcss";
 * @import "theme-o-rama/themes.css";
 * @import "theme-o-rama/tailwind-v4-theme.css";
 * 
 * @theme {
 *   Your custom theme extensions can go here
 * }
 * 
 * Note: Since theme-o-rama now sets both old and new variable names directly,
 * this @theme block references the Tailwind v4 naming conventions (--color-*,
 * --radius-*, --font-family-*) which are set automatically by the theme system.
 */

@theme {
  /* Colors - theme-o-rama sets both --color-* and --* variables directly */
  /* This @theme block uses the Tailwind v4 naming convention */
  --color-background: var(--color-background);
  --color-foreground: var(--color-foreground);
  --color-card: var(--color-card);
  --color-card-foreground: var(--color-card-foreground);
  --color-popover: var(--color-popover);
  --color-popover-foreground: var(--color-popover-foreground);
  --color-primary: var(--color-primary);
  --color-primary-foreground: var(--color-primary-foreground);
  --color-secondary: var(--color-secondary);
  --color-secondary-foreground: var(--color-secondary-foreground);
  --color-muted: var(--color-muted);
  --color-muted-foreground: var(--color-muted-foreground);
  --color-accent: var(--color-accent);
  --color-accent-foreground: var(--color-accent-foreground);
  --color-destructive: var(--color-destructive);
  --color-destructive-foreground: var(--color-destructive-foreground);
  --color-border: var(--color-border);
  --color-input: var(--color-input);
  --color-input-background: var(--color-input-background);
  --color-ring: var(--color-ring);

  /* Border radius - theme-o-rama sets both --radius-* and --corner-* variables */
  --radius-none: var(--radius-none);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --radius-xl: var(--radius-xl);
  --radius-full: var(--radius-full);
  --radius: var(--radius);

  /* Box shadows - theme-o-rama shadow values (already in correct format) */
  --shadow-none: var(--shadow-none);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow-md);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-inner: var(--shadow-inner);
  --shadow-card: var(--shadow-card);
  --shadow-button: var(--shadow-button);
  --shadow-dropdown: var(--shadow-dropdown);

  /* Font families - theme-o-rama sets both --font-family-* and --font-* variables */
  --font-family-sans: var(--font-family-sans);
  --font-family-serif: var(--font-family-serif);
  --font-family-mono: var(--font-family-mono);
  --font-family-heading: var(--font-family-heading);
  --font-family-body: var(--font-family-body);
}