@biggive/components 202309201242.0.0 → 202309211700.0.0

package/dist/collection/components/biggive-icon-button/biggive-icon-button.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -50,6 +52,31 @@ a:hover {
   background-color: #F07D00;
 }
 
+.background-colour-hover-brand-cc-red:hover,
+.background-colour-brand-cc-red {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-wgmf-purple:hover,
+.background-colour-brand-wgmf-purple {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-gmf-green:hover,
+.background-colour-brand-gmf-green {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-emf-yellow:hover,
+.background-colour-brand-emf-yellow {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-c4c-orange:hover,
+.background-colour-brand-c4c-orange {
+  background-color: #F07D00;
+}
+
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
@@ -196,6 +223,31 @@ a:hover {
   color: #F07D00;
 }
 
+.text-colour-hover-brand-cc-red:hover,
+.text-colour-brand-cc-red {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-wgmf-purple:hover,
+.text-colour-brand-wgmf-purple {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-gmf-green:hover,
+.text-colour-brand-gmf-green {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-emf-yellow:hover,
+.text-colour-brand-emf-yellow {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-c4c-orange:hover,
+.text-colour-brand-c4c-orange {
+  color: #F07D00;
+}
+
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;
@@ -341,12 +393,30 @@ a:hover {
 .container .sleeve .arrow-wrap.arrow-colour-brand-5 .arrow-wrap svg path {
   stroke: #F07D00;
 }
-.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path {
-  stroke: #62CFC9;
+.container .sleeve .arrow-wrap.arrow-colour-brand-cc-red .arrow-wrap svg path {
+  stroke: #B30510;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-wgmf-purple .arrow-wrap svg path {
+  stroke: #6E0887;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-gmf-green .arrow-wrap svg path {
+  stroke: #50B400;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-emf-yellow .arrow-wrap svg path {
+  stroke: #FFE500;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-c4c-orange .arrow-wrap svg path {
+  stroke: #F07D00;
 }
 .container .sleeve .arrow-wrap.arrow-colour-brand-afa-pink .arrow-wrap svg path {
   stroke: #BF387D;
 }
+.container .sleeve .arrow-wrap.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path {
+  stroke: #62CFC9;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-grey .arrow-wrap svg path {
+  stroke: #CBC8C8;
+}
 .container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path {
   stroke: #FFFFFF;
 }
@@ -365,6 +435,9 @@ a:hover {
 .container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path {
   stroke: #4A4A4A;
 }
+.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path {
+  stroke: #62CFC9;
+}
 .container .icon-wrap {
   background-position: center center;
   background-size: cover;
@@ -424,12 +497,30 @@ a:hover {
 .container.arrow-colour-brand-5 .arrow-wrap svg path {
   stroke: #F07D00;
 }
-.container.arrow-colour-brand-6 .arrow-wrap svg path {
-  stroke: #62CFC9;
+.container.arrow-colour-brand-cc-red .arrow-wrap svg path {
+  stroke: #B30510;
+}
+.container.arrow-colour-brand-wgmf-purple .arrow-wrap svg path {
+  stroke: #6E0887;
+}
+.container.arrow-colour-brand-gmf-green .arrow-wrap svg path {
+  stroke: #50B400;
+}
+.container.arrow-colour-brand-emf-yellow .arrow-wrap svg path {
+  stroke: #FFE500;
+}
+.container.arrow-colour-brand-c4c-orange .arrow-wrap svg path {
+  stroke: #F07D00;
 }
 .container.arrow-colour-brand-afa-pink .arrow-wrap svg path {
   stroke: #BF387D;
 }
+.container.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path {
+  stroke: #62CFC9;
+}
+.container.arrow-colour-brand-grey .arrow-wrap svg path {
+  stroke: #CBC8C8;
+}
 .container.arrow-colour-white .arrow-wrap svg path {
   stroke: #FFFFFF;
 }
@@ -447,4 +538,7 @@ a:hover {
 }
 .container.arrow-colour-grey-dark .arrow-wrap svg path {
   stroke: #4A4A4A;
+}
+.container.arrow-colour-brand-6 .arrow-wrap svg path {
+  stroke: #62CFC9;
 }

package/dist/collection/components/biggive-icon-button/biggive-icon-button.js

@@ -78,7 +78,7 @@ export class BiggiveIconButton {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -141,7 +141,7 @@ export class BiggiveIconButton {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -269,7 +269,7 @@ export class BiggiveIconButton {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",

package/dist/collection/components/biggive-icon-group/biggive-icon-group.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-image/biggive-image.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-image-button/biggive-image-button.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -50,6 +52,31 @@ a:hover {
   background-color: #F07D00;
 }
 
+.background-colour-hover-brand-cc-red:hover,
+.background-colour-brand-cc-red {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-wgmf-purple:hover,
+.background-colour-brand-wgmf-purple {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-gmf-green:hover,
+.background-colour-brand-gmf-green {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-emf-yellow:hover,
+.background-colour-brand-emf-yellow {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-c4c-orange:hover,
+.background-colour-brand-c4c-orange {
+  background-color: #F07D00;
+}
+
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
@@ -140,6 +167,31 @@ a:hover {
   color: #F07D00;
 }
 
+.text-colour-hover-brand-cc-red:hover,
+.text-colour-brand-cc-red {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-wgmf-purple:hover,
+.text-colour-brand-wgmf-purple {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-gmf-green:hover,
+.text-colour-brand-gmf-green {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-emf-yellow:hover,
+.text-colour-brand-emf-yellow {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-c4c-orange:hover,
+.text-colour-brand-c4c-orange {
+  color: #F07D00;
+}
+
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;
@@ -341,12 +393,30 @@ a:hover {
 .container .sleeve .arrow-wrap.arrow-colour-brand-5 .arrow-wrap svg path {
   stroke: #F07D00;
 }
-.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path {
-  stroke: #62CFC9;
+.container .sleeve .arrow-wrap.arrow-colour-brand-cc-red .arrow-wrap svg path {
+  stroke: #B30510;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-wgmf-purple .arrow-wrap svg path {
+  stroke: #6E0887;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-gmf-green .arrow-wrap svg path {
+  stroke: #50B400;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-emf-yellow .arrow-wrap svg path {
+  stroke: #FFE500;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-c4c-orange .arrow-wrap svg path {
+  stroke: #F07D00;
 }
 .container .sleeve .arrow-wrap.arrow-colour-brand-afa-pink .arrow-wrap svg path {
   stroke: #BF387D;
 }
+.container .sleeve .arrow-wrap.arrow-colour-brand-mhf-turquoise .arrow-wrap svg path {
+  stroke: #62CFC9;
+}
+.container .sleeve .arrow-wrap.arrow-colour-brand-grey .arrow-wrap svg path {
+  stroke: #CBC8C8;
+}
 .container .sleeve .arrow-wrap.arrow-colour-white .arrow-wrap svg path {
   stroke: #FFFFFF;
 }
@@ -365,6 +435,9 @@ a:hover {
 .container .sleeve .arrow-wrap.arrow-colour-grey-dark .arrow-wrap svg path {
   stroke: #4A4A4A;
 }
+.container .sleeve .arrow-wrap.arrow-colour-brand-6 .arrow-wrap svg path {
+  stroke: #62CFC9;
+}
 .container .image-wrap {
   background-position: center center;
   background-size: cover;

package/dist/collection/components/biggive-image-button/biggive-image-button.js

@@ -78,7 +78,7 @@ export class BiggiveImageButton {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -141,7 +141,7 @@ export class BiggiveImageButton {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -270,7 +270,7 @@ export class BiggiveImageButton {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",

package/dist/collection/components/biggive-image-card/biggive-image-card.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -50,6 +52,31 @@ a:hover {
   background-color: #F07D00;
 }
 
+.background-colour-hover-brand-cc-red:hover,
+.background-colour-brand-cc-red {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-wgmf-purple:hover,
+.background-colour-brand-wgmf-purple {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-gmf-green:hover,
+.background-colour-brand-gmf-green {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-emf-yellow:hover,
+.background-colour-brand-emf-yellow {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-c4c-orange:hover,
+.background-colour-brand-c4c-orange {
+  background-color: #F07D00;
+}
+
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
@@ -132,6 +159,26 @@ a:hover {
   fill: #F07D00;
 }
 
+.fill-brand-cc-red {
+  fill: #B30510;
+}
+
+.fill-brand-wgmf-purple {
+  fill: #6E0887;
+}
+
+.fill-brand-gmf-green {
+  fill: #50B400;
+}
+
+.fill-brand-emf-yellow {
+  fill: #FFE500;
+}
+
+.fill-brand-c4c-orange {
+  fill: #F07D00;
+}
+
 .fill-brand-afa-pink {
   fill: #BF387D;
 }
@@ -268,6 +315,31 @@ a:hover {
   color: #F07D00;
 }
 
+.text-colour-hover-brand-cc-red:hover,
+.text-colour-brand-cc-red {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-wgmf-purple:hover,
+.text-colour-brand-wgmf-purple {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-gmf-green:hover,
+.text-colour-brand-gmf-green {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-emf-yellow:hover,
+.text-colour-brand-emf-yellow {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-c4c-orange:hover,
+.text-colour-brand-c4c-orange {
+  color: #F07D00;
+}
+
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;

package/dist/collection/components/biggive-image-card/biggive-image-card.js

@@ -71,7 +71,7 @@ export class BiggiveImageCard {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",
@@ -163,7 +163,7 @@ export class BiggiveImageCard {
         "mutable": false,
         "complexType": {
           "original": "brandColour",
-          "resolved": "\"black\" | \"brand-1\" | \"brand-2\" | \"brand-3\" | \"brand-4\" | \"brand-5\" | \"brand-6\" | \"brand-afa-pink\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
+          "resolved": "\"black\" | \"brand-afa-pink\" | \"brand-c4c-orange\" | \"brand-cc-red\" | \"brand-emf-yellow\" | \"brand-gmf-green\" | \"brand-grey\" | \"brand-mhf-turquoise\" | \"brand-wgmf-purple\" | \"grey-dark\" | \"grey-extra-light\" | \"grey-light\" | \"grey-medium\" | \"primary\" | \"secondary\" | \"tertiary\" | \"white\"",
           "references": {
             "brandColour": {
               "location": "import",

package/dist/collection/components/biggive-image-feature/biggive-image-feature.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -55,6 +57,31 @@ a:hover {
   color: #F07D00;
 }
 
+.text-colour-hover-brand-cc-red:hover,
+.text-colour-brand-cc-red {
+  color: #B30510;
+}
+
+.text-colour-hover-brand-wgmf-purple:hover,
+.text-colour-brand-wgmf-purple {
+  color: #6E0887;
+}
+
+.text-colour-hover-brand-gmf-green:hover,
+.text-colour-brand-gmf-green {
+  color: #50B400;
+}
+
+.text-colour-hover-brand-emf-yellow:hover,
+.text-colour-brand-emf-yellow {
+  color: #FFE500;
+}
+
+.text-colour-hover-brand-c4c-orange:hover,
+.text-colour-brand-c4c-orange {
+  color: #F07D00;
+}
+
 .text-colour-hover-brand-afa-pink:hover,
 .text-colour-brand-afa-pink {
   color: #BF387D;

package/dist/collection/components/biggive-main-menu/biggive-main-menu.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-misc-icon/biggive-misc-icon.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;
@@ -50,6 +52,31 @@ a:hover {
   background-color: #F07D00;
 }
 
+.background-colour-hover-brand-cc-red:hover,
+.background-colour-brand-cc-red {
+  background-color: #B30510;
+}
+
+.background-colour-hover-brand-wgmf-purple:hover,
+.background-colour-brand-wgmf-purple {
+  background-color: #6E0887;
+}
+
+.background-colour-hover-brand-gmf-green:hover,
+.background-colour-brand-gmf-green {
+  background-color: #50B400;
+}
+
+.background-colour-hover-brand-emf-yellow:hover,
+.background-colour-brand-emf-yellow {
+  background-color: #FFE500;
+}
+
+.background-colour-hover-brand-c4c-orange:hover,
+.background-colour-brand-c4c-orange {
+  background-color: #F07D00;
+}
+
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
@@ -132,6 +159,26 @@ a:hover {
   fill: #F07D00;
 }
 
+.fill-brand-cc-red {
+  fill: #B30510;
+}
+
+.fill-brand-wgmf-purple {
+  fill: #6E0887;
+}
+
+.fill-brand-gmf-green {
+  fill: #50B400;
+}
+
+.fill-brand-emf-yellow {
+  fill: #FFE500;
+}
+
+.fill-brand-c4c-orange {
+  fill: #F07D00;
+}
+
 .fill-brand-afa-pink {
   fill: #BF387D;
 }

package/dist/collection/components/biggive-nav-group/biggive-nav-group.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-nav-item/biggive-nav-item.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-page-column/biggive-page-column.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-page-columns/biggive-page-columns.css

@@ -1,6 +1,8 @@
 /**
  * @see brandColour in src/globals/brand-colour.ts . This and that should be updated together.
  * Also see mixin icon-large - that repeats this list of colours and specifies another colour to go with each one, e.g. white or black.
+ * 
+ * NOTE: brand-1 to brand-5 are deprecated, please use the color brands instead
  */
 a {
   color: inherit;