@make-kits/design-system-glass

A comprehensive glass morphism design system with dark mode support, built on the ATOS design language.

Features

• 🎨 Glass Morphism: Beautiful frosted glass effects with backdrop blur
• 🌓 Dark Mode: Full dark mode support with automatic system detection
• ♿ Accessible: WCAG AA compliant with proper keyboard navigation
• 🎯 TypeScript: Fully typed components and utilities
• 🎭 Variants: Multiple variants and sizes for each component
• 🚀 Performance: Optimized glass effects with CSS custom properties
• 📦 Tree-shakeable: Import only what you need

Installation

pnpm add @make-kits/design-system-glass

Peer Dependencies

pnpm add react react-dom clsx class-variance-authority

Quick Start

import {
  Button,
  GlassCard,
  initTheme,
} from '@make-kits/design-system-glass';
import '@make-kits/design-system-glass/styles';
import '@make-kits/design-system-glass/glass';

// Initialize theme system
initTheme();

function App() {
  return (
    <GlassCard
      title="Welcome"
      description="Get started with glass morphism"
      accent="blue"
    >
      <Button variant="primary">Get Started</Button>
    </GlassCard>
  );
}

Components

• Button - Glass morphism buttons with multiple variants
• GlassSidebarButton - Specialized sidebar navigation buttons
• Card - Flexible card component with glass effects
• GlassCard - Pre-styled card with common patterns
• Sidebar - Navigation sidebar with collapsible support
• Input - Text inputs with glass styling
• Modal - Dialog/modal overlays with glass backdrop

Documentation

• Setup Guide - Installation and configuration
• Guidelines - Design principles and best practices
• Component Catalog - Complete component reference

Dark Mode

import { setTheme, toggleTheme } from '@make-kits/design-system-glass';

// Set specific theme
setTheme('dark');    // Force dark mode
setTheme('light');   // Force light mode
setTheme('system');  // Follow system preference

// Toggle between light and dark
toggleTheme();

CSS Variables

All components use CSS custom properties for theming:

/* Colors */
var(--atos-blue)
var(--teal)
var(--violet)
var(--text-primary)
var(--text-secondary)

/* Glass Effects */
var(--glass-card)
var(--glass-button)
var(--glass-border)

/* Spacing */
var(--spacer-md)
var(--spacer-lg)

/* Border Radius */
var(--radius-lg)
var(--radius-xl)

Browser Support

• Chrome/Edge: Full support
• Firefox: Full support
• Safari: Full support (iOS 9+, macOS 10.12+)
• Fallback: Components gracefully degrade without backdrop-filter support

License

MIT

Contributing

Please read our contributing guidelines before submitting pull requests.

Built with ❤️ for the ATOS design system