generated logo and a new epic with stories for logo implimintation and color changing
This commit is contained in:
Naser Mansour
@@ -0,0 +1,194 @@
|
||||
# Story 12.2: Core CSS Theme Update - Olive Green Palette
|
||||
|
||||
## Story
|
||||
|
||||
**As a** developer
|
||||
**I want to** update the Tailwind CSS theme to use the new olive green color palette
|
||||
**So that** the application reflects the new LIBRA for Rights brand colors matching the botanical logo
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Update Color Variables in `resources/css/app.css`
|
||||
|
||||
**Given** the current theme uses Charcoal/Warm Gray palette
|
||||
**When** I update the `@theme` block
|
||||
**Then** the following color mappings are applied:
|
||||
|
||||
| Old Variable | Old Hex | New Variable | New Hex |
|
||||
|--------------|---------|--------------|---------|
|
||||
| `--color-primary` | `#4A4A42` (Charcoal) | `--color-primary` | `#8AB357` (Olive Green) |
|
||||
| `--color-accent` | `#C9C4BA` (Warm Gray) | `--color-accent` | `#A5C87A` (Light Olive) |
|
||||
| `--color-accent-light` | `#E8E4DC` (Off-White) | `--color-accent-light` | `#C5D9A5` (Pale Olive) |
|
||||
| `--color-background` | `#E8E4DC` (Off-White) | `--color-background` | `#E8E4DC` (Off-White) - unchanged |
|
||||
| `--color-text` | `#1A1A1A` (Deep Black) | `--color-text` | `#1A1A1A` (Deep Black) - unchanged |
|
||||
|
||||
### AC2: Add Olive Green Color Variants
|
||||
|
||||
**Given** the new palette needs hover and active states
|
||||
**When** I update the theme
|
||||
**Then** these additional variants are defined:
|
||||
|
||||
| Variable | Hex | Usage |
|
||||
|----------|-----|-------|
|
||||
| `--color-primary` | `#8AB357` | Primary olive green |
|
||||
| `--color-primary-hover` | `#7AA347` | Darker olive for hover |
|
||||
| `--color-primary-dark` | `#6A9337` | Dark olive for active/pressed |
|
||||
| `--color-primary-light` | `#B5D88A` | Light olive for highlights |
|
||||
| `--color-accent` | `#A5C87A` | Secondary light olive |
|
||||
| `--color-accent-light` | `#C5D9A5` | Pale olive for subtle backgrounds |
|
||||
|
||||
### AC3: Maintain Backward Compatibility Aliases
|
||||
|
||||
**Given** existing components may use old color names
|
||||
**When** the theme is updated
|
||||
**Then** aliases are updated so existing classes continue to work:
|
||||
- `--color-charcoal` → points to `--color-primary` (Olive Green)
|
||||
- `--color-warm-gray` → points to `--color-accent` (Light Olive)
|
||||
- Legacy navy/gold aliases remain for any residual references
|
||||
|
||||
### AC4: Update Button Styles
|
||||
|
||||
**Given** button classes use the primary color
|
||||
**When** theme is updated
|
||||
**Then** `.btn-primary` and `.btn-secondary` use new olive palette:
|
||||
- Primary: Olive Green background (`#8AB357`), Off-White text
|
||||
- Primary Hover: Darker Olive (`#7AA347`)
|
||||
- Secondary: Light Olive border, Deep Black text
|
||||
- Hover states updated accordingly
|
||||
|
||||
### AC5: Update Form Focus States
|
||||
|
||||
**Given** form inputs have focus rings
|
||||
**When** theme is updated
|
||||
**Then** focus states use Olive Green:
|
||||
- `focus:border-accent` → Light Olive border
|
||||
- `focus:ring-accent` → Light Olive ring
|
||||
- `focus:ring-primary` → Olive Green ring
|
||||
|
||||
### AC6: Update Link Colors
|
||||
|
||||
**Given** links use accent colors
|
||||
**When** theme is updated
|
||||
**Then** link colors use olive palette:
|
||||
- Default: Olive Green (`#8AB357`)
|
||||
- Hover: Darker Olive (`#7AA347`)
|
||||
- Visited: Primary Olive (unchanged)
|
||||
|
||||
### AC7: Status Colors Unchanged
|
||||
|
||||
**Given** status colors serve functional purposes
|
||||
**When** theme is updated
|
||||
**Then** these remain unchanged:
|
||||
- `--color-success: #27AE60`
|
||||
- `--color-danger: #E74C3C`
|
||||
- `--color-warning: #F39C12`
|
||||
|
||||
### AC8: WCAG AA Contrast Compliance
|
||||
|
||||
**Given** accessibility requirements
|
||||
**When** new colors are applied
|
||||
**Then** all text/background combinations meet WCAG AA:
|
||||
- Deep Black (`#1A1A1A`) on Off-White (`#E8E4DC`): ≥4.5:1 for body text
|
||||
- Off-White on Olive Green (`#8AB357`): ≥4.5:1 for body text
|
||||
- Deep Black on Light Olive (`#A5C87A`): Verify contrast ratio
|
||||
|
||||
### AC9: Update Prose Class
|
||||
|
||||
**Given** `.prose-brand` class exists for blog content
|
||||
**When** theme is updated
|
||||
**Then** prose colors use olive palette:
|
||||
- Headings: Deep Black
|
||||
- Links: Olive Green
|
||||
- Body: Deep Black
|
||||
|
||||
### AC10: Build Succeeds
|
||||
|
||||
**Given** CSS changes are made
|
||||
**When** I run `npm run build`
|
||||
**Then** the build completes successfully without errors
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### Files to Modify
|
||||
- `resources/css/app.css` - Main theme file
|
||||
|
||||
### New Color Palette Reference
|
||||
|
||||
| Color | Hex | RGB | Usage |
|
||||
|-------|-----|-----|-------|
|
||||
| Olive Green | `#8AB357` | rgb(138, 179, 87) | Primary brand color |
|
||||
| Darker Olive | `#7AA347` | rgb(122, 163, 71) | Hover states |
|
||||
| Dark Olive | `#6A9337` | rgb(106, 147, 55) | Active/pressed states |
|
||||
| Light Olive | `#A5C87A` | rgb(165, 200, 122) | Secondary/accent |
|
||||
| Pale Olive | `#C5D9A5` | rgb(197, 217, 165) | Subtle backgrounds |
|
||||
| Bright Olive | `#B5D88A` | rgb(181, 216, 138) | Highlights |
|
||||
| Off-White | `#E8E4DC` | rgb(232, 228, 220) | Backgrounds (unchanged) |
|
||||
| Deep Black | `#1A1A1A` | rgb(26, 26, 26) | Text (unchanged) |
|
||||
|
||||
### Contrast Verification
|
||||
|
||||
Use WebAIM Contrast Checker to verify:
|
||||
- Deep Black (#1A1A1A) on Off-White (#E8E4DC): ~12.5:1 (passes AAA)
|
||||
- Off-White (#E8E4DC) on Olive Green (#8AB357): ~3.2:1 (check if passes)
|
||||
- Deep Black (#1A1A1A) on Light Olive (#A5C87A): ~8.5:1 (passes AAA)
|
||||
|
||||
**Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead.
|
||||
|
||||
### CSS Theme Block Example
|
||||
|
||||
```css
|
||||
@theme {
|
||||
/* Primary Olive Green Palette */
|
||||
--color-primary: #8AB357;
|
||||
--color-primary-hover: #7AA347;
|
||||
--color-primary-dark: #6A9337;
|
||||
--color-primary-light: #B5D88A;
|
||||
|
||||
/* Secondary/Accent */
|
||||
--color-accent: #A5C87A;
|
||||
--color-accent-light: #C5D9A5;
|
||||
--color-accent-content: #A5C87A;
|
||||
--color-accent-foreground: #1A1A1A;
|
||||
|
||||
/* Neutrals (unchanged) */
|
||||
--color-background: #E8E4DC;
|
||||
--color-text: #1A1A1A;
|
||||
|
||||
/* Backward compatibility */
|
||||
--color-charcoal: var(--color-primary);
|
||||
--color-warm-gray: var(--color-accent);
|
||||
--color-off-white: var(--color-background);
|
||||
|
||||
/* Status colors (unchanged) */
|
||||
--color-success: #27AE60;
|
||||
--color-danger: #E74C3C;
|
||||
--color-warning: #F39C12;
|
||||
}
|
||||
```
|
||||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Update `@theme` block with new olive green values
|
||||
- [ ] Add olive green variants (hover, dark, light)
|
||||
- [ ] Update backward-compatible aliases
|
||||
- [ ] Update `.btn-primary` styles
|
||||
- [ ] Update `.btn-secondary` styles
|
||||
- [ ] Update form focus states
|
||||
- [ ] Update link colors
|
||||
- [ ] Update `.prose-brand` class
|
||||
- [ ] Update skip-link focus styles
|
||||
- [ ] Update timeline-dot color
|
||||
- [ ] Update skeleton loader color
|
||||
- [ ] Verify status colors unchanged
|
||||
- [ ] Run contrast checker on all combinations
|
||||
- [ ] Run `npm run build` successfully
|
||||
- [ ] Visual test in browser
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Low-Medium
|
||||
**Risk:** Low - CSS-only changes with aliases for backward compatibility
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Can run in parallel with Story 12.1 (Logo Deployment)
|
||||
Reference in New Issue
Block a user