Introduction of new spacing grid

[alessioventuriniAND]

What is the context of this PR?

Some changes have been made to our current spacing grid. Our rems used to be 18px , they are now 16px.
We have also aligned all of our components line height to the below table. So any component that had a bespoke line height has been edited to the closest match where possible.

The type matrix has been updated to reflect the below table.

BREAKING CHANGES

• Description of change: New margin and padding sizes and have been introduced and relevant utility classes have been updated with the new corresponding size

• Reason for change: As we have changed the size of our rems to be 16px we needed to introduce new sizes to support our updated spacing grid.

• Components impacted:

  • Any component or layout where you have manually set our margin or padding utility classes.

• Migration steps:

  1. Locate all instances of the utility classes in your codebase.
  2. Replace old size name with new corresponding size name
  • Click for example:

    EG: 
    .ons-u-mt-xs --> .ons-u-mt-2xs
    .ons-u-mb-xl --> .ons-u-mb-3xl
    //OLD Sizes
    $sizes: (
        no: 0,
        xxs: 0.25rem,
        xs: 0.5rem,
        s: 1rem,
        m: 1.5rem,
        l: 2rem,
        xl: 3rem,
        auto: auto,
    );
    
    //NEW Sizes 
    $sizes: (
        no: 0,
        4xs: 0.125rem,
        3xs: 0.25rem,
        2xs: 0.5rem,
        xs: 0.75rem,
        s: 1rem,
        m: 1.25rem,
        l: 1.5rem,
        xl: 2rem,
        2xl: 2.5rem,
        3xl: 3rem,
        4xl: 4rem,
        5xl: 5rem,
        auto: auto,
    );

Considerations.

Some visual changes have been applied to buttons.

How to review this PR

The VR tests will look different. The button and inputs have been aligned with the Figma library whilst the rest of the components should just be slightly smaller due to our smaller rems(now 16px) If you see bigger changes in the VR tests please highlight it.

Checklist

This needs to be completed by the person raising the PR.

• I have selected the correct Assignee
• I have linked the correct Issue

[netlify]

✅ Deploy Preview for ons-design-system-preview ready!

Name	Link
🔨 Latest commit	33e2cca
🔍 Latest deploy log	https://app.netlify.com/sites/ons-design-system-preview/deploys/670534ef71851b0008173869
😎 Deploy Preview	https://deploy-preview-3285--ons-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.