Sevika Design System

A comprehensive, themeable design system and component library for all Sevika applications (Desktop, HRMS, Website, etc).

✨ Features

• 🎨 Comprehensive Theme System: Full light/dark mode support with CSS variables
• 🔄 Smart Theme Switching: Automatic system preference detection + manual override
• ♿ Accessible: WCAG 2.1 Level AA compliant colors and components
• 📱 Responsive: Mobile-first design tokens
• 🎯 TypeScript: Full type safety with exported interfaces
• 🚀 Production Ready: 10 battle-tested components from HRMS
• 🔌 Framework Agnostic CSS: Works with any project using CSS variables
• 📦 Complete Component Library: Button, Card, Input, Select, Checkbox, Textarea, Modal, Table, Badge, Spinner

📦 Components

The design system includes 11 production-ready, fully typed React components:

Form Components

• SevikaInput: Text inputs with variants, icons, and error states
• SevikaSelect: Dropdown selects with custom options
• SevikaCheckbox: Checkboxes with label support
• SevikaTextarea: Multi-line text inputs with resize control

Layout Components

• SevikaCard: Container with header/body/footer sections
• SevikaModal: Modal dialogs with customizable sizes

Data Display

• SevikaTable: Data tables with sorting and pagination
• SevikaBadge: Status badges and labels

Action & Feedback

• SevikaButton: Buttons with variants, sizes, and loading states
• SevikaActionButton: Pre-configured icon buttons for common actions (view, edit, delete, etc.)
• SevikaSpinner: Loading spinners with full-screen overlay option

📖 Full Component Documentation →

Quick Component Example

import { SevikaButton, SevikaActionButton, SevikaCard, SevikaInput } from '@sevika/design-system';

<SevikaCard variant="elevated" hoverable>
  <SevikaCard.Header>
    <h3>Login</h3>
  </SevikaCard.Header>
  <SevikaCard.Body>
    <SevikaInput
      label="Email"
      type="email"
      placeholder="[email protected]"
      variant="outlined"
    />
  </SevikaCard.Body>
  <SevikaCard.Footer>
    <div style={{ display: 'flex', gap: '0.5rem' }}>
      <SevikaButton variant="primary" size="lg">
        Sign In
      </SevikaButton>
      <SevikaActionButton action="settings" />
    </div>
  </SevikaCard.Footer>
</SevikaCard>

🎨 Theme System

Quick Start

import { ThemeProvider } from '@sevika/design-system/theme';
import '@sevika/design-system/theme/theme.css';

function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <YourApp />
    </ThemeProvider>
  );
}

Theme Options

• light: Force light theme
• dark: Force dark theme
• system: Auto-detect from OS (default)

Using the Theme

import { useTheme, ThemeToggle } from '@sevika/design-system/theme';

function Header() {
  const { isDark, theme, toggleTheme } = useTheme();
  
  return (
    <header>
      <h1>Current theme: {isDark ? 'Dark 🌙' : 'Light ☀️'}</h1>
      <ThemeToggle showLabel size="md" />
    </header>
  );
}

CSS Variables

All theme colors are available as CSS variables:

.my-component {
  background: var(--sevika-surface);
  color: var(--sevika-text-primary);
  border: 1px solid var(--sevika-border);
  border-radius: var(--sevika-radius-md);
  padding: var(--sevika-spacing-md);
  box-shadow: var(--sevika-shadow-md);
}

Key CSS Variables

Colors

/* Semantic colors (auto-adjust for light/dark) */
--sevika-background
--sevika-surface
--sevika-text-primary
--sevika-text-secondary
--sevika-border

/* Status colors */
--sevika-success
--sevika-warning
--sevika-error
--sevika-info

/* Brand colors */
--sevika-primary
--sevika-secondary

Spacing

--sevika-spacing-xs   /* 4px */
--sevika-spacing-sm   /* 8px */
--sevika-spacing-md   /* 16px */
--sevika-spacing-lg   /* 24px */
--sevika-spacing-xl   /* 32px */

Typography

--sevika-font-family
--sevika-font-size-sm   /* 14px */
--sevika-font-size-base /* 16px */
--sevika-font-size-lg   /* 18px */

Border Radius

--sevika-radius-sm    /* 4px */
--sevika-radius-md    /* 6px */
--sevika-radius-lg    /* 8px */

📦 Installation

For Local Development (Current Setup)

Since this is a mono-repo, you can reference it directly:

In sevika-desktop:

// tsconfig.json - add path alias
{
  "compilerOptions": {
    "paths": {
      "@sevika/design-system/*": ["../sevika-design-system/src/*"]
    }
  }
}

// vite.config.ts - add alias
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@sevika/design-system': path.resolve(__dirname, '../sevika-design-system/src')
    }
  }
});

In sevika-hrms-frontend:

// vite.config.js - add alias
import { defineConfig } from 'vite';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  resolve: {
    alias: {
      '@sevika/design-system': path.resolve(__dirname, '../sevika-design-system/src')
    }
  }
});

