feat: Implement comprehensive system-wide accessibility color adaptations
- Add complete CHORUS accessibility theme system with CSS custom properties - Implement functional visual aid buttons that apply themes globally - Create comprehensive Tailwind utility overrides for all vision types: • Protanopia: Ocean/Sand system for red-blind clarity • Deuteranopia: Purple/Blue enhanced contrast for green-blind • Tritanopia: Red/Warm earth tones for blue-blind users • Achromatopsia: High-contrast grayscale system - Integrate 3D logo material changes with accessibility themes - Add cross-component theme communication via custom events - Implement system-wide color adaptation covering backgrounds, text, borders - Add theme selection indicators with proper contrast rings - Support both light/dark mode variations for all accessibility themes - Maintain CHORUS brand integrity while maximizing visual clarity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
@@ -16,8 +16,8 @@ html {
|
||||
--color-nickel: #c1bfb1;
|
||||
|
||||
/* CHORUS Semantic Color Tokens - 8 Color System */
|
||||
--chorus-primary: #FFFFFF; /* carbon-950 */
|
||||
--chorus-secondary: #CCCCCC; /* mulberry-950 */
|
||||
--chorus-primary: #0b0213; /* carbon-950 */
|
||||
--chorus-secondary: #0b0213; /* mulberry-950 */
|
||||
--chorus-accent: #403730; /* walnut-900 */
|
||||
--chorus-neutral: #c1bfb1; /* nickel-500 */
|
||||
--chorus-info: #3a4654; /* ocean-900 */
|
||||
@@ -77,21 +77,126 @@ html {
|
||||
--accent-secondary: #c1bfb1; /* Nickel */
|
||||
}
|
||||
|
||||
/* Accessibility theme overrides - non-conflicting */
|
||||
/* CHORUS Accessibility Theme System - Complete Color Adaptations */
|
||||
|
||||
/* Protanopia (Red-blind) - Ocean/Sand adaptations for maximum clarity */
|
||||
[data-theme="protanopia"] {
|
||||
--color-ring-primary: #1e40af; /* Blue-800 for logo materials only */
|
||||
/* Logo material override */
|
||||
--color-ring-primary: #1e40af; /* Blue-800 */
|
||||
|
||||
/* Primary brand colors adapted for red-blindness */
|
||||
--chorus-primary: #3a4654; /* ocean-900 replaces carbon */
|
||||
--chorus-secondary: #3a4654; /* ocean-900 replaces mulberry */
|
||||
--chorus-accent: #6a5c46; /* sand-900 warm neutral */
|
||||
--chorus-neutral: #c1bfb1; /* nickel-500 unchanged */
|
||||
--chorus-info: #1e40af; /* ocean-800 enhanced */
|
||||
--chorus-success: #6a5c46; /* sand-900 replaces eucalyptus */
|
||||
--chorus-warning: #D0C9BF; /* sand-400 enhanced */
|
||||
--chorus-danger: #4a5867; /* ocean-800 replaces coral */
|
||||
|
||||
/* Semantic color reassignments */
|
||||
--accent-primary: #3a4654; /* Ocean replaces Mulberry */
|
||||
--accent-secondary: #6a5c46; /* Sand replaces Walnut */
|
||||
--accent-system: #1e40af; /* Enhanced Ocean blue */
|
||||
}
|
||||
|
||||
/* Deuteranopia (Green-blind) - Blue/Yellow enhanced contrast */
|
||||
[data-theme="deuteranopia"] {
|
||||
--color-ring-primary: #6b21a8; /* Purple-800 for logo materials only */
|
||||
/* Logo material override */
|
||||
--color-ring-primary: #6b21a8; /* Purple-800 */
|
||||
|
||||
/* Primary brand colors adapted for green-blindness */
|
||||
--chorus-primary: #0b0213; /* mulberry-950 enhanced */
|
||||
--chorus-secondary: #6b21a8; /* purple-800 distinct */
|
||||
--chorus-accent: #1e40af; /* blue-800 replaces walnut */
|
||||
--chorus-neutral: #c1bfb1; /* nickel-500 unchanged */
|
||||
--chorus-info: #1e40af; /* blue-800 enhanced */
|
||||
--chorus-success: #6b21a8; /* purple-800 replaces eucalyptus */
|
||||
--chorus-warning: #F1F0EF; /* sand-100 high contrast */
|
||||
--chorus-danger: #991b1b; /* red-800 enhanced */
|
||||
|
||||
/* Semantic color reassignments */
|
||||
--accent-primary: #6b21a8; /* Purple primary */
|
||||
--accent-secondary: #1e40af; /* Blue secondary */
|
||||
--accent-system: #991b1b; /* Red system alerts */
|
||||
}
|
||||
|
||||
/* Tritanopia (Blue-blind) - Coral/Eucalyptus substitutions */
|
||||
[data-theme="tritanopia"] {
|
||||
--color-ring-primary: #991b1b; /* Red-800 for logo materials only */
|
||||
/* Logo material override */
|
||||
--color-ring-primary: #991b1b; /* Red-800 */
|
||||
|
||||
/* Primary brand colors adapted for blue-blindness */
|
||||
--chorus-primary: #000000; /* carbon-950 unchanged */
|
||||
--chorus-secondary: #403730; /* walnut-900 enhanced */
|
||||
--chorus-accent: #991b1b; /* red-800 replaces blue elements */
|
||||
--chorus-neutral: #c1bfb1; /* nickel-500 unchanged */
|
||||
--chorus-info: #991b1b; /* red-800 replaces ocean */
|
||||
--chorus-success: #6a5c46; /* sand-900 natural green replacement */
|
||||
--chorus-warning: #D0C9BF; /* sand-400 warm warning */
|
||||
--chorus-danger: #403730; /* walnut-900 dark contrast */
|
||||
|
||||
/* Semantic color reassignments */
|
||||
--accent-primary: #991b1b; /* Red replaces blue elements */
|
||||
--accent-secondary: #6a5c46; /* Sand warm accent */
|
||||
--accent-system: #403730; /* Walnut system elements */
|
||||
}
|
||||
|
||||
/* Achromatopsia (Complete color blindness) - High contrast grayscale only */
|
||||
[data-theme="achromatopsia"] {
|
||||
--color-ring-primary: #374151; /* Gray-700 for logo materials only */
|
||||
/* Logo material override */
|
||||
--color-ring-primary: #374151; /* Gray-700 */
|
||||
|
||||
/* Complete grayscale adaptation */
|
||||
--chorus-primary: #000000; /* Pure black */
|
||||
--chorus-secondary: #1a1a1a; /* Carbon-800 */
|
||||
--chorus-accent: #666666; /* Mid gray */
|
||||
--chorus-neutral: #808080; /* Neutral mid-gray */
|
||||
--chorus-info: #374151; /* Gray-700 */
|
||||
--chorus-success: #2a2a2a; /* Dark gray for success */
|
||||
--chorus-warning: #a0a0a0; /* Light gray for warnings */
|
||||
--chorus-danger: #1a1a1a; /* Very dark gray for danger */
|
||||
|
||||
/* High contrast grayscale system */
|
||||
--accent-primary: #000000; /* Pure black */
|
||||
--accent-secondary: #666666; /* Mid-gray */
|
||||
--accent-system: #374151; /* System gray */
|
||||
|
||||
/* Enhanced contrast overrides for all text and UI elements */
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f0f0f0;
|
||||
--bg-tertiary: #e0e0e0;
|
||||
--bg-accent: #c0c0c0;
|
||||
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #1a1a1a;
|
||||
--text-tertiary: #333333;
|
||||
--text-subtle: #666666;
|
||||
--text-ghost: #999999;
|
||||
|
||||
--border-invisible: #f8f8f8;
|
||||
--border-subtle: #e0e0e0;
|
||||
--border-defined: #c0c0c0;
|
||||
--border-emphasis: #808080;
|
||||
}
|
||||
|
||||
/* Dark mode overrides for accessibility themes */
|
||||
.dark[data-theme="achromatopsia"] {
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: #1a1a1a;
|
||||
--bg-tertiary: #2a2a2a;
|
||||
--bg-accent: #374151;
|
||||
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #e0e0e0;
|
||||
--text-tertiary: #c0c0c0;
|
||||
--text-subtle: #a0a0a0;
|
||||
--text-ghost: #808080;
|
||||
|
||||
--border-invisible: #1a1a1a;
|
||||
--border-subtle: #2a2a2a;
|
||||
--border-defined: #374151;
|
||||
--border-emphasis: #666666;
|
||||
}
|
||||
|
||||
/* CHORUS 8-Color Accessibility System */
|
||||
@@ -251,19 +356,19 @@ progress::-webkit-progress-bar {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
/* Harmony Green Progress */
|
||||
.progress-harmony::-webkit-progress-value {
|
||||
/* eucalyptus Green Progress */
|
||||
.progress-eucalyptus::-webkit-progress-value {
|
||||
background-color: #515d54;
|
||||
border-radius: 0;
|
||||
}
|
||||
.dark .progress-harmony::-webkit-progress-value {
|
||||
.dark .progress-eucalyptus::-webkit-progress-value {
|
||||
background-color: #7a8a7f;
|
||||
}
|
||||
.progress-harmony::-moz-progress-bar {
|
||||
.progress-eucalyptus::-moz-progress-bar {
|
||||
background-color: #515d54;
|
||||
border-radius: 0;
|
||||
}
|
||||
.dark .progress-harmony::-moz-progress-bar {
|
||||
.dark .progress-eucalyptus::-moz-progress-bar {
|
||||
background-color: #7a8a7f;
|
||||
}
|
||||
|
||||
@@ -307,13 +412,12 @@ canvas.chorus-logo {
|
||||
|
||||
|
||||
/* Warnings */
|
||||
.info img,
|
||||
.note img,
|
||||
.caution img,
|
||||
.security-warning img,
|
||||
.error img,
|
||||
.critical img,
|
||||
img.icon {
|
||||
.info img.icon,
|
||||
.note img.icon,
|
||||
.caution img.icon,
|
||||
.security-warning img.icon,
|
||||
.error img.icon,
|
||||
.critical img.icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
vertical-align: middle;
|
||||
@@ -674,33 +778,69 @@ pre[class*="language-"] {
|
||||
--syntax-property: var(--chorus-info);
|
||||
}
|
||||
|
||||
/* Primary Navigation Dropdown Menu System */
|
||||
.primary-nav ul,
|
||||
.primary-nav ol,
|
||||
.secondary-nav ul,
|
||||
.secondary-nav ol,
|
||||
.horizontal-menu,
|
||||
.primary-nav li,
|
||||
.primary-nav li div,
|
||||
.secondary-nav li {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.primary-nav {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.horizontal-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
.horizontal-menu li {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
.horizontal-menu img.icon {
|
||||
aspect-ratio: 1.0; /* 1:1 */
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
}
|
||||
|
||||
.horizontal-menu div,
|
||||
.horizontal-menu button {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1.5rem;
|
||||
transition: all 200ms ease-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Ensure nested divs within navigation maintain alignment */
|
||||
.horizontal-menu li > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Target the specific div containing icons and text */
|
||||
.horizontal-menu .flex.items-center {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.5rem !important;
|
||||
}
|
||||
|
||||
.horizontal-menu li:hover,
|
||||
.horizontal-menu div:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dark .menu-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
.horizontal-menu .dark li:hover {
|
||||
background-color: var(--bg-mulberry-700);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@@ -711,54 +851,77 @@ pre[class*="language-"] {
|
||||
left: 0;
|
||||
min-width: 220px;
|
||||
background: white;
|
||||
border: 1px solid var(--border-emphasis);
|
||||
border-radius: 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-8px);
|
||||
transition: all 200ms ease-out;
|
||||
z-index: 1100;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.dark .flyout-menu {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-emphasis);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Show dropdown on hover */
|
||||
.menu-item:hover .flyout-menu {
|
||||
opacity: 1;
|
||||
.primary-nav li:hover .flyout-menu {
|
||||
opacity: 0.9;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Flyout menu items */
|
||||
.flyout-menu .menu-item {
|
||||
.flyout-menu ul {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.flyout-menu .menu-item:hover {
|
||||
background-color: var(--bg-accent);
|
||||
}
|
||||
|
||||
.dark .flyout-menu .menu-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
.flyout-menu li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
/* Flyout menu links */
|
||||
.flyout-menu a {
|
||||
display: block;
|
||||
color: var(--text-primary);
|
||||
padding: 0.5rem;
|
||||
text-decoration: none;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
.horizontal-menu img.icon
|
||||
.primary-nav img.icon {
|
||||
/* max-width: 1.5rem; */
|
||||
/* max-height: 1.5rem; */
|
||||
aspect-ratio: 1.0;
|
||||
top: 0 !important; /* Adjust vertical alignment */
|
||||
}
|
||||
.flyout-menu a img.icon {
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: middle;
|
||||
filter: invert(17%) sepia(8%) saturate(1974%) hue-rotate(206deg) brightness(107%) contrast(86%);
|
||||
}
|
||||
|
||||
.dark .flyout-menu a img.icon {
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: middle;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.flyout-menu a:hover {
|
||||
color: var(--accent-primary);
|
||||
@@ -766,7 +929,7 @@ pre[class*="language-"] {
|
||||
}
|
||||
|
||||
/* Ensure flyout stays visible when hovering over it */
|
||||
.menu-item:hover .flyout-menu,
|
||||
li:hover .flyout-menu,
|
||||
.flyout-menu:hover {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
@@ -786,4 +949,179 @@ article:not(button),
|
||||
aside:not(button),
|
||||
nav:not(button) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
nav button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.breadcrumbs ol,
|
||||
.breadcrumbs li
|
||||
.breadcrumbs nav.flex,
|
||||
.breadcrumbs nav.flex.items-center {
|
||||
margin: 0 !important;
|
||||
padding: 0.25rem;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
.logo-group-circular {
|
||||
position: relative;
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
.logo-group-circular div * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.logo-group-circular h4.text-h4.font-logo {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
text-align: center !important;
|
||||
/* vertical-align: middle; */
|
||||
padding-top: 5.65rem;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* CHORUS Comprehensive Color System Adaptations for Maximum Clarity */
|
||||
|
||||
/* Protanopia (Red-blind) Theme Overrides - Ocean/Sand system for maximum clarity */
|
||||
[data-theme="protanopia"] {
|
||||
/* Background adaptations - replace problematic red/purple with blue/sand */
|
||||
.bg-mulberry-950 { background-color: #3a4654 !important; }
|
||||
.bg-mulberry-900 { background-color: #4a5867 !important; }
|
||||
.bg-mulberry-800 { background-color: #5a6c80 !important; }
|
||||
.bg-coral-900, .bg-coral-800, .bg-coral-700 { background-color: #4a5867 !important; }
|
||||
.bg-eucalyptus-900, .bg-eucalyptus-800, .bg-eucalyptus-700 { background-color: #6a5c46 !important; }
|
||||
|
||||
/* Text color adaptations */
|
||||
.text-mulberry-950, .text-mulberry-900 { color: #3a4654 !important; }
|
||||
.text-mulberry-300, .text-mulberry-200 { color: #9bb6d6 !important; }
|
||||
.text-coral-900, .text-coral-800 { color: #4a5867 !important; }
|
||||
.text-eucalyptus-900, .text-eucalyptus-800 { color: #6a5c46 !important; }
|
||||
|
||||
/* Border adaptations */
|
||||
.border-mulberry-800, .border-mulberry-700 { border-color: #5a6c80 !important; }
|
||||
.border-coral-400, .border-coral-500 { border-color: #4a5867 !important; }
|
||||
.border-eucalyptus-400, .border-eucalyptus-500 { border-color: #6a5c46 !important; }
|
||||
|
||||
/* Dark mode specific overrides */
|
||||
.dark .bg-mulberry-950 { background-color: #3a4654 !important; }
|
||||
.dark .text-mulberry-300 { color: #abc9e8 !important; }
|
||||
}
|
||||
|
||||
/* Deuteranopia (Green-blind) Theme Overrides - Purple/Blue enhanced contrast */
|
||||
[data-theme="deuteranopia"] {
|
||||
/* Background adaptations - replace green with purple/blue */
|
||||
.bg-eucalyptus-950, .bg-eucalyptus-900, .bg-eucalyptus-800 { background-color: #6b21a8 !important; }
|
||||
.bg-ocean-950, .bg-ocean-900, .bg-ocean-800 { background-color: #1e40af !important; }
|
||||
.bg-walnut-900, .bg-walnut-800 { background-color: #1e40af !important; }
|
||||
|
||||
/* Text color adaptations */
|
||||
.text-eucalyptus-900, .text-eucalyptus-800 { color: #6b21a8 !important; }
|
||||
.text-ocean-900, .text-ocean-800 { color: #1e40af !important; }
|
||||
.text-eucalyptus-100, .text-eucalyptus-200 { color: #d4a5ff !important; }
|
||||
|
||||
/* Border adaptations */
|
||||
.border-eucalyptus-400, .border-eucalyptus-500 { border-color: #6b21a8 !important; }
|
||||
.border-ocean-400, .border-ocean-500 { border-color: #1e40af !important; }
|
||||
|
||||
/* Dark mode specific overrides */
|
||||
.dark .bg-eucalyptus-900 { background-color: #6b21a8 !important; }
|
||||
.dark .text-eucalyptus-300 { color: #d4a5ff !important; }
|
||||
}
|
||||
|
||||
/* Tritanopia (Blue-blind) Theme Overrides - Red/Warm earth tones */
|
||||
[data-theme="tritanopia"] {
|
||||
/* Background adaptations - replace blue with red/warm tones */
|
||||
.bg-ocean-950, .bg-ocean-900, .bg-ocean-800 { background-color: #991b1b !important; }
|
||||
.bg-mulberry-950, .bg-mulberry-900 { background-color: #403730 !important; }
|
||||
.bg-coral-900, .bg-coral-800 { background-color: #403730 !important; }
|
||||
|
||||
/* Text color adaptations */
|
||||
.text-ocean-900, .text-ocean-800 { color: #991b1b !important; }
|
||||
.text-ocean-100, .text-ocean-200 { color: #F1F0EF !important; }
|
||||
.text-mulberry-300, .text-mulberry-200 { color: #c5bcaf !important; }
|
||||
|
||||
/* Border adaptations */
|
||||
.border-ocean-400, .border-ocean-500 { border-color: #991b1b !important; }
|
||||
.border-mulberry-800, .border-mulberry-700 { border-color: #403730 !important; }
|
||||
|
||||
/* Dark mode specific overrides */
|
||||
.dark .bg-ocean-900 { background-color: #991b1b !important; }
|
||||
.dark .text-ocean-300 { color: #fca5a5 !important; }
|
||||
}
|
||||
|
||||
/* Achromatopsia (Complete color blindness) Theme Overrides - High contrast grayscale */
|
||||
[data-theme="achromatopsia"] {
|
||||
/* Force all backgrounds to high-contrast grayscale */
|
||||
.bg-mulberry-950, .bg-carbon-950, .bg-ocean-950, .bg-eucalyptus-950, .bg-coral-950, .bg-sand-950 { background-color: #000000 !important; }
|
||||
.bg-mulberry-900, .bg-carbon-900, .bg-ocean-900, .bg-eucalyptus-900, .bg-coral-900, .bg-sand-900 { background-color: #1a1a1a !important; }
|
||||
.bg-mulberry-800, .bg-carbon-800, .bg-ocean-800, .bg-eucalyptus-800, .bg-coral-800, .bg-sand-800 { background-color: #2a2a2a !important; }
|
||||
.bg-mulberry-700, .bg-carbon-700, .bg-ocean-700, .bg-eucalyptus-700, .bg-coral-700, .bg-sand-700 { background-color: #374151 !important; }
|
||||
.bg-mulberry-600, .bg-carbon-600, .bg-ocean-600, .bg-eucalyptus-600, .bg-coral-600, .bg-sand-600 { background-color: #4b5563 !important; }
|
||||
.bg-mulberry-500, .bg-carbon-500, .bg-ocean-500, .bg-eucalyptus-500, .bg-coral-500, .bg-sand-500 { background-color: #6b7280 !important; }
|
||||
.bg-mulberry-400, .bg-carbon-400, .bg-ocean-400, .bg-eucalyptus-400, .bg-coral-400, .bg-sand-400 { background-color: #9ca3af !important; }
|
||||
.bg-mulberry-300, .bg-carbon-300, .bg-ocean-300, .bg-eucalyptus-300, .bg-coral-300, .bg-sand-300 { background-color: #d1d5db !important; }
|
||||
.bg-mulberry-200, .bg-carbon-200, .bg-ocean-200, .bg-eucalyptus-200, .bg-coral-200, .bg-sand-200 { background-color: #e5e7eb !important; }
|
||||
.bg-mulberry-100, .bg-carbon-100, .bg-ocean-100, .bg-eucalyptus-100, .bg-coral-100, .bg-sand-100 { background-color: #f3f4f6 !important; }
|
||||
.bg-mulberry-50, .bg-carbon-50, .bg-ocean-50, .bg-eucalyptus-50, .bg-coral-50, .bg-sand-50 { background-color: #f9fafb !important; }
|
||||
|
||||
/* Force all text colors to high contrast grayscale */
|
||||
.text-mulberry-950, .text-carbon-950, .text-ocean-900, .text-eucalyptus-900, .text-coral-900, .text-sand-900 { color: #000000 !important; }
|
||||
.text-mulberry-900, .text-carbon-900, .text-ocean-800, .text-eucalyptus-800, .text-coral-800, .text-sand-800 { color: #111827 !important; }
|
||||
.text-mulberry-800, .text-carbon-800, .text-ocean-700, .text-eucalyptus-700, .text-coral-700, .text-sand-700 { color: #1f2937 !important; }
|
||||
.text-mulberry-700, .text-carbon-700, .text-ocean-600, .text-eucalyptus-600, .text-coral-600, .text-sand-600 { color: #374151 !important; }
|
||||
.text-mulberry-600, .text-carbon-600, .text-ocean-500, .text-eucalyptus-500, .text-coral-500, .text-sand-500 { color: #4b5563 !important; }
|
||||
.text-mulberry-500, .text-carbon-500, .text-ocean-400, .text-eucalyptus-400, .text-coral-400, .text-sand-400 { color: #6b7280 !important; }
|
||||
.text-mulberry-400, .text-carbon-400, .text-ocean-300, .text-eucalyptus-300, .text-coral-300, .text-sand-300 { color: #9ca3af !important; }
|
||||
.text-mulberry-300, .text-carbon-300, .text-ocean-200, .text-eucalyptus-200, .text-coral-200, .text-sand-200 { color: #d1d5db !important; }
|
||||
.text-mulberry-200, .text-carbon-200, .text-ocean-100, .text-eucalyptus-100, .text-coral-100, .text-sand-100 { color: #e5e7eb !important; }
|
||||
.text-mulberry-100, .text-carbon-100, .text-ocean-50, .text-eucalyptus-50, .text-coral-50, .text-sand-50 { color: #f3f4f6 !important; }
|
||||
|
||||
/* Force all borders to grayscale */
|
||||
.border-mulberry-800, .border-ocean-400, .border-eucalyptus-400, .border-coral-400, .border-sand-400 { border-color: #6b7280 !important; }
|
||||
.border-mulberry-700, .border-ocean-500, .border-eucalyptus-500, .border-coral-500, .border-sand-500 { border-color: #9ca3af !important; }
|
||||
.border-mulberry-600, .border-ocean-600, .border-eucalyptus-600, .border-coral-600, .border-sand-600 { border-color: #d1d5db !important; }
|
||||
.border-nickel-200, .border-carbon-300 { border-color: #e5e7eb !important; }
|
||||
|
||||
/* Dark mode specific overrides */
|
||||
&.dark .text-white, &.dark .text-mulberry-100, &.dark .text-ocean-100, &.dark .text-eucalyptus-100, &.dark .text-coral-100, &.dark .text-sand-100 { color: #ffffff !important; }
|
||||
&.dark .text-mulberry-300, &.dark .text-ocean-300, &.dark .text-eucalyptus-300, &.dark .text-coral-300, &.dark .text-sand-300 { color: #d1d5db !important; }
|
||||
&.dark .bg-white { background-color: #ffffff !important; }
|
||||
}
|
||||
|
||||
/* Enhanced contrast for accessibility theme selection indicators */
|
||||
[data-theme="protanopia"] .ring-ocean-500 { box-shadow: 0 0 0 2px #1e40af !important; }
|
||||
[data-theme="deuteranopia"] .ring-eucalyptus-500 { box-shadow: 0 0 0 2px #6b21a8 !important; }
|
||||
[data-theme="tritanopia"] .ring-coral-500 { box-shadow: 0 0 0 2px #991b1b !important; }
|
||||
[data-theme="achromatopsia"] .ring-nickel-500 { box-shadow: 0 0 0 2px #6b7280 !important; }
|
||||
|
||||
/* Mobile header clearance - ensure content is not hidden behind fixed header */
|
||||
@media (max-width: 1023px) {
|
||||
/* Add extra top padding on mobile to clear the fixed header */
|
||||
main,
|
||||
/* section:first-child, */
|
||||
.pt-chorus-xl,
|
||||
.pt-chorus-xxl {
|
||||
padding-top: calc(3.052rem + 70px) !important;
|
||||
}
|
||||
|
||||
/* Specific targeting for pages that use md:pt-chorus-xxl */
|
||||
.md\:pt-chorus-xxl {
|
||||
padding-top: calc(3.052rem + 70px) !important;
|
||||
}
|
||||
|
||||
/* Target divs with top padding classes */
|
||||
div.pt-chorus-xl,
|
||||
div.pt-chorus-xxl {
|
||||
padding-top: calc(3.052rem + 70px) !important;
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
|
||||
export default function BottomDock() {
|
||||
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
|
||||
const [showVisualAid, setShowVisualAid] = useState(false);
|
||||
const [accessibilityTheme, setAccessibilityTheme] = useState<string>('default');
|
||||
|
||||
useEffect(() => {
|
||||
// Check initial theme
|
||||
@@ -23,10 +24,30 @@ export default function BottomDock() {
|
||||
}
|
||||
};
|
||||
|
||||
const applyAccessibilityTheme = (themeType: string) => {
|
||||
// Remove existing accessibility themes
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
document.documentElement.removeAttribute('data-accessibility');
|
||||
|
||||
// Apply new theme
|
||||
if (themeType !== 'default') {
|
||||
document.documentElement.setAttribute('data-theme', themeType);
|
||||
document.documentElement.setAttribute('data-accessibility', themeType);
|
||||
}
|
||||
|
||||
setAccessibilityTheme(themeType);
|
||||
setShowVisualAid(false); // Close modal after selection
|
||||
|
||||
// Dispatch custom event to notify ThreeLogo components
|
||||
window.dispatchEvent(new CustomEvent('accessibilityThemeChanged', {
|
||||
detail: { theme: themeType }
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Bottom Dock */}
|
||||
<div className="fixed inset-x-0 bottom-0 z-40 hidden items-center justify-between gap-chorus-md border-t border-nickel-200 bg-white/80 p-chorus-md backdrop-blur md:flex dark:border-mulberry-800 dark:bg-mulberry-950/80">
|
||||
<div className="fixed inset-x-0 bottom-0 z-40 hidden items-center p-chorus-sm justify-between gap-chorus-md border-t border-nickel-200 bg-white/80 p-chorus-md backdrop-blur md:flex dark:border-mulberry-800 dark:bg-mulberry-950/80">
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
{/* Theme Toggle */}
|
||||
<button
|
||||
@@ -61,7 +82,7 @@ export default function BottomDock() {
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm text-sm">
|
||||
<p className="text-center text-sm text-carbon-500 dark:text-gray-400">
|
||||
<p className="text-center text-xs text-carbon-500 dark:text-gray-400">
|
||||
© 2025 CHORUS Services. Sophisticated orchestration for enterprise AI.
|
||||
</p>
|
||||
</div>
|
||||
@@ -69,8 +90,8 @@ export default function BottomDock() {
|
||||
|
||||
{/* Visual Aid Modal Dialog */}
|
||||
{showVisualAid && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="relative bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 max-w-lg w-full mx-4 p-chorus-lg shadow-xl">
|
||||
<div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/50 backdrop-blur-sm p-4 pt-24">
|
||||
<div className="relative bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 max-w-lg w-full max-h-[calc(100vh-8rem)] overflow-y-auto p-chorus-lg shadow-xl">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between mb-chorus-md">
|
||||
<h3 className="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3>
|
||||
@@ -97,25 +118,40 @@ export default function BottomDock() {
|
||||
8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility
|
||||
</p>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Default Vision</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Standard CHORUS 8-color system</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('default')}
|
||||
className={`p-chorus-sm text-left border-2 border-carbon-300 bg-carbon-50 hover:bg-carbon-100 dark:border-carbon-600 dark:bg-carbon-900 dark:hover:bg-carbon-800 transition-colors ${accessibilityTheme === 'default' ? 'ring-2 ring-carbon-500' : ''}`}
|
||||
>
|
||||
<strong className="text-carbon-950 dark:text-white">Default Vision</strong><br />
|
||||
<small className="text-carbon-700 dark:text-carbon-300">Standard CHORUS 8-color system</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Protanopia (Red-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Ocean/Sand adaptations</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('protanopia')}
|
||||
className={`p-chorus-sm text-left border-2 border-ocean-400 bg-ocean-50 hover:bg-ocean-100 dark:border-ocean-600 dark:bg-ocean-900 dark:hover:bg-ocean-800 transition-colors ${accessibilityTheme === 'protanopia' ? 'ring-2 ring-ocean-500' : ''}`}
|
||||
>
|
||||
<strong className="text-ocean-900 dark:text-ocean-100">Protanopia (Red-blind)</strong><br />
|
||||
<small className="text-ocean-700 dark:text-ocean-300">Ocean/Sand adaptations</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Deuteranopia (Green-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Blue/Yellow enhanced contrast</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('deuteranopia')}
|
||||
className={`p-chorus-sm text-left border-2 border-eucalyptus-400 bg-eucalyptus-50 hover:bg-eucalyptus-100 dark:border-eucalyptus-600 dark:bg-eucalyptus-900 dark:hover:bg-eucalyptus-800 transition-colors ${accessibilityTheme === 'deuteranopia' ? 'ring-2 ring-eucalyptus-500' : ''}`}
|
||||
>
|
||||
<strong className="text-eucalyptus-900 dark:text-eucalyptus-100">Deuteranopia (Green-blind)</strong><br />
|
||||
<small className="text-eucalyptus-700 dark:text-eucalyptus-300">Blue/Yellow enhanced contrast</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Tritanopia (Blue-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Coral/Eucalyptus substitutions</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('tritanopia')}
|
||||
className={`p-chorus-sm text-left border-2 border-coral-400 bg-coral-50 hover:bg-coral-100 dark:border-coral-600 dark:bg-coral-900 dark:hover:bg-coral-800 transition-colors ${accessibilityTheme === 'tritanopia' ? 'ring-2 ring-coral-500' : ''}`}
|
||||
>
|
||||
<strong className="text-coral-900 dark:text-coral-100">Tritanopia (Blue-blind)</strong><br />
|
||||
<small className="text-coral-700 dark:text-coral-300">Coral/Eucalyptus substitutions</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Achromatopsia (Color blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">High contrast grayscale only</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('achromatopsia')}
|
||||
className={`p-chorus-sm text-left border-2 border-nickel-400 bg-nickel-50 hover:bg-nickel-100 dark:border-nickel-600 dark:bg-nickel-900 dark:hover:bg-nickel-800 transition-colors ${accessibilityTheme === 'achromatopsia' ? 'ring-2 ring-nickel-500' : ''}`}
|
||||
>
|
||||
<strong className="text-nickel-900 dark:text-nickel-100">Achromatopsia (Color blind)</strong><br />
|
||||
<small className="text-nickel-700 dark:text-nickel-300">High contrast grayscale only</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -82,13 +82,14 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
|
||||
category.items.some((item: any) => item.href === pathname);
|
||||
|
||||
return (
|
||||
<nav className="p-chorus-md space-y-chorus-xs max-h-96 overflow-y-auto">
|
||||
|
||||
<nav className="p-chorus-md max-h-96 overflow-y-auto">
|
||||
{navCategories.map((category) => {
|
||||
const isExpanded = expandedSections.includes(category.id);
|
||||
const isActive = isCategoryActive(category);
|
||||
|
||||
return (
|
||||
<div key={category.id} className="space-y-chorus-xs">
|
||||
<div key={category.id} className="">
|
||||
<button
|
||||
onClick={() => toggleSection(category.id)}
|
||||
className={`w-full group flex items-center justify-between gap-2 px-chorus-sm py-chorus-xs text-left transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
|
||||
@@ -98,16 +99,16 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
|
||||
}`}
|
||||
aria-expanded={isExpanded}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 ">
|
||||
<img
|
||||
src={`/icons/coolicons.v4.1/coolicons PNG/Black/${category.icon}.png`}
|
||||
alt=""
|
||||
className="h-4 w-4 dark:hidden"
|
||||
className="icon h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src={`/icons/coolicons.v4.1/coolicons PNG/White/${category.icon}.png`}
|
||||
alt=""
|
||||
className="hidden h-4 w-4 dark:block"
|
||||
className="icon hidden h-4 w-4 dark:inline-flex"
|
||||
/>
|
||||
<span className="font-semibold">{category.label}</span>
|
||||
</div>
|
||||
@@ -122,13 +123,13 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="space-y-1 ml-6">
|
||||
<div className="ml-6">
|
||||
{category.items.map((item) => (
|
||||
<Link
|
||||
key={item.section}
|
||||
href={item.href}
|
||||
onClick={onClose}
|
||||
className={`flex items-center gap-2 px-chorus-sm py-chorus-xs transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
|
||||
className={`p-chorus-sm flex items-center gap-2 px-chorus-sm transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
|
||||
isCurrentPage(item.href)
|
||||
? 'bg-sand-50 text-mulberry-950 dark:bg-mulberry-900 dark:text-white font-medium border-l-2 border-mulberry-600 dark:border-mulberry-400'
|
||||
: 'text-carbon-600 dark:text-mulberry-400'
|
||||
@@ -137,12 +138,12 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
|
||||
<img
|
||||
src={`/icons/coolicons.v4.1/coolicons PNG/Black/${item.icon}.png`}
|
||||
alt=""
|
||||
className="h-3 w-3 dark:hidden"
|
||||
className="icon h-4 w-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src={`/icons/coolicons.v4.1/coolicons PNG/White/${item.icon}.png`}
|
||||
alt=""
|
||||
className="hidden h-3 w-3 dark:block"
|
||||
className="icon hidden h-4 w-4 dark:inline-flex"
|
||||
/>
|
||||
<span className="text-sm">{item.label}</span>
|
||||
</Link>
|
||||
@@ -160,6 +161,7 @@ const Header = () => {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const [showVisualAid, setShowVisualAid] = useState(false);
|
||||
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
|
||||
const [accessibilityTheme, setAccessibilityTheme] = useState<string>('default');
|
||||
|
||||
// Theme toggle functionality
|
||||
React.useEffect(() => {
|
||||
@@ -177,11 +179,32 @@ const Header = () => {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
};
|
||||
|
||||
const applyAccessibilityTheme = (themeType: string) => {
|
||||
// Remove existing accessibility themes
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
document.documentElement.removeAttribute('data-accessibility');
|
||||
|
||||
// Apply new theme
|
||||
if (themeType !== 'default') {
|
||||
document.documentElement.setAttribute('data-theme', themeType);
|
||||
document.documentElement.setAttribute('data-accessibility', themeType);
|
||||
}
|
||||
|
||||
setAccessibilityTheme(themeType);
|
||||
setShowVisualAid(false); // Close modal after selection
|
||||
|
||||
// Dispatch custom event to notify ThreeLogo components
|
||||
window.dispatchEvent(new CustomEvent('accessibilityThemeChanged', {
|
||||
detail: { theme: themeType }
|
||||
}));
|
||||
};
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-30 bg-white/80 backdrop-blur dark:bg-mulberry-950/80 lg:left-64">
|
||||
<div className="flex items-center justify-between border-b dark:border-mulberry-800 border-nickel-200 shadow-lg">
|
||||
<header className="fixed top-0 left-0 right-0 z-30 bg-white/80 backdrop-blur dark:bg-mulberry-950/80 lg:left-64 shadow-lg">
|
||||
<div className="max-w-5xl mx-auto mb-chorus-sm px-chorus-sm">
|
||||
<div className="flex items-center justify-between ">
|
||||
{/* Mobile layout - hamburger + logo on left, controls on right */}
|
||||
<div className="flex items-center justify-between w-full lg:hidden px-chorus-md py-chorus-sm">
|
||||
<div className="flex items-center justify-between w-full lg:hidden py-chorus-sm">
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
@@ -189,7 +212,7 @@ const Header = () => {
|
||||
aria-label="Toggle mobile menu"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6 text-carbon-700 dark:text-mulberry-300"
|
||||
className="w-4 h-4 text-carbon-700 dark:text-mulberry-300"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -212,18 +235,18 @@ const Header = () => {
|
||||
<div className="flex items-center gap-chorus-xs">
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-chorus-xs hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
|
||||
className="p-chorus-sm hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Moon.png"
|
||||
alt="Switch to Dark Mode"
|
||||
className="w-5 h-5 dark:hidden"
|
||||
className="icon w-4 h-4 dark:hidden"
|
||||
/>
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Sun.png"
|
||||
alt="Switch to Light Mode"
|
||||
className="w-5 h-5 hidden dark:block"
|
||||
className="icon w-4 h-4 hidden dark:inline-flex"
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -232,7 +255,7 @@ const Header = () => {
|
||||
className="p-chorus-xs hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
|
||||
aria-label="Visual aid settings"
|
||||
>
|
||||
<svg className="h-5 w-5 text-carbon-700 dark:text-mulberry-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<svg className="icon h-4 w-4 text-carbon-700 dark:text-mulberry-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
@@ -243,167 +266,168 @@ const Header = () => {
|
||||
{/* Desktop primary navigation - hidden on mobile */}
|
||||
<nav className="primary-nav hidden lg:block">
|
||||
<ul className="horizontal-menu">
|
||||
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300">
|
||||
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur">
|
||||
<div className="flex items-center gap-2 ml-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="hidden h-4 w-4 dark:block" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
||||
<span>Overview</span>
|
||||
</div>
|
||||
<ul className="flyout-menu">
|
||||
<ul className="flyout-menu backdrop-blur">
|
||||
<li className="item">
|
||||
<Link href="/" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Brand Overview
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Brand Overview</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/identity" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Brand Identity
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Brand Identity</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/usage" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Book.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Book.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Usage Guidelines
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Book.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Book.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Usage Guidelines</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300">
|
||||
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur">
|
||||
<div className="flex items-center gap-2 ml-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png" alt="" className="h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png" alt="" className="hidden h-4 w-4 dark:block" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
||||
<span>Visual Identity</span>
|
||||
|
||||
</div>
|
||||
<ul className="flyout-menu">
|
||||
<li className="">
|
||||
<ul className="flyout-menu backdrop-blur">
|
||||
<li className="item">
|
||||
<Link href="/visual-identity" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Visual Identity
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Visual Identity</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/logo" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Logo System
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Logo System</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/typography" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Typography
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Typography</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/colors" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Swatches_Palette.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Swatches_Palette.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Color Palette
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Swatches_Palette.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Swatches_Palette.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Color Palette</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/iconography" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Iconography
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Iconography</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/accessibility" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Accessibility
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Accessibility</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/components" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Components
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Components</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/motion" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Motion System
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Motion System</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/implementation" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Implementation
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Implementation</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300">
|
||||
<div className="flex items-center gap-2 ml-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="hidden h-4 w-4 dark:block" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
|
||||
<span>Communications</span>
|
||||
|
||||
</div>
|
||||
<ul className="flyout-menu">
|
||||
<li className="">
|
||||
<ul className="flyout-menu backdrop-blur">
|
||||
<li className="item">
|
||||
<Link href="/culture" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Bulb.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Bulb.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Culture
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Bulb.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Bulb.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Culture</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/communications" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Language Support
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Language Support</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/public-relations" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Public Relations
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Public Relations</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/investor-relations" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Chart_Line.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Chart_Line.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Investor Relations
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Chart_Line.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Chart_Line.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Investor Relations</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/collaborators" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Collaborators
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Collaborators</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="item">
|
||||
<Link href="/social-media" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="" className="h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="" className="hidden h-3 w-3 dark:block" />
|
||||
Social Media
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
|
||||
<span>Social Media</span>
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb - always visible */}
|
||||
<div className="">
|
||||
<div className="max-w-5xl mx-auto px-chorus-lg">
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
|
||||
@@ -414,10 +438,10 @@ const Header = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Visual Aid Modal - same as BottomDock */}
|
||||
{/* Visual Aid Modal - fixed for mobile */}
|
||||
{showVisualAid && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="relative bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 max-w-lg w-full mx-4 p-chorus-lg shadow-xl">
|
||||
<div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/50 backdrop-blur-sm p-4 pt-24">
|
||||
<div className="relative bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 max-w-lg w-full max-h-[calc(100vh-8rem)] overflow-y-auto p-chorus-lg shadow-xl">
|
||||
<div className="flex items-center justify-between mb-chorus-md">
|
||||
<h3 className="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3>
|
||||
<button
|
||||
@@ -441,25 +465,40 @@ const Header = () => {
|
||||
8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility
|
||||
</p>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Default Vision</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Standard CHORUS 8-color system</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('default')}
|
||||
className={`p-chorus-sm text-left border-2 border-carbon-300 bg-carbon-50 hover:bg-carbon-100 dark:border-carbon-600 dark:bg-carbon-900 dark:hover:bg-carbon-800 transition-colors ${accessibilityTheme === 'default' ? 'ring-2 ring-carbon-500' : ''}`}
|
||||
>
|
||||
<strong className="text-carbon-950 dark:text-white">Default Vision</strong><br />
|
||||
<small className="text-carbon-700 dark:text-carbon-300">Standard CHORUS 8-color system</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Protanopia (Red-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Ocean/Sand adaptations</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('protanopia')}
|
||||
className={`p-chorus-sm text-left border-2 border-ocean-400 bg-ocean-50 hover:bg-ocean-100 dark:border-ocean-600 dark:bg-ocean-900 dark:hover:bg-ocean-800 transition-colors ${accessibilityTheme === 'protanopia' ? 'ring-2 ring-ocean-500' : ''}`}
|
||||
>
|
||||
<strong className="text-ocean-900 dark:text-ocean-100">Protanopia (Red-blind)</strong><br />
|
||||
<small className="text-ocean-700 dark:text-ocean-300">Ocean/Sand adaptations</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Deuteranopia (Green-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Blue/Yellow enhanced contrast</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('deuteranopia')}
|
||||
className={`p-chorus-sm text-left border-2 border-eucalyptus-400 bg-eucalyptus-50 hover:bg-eucalyptus-100 dark:border-eucalyptus-600 dark:bg-eucalyptus-900 dark:hover:bg-eucalyptus-800 transition-colors ${accessibilityTheme === 'deuteranopia' ? 'ring-2 ring-eucalyptus-500' : ''}`}
|
||||
>
|
||||
<strong className="text-eucalyptus-900 dark:text-eucalyptus-100">Deuteranopia (Green-blind)</strong><br />
|
||||
<small className="text-eucalyptus-700 dark:text-eucalyptus-300">Blue/Yellow enhanced contrast</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Tritanopia (Blue-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Coral/Eucalyptus substitutions</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('tritanopia')}
|
||||
className={`p-chorus-sm text-left border-2 border-coral-400 bg-coral-50 hover:bg-coral-100 dark:border-coral-600 dark:bg-coral-900 dark:hover:bg-coral-800 transition-colors ${accessibilityTheme === 'tritanopia' ? 'ring-2 ring-coral-500' : ''}`}
|
||||
>
|
||||
<strong className="text-coral-900 dark:text-coral-100">Tritanopia (Blue-blind)</strong><br />
|
||||
<small className="text-coral-700 dark:text-coral-300">Coral/Eucalyptus substitutions</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Achromatopsia (Color blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">High contrast grayscale only</small>
|
||||
<button
|
||||
onClick={() => applyAccessibilityTheme('achromatopsia')}
|
||||
className={`p-chorus-sm text-left border-2 border-nickel-400 bg-nickel-50 hover:bg-nickel-100 dark:border-nickel-600 dark:bg-nickel-900 dark:hover:bg-nickel-800 transition-colors ${accessibilityTheme === 'achromatopsia' ? 'ring-2 ring-nickel-500' : ''}`}
|
||||
>
|
||||
<strong className="text-nickel-900 dark:text-nickel-100">Achromatopsia (Color blind)</strong><br />
|
||||
<small className="text-nickel-700 dark:text-nickel-300">High contrast grayscale only</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -86,19 +86,32 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
|
||||
|
||||
scene.background = null; // keep transparent
|
||||
|
||||
// Use the exact material from your reference logo.html
|
||||
const material = new THREE.MeshPhysicalMaterial({
|
||||
color: 0x333333,
|
||||
roughness: 0.24,
|
||||
metalness: 1.0,
|
||||
clearcoat: 0.48,
|
||||
clearcoatRoughness: 0.15,
|
||||
reflectivity: 1.2,
|
||||
sheen: 0.35,
|
||||
sheenColor: new THREE.Color(0x212121),
|
||||
sheenRoughness: 0.168,
|
||||
envMapIntensity: 1,
|
||||
});
|
||||
// Theme-aware material colors
|
||||
const getThemeMaterial = (theme: string = 'default') => {
|
||||
const colorMap = {
|
||||
'default': 0x333333,
|
||||
'protanopia': 0x1e40af, // Blue-800 for red-blind
|
||||
'deuteranopia': 0x6b21a8, // Purple-800 for green-blind
|
||||
'tritanopia': 0x991b1b, // Red-800 for blue-blind
|
||||
'achromatopsia': 0x374151, // Gray-700 for color-blind
|
||||
};
|
||||
|
||||
return new THREE.MeshPhysicalMaterial({
|
||||
color: colorMap[theme as keyof typeof colorMap] || colorMap.default,
|
||||
roughness: 0.24,
|
||||
metalness: 1.0,
|
||||
clearcoat: 0.48,
|
||||
clearcoatRoughness: 0.15,
|
||||
reflectivity: 1.2,
|
||||
sheen: 0.35,
|
||||
sheenColor: new THREE.Color(0x212121),
|
||||
sheenRoughness: 0.168,
|
||||
envMapIntensity: 1,
|
||||
});
|
||||
};
|
||||
|
||||
// Initialize with default material
|
||||
let currentMaterial = getThemeMaterial('default');
|
||||
|
||||
// Load GLB with DRACO support
|
||||
const loader = new GLTFLoader();
|
||||
@@ -115,10 +128,10 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
|
||||
console.log('🎉 Your GLB loaded successfully!', gltf);
|
||||
model = gltf.scene;
|
||||
|
||||
// Apply the exact material from your reference logo.html
|
||||
// Apply the theme-aware material
|
||||
model.traverse((child) => {
|
||||
if (child.isMesh) {
|
||||
(child as THREE.Mesh).material = material;
|
||||
(child as THREE.Mesh).material = currentMaterial;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -139,10 +152,10 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
|
||||
(err) => {
|
||||
console.error('❌ GLB load error:', err);
|
||||
|
||||
// Fallback: create a torus geometry with the reference material
|
||||
// Fallback: create a torus geometry with the theme-aware material
|
||||
console.log('Creating fallback torus geometry...');
|
||||
const fallbackGeometry = new THREE.TorusGeometry(0.6, 0.2, 16, 100);
|
||||
const fallbackMesh = new THREE.Mesh(fallbackGeometry, material);
|
||||
const fallbackMesh = new THREE.Mesh(fallbackGeometry, currentMaterial);
|
||||
fallbackMesh.position.set(0, 0, 0); // Ensure fallback is also centered
|
||||
scene.add(fallbackMesh);
|
||||
model = fallbackMesh;
|
||||
@@ -151,6 +164,28 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
|
||||
}
|
||||
);
|
||||
|
||||
// Listen for accessibility theme changes
|
||||
const handleThemeChange = (event: any) => {
|
||||
const newTheme = event.detail.theme;
|
||||
const newMaterial = getThemeMaterial(newTheme);
|
||||
|
||||
if (model) {
|
||||
// Update material on all meshes
|
||||
model.traverse((child: any) => {
|
||||
if (child.isMesh) {
|
||||
child.material.dispose(); // Clean up old material
|
||||
child.material = newMaterial;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update current material reference
|
||||
currentMaterial = newMaterial;
|
||||
console.log(`🎨 Logo theme changed to: ${newTheme}`);
|
||||
};
|
||||
|
||||
window.addEventListener('accessibilityThemeChanged', handleThemeChange);
|
||||
|
||||
let raf = 0;
|
||||
const tick = () => {
|
||||
raf = requestAnimationFrame(tick);
|
||||
@@ -170,6 +205,7 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
|
||||
return () => {
|
||||
cancelAnimationFrame(raf);
|
||||
window.removeEventListener('resize', resize);
|
||||
window.removeEventListener('accessibilityThemeChanged', handleThemeChange);
|
||||
renderer.dispose();
|
||||
draco.dispose();
|
||||
if (container.contains(renderer.domElement)) {
|
||||
|
||||
Reference in New Issue
Block a user