Theming

Overview

Our styling system builds upon shadcn/ui's CSS variables approach with additional status colors and design tokens.

Installation

npx shadcn@latest add @cubby-ui/init

Extended Color Variables

We've introduced additional color variables beyond the standard shadcn/ui palette to provide more control for specific components like badges and alerts:

• --neutral / --neutral-foreground: Neutral button variant
• --danger / --danger-foreground / --danger-border: Error states with background tint
• --warning / --warning-foreground / --warning-border: Warning states
• --info / --info-foreground / --info-border: Informational states
• --success / --success-foreground / --success-border: Success states
• --sidebar-*: Dedicated sidebar color tokens
• --scrollbar: Scrollbar thumb color

These additional variables ensure consistent styling across components that need to communicate different states or levels of importance.

Base UI Requirements

The @layer base section includes styles required for Base UI components to work correctly:

• body { position: relative } - Fixes backdrop positioning issues on iOS Safari for dialog and popover components.

• .root { isolation: isolate } - Creates a stacking context for Base UI's portal-based components (dialogs, popovers, tooltips). Apply the root class to your application wrapper element as shown in the Installation guide.

Dark Mode

For dark mode setup, see the shadcn/ui Dark Mode guide.