igny8/frontend/src/styles

IGNY8 Custom Styles

This directory contains IGNY8-specific custom styles that are completely separate from TailAdmin defaults.

Files

• igny8-colors.css - IGNY8 brand color scheme with custom CSS variables and utility classes

Usage

Import in your component:

// Already imported globally in main.tsx
// No need to import in individual components

Use IGNY8 classes:

// ✅ Use IGNY8 custom classes
<div className="igny8-bg-blue igny8-text-white igny8-card">
  Content
</div>

// ❌ Don't use TailAdmin defaults (unless you want TailAdmin branding)
<div className="bg-brand-500 text-white">
  Content
</div>

Color Variables

All colors are available as CSS variables:

• --igny8-blue - Primary brand blue
• --igny8-green - Success green
• --igny8-amber - Warning amber
• --igny8-red - Danger red
• --igny8-purple - Purple accent
• --igny8-surface - Page background
• --igny8-panel - Card background
• --igny8-text - Primary text
• --igny8-stroke - Borders

Utility Classes

All utility classes use igny8- prefix:

• Backgrounds: .igny8-bg-blue, .igny8-bg-green, etc.
• Text: .igny8-text-blue, .igny8-text-primary, etc.
• Borders: .igny8-border-blue, .igny8-border-stroke, etc.
• Gradients: .igny8-gradient-blue, .igny8-gradient-success, etc.
• Buttons: .igny8-btn, .igny8-btn-primary, etc.
• Badges: .igny8-badge, .igny8-badge-primary, etc.

Benefits

✅ No conflicts - Separate prefix prevents TailAdmin update issues ✅ Easy updates - TailAdmin can be updated without affecting IGNY8 styles ✅ Clear separation - Easy to identify IGNY8 vs TailAdmin styles ✅ Consistent branding - All IGNY8 components use same color scheme