Next

.storybook/preview-head.html

@@ -10,7 +10,7 @@
 
   /* Custom styling to override Storybook docs global styles */
   .sbdocs .lg-sb-preview .sb-story {
-    padding: 0 var(--space-xxxl);
+    padding: 0 var(--space-9);
     border: 0.3rem solid var(--colour-greyscale-200);
     border-radius: 0.3rem;
     background-color: var(--colour-greyscale-100);
@@ -19,7 +19,7 @@
   .sbdocs .sb-story [id^="story"][data-name] {
     display: block;
     background-color: var(--colour-greyscale-0);
-    padding: var(--space-lg);
+    padding: var(--space-6);
   }
 
   .sbdocs h1.css-wzniqs {
@@ -35,28 +35,28 @@
     line-height: var(--line-height-4) !important;
     padding: 0 !important;
     border: none !important;
-    margin: var(--space-xxl) 0 var(--space-sm) !important;
+    margin: var(--space-8) 0 var(--space-4) !important;
   }
 
   .sbdocs h3.css-wzniqs {
     font-size: var(--font-size-3) !important;
     font-weight: var(--font-weight-400) !important;
     line-height: var(--line-height-3) !important;
-    margin: var(--space-lg) 0 var(--space-sm) !important;
+    margin: var(--space-6) 0 var(--space-4) !important;
   }
 
   .sbdocs h4.css-wzniqs {
     font-size: var(--font-size-2) !important;
     font-weight: var(--font-weight-700) !important;
     line-height: var(--line-height-2) !important;
-    margin: var(--space-lg) 0 var(--space-sm) !important;
+    margin: var(--space-6) 0 var(--space-4) !important;
   }
 
   .sbdocs h5.css-wzniqs {
     font-size: var(--font-size-1) !important;
     font-weight: var(--font-weight-700) !important;
     line-height: var(--line-height-1) !important;
-    margin: var(--space-lg) 0 var(--space-sm) !important;
+    margin: var(--space-6) 0 var(--space-4) !important;
   }
 
   .sbdocs .css-unwacp {
@@ -75,7 +75,7 @@
     font-size: var(--font-size-3) !important;
     font-weight: var(--font-weight-300) !important;
     line-height: var(--line-height-3) !important;
-    margin-bottom: var(--space-lg) !important;
+    margin-bottom: var(--space-6) !important;
   }
 
   .sbdocs h1.css-wzniqs a,

projects/canopy-test-app/src/app/app.component.html

@@ -68,7 +68,7 @@
                   </lg-hero-card-data-point-label>
                   <lg-hero-card-data-point-value>
                     2T
-                    <span lgMarginLeft="sm" class="lg-font-size-1"
+                    <span lgMarginLeft="4" class="lg-font-size-1"
                       >Received on 12 Mar 2019</span
                       >
                     </lg-hero-card-data-point-value>
@@ -90,15 +90,15 @@
       <div lgContainer>
         <div lgRow>
           <div lgCol="12">
-            <aside lg-card-group lgMarginBottom="xl">
+            <aside lg-card-group lgMarginBottom="7">
               <lg-card>
                 <lg-card-header>
                   <lg-card-navigation-title title="The title" link="/foo" [headingLevel]="2" />
                 </lg-card-header>
                 <lg-card-content>
                   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </lg-card-content>
-                <lg-card-footer lgMarginTop="md" lgPaddingTop="none">
+                <lg-card-footer lgMarginTop="5" lgPaddingTop="none">
                   <lg-link-menu>
                     <a href="" target="_blank">
                       <lg-link-menu-item>
@@ -162,7 +162,7 @@
                       aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
                       voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                     </p>
-                    <button lg-button lgMarginTop="sm" variant="primary-dark">
+                    <button lg-button lgMarginTop="4" variant="primary-dark">
                       Test primary dark button
                     </button>
                   </lg-accordion-item>
@@ -232,27 +232,27 @@
                 </button>
                 <br />
 
-                <button lg-button variant="primary-dark" size="sm">
+                <button lg-button variant="primary-dark" size="4">
                   Small button
                 </button>
                 <br />
 
-                <button lg-button variant="primary-dark" size="sm" [loading]="true">
+                <button lg-button variant="primary-dark" size="4" [loading]="true">
                   Small button
                 </button>
                 <br />
 
                 <div>
-                  <div class="light-buttons-container" lgPadding="md" lgMarginBottom="lg">
-                    <button lg-button variant="primary-light" lgMarginRight="sm">
+                  <div class="light-buttons-container" lgPadding="5" lgMarginBottom="6">
+                    <button lg-button variant="primary-light" lgMarginRight="4">
                       Primary Light
                     </button>
                     <button lg-button variant="secondary-light">
                       Secondary Light
                     </button>
                   </div>
-                  <div class="light-buttons-container" lgPadding="sm">
-                    <button lg-button variant="primary-light" lgMarginRight="sm">
+                  <div class="light-buttons-container" lgPadding="4">
+                    <button lg-button variant="primary-light" lgMarginRight="4">
                       Primary Light
                     </button>
                     <button lg-button variant="secondary-light">
@@ -403,7 +403,6 @@ <h3>Carousel item 3</h3>
                     <lg-filter-container-panel-body>
                       <lg-date-field>
                         Date of birth
-                        <lg-hint>e.g. 05 12 1980</lg-hint>
                       </lg-date-field>
 
                       <lg-checkbox-group>
@@ -505,7 +504,6 @@ <h3>Carousel item 3</h3>
 
                   <lg-date-field formControlName="date">
                     Date of birth
-                    <lg-hint>e.g. 05 12 1980</lg-hint>
                   </lg-date-field>
 
                   <lg-checkbox-group formControlName="colors" lgMarginBottom="none">
@@ -556,7 +554,7 @@ <h3>Carousel item 3</h3>
 
                   <lg-input-field>
                     Sort Code
-                    <lg-hint>Must be 6 digits long</lg-hint>
+                    <lg-hint>Must be 6 digits long, for example 00-00-00</lg-hint>
                     <input lgInput lgSortCode formControlName="sortCode" />
                   </lg-input-field>
 
@@ -614,7 +612,7 @@ <h3>Carousel item 3</h3>
                     <a href="#">eiusmod tempor</a> incididunt ut labore et dolore magna aliqua.
                   </lg-primary-message-description>
                   <lg-primary-message-description>
-                    <button lg-button variant="primary-dark" lgMarginTop="sm" type="button">
+                    <button lg-button variant="primary-dark" lgMarginTop="4" type="button">
                       Call to action
                     </button>
                   </lg-primary-message-description>
@@ -688,7 +686,7 @@ <h3>Carousel item 3</h3>
                 <lg-heading level="3">Quick Action</lg-heading>
 
                 <lg-heading level="4">Button</lg-heading>
-                <button lg-quick-action lgMarginBottom="md">
+                <button lg-quick-action lgMarginBottom="5">
                   <lg-icon name="repeat" />
                   Load more
                 </button>
@@ -707,26 +705,26 @@ <h3>Carousel item 3</h3>
 
                   <lg-spinner variant="color"
                     text="Medium Spinner"
-                    lgMarginTop="xxl"
+                    lgMarginTop="8"
                    />
 
                   <lg-spinner variant="color"
                     text="Small spinner"
-                    lgMarginTop="xxl"
+                    lgMarginTop="8"
                     size="sm"
                    />
 
                   <lg-spinner variant="color"
                     text="Extra Small spinner"
-                    lgMarginTop="xxl"
+                    lgMarginTop="8"
                     size="xs"
                    />
                   <lg-separator />
-                  <div lgPaddingBottom="xxl">
+                  <div lgPaddingBottom="8">
                     <lg-heading level="3">Progress bar</lg-heading>
                     <lg-progress-bar [value]="3" [max]="5" />
                   </div>
-                  <div lgPaddingVertical="xxl">
+                  <div lgPaddingVertical="8">
                     <lg-heading level="3">Progress indicator</lg-heading>
                     <lg-progress-indicator [value]="3" [max]="5">
                       Withdraw money
@@ -870,7 +868,7 @@ <h3>Carousel item 3</h3>
                   <lg-heading level="4">Pagination</lg-heading>
                   <lg-card lgPadding="none">
                     <lg-card-content>
-                      <lg-pagination lgMargin="xs" itemsPerPage="5" totalItems="20" />
+                      <lg-pagination lgMargin="3" itemsPerPage="5" totalItems="20" />
                     </lg-card-content>
                   </lg-card>
 
@@ -911,7 +909,7 @@ <h3>Carousel item 3</h3>
                     <div lgRow>
                       <div lgCol="12" lgColLg="8" lgColLgOffset="2" lgColMd="10" lgColMdOffset="1">
                         <lg-card lgPadding="none">
-                          <lg-card-header lgPadding="sm" lgPaddingBottom="xs" lgMarginBottom="lg">
+                          <lg-card-header lgPadding="4" lgPaddingBottom="3" lgMarginBottom="6">
                             <lg-breadcrumb lgMarginBottom="none">
                               <lg-breadcrumb-item>
                                 <a href="#">
@@ -943,7 +941,7 @@ <h3>Carousel item 3</h3>
                             <div lgContainer>
                               <div lgRow>
                                 <div lgCol="12" lgColMd="10" lgColMdOffset="1">
-                                  <button lg-button type="button" variant="secondary-dark" lgMarginRight="sm">Back</button>
+                                  <button lg-button type="button" variant="secondary-dark" lgMarginRight="4">Back</button>
                                   <button lg-button type="submit" variant="primary-dark">Confirm</button>
                                 </div>
                               </div>

projects/canopy/src/lib/accordion/accordion-item/accordion-item.component.scss

@@ -1,6 +1,6 @@
 .lg-accordion__panel {
   display: none;
-  padding: var(--space-md) var(--space-sm) var(--space-sm);
+  padding: var(--space-5) var(--space-4) var(--space-4);
   background-color: var(--accordion-bg-color);
 
   *:last-child {

projects/canopy/src/lib/accordion/accordion-panel-heading/accordion-panel-heading.component.scss

@@ -22,13 +22,13 @@
   border-top: solid var(--border-width) var(--accordion-border-color);
   cursor: pointer;
   display: block;
-  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xxl);
+  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-8);
   position: relative;
   text-align: left;
   width: 100%;
 
   &--with-icon {
-    padding-right: var(--space-xxl);
+    padding-right: var(--space-8);
   }
 
   &:focus-visible {
@@ -38,10 +38,10 @@
   }
 
   .lg-accordion__heading-icon {
-    margin-left: var(--space-sm);
-    margin-right: var(--space-sm);
-    width: var(--space-md);
-    height: var(--space-md);
+    margin-left: var(--space-4);
+    margin-right: var(--space-4);
+    width: var(--space-5);
+    height: var(--space-5);
     pointer-events: none;
 
     &--animated {
@@ -56,7 +56,7 @@
   lg-icon {
     position: absolute;
     left: 0;
-    top: calc(50% - var(--space-md) / 2);
+    top: calc(50% - var(--space-5) / 2);
 
     &:first-child {
       @extend .lg-accordion__heading-icon;

projects/canopy/src/lib/accordion/docs/accordion.stories.ts

@@ -14,26 +14,41 @@ const accordionItems = `
 <lg-accordion-item [isActive]="itemOneActive"
                    (opened)="toggle('Item 1 opened')"
                    (closed)="toggle('Item 1 closed')">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForFirstAccordionItem" [name]="iconForFirstAccordionItem"></lg-icon>Item 1</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForFirstAccordionItem) {
+      <lg-icon [name]="iconForFirstAccordionItem"></lg-icon>
+    }
+    Item 1
+  </lg-accordion-panel-heading>
 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua.</p>
 </lg-accordion-item>
 <lg-accordion-item [isActive]="itemTwoActive"
                    (opened)="toggle('Item 3 opened')"
                    (closed)="toggle('Item 2 closed')">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForSecondAccordionItem" [name]="iconForSecondAccordionItem"></lg-icon>Item 2</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForSecondAccordionItem) {
+      <lg-icon [name]="iconForSecondAccordionItem"></lg-icon>
+    }
+    Item 2
+  </lg-accordion-panel-heading>
 
   <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
     ut aliquip ex ea commodo consequat. Duis aute irure dolor in
     <a href="#">reprehenderit</a> in voluptate velit esse cillum dolore eu fugiat nulla
     pariatur.</p>
-  <button lg-button lgMarginTop="sm" variant="primary-dark">
+  <button lg-button lgMarginTop="4" variant="primary-dark">
     Test primary button
   </button>
 </lg-accordion-item>
 <lg-accordion-item [isActive]="itemThreeActive">
-  <lg-accordion-panel-heading><lg-icon *ngIf="iconForThirdAccordionItem" [name]="iconForThirdAccordionItem"></lg-icon>Item 3 is Lazy</lg-accordion-panel-heading>
+  <lg-accordion-panel-heading>
+    @if (iconForThirdAccordionItem) {
+      <lg-icon [name]="iconForThirdAccordionItem"></lg-icon>
+    }
+    Item 3 is Lazy
+  </lg-accordion-panel-heading>
 
   <ng-template lgAccordionItemContent>
     <p>This panel content is only initialised when opened</p>
@@ -50,7 +65,7 @@ const standardTemplate = `<lg-accordion [headingLevel]="headingLevel" [multi]=mu
     `
       :host {
         display: block;
-        padding: var(--space-sm);
+        padding: var(--space-4);
       }
     `,
   ],

projects/canopy/src/lib/accordion/docs/guide.mdx

@@ -48,7 +48,7 @@ and in your HTML:
       ut aliquip ex ea commodo consequat. Duis aute irure dolor in
       reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
       pariatur.</p>
-    <button lg-button lgMarginTop="sm" variant="primary-dark">
+    <button lg-button lgMarginTop="4" variant="primary-dark">
       Test primary button
     </button>
   </lg-accordion-item>

projects/canopy/src/lib/alert/alert.component.scss

@@ -3,7 +3,7 @@
 .lg-alert {
   display: flex;
   margin-bottom: var(--component-margin);
-  padding: var(--space-sm);
+  padding: var(--space-4);
 
   h1,
   h2,
@@ -18,5 +18,5 @@
 }
 
 .lg-alert__icon {
-  margin-right: var(--space-xs);
+  margin-right: var(--space-3);
 }

projects/canopy/src/lib/banner/banner.component.scss

@@ -38,7 +38,7 @@
 
 .lg-banner__container {
   display: flex;
-  padding: var(--space-sm) 0;
+  padding: var(--space-4) 0;
 
   h1,
   h2,
@@ -52,6 +52,6 @@
   }
 
   .lg-banner__icon {
-    margin-right: var(--space-xs);
+    margin-right: var(--space-3);
   }
 }

projects/canopy/src/lib/brand-icon/docs/brand-icons.stories.ts

@@ -31,14 +31,14 @@ import { lgBrandIconsArray } from '../../brand-icons-files';
       }
 
       .swatch {
-        margin: var(--space-md);
+        margin: var(--space-5);
         flex: 0 0 8rem;
       }
 
       .swatch__name {
         display: block;
         text-align: center;
-        margin-top: var(--space-xxs);
+        margin-top: var(--space-2);
       }
 
       .swatch__svg {