2026 - 1 - [WT-509] Navigation styles #880
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Base automatically changed from
fe-2026-home-design-revisions
to
ll-2026-reorganized
December 22, 2025 13:41
* Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com>
maribedran
changed the title
maribedran
commented
Jan 6, 2026
| padding: var(--token-spacing-md); | ||
| } | ||
|
|
||
| @media screen and (max-width: 767px){ |
Collaborator
Author
There was a problem hiding this comment.
Are we using px values here instead of the --viewport-X-up variables on purpose?
springfield/cms/templates/cms/includes/flare26-menus/browser.html
Outdated
Show resolved
Hide resolved
springfield/cms/templates/cms/includes/flare26-menus/browser.html
Outdated
Show resolved
Hide resolved
springfield/cms/templates/cms/includes/flare26-menus/features.html
Outdated
Show resolved
Hide resolved
springfield/cms/templates/cms/includes/flare26-menus/learn.html
Outdated
Show resolved
Hide resolved
Welcome to Codecov 🎉Once you merge this PR into your default branch, you're all set! Codecov will compare coverage reports and display results in all future pull requests. Thanks for integrating Codecov - We've got you covered ☂️ |
kkellydesign
approved these changes
Jan 8, 2026
Collaborator
kkellydesign
left a comment
kkellydesign
left a comment
There was a problem hiding this comment.
All notes have been resolved
kkellydesign
added a commit
that referenced
this pull request
Jan 19, 2026
* Add 2026 frontend foundation * Add homepage intro component and buttons * Add 2026 sticker card components * Add 2026 spotlight/showcase component * Add 2026 carousel component * Add 2026 backend blocks, models, and migrations * Add homepage and typography examples to pattern library * Add new icons and use a single icon set for flare designs (#848) * Add new icons and use a single icon set for flare designs * Fix reference to arrow icon * Rename icon CSS file to flare26-icon * Add Wagtail Thumbnail Choice Block for icon choices * Update private-mode-circle-fill.svg --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * Make sure that the What's New Page always used the 2026 flare styles * 2026 - 0.1 - Templates organization (#869) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Update WNP default type styles in Pattern Library, remove max-width on body --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 1 - [WT-476] Firefox Logo rich text feature (#819) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 2 - [WT-478] Card Gallery (#860) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 3 - [WT-474] Pre Footer CTA (#861) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 4 - [WT-479] Kit Banner (#867) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Responsive adjustments in kit banner --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * 2026 - 5 - Carousel progress indicator CSS (#856) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch --------- Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * Fix CSS variable references * 2026 - 1 - [WT-509] Navigation styles (#880) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * fixing card grid regression * legacy nav and footer styles * Update navigation ftl strings * media query fixes --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> Co-authored-by: Luciano Ratamero <luciano@ratamero.com> * removing duplicate styles * 2026 - 1 -WT-369: Footer styles (#896) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * fixing card grid regression * legacy nav and footer styles * Update content of the flare26 footer * Add new css for the flare26 footer * Add footer's lang switcher * Refactor flare26 footer into smaller includes * Use flow-relative css instead of top/right/bottom/left * Add venv to ignores eslint files * Use flow-relative css on lang switcher css too * Update navigation ftl strings * Add missing ftl string to footer * Remove unused footer styles * Fix language switcher min width * Fix keyboard interaction when shift+tab is pressed for leaving a menu * Fix keyboard + mouse interaction on nav, when hovering after using keyboard * Implement nav light/dark modes with class overrides * legacy rework * some unnecessary calcs removed * theme refactor --------- Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * carousel images fix and fox * homepage padding and typography revisions * Update flare26-showcase.css * Update flare26-kit-banner.css * spacing revisions * more spacing fixes * Squashed commit of the following: commit 07d690c Merge: 6510733 5227085 Author: Kasey Kelly <kasey@servee.com> Date: Fri Jan 16 22:33:32 2026 -0500 image updates commit 6510733 Author: Kasey Kelly <kasey@servee.com> Date: Fri Jan 16 22:28:13 2026 -0500 styles for superheading added commit a7bf9ad Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 19:47:40 2026 -0500 update tests to support image variants where ImageVariantsBlock is used commit 0db519e Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 16:18:06 2026 -0500 use ImageVariantsBlock in StickerCardBlock commit a407d57 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 15:52:03 2026 -0500 use ImageVariantsBlock in IllustrationCardBlock commit 9c96f04 Merge: ce3f5a9 3d923d5 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:32:08 2026 -0500 Merge branch 'main' into WT-577-image-variants commit ce3f5a9 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:31:46 2026 -0500 add a superheading to sticker cards commit f4f851b Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:17:58 2026 -0500 add a superheading to each card gallery card commit 9e9dab5 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 18:07:59 2026 -0500 make sure CSS media queries are more specific than fallbacks commit 5ba368b Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 17:58:42 2026 -0500 use ImageVariantsBlock in HomeCarouselBlock commit c46185f Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:56:49 2026 -0500 use ImageVariantsBlock in ShowcaseBlock commit 9b85827 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:28:50 2026 -0500 use ImageVariantsBlock in card gallery cards commit cb8016f Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:27:47 2026 -0500 add an ImageVariantsBlock to support variants of the same image for different scenarios * refactored display utilities * add wrapper image for testing * minor design tweaks * minor design ervisions * make sure new CSS classes have consistent spacing and order * medium utility classes added to image-variants template * fixing template consistency * Update image class names on tests --------- Co-authored-by: Mariana Bedran Lesche <mariana@lincolnloop.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Luciano Ratamero <luciano@ratamero.com> Co-authored-by: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com>
kkellydesign
added a commit
that referenced
this pull request
Jan 20, 2026
* Add 2026 frontend foundation * Add homepage intro component and buttons * Add 2026 sticker card components * Add 2026 spotlight/showcase component * Add 2026 carousel component * Add 2026 backend blocks, models, and migrations * Add homepage and typography examples to pattern library * Add new icons and use a single icon set for flare designs (#848) * Add new icons and use a single icon set for flare designs * Fix reference to arrow icon * Rename icon CSS file to flare26-icon * Add Wagtail Thumbnail Choice Block for icon choices * Update private-mode-circle-fill.svg --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * Make sure that the What's New Page always used the 2026 flare styles * 2026 - 0.1 - Templates organization (#869) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Update WNP default type styles in Pattern Library, remove max-width on body --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 1 - [WT-476] Firefox Logo rich text feature (#819) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 2 - [WT-478] Card Gallery (#860) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 3 - [WT-474] Pre Footer CTA (#861) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 4 - [WT-479] Kit Banner (#867) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Responsive adjustments in kit banner --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * 2026 - 5 - Carousel progress indicator CSS (#856) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch --------- Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * Fix CSS variable references * 2026 - 1 - [WT-509] Navigation styles (#880) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * fixing card grid regression * legacy nav and footer styles * Update navigation ftl strings * media query fixes --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> Co-authored-by: Luciano Ratamero <luciano@ratamero.com> * removing duplicate styles * 2026 - 1 -WT-369: Footer styles (#896) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * fixing card grid regression * legacy nav and footer styles * Update content of the flare26 footer * Add new css for the flare26 footer * Add footer's lang switcher * Refactor flare26 footer into smaller includes * Use flow-relative css instead of top/right/bottom/left * Add venv to ignores eslint files * Use flow-relative css on lang switcher css too * Update navigation ftl strings * Add missing ftl string to footer * Remove unused footer styles * Fix language switcher min width * Fix keyboard interaction when shift+tab is pressed for leaving a menu * Fix keyboard + mouse interaction on nav, when hovering after using keyboard * Implement nav light/dark modes with class overrides * legacy rework * some unnecessary calcs removed * theme refactor --------- Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * carousel images fix and fox * homepage padding and typography revisions * Update flare26-showcase.css * Update flare26-kit-banner.css * spacing revisions * Add confs to enable automatic css rule ordering on flare26 css files * Update prettier * Apply new prettier rules * more spacing fixes * Squashed commit of the following: commit 07d690c Merge: 6510733 5227085 Author: Kasey Kelly <kasey@servee.com> Date: Fri Jan 16 22:33:32 2026 -0500 image updates commit 6510733 Author: Kasey Kelly <kasey@servee.com> Date: Fri Jan 16 22:28:13 2026 -0500 styles for superheading added commit a7bf9ad Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 19:47:40 2026 -0500 update tests to support image variants where ImageVariantsBlock is used commit 0db519e Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 16:18:06 2026 -0500 use ImageVariantsBlock in StickerCardBlock commit a407d57 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 15:52:03 2026 -0500 use ImageVariantsBlock in IllustrationCardBlock commit 9c96f04 Merge: ce3f5a9 3d923d5 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:32:08 2026 -0500 Merge branch 'main' into WT-577-image-variants commit ce3f5a9 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:31:46 2026 -0500 add a superheading to sticker cards commit f4f851b Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:17:58 2026 -0500 add a superheading to each card gallery card commit 9e9dab5 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 18:07:59 2026 -0500 make sure CSS media queries are more specific than fallbacks commit 5ba368b Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 17:58:42 2026 -0500 use ImageVariantsBlock in HomeCarouselBlock commit c46185f Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:56:49 2026 -0500 use ImageVariantsBlock in ShowcaseBlock commit 9b85827 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:28:50 2026 -0500 use ImageVariantsBlock in card gallery cards commit cb8016f Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:27:47 2026 -0500 add an ImageVariantsBlock to support variants of the same image for different scenarios * refactored display utilities * add wrapper image for testing * minor design tweaks * minor design ervisions * make sure new CSS classes have consistent spacing and order * medium utility classes added to image-variants template * fixing template consistency * Update image class names on tests * stylelint config fix * prettier fix --------- Co-authored-by: Jo Sprague <github@iamlocaljo.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Luciano Ratamero <luciano@ratamero.com> Co-authored-by: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com>
maribedran
added a commit
that referenced
this pull request
Jan 20, 2026
* Add 2026 frontend foundation * Add homepage intro component and buttons * Add 2026 sticker card components * Add 2026 spotlight/showcase component * Add 2026 carousel component * Add 2026 backend blocks, models, and migrations * Add homepage and typography examples to pattern library * Add new icons and use a single icon set for flare designs (#848) * Add new icons and use a single icon set for flare designs * Fix reference to arrow icon * Rename icon CSS file to flare26-icon * Add Wagtail Thumbnail Choice Block for icon choices * Update private-mode-circle-fill.svg --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * Make sure that the What's New Page always used the 2026 flare styles * 2026 - 0.1 - Templates organization (#869) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Update WNP default type styles in Pattern Library, remove max-width on body --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 1 - [WT-476] Firefox Logo rich text feature (#819) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 2 - [WT-478] Card Gallery (#860) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 3 - [WT-474] Pre Footer CTA (#861) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 4 - [WT-479] Kit Banner (#867) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Responsive adjustments in kit banner --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * 2026 - 5 - Carousel progress indicator CSS (#856) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch --------- Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * Fix CSS variable references * 2026 - 1 - [WT-509] Navigation styles (#880) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * fixing card grid regression * legacy nav and footer styles * Update navigation ftl strings * media query fixes --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> Co-authored-by: Luciano Ratamero <luciano@ratamero.com> * removing duplicate styles * 2026 - 1 -WT-369: Footer styles (#896) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * fixing card grid regression * legacy nav and footer styles * Update content of the flare26 footer * Add new css for the flare26 footer * Add footer's lang switcher * Refactor flare26 footer into smaller includes * Use flow-relative css instead of top/right/bottom/left * Add venv to ignores eslint files * Use flow-relative css on lang switcher css too * Update navigation ftl strings * Add missing ftl string to footer * Remove unused footer styles * Fix language switcher min width * Fix keyboard interaction when shift+tab is pressed for leaving a menu * Fix keyboard + mouse interaction on nav, when hovering after using keyboard * Implement nav light/dark modes with class overrides * legacy rework * some unnecessary calcs removed * theme refactor --------- Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * carousel images fix and fox * homepage padding and typography revisions * Update flare26-showcase.css * Update flare26-kit-banner.css * spacing revisions * Add confs to enable automatic css rule ordering on flare26 css files * Update prettier * Apply new prettier rules * more spacing fixes * Squashed commit of the following: commit 07d690c Merge: 6510733 5227085 Author: Kasey Kelly <kasey@servee.com> Date: Fri Jan 16 22:33:32 2026 -0500 image updates commit 6510733 Author: Kasey Kelly <kasey@servee.com> Date: Fri Jan 16 22:28:13 2026 -0500 styles for superheading added commit a7bf9ad Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 19:47:40 2026 -0500 update tests to support image variants where ImageVariantsBlock is used commit 0db519e Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 16:18:06 2026 -0500 use ImageVariantsBlock in StickerCardBlock commit a407d57 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 15:52:03 2026 -0500 use ImageVariantsBlock in IllustrationCardBlock commit 9c96f04 Merge: ce3f5a9 3d923d5 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:32:08 2026 -0500 Merge branch 'main' into WT-577-image-variants commit ce3f5a9 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:31:46 2026 -0500 add a superheading to sticker cards commit f4f851b Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:17:58 2026 -0500 add a superheading to each card gallery card commit 9e9dab5 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 18:07:59 2026 -0500 make sure CSS media queries are more specific than fallbacks commit 5ba368b Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 17:58:42 2026 -0500 use ImageVariantsBlock in HomeCarouselBlock commit c46185f Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:56:49 2026 -0500 use ImageVariantsBlock in ShowcaseBlock commit 9b85827 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:28:50 2026 -0500 use ImageVariantsBlock in card gallery cards commit cb8016f Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:27:47 2026 -0500 add an ImageVariantsBlock to support variants of the same image for different scenarios * refactored display utilities * add wrapper image for testing * minor design tweaks * minor design ervisions * make sure new CSS classes have consistent spacing and order * medium utility classes added to image-variants template * fixing template consistency * Update image class names on tests * stylelint config fix * prettier fix --------- Co-authored-by: Jo Sprague <github@iamlocaljo.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Luciano Ratamero <luciano@ratamero.com> Co-authored-by: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com>
kkellydesign
added a commit
that referenced
this pull request
Jan 29, 2026
* Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 0.1 - Templates organization (#869) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Update WNP default type styles in Pattern Library, remove max-width on body --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 1 - [WT-476] Firefox Logo rich text feature (#819) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 2 - [WT-478] Card Gallery (#860) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 3 - [WT-474] Pre Footer CTA (#861) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments --------- Co-authored-by: Kasey Kelly <kasey@servee.com> * 2026 - 4 - [WT-479] Kit Banner (#867) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Responsive adjustments in kit banner --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * 2026 - 5 - Carousel progress indicator CSS (#856) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch --------- Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * Fix CSS variable references * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * Implement footer CTA form * Refactor pre-footer form using subscription form * Create Pre Footer CTA Form Snippet in CMS * Remove unnecessary email validation * Add kit step cards layout * Add kit image to last card * Remove max width from main section * Organize step cards pattern template * Refactor 2026 card templates * Fix missing import * Create Homepage test fixture * fixing card grid regression * legacy nav and footer styles * Create mixin for page UTM parameters * Add tests for homepage blocks * Update content of the flare26 footer * Add new css for the flare26 footer * Add footer's lang switcher * Refactor flare26 footer into smaller includes * Use flow-relative css instead of top/right/bottom/left * Add venv to ignores eslint files * Use flow-relative css on lang switcher css too * Update navigation ftl strings * Add missing ftl string to footer * Remove unused footer styles * 2026 - 1 - [WT-509] Navigation styles (#880) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * fixing card grid regression * legacy nav and footer styles * Update navigation ftl strings * media query fixes --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> Co-authored-by: Luciano Ratamero <luciano@ratamero.com> * Fix language switcher min width * removing duplicate styles * Fix keyboard interaction when shift+tab is pressed for leaving a menu * Create download page structure * 2026 - 1 -WT-369: Footer styles (#896) * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * Upgrade Pattern Library * Don't use flare 2026 template where styles aren't available * Create pattern library pages for existing 2026 designs * Implement Firefox logo rich text feature * Add inline Firefox Logo typography examples to pattern library * Add 2026 inline Firefox Logo to pattern library * Add new icons and use a single icon set for flare designs * Rename icon CSS file to flare26-icon * Create Card Gallery component and CMS block * Create Pre Footer CTA component * Create Pre Footer CTA snippet on CMS * Create 2026 Kit Banner block * Add Kit Banner block to Home page * carousel progress indicator CSS * Add embla-carousel dependency * Implement carousel animation using embla * Add Flare 2026 navigation styles * Add Fluent context to pattern librabry * Update WNP default type styles in Pattern Library, remove max-width on body * update vertical alignment on FF heading logo * minor card gallery CSS revisions * prepping cards for themes and dark mode, but also disabling current dark mode work * kit resolution fix, relative positioning adjustments * image size revision, ghost button support * fixing padding issue, so the active image takes up the whole width * scope theme variables to header, so they don't bleed into other compoenents * hide "unsupported" message on header download button * 2026 - 7 - Make dynamic card grid more balanced (#858) * Add balance to sticker card layout * card grid refactor to align with figma mobile/template layouts * Fix home banner style regression The ghost button class was incorrectly applied to this button, which became apparent when ghost button styles were added to this branch * Add superheading text to homepage cards * Adjust card sizing/spacing/order * Whitespace fix --------- Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> * fixing homepage spacing issues * Fix issue on header button clicks on mobile * Add svg for hamburger menu button * Implement nav mobile buttons like figma * Change copy on header download button for flare26 * fixing card grid regression * legacy nav and footer styles * Update content of the flare26 footer * Add new css for the flare26 footer * Add footer's lang switcher * Refactor flare26 footer into smaller includes * Use flow-relative css instead of top/right/bottom/left * Add venv to ignores eslint files * Use flow-relative css on lang switcher css too * Update navigation ftl strings * Add missing ftl string to footer * Remove unused footer styles * Fix language switcher min width * Fix keyboard interaction when shift+tab is pressed for leaving a menu * Fix keyboard + mouse interaction on nav, when hovering after using keyboard * Implement nav light/dark modes with class overrides * legacy rework * some unnecessary calcs removed * theme refactor --------- Co-authored-by: Mariana Bedran Lesche <maribedran@gmail.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Jo Sprague <github@iamlocaljo.com> * Create 2026 illustration card component and CMS block * Create QR Code Banner snippet * Refactor banner snippet to be more generic and include kit theme * Create Thanks Page and related blocks * carousel images fix and fox * Remove comment * Remove unused mzp class and comment * Add forced dark variant to the step cards * homepage padding and typography revisions * Update flare26-showcase.css * Update flare26-kit-banner.css * Add confs to enable automatic css rule ordering on flare26 css files * Apply new alphabetical ordering to flare26 css files * Update prettier * Apply prettier recommended formatting * Fix kit banner qr code alignment * spacing revisions * Add download intro styles and footer text * Add illustration card styles * Fix spacings on homepage cards * Add confs to enable automatic css rule ordering on flare26 css files * Update prettier * Apply new prettier rules * more spacing fixes * Apply prettier rules to newsletter form css file * Apply prettier rules to the newsletter form css file * Add button link variant * Fix base template for the card list block 2026 * Add feature card block to the download page * Fix flash of purple background when scrolling rapidly * Use light theme on the thanks page * Squashed commit of the following: commit 07d690c Merge: 6510733 5227085 Author: Kasey Kelly <kasey@servee.com> Date: Fri Jan 16 22:33:32 2026 -0500 image updates commit 6510733 Author: Kasey Kelly <kasey@servee.com> Date: Fri Jan 16 22:28:13 2026 -0500 styles for superheading added commit a7bf9ad Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 19:47:40 2026 -0500 update tests to support image variants where ImageVariantsBlock is used commit 0db519e Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 16:18:06 2026 -0500 use ImageVariantsBlock in StickerCardBlock commit a407d57 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 15:52:03 2026 -0500 use ImageVariantsBlock in IllustrationCardBlock commit 9c96f04 Merge: ce3f5a9 3d923d5 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:32:08 2026 -0500 Merge branch 'main' into WT-577-image-variants commit ce3f5a9 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:31:46 2026 -0500 add a superheading to sticker cards commit f4f851b Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Fri Jan 16 10:17:58 2026 -0500 add a superheading to each card gallery card commit 9e9dab5 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 18:07:59 2026 -0500 make sure CSS media queries are more specific than fallbacks commit 5ba368b Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 17:58:42 2026 -0500 use ImageVariantsBlock in HomeCarouselBlock commit c46185f Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:56:49 2026 -0500 use ImageVariantsBlock in ShowcaseBlock commit 9b85827 Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:28:50 2026 -0500 use ImageVariantsBlock in card gallery cards commit cb8016f Author: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com> Date: Thu Jan 15 14:27:47 2026 -0500 add an ImageVariantsBlock to support variants of the same image for different scenarios * refactored display utilities * add wrapper image for testing * minor design tweaks * minor design ervisions * make sure new CSS classes have consistent spacing and order * medium utility classes added to image-variants template * fixing template consistency * Update image class names on tests * Fix migration history * fixing html nesting * Update migrations * Clear existing pages on page fixtures load * replace special methods for ImageVariantsBlock with a 1-time data migration * Recompile python deps * Add switch to article pages for 26 styles * Use 26 card on article index page if switch is on * Fix tests after merge with main * Fix section block in download page * Layout adjustments for download page * Fix step cards layout on thanks page * Fix base template styles * Fix bottom main border radius on mobile and tablet * Add article detail base styles * Fix blockquote spacing * Migrate all blocks to new image variants block * Fix image display styles order * Fix tests after merge with image variants * Add Download and Thanks pages to allowed pages and DB export * Create fixture for Download Page * Add styles for the download cta banner snippet * Decouple sticker card from flare25 and from .fl-card class * Fix UI Tour js by creating a flare26 variant * Implement basic card css * Fix migrations * Cleanup sticker card templates * Remove date and description from article page * Set button theme options for 25 and 26 blocks * Create fixtures for Thanks page * Fix homepage blocks tests * Remove unused HTML and CSS * Create fixtures for article pages * Move pre footer to stream field on Download and Thanks pages * Add platform links to download page * Add static version of the stacked article list * Add fields for new article pages designs * Add missing fields from article index fixture * Fix article page fixtures * Fix heading on article index page * Move article detail heading to the top of the article * Centralize the article detail heading text * Add spacing to the article detail heading * Add 25 designs back to articles list page * Fix widths on stacked article list component * Add stacked article list component to the pattern library * Fix ariticle detail page image migration * Decouple stacked article list item into its own component * Revert "Fix UI Tour js by creating a flare26 variant" This reverts commit 4193c74. * Refactor ui tour buttons js to include 2026 expand link classes * Switch page CSS layer to be after components * Add preview for Download FX CTA snippet * Fix Download FX CTA styles * style revisions on article pages * 2025 navbar button fix * Fix article list tests * dark mode added to homepage, article pages * Fix issue with dark mode bg gradient rendering over text * Add default max width and paddings to the download intro * Add Pre-Footer CTA snippet to page fixtures * styles QA * Fix padding on download intro featured image for mobile and tablet * Add missing snippets to DB export * Localize platform names on Download page * Add TODO to remove 25 card selector when not used anymore * Remove unused ftl file * Address copilot suggestions * Thanks and download page CSS revisions * fixing banner design * Set main download intro heading font as condensed * Remove snippets from article page to use default snippets * Fix thanks page background * font style revisions * Nav fixes (#932) * Add new nav svg icons and css file * Reimplement browser nav menu * Make download button on nav a primary button again * Remove border top from mobile download button * Rename learn menu html file to resources, matching nomenclature * Improve spacing on browser nav menu * Reimplement features nav menu * Make nav styles closer to figma * Normalize sizes and colors for the hamburger and close buttons * Remove menu category border on desktop * Fix hamburger button bg after dark mode implementation * Remove nav menu caret down icons on mobile and tablet * Update logos * Fix button sizes on navbar * fixing span tests * fix download images * HTML added for download dropdown (#931) * HTML added for download dropdown * updated HTML, beginning of CSS for dropdown * download dropdown CSS * Update flare26-download.css * Use ch to determine min-width of download dropdown * Add js for mouse and keyboard interaction on the download dropdown * Add no-js css to disable cursor and button styles on dropdown --------- Co-authored-by: Luciano Ratamero <luciano@ratamero.com> * additional css revisions --------- Co-authored-by: Jo Sprague <github@iamlocaljo.com> Co-authored-by: Kasey Kelly <kasey@servee.com> Co-authored-by: Luciano Ratamero <luciano@ratamero.com> Co-authored-by: Dmitriy Chukhin <6025153+dchukhin@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
One-line summary
Significant changes and points to review
Issue / Bugzilla link
Testing