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

update stories to impliment badge

This commit is contained in:
Naser Mansour 2026-01-04 00:22:19 +02:00
parent 8fce9dfddb
commit e0c47fcb54
3 changed files with 34 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/brand.md
View File

@ -83,6 +83,12 @@ Logo should not appear smaller than 40px in height for digital or 15mm for print
- May be reversed to light color on dark charcoal backgrounds
- Avoid busy or patterned backgrounds
### Badge Style (for colored backgrounds)
When the logo appears on olive green or other colored backgrounds (e.g., navigation, footer), apply badge styling to make the logo's beige background look intentional:
- Border: 2px solid Deep Black (#1A1A1A)
- Shadow: 4px 4px 6px rgba(26, 26, 26, 0.5)
- This creates a "seal/stamp" effect that frames the logo professionally
### Do Not
- Stretch or distort the logo
- Change the logo colors outside the defined palette

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

@ -37,6 +37,18 @@
| `--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
@ -134,6 +146,16 @@ Use WebAIM Contrast Checker to verify:
**Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead.
### Logo Badge Styling
```css
/* 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
```css
@ -170,6 +192,7 @@ Use WebAIM Contrast Checker to verify:
- [ ] 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

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

@ -18,6 +18,7 @@
- Hover states: Use darker olive (`hover:bg-primary-hover`)
- Mobile menu uses new olive colors
- Active states updated accordingly
- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
### AC2: Footer Component Updated
@ -28,6 +29,7 @@
- Text: Off-White for contrast
- Links: Light Olive with hover states
- Social icons: Appropriate contrast colors
- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
### AC3: Card Components Updated
@ -126,7 +128,7 @@
**Components:**
- `resources/views/components/navigation.blade.php`
- `resources/views/components/footer.blade.php`
- `resources/views/components/logo.blade.php`
- `resources/views/components/logo.blade.php` - Add `logo-badge` class for badge/seal effect
- `resources/views/components/language-toggle.blade.php`
- `resources/views/components/spinner.blade.php`
- `resources/views/components/toast.blade.php`
@ -182,6 +184,8 @@
- [ ] Update `navigation.blade.php`
- [ ] Update `footer.blade.php`
- [ ] Apply `.logo-badge` class to logo in navigation
- [ ] Apply `.logo-badge` class to logo in footer
- [ ] Update `language-toggle.blade.php`
- [ ] Update `spinner.blade.php`
- [ ] Update `toast.blade.php`