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

complete story 12.2

This commit is contained in:
Naser Mansour 2026-01-04 00:30:52 +02:00
parent e0c47fcb54
commit c855b7b159
2 changed files with 102 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -190,21 +190,21 @@ Use WebAIM Contrast Checker to verify:
## Dev Checklist ## Dev Checklist
- [ ] Update `@theme` block with new olive green values - [x] Update `@theme` block with new olive green values
- [ ] Add olive green variants (hover, dark, light) - [x] Add olive green variants (hover, dark, light)
- [ ] Add `.logo-badge` class with border and shadow - [x] Add `.logo-badge` class with border and shadow
- [ ] Update backward-compatible aliases - [x] Update backward-compatible aliases
- [ ] Update `.btn-primary` styles - [x] Update `.btn-primary` styles
- [ ] 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
- [ ] Update timeline-dot color - [x] Update timeline-dot color
- [ ] Update skeleton loader color - [x] Update skeleton loader color
- [ ] Verify status colors unchanged - [x] Verify status colors unchanged
- [ ] Run contrast checker on all combinations - [ ] 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
@ -215,3 +215,41 @@ Use WebAIM Contrast Checker to verify:
## Dependencies ## Dependencies
- Can run in parallel with Story 12.1 (Logo Deployment) - 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

81
resources/css/app.css
View File

@ -28,30 +28,37 @@
--font-size-4xl: 2.5rem; /* 40px - H1 */ --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 */ /* Primary Olive Green Palette */
--color-primary: #4A4A42; /* Charcoal - primary backgrounds, text */ --color-primary: #8AB357; /* Olive Green - primary brand color */
--color-accent: #C9C4BA; /* Warm Gray - secondary backgrounds, accents */ --color-primary-hover: #7AA347; /* Darker Olive - hover states */
--color-accent-light: #E8E4DC; /* Off-White - light backgrounds */ --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-background: #E8E4DC; /* Off-White - light backgrounds */
--color-text: #1A1A1A; /* Deep Black - logo artwork, headlines */ --color-text: #1A1A1A; /* Deep Black - text color */
/* Semantic Aliases - used by components */ /* Semantic Aliases - used by components */
--color-accent-content: #C9C4BA; /* Warm Gray */ --color-accent-content: #A5C87A; /* Light Olive */
--color-accent-foreground: #4A4A42; /* Charcoal */ --color-accent-foreground: #1A1A1A; /* Deep Black - text on accent backgrounds */
/* New Brand Color Aliases (used in blade templates) */ /* Brand Color Aliases (used in blade templates) */
--color-off-white: var(--color-accent-light); /* #E8E4DC */ --color-off-white: #E8E4DC; /* Off-White */
--color-warm-gray: var(--color-accent); /* #C9C4BA */ --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 Charcoal */ --color-navy: var(--color-primary); /* Maps to Olive Green */
--color-gold: var(--color-accent); /* Maps to Warm Gray */ --color-gold: var(--color-accent); /* Maps to Light Olive */
--color-gold-light: var(--color-accent-light); /* Maps to Off-White */ --color-gold-light: var(--color-accent-light); /* Maps to Pale Olive */
--color-cream: var(--color-background); /* Maps to Off-White */ --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 */ /* Status Colors - unchanged per AC7 */
--color-success: #27AE60; --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) Flux UI Form Component Styling (Story 9.5)
========================================================================== */ ========================================================================== */
@ -166,11 +183,11 @@ input[type="radio"][data-flux-control] {
@apply size-4; @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 { .prose-brand {
--tw-prose-headings: var(--color-primary); /* Charcoal */ --tw-prose-headings: var(--color-text); /* Deep Black */
--tw-prose-links: var(--color-accent); /* Warm Gray */ --tw-prose-links: var(--color-primary); /* Olive Green */
--tw-prose-bold: var(--color-primary); /* Charcoal */ --tw-prose-bold: var(--color-text); /* Deep Black */
--tw-prose-body: 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 { .prose-brand a:hover {
color: var(--color-primary); color: var(--color-primary-hover); /* Darker Olive */
} }
/* Backward compatibility alias for prose-navy */ /* Backward compatibility alias for prose-navy */
.prose-navy { .prose-navy {
--tw-prose-headings: var(--color-primary); --tw-prose-headings: var(--color-text);
--tw-prose-links: var(--color-accent); --tw-prose-links: var(--color-primary);
--tw-prose-bold: var(--color-primary); --tw-prose-bold: var(--color-text);
--tw-prose-body: var(--color-text); --tw-prose-body: var(--color-text);
} }
@ -195,7 +212,7 @@ input[type="radio"][data-flux-control] {
} }
.prose-navy a:hover { .prose-navy a:hover {
color: var(--color-primary); color: var(--color-primary-hover);
} }
/* Dynamic Font Selection based on language */ /* Dynamic Font Selection based on language */
@ -240,17 +257,17 @@ small, .text-sm {
Button Styling System (Story 9.4) 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 { .btn-primary {
@apply bg-primary text-accent-light rounded-md px-6 py-3 font-semibold transition-colors; @apply bg-primary text-off-white rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-primary/90; @apply hover:bg-primary-hover;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2; @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 { .btn-secondary {
@apply bg-transparent border-2 border-accent text-primary rounded-md px-6 py-3 font-semibold transition-colors; @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-primary; @apply hover:bg-accent hover:text-text;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2; @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 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 { :focus-visible {
@apply outline-2 outline-offset-2 outline-accent; @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 - hidden until focused, then appears at top-start */
.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-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]; focus:font-semibold focus:z-[100];
} }