diff --git a/docs/stories/story-12.2-core-css-theme-update.md b/docs/stories/story-12.2-core-css-theme-update.md index 2b63703..48b9238 100644 --- a/docs/stories/story-12.2-core-css-theme-update.md +++ b/docs/stories/story-12.2-core-css-theme-update.md @@ -190,21 +190,21 @@ Use WebAIM Contrast Checker to verify: ## 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 +- [x] Update `@theme` block with new olive green values +- [x] Add olive green variants (hover, dark, light) +- [x] Add `.logo-badge` class with border and shadow +- [x] Update backward-compatible aliases +- [x] Update `.btn-primary` styles +- [x] Update `.btn-secondary` styles +- [x] Update form focus states +- [x] Update link colors +- [x] Update `.prose-brand` class +- [x] Update skip-link focus styles +- [x] Update timeline-dot color +- [x] Update skeleton loader color +- [x] Verify status colors unchanged - [ ] Run contrast checker on all combinations -- [ ] Run `npm run build` successfully +- [x] Run `npm run build` successfully - [ ] Visual test in browser ## Estimation @@ -215,3 +215,41 @@ Use WebAIM Contrast Checker to verify: ## Dependencies - Can run in parallel with Story 12.1 (Logo Deployment) + +--- + +## Dev Agent Record + +### Agent Model Used +Claude Opus 4.5 + +### Status +In Progress - Pending Visual Test & Contrast Check + +### File List +| File | Action | +|------|--------| +| `resources/css/app.css` | Modified | + +### Change Log +| Date | Change | +|------|--------| +| 2026-01-04 | Updated @theme block with olive green palette (AC1, AC2) | +| 2026-01-04 | Added .logo-badge class for seal/stamp effect (AC2.1) | +| 2026-01-04 | Updated backward compatibility aliases (AC3) | +| 2026-01-04 | Updated .btn-primary and .btn-secondary styles (AC4) | +| 2026-01-04 | Form focus states auto-updated via CSS variables (AC5) | +| 2026-01-04 | Updated .prose-brand link colors (AC6, AC9) | +| 2026-01-04 | Verified status colors unchanged (AC7) | +| 2026-01-04 | Updated skip-link focus styles for olive palette | +| 2026-01-04 | Timeline-dot and skeleton loader auto-updated via CSS variables | + +### Completion Notes +- All CSS changes implemented in `resources/css/app.css` +- Colors use CSS variables for consistency across components +- Backward compatibility maintained via aliases (--color-charcoal, --color-warm-gray, --color-navy, --color-gold) +- Skip-link updated to use `bg-primary text-off-white` for better visibility +- Build successful: `npm run build` completed without errors (258.29 kB CSS output) + +### Debug Log References +None diff --git a/resources/css/app.css b/resources/css/app.css index f7320b0..6d30469 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -28,30 +28,37 @@ --font-size-4xl: 2.5rem; /* 40px - H1 */ /* ========================================================================== - NEW LIBRA Brand Palette (Story 10.1) + LIBRA Brand Palette - Olive Green (Story 12.2) ========================================================================== */ - /* Primary Brand Colors */ - --color-primary: #4A4A42; /* Charcoal - primary backgrounds, text */ - --color-accent: #C9C4BA; /* Warm Gray - secondary backgrounds, accents */ - --color-accent-light: #E8E4DC; /* Off-White - light backgrounds */ - --color-background: #E8E4DC; /* Off-White - light backgrounds */ - --color-text: #1A1A1A; /* Deep Black - logo artwork, headlines */ + /* Primary Olive Green Palette */ + --color-primary: #8AB357; /* Olive Green - primary brand color */ + --color-primary-hover: #7AA347; /* Darker Olive - hover states */ + --color-primary-dark: #6A9337; /* Dark Olive - active/pressed states */ + --color-primary-light: #B5D88A; /* Bright Olive - highlights */ + + /* Secondary/Accent Colors */ + --color-accent: #A5C87A; /* Light Olive - secondary accent */ + --color-accent-light: #C5D9A5; /* Pale Olive - subtle backgrounds */ + + /* Neutrals (unchanged) */ + --color-background: #E8E4DC; /* Off-White - light backgrounds */ + --color-text: #1A1A1A; /* Deep Black - text color */ /* Semantic Aliases - used by components */ - --color-accent-content: #C9C4BA; /* Warm Gray */ - --color-accent-foreground: #4A4A42; /* Charcoal */ + --color-accent-content: #A5C87A; /* Light Olive */ + --color-accent-foreground: #1A1A1A; /* Deep Black - text on accent backgrounds */ - /* New Brand Color Aliases (used in blade templates) */ - --color-off-white: var(--color-accent-light); /* #E8E4DC */ - --color-warm-gray: var(--color-accent); /* #C9C4BA */ + /* Brand Color Aliases (used in blade templates) */ + --color-off-white: #E8E4DC; /* Off-White */ + --color-warm-gray: var(--color-accent); /* Maps to Light Olive */ /* Backward Compatibility Aliases (legacy class names) */ - --color-navy: var(--color-primary); /* Maps to Charcoal */ - --color-gold: var(--color-accent); /* Maps to Warm Gray */ - --color-gold-light: var(--color-accent-light); /* Maps to Off-White */ + --color-navy: var(--color-primary); /* Maps to Olive Green */ + --color-gold: var(--color-accent); /* Maps to Light Olive */ + --color-gold-light: var(--color-accent-light); /* Maps to Pale Olive */ --color-cream: var(--color-background); /* Maps to Off-White */ - --color-charcoal: var(--color-primary); /* Maps to Charcoal #4A4A42 (fixed from --color-text) */ + --color-charcoal: var(--color-primary); /* Maps to Olive Green */ /* Status Colors - unchanged per AC7 */ --color-success: #27AE60; @@ -78,6 +85,16 @@ } } +/* ========================================================================== + Logo Badge Styling (Story 12.2) + Creates "seal/stamp" effect for logo on olive green backgrounds + ========================================================================== */ + +.logo-badge { + border: 2px solid var(--color-text); + box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5); +} + /* ========================================================================== Flux UI Form Component Styling (Story 9.5) ========================================================================== */ @@ -166,11 +183,11 @@ input[type="radio"][data-flux-control] { @apply size-4; } */ -/* Prose Brand styling for blog posts (formerly prose-navy) */ +/* Prose Brand styling for blog posts - Olive Green palette (Story 12.2) */ .prose-brand { - --tw-prose-headings: var(--color-primary); /* Charcoal */ - --tw-prose-links: var(--color-accent); /* Warm Gray */ - --tw-prose-bold: var(--color-primary); /* Charcoal */ + --tw-prose-headings: var(--color-text); /* Deep Black */ + --tw-prose-links: var(--color-primary); /* Olive Green */ + --tw-prose-bold: var(--color-text); /* Deep Black */ --tw-prose-body: var(--color-text); /* Deep Black */ } @@ -179,14 +196,14 @@ input[type="radio"][data-flux-control] { } .prose-brand a:hover { - color: var(--color-primary); + color: var(--color-primary-hover); /* Darker Olive */ } /* Backward compatibility alias for prose-navy */ .prose-navy { - --tw-prose-headings: var(--color-primary); - --tw-prose-links: var(--color-accent); - --tw-prose-bold: var(--color-primary); + --tw-prose-headings: var(--color-text); + --tw-prose-links: var(--color-primary); + --tw-prose-bold: var(--color-text); --tw-prose-body: var(--color-text); } @@ -195,7 +212,7 @@ input[type="radio"][data-flux-control] { } .prose-navy a:hover { - color: var(--color-primary); + color: var(--color-primary-hover); } /* Dynamic Font Selection based on language */ @@ -240,17 +257,17 @@ small, .text-sm { Button Styling System (Story 9.4) ========================================================================== */ -/* Primary button - Charcoal background with Off-White text */ +/* Primary button - Olive Green background with Off-White text */ .btn-primary { - @apply bg-primary text-accent-light rounded-md px-6 py-3 font-semibold transition-colors; - @apply hover:bg-primary/90; + @apply bg-primary text-off-white rounded-md px-6 py-3 font-semibold transition-colors; + @apply hover:bg-primary-hover; @apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2; } -/* Secondary button - Outlined with Warm Gray border, Charcoal text */ +/* Secondary button - Outlined with Light Olive border, Deep Black text */ .btn-secondary { - @apply bg-transparent border-2 border-accent text-primary rounded-md px-6 py-3 font-semibold transition-colors; - @apply hover:bg-accent hover:text-primary; + @apply bg-transparent border-2 border-accent text-text rounded-md px-6 py-3 font-semibold transition-colors; + @apply hover:bg-accent hover:text-text; @apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2; } @@ -834,7 +851,7 @@ img, video, iframe { WCAG 2.1 AA Compliance ========================================================================== */ -/* Focus styles - visible Warm Gray outline for keyboard navigation */ +/* Focus styles - visible Light Olive outline for keyboard navigation */ :focus-visible { @apply outline-2 outline-offset-2 outline-accent; } @@ -842,7 +859,7 @@ img, video, iframe { /* Skip link - hidden until focused, then appears at top-start */ .skip-link { @apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:start-4 - focus:bg-accent focus:text-primary 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 focus:font-semibold focus:z-[100]; }