naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redone 12.2 and update the header and footer colors to #2D3624

This commit is contained in:
Naser Mansour 2026-01-04 01:54:20 +02:00
parent b2ff6df18e
commit 1796bdb51e
7 changed files with 144 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/stories/epic-12-branding-refresh.md
View File

@ -24,7 +24,7 @@ Update the LIBRA for Rights brand identity by implementing the new square logo w
| Color Name | Hex | Usage | | Color Name | Hex | Usage |
|------------|-----|-------| |------------|-----|-------|
| Primary (Dark Charcoal) | `#1B1D1A` | Header/Footer backgrounds | | Primary (Dark Forest Green) | `#2D3624` | Header/Footer backgrounds |
| CTA (Warm Gold) | `#A68966` | Buttons, links, accents | | CTA (Warm Gold) | `#A68966` | Buttons, links, accents |
| Background (Warm Cream) | `#F4F1EA` | Main page background | | Background (Warm Cream) | `#F4F1EA` | Main page background |
| Text (Forest Green) | `#2D322A` | Headings, body text | | Text (Forest Green) | `#2D322A` | Headings, body text |
@ -35,7 +35,7 @@ Update the LIBRA for Rights brand identity by implementing the new square logo w
| Variant | Hex | Usage | | Variant | Hex | Usage |
|---------|-----|-------| |---------|-----|-------|
| Primary Light | `#2D322A` | Primary hover state | | Primary Light | `#3D4634` | Primary hover state |
| CTA Hover | `#8A7555` | Button hover state | | CTA Hover | `#8A7555` | Button hover state |
| CTA Light | `#C4A882` | Light accent | | CTA Light | `#C4A882` | Light accent |
| Active Hover | `#5A7030` | Active state hover | | Active Hover | `#5A7030` | Active state hover |
@ -116,8 +116,8 @@ Update brand documentation (`docs/brand.md`, `CLAUDE.md`, etc.) to reflect new c
### Color Values for Implementation ### Color Values for Implementation
```css ```css
/* New Dark Charcoal & Warm Gold Palette */ /* New Dark Forest Green & Warm Gold Palette */
--color-primary: #1B1D1A; /* Dark Charcoal - Header/Footer backgrounds */ --color-primary: #2D3624; /* Dark Forest Green - Header/Footer backgrounds */
--color-cta: #A68966; /* Warm Gold - Buttons, links, accents */ --color-cta: #A68966; /* Warm Gold - Buttons, links, accents */
--color-background: #F4F1EA; /* Warm Cream - Main page background */ --color-background: #F4F1EA; /* Warm Cream - Main page background */
--color-text: #2D322A; /* Forest Green - Headings, body text */ --color-text: #2D322A; /* Forest Green - Headings, body text */
@ -125,7 +125,7 @@ Update brand documentation (`docs/brand.md`, `CLAUDE.md`, etc.) to reflect new c
--color-active: #4A5D23; /* Olive Green - Active states */ --color-active: #4A5D23; /* Olive Green - Active states */
/* Color variants for UI states */ /* Color variants for UI states */
--color-primary-light: #2D322A; /* Primary hover state */ --color-primary-light: #3D4634; /* Primary hover state */
--color-cta-hover: #8A7555; /* Button hover state */ --color-cta-hover: #8A7555; /* Button hover state */
--color-cta-light: #C4A882; /* Light accent */ --color-cta-light: #C4A882; /* Light accent */
--color-active-hover: #5A7030; /* Active state hover */ --color-active-hover: #5A7030; /* Active state hover */
@ -135,7 +135,7 @@ Update brand documentation (`docs/brand.md`, `CLAUDE.md`, etc.) to reflect new c
| Element | Color | Hex | | Element | Color | Hex |
|---------|-------|-----| |---------|-------|-----|
| Header/Footer Background | Primary | `#1B1D1A` | | Header/Footer Background | Primary | `#2D3624` |
| Main Page Background | Background | `#F4F1EA` | | Main Page Background | Background | `#F4F1EA` |
| Card Backgrounds | Card | `#FFFFFF` | | Card Backgrounds | Card | `#FFFFFF` |
| CTA Buttons | CTA | `#A68966` | | CTA Buttons | CTA | `#A68966` |

43
docs/stories/story-12.2-core-css-theme-update.md
View File

