@invana/styling

Invana's reusable TailwindCSS 4 design system. This package provides a consistent set of design tokens, theme configuration, and base styles that can be used across all Invana projects.

Installation

This expects tailwindcss 4

npm install @invana/styling
# or
pnpm add @invana/styling
# or
yarn add @invana/styling

Usage

In CSS Files

Import the complete stylesheet with theme and base styles:

/* 1. Import Tailwind first */
@import "tailwindcss";

/* 2. Define YOUR app's source paths */
@source "./components/**/*.{js,ts,jsx,tsx}";
@source "./pages/**/*.{js,ts,jsx,tsx}";

/* 3. Import the shared theme */
@import "@invana/styling/index.css";

Or import specific parts:

/* 1. Import Tailwind first */
@import "tailwindcss";

/* 2. Define YOUR app's source paths */
@source "./components/**/*.{js,ts,jsx,tsx}";
@source "./pages/**/*.{js,ts,jsx,tsx}";

/* 3. Import the shared theme */
@import "@invana/styling/index.css";
/* Import just the theme */
@import "@invana/styling/theme";

/* Import just the base styles */
@import "@invana/styling/base";

In React/Vite Projects

// In your main entry file (e.g., main.tsx or App.tsx)
import "@invana/styling";

In the Monorepo

This package is already set up for use within this monorepo. Simply import it in your CSS files:

/* In your globals.css or main CSS file */
@import "@invana/styling";

Features

• 🎨 Design Tokens: Consistent color palette with semantic naming
• 🌓 Dark Mode: Automatic dark mode support via prefers-color-scheme
• 📦 Modular: Import only what you need
• 🎯 TailwindCSS v4: Built with the latest TailwindCSS features using @theme directive
• 🔧 Customizable: Easy to extend and override
• 📱 Responsive: Container configuration with responsive breakpoints

Design Tokens

Colors

All colors follow the CSS variable pattern and can be used with TailwindCSS utilities:

• background, foreground - Main background and text colors
• primary, primary-foreground - Primary brand colors
• secondary, secondary-foreground - Secondary UI elements
• destructive, destructive-foreground - Error and dangerous actions
• muted, muted-foreground - Muted/subdued content
• accent, accent-foreground - Accent highlights
• popover, popover-foreground - Popover/dropdown backgrounds
• card, card-foreground - Card component colors
• border, input, ring - Border and input styling

Border Radius

Three dials set every corner; no component takes a radius prop. See the rationale at the top of src/index.css and try them live in Storybook (Others/CornerRadius).

| Dial | Class | Draws | Default | | --- | --- | --- | --- | | --radius | rounded, rounded-sm … rounded-4xl (every step reads --radius) | tables, rows, boxes inside a card | 0px | | --radius-surface | rounded-surface | cards, panels, dialogs, popovers, menus, tooltips | var(--radius) | | --radius-control | rounded-control | buttons, badges, chips, inputs, selects, tabs, toggles | 4px |

Round objects (avatars, dots, switch thumbs) keep rounded-full and follow no dial.

Animations

• accordion-down: Accordion expand animation
• accordion-up: Accordion collapse animation

Container

• Centered by default
• 2rem padding
• Max width of 1400px on 2xl screens

Customization

You can override any variable by defining it after importing:

@import "@invana/styling";

@theme {
  --color-primary: hsl(270 100% 50%); /* Override primary color */
}

:root {
  --radius-surface: 6px; /* Round cards, panels and floating surfaces */
  --radius-control: 2px; /* Soften buttons, badges and inputs less */
}

Releasing

All @invana/* packages are versioned in lockstep and released from the repo root — never npm publish from this directory, and never hand-edit the version.

./release.sh <version>
git push origin main --follow-tags

The tag push builds and publishes every package to npm and writes the GitHub Release notes. See the root CLAUDE.md for the full pipeline.

Development

This package ships source CSS files directly. Your build tool (Vite, Next.js, etc.) will process the TailwindCSS directives automatically if you have TailwindCSS v4 installed.

License

MIT © Ravi Raja Merugu