tony/chorus-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement comprehensive system-wide accessibility color adaptations

Browse Source 
- 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
2025-08-25 19:42:46 +10:00
parent dd63993570
commit 9ca343bd01
4 changed files with 633 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

428
brand-assets/brand-style-guide-site/src/app/globals.css
View File

@@ -16,8 +16,8 @@ html {
--color-nickel: #c1bfb1; --color-nickel: #c1bfb1;
/* CHORUS Semantic Color Tokens - 8 Color System */ /* CHORUS Semantic Color Tokens - 8 Color System */
--chorus-primary: #FFFFFF; /* carbon-950 */ --chorus-primary: #0b0213; /* carbon-950 */
--chorus-secondary: #CCCCCC; /* mulberry-950 */ --chorus-secondary: #0b0213; /* mulberry-950 */
--chorus-accent: #403730; /* walnut-900 */ --chorus-accent: #403730; /* walnut-900 */
--chorus-neutral: #c1bfb1; /* nickel-500 */ --chorus-neutral: #c1bfb1; /* nickel-500 */
--chorus-info: #3a4654; /* ocean-900 */ --chorus-info: #3a4654; /* ocean-900 */
@@ -77,21 +77,126 @@ html {
--accent-secondary: #c1bfb1; /* Nickel */ --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"] { [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"] { [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"] { [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"] { [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 */ /* CHORUS 8-Color Accessibility System */
@@ -251,19 +356,19 @@ progress::-webkit-progress-bar {
background-color: #374151; background-color: #374151;
} }
/* Harmony Green Progress */ /* eucalyptus Green Progress */
.progress-harmony::-webkit-progress-value { .progress-eucalyptus::-webkit-progress-value {
background-color: #515d54; background-color: #515d54;
border-radius: 0; border-radius: 0;
} }
.dark .progress-harmony::-webkit-progress-value { .dark .progress-eucalyptus::-webkit-progress-value {
background-color: #7a8a7f; background-color: #7a8a7f;
} }
.progress-harmony::-moz-progress-bar { .progress-eucalyptus::-moz-progress-bar {
background-color: #515d54; background-color: #515d54;
border-radius: 0; border-radius: 0;
} }
.dark .progress-harmony::-moz-progress-bar { .dark .progress-eucalyptus::-moz-progress-bar {
background-color: #7a8a7f; background-color: #7a8a7f;
} }
@@ -307,13 +412,12 @@ canvas.chorus-logo {
/* Warnings */ /* Warnings */
.info img, .info img.icon,
.note img, .note img.icon,
.caution img, .caution img.icon,
.security-warning img, .security-warning img.icon,
.error img, .error img.icon,
.critical img, .critical img.icon {
img.icon {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
vertical-align: middle; vertical-align: middle;
@@ -674,33 +778,69 @@ pre[class*="language-"] {
--syntax-property: var(--chorus-info); --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 { .primary-nav {
position: relative; position: relative;
font-weight: 600;
} }
.horizontal-menu { .horizontal-menu {
display: flex; display: flex;
list-style: none; list-style: none;
margin: 0;
padding: 0;
} }
.horizontal-menu li {
.menu-item { margin: 0 auto;
position: relative; position: relative;
display: inline-block;
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: all 200ms ease-out;
} }
.menu-item:hover { .horizontal-menu img.icon {
background-color: var(--bg-secondary); 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); color: var(--text-primary);
} }
.dark .menu-item:hover { .horizontal-menu .dark li:hover {
background-color: rgba(255, 255, 255, 0.1); background-color: var(--bg-mulberry-700);
color: var(--text-primary); color: var(--text-primary);
} }
@@ -711,54 +851,77 @@ pre[class*="language-"] {
left: 0; left: 0;
min-width: 220px; min-width: 220px;
background: white; background: white;
border: 1px solid var(--border-emphasis);
border-radius: 0; border-radius: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
list-style: none; list-style: none;
margin: 0;
padding: 0.5rem 0; padding: 0.5rem 0;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: translateY(-8px); transform: translateY(-8px);
transition: all 200ms ease-out; transition: all 200ms ease-out;
z-index: 1100; z-index: 1100;
text-wrap: nowrap;
} }
.dark .flyout-menu { .dark .flyout-menu {
background: var(--bg-primary); background: var(--bg-primary);
border-color: var(--border-emphasis); border-color: var(--border-emphasis);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
margin: 0;
padding: 0;
} }
/* Show dropdown on hover */ /* Show dropdown on hover */
.menu-item:hover .flyout-menu { .primary-nav li:hover .flyout-menu {
opacity: 1; opacity: 0.9;
visibility: visible; visibility: visible;
transform: translateY(0); transform: translateY(0);
margin: 0;
padding: 0;
} }
/* Flyout menu items */ /* Flyout menu items */
.flyout-menu .menu-item { .flyout-menu ul {
display: block; display: block;
white-space: nowrap; white-space: nowrap;
border-radius: 0; border-radius: 0;
margin: 0;
padding: 0;
} }
.flyout-menu .menu-item:hover { .flyout-menu li {
background-color: var(--bg-accent); margin: 0;
} padding: 0;
font-weight: 500;
.dark .flyout-menu .menu-item:hover { font-size: var(--text-sm);
background-color: rgba(255, 255, 255, 0.05);
} }
/* Flyout menu links */ /* Flyout menu links */
.flyout-menu a { .flyout-menu a {
display: block; display: block;
color: var(--text-primary); padding: 0.5rem;
text-decoration: none; text-decoration: none;
transition: all 200ms ease-out; 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 { .flyout-menu a:hover {
color: var(--accent-primary); color: var(--accent-primary);
@@ -766,7 +929,7 @@ pre[class*="language-"] {
} }
/* Ensure flyout stays visible when hovering over it */ /* Ensure flyout stays visible when hovering over it */
.menu-item:hover .flyout-menu, li:hover .flyout-menu,
.flyout-menu:hover { .flyout-menu:hover {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
@@ -786,4 +949,179 @@ article:not(button),
aside:not(button), aside:not(button),
nav:not(button) { nav:not(button) {
border-radius: 0 !important; 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;
}
} }

74
brand-assets/brand-style-guide-site/src/components/BottomDock.tsx
View File

@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
export default function BottomDock() { export default function BottomDock() {
const [theme, setTheme] = useState<'light' | 'dark'>('dark'); const [theme, setTheme] = useState<'light' | 'dark'>('dark');
const [showVisualAid, setShowVisualAid] = useState(false); const [showVisualAid, setShowVisualAid] = useState(false);
const [accessibilityTheme, setAccessibilityTheme] = useState<string>('default');
useEffect(() => { useEffect(() => {
// Check initial theme // 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 ( return (
<> <>
{/* Bottom Dock */} {/* 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"> <div className="flex items-center gap-chorus-sm">
{/* Theme Toggle */} {/* Theme Toggle */}
<button <button
@@ -61,7 +82,7 @@ export default function BottomDock() {
</button> </button>
</div> </div>
<div className="flex items-center gap-chorus-sm text-sm"> <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. © 2025 CHORUS Services. Sophisticated orchestration for enterprise AI.
</p> </p>
</div> </div>
@@ -69,8 +90,8 @@ export default function BottomDock() {
{/* Visual Aid Modal Dialog */} {/* Visual Aid Modal Dialog */}
{showVisualAid && ( {showVisualAid && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"> <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 mx-4 p-chorus-lg shadow-xl"> <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 */} {/* Modal Header */}
<div className="flex items-center justify-between mb-chorus-md"> <div className="flex items-center justify-between mb-chorus-md">
<h3 className="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3> <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 8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility
</p> </p>
<div className="grid grid-cols-1 gap-2"> <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"> <button
<strong>Default Vision</strong><br /> onClick={() => applyAccessibilityTheme('default')}
<small className="text-carbon-600 dark:text-mulberry-300">Standard CHORUS 8-color system</small> 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>
<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"> <button
<strong>Protanopia (Red-blind)</strong><br /> onClick={() => applyAccessibilityTheme('protanopia')}
<small className="text-carbon-600 dark:text-mulberry-300">Ocean/Sand adaptations</small> 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>
<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"> <button
<strong>Deuteranopia (Green-blind)</strong><br /> onClick={() => applyAccessibilityTheme('deuteranopia')}
<small className="text-carbon-600 dark:text-mulberry-300">Blue/Yellow enhanced contrast</small> 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>
<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"> <button
<strong>Tritanopia (Blue-blind)</strong><br /> onClick={() => applyAccessibilityTheme('tritanopia')}
<small className="text-carbon-600 dark:text-mulberry-300">Coral/Eucalyptus substitutions</small> 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>
<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"> <button
<strong>Achromatopsia (Color blind)</strong><br /> onClick={() => applyAccessibilityTheme('achromatopsia')}
<small className="text-carbon-600 dark:text-mulberry-300">High contrast grayscale only</small> 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> </button>
</div> </div>
</div> </div>

245
brand-assets/brand-style-guide-site/src/components/Header.tsx
View File

@@ -82,13 +82,14 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
category.items.some((item: any) => item.href === pathname); category.items.some((item: any) => item.href === pathname);
return ( 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) => { {navCategories.map((category) => {
const isExpanded = expandedSections.includes(category.id); const isExpanded = expandedSections.includes(category.id);
const isActive = isCategoryActive(category); const isActive = isCategoryActive(category);
return ( return (
<div key={category.id} className="space-y-chorus-xs"> <div key={category.id} className="">
<button <button
onClick={() => toggleSection(category.id)} 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 ${ 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} aria-expanded={isExpanded}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 ">
<img <img
src={`/icons/coolicons.v4.1/coolicons PNG/Black/${category.icon}.png`} src={`/icons/coolicons.v4.1/coolicons PNG/Black/${category.icon}.png`}
alt="" alt=""
className="h-4 w-4 dark:hidden" className="icon h-4 w-4 dark:hidden"
/> />
<img <img
src={`/icons/coolicons.v4.1/coolicons PNG/White/${category.icon}.png`} src={`/icons/coolicons.v4.1/coolicons PNG/White/${category.icon}.png`}
alt="" 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> <span className="font-semibold">{category.label}</span>
</div> </div>
@@ -122,13 +123,13 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
</button> </button>
{isExpanded && ( {isExpanded && (
<div className="space-y-1 ml-6"> <div className="ml-6">
{category.items.map((item) => ( {category.items.map((item) => (
<Link <Link
key={item.section} key={item.section}
href={item.href} href={item.href}
onClick={onClose} 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) 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' ? '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' : 'text-carbon-600 dark:text-mulberry-400'
@@ -137,12 +138,12 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
<img <img
src={`/icons/coolicons.v4.1/coolicons PNG/Black/${item.icon}.png`} src={`/icons/coolicons.v4.1/coolicons PNG/Black/${item.icon}.png`}
alt="" alt=""
className="h-3 w-3 dark:hidden" className="icon h-4 w-4 dark:hidden"
/> />
<img <img
src={`/icons/coolicons.v4.1/coolicons PNG/White/${item.icon}.png`} src={`/icons/coolicons.v4.1/coolicons PNG/White/${item.icon}.png`}
alt="" 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> <span className="text-sm">{item.label}</span>
</Link> </Link>
@@ -160,6 +161,7 @@ const Header = () => {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [showVisualAid, setShowVisualAid] = useState(false); const [showVisualAid, setShowVisualAid] = useState(false);
const [theme, setTheme] = useState<'light' | 'dark'>('dark'); const [theme, setTheme] = useState<'light' | 'dark'>('dark');
const [accessibilityTheme, setAccessibilityTheme] = useState<string>('default');
// Theme toggle functionality // Theme toggle functionality
React.useEffect(() => { React.useEffect(() => {
@@ -177,11 +179,32 @@ const Header = () => {
document.documentElement.classList.remove('dark'); 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 ( 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"> <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="flex items-center justify-between border-b dark:border-mulberry-800 border-nickel-200 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 */} {/* 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"> <div className="flex items-center gap-chorus-sm">
<button <button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
@@ -189,7 +212,7 @@ const Header = () => {
aria-label="Toggle mobile menu" aria-label="Toggle mobile menu"
> >
<svg <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" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -212,18 +235,18 @@ const Header = () => {
<div className="flex items-center gap-chorus-xs"> <div className="flex items-center gap-chorus-xs">
<button <button
onClick={toggleTheme} 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" aria-label="Toggle theme"
> >
<img <img
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Moon.png" src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Moon.png"
alt="Switch to Dark Mode" alt="Switch to Dark Mode"
className="w-5 h-5 dark:hidden" className="icon w-4 h-4 dark:hidden"
/> />
<img <img
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Sun.png" src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Sun.png"
alt="Switch to Light Mode" alt="Switch to Light Mode"
className="w-5 h-5 hidden dark:block" className="icon w-4 h-4 hidden dark:inline-flex"
/> />
</button> </button>
@@ -232,7 +255,7 @@ const Header = () => {
className="p-chorus-xs hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors" className="p-chorus-xs hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
aria-label="Visual aid settings" 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"/> <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"/> <circle cx="12" cy="12" r="3"/>
</svg> </svg>
@@ -243,167 +266,168 @@ const Header = () => {
{/* Desktop primary navigation - hidden on mobile */} {/* Desktop primary navigation - hidden on mobile */}
<nav className="primary-nav hidden lg:block"> <nav className="primary-nav hidden lg:block">
<ul className="horizontal-menu"> <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"> <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/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="hidden h-4 w-4 dark:block" /> <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> <span>Overview</span>
</div> </div>
<ul className="flyout-menu"> <ul className="flyout-menu backdrop-blur">
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Brand Overview <span>Brand Overview</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Brand Identity <span>Brand Identity</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Usage Guidelines <span>Usage Guidelines</span>
</Link> </Link>
</li> </li>
</ul> </ul>
</li> </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"> <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/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/Interface/Main_Component.png" alt="" className="hidden h-4 w-4 dark:block" /> <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> <span>Visual Identity</span>
</div> </div>
<ul className="flyout-menu"> <ul className="flyout-menu backdrop-blur">
<li className=""> <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"> <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/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/Interface/Main_Component.png" alt="" className="hidden h-3 w-3 dark:block" /> <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" />
Visual Identity <span>Visual Identity</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Logo System <span>Logo System</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Typography <span>Typography</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Color Palette <span>Color Palette</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Iconography <span>Iconography</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Accessibility <span>Accessibility</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Components <span>Components</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Motion System <span>Motion System</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Implementation <span>Implementation</span>
</Link> </Link>
</li> </li>
</ul> </ul>
</li> </li>
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300"> <li className="dark:hover:bg-mulberry-700 hover:bg-sand-300">
<div className="flex items-center gap-2 ml-chorus-sm"> <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/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="hidden h-4 w-4 dark:block" /> <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> <span>Communications</span>
</div> </div>
<ul className="flyout-menu"> <ul className="flyout-menu backdrop-blur">
<li className=""> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Culture <span>Culture</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Language Support <span>Language Support</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Public Relations <span>Public Relations</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Investor Relations <span>Investor Relations</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Collaborators <span>Collaborators</span>
</Link> </Link>
</li> </li>
<li className="item"> <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"> <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/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="hidden h-3 w-3 dark:block" /> <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" />
Social Media <span>Social Media</span>
</Link> </Link>
</li> </li>
</ul> </ul>
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div> </div>
{/* Breadcrumb - always visible */} {/* Breadcrumb - always visible */}
<div className=""> <div className="max-w-5xl mx-auto px-chorus-lg">
<Breadcrumb /> <Breadcrumb />
</div> </div>
@@ -414,10 +438,10 @@ const Header = () => {
</div> </div>
)} )}
{/* Visual Aid Modal - same as BottomDock */} {/* Visual Aid Modal - fixed for mobile */}
{showVisualAid && ( {showVisualAid && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"> <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 mx-4 p-chorus-lg shadow-xl"> <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"> <div className="flex items-center justify-between mb-chorus-md">
<h3 className="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3> <h3 className="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3>
<button <button
@@ -441,25 +465,40 @@ const Header = () => {
8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility 8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility
</p> </p>
<div className="grid grid-cols-1 gap-2"> <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"> <button
<strong>Default Vision</strong><br /> onClick={() => applyAccessibilityTheme('default')}
<small className="text-carbon-600 dark:text-mulberry-300">Standard CHORUS 8-color system</small> 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>
<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"> <button
<strong>Protanopia (Red-blind)</strong><br /> onClick={() => applyAccessibilityTheme('protanopia')}
<small className="text-carbon-600 dark:text-mulberry-300">Ocean/Sand adaptations</small> 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>
<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"> <button
<strong>Deuteranopia (Green-blind)</strong><br /> onClick={() => applyAccessibilityTheme('deuteranopia')}
<small className="text-carbon-600 dark:text-mulberry-300">Blue/Yellow enhanced contrast</small> 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>
<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"> <button
<strong>Tritanopia (Blue-blind)</strong><br /> onClick={() => applyAccessibilityTheme('tritanopia')}
<small className="text-carbon-600 dark:text-mulberry-300">Coral/Eucalyptus substitutions</small> 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>
<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"> <button
<strong>Achromatopsia (Color blind)</strong><br /> onClick={() => applyAccessibilityTheme('achromatopsia')}
<small className="text-carbon-600 dark:text-mulberry-300">High contrast grayscale only</small> 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> </button>
</div> </div>
</div> </div>

70
brand-assets/brand-style-guide-site/src/components/ThreeLogo.tsx
View File

@@ -86,19 +86,32 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
scene.background = null; // keep transparent scene.background = null; // keep transparent
// Use the exact material from your reference logo.html // Theme-aware material colors
const material = new THREE.MeshPhysicalMaterial({ const getThemeMaterial = (theme: string = 'default') => {
color: 0x333333, const colorMap = {
roughness: 0.24, 'default': 0x333333,
metalness: 1.0, 'protanopia': 0x1e40af, // Blue-800 for red-blind
clearcoat: 0.48, 'deuteranopia': 0x6b21a8, // Purple-800 for green-blind
clearcoatRoughness: 0.15, 'tritanopia': 0x991b1b, // Red-800 for blue-blind
reflectivity: 1.2, 'achromatopsia': 0x374151, // Gray-700 for color-blind
sheen: 0.35, };
sheenColor: new THREE.Color(0x212121),
sheenRoughness: 0.168, return new THREE.MeshPhysicalMaterial({
envMapIntensity: 1, 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 // Load GLB with DRACO support
const loader = new GLTFLoader(); 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); console.log('🎉 Your GLB loaded successfully!', gltf);
model = gltf.scene; model = gltf.scene;
// Apply the exact material from your reference logo.html // Apply the theme-aware material
model.traverse((child) => { model.traverse((child) => {
if (child.isMesh) { 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) => { (err) => {
console.error('❌ GLB load error:', 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...'); console.log('Creating fallback torus geometry...');
const fallbackGeometry = new THREE.TorusGeometry(0.6, 0.2, 16, 100); 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 fallbackMesh.position.set(0, 0, 0); // Ensure fallback is also centered
scene.add(fallbackMesh); scene.add(fallbackMesh);
model = 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; let raf = 0;
const tick = () => { const tick = () => {
raf = requestAnimationFrame(tick); raf = requestAnimationFrame(tick);
@@ -170,6 +205,7 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
return () => { return () => {
cancelAnimationFrame(raf); cancelAnimationFrame(raf);
window.removeEventListener('resize', resize); window.removeEventListener('resize', resize);
window.removeEventListener('accessibilityThemeChanged', handleThemeChange);
renderer.dispose(); renderer.dispose();
draco.dispose(); draco.dispose();
if (container.contains(renderer.domElement)) { if (container.contains(renderer.domElement)) {