Change all utility classes to match 8pix grid

[MagdalenaLarge]

As Interaction Designer
I want to change all utility classes to match 8 pix grid
So that it is easier to design content of the ONS website

Description
It was highlighted by Interaction Designers that majority of Design System components are set up with 9 pix grid.
However there is no consistency and we also identified some with 8pix.
In preparation for the ONS website, we need to standardise all utility classes to match 8 pix grid.
This change will improve the quality of the Design System.

Acceptance Criteria

1. All the utility classes have with 9 pix has been identified
2. All utility classes has been changed to 8 pix grid

Visualisation/Input from UCD
How should the components look like?
Linked User stories/epics
Technical details

All we need to change is the _typography file within the vars folder with the below :

$base: 16px;

$type-matrix: (
    ons-u-fs-xxxl: (
        small: 32px,
        large: 48px,
        weight: $font-weight-bold,
        line-height-mobile: 44px,
        line-height-desktop: 56px
    ),
    ons-u-fs-xxl: (
        small: 28px,
        large: 36px,
        weight: $font-weight-bold,
        line-height-mobile: 40px,
        line-height-desktop: 48px
    ),
    ons-u-fs-xl: (
        small: 26px,
        large: 30px,
        weight: $font-weight-bold,
        line-height-mobile: 36px,
        line-height-desktop: 40px
    ),
    ons-u-fs-l: (
        small: 24px,
        large: 26px,
        weight: $font-weight-bold,
        line-height-mobile: 32px,
        line-height-desktop: 36px
    ),
    ons-u-fs-m: (
        small: 20px,
        large: 22px,
        weight: $font-weight-bold,
        line-height-mobile: 28px,
        line-height-desktop: 32px
    ),
    ons-u-fs-r--b: (
        small: 18px,
        large: 18px,
        weight: $font-weight-bold,
        line-height-mobile: 28px,
        line-height-desktop: 28px
    ),
    ons-u-fs-r: (
        small: 18px,
        large: 18px,
        weight: $font-weight-regular,
        line-height-mobile: 28px,
        line-height-desktop: 28px
    ),
    ons-u-fs-s--b: (
        small: 14px,
        large: 14px,
        weight: $font-weight-bold,
        line-height-mobile: 20px,
        line-height-desktop: 20px
    ),
    ons-u-fs-s: (
        small: 14px,
        large: 14px,
        weight: $font-weight-regular,
        line-height-mobile: 20px,
        line-height-desktop: 20px
    ),
);

And we also need to update the typography file in the utilities folder with the below :

@mixin font-size($props, $base) {
    $small-size: map.get($props, small);
    $large-size: map.get($props, large);

    font-size: rems($small-size, $base);
    font-weight: map.get($props, weight);
    line-height: map.get($props, line-height-mobile);

    @if $small-size != $large-size {
        @include mq(m) {
            font-size: rems($large-size, $base);
            line-height: map.get($props, line-height-desktop)
        }
    }
}

This will also update the line height value for mobile and desktop view
MVP (optional)

[MagdalenaLarge]

For the reference please use the Typography advised by Interaction Designers.

[MagdalenaLarge]

Ticket will incorporate the work described in ticket #73

[Majsol]

[alessioventuriniAND]

@Majsol and Gareth will need to look into margin and padding sizing as the change of the root font size to 16px will not only impact the font size but also the computed value of rems which is the unit we use for our margin and paddings.

[alessioventuriniAND]

Update on this work :

I have replaced the below:

margin-top
margin-left
margin-right
margin-bottom

with the relevant margin utility class. I have also added the new margin and padding sizes and replace the old utility classes across the repo with the new correspondent ones.

//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,
);

I have also updated our font size type matrix to match the new 8px grid. By changing our root font size to 16px our rems are now calculated using the 8px grid. I have also set the body font size to 18px as per the new type matrix.

I have updated all the shorthand margin declaration with the closest size listed in our sizing grid. We should look to introduce vertical and horizontal margin and padding utility classes that we can replace all our shorthand margin with the relevant utility class.

Padding has been decided not to be touched for now. I have however also replace the old utility classes with the new correct size.

Line height has been updated as per our new grid.

Considerations.

We can't extend classes inside our media queries so we will have margin properties manually set inside media queries.