Tag design changes

Design changes:

* no longer uppercase
* no longer bold
* remove 1px extra letter spacing
* increase font size to 19px
* change colours to use lighter background colours

These changes are to improve the accessibility and readability of the tag text, and to make the tags look less like clickable buttons.

Update tag examples

Update test expectations

Update tests

Capitalise tag text in tags used in phase banner examples

Adjust spacing

src/govuk/components/phase-banner/__snapshots__/template.test.js.snap

@@ -2,20 +2,20 @@
 
 exports[`Phase banner with dependant components renders the tag component classes 1`] = `
 <strong class="govuk-tag govuk-phase-banner__content__tag govuk-tag--grey">
-  alpha
+  Alpha
 </strong>
 `;
 
 exports[`Phase banner with dependant components renders the tag component html 1`] = `
 <strong class="govuk-tag govuk-phase-banner__content__tag">
   <em>
-    alpha
+    Alpha
   </em>
 </strong>
 `;
 
 exports[`Phase banner with dependant components renders the tag component text 1`] = `
 <strong class="govuk-tag govuk-phase-banner__content__tag">
-  alpha
+  Alpha
 </strong>
 `;

src/govuk/components/phase-banner/phase-banner.yaml

@@ -25,7 +25,7 @@ examples:
   - name: default
     data:
       tag:
-        text: alpha
+        text: Alpha
       html: This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
@@ -54,11 +54,11 @@ examples:
     data:
       text: This is a new service – your feedback will help us to improve it
       tag:
-        html: <em>alpha</em>
+        html: <em>Alpha</em>
   - name: tag classes
     hidden: true
     data:
       text: This is a new service – your feedback will help us to improve it
       tag:
         classes: govuk-tag--grey
-        text: alpha
+        text: Alpha

src/govuk/components/tag/_index.scss

@@ -9,49 +9,54 @@
     outline: 2px solid transparent;
     outline-offset: -2px;
 
-    color: govuk-colour("white");
-    background-color: govuk-colour("blue");
-    letter-spacing: 1px;
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 70%);
 
     text-decoration: none;
-    text-transform: uppercase;
 
     @if $govuk-use-legacy-font {
       // Since New Transport sits slightly higher than other common fonts.
       // We use intentionally uneven padding to make it balanced, this can be
       // removed using the version of the font that has a more common vertical spacing.
-      @include govuk-font($size: 16, $weight: bold, $line-height: 1.25);
+      @include govuk-font($size: 19);
       padding-top: 4px;
       padding-right: 8px;
       padding-bottom: 1px;
       padding-left: 8px;
     } @else {
-      @include govuk-font($size: 16, $weight: bold, $line-height: 1);
-      padding-top: 5px;
+      @include govuk-font($size: 19);
+      margin-top: -3px;
+      margin-bottom: -3px;
+      padding-top: 3px;
       padding-right: 8px;
-      padding-bottom: 4px;
+      padding-bottom: 3px;
       padding-left: 8px;
     }
   }
 
   .govuk-tag--grey {
-    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 30%);
-    background: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 90%);
+    color: govuk-shade(govuk-colour("dark-grey", $legacy: "grey-1"), 50%);
+    background-color: govuk-tint(govuk-colour("dark-grey", $legacy: "grey-1"), 85%);
   }
 
   .govuk-tag--purple {
-    color: govuk-shade(govuk-colour("purple"), 20%);
-    background: govuk-tint(govuk-colour("purple"), 80%);
+    color: govuk-shade(govuk-colour("bright-purple"), 50%);
+    background-color: govuk-tint(govuk-colour("bright-purple"), 85%);
   }
 
   .govuk-tag--turquoise {
     color: govuk-shade(govuk-colour("turquoise"), 60%);
-    background: govuk-tint(govuk-colour("turquoise"), 70%);
+    background: govuk-tint(govuk-colour("turquoise"), 80%);
   }
 
   .govuk-tag--blue {
-    color: govuk-shade(govuk-colour("blue"), 30%);
-    background: govuk-tint(govuk-colour("blue"), 80%);
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background: govuk-tint(govuk-colour("blue"), 70%);
+  }
+
+  .govuk-tag--light-blue {
+    color: govuk-shade(govuk-colour("blue"), 60%);
+    background-color: govuk-tint(govuk-colour("blue"), 90%);
   }
 
   .govuk-tag--yellow {
@@ -65,17 +70,27 @@
   }
 
   .govuk-tag--red {
-    color: govuk-shade(govuk-colour("red"), 30%);
-    background: govuk-tint(govuk-colour("red"), 80%);
+    color: govuk-shade(govuk-colour("red"), 80%);
+    background: govuk-tint(govuk-colour("red"), 75%);
   }
 
   .govuk-tag--pink {
-    color: govuk-shade(govuk-colour("pink"), 40%);
-    background: govuk-tint(govuk-colour("pink"), 80%);
+    color: govuk-shade(govuk-colour("pink"), 50%);
+    background-color: govuk-tint(govuk-colour("pink"), 85%);
   }
 
   .govuk-tag--green {
     color: govuk-shade(govuk-colour("green"), 20%);
     background: govuk-tint(govuk-colour("green"), 80%);
   }
