diff --git a/brand-assets/brand-style-guide-site/src/app/globals.css b/brand-assets/brand-style-guide-site/src/app/globals.css index 2c5be8d..d9504aa 100644 --- a/brand-assets/brand-style-guide-site/src/app/globals.css +++ b/brand-assets/brand-style-guide-site/src/app/globals.css @@ -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; + } } \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/components/BottomDock.tsx b/brand-assets/brand-style-guide-site/src/components/BottomDock.tsx index de53ef5..3b8a6a4 100644 --- a/brand-assets/brand-style-guide-site/src/components/BottomDock.tsx +++ b/brand-assets/brand-style-guide-site/src/components/BottomDock.tsx @@ -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('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 */} -
+
{/* Theme Toggle */}
-

+

© 2025 CHORUS Services. Sophisticated orchestration for enterprise AI.

@@ -69,8 +90,8 @@ export default function BottomDock() { {/* Visual Aid Modal Dialog */} {showVisualAid && ( -
-
+
+
{/* Modal Header */}

Visual Aid Settings

@@ -97,25 +118,40 @@ export default function BottomDock() { 8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility

- - - - -
diff --git a/brand-assets/brand-style-guide-site/src/components/Header.tsx b/brand-assets/brand-style-guide-site/src/components/Header.tsx index c83c1ac..28c9261 100644 --- a/brand-assets/brand-style-guide-site/src/components/Header.tsx +++ b/brand-assets/brand-style-guide-site/src/components/Header.tsx @@ -82,13 +82,14 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => { category.items.some((item: any) => item.href === pathname); return ( -
{/* Breadcrumb - always visible */} -
+
@@ -414,10 +438,10 @@ const Header = () => {
)} - {/* Visual Aid Modal - same as BottomDock */} + {/* Visual Aid Modal - fixed for mobile */} {showVisualAid && ( -
-
+
+

Visual Aid Settings

- - - -
diff --git a/brand-assets/brand-style-guide-site/src/components/ThreeLogo.tsx b/brand-assets/brand-style-guide-site/src/components/ThreeLogo.tsx index 4933c61..995719b 100644 --- a/brand-assets/brand-style-guide-site/src/components/ThreeLogo.tsx +++ b/brand-assets/brand-style-guide-site/src/components/ThreeLogo.tsx @@ -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)) {