TWE-22 | FE | Light mode

[shyusu4]

Link to Ticket

Description of Changes Made

• Re-added the dark/light mode toggle in the header
• Added the light mode color variables for themes (colors for motifs were added in TWE-28 | FE | New motifs #355)
• Modified featured services cards styles after design feedback from Ben E. (reduced line height for heading, mixin for the card hover style) And styled the subheading for TWE-9 - Add subheading to Featured Services Block #358
• Fine tuned styling for components in light mode to match the figma design

How to Test

View the components through the pattern library at http://localhost:8000/pattern-library/render-pattern/patterns/styleguide/components/components.html

Screenshots

Expand to see more

MR Checklist

• Add a description of your pull request and instructions for the reviewer to verify your work.
• If your pull request is for a specific ticket, link to it in the description.
• Stay on point and keep it small so the merge request can be easily reviewed.
• Tests and linting passes.

Unit tests

• Added
• Not required

Documentation

• Updated build docs
• Updated editor guidelines (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Updated field spec (See https://intranet.torchbox.com/torchbox-com-project-docs for the private link, for Torchbox employees only)
• Not required

Browser testing

• I have tested in the following browsers and environments (edit the list as required)
  • Latest version of Chrome on mac
  • Latest version of Firefox on mac
  • Latest version of Safari on mac
  • Safari on last two versions of iOS
  • Chrome on last two versions of Android
• Not required

Data protection

• Not relevant
• This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Light and dark mode

• I have tested the changes in both light and dark mode
• The change is not relevant to dark and light mode

Accessibility

• Automated WCAG 2.1 tests pass
• HTML validation passes
• Manual WCAG 2.1 tests completed
• I have tested in a screen reader
• I have tested in high-contrast mode
• Any animations removed for prefers-reduced-motion
• Not required

Sustainability

• Images are optimised and lazy-loading used where appropriate
• SVGs have been optimised
• Perfomance and transfer of data considered
• If JavaScript is needed alternatives have been considered
• Not required

Pattern library

• The pattern library component for this template displays correctly, and does not break parent templates
• The styleguide is updated if relevant
• Changes are not relevant the pattern library

[chris-lawton]

Nice work @shyusu4 - this is looking really good! 🙌

One small thing I noticed is that in high contrast light mode the active icon on the toggle doesn't remain visible:

Details

Screen.Recording.2025-02-11.at.17.23.24.mov

Aside from that it's all working as expected, nice one : )

[shyusu4]

Thank you, @chris-lawton! I've commited the fix

[chris-lawton]

All working - thanks @shyusu4!