naser
/
libra
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
libra/docs/stories/story-12.2-core-css-theme-u...

7.2 KiB
Raw Blame History

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

AC2.1: Logo Badge Styling

Given the logo has a beige background that contrasts with olive green headers/footers When I add the logo badge styling Then the following CSS class is defined:

Class Properties
.logo-badge border: 2px solid #1A1A1A; box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);

This creates a "seal/stamp" effect for the logo on olive green backgrounds, making the beige background look intentional rather than mismatched.

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.

Logo Badge Styling

/* Badge styling for logo on olive backgrounds */
.logo-badge {
  border: 2px solid var(--color-text);
  box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
}

CSS Theme Block Example

@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)
  • Add .logo-badge class with border and shadow
  • 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)