@ -157,17 +157,17 @@ Use WebAIM Contrast Checker to verify:
## Dev Checklist ## Dev Checklist
- [ ] Update `@theme` block with new color values - [x] Update `@theme` block with new color values
- [ ] Add color variants (hover, light) - [x] Add color variants (hover, light)
- [ ] Update `.btn-primary` styles to use CTA colors - [x] Update `.btn-primary` styles to use CTA colors
- [ ] Update `.btn-secondary` styles - [x] Update `.btn-secondary` styles
- [ ] Update form focus states - [x] Update form focus states
- [ ] Update link colors - [x] Update link colors
- [ ] Update `.prose-brand` class - [x] Update `.prose-brand` class
- [ ] Update skip-link focus styles - [x] Update skip-link focus styles
- [ ] Verify status colors unchanged - [x] Verify status colors unchanged
- [ ] Run contrast checker on all combinations - [x] Run contrast checker on all combinations
- [ ] Run `npm run build` successfully - [x] Run `npm run build` successfully
- [ ] Visual test in browser - [ ] Visual test in browser
## Estimation ## Estimation
@ -184,20 +184,33 @@ Use WebAIM Contrast Checker to verify:
## Dev Agent Record ## Dev Agent Record
### Agent Model Used ### Agent Model Used
(To be filled during implementation) Claude Opus 4.5 (claude-opus-4-5-20251101)
### Status ### Status
Not Started - Ready for Implementation Ready for Review
### File List ### File List
| File | Action | | File | Action |
|------|--------| |------|--------|
| `resources/css/app.css` | To be modified | | `resources/css/app.css` | Modified |
### Change Log ### Change Log
| Date | Change | | Date | Change |
|------|--------| |------|--------|
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette | | 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
| 2026-01-04 | Implemented all color palette changes per AC1-AC8 |
| 2026-01-04 | Updated primary color to #2D3624 (Dark Forest Green) per user request |
### Completion Notes ### Completion Notes
(To be filled during implementation) - Updated @theme block with Dark Charcoal & Warm Gold palette (AC1)
- Added all color variants: cta, cta-hover, cta-light, active, active-hover (AC2)
- Updated .btn-primary to use Warm Gold (#A68966) with white text, hover to #8A7555 (AC3)
- Updated .btn-secondary to use Dark Charcoal border with Forest Green text (AC3)
- Updated all form focus states to use Warm Gold (focus:border-cta, focus:ring-cta) (AC4)
- Updated link colors in .prose-brand to use Warm Gold default, Darker Gold hover (AC5)
- Verified status colors unchanged: success=#27AE60, danger=#E74C3C, warning=#F39C12 (AC6)
- Updated .prose-brand class: headings/body use Forest Green, links use Warm Gold (AC8)
- npm run build completed successfully (AC9)
- Maintained backward compatibility aliases for legacy class names
- Updated logo-badge shadow to match new primary color
- All Flux UI form components updated with new focus states

18
docs/stories/story-12.3-blade-component-color-migration.md
View File

@ -13,9 +13,9 @@
**Given** `resources/views/components/navigation.blade.php` uses current colors **Given** `resources/views/components/navigation.blade.php` uses current colors
**When** I update the component **When** I update the component
**Then** the following changes are applied: **Then** the following changes are applied:
- Background: Dark Charcoal (`#1B1D1A` / `bg-primary`) - Background: Dark Forest Green (`#2D3624` / `bg-primary`)
- Text/Links: Warm Cream (`#F4F1EA` / `text-off-white`) for contrast - Text/Links: Warm Cream (`#F4F1EA` / `text-off-white`) for contrast
- Hover states: Use `hover:bg-primary-light` - Hover states: Use `hover:bg-primary-light` (`#3D4634`)
- Mobile menu uses new colors - Mobile menu uses new colors
- Active states use Olive Green (`#4A5D23`) - Active states use Olive Green (`#4A5D23`)
@ -24,7 +24,7 @@
**Given** `resources/views/components/footer.blade.php` uses current colors **Given** `resources/views/components/footer.blade.php` uses current colors
**When** I update the component **When** I update the component
**Then** the following changes are applied: **Then** the following changes are applied:
- Background: Dark Charcoal (`#1B1D1A`) - Background: Dark Forest Green (`#2D3624`)
- Text: Warm Cream for contrast - Text: Warm Cream for contrast
- Links: Warm Gold (`#A68966`) with hover states - Links: Warm Gold (`#A68966`) with hover states
- Social icons: Appropriate contrast colors - Social icons: Appropriate contrast colors
@ -164,18 +164,18 @@ Key updates:
| Old Class | New Class | Color | | Old Class | New Class | Color |
|-----------|-----------|-------| |-----------|-----------|-------|
| `bg-primary` (olive) | `bg-primary` | Dark Charcoal `#1B1D1A` | | `bg-primary` (olive) | `bg-primary` | Dark Forest Green `#2D3624` |
| `bg-accent` | `bg-cta` or `bg-cta-light` | Warm Gold / Gold Light | | `bg-accent` | `bg-cta` or `bg-cta-light` | Warm Gold / Gold Light |
| `text-primary` | `text-cta` | Warm Gold for links | | `text-primary` | `text-cta` | Warm Gold for links |
| `text-text` | `text-text` | Forest Green `#2D322A` | | `text-text` | `text-text` | Forest Green `#2D322A` |
| `bg-background` | `bg-background` | Warm Cream `#F4F1EA` | | `bg-background` | `bg-background` | Warm Cream `#F4F1EA` |
| `bg-white` | `bg-card` | Pure White `#FFFFFF` | | `bg-white` | `bg-card` | Pure White `#FFFFFF` |
| `hover:bg-primary-hover` | `hover:bg-primary-light` | `#2D322A` | | `hover:bg-primary-hover` | `hover:bg-primary-light` | `#3D4634` |
### Visual Hierarchy with New Palette ### Visual Hierarchy with New Palette
**Header/Footer:** **Header/Footer:**
- Background: Dark Charcoal (`#1B1D1A`) - Background: Dark Forest Green (`#2D3624`)
- Text: Warm Cream (`#F4F1EA`) - Text: Warm Cream (`#F4F1EA`)
- Links: Warm Cream, hover to Warm Gold - Links: Warm Cream, hover to Warm Gold
@ -185,7 +185,7 @@ Key updates:
- Hover: Gold Hover (`#8A7555`) - Hover: Gold Hover (`#8A7555`)
**Secondary Actions:** **Secondary Actions:**
- Border: Dark Charcoal or Warm Gold - Border: Dark Forest Green or Warm Gold
- Text: Forest Green or Warm Gold - Text: Forest Green or Warm Gold
**Active States (Language Toggle):** **Active States (Language Toggle):**
@ -203,8 +203,8 @@ Key updates:
## Dev Checklist ## Dev Checklist
- [ ] Update `navigation.blade.php` - Dark Charcoal bg, Warm Cream text - [ ] Update `navigation.blade.php` - Dark Forest Green bg, Warm Cream text
- [ ] Update `footer.blade.php` - Dark Charcoal bg, Warm Cream text - [ ] Update `footer.blade.php` - Dark Forest Green bg, Warm Cream text
- [ ] Update `language-toggle.blade.php` - Olive Green active state - [ ] Update `language-toggle.blade.php` - Olive Green active state
- [ ] Update `spinner.blade.php` - Warm Gold color - [ ] Update `spinner.blade.php` - Warm Gold color
- [ ] Update `toast.blade.php` - Warm Gold for info - [ ] Update `toast.blade.php` - Warm Gold for info

16
docs/stories/story-12.4-email-template-color-update.md
View File

@ -18,10 +18,10 @@
|---------|-----------|-----| |---------|-----------|-----|
| Links (`a`) | Warm Gold | `#A68966` | | Links (`a`) | Warm Gold | `#A68966` |
| Headings (h1, h2, h3) | Forest Green | `#2D322A` | | Headings (h1, h2, h3) | Forest Green | `#2D322A` |
| Header background | Dark Charcoal | `#1B1D1A` | | Header background | Dark Forest Green | `#2D3624` |
| Footer links | Warm Gold | `#A68966` | | Footer links | Warm Gold | `#A68966` |
| Primary button | Warm Gold bg, White text | `#A68966` / `#FFFFFF` | | Primary button | Warm Gold bg, White text | `#A68966` / `#FFFFFF` |
| Table headers | Dark Charcoal bg, White text | `#1B1D1A` | | Table headers | Dark Forest Green bg, White text | `#2D3624` |
| Panel border | Gold Light | `#C4A882` | | Panel border | Gold Light | `#C4A882` |
| Body text | Forest Green | `#2D322A` | | Body text | Forest Green | `#2D322A` |
| Body background | Warm Cream | `#F4F1EA` | | Body background | Warm Cream | `#F4F1EA` |
@ -31,7 +31,7 @@
**Given** `resources/views/vendor/mail/html/header.blade.php` has inline styles **Given** `resources/views/vendor/mail/html/header.blade.php` has inline styles
**When** I update the component **When** I update the component
**Then**: **Then**:
- Background color updated to Dark Charcoal (`#1B1D1A`) - Background color updated to Dark Forest Green (`#2D3624`)
- Text color: White or Warm Cream - Text color: White or Warm Cream
- Logo sizing maintained for square format - Logo sizing maintained for square format
@ -106,7 +106,7 @@
```css ```css
/* New Color Values */ /* New Color Values */
#1B1D1A /* Dark Charcoal - Header background, table headers */ #2D3624 /* Dark Forest Green - Header background, table headers */
#A68966 /* Warm Gold - Links, buttons, accents */ #A68966 /* Warm Gold - Links, buttons, accents */
#8A7555 /* Gold Hover - Button hover state */ #8A7555 /* Gold Hover - Button hover state */
#C4A882 /* Gold Light - Panel borders, subtle accents */ #C4A882 /* Gold Light - Panel borders, subtle accents */
@ -128,7 +128,7 @@ Email clients have limited CSS support. Ensure:
```css ```css
/* Header */ /* Header */
.header { .header {
background-color: #1B1D1A; background-color: #2D3624;
} }
/* Links */ /* Links */
@ -154,7 +154,7 @@ h1, h2, h3 {
/* Table Header */ /* Table Header */
.table th { .table th {
background-color: #1B1D1A; background-color: #2D3624;
color: #FFFFFF; color: #FFFFFF;
} }
@ -167,11 +167,11 @@ body {
## Dev Checklist ## Dev Checklist
- [ ] Update `default.css` header background color to `#1B1D1A` - [ ] Update `default.css` header background color to `#2D3624`
- [ ] Update `default.css` link colors to `#A68966` - [ ] Update `default.css` link colors to `#A68966`
- [ ] Update `default.css` heading colors to `#2D322A` - [ ] Update `default.css` heading colors to `#2D322A`
- [ ] Update `default.css` button colors (`.button-primary`) to `#A68966` - [ ] Update `default.css` button colors (`.button-primary`) to `#A68966`
- [ ] Update `default.css` table header colors to `#1B1D1A` - [ ] Update `default.css` table header colors to `#2D3624`
- [ ] Update `default.css` panel border color to `#C4A882` - [ ] Update `default.css` panel border color to `#C4A882`
- [ ] Update `default.css` footer link colors to `#A68966` - [ ] Update `default.css` footer link colors to `#A68966`
- [ ] Update `default.css` body background to `#F4F1EA` - [ ] Update `default.css` body background to `#F4F1EA`

26
docs/stories/story-12.5-pdf-template-color-update.md
View File

@ -13,10 +13,10 @@
**Given** `resources/views/pdf/users-export.blade.php` uses current colors **Given** `resources/views/pdf/users-export.blade.php` uses current colors
**When** I update the template **When** I update the template
**Then** the following changes are applied: **Then** the following changes are applied:
- Header background: Dark Charcoal (`#1B1D1A`) - Header background: Dark Forest Green (`#2D3624`)
- Header text: White (`#FFFFFF`) - Header text: White (`#FFFFFF`)
- Accent elements: Warm Gold (`#A68966`) or Gold Light (`#C4A882`) - Accent elements: Warm Gold (`#A68966`) or Gold Light (`#C4A882`)
- Table headers: Dark Charcoal background, white text - Table headers: Dark Forest Green background, white text
- Borders: Gold Light (`#C4A882`) - Borders: Gold Light (`#C4A882`)
- Body text: Forest Green (`#2D322A`) - Body text: Forest Green (`#2D322A`)
@ -25,7 +25,7 @@
**Given** `resources/views/pdf/consultations-export.blade.php` uses current colors **Given** `resources/views/pdf/consultations-export.blade.php` uses current colors
**When** I update the template **When** I update the template
**Then** colors match the new palette: **Then** colors match the new palette:
- Headers: Dark Charcoal background - Headers: Dark Forest Green background
- Status badges: Appropriate contrast colors - Status badges: Appropriate contrast colors
- Table styling: Gold accents - Table styling: Gold accents
@ -35,7 +35,7 @@
**When** I update the template **When** I update the template
**Then** colors match the new palette: **Then** colors match the new palette:
- Timeline markers: Warm Gold (`#A68966`) - Timeline markers: Warm Gold (`#A68966`)
- Section headers: Dark Charcoal background - Section headers: Dark Forest Green background
- Borders and accents: Gold Light (`#C4A882`) - Borders and accents: Gold Light (`#C4A882`)
### AC4: Monthly Report PDF Updated ### AC4: Monthly Report PDF Updated
@ -43,7 +43,7 @@
**Given** `resources/views/pdf/monthly-report.blade.php` uses current colors **Given** `resources/views/pdf/monthly-report.blade.php` uses current colors
**When** I update the template **When** I update the template
**Then** the following changes are applied: **Then** the following changes are applied:
- Header/footer: Dark Charcoal background (`#1B1D1A`) - Header/footer: Dark Forest Green background (`#2D3624`)
- Header/footer text: White - Header/footer text: White
- Accent colors: Warm Gold (`#A68966`) - Accent colors: Warm Gold (`#A68966`)
- Charts/graphs: Updated color scheme - Charts/graphs: Updated color scheme
@ -56,7 +56,7 @@
**Then** chart colors use new palette: **Then** chart colors use new palette:
- Primary chart color: Warm Gold (`#A68966`) - Primary chart color: Warm Gold (`#A68966`)
- Secondary: Gold Light (`#C4A882`) - Secondary: Gold Light (`#C4A882`)
- Tertiary: Dark Charcoal (`#1B1D1A`) - Tertiary: Dark Forest Green (`#2D3624`)
- Quaternary: Olive Green (`#4A5D23`) - Quaternary: Olive Green (`#4A5D23`)
### AC6: Print-Friendly Colors ### AC6: Print-Friendly Colors
@ -64,7 +64,7 @@
**Given** PDFs are often printed **Given** PDFs are often printed
**When** colors are updated **When** colors are updated
**Then** they remain legible when printed: **Then** they remain legible when printed:
- Dark Charcoal (`#1B1D1A`) prints as near-black - excellent contrast - Dark Forest Green (`#2D3624`) prints as dark green/gray - excellent contrast
- Warm Gold (`#A68966`) prints as medium tone - good visibility - Warm Gold (`#A68966`) prints as medium tone - good visibility
- Sufficient contrast for all text - Sufficient contrast for all text
- Consider adding subtle borders for light-colored sections - Consider adding subtle borders for light-colored sections
@ -102,12 +102,12 @@
| Element | New Color | Hex | | Element | New Color | Hex |
|---------|-----------|-----| |---------|-----------|-----|
| Primary Background | Dark Charcoal | `#1B1D1A` | | Primary Background | Dark Forest Green | `#2D3624` |
| Accent/Highlight | Warm Gold | `#A68966` | | Accent/Highlight | Warm Gold | `#A68966` |
| Light Accent | Gold Light | `#C4A882` | | Light Accent | Gold Light | `#C4A882` |
| Page Background | Warm Cream | `#F4F1EA` | | Page Background | Warm Cream | `#F4F1EA` |
| Text | Forest Green | `#2D322A` | | Text | Forest Green | `#2D322A` |
| Table Header BG | Dark Charcoal | `#1B1D1A` | | Table Header BG | Dark Forest Green | `#2D3624` |
| Table Header Text | White | `#FFFFFF` | | Table Header Text | White | `#FFFFFF` |
| Borders | Gold Light | `#C4A882` | | Borders | Gold Light | `#C4A882` |
@ -117,10 +117,10 @@ PDF templates use inline CSS. Common patterns to update:
```html ```html
<!-- Header --> <!-- Header -->
<div style="background-color: #1B1D1A; color: #FFFFFF;"> <div style="background-color: #2D3624; color: #FFFFFF;">
<!-- Table Header --> <!-- Table Header -->
<th style="background-color: #1B1D1A; color: #FFFFFF;"> <th style="background-color: #2D3624; color: #FFFFFF;">
<!-- Accent Border --> <!-- Accent Border -->
<div style="border-left: 4px solid #A68966;"> <div style="border-left: 4px solid #A68966;">
@ -136,7 +136,7 @@ PDF templates use inline CSS. Common patterns to update:
$chartColors = [ $chartColors = [
'primary' => '#A68966', // Warm Gold 'primary' => '#A68966', // Warm Gold
'secondary' => '#C4A882', // Gold Light 'secondary' => '#C4A882', // Gold Light
'tertiary' => '#1B1D1A', // Dark Charcoal 'tertiary' => '#2D3624', // Dark Forest Green
'quaternary' => '#4A5D23', // Olive Green 'quaternary' => '#4A5D23', // Olive Green
'background' => '#F4F1EA', // Warm Cream 'background' => '#F4F1EA', // Warm Cream
]; ];
@ -144,7 +144,7 @@ $chartColors = [
### Print Considerations ### Print Considerations
- Dark Charcoal (`#1B1D1A`) prints as near-black - excellent readability - Dark Forest Green (`#2D3624`) prints as dark green/gray - excellent readability
- Warm Gold (`#A68966`) prints as medium brown/tan - good visibility - Warm Gold (`#A68966`) prints as medium brown/tan - good visibility
- Gold Light (`#C4A882`) prints as light tan - use for borders/accents only - Gold Light (`#C4A882`) prints as light tan - use for borders/accents only
- Ensure table borders are visible in grayscale - Ensure table borders are visible in grayscale

9
docs/stories/story-12.6-documentation-update.md
View File

@ -21,7 +21,7 @@
| Color Name | Hex | Usage | | Color Name | Hex | Usage |
|------------|-----|-------| |------------|-----|-------|
| Dark Charcoal | `#1B1D1A` | Header/Footer backgrounds | | Dark Forest Green | `#2D3624` | Header/Footer backgrounds |
| Warm Gold | `#A68966` | CTA buttons, links, accents | | Warm Gold | `#A68966` | CTA buttons, links, accents |
| Warm Cream | `#F4F1EA` | Main page background | | Warm Cream | `#F4F1EA` | Main page background |
| Forest Green | `#2D322A` | Headings, body text | | Forest Green | `#2D322A` | Headings, body text |
@ -29,6 +29,7 @@
| Olive Green | `#4A5D23` | Active states | | Olive Green | `#4A5D23` | Active states |
| Gold Hover | `#8A7555` | Button hover states | | Gold Hover | `#8A7555` | Button hover states |
| Gold Light | `#C4A882` | Light accents | | Gold Light | `#C4A882` | Light accents |
| Primary Light | `#3D4634` | Primary hover states |
### AC2: Update `CLAUDE.md` ### AC2: Update `CLAUDE.md`
@ -94,7 +95,7 @@
``` ```
Primary Colors: Primary Colors:
- Dark Charcoal: #1B1D1A (header/footer bg) - Dark Forest Green: #2D3624 (header/footer bg)
- Warm Gold: #A68966 (CTA, links) - Warm Gold: #A68966 (CTA, links)
- Warm Cream: #F4F1EA (page background) - Warm Cream: #F4F1EA (page background)
- Forest Green: #2D322A (text) - Forest Green: #2D322A (text)
@ -102,10 +103,10 @@ Primary Colors:
- Olive Green: #4A5D23 (active states) - Olive Green: #4A5D23 (active states)
Variants: Variants:
- Primary Light: #3D4634
- Gold Hover: #8A7555 - Gold Hover: #8A7555
- Gold Light: #C4A882 - Gold Light: #C4A882
- Olive Hover: #5A7030 - Olive Hover: #5A7030
- Primary Light: #2D322A
``` ```
### CLAUDE.md Design Requirements Update ### CLAUDE.md Design Requirements Update
@ -114,7 +115,7 @@ Replace the existing color scheme section with:
```markdown ```markdown
- **Color scheme:** - **Color scheme:**
- Dark Charcoal (#1B1D1A) - Header/Footer backgrounds - Dark Forest Green (#2D3624) - Header/Footer backgrounds
- Warm Gold (#A68966) - CTA buttons, links, accents - Warm Gold (#A68966) - CTA buttons, links, accents
- Warm Cream (#F4F1EA) - Main page background - Warm Cream (#F4F1EA) - Main page background
- Forest Green (#2D322A) - Headings, body text - Forest Green (#2D322A) - Headings, body text

142
resources/css/app.css
View File

@ -28,39 +28,45 @@
--font-size-4xl: 2.5rem; /* 40px - H1 */ --font-size-4xl: 2.5rem; /* 40px - H1 */
/* ========================================================================== /* ==========================================================================
LIBRA Brand Palette - Olive Green (Story 12.2) LIBRA Brand Palette - Dark Charcoal & Warm Gold (Story 12.2)
========================================================================== */ ========================================================================== */
/* Primary Olive Green Palette */ /* Primary Dark Forest Green Palette */
--color-primary: #8AB357; /* Olive Green - primary brand color */ --color-primary: #2D3624; /* Dark Forest Green - Header/Footer backgrounds */
--color-primary-hover: #7AA347; /* Darker Olive - hover states */ --color-primary-light: #3D4634; /* Lighter Forest Green - Primary hover state */
--color-primary-dark: #6A9337; /* Dark Olive - active/pressed states */
--color-primary-light: #B5D88A; /* Bright Olive - highlights */
/* Secondary/Accent Colors */ /* CTA Warm Gold */
--color-accent: #A5C87A; /* Light Olive - secondary accent */ --color-cta: #A68966; /* Warm Gold - CTA buttons, links, accents */
--color-accent-light: #C5D9A5; /* Pale Olive - subtle backgrounds */ --color-cta-hover: #8A7555; /* Darker Gold - Button hover state */
--color-cta-light: #C4A882; /* Light Gold - Light CTA accent */
/* Neutrals (unchanged) */ /* Active Olive Green */
--color-background: #E8E4DC; /* Off-White - light backgrounds */ --color-active: #4A5D23; /* Olive Green - Active states, language toggle */
--color-body: #1A1A1A; /* Deep Black - body text color */ --color-active-hover: #5A7030; /* Olive Hover - Active state hover */
/* Neutrals */
--color-background: #F4F1EA; /* Warm Cream - Main page background */
--color-text: #2D322A; /* Forest Green - Headings, body text */
--color-card: #FFFFFF; /* Pure White - Card backgrounds */
/* For text on dark backgrounds */
--color-off-white: #F4F1EA; /* Warm Cream */
/* Semantic Aliases - used by components */ /* Semantic Aliases - used by components */
--color-accent-content: #A5C87A; /* Light Olive */ --color-accent: var(--color-cta); /* Maps to Warm Gold */
--color-accent-foreground: #1A1A1A; /* Deep Black - text on accent backgrounds */ --color-accent-content: var(--color-cta); /* Maps to Warm Gold */
--color-accent-foreground: var(--color-text); /* Forest Green - text on accent backgrounds */
/* Brand Color Aliases (used in blade templates) */ --color-body: var(--color-text); /* Maps to Forest Green for body text */
--color-off-white: #E8E4DC; /* Off-White */
--color-warm-gray: var(--color-accent); /* Maps to Light Olive */
/* Backward Compatibility Aliases (legacy class names) */ /* Backward Compatibility Aliases (legacy class names) */
--color-navy: var(--color-primary); /* Maps to Olive Green */ --color-navy: var(--color-primary); /* Maps to Dark Charcoal */
--color-gold: var(--color-accent); /* Maps to Light Olive */ --color-gold: var(--color-cta); /* Maps to Warm Gold */
--color-gold-light: var(--color-accent-light); /* Maps to Pale Olive */ --color-gold-light: var(--color-cta-light); /* Maps to Light Gold */
--color-cream: var(--color-background); /* Maps to Off-White */ --color-cream: var(--color-background); /* Maps to Warm Cream */
--color-charcoal: var(--color-primary); /* Maps to Olive Green */ --color-charcoal: var(--color-primary); /* Maps to Dark Charcoal */
--color-warm-gray: var(--color-cta); /* Maps to Warm Gold */
/* Status Colors - unchanged per AC7 */ /* Status Colors - unchanged per AC6 */
--color-success: #27AE60; --color-success: #27AE60;
--color-danger: #E74C3C; --color-danger: #E74C3C;
--color-warning: #F39C12; --color-warning: #F39C12;
@ -87,12 +93,12 @@
/* ========================================================================== /* ==========================================================================
Logo Badge Styling (Story 12.2) Logo Badge Styling (Story 12.2)
Creates "seal/stamp" effect for logo on olive green backgrounds Creates "seal/stamp" effect for logo on Dark Charcoal backgrounds
========================================================================== */ ========================================================================== */
.logo-badge { .logo-badge {
border: 2px solid var(--color-body); border: 2px solid var(--color-text);
box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5); box-shadow: 4px 4px 6px rgba(45, 54, 36, 0.5);
} }
/* ========================================================================== /* ==========================================================================
@ -118,13 +124,13 @@ select[data-flux-control],
@apply border-body/30 rounded-md transition-colors text-body; @apply border-body/30 rounded-md transition-colors text-body;
} }
/* Focus states - Warm Gray border with subtle ring */ /* Focus states - Warm Gold border with subtle ring (AC4) */
input:focus[data-flux-control], input:focus[data-flux-control],
textarea:focus[data-flux-control], textarea:focus[data-flux-control],
select:focus[data-flux-control], select:focus[data-flux-control],
[data-flux-control] input:focus, [data-flux-control] input:focus,
[data-flux-select-button]:focus { [data-flux-select-button]:focus {
@apply outline-hidden border-accent ring-2 ring-accent/20; @apply outline-hidden border-cta ring-2 ring-cta/20;
} }
/* Textarea minimum height */ /* Textarea minimum height */
@ -132,16 +138,16 @@ textarea[data-flux-control] {
@apply min-h-[120px] resize-y; @apply min-h-[120px] resize-y;
} }
/* Checkbox styling - Light Olive accent when checked */ /* Checkbox styling - Warm Gold accent when checked (AC4) */
[data-flux-checkbox] input[type="checkbox"], [data-flux-checkbox] input[type="checkbox"],
input[type="checkbox"][data-flux-control] { input[type="checkbox"][data-flux-control] {
@apply w-5 h-5 rounded border-body/30 text-accent focus:ring-accent focus:ring-offset-0; @apply w-5 h-5 rounded border-body/30 text-cta focus:ring-cta focus:ring-offset-0;
} }
/* Radio styling - Light Olive accent when selected */ /* Radio styling - Warm Gold accent when selected (AC4) */
[data-flux-radio] input[type="radio"], [data-flux-radio] input[type="radio"],
input[type="radio"][data-flux-control] { input[type="radio"][data-flux-control] {
@apply w-5 h-5 border-body/30 text-accent focus:ring-accent focus:ring-offset-0; @apply w-5 h-5 border-body/30 text-cta focus:ring-cta focus:ring-offset-0;
} }
/* Error state styling for Flux fields */ /* Error state styling for Flux fields */
@ -183,36 +189,38 @@ input[type="radio"][data-flux-control] {
@apply size-4; @apply size-4;
} */ } */
/* Prose Brand styling for blog posts - Olive Green palette (Story 12.2) */ /* Prose Brand styling for blog posts - Dark Charcoal & Warm Gold (AC5, AC8) */
.prose-brand { .prose-brand {
--tw-prose-headings: var(--color-body); /* Deep Black */ --tw-prose-headings: var(--color-text); /* Forest Green */
--tw-prose-links: var(--color-primary); /* Olive Green */ --tw-prose-links: var(--color-cta); /* Warm Gold */
--tw-prose-bold: var(--color-body); /* Deep Black */ --tw-prose-bold: var(--color-text); /* Forest Green */
--tw-prose-body: var(--color-body); /* Deep Black */ --tw-prose-body: var(--color-text); /* Forest Green */
} }
.prose-brand a { .prose-brand a {
color: var(--color-cta); /* Warm Gold (AC5) */
text-decoration: underline; text-decoration: underline;
} }
.prose-brand a:hover { .prose-brand a:hover {
color: var(--color-primary-hover); /* Darker Olive */ color: var(--color-cta-hover); /* Darker Gold (AC5) */
} }
/* Backward compatibility alias for prose-navy */ /* Backward compatibility alias for prose-navy */
.prose-navy { .prose-navy {
--tw-prose-headings: var(--color-body); --tw-prose-headings: var(--color-text);
--tw-prose-links: var(--color-primary); --tw-prose-links: var(--color-cta);
--tw-prose-bold: var(--color-body); --tw-prose-bold: var(--color-text);
--tw-prose-body: var(--color-body); --tw-prose-body: var(--color-text);
} }
.prose-navy a { .prose-navy a {
color: var(--color-cta);
text-decoration: underline; text-decoration: underline;
} }
.prose-navy a:hover { .prose-navy a:hover {
color: var(--color-primary-hover); color: var(--color-cta-hover);
} }
/* Dynamic Font Selection based on language */ /* Dynamic Font Selection based on language */
@ -257,18 +265,18 @@ small, .text-sm {
Button Styling System (Story 9.4) Button Styling System (Story 9.4)
========================================================================== */ ========================================================================== */
/* Primary button - Olive Green background with Off-White text */ /* Primary button - Warm Gold background with White text (AC3) */
.btn-primary { .btn-primary {
@apply bg-primary text-off-white rounded-md px-6 py-3 font-semibold transition-colors; @apply bg-cta text-white rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-primary-hover; @apply hover:bg-cta-hover;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2; @apply focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2;
} }
/* Secondary button - Outlined with Light Olive border, Deep Black text */ /* Secondary button - Dark Charcoal border, Dark text (AC3) */
.btn-secondary { .btn-secondary {
@apply bg-transparent border-2 border-accent text-body rounded-md px-6 py-3 font-semibold transition-colors; @apply bg-transparent border-2 border-primary text-text rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-accent hover:text-body; @apply hover:bg-primary hover:text-off-white;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2; @apply focus:outline-none focus:ring-2 focus:ring-cta focus:ring-offset-2;
} }
/* Danger button - Red background */ /* Danger button - Red background */
@ -354,10 +362,10 @@ button.btn-danger:disabled {
Form Styling System (Story 9.5) Form Styling System (Story 9.5)
========================================================================== */ ========================================================================== */
/* Input field styling */ /* Input field styling - Warm Gold focus (AC4) */
.input-field { .input-field {
@apply w-full border border-body/30 rounded-md px-4 py-3 @apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20 focus:border-cta focus:ring-2 focus:ring-cta/20
transition-colors outline-none bg-white; transition-colors outline-none bg-white;
} }
@ -388,31 +396,31 @@ button.btn-danger:disabled {
@apply text-sm text-danger mt-1; @apply text-sm text-danger mt-1;
} }
/* Textarea specific styling */ /* Textarea specific styling - Warm Gold focus (AC4) */
.textarea-field { .textarea-field {
@apply w-full border border-body/30 rounded-md px-4 py-3 @apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20 focus:border-cta focus:ring-2 focus:ring-cta/20
transition-colors outline-none bg-white transition-colors outline-none bg-white
min-h-[120px] resize-y; min-h-[120px] resize-y;
} }
/* Select dropdown styling */ /* Select dropdown styling - Warm Gold focus (AC4) */
.select-field { .select-field {
@apply w-full border border-body/30 rounded-md px-4 py-3 @apply w-full border border-body/30 rounded-md px-4 py-3
focus:border-accent focus:ring-2 focus:ring-accent/20 focus:border-cta focus:ring-2 focus:ring-cta/20
transition-colors outline-none bg-white; transition-colors outline-none bg-white;
} }
/* Custom checkbox styling */ /* Custom checkbox styling - Warm Gold (AC4) */
.checkbox-custom { .checkbox-custom {
@apply w-5 h-5 rounded border-body/30 text-accent @apply w-5 h-5 rounded border-body/30 text-cta
focus:ring-accent focus:ring-offset-0; focus:ring-cta focus:ring-offset-0;
} }
/* Custom radio styling */ /* Custom radio styling - Warm Gold (AC4) */
.radio-custom { .radio-custom {
@apply w-5 h-5 border-body/30 text-accent @apply w-5 h-5 border-body/30 text-cta
focus:ring-accent focus:ring-offset-0; focus:ring-cta focus:ring-offset-0;
} }
/* Checkbox/Radio with error state */ /* Checkbox/Radio with error state */
@ -852,12 +860,12 @@ img, video, iframe {
WCAG 2.1 AA Compliance WCAG 2.1 AA Compliance
========================================================================== */ ========================================================================== */
/* Focus styles - visible Light Olive outline for keyboard navigation */ /* Focus styles - visible Warm Gold outline for keyboard navigation (AC4) */
:focus-visible { :focus-visible {
@apply outline-2 outline-offset-2 outline-accent; @apply outline-2 outline-offset-2 outline-cta;
} }
/* Skip link - hidden until focused, then appears at top-start */ /* Skip link - hidden until focused, Dark Charcoal bg with Warm Cream text */
.skip-link { .skip-link {
@apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 @apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4
focus:bg-primary focus:text-off-white focus:px-4 focus:py-2 focus:rounded-md focus:bg-primary focus:text-off-white focus:px-4 focus:py-2 focus:rounded-md