salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

phase 4

Browse Source
This commit is contained in:
Desktop
2025-11-14 15:09:32 +05:00
parent 00301c2ae8
commit 0de822c2a1
4 changed files with 340 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/DESIGN_SYSTEM.md
View File

@@ -2,24 +2,64 @@
> 🔒 **STYLE SYSTEM LOCKED** - This design system is **LOCKED** as of 2025-01-XX. Read this entire document before making any styling changes. > 🔒 **STYLE SYSTEM LOCKED** - This design system is **LOCKED** as of 2025-01-XX. Read this entire document before making any styling changes.
## 🎨 Design Token System
**Single Source of Truth**: All design tokens (colors, gradients, shadows) are defined in `/src/styles/tokens.css`
### Color Tokens
Use CSS variables for colors:
- `var(--color-primary)` - Primary brand blue (#0693e3)
- `var(--color-primary-dark)` - Primary dark (#0472b8)
- `var(--color-success)` - Success green (#0bbf87)
- `var(--color-warning)` - Warning amber (#ff7a00)
- `var(--color-danger)` - Danger red (#ef4444)
- `var(--color-purple)` - Purple accent (#5d4ae3)
### Using Colors
**✅ DO:**
```tsx
// Use Tailwind utilities with brand colors
<div className="bg-brand-500 text-white">Content</div>
// Use CSS variables for custom values
<div className="bg-[var(--color-primary)]">Content</div>
// Use React components
<Button tone="brand" variant="gradient">Click me</Button>
```
**❌ DON'T:**
```tsx
// Don't use deprecated .igny8-* utility classes
<div className="igny8-bg-blue">Content</div>
// Don't hardcode color values
<div className="bg-[#0693e3]">Content</div>
// Don't use inline styles
<div style={{ backgroundColor: '#0693e3' }}>Content</div>
```
## 🔒 Style System Lock Status ## 🔒 Style System Lock Status
**DO NOT:** **DO NOT:**
- ❌ Create new CSS classes without documenting in this file - ❌ Create new CSS classes without documenting in this file
- ❌ Duplicate existing styling patterns - ❌ Duplicate existing styling patterns
- ❌ Create custom colors/utilities that already exist - ❌ Create custom colors/utilities that already exist
- ❌ Modify core classes (`.igny8-table-compact`, etc.) without updating documentation - ❌ Use deprecated `.igny8-*` utility classes (except `.igny8-table-*` and `.igny8-header-metric-*`)
- ❌ Add inline styles for colors/spacing/typography - ❌ Add inline styles for colors/spacing/typography
- ❌ Hardcode color hex values
**DO:** **DO:**
- ✅ Check this document before creating any styles - ✅ Check this document before creating any styles
- ✅ Use existing classes from `igny8-colors.css` - ✅ Use design tokens from `tokens.css` via CSS variables
- ✅ Use Tailwind defaults where possible - ✅ Use Tailwind utilities (bg-brand-500, text-brand-500, etc.)
- ✅ Use React components (Button, Badge, Card) from `/components/ui/`
- ✅ Follow component patterns from this guide - ✅ Follow component patterns from this guide
- ✅ Update this document if you MUST add something new - ✅ Update this document if you MUST add something new
Any new styling that duplicates existing functionality or creates new classes without documentation will be considered technical debt.
--- ---
## Core Principles ## Core Principles
@@ -76,11 +116,21 @@ Any new styling that duplicates existing functionality or creates new classes wi
### 5. **Styling Guidelines** ### 5. **Styling Guidelines**
- Use Tailwind CSS classes exclusively - Use Tailwind CSS classes exclusively
- Follow the existing color scheme from `igny8-colors.css` - Use design tokens from `tokens.css` via CSS variables: `var(--color-primary)`
- Use Tailwind brand color utilities: `bg-brand-500`, `text-brand-500`, etc.
- Use React components for buttons, badges, cards (Button, Badge, Card)
- Use dark mode variants: `dark:bg-gray-900`, `dark:text-white`, etc. - Use dark mode variants: `dark:bg-gray-900`, `dark:text-white`, etc.
- Maintain consistent spacing using Tailwind spacing scale - Maintain consistent spacing using Tailwind spacing scale
- Use existing utility classes: `shadow-theme-xs`, `text-theme-sm`, etc. - Use existing utility classes: `shadow-theme-xs`, `text-theme-sm`, etc.
### 5a. **Deprecated Patterns (DO NOT USE)**
- ❌ `.igny8-bg-*`, `.igny8-text-*`, `.igny8-border-*` utility classes
- ❌ `var(--igny8-blue)` - use `var(--color-primary)` instead
- ❌ Hardcoded hex colors like `#0693e3`
- ❌ Inline `style={{ color: ... }}` attributes
**Exception**: `.igny8-table-*` and `.igny8-header-metric-*` classes are still active and should be used for table/header components.
### 6. **When Creating New Components is Acceptable** ### 6. **When Creating New Components is Acceptable**
Only create new components if: Only create new components if:
1. Explicitly requested by the user 1. Explicitly requested by the user

216
frontend/MIGRATION_GUIDE.md Normal file
View File

@@ -0,0 +1,216 @@
# CSS Migration Guide
This guide documents the migration from legacy `.igny8-*` classes and `--igny8-*` variables to the new standardized design token system.
## Overview
All design tokens are now centralized in `/src/styles/tokens.css` with plain naming (no "igny8" prefix). The legacy `igny8-colors.css` file is maintained for backward compatibility but should not be used in new code.
## Color Token Migration
### CSS Variables
**Before:**
```tsx
<div className="bg-[var(--igny8-blue)]">Content</div>
```
**After:**
```tsx
<div className="bg-[var(--color-primary)]">Content</div>
```
### Complete Variable Mapping
| Legacy Variable | New Token | Usage |
|----------------|-----------|-------|
| `--igny8-blue` | `--color-primary` | Primary brand color |
| `--igny8-blue-dark` | `--color-primary-dark` | Primary dark variant |
| `--igny8-green` | `--color-success` | Success states |
| `--igny8-green-dark` | `--color-success-dark` | Success dark variant |
| `--igny8-amber` | `--color-warning` | Warning states |
| `--igny8-amber-dark` | `--color-warning-dark` | Warning dark variant |
| `--igny8-red` | `--color-danger` | Danger/error states |
| `--igny8-red-dark` | `--color-danger-dark` | Danger dark variant |
| `--igny8-purple` | `--color-purple` | Purple accent |
| `--igny8-purple-dark` | `--color-purple-dark` | Purple dark variant |
## Utility Class Migration
### Background Colors
**Before:**
```tsx
<div className="igny8-bg-blue">Content</div>
```
**After (Option 1 - Tailwind):**
```tsx
<div className="bg-brand-500">Content</div>
```
**After (Option 2 - CSS Variable):**
```tsx
<div className="bg-[var(--color-primary)]">Content</div>
```
### Text Colors
**Before:**
```tsx
<span className="igny8-text-blue">Text</span>
```
**After (Option 1 - Tailwind):**
```tsx
<span className="text-brand-500">Text</span>
```
**After (Option 2 - CSS Variable):**
```tsx
<span className="text-[var(--color-primary)]">Text</span>
```
### Border Colors
**Before:**
```tsx
<div className="igny8-border-blue">Content</div>
```
**After (Option 1 - Tailwind):**
```tsx
<div className="border-brand-500">Content</div>
```
**After (Option 2 - CSS Variable):**
```tsx
<div className="border-[var(--color-primary)]">Content</div>
```
## Component Migration
### Buttons
**Before:**
```tsx
<a className="inline-flex items-center rounded-full bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] text-white px-6 py-3">
Click me
</a>
```
**After:**
```tsx
import Button from '@/components/ui/button/Button';
<Button
variant="gradient"
tone="brand"
shape="pill"
size="lg"
as="a"
href="/path"
>
Click me
</Button>
```
### Badges
**Before:**
```tsx
<span className="igny8-badge igny8-badge-primary">New</span>
```
**After:**
```tsx
import Badge from '@/components/ui/badge/Badge';
<Badge variant="solid" tone="brand">New</Badge>
```
### Cards
**Before:**
```tsx
<div className="igny8-card">
<div className="igny8-card-header">Title</div>
Content
</div>
```
**After:**
```tsx
import { Card, CardTitle, CardContent } from '@/components/ui/card/Card';
<Card>
<CardTitle>Title</CardTitle>
<CardContent>Content</CardContent>
</Card>
```
## Gradients
**Before:**
```tsx
<div className="bg-gradient-to-r from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]">
Content
</div>
```
**After:**
```tsx
<div className="bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)]">
Content
</div>
```
Or use the Button component with `variant="gradient"`:
```tsx
<Button variant="gradient" tone="brand">Content</Button>
```
## Active Classes (Still in Use)
These classes are still actively used and should continue to be used:
- `.igny8-table-container` - Table wrapper with loading states
- `.igny8-table-wrapper` - Table scroll wrapper
- `.igny8-table-compact` - Compact table styling
- `.igny8-table-smooth` - Smooth table transitions
- `.igny8-table-body` - Table body styling
- `.igny8-skeleton-row` - Loading skeleton rows
- `.igny8-header-metrics` - Header metrics container
- `.igny8-header-metric` - Individual metric
- `.igny8-header-metric-accent` - Metric accent color
- `.igny8-header-metric-label` - Metric label
- `.igny8-header-metric-value` - Metric value
- `.igny8-header-metric-separator` - Metric separator
## Migration Checklist
When updating a file:
- [ ] Replace `--igny8-*` variables with `--color-*` tokens
- [ ] Replace `.igny8-bg-*` with `bg-brand-500` or `bg-[var(--color-primary)]`
- [ ] Replace `.igny8-text-*` with `text-brand-500` or `text-[var(--color-primary)]`
- [ ] Replace `.igny8-border-*` with `border-brand-500` or `border-[var(--color-primary)]`
- [ ] Replace hardcoded buttons with `<Button>` component
- [ ] Replace hardcoded badges with `<Badge>` component
- [ ] Replace hardcoded cards with `<Card>` component
- [ ] Keep `.igny8-table-*` and `.igny8-header-metric-*` classes as-is
- [ ] Test visual appearance matches (no color changes)
## Benefits of Migration
✅ **Single source of truth** - All colors defined in one place
✅ **Type safety** - React components provide prop validation
✅ **Consistency** - Standardized components across marketing and dashboard
✅ **Maintainability** - Easier to update colors globally
✅ **Performance** - Tailwind utilities are optimized
✅ **Developer experience** - Better autocomplete and IntelliSense
## Questions?
See `DESIGN_SYSTEM.md` for complete design system guidelines.

89
frontend/src/styles/README.md
View File

@@ -1,59 +1,64 @@
# IGNY8 Custom Styles # Design Tokens & Styles
This directory contains IGNY8-specific custom styles that are **completely separate** from TailAdmin defaults. This directory contains the centralized design token system and legacy compatibility styles.
## Files ## Files
- `igny8-colors.css` - IGNY8 brand color scheme with custom CSS variables and utility classes - `tokens.css` - **Single source of truth** for all design tokens (colors, gradients, shadows)
- `igny8-colors.css` - Legacy compatibility file (deprecated - use tokens.css instead)
- `global.css` - Global base styles
## Usage ## Design Tokens (`tokens.css`)
### Import in your component: All design tokens use plain naming (no "igny8" prefix):
```typescript
// Already imported globally in main.tsx
// No need to import in individual components
```
### Use IGNY8 classes: ### Color Tokens
- `--color-primary` - Primary brand blue (#0693e3)
- `--color-primary-dark` - Primary dark variant (#0472b8)
- `--color-success` - Success green (#0bbf87)
- `--color-warning` - Warning amber (#ff7a00)
- `--color-danger` - Danger red (#ef4444)
- `--color-purple` - Purple accent (#5d4ae3)
### Usage
**✅ DO:**
```tsx ```tsx
// ✅ Use IGNY8 custom classes // Use Tailwind utilities
<div className="igny8-bg-blue igny8-text-white igny8-card"> <div className="bg-brand-500 text-white">Content</div>
Content
</div>
// ❌ Don't use TailAdmin defaults (unless you want TailAdmin branding) // Use CSS variables for custom values
<div className="bg-brand-500 text-white"> <div className="bg-[var(--color-primary)]">Content</div>
Content
</div> // Use React components
<Button tone="brand" variant="gradient">Click me</Button>
``` ```
## Color Variables **❌ DON'T:**
```tsx
// Don't use deprecated utility classes
<div className="igny8-bg-blue">Content</div>
All colors are available as CSS variables: // Don't hardcode colors
- `--igny8-blue` - Primary brand blue <div className="bg-[#0693e3]">Content</div>
- `--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 ## Legacy File (`igny8-colors.css`)
All utility classes use `igny8-` prefix: ⚠️ **DEPRECATED** - This file is maintained for backward compatibility only.
- 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 - Legacy variable aliases (`--igny8-*` → `--color-*`)
- Active utility classes (`.igny8-table-*`, `.igny8-header-metric-*`)
- Deprecated utility classes (marked - do not use in new code)
✅ **No conflicts** - Separate prefix prevents TailAdmin update issues See `MIGRATION_GUIDE.md` for migration instructions.
✅ **Easy updates** - TailAdmin can be updated without affecting IGNY8 styles
✅ **Clear separation** - Easy to identify IGNY8 vs TailAdmin styles ## Migration
✅ **Consistent branding** - All IGNY8 components use same color scheme
All new code should use:
1. Design tokens from `tokens.css`
2. Tailwind utilities (`bg-brand-500`, `text-brand-500`)
3. React components (`Button`, `Badge`, `Card`)
See `../MIGRATION_GUIDE.md` for complete migration guide.

33
frontend/src/styles/igny8-colors.css
View File

@@ -1,22 +1,26 @@
/* =================================================================== /* ===================================================================
IGNY8 CUSTOM COLOR SCHEME IGNY8 UTILITY CLASSES & LEGACY SUPPORT
=================================================================== ===================================================================
This file contains IGNY8 brand colors from WordPress plugin. ⚠️ DEPRECATED: This file is maintained for backward compatibility.
All classes use 'igny8-' prefix to avoid conflicts with TailAdmin defaults. New code should use:
Import this file separately to keep TailAdmin updates from affecting it. - CSS variables: var(--color-primary), var(--color-success), etc.
- Tailwind utilities: bg-brand-500, text-brand-500, etc.
- React components: Button, Badge, Card from /components/ui/
🔒 DESIGN SYSTEM LOCKED - See DESIGN_SYSTEM.md for complete style guide 🔒 DESIGN SYSTEM LOCKED - See DESIGN_SYSTEM.md for complete style guide
IMPORTANT: Before adding new CSS classes, check DESIGN_SYSTEM.md to ensure This file provides:
you're not duplicating existing functionality. All visual styling patterns 1. Legacy variable aliases (--igny8-* → --color-*)
are documented and locked. 2. Active utility classes (.igny8-table-*, .igny8-header-metric-*)
3. Deprecated utility classes (marked below - do not use in new code)
=================================================================== */ =================================================================== */
/* === CSS CUSTOM PROPERTIES (Variables) === */ /* === CSS CUSTOM PROPERTIES (Variables) === */
/* Import tokens from centralized tokens.css */ /* Import tokens from centralized tokens.css */
@import "./tokens.css"; @import "./tokens.css";
/* Legacy variable aliases for backward compatibility during migration */ /* Legacy variable aliases for backward compatibility */
/* These allow old code using --igny8-* to continue working */
:root { :root {
--igny8-blue: var(--color-primary); --igny8-blue: var(--color-primary);
--igny8-blue-dark: var(--color-primary-dark); --igny8-blue-dark: var(--color-primary-dark);
@@ -47,13 +51,18 @@
} }
/* =================================================================== /* ===================================================================
IGNY8 UTILITY CLASSES DEPRECATED UTILITY CLASSES
=================================================================== ===================================================================
Use these classes instead of Tailwind defaults for IGNY8 branding. ⚠️ DO NOT USE IN NEW CODE
Example: Use 'igny8-bg-blue' instead of 'bg-brand-500' These classes are deprecated. Use Tailwind utilities or React components instead:
- .igny8-bg-blue → bg-brand-500 or bg-[var(--color-primary)]
- .igny8-text-blue → text-brand-500 or text-[var(--color-primary)]
- .igny8-border-blue → border-brand-500 or border-[var(--color-primary)]
Migration: Replace with Tailwind utilities or use Button/Badge/Card components.
=================================================================== */ =================================================================== */
/* === Background Colors === */ /* === Background Colors (DEPRECATED) === */
.igny8-bg-blue { background-color: var(--igny8-blue); } .igny8-bg-blue { background-color: var(--igny8-blue); }
.igny8-bg-blue-dark { background-color: var(--igny8-blue-dark); } .igny8-bg-blue-dark { background-color: var(--igny8-blue-dark); }
.igny8-bg-green { background-color: var(--igny8-green); } .igny8-bg-green { background-color: var(--igny8-green); }