@biggive/components 202309201242.0.0 → 202309211700.0.0

package/dist/collection/components/biggive-accordion/biggive-accordion.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;
@@ -106,6 +108,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;
@@ -265,14 +292,50 @@ a:hover {
 .container.text-colour-brand-5 .content {
   color: #F07D00;
 }
-.container.heading-colour-brand-6 .entry h3.heading svg path {
-  stroke: #62CFC9;
+.container.heading-colour-brand-cc-red .entry h3.heading svg path {
+  stroke: #B30510;
 }
-.container.heading-colour-brand-6 h3.heading {
-  color: #62CFC9;
+.container.heading-colour-brand-cc-red h3.heading {
+  color: #B30510;
 }
-.container.text-colour-brand-6 .content {
-  color: #62CFC9;
+.container.text-colour-brand-cc-red .content {
+  color: #B30510;
+}
+.container.heading-colour-brand-wgmf-purple .entry h3.heading svg path {
+  stroke: #6E0887;
+}
+.container.heading-colour-brand-wgmf-purple h3.heading {
+  color: #6E0887;
+}
+.container.text-colour-brand-wgmf-purple .content {
+  color: #6E0887;
+}
+.container.heading-colour-brand-gmf-green .entry h3.heading svg path {
+  stroke: #50B400;
+}
+.container.heading-colour-brand-gmf-green h3.heading {
+  color: #50B400;
+}
+.container.text-colour-brand-gmf-green .content {
+  color: #50B400;
+}
+.container.heading-colour-brand-emf-yellow .entry h3.heading svg path {
+  stroke: #FFE500;
+}
+.container.heading-colour-brand-emf-yellow h3.heading {
+  color: #FFE500;
+}
+.container.text-colour-brand-emf-yellow .content {
+  color: #FFE500;
+}
+.container.heading-colour-brand-c4c-orange .entry h3.heading svg path {
+  stroke: #F07D00;
+}
+.container.heading-colour-brand-c4c-orange h3.heading {
+  color: #F07D00;
+}
+.container.text-colour-brand-c4c-orange .content {
+  color: #F07D00;
 }
 .container.heading-colour-brand-afa-pink .entry h3.heading svg path {
   stroke: #BF387D;
@@ -283,6 +346,24 @@ a:hover {
 .container.text-colour-brand-afa-pink .content {
   color: #BF387D;
 }
+.container.heading-colour-brand-mhf-turquoise .entry h3.heading svg path {
+  stroke: #62CFC9;
+}
+.container.heading-colour-brand-mhf-turquoise h3.heading {
+  color: #62CFC9;
+}
+.container.text-colour-brand-mhf-turquoise .content {
+  color: #62CFC9;
+}
+.container.heading-colour-brand-grey .entry h3.heading svg path {
+  stroke: #CBC8C8;
+}
+.container.heading-colour-brand-grey h3.heading {
+  color: #CBC8C8;
+}
+.container.text-colour-brand-grey .content {
+  color: #CBC8C8;
+}
 .container.heading-colour-white .entry h3.heading svg path {
   stroke: #FFFFFF;
 }
@@ -336,4 +417,13 @@ a:hover {
 }
 .container.text-colour-grey-dark .content {
   color: #4A4A4A;
+}
+.container.heading-colour-brand-6 .entry h3.heading svg path {
+  stroke: #62CFC9;
+}
+.container.heading-colour-brand-6 h3.heading {
+  color: #62CFC9;
+}
+.container.text-colour-brand-6 .content {
+  color: #62CFC9;
 }

package/dist/collection/components/biggive-accordion/biggive-accordion.js

@@ -69,7 +69,7 @@ export class BiggiveAccordion {
         "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",
@@ -92,7 +92,7 @@ export class BiggiveAccordion {
         "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-accordion-entry/biggive-accordion-entry.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-article-card/biggive-article-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;
@@ -201,6 +228,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;
@@ -435,17 +487,65 @@ a:hover {
 .container .image-label-colour-brand-5 .image-label {
   color: #F07D00;
 }
-.container .main-title-colour-brand-6 h3 {
-  color: #62CFC9;
+.container .main-title-colour-brand-cc-red h3 {
+  color: #B30510;
 }
-.container .slug-colour-brand-6 .slug {
-  color: #62CFC9;
+.container .slug-colour-brand-cc-red .slug {
+  color: #B30510;
 }
-.container .date-colour-brand-6 .date {
-  color: #62CFC9;
+.container .date-colour-brand-cc-red .date {
+  color: #B30510;
 }
-.container .image-label-colour-brand-6 .image-label {
-  color: #62CFC9;
+.container .image-label-colour-brand-cc-red .image-label {
+  color: #B30510;
+}
+.container .main-title-colour-brand-wgmf-purple h3 {
+  color: #6E0887;
+}
+.container .slug-colour-brand-wgmf-purple .slug {
+  color: #6E0887;
+}
+.container .date-colour-brand-wgmf-purple .date {
+  color: #6E0887;
+}
+.container .image-label-colour-brand-wgmf-purple .image-label {
+  color: #6E0887;
+}
+.container .main-title-colour-brand-gmf-green h3 {
+  color: #50B400;
+}
+.container .slug-colour-brand-gmf-green .slug {
+  color: #50B400;
+}
+.container .date-colour-brand-gmf-green .date {
+  color: #50B400;
+}
+.container .image-label-colour-brand-gmf-green .image-label {
+  color: #50B400;
+}
+.container .main-title-colour-brand-emf-yellow h3 {
+  color: #FFE500;
+}
+.container .slug-colour-brand-emf-yellow .slug {
+  color: #FFE500;
+}
+.container .date-colour-brand-emf-yellow .date {
+  color: #FFE500;
+}
+.container .image-label-colour-brand-emf-yellow .image-label {
+  color: #FFE500;
+}
+.container .main-title-colour-brand-c4c-orange h3 {
+  color: #F07D00;
+}
+.container .slug-colour-brand-c4c-orange .slug {
+  color: #F07D00;
+}
+.container .date-colour-brand-c4c-orange .date {
+  color: #F07D00;
+}
+.container .image-label-colour-brand-c4c-orange .image-label {
+  color: #F07D00;
 }
 .container .main-title-colour-brand-afa-pink h3 {
   color: #BF387D;
@@ -459,6 +559,30 @@ a:hover {
 .container .image-label-colour-brand-afa-pink .image-label {
   color: #BF387D;
 }
+.container .main-title-colour-brand-mhf-turquoise h3 {
+  color: #62CFC9;
+}
+.container .slug-colour-brand-mhf-turquoise .slug {
+  color: #62CFC9;
+}
+.container .date-colour-brand-mhf-turquoise .date {
+  color: #62CFC9;
+}
+.container .image-label-colour-brand-mhf-turquoise .image-label {
+  color: #62CFC9;
+}
+.container .main-title-colour-brand-grey h3 {
+  color: #CBC8C8;
+}
+.container .slug-colour-brand-grey .slug {
+  color: #CBC8C8;
+}
+.container .date-colour-brand-grey .date {
+  color: #CBC8C8;
+}
+.container .image-label-colour-brand-grey .image-label {
+  color: #CBC8C8;
+}
 .container .main-title-colour-white h3 {
   color: #FFFFFF;
 }
@@ -530,4 +654,16 @@ a:hover {
 }
 .container .image-label-colour-grey-dark .image-label {
   color: #4A4A4A;
+}
+.container .main-title-colour-brand-6 h3 {
+  color: #62CFC9;
+}
+.container .slug-colour-brand-6 .slug {
+  color: #62CFC9;
+}
+.container .date-colour-brand-6 .date {
+  color: #62CFC9;
+}
+.container .image-label-colour-brand-6 .image-label {
+  color: #62CFC9;
 }

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

@@ -85,7 +85,7 @@ export class BiggiveArticleCard {
         "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",
@@ -143,7 +143,7 @@ export class BiggiveArticleCard {
         "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",
@@ -183,7 +183,7 @@ export class BiggiveArticleCard {
         "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",
@@ -223,7 +223,7 @@ export class BiggiveArticleCard {
         "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",
@@ -365,7 +365,7 @@ export class BiggiveArticleCard {
         "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",
@@ -422,7 +422,7 @@ export class BiggiveArticleCard {
         "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-back-to-top/biggive-back-to-top.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-basic-card/biggive-basic-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-basic-card/biggive-basic-card.js

@@ -78,7 +78,7 @@ export class BiggiveBasicCard {
         "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",
@@ -119,7 +119,7 @@ export class BiggiveBasicCard {
         "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",
@@ -142,7 +142,7 @@ export class BiggiveBasicCard {
         "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",
@@ -268,7 +268,7 @@ export class BiggiveBasicCard {
         "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-beneficiary-icon/biggive-beneficiary-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;
 }