+
+  .govuk-tag--text-colour {
+    color: $govuk-text-colour;
+    background: transparent;
+  }
+
+  .govuk-tag--secondary-text-colour {
+    color: $govuk-secondary-text-colour;
+    background: transparent;
+  }
 }

src/govuk/components/tag/tag.yaml

@@ -19,11 +19,7 @@ params:
 examples:
   - name: default
     data:
-      text: alpha
-  - name: inactive
-    data:
-      text: alpha
-      classes: govuk-tag--grey
+      text: Alpha
   - name: grey
     data:
       text: Grey
@@ -32,6 +28,10 @@ examples:
     data:
       text: Blue
       classes: govuk-tag--blue
+  - name: light blue
+    data:
+      text: Light blue
+      classes: govuk-tag--light-blue
   - name: turquoise
     data:
       text: Turquoise
@@ -60,6 +60,14 @@ examples:
     data:
       text: Yellow
       classes: govuk-tag--yellow
+  - name: black
+    data:
+      text: Black
+      classes: govuk-tag--text-colour
+  - name: secondary
+    data:
+      text: Secondary
+      classes: govuk-tag--secondary-text-colour
 
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: attributes
@@ -72,8 +80,8 @@ examples:
   - name: html as text
     hidden: true
     data:
-      text: <span>alpha</span>
+      text: <span>Alpha</span>
   - name: html
     hidden: true
     data:
-      html: <span>alpha</span>
+      html: <span>Alpha</span>

src/govuk/components/tag/template.test.js

@@ -14,11 +14,11 @@ describe('Tag', () => {
 
       const $component = $('.govuk-tag')
       expect($component.get(0).tagName).toEqual('strong')
-      expect($component.text()).toContain('alpha')
+      expect($component.text()).toContain('Alpha')
     })
 
     it('renders classes', () => {
-      const $ = render('tag', examples.inactive)
+      const $ = render('tag', examples.grey)
 
       const $component = $('.govuk-tag')
       expect($component.hasClass('govuk-tag--grey')).toBeTruthy()
@@ -47,14 +47,14 @@ describe('Tag', () => {
       const $ = render('tag', examples['html as text'])
 
       const $component = $('.govuk-tag')
-      expect($component.html()).toContain('<span>alpha</span>')
+      expect($component.html()).toContain('<span>Alpha</span>')
     })
 
     it('renders html', () => {
       const $ = render('tag', examples.html)
 
       const $component = $('.govuk-tag')
-      expect($component.html()).toContain('<span>alpha</span>')
+      expect($component.html()).toContain('<span>Alpha</span>')
     })
   })
 })