Add outline to tag for customised colours

[NickColley]

Adds a border to the tag element so it makes more sense when colours are overridden.

The screenshots I've included here show the tag component when used in the phase banner component.

Uses relative spacing to keep alignment when the label is on a smaller screen.

Before overriden colours

After overriden colours

Before regular colours

After regular colours

Smaller screens:

Before overriden colours

After overriden colours

Before regular colours

After regular colours

[36degrees]

I know you flagged this as part of your comment, but this results in the height of this component changing from 25px to 27px. As far as I know, all components should have a height which is a multiple of 5px.

[36degrees]

Given we've got #845 open to try and remove our only current usage of em for padding, do we want to be introducing it again here, or should we be using pixels?

Also, can this be a single padding rule as the values are all the same?

[NickColley]

I'd prefer to use relative units since it means when the tag is resized the padding is in proportion. Will show screenshots, before and after PX.

The padding results are not all the same, but I'll see if I can reduce the repeitition (I personally do not like shorthand since it's like doing function(many, arguments, order, isimportant) vs function({ order: 'not important' }) etc)

[36degrees]

I think other components like the button keep the same dimensions when the font-size reduces (because the line-height is constant) so I'd expect this component to work in the same way… especially as we want to keep the /5 vertical rhythm.

Totally failed to notice that padding-bottom was different so… that's fine 👍

[NickColley]

OK, good to know, thanks Ollie. I still think the relative spacing looks more balanced but if it's to get the grid alignment that makes sense I guess...

(Should probably have this written down)

[NickColley]

@36degrees I've adjusted this PR based on your comments and ended up with something very similar to the original:

[36degrees]

To avoid having to change the line height, padding, etc, can we add a transparent outline instead? The only change then needed would be:

    outline: 1px solid transparent;
    outline-offset: -1px;

Thoughts?

[NickColley]

Could do yeah, would prefer to use borders since we can 'see' them. Up to you.

[NickColley]

I'll change this, it also means the modifiers get outlines for free without additional CSS :)

[NickColley]

OK, went with the transparent outline approach in the end.

Before outline

After outline

[36degrees]

👏