Then use:

import { ThemeProvider, useTheme } from '@sevika/design-system/theme';
import '@sevika/design-system/theme/theme.css';

🎯 Usage Examples

Basic Theme Setup

// main.tsx or App.tsx
import { ThemeProvider } from '@sevika/design-system/theme';
import '@sevika/design-system/theme/theme.css';

function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <MyApp />
    </ThemeProvider>
  );
}

Theme Toggle Button

import { ThemeToggle } from '@sevika/design-system/theme';

function Navbar() {
  return (
    <nav>
      <Logo />
      <Menu />
      <ThemeToggle showLabel={false} size="md" />
    </nav>
  );
}

Programmatic Theme Control

import { useTheme } from '@sevika/design-system/theme';

function SettingsPage() {
  const { theme, setTheme, isDark } = useTheme();
  
  return (
    <div>
      <h2>Theme Settings</h2>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="system">System</option>
      </select>
      
      <p>Currently showing: {isDark ? 'Dark' : 'Light'} mode</p>
    </div>
  );
}

Using Theme in Component Styles

function Card({ children }) {
  return (
    <div style={{
      backgroundColor: 'var(--sevika-card)',
      color: 'var(--sevika-text-primary)',
      border: '1px solid var(--sevika-border)',
      borderRadius: 'var(--sevika-radius-lg)',
      padding: 'var(--sevika-spacing-lg)',
      boxShadow: 'var(--sevika-shadow-md)',
    }}>
      {children}
    </div>
  );
}

🏗️ Architecture

sevika-design-system/
├── src/
│   ├── theme/
│   │   ├── theme.css           # CSS variables (light + dark)
│   │   ├── ThemeProvider.tsx   # React Context + hooks
│   │   ├── ThemeToggle.tsx     # T1 production-ready components
│   │   ├── SevikaButton/       # Button component
│   │   ├── SevikaActionButton/ # Action button (icons)
│   │   └── index.ts            # Public exports
│   ├── components/             # 10 production-ready components
│   │   ├── SevikaButton/       # Button component
│   │   ├── SevikaCard/         # Card container
│   │   ├── SevikaInput/        # Text input
│   │   ├── SevikaSelect/       # Dropdown select
│   │   ├── SevikaCheckbox/     # Checkbox
│   │   ├── SevikaTextarea/     # Textarea
│   │   ├── SevikaModal/        # Modal dialog
│   │   ├── SevikaTable/        # Data table
│   │   ├── SevikaBadge/        # Badge/label
│   │   ├── SevikaSpinner/      # Loading spinner
│   │   ├── index.ts            # Component exports
│   │   └── README.md           # Component documentation
│   └── index.ts                # Main exports
├── package.json
└── README.md

🔄 Migration Guide

From sevika-desktop ThemeContext

Before:

import { useTheme } from '../context/ThemeContext';
const { theme, isDark, toggleTheme } = useTheme();

After:

import { useTheme } from '@sevika/design-system/theme';
const { resolvedTheme, isDark, toggleTheme } = useTheme();

From sevika-hrms CSS-only

Before:

/* Manual theme switching */
[data-theme="dark"] .my-component {
  background: #1f2937;
}

After:

/* Automatic with CSS variables */
.my-component {
  background: var(--sevika-surface);
}

🎨 Design Tokens

Color Palette

• Primary: Blue (#2563eb) - Medical/healthcare brand
• Success: Green (#22c55e) - Positive actions
• Warning: Amber (#f59e0b) - Caution
• Error: Red (#ef4444) - Errors/danger
• Info: Blue (#3b82f6) - Information

Government Branding

• Saffron: #ff9933 (Indian flag)
• Ashok Green: #138808 (Indian flag)
• Navy Blue: #000080 (Trust)

📝 Best Practices

1. Always use CSS variables instead of hardcoded colors
2. Wrap your app in ThemeProvider at the root
3. Import theme.css before other styles
4. Use semantic tokens (--sevika-surface) over raw colors (--sevika-gray-100)
5. Test both themes during development

🚀 Roadmap

1 HRMS components to TypeScript

• [x] Complete component library (Button, Action
• [x] Comprehensive theme system with light/dark modes
• [x] Theme switching with system preference detection
• [x] Convert all 10 HRMS components to TypeScript
• [x] Complete component library (Button, Card, Input, Select, Checkbox, Textarea, Modal, Table, Badge, Spinner)
• [x] Full TypeScript interfaces for all components
• [x] Integration with sevika-desktop

🔜 Upcoming

• [ ] Add Storybook documentation
• [ ] Publish to npm for external use
• [ ] Add theming for charts/graphs
• [ ] Create Figma design tokens
• [ ] Add unit tests for components
• [ ] Create additional components (Tabs, Accordion, Toast, etc.)

📄 License

ISC © Sevika