[LibbyUX]

• Add light and dark themes to cde-ui and the CDE web component, with a theme toggle in the cde-ui navigation that starts from the system setting and switches in a View Transition (refs Apply the AtlasNG HRA theme across CDE #2355)
• Recolor charts in place when the theme changes, and show dark versions of the landing hero, citation, and create page backgrounds in the dark theme
• Use default Angular Material components styled by AtlasNG HRA tokens: buttons, button toggles, checkboxes, menus, form fields, selects, tooltips, rich tooltips, and snackbars, with the snackbar styles shared by cde-ui and the web component
• Match AtlasNG across cde-ui pages: header shell bar and menus, 12px breadcrumbs, text links, scrollbars, content sections, table of contents, notices, error pages, CTA buttons, and the study page table (refs CDE secondary navigation improvements and analytics #2354)
• Assign color roles by meaning: on-surface and on-surface-variant text, background panels, surface-bright study cards, outline and outline-variant borders, secondary focus accents and logo colors, and Material's default primary loading bar
• Assign type roles: title-small panel titles, body-medium visualization and chart text (exported chart legends included), and title and body roles on the landing page, create page, and header menus
• Give landing page cards Material state layers, elevation, and shape tokens, with hover, press, and focus states
• Refresh the create page: type, step numbers, outlined workflow cards, requirements, a tokenized file pill, and AtlasNG warning notices
• Polish the visualization: a 16px inset for every panel (docked and fullscreen), outlined panels, full-length dividers, two-column metadata, larger violins fitted to the panel, a shorter histogram with its end labels inside, and a restyled color picker
• Use theme surfaces, shapes, and elevation for the cell type name and anchor tooltips and the color picker, matching the rich tooltips
• Lay out the inspect mode cell info popup like the metadata panel, and show labels in on-surface and values in on-surface-variant in both
• Show the full cell type name on hover again when it's cut off in the cell types table
• Stop the cell info popup's title from showing a browser tooltip over the popup
• Use AtlasNG HRA light values and Nunito Sans as the chart fallbacks, replacing the old HRA palette and Metropolis
• Refresh the downloads drawer layout, copy, and notice, with outlined format buttons
• Add AtlasNG info colors to the HRA theme, and opt-in options and token hooks in shared design system components so other HRA apps render unchanged; the info modal is restyled directly, since CDE is its only user
• Document light and dark theming for embedders in EMBEDDING.md
• Raise the cde-ui initial bundle budget to 5.5 MB

🤖 Generated with Claude Code

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8eb531b

Command	Status	Duration	Result
nx affected --targets=lint,test,compodoc --conf...	✅ Succeeded	2m 52s	View ↗
nx affected --target=build,build-webcomponent,b...	✅ Succeeded	5m 12s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-10-29 15:37:45 UTC

[github-actions]

🚀 Preview Deploy Report

✅ Successfully deployed preview here