@biggive/components 202309201242.0.0 → 202309211700.0.0

package/dist/collection/components/biggive-page-section/biggive-page-section.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;
@@ -250,8 +252,8 @@ a:hover {
 
 .container.background-color-primary:before,
 .container.background-color-primary:after,
-.container.background-color-primary .sleeve,
-.container.background-color-primary .sleeve:before {
+.container.background-color-primary .sleeve:before,
+.container.background-color-primary .sleeve {
   background-color: #2C089B;
   color: #FFFFFF;
 }
@@ -312,14 +314,70 @@ a:hover {
   color: #FFFFFF;
 }
 
-.container.background-color-brand-6:before,
-.container.background-color-brand-6:after,
-.container.background-color-brand-6 .sleeve:before,
-.container.background-color-brand-6 .sleeve {
+.container.background-color-brand-cc-red:before,
+.container.background-color-brand-cc-red:after,
+.container.background-color-brand-cc-red .sleeve:before,
+.container.background-color-brand-cc-red .sleeve {
+  background-color: #B30510;
+  color: #FFFFFF;
+}
+
+.container.background-color-brand-wgmf-purple:before,
+.container.background-color-brand-wgmf-purple:after,
+.container.background-color-brand-wgmf-purple .sleeve:before,
+.container.background-color-brand-wgmf-purple .sleeve {
+  background-color: #6E0887;
+  color: #FFFFFF;
+}
+
+.container.background-color-brand-gmf-green:before,
+.container.background-color-brand-gmf-green:after,
+.container.background-color-brand-gmf-green .sleeve:before,
+.container.background-color-brand-gmf-green .sleeve {
+  background-color: #50B400;
+  color: #FFFFFF;
+}
+
+.container.background-color-brand-emf-yellow:before,
+.container.background-color-brand-emf-yellow:after,
+.container.background-color-brand-emf-yellow .sleeve:before,
+.container.background-color-brand-emf-yellow .sleeve {
+  background-color: #FFE500;
+  color: #FFFFFF;
+}
+
+.container.background-color-brand-c4c-orange:before,
+.container.background-color-brand-c4c-orange:after,
+.container.background-color-brand-c4c-orange .sleeve:before,
+.container.background-color-brand-c4c-orange .sleeve {
+  background-color: #F07D00;
+  color: #FFFFFF;
+}
+
+.container.background-color-brand-afa-pink:before,
+.container.background-color-brand-afa-pink:after,
+.container.background-color-brand-afa-pink .sleeve:before,
+.container.background-color-brand-afa-pink .sleeve {
+  background-color: #BF387D;
+  color: #FFFFFF;
+}
+
+.container.background-color-brand-mhf-turquoise:before,
+.container.background-color-brand-mhf-turquoise:after,
+.container.background-color-brand-mhf-turquoise .sleeve:before,
+.container.background-color-brand-mhf-turquoise .sleeve {
   background-color: #62CFC9;
   color: #FFFFFF;
 }
 
+.container.background-color-brand-grey:before,
+.container.background-color-brand-grey:after,
+.container.background-color-brand-grey .sleeve:before,
+.container.background-color-brand-grey .sleeve {
+  background-color: #CBC8C8;
+  color: #FFFFFF;
+}
+
 .container.background-color-white:before,
 .container.background-color-white:after,
 .container.background-color-white .sleeve:before,
@@ -366,4 +424,12 @@ a:hover {
 .container.background-color-grey-dark .sleeve {
   background-color: #4A4A4A;
   color: #FFFFFF;
+}
+
+.container.background-color-brand-6:before,
+.container.background-color-brand-6:after,
+.container.background-color-brand-6 .sleeve:before,
+.container.background-color-brand-6 .sleeve {
+  background-color: #62CFC9;
+  color: #FFFFFF;
 }

package/dist/collection/components/biggive-popup/biggive-popup.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-progress-bar/biggive-progress-bar.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-quote/biggive-quote.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;
@@ -111,6 +113,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;
@@ -213,12 +240,30 @@ a:hover {
 .container.quote-icon-colour-brand-5 .image-wrap path {
   fill: #F07D00;
 }
-.container.quote-icon-colour-brand-6 .image-wrap path {
-  fill: #62CFC9;
+.container.quote-icon-colour-brand-cc-red .image-wrap path {
+  fill: #B30510;
+}
+.container.quote-icon-colour-brand-wgmf-purple .image-wrap path {
+  fill: #6E0887;
+}
+.container.quote-icon-colour-brand-gmf-green .image-wrap path {
+  fill: #50B400;
+}
+.container.quote-icon-colour-brand-emf-yellow .image-wrap path {
+  fill: #FFE500;
+}
+.container.quote-icon-colour-brand-c4c-orange .image-wrap path {
+  fill: #F07D00;
 }
 .container.quote-icon-colour-brand-afa-pink .image-wrap path {
   fill: #BF387D;
 }
+.container.quote-icon-colour-brand-mhf-turquoise .image-wrap path {
+  fill: #62CFC9;
+}
+.container.quote-icon-colour-brand-grey .image-wrap path {
+  fill: #CBC8C8;
+}
 .container.quote-icon-colour-white .image-wrap path {
   fill: #FFFFFF;
 }
@@ -237,6 +282,9 @@ a:hover {
 .container.quote-icon-colour-grey-dark .image-wrap path {
   fill: #4A4A4A;
 }
+.container.quote-icon-colour-brand-6 .image-wrap path {
+  fill: #62CFC9;
+}
 @media screen and (max-width: 768px) {
   .container {
     padding: 45px;

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

@@ -52,7 +52,7 @@ export class BiggiveQuote {
         "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",
@@ -111,7 +111,7 @@ export class BiggiveQuote {
         "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-sheet/biggive-sheet.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;
@@ -222,6 +274,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;
 }
@@ -329,12 +401,30 @@ a:hover {
 .container .popup .header .back-link .svg-wrap.colour-brand-5 svg path {
   fill: #F07D00;
 }
-.container .popup .header .back-link .svg-wrap.colour-brand-6 svg path {
-  fill: #62CFC9;
+.container .popup .header .back-link .svg-wrap.colour-brand-cc-red svg path {
+  fill: #B30510;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-wgmf-purple svg path {
+  fill: #6E0887;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-gmf-green svg path {
+  fill: #50B400;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-emf-yellow svg path {
+  fill: #FFE500;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-c4c-orange svg path {
+  fill: #F07D00;
 }
 .container .popup .header .back-link .svg-wrap.colour-brand-afa-pink svg path {
   fill: #BF387D;
 }
+.container .popup .header .back-link .svg-wrap.colour-brand-mhf-turquoise svg path {
+  fill: #62CFC9;
+}
+.container .popup .header .back-link .svg-wrap.colour-brand-grey svg path {
+  fill: #CBC8C8;
+}
 .container .popup .header .back-link .svg-wrap.colour-white svg path {
   fill: #FFFFFF;
 }
@@ -353,6 +443,9 @@ a:hover {
 .container .popup .header .back-link .svg-wrap.colour-grey-dark svg path {
   fill: #4A4A4A;
 }
+.container .popup .header .back-link .svg-wrap.colour-brand-6 svg path {
+  fill: #62CFC9;
+}
 .container .popup .header .back-link .svg-wrap svg {
   height: 14px;
   width: auto;

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

@@ -64,7 +64,7 @@ export class BiggiveSheet {
         "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",
@@ -87,7 +87,7 @@ export class BiggiveSheet {
         "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-social-icon/biggive-social-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-tab/biggive-tab.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-tabbed-content/biggive-tabbed-content.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;
@@ -372,24 +399,100 @@ a:hover {
 .container.button-icon-colour-brand-5 .navigation .button svg path {
   stroke: #F07D00;
 }
-.container.text-colour-brand-6 .navigation li {
-  color: #62CFC9;
+.container.text-colour-brand-cc-red .navigation li {
+  color: #B30510;
 }
-.container.navigation-highlight-colour-brand-6 .navigation ul {
-  border-color: #62CFC9;
+.container.navigation-highlight-colour-brand-cc-red .navigation ul {
+  border-color: #B30510;
 }
-.container.selected-text-colour-brand-6 .navigation li.selected {
-  color: #62CFC9;
-  border-color: #62CFC9;
+.container.selected-text-colour-brand-cc-red .navigation li.selected {
+  color: #B30510;
+  border-color: #B30510;
 }
-.container.selected-navigation-highlight-colour-brand-6 .navigation li.selected {
-  border-color: #62CFC9;
+.container.selected-navigation-highlight-colour-brand-cc-red .navigation li.selected {
+  border-color: #B30510;
 }
-.container.button-background-colour-brand-6 .navigation .button {
-  background-color: #62CFC9;
+.container.button-background-colour-brand-cc-red .navigation .button {
+  background-color: #B30510;
 }
-.container.button-icon-colour-brand-6 .navigation .button svg path {
-  stroke: #62CFC9;
+.container.button-icon-colour-brand-cc-red .navigation .button svg path {
+  stroke: #B30510;
+}
+.container.text-colour-brand-wgmf-purple .navigation li {
+  color: #6E0887;
+}
+.container.navigation-highlight-colour-brand-wgmf-purple .navigation ul {
+  border-color: #6E0887;
+}
+.container.selected-text-colour-brand-wgmf-purple .navigation li.selected {
+  color: #6E0887;
+  border-color: #6E0887;
+}
+.container.selected-navigation-highlight-colour-brand-wgmf-purple .navigation li.selected {
+  border-color: #6E0887;
+}
+.container.button-background-colour-brand-wgmf-purple .navigation .button {
+  background-color: #6E0887;
+}
+.container.button-icon-colour-brand-wgmf-purple .navigation .button svg path {
+  stroke: #6E0887;
+}
+.container.text-colour-brand-gmf-green .navigation li {
+  color: #50B400;
+}
+.container.navigation-highlight-colour-brand-gmf-green .navigation ul {
+  border-color: #50B400;
+}
+.container.selected-text-colour-brand-gmf-green .navigation li.selected {
+  color: #50B400;
+  border-color: #50B400;
+}
+.container.selected-navigation-highlight-colour-brand-gmf-green .navigation li.selected {
+  border-color: #50B400;
+}
+.container.button-background-colour-brand-gmf-green .navigation .button {
+  background-color: #50B400;
+}
+.container.button-icon-colour-brand-gmf-green .navigation .button svg path {
+  stroke: #50B400;
+}
+.container.text-colour-brand-emf-yellow .navigation li {
+  color: #FFE500;
+}
+.container.navigation-highlight-colour-brand-emf-yellow .navigation ul {
+  border-color: #FFE500;
+}
+.container.selected-text-colour-brand-emf-yellow .navigation li.selected {
+  color: #FFE500;
+  border-color: #FFE500;
+}
+.container.selected-navigation-highlight-colour-brand-emf-yellow .navigation li.selected {
+  border-color: #FFE500;
+}
+.container.button-background-colour-brand-emf-yellow .navigation .button {
+  background-color: #FFE500;
+}
+.container.button-icon-colour-brand-emf-yellow .navigation .button svg path {
+  stroke: #FFE500;
+}
+.container.text-colour-brand-c4c-orange .navigation li {
+  color: #F07D00;
+}
+.container.navigation-highlight-colour-brand-c4c-orange .navigation ul {
+  border-color: #F07D00;
+}
+.container.selected-text-colour-brand-c4c-orange .navigation li.selected {
+  color: #F07D00;
+  border-color: #F07D00;
+}
+.container.selected-navigation-highlight-colour-brand-c4c-orange .navigation li.selected {
+  border-color: #F07D00;
+}
+.container.button-background-colour-brand-c4c-orange .navigation .button {
+  background-color: #F07D00;
+}
+.container.button-icon-colour-brand-c4c-orange .navigation .button svg path {
+  stroke: #F07D00;
 }
 .container.text-colour-brand-afa-pink .navigation li {
   color: #BF387D;
@@ -410,6 +513,44 @@ a:hover {
 .container.button-icon-colour-brand-afa-pink .navigation .button svg path {
   stroke: #BF387D;
 }
+.container.text-colour-brand-mhf-turquoise .navigation li {
+  color: #62CFC9;
+}
+.container.navigation-highlight-colour-brand-mhf-turquoise .navigation ul {
+  border-color: #62CFC9;
+}
+.container.selected-text-colour-brand-mhf-turquoise .navigation li.selected {
+  color: #62CFC9;
+  border-color: #62CFC9;
+}
+.container.selected-navigation-highlight-colour-brand-mhf-turquoise .navigation li.selected {
+  border-color: #62CFC9;
+}
+.container.button-background-colour-brand-mhf-turquoise .navigation .button {
+  background-color: #62CFC9;
+}
+.container.button-icon-colour-brand-mhf-turquoise .navigation .button svg path {
+  stroke: #62CFC9;
+}
+.container.text-colour-brand-grey .navigation li {
+  color: #CBC8C8;
+}
+.container.navigation-highlight-colour-brand-grey .navigation ul {
+  border-color: #CBC8C8;
+}
+.container.selected-text-colour-brand-grey .navigation li.selected {
+  color: #CBC8C8;
+  border-color: #CBC8C8;
+}
+.container.selected-navigation-highlight-colour-brand-grey .navigation li.selected {
+  border-color: #CBC8C8;
+}
+.container.button-background-colour-brand-grey .navigation .button {
+  background-color: #CBC8C8;
+}
+.container.button-icon-colour-brand-grey .navigation .button svg path {
+  stroke: #CBC8C8;
+}
 .container.text-colour-white .navigation li {
   color: #FFFFFF;
 }
@@ -523,4 +664,23 @@ a:hover {
 }
 .container.button-icon-colour-grey-dark .navigation .button svg path {
   stroke: #4A4A4A;
+}
+.container.text-colour-brand-6 .navigation li {
+  color: #62CFC9;
+}
+.container.navigation-highlight-colour-brand-6 .navigation ul {
+  border-color: #62CFC9;
+}
+.container.selected-text-colour-brand-6 .navigation li.selected {
+  color: #62CFC9;
+  border-color: #62CFC9;
+}
+.container.selected-navigation-highlight-colour-brand-6 .navigation li.selected {
+  border-color: #62CFC9;
+}
+.container.button-background-colour-brand-6 .navigation .button {
+  background-color: #62CFC9;
+}
+.container.button-icon-colour-brand-6 .navigation .button svg path {
+  stroke: #62CFC9;
 }