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

complete story 10.1 with qa tests

Browse Source
This commit is contained in:
Naser Mansour
2026-01-03 03:21:09 +02:00
parent 19f6386532
commit e758458df1
4 changed files with 284 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+70 -48
View File
@@ -27,27 +27,32 @@
--font-size-3xl: 2rem; /* 32px - H2 */
--font-size-4xl: 2.5rem; /* 40px - H1 */
/* ==========================================================================
NEW LIBRA Brand Palette (Story 10.1)
========================================================================== */
/* Primary Brand Colors */
--color-navy: #0A1F44;
--color-gold: #D4AF37;
--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 */
/* Supporting Colors */
--color-gold-light: #F4E4B8;
--color-cream: #F9F7F4;
--color-charcoal: #2C3E50;
/* Semantic Aliases - used by components */
--color-accent-content: #C9C4BA; /* Warm Gray */
--color-accent-foreground: #4A4A42; /* Charcoal */
/* Status Colors */
/* 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-cream: var(--color-background); /* Maps to Off-White */
--color-charcoal: var(--color-text); /* Maps to Deep Black */
/* Status Colors - unchanged per AC7 */
--color-success: #27AE60;
--color-danger: #E74C3C;
--color-warning: #F39C12;
/* Semantic Aliases - used by components */
--color-primary: var(--color-navy);
--color-accent: var(--color-gold);
--color-accent-content: var(--color-gold);
--color-accent-foreground: var(--color-navy);
--color-background: var(--color-cream);
--color-text: var(--color-charcoal);
}
@layer theme {
@@ -92,13 +97,13 @@ select[data-flux-control],
@apply border-charcoal/30 rounded-md transition-colors;
}
/* Focus states - Gold border with subtle ring */
/* Focus states - Warm Gray border with subtle ring */
input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control],
[data-flux-control] input:focus,
[data-flux-select-button]:focus {
@apply outline-hidden border-gold ring-2 ring-gold/20;
@apply outline-hidden border-accent ring-2 ring-accent/20;
}
/* Textarea minimum height */
@@ -106,16 +111,16 @@ textarea[data-flux-control] {
@apply min-h-[120px] resize-y;
}
/* Checkbox styling - gold accent when checked */
/* Checkbox styling - Warm Gray accent when checked */
[data-flux-checkbox] input[type="checkbox"],
input[type="checkbox"][data-flux-control] {
@apply w-5 h-5 rounded border-charcoal/30 text-gold focus:ring-gold focus:ring-offset-0;
@apply w-5 h-5 rounded border-charcoal/30 text-accent focus:ring-accent focus:ring-offset-0;
}
/* Radio styling - gold accent when selected */
/* Radio styling - Warm Gray accent when selected */
[data-flux-radio] input[type="radio"],
input[type="radio"][data-flux-control] {
@apply w-5 h-5 border-charcoal/30 text-gold focus:ring-gold focus:ring-offset-0;
@apply w-5 h-5 border-charcoal/30 text-accent focus:ring-accent focus:ring-offset-0;
}
/* Error state styling for Flux fields */
@@ -157,12 +162,28 @@ input[type="radio"][data-flux-control] {
@apply size-4;
} */
/* Prose Navy styling for blog posts */
/* Prose Brand styling for blog posts (formerly prose-navy) */
.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-body: var(--color-text); /* Deep Black */
}
.prose-brand a {
text-decoration: underline;
}
.prose-brand a:hover {
color: var(--color-primary);
}
/* Backward compatibility alias for prose-navy */
.prose-navy {
--tw-prose-headings: var(--color-navy);
--tw-prose-links: var(--color-gold);
--tw-prose-bold: var(--color-navy);
--tw-prose-body: var(--color-charcoal);
--tw-prose-headings: var(--color-primary);
--tw-prose-links: var(--color-accent);
--tw-prose-bold: var(--color-primary);
--tw-prose-body: var(--color-text);
}
.prose-navy a {
@@ -170,7 +191,7 @@ input[type="radio"][data-flux-control] {
}
.prose-navy a:hover {
color: var(--color-gold-light);
color: var(--color-primary);
}
/* Dynamic Font Selection based on language */
@@ -215,18 +236,18 @@ small, .text-sm {
Button Styling System (Story 9.4)
========================================================================== */
/* Primary button - Gold background with Navy text */
/* Primary button - Charcoal background with Off-White text */
.btn-primary {
@apply bg-gold text-navy rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-gold-light;
@apply focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2;
@apply bg-primary text-accent-light rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-primary/90;
@apply focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2;
}
/* Secondary button - Outlined with Gold border */
/* Secondary button - Outlined with Warm Gray border, Charcoal text */
.btn-secondary {
@apply bg-transparent border-2 border-gold text-gold rounded-md px-6 py-3 font-semibold transition-colors;
@apply hover:bg-gold hover:text-navy;
@apply focus:outline-none focus:ring-2 focus:ring-gold focus:ring-offset-2;
@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 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2;
}
/* Danger button - Red background */
@@ -315,7 +336,7 @@ button.btn-danger:disabled {
/* Input field styling */
.input-field {
@apply w-full border border-charcoal/30 rounded-md px-4 py-3
focus:border-gold focus:ring-2 focus:ring-gold/20
focus:border-accent focus:ring-2 focus:ring-accent/20
transition-colors outline-none bg-white;
}
@@ -349,7 +370,7 @@ button.btn-danger:disabled {
/* Textarea specific styling */
.textarea-field {
@apply w-full border border-charcoal/30 rounded-md px-4 py-3
focus:border-gold focus:ring-2 focus:ring-gold/20
focus:border-accent focus:ring-2 focus:ring-accent/20
transition-colors outline-none bg-white
min-h-[120px] resize-y;
}
@@ -357,20 +378,20 @@ button.btn-danger:disabled {
/* Select dropdown styling */
.select-field {
@apply w-full border border-charcoal/30 rounded-md px-4 py-3
focus:border-gold focus:ring-2 focus:ring-gold/20
focus:border-accent focus:ring-2 focus:ring-accent/20
transition-colors outline-none bg-white;
}
/* Custom checkbox styling */
.checkbox-custom {
@apply w-5 h-5 rounded border-charcoal/30 text-gold
focus:ring-gold focus:ring-offset-0;
@apply w-5 h-5 rounded border-charcoal/30 text-accent
focus:ring-accent focus:ring-offset-0;
}
/* Custom radio styling */
.radio-custom {
@apply w-5 h-5 border-charcoal/30 text-gold
focus:ring-gold focus:ring-offset-0;
@apply w-5 h-5 border-charcoal/30 text-accent
focus:ring-accent focus:ring-offset-0;
}
/* Checkbox/Radio with error state */
@@ -634,7 +655,7 @@ img, video, iframe {
.timeline-dot {
@apply absolute start-2 sm:start-4;
@apply w-4 h-4 sm:w-5 sm:h-5;
@apply rounded-full bg-gold;
@apply rounded-full bg-accent;
@apply transform -translate-x-1/2;
}
@@ -728,7 +749,8 @@ img, video, iframe {
}
.card-hover:hover {
@apply -translate-y-0.5 shadow-card-hover;
@apply -translate-y-0.5;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Link color transition */
@@ -738,7 +760,7 @@ img, video, iframe {
/* Skeleton loader - pulse animation */
.skeleton {
@apply animate-pulse bg-charcoal/10 rounded;
@apply animate-pulse bg-accent/30 rounded;
}
/* Toast animation classes */
@@ -808,15 +830,15 @@ img, video, iframe {
WCAG 2.1 AA Compliance
========================================================================== */
/* Focus styles - visible gold outline for keyboard navigation */
/* Focus styles - visible Warm Gray outline for keyboard navigation */
:focus-visible {
@apply outline-2 outline-offset-2 outline-gold;
@apply outline-2 outline-offset-2 outline-accent;
}
/* 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-gold focus:text-navy focus:px-4 focus:py-2 focus:rounded-md
focus:bg-accent focus:text-primary focus:px-4 focus:py-2 focus:rounded-md
focus:font-semibold focus:z-[100];
}