From c1db8352d70ea96d27e8b0d8acbe4de71a1ae0dc Mon Sep 17 00:00:00 2001
From: Adam Silver <adambsilver@gmail.com>
Date: Fri, 24 Jan 2020 11:17:20 +0000
Subject: [PATCH] Added additional colour modifiers for Tag component

---
 src/govuk/components/tag/_tag.scss | 46 ++++++++++++++++++++++++++++++
 src/govuk/components/tag/tag.yaml  | 36 +++++++++++++++++++++++
 2 files changed, 82 insertions(+)

diff --git a/src/govuk/components/tag/_tag.scss b/src/govuk/components/tag/_tag.scss
index 895113d399..060bfdbbf8 100644
--- a/src/govuk/components/tag/_tag.scss
+++ b/src/govuk/components/tag/_tag.scss
@@ -41,4 +41,50 @@
   .govuk-tag--inactive {
     background-color: govuk-colour("dark-grey", $legacy: "grey-1");
   }
+
+  .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);
+  }
+
+  .govuk-tag--purple {
+    color: govuk-shade(govuk-colour("purple"), 20);
+    background: govuk-tint(govuk-colour("purple"), 80);
+  }
+
+  .govuk-tag--turquoise {
+    color: govuk-shade(govuk-colour("turquoise"), 60);
+    background: govuk-tint(govuk-colour("turquoise"), 70);
+  }
+
+  .govuk-tag--blue {
+    color: govuk-shade(govuk-colour("blue"), 30);
+    background: govuk-tint(govuk-colour("blue"), 80);
+  }
+
+  .govuk-tag--yellow {
+    color: govuk-shade(govuk-colour("yellow"), 65);
+    background: govuk-tint(govuk-colour("yellow"), 75);
+  }
+
+  .govuk-tag--orange {
+    color: govuk-shade(govuk-colour("orange"), 55);
+    background: govuk-tint(govuk-colour("orange"), 70);
+  }
+
+  .govuk-tag--red {
+    color: govuk-shade(govuk-colour("red"), 30);
+    background: govuk-tint(govuk-colour("red"), 80);
+  }
+
+  .govuk-tag--pink {
+    color: govuk-shade(govuk-colour("pink"), 40);
+    background: govuk-tint(govuk-colour("pink"), 80);
+  }
+
+  .govuk-tag--green {
+    color: govuk-shade(govuk-colour("green"), 20);
+    background: govuk-tint(govuk-colour("green"), 80);
+  }
+
 }
diff --git a/src/govuk/components/tag/tag.yaml b/src/govuk/components/tag/tag.yaml
index 59e8f0b7e9..a3fa0781f9 100644
--- a/src/govuk/components/tag/tag.yaml
+++ b/src/govuk/components/tag/tag.yaml
@@ -24,3 +24,39 @@ examples:
    data:
     text: alpha
     classes: govuk-tag--inactive
+ - name: grey
+   data:
+    text: Grey
+    classes: govuk-tag--grey
+ - name: blue
+   data:
+    text: Blue
+    classes: govuk-tag--blue
+ - name: turquoise
+   data:
+    text: Turquoise
+    classes: govuk-tag--turquoise
+ - name: green
+   data:
+    text: Green
+    classes: govuk-tag--green
+ - name: purple
+   data:
+    text: Purple
+    classes: govuk-tag--purple
+ - name: pink
+   data:
+    text: Pink
+    classes: govuk-tag--pink
+ - name: red
+   data:
+    text: Red
+    classes: govuk-tag--red
+ - name: orange
+   data:
+    text: Orange
+    classes: govuk-tag--orange
+ - name: yellow
+   data:
+    text: Yellow
+    classes: govuk-tag--yellow