@aaroh/ui

v0.1.0

Published

2 days ago

Aaroh Design System — Part of the Aaroh ecosystem. Framework-agnostic design tokens, theme engine, and base component styles that power @aaroh/react-ui, @aaroh/vue-ui, and @aaroh/svelte-ui. Built on the aaroh motion engine.

0High
0Medium
0Low

manvanth.gowda.m

mithun50

design-system design-tokens css-variables theme ui aaroh quilonix

@aaroh/ui

The framework-independent design system core behind the Aaroh UI ecosystem.

@aaroh/ui provides design tokens, a theme engine, accessibility primitives, icon primitives, and 27 component CSS files. It powers @aaroh/react-ui, @aaroh/vue-ui, and @aaroh/svelte-ui — but you can also use it on its own with vanilla HTML or any framework.

Installation

npm install @aaroh/ui

Quick Start

Import a theme and the component CSS files you need:

// 1. Import a theme (applies CSS custom properties)
import '@aaroh/ui/themes/heritage';

// 2. Import component styles you use
import '@aaroh/ui/components/button';
import '@aaroh/ui/components/input';
import '@aaroh/ui/components/card';

That's it. Your HTML elements with the correct CSS classes will now be styled. No JavaScript runtime required for styling — it's all CSS custom properties.

<div data-aaroh-theme="heritage">
  <button class="aaroh-btn aaroh-btn-solid aaroh-btn-md aaroh-btn-pill">
    Get Started
  </button>
</div>

Theme Engine

Aaroh ships three built-in themes. Switching between them is instant — no re-render, no style recalculation.

CSS-only approach (recommended)

Import the theme CSS file you want. The styles scope to [data-aaroh-theme="name"]:

// Pick one:
import '@aaroh/ui/themes/heritage'; // Dark, gold-accented, luxurious
import '@aaroh/ui/themes/modern'; // Clean, bright, contemporary
import '@aaroh/ui/themes/minimal'; // Subtle, neutral, low-contrast

Set the data-aaroh-theme attribute on a root element:

<html data-aaroh-theme="heritage">
  <!-- All components inside inherit the theme -->
</html>

Runtime switching (JavaScript)

For dynamic theme switching, use the applyTheme / removeTheme API:

import { applyTheme, removeTheme, heritage, modern } from '@aaroh/ui';

// Apply a theme at runtime
const handle = applyTheme(document.documentElement, heritage);

// Later — switch to another theme
removeTheme(handle);
const newHandle = applyTheme(document.documentElement, modern);

removeTheme restores the element to its exact pre-application state. This round-trip guarantee means you can safely apply and remove themes without side effects.

Available Themes

| Theme | Style | Color Scheme | | ---------- | ------------------------------ | ------------ | | heritage | Dark, gold-accented, luxurious | Dark | | modern | Clean, bright, contemporary | Light | | minimal | Subtle, neutral, understated | Light |

Custom Themes

Every theme satisfies the AarohTheme interface. Create your own:

import type { AarohTheme } from '@aaroh/ui';
import { generateThemeCSS, applyTheme } from '@aaroh/ui';

const myTheme: AarohTheme = {
  name: 'ocean',
  displayName: 'Ocean Blue',
  colorScheme: 'dark',
  colors: {
    primary: '#0EA5E9',
    primaryHover: '#38BDF8',
    primaryActive: '#0284C7',
    primaryForeground: '#FFFFFF',
    secondary: '#64748B',
    secondaryHover: '#94A3B8',
    secondaryActive: '#475569',
    secondaryForeground: '#FFFFFF',
    accent: '#06B6D4',
    accentHover: '#22D3EE',
    accentForeground: '#FFFFFF',
    destructive: '#EF4444',
    destructiveHover: '#F87171',
    destructiveForeground: '#FFFFFF',
    success: '#22C55E',
    successForeground: '#FFFFFF',
    warning: '#F59E0B',
    warningForeground: '#000000',
    info: '#3B82F6',
    infoForeground: '#FFFFFF',
    background: '#0F172A',
    surface: '#1E293B',
    surfaceElevated: '#334155',
    foreground: '#F8FAFC',
    muted: '#94A3B8',
    disabled: '#475569',
    border: '#334155',
    borderHover: '#475569',
    borderFocus: '#0EA5E9',
    input: '#1E293B',
    ring: '#0EA5E9',
  },
  shape: {
    radius: '0.5rem',
    buttonRadius: '0.5rem',
    inputRadius: '0.375rem',
    cardRadius: '0.75rem',
    modalRadius: '1rem',
  },
};

