66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
/*
|
|
* File: theme.ts
|
|
* Description: Main theme configuration combining all design system elements
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|
|
|
|
import { colors } from './colors';
|
|
import { typography } from './typography';
|
|
import { spacing, borderRadius, breakpoints } from './spacing';
|
|
import { shadows } from './shadows';
|
|
import { animations } from './animations';
|
|
|
|
/**
|
|
* Main Theme Object
|
|
*
|
|
* Purpose: Centralized design system that provides consistent styling across the entire app
|
|
*
|
|
* Design System Components:
|
|
* 1. Colors: Healthcare-focused color palette with status indicators
|
|
* 2. Typography: Font families, sizes, weights, and line heights
|
|
* 3. Spacing: Consistent spacing scale for layouts and components
|
|
* 4. Border Radius: Standardized corner radius values
|
|
* 5. Breakpoints: Responsive design breakpoints for different screen sizes
|
|
* 6. Shadows: Elevation and depth system for UI components
|
|
* 7. Animations: Standardized animation durations and easing functions
|
|
*
|
|
* Usage:
|
|
* - Import this theme object in components: import { theme } from '../theme/theme'
|
|
* - Access design tokens: theme.colors.primary, theme.spacing.md, etc.
|
|
* - Ensures consistency and maintainability across the app
|
|
*
|
|
* Benefits:
|
|
* - Single source of truth for all design decisions
|
|
* - Easy to update and maintain design system
|
|
* - Consistent user experience across all screens
|
|
* - Supports dark mode and accessibility requirements
|
|
*/
|
|
export const theme = {
|
|
colors, // Color palette with primary, secondary, status, and background colors
|
|
typography, // Font system with sizes, weights, and families
|
|
spacing, // Spacing scale for margins, padding, and layouts
|
|
borderRadius, // Border radius values for rounded corners
|
|
breakpoints, // Responsive breakpoints for different screen sizes
|
|
shadows, // Shadow system for elevation and depth
|
|
animations, // Animation durations and easing functions
|
|
} as const; // Make theme immutable for type safety
|
|
|
|
/**
|
|
* Theme Type
|
|
*
|
|
* Purpose: TypeScript type definition for the theme object
|
|
*
|
|
* Benefits:
|
|
* - Provides type safety when using theme properties
|
|
* - Enables autocomplete in IDEs
|
|
* - Prevents typos and invalid property access
|
|
* - Supports theme customization and extension
|
|
*/
|
|
export type Theme = typeof theme;
|
|
|
|
/*
|
|
* End of File: theme.ts
|
|
* Design & Developed by Tech4Biz Solutions
|
|
* Copyright (c) Spurrin Innovations. All rights reserved.
|
|
*/
|