Shared Configuration Package

Configuration files shared across all ACS microfrontends, including a comprehensive centralized color system.

📦 Exports

Configuration Files

• @saifraza/config/tailwind - Shared Tailwind theme with CSS variable-based colors
• @saifraza/config/postcss - PostCSS configuration with Tailwind and Autoprefixer
• @saifraza/config/eslint - Base ESLint configuration factory
• @saifraza/config/tsconfig - Base TypeScript configuration
• @saifraza/config/theme - Theme configuration constants

Color System 🎨

• @saifraza/config/colors.css - SINGLE SOURCE OF TRUTH - CSS custom properties for all colors
• @saifraza/config/colors.utils - TypeScript utilities for type-safe color usage
• @saifraza/config/colors.examples - React component examples

🚀 Quick Start

1. Using the Color System

Import the CSS variables in your app's main CSS file:

/* src/index.css */
@import '@saifraza/config/colors.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Use in your components:

// Using Tailwind classes
<button className="bg-button-primary hover:bg-button-primary-hover text-button-primary">
  Save
</button>

// Using utility functions
import { getButtonClasses } from '@saifraza/config/colors.utils';

<button className={getButtonClasses('primary')}>
  Save
</button>

Available color categories:

• Brand: primary, secondary, tertiary
• Semantic: success, error, warning, info
• Buttons: button-primary, button-secondary, button-danger, etc.
• Text: text-primary, text-secondary, text-tertiary
• Backgrounds: bg-primary, bg-secondary, bg-tertiary
• Borders: border-primary, border-secondary, border-tertiary
• Neutral: neutral-50 through neutral-950

📚 See COLORS.md for complete documentation.

2. Tailwind Configuration

// tailwind.config.js
const sharedTheme = require('@saifraza/config/tailwind');

module.exports = {
    ...sharedTheme,
    content: ['./src/**/*.{js,jsx,ts,tsx}'],
};

3. PostCSS Configuration

// postcss.config.js
module.exports = require('@saifraza/config/postcss');

4. ESLint Configuration

// eslint.config.js
const createEslintConfig = require('@saifraza/config/eslint');

module.exports = createEslintConfig({
    rules: {
        // Your overrides
    },
});

5. TypeScript Configuration

// tsconfig.json
{
  "extends": "@saifraza/config/tsconfig.json",
  "compilerOptions": {
    // Your overrides
  }
}

🎨 Centralized Color System

The color system provides a single source of truth for all colors in your application. Change colors in one place and they propagate everywhere automatically.

Key Features

✅ Single source of truth - All colors defined in colors.css
✅ Automatic dark mode - Light and dark variants for all colors
✅ Industry standard - Follows best practices (primary, secondary, success, error, etc.)
✅ Type-safe - TypeScript utilities with full IntelliSense
✅ Button ready - Pre-configured button color combinations
✅ Easy to change - Update one file to change colors everywhere

Changing Colors

To change the primary color across your entire app:

1. Edit colors.css (the ONLY file you need to edit):

:root {
    --color-primary: 168 85 247;  /* Change this RGB value */
}

.dark {
    --color-primary: 147 51 234;  /* Dark mode variant */
}

2. Add to tailwind.theme.js (so Tailwind can use it):

colors: {
    primary: 'rgb(var(--color-primary) / <alpha-value>)',
}

That's it! The change automatically applies to:

• All Tailwind classes (bg-primary, text-primary, etc.)
• All CSS variables
• Both light and dark modes

Documentation

• COLORS.md - Complete color system documentation
• MIGRATION.md - Guide for migrating existing components
• colors.examples.tsx - React component examples
• colors.utils.ts - TypeScript utilities and types

📂 Package Structure

shared-config/
├── colors.css              # ⭐ Single source of truth for all colors
├── colors.utils.ts         # Type-safe utilities
├── colors.examples.tsx     # Component examples
├── COLORS.md              # Complete documentation
├── MIGRATION.md           # Migration guide
├── tailwind.theme.js      # Tailwind theme (references colors.css)
├── postcss.config.js      # PostCSS configuration
├── eslint.config.base.js  # ESLint configuration
├── theme.config.js        # Theme constants
└── package.json

🔧 Adding New Colors

Simple 2-step process:

1. Add to colors.css:

:root {
    --color-mynewcolor: 255 0 128;  /* RGB format */
}
.dark {
    --color-mynewcolor: 200 0 100;  /* Dark mode */
}

2. Add to tailwind.theme.js:

colors: {
    mynewcolor: 'rgb(var(--color-mynewcolor) / <alpha-value>)',
}

3. Use it:

<div className="bg-mynewcolor text-white">Done!</div>

📝 Best Practices

1. Always use semantic color names (e.g., bg-primary, not bg-blue-500)
2. Import colors.css in your app's main CSS file
3. Use utility functions for complex components
4. Respect light/dark mode - don't hardcode colors
5. Edit colors.css only - it's the single source of truth

🌙 Dark Mode

All colors automatically support dark mode via the .dark class on <html> or <body>:

// Enable dark mode
document.documentElement.classList.add('dark');

// Disable dark mode
document.documentElement.classList.remove('dark');

🤝 Contributing

When adding new shared configuration:

1. Add the file to the exports section in package.json
2. Document usage in this README
3. Ensure it works across all microfrontends
4. Add TypeScript types if applicable

📚 Additional Resources

• Tailwind CSS Documentation
• CSS Custom Properties Guide
• Project Architecture: See root ARCHITECTURE_ANALYSIS.md

For questions or issues, contact the development team.