Next

[IdaHW]

Description

Includes updates to the spacing and layout as part of the BM updates.
Update to remove the spaceholder text on sort code and date field

Checklist:

• The commit messages follow the convention for this project
• I have provided an adequate amount of test coverage
• I have added the functionality to the test app
• I have provided a story in storybook to document the changes
• I have added the documentation
• I have added any new public feature modules to public-api.ts

[Copilot]

Pull request overview

This pull request implements a comprehensive spacing and layout modernization as part of BM (Brand Modernization) updates. The changes migrate from a named spacing system (xxxs through xxxxl) to a numbered token system (1-10), introduce new CSS design tokens, update breakpoints, and remove placeholder text from form fields to improve accessibility.

Key changes:

• Migration from named spacing variables (--space-xxxs, --space-sm, etc.) to numbered tokens (--space-1, --space-4, etc.)
• Introduction of responsive spacing tokens that vary by breakpoint (sm/md vs lg/xl/xxl)
• Breakpoint changes: sm starts at 0 instead of 20rem, removal of xs breakpoint
• Removal of placeholder text from date and sort code inputs for better accessibility
• Modernization of Angular templates from *ngIf/*ngFor to @if/@for control flow syntax

Reviewed changes

Copilot reviewed 209 out of 209 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
scripts/generate-css-variables.js	Extended script to process both variables and tokens directories, with improved error handling
projects/canopy/src/styles/tokens/*.css	New CSS token files with comprehensive design token definitions
projects/canopy/src/styles/spacing.scss	Complete rewrite using responsive token system instead of fixed spacing values
projects/canopy/src/styles/mixins.scss	Updated sm breakpoint from 20rem to 0
Multiple component SCSS files	Updated spacing references from named to numbered system (e.g., --space-sm to --space-4)
projects/canopy/src/lib/forms/date/*	Removed placeholder text and migrated hint to component template for consistency
projects/canopy/src/lib/forms/sort-code/*	Removed placeholder attribute from directive
projects/canopy/src/lib/grid/*	Removed xs breakpoint support, migrated to sm as minimum
Multiple story files	Migrated Angular templates to new control flow syntax
Test files	Updated expectations to match new spacing values and removed unnecessary imports

---

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

[elenagarrone]

Migration guide

• date field: the placeholder has been removed as it was causing a11y issues. We have added the lg-hint component instead. This is added automatically to the codebase. Any existing hints used within the date field will not appear anymore.

• sort code: the placeholder has been removed as it was causing a11y issues. You will need to manually add an lg-hint component with text "Must be 6 digits long, for example 00-00-00".

• spacing and layout:

  • --space-unit has been removed; replace it with --space-4

  • the xs breakpoint has been removed; replace it with sm instead

  • the breakpoints are now: sm, md, lg, xl and xxl. Default is sm

  • Replaced spacing name with numbered values:

    Existing	New
    xxxs	1
    xxs	2
    xs	3
    sm	4
    md	5
    lg	6
    xl	7
    xxl	8
    xxxl	9
    xxxxl	10

    The above change affects:

    • the margin, padding and row gap directives, for example:
      Before:

      <div lgMarginTop="sm">...</div>
      <div lgPaddingBottom="md">...</div>
      <div lgRowGap="lg">...</div>
      

      After:

      <div lgMarginTop="4">...</div>
      <div lgPaddingBottom="5">...</div>
      <div lgRowGap="6">...</div>
      

    • the margin, padding and row gap classes, for example:
      Before:

      <div class="lg-margin__top--sm">...</div>
      <div class="lg-padding__bottom--xxxl">...</div>
      <div class="lg-row-gap--xxs">...</div>
      

      After:

      <div class="lg-margin__top--4">...</div>
      <div class="lg-padding__bottom--9">...</div>
      <div class="lg-row-gap--2">...</div>
      

    • the spacing CSS variables names:

      Spacing variables map

      Existing token	New token
      --space-xxxs	--space-1
      --space-xxs	--space-2
      --space-xs	--space-3
      --space-sm	--space-4
      --space-md	--space-5
      --space-lg	--space-6
      --space-xl	--space-7
      --space-xxl	--space-8
      --space-xxxl	--space-9
      --space-xxxxl	--space-10

[github-actions]

🎉 This PR is included in version 19.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