// Generate CSS at build time
const css = generateThemeCSS(myTheme);
// → '[data-aaroh-theme="ocean"] { color-scheme: dark; --aaroh-primary: #0EA5E9; ... }'

// Or apply at runtime
applyTheme(document.documentElement, myTheme);

The AarohTheme contract also supports optional sections for typography, surface, elevation, border, and icon customization.

Available Components

All 27 component CSS files, importable individually:

| Import Path | Component | | ------------------------------------ | ------------- | | @aaroh/ui/components/accordion | Accordion | | @aaroh/ui/components/ai | AI Chat | | @aaroh/ui/components/animation | Animation | | @aaroh/ui/components/avatar | Avatar | | @aaroh/ui/components/badge | Badge | | @aaroh/ui/components/button | Button | | @aaroh/ui/components/card | Card | | @aaroh/ui/components/carousel | Carousel | | @aaroh/ui/components/checkbox | Checkbox | | @aaroh/ui/components/dashboard | Dashboard | | @aaroh/ui/components/drawer | Drawer | | @aaroh/ui/components/dropdown-menu | Dropdown Menu | | @aaroh/ui/components/ecommerce | E-Commerce | | @aaroh/ui/components/forms | Forms | | @aaroh/ui/components/input | Input | | @aaroh/ui/components/media | Media | | @aaroh/ui/components/modal | Modal | | @aaroh/ui/components/progress | Progress | | @aaroh/ui/components/radio | Radio | | @aaroh/ui/components/select | Select | | @aaroh/ui/components/skeleton | Skeleton | | @aaroh/ui/components/social | Social | | @aaroh/ui/components/switch | Switch | | @aaroh/ui/components/tabs | Tabs | | @aaroh/ui/components/textarea | Textarea | | @aaroh/ui/components/toast | Toast | | @aaroh/ui/components/tooltip | Tooltip |

Each file is tree-shakeable — import only what you use and your bundle stays small.

Design Tokens

Import tokens for use in JavaScript/TypeScript:

import {
  gold,
  navy,
  emerald,
  crimson,
  slate,
  sand,
  spacing,
  radius,
  shadow,
  zIndex,
  fontFamily,
  fontSize,
  fontWeight,
  duration,
  easing,
} from '@aaroh/ui/tokens';

Tokens cover:

Colors — gold, navy, emerald, crimson, slate, sand (full scales)
Spacing — consistent spacing scale
Radius — border-radius values
Shadow — elevation shadows
Z-Index — layering stack
Typography — font families, sizes, weights, letter-spacing
Motion — durations, easings, motion intensity
Border — widths, styles
Gradient — angles, stops
Icon — stroke widths, sizes
Surface — textures, blend modes

Accessibility Primitives

Three CSS utility imports for accessibility:

import '@aaroh/ui/a11y/focus-ring'; // Consistent focus ring styling
import '@aaroh/ui/a11y/visually-hidden'; // Screen-reader-only utility
import '@aaroh/ui/a11y/forced-colors'; // Windows High Contrast mode support

These give you accessible focus indicators, a .visually-hidden class for screen-reader text, and forced-color-mode overrides that ensure components remain usable in high-contrast environments.

Icon Primitives

Built-in decorative icon primitives for use with buttons and components:

import { rosetteIcon, petalIcon, latticeIcon, motifDataUri } from '@aaroh/ui';
import type { IconPrimitive } from '@aaroh/ui';

An IconPrimitive is a simple object with an svg string property. Pass it to any UI component's icon prop.

Architecture

@aaroh/ui is the shared foundation. The framework packages (@aaroh/react-ui, @aaroh/vue-ui, @aaroh/svelte-ui) contain zero styling logic — they delegate class name computation to this package's className builders and reference the CSS files exported here.

@aaroh/ui (this package)
├── themes/         → CSS custom property definitions
├── components/     → Component CSS (class-based)
├── tokens/         → JS/TS design token values
├── a11y/           → Accessibility CSS utilities
├── icons/          → SVG icon primitives
└── className builders → shared logic for computing CSS class strings
        │
        ├── @aaroh/react-ui (renders React elements, imports CSS from here)
        ├── @aaroh/vue-ui   (renders Vue elements, imports CSS from here)
        └── @aaroh/svelte-ui (returns attribute objects, imports CSS from here)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@aaroh/ui

Installation

Quick Start

Theme Engine

CSS-only approach (recommended)

Runtime switching (JavaScript)

Available Themes

Custom Themes

Available Components

Design Tokens

Accessibility Primitives

Icon Primitives

Architecture

License