2026 - 0 - front end reorganized

[localjo]

One-line summary

Reorganization of #718 into feature-based commits for easier review.

Significant changes and points to review

We may want to split this branch into separate branches with individual PRs for each feature.

[kkellydesign]

ok, nearly all of these components have additional visual refinements in later PRs, so this isn't a good one to look at for proper QA on the server. However, this is good to see the patterns for how we're building:

• The new CSS: We're prepending the new design files with flare26. This makes sense for now because this is not-yet-default code. Once we have full coverage on the site with these styles, we'll be able to rip out the previous flare- code and rename these files so they're not dated.

• WNPs still use the current "flare" code, with a minor exception – there's a body class that changes the font family variables. This allows us to use the same set of files for the current freeform pages, WNPs, and Article pages that match the current design.

• CMS patterns: You can see the handful of initial 2026 patterns in the springfield/cms/ folder, as well as associated migrations.

I'll post screenshots to these PRs as I go with my QA findings, and there will likely be an additional PR with some CSS refinements at the end of this process.

[Copilot]

Pull request overview

This PR reorganizes front-end CSS architecture by introducing a new "Flare 2026" design system alongside the existing Flare design system. The changes establish a comprehensive CSS layer structure with design tokens, typography, components, and utilities that will support the 2026 visual refresh.

Key changes include:

• Introduction of Flare26 CSS architecture with proper layer ordering (base, theme, defaults, template, page, components, utilities, overrides)
• Addition of comprehensive icon system with 300+ icon definitions
• Updates to existing Flare CSS to reference the new shared icon system
• New component stylesheets for buttons, cards, carousels, and page sections

Reviewed changes

Copilot reviewed 25 out of 378 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
media/css/cms/flare26.css	Main entry point defining CSS layer structure and import order for the new design system
media/css/cms/flare26-tokens.css	Design token definitions including colors, spacing, typography, and breakpoints
media/css/cms/flare26-theme.css	Contextual theme variables with dark mode and responsive breakpoint support
media/css/cms/flare26-base.css	Base reset styles and font-face declarations for Mozilla Headline and Text fonts
media/css/cms/flare26-defaults.css	Default element styles using theme tokens
media/css/cms/flare26-template.css	Layout styles for header, footer, navigation, and page structure
media/css/cms/flare26-icon.css	Icon system with 300+ icon class definitions
media/css/cms/flare26-button.css	Button component styles with variants and states
media/css/cms/flare26-card.css	Card component with grid layouts and hover effects
media/css/cms/flare26-typography.css	Typography utilities and rich text styles
media/css/cms/flare26-utilities.css	Utility classes for alignment, visibility, and light/dark display
media/css/cms/flare26-carousel.css	Carousel component with controls and responsive behavior
media/css/cms/flare26-section.css	Section layout container styles
media/css/cms/flare26-showcase.css	Showcase component for featured content
media/css/cms/flare26-intro.css	Intro/hero section styles with decorative elements
media/css/cms/flare26-homepage.css	Homepage-specific layout overrides
media/css/cms/flare26-overrides.css	Placeholder for final override layer
media/css/cms/pattern-library.css	Pattern library utility styles for component documentation
media/css/cms/wagtail-admin.css	Admin interface imports for icon system
media/css/cms/flare.css	Updated to use shared flare26-icon.css
media/css/cms/flare-icon.css	Removed (replaced by flare26-icon.css)
media/css/cms/flare-tokens.css	Border radius token renamed for consistency
media/css/cms/flare-typography.css	Updated border radius references
media/css/cms/flare-intro.css	Updated to use design token variable
media/css/cms/flare-defaults.css	Removed max-width constraint and updated border radius

Comments suppressed due to low confidence (1)

media/css/cms/flare26-template.css:1

• Reference to undefined token --token-color-black-4-16. The tokens file defines --token-color-black-16 but not --token-color-black-4-16. This should be --token-color-black-16.

/*

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 80.94%. Comparing base (042c3cb) to head (f4e70ba).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #841      +/-   ##
==========================================
- Coverage   81.73%   80.94%   -0.80%     
==========================================
  Files         113      113              
  Lines        6022     6281     +259     
==========================================
+ Hits         4922     5084     +162     
- Misses       1100     1197      +97     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[janbrasna]

This seems to only be impacting things outside of current production layout, but I've noticed this got removed also from current prod site:

[janbrasna]

This removes the "see more" arrow from the current production menu. Was that intentional?

before	after

(original can be checked e.g. at https://www-demo5.springfield.moz.works/ that's few days behind main atm…)

[janbrasna]

But given I only see the svg element removed, but not its corresponding styling, I'm not convinced it's intentional.