Added additional colour modifiers for Tag component

alphagov · Jan 24, 2020 · c1db835 · c1db835
1 parent 1d2fcb6
commit c1db835
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
diff --git 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
@@ -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