@biggive/components 202309200915.0.0 → 202309201242.0.0

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;
@@ -138,13 +139,13 @@ a:hover {
 }
 
 .button-secondary {
-  color: #000000;
+  color: #FFFFFF;
   background-color: #2AF135;
   border-color: #2AF135;
 }
 .button-secondary:hover {
+  color: #2AF135;
   background-color: #FFFFFF;
-  border-color: #000000;
 }
 
 .button-tertiary {
@@ -153,6 +154,7 @@ a:hover {
   border-color: #FF7272;
 }
 .button-tertiary:hover {
+  color: #FF7272;
   background-color: #FFFFFF;
 }
 
@@ -162,6 +164,7 @@ a:hover {
   border-color: #B30510;
 }
 .button-brand-1:hover {
+  color: #B30510;
   background-color: #FFFFFF;
 }
 
@@ -171,6 +174,7 @@ a:hover {
   border-color: #6E0887;
 }
 .button-brand-2:hover {
+  color: #6E0887;
   background-color: #FFFFFF;
 }
 
@@ -180,6 +184,7 @@ a:hover {
   border-color: #50B400;
 }
 .button-brand-3:hover {
+  color: #50B400;
   background-color: #FFFFFF;
 }
 
@@ -189,7 +194,28 @@ a:hover {
   border-color: #FFE500;
 }
 .button-brand-4:hover {
-  background-color: #000000;
+  color: #FFE500;
+  background-color: #FFFFFF;
+}
+
+.button-brand-5 {
+  color: #FFFFFF;
+  background-color: #F07D00;
+  border-color: #F07D00;
+}
+.button-brand-5:hover {
+  color: #F07D00;
+  background-color: #FFFFFF;
+}
+
+.button-brand-afa-pink {
+  color: #FFFFFF;
+  background-color: #BF387D;
+  border-color: #BF387D;
+}
+.button-brand-afa-pink:hover {
+  color: #BF387D;
+  background-color: #FFFFFF;
 }
 
 .button-brand-mhf-turquoise {
@@ -198,15 +224,77 @@ a:hover {
   border-color: #62CFC9;
 }
 .button-brand-mhf-turquoise:hover {
+  color: #62CFC9;
+  background-color: #FFFFFF;
+}
+
+.button-brand-grey {
+  color: #FFFFFF;
+  background-color: #CBC8C8;
+  border-color: #CBC8C8;
+}
+.button-brand-grey:hover {
+  color: #CBC8C8;
+  background-color: #FFFFFF;
+}
+
+.button-white {
+  color: #FFFFFF;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.button-white:hover {
+  color: #FFFFFF;
+  background-color: #FFFFFF;
+}
+
+.button-black {
+  color: #FFFFFF;
   background-color: #000000;
+  border-color: #000000;
+}
+.button-black:hover {
+  color: #000000;
+  background-color: #FFFFFF;
 }
 
-.button-brand-5 {
+.button-grey-extra-light {
   color: #FFFFFF;
-  background-color: #F07D00;
-  border-color: #F07D00;
+  background-color: #D7D7D7;
+  border-color: #D7D7D7;
 }
-.button-brand-5:hover {
+.button-grey-extra-light:hover {
+  color: #D7D7D7;
+  background-color: #FFFFFF;
+}
+
+.button-grey-light {
+  color: #FFFFFF;
+  background-color: #E8E8E8;
+  border-color: #E8E8E8;
+}
+.button-grey-light:hover {
+  color: #E8E8E8;
+  background-color: #FFFFFF;
+}
+
+.button-grey-medium {
+  color: #FFFFFF;
+  background-color: #8A8A8A;
+  border-color: #8A8A8A;
+}
+.button-grey-medium:hover {
+  color: #8A8A8A;
+  background-color: #FFFFFF;
+}
+
+.button-grey-dark {
+  color: #FFFFFF;
+  background-color: #4A4A4A;
+  border-color: #4A4A4A;
+}
+.button-grey-dark:hover {
+  color: #4A4A4A;
   background-color: #FFFFFF;
 }
 
@@ -219,19 +307,36 @@ a:hover {
   background-color: #000000;
 }
 
-.button-brand-afa-pink {
+.button-secondary {
+  color: #000000;
+}
+.button-secondary:hover {
+  color: #000000;
+  background-color: #FFFFFF;
+  border-color: #000000;
+}
+
+.button-brand-4:hover {
+  background-color: #000000;
+}
+
+.button-brand-grey {
   color: #FFFFFF;
-  background-color: #BF387D;
-  border-color: #BF387D;
 }
+.button-brand-grey:hover {
+  background-color: #000000;
+}
+
+.button-brand-mhf-turquoise:hover {
+  background-color: #000000;
+}
+
 .button-brand-afa-pink:hover {
   background-color: #000000;
 }
 
 .button-white {
   color: #2C089B;
-  background-color: #FFFFFF;
-  border-color: #FFFFFF;
 }
 .button-white:hover {
   color: #000000;
@@ -240,51 +345,36 @@ a:hover {
 
 .button-black {
   color: #FFFFFF;
-  background-color: #000000;
-  border-color: #000000;
 }
 .button-black:hover {
-  color: #000000;
   background-color: #FFFFFF;
 }
 
 .button-grey-extra-light {
   color: #000000;
-  background-color: #D7D7D7;
-  border-color: #D7D7D7;
 }
 .button-grey-extra-light:hover {
-  color: #D7D7D7;
   background-color: #000000;
 }
 
 .button-grey-light {
   color: #000000;
-  background-color: #E8E8E8;
-  border-color: #E8E8E8;
 }
 .button-grey-light:hover {
-  color: #E8E8E8;
   background-color: #000000;
 }
 
 .button-grey-medium {
   color: #FFFFFF;
-  background-color: #8A8A8A;
-  border-color: #8A8A8A;
 }
 .button-grey-medium:hover {
-  color: #8A8A8A;
   background-color: #FFFFFF;
 }
 
 .button-grey-dark {
   color: #FFFFFF;
-  background-color: #4A4A4A;
-  border-color: #4A4A4A;
 }
 .button-grey-dark:hover {
-  color: #4A4A4A;
   background-color: #FFFFFF;
 }
 

package/dist/collection/components/biggive-call-to-action/biggive-call-to-action.css

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-campaign-card-filter-grid/biggive-campaign-card-filter-grid.css

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-campaign-highlights/biggive-campaign-highlights.css

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;
@@ -49,16 +50,21 @@ a:hover {
   background-color: #F07D00;
 }
 
-.background-colour-hover-brand-6:hover,
-.background-colour-brand-6 {
-  background-color: #62CFC9;
-}
-
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
 }
 
+.background-colour-hover-brand-mhf-turquoise:hover,
+.background-colour-brand-mhf-turquoise {
+  background-color: #62CFC9;
+}
+
+.background-colour-hover-brand-grey:hover,
+.background-colour-brand-grey {
+  background-color: #CBC8C8;
+}
+
 .background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
@@ -69,11 +75,6 @@ a:hover {
   background-color: #000000;
 }
 
-.background-colour-hover-white:hover,
-.background-colour-white {
-  background-color: #FFFFFF;
-}
-
 .background-colour-hover-grey-extra-light:hover,
 .background-colour-grey-extra-light {
   background-color: #D7D7D7;
@@ -94,6 +95,11 @@ a:hover {
   background-color: #4A4A4A;
 }
 
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #62CFC9;
+}
+
 .fill-primary {
   fill: #2C089B;
 }
@@ -126,10 +132,6 @@ a:hover {
   fill: #F07D00;
 }
 
-.fill-brand-6 {
-  fill: #CBC8C8;
-}
-
 .fill-brand-afa-pink {
   fill: #BF387D;
 }
@@ -138,6 +140,10 @@ a:hover {
   fill: #62CFC9;
 }
 
+.fill-brand-grey {
+  fill: #CBC8C8;
+}
+
 .fill-white {
   fill: #FFFFFF;
 }
@@ -162,8 +168,8 @@ a:hover {
   fill: #4A4A4A;
 }
 
-.fill-red {
-  fill: red;
+.fill-brand-6 {
+  fill: #CBC8C8;
 }
 
 :host {
@@ -245,6 +251,18 @@ a:hover {
 .category-icon-item.colour-scheme-brand-5 svg {
   fill: #000000;
 }
+.category-icon-item.colour-scheme-mhf-turquoise {
+  background-color: #62CFC9;
+}
+.category-icon-item.colour-scheme-mhf-turquoise svg {
+  fill: #000000;
+}
+.category-icon-item.colour-scheme-brand-grey {
+  background-color: #CBC8C8;
+}
+.category-icon-item.colour-scheme-brand-grey svg {
+  fill: #000000;
+}
 .category-icon-item.colour-scheme-brand-6 {
   background-color: #CBC8C8;
 }

package/dist/collection/components/biggive-cookie-banner/biggive-cookie-banner.css

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;
@@ -49,16 +50,21 @@ a:hover {
   background-color: #F07D00;
 }
 
-.background-colour-hover-brand-6:hover,
-.background-colour-brand-6 {
-  background-color: #62CFC9;
-}
-
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
 }
 
+.background-colour-hover-brand-mhf-turquoise:hover,
+.background-colour-brand-mhf-turquoise {
+  background-color: #62CFC9;
+}
+
+.background-colour-hover-brand-grey:hover,
+.background-colour-brand-grey {
+  background-color: #CBC8C8;
+}
+
 .background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
@@ -69,11 +75,6 @@ a:hover {
   background-color: #000000;
 }
 
-.background-colour-hover-white:hover,
-.background-colour-white {
-  background-color: #FFFFFF;
-}
-
 .background-colour-hover-grey-extra-light:hover,
 .background-colour-grey-extra-light {
   background-color: #D7D7D7;
@@ -94,6 +95,11 @@ a:hover {
   background-color: #4A4A4A;
 }
 
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #62CFC9;
+}
+
 .fill-primary {
   fill: #2C089B;
 }
@@ -126,10 +132,6 @@ a:hover {
   fill: #F07D00;
 }
 
-.fill-brand-6 {
-  fill: #CBC8C8;
-}
-
 .fill-brand-afa-pink {
   fill: #BF387D;
 }
@@ -138,6 +140,10 @@ a:hover {
   fill: #62CFC9;
 }
 
+.fill-brand-grey {
+  fill: #CBC8C8;
+}
+
 .fill-white {
   fill: #FFFFFF;
 }
@@ -162,8 +168,8 @@ a:hover {
   fill: #4A4A4A;
 }
 
-.fill-red {
-  fill: red;
+.fill-brand-6 {
+  fill: #CBC8C8;
 }
 
 .space-above-0 {

package/dist/collection/components/biggive-filtered-carousel/biggive-filtered-carousel.css

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-form-field-select/biggive-form-field-select.css

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-form-field-text-input/biggive-text-input.css

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

package/dist/collection/components/biggive-formatted-text/biggive-formatted-text.css

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;
@@ -49,16 +50,21 @@ a:hover {
   background-color: #F07D00;
 }
 
-.background-colour-hover-brand-6:hover,
-.background-colour-brand-6 {
-  background-color: #62CFC9;
-}
-
 .background-colour-hover-brand-afa-pink:hover,
 .background-colour-brand-afa-pink {
   background-color: #BF387D;
 }
 
+.background-colour-hover-brand-mhf-turquoise:hover,
+.background-colour-brand-mhf-turquoise {
+  background-color: #62CFC9;
+}
+
+.background-colour-hover-brand-grey:hover,
+.background-colour-brand-grey {
+  background-color: #CBC8C8;
+}
+
 .background-colour-hover-white:hover,
 .background-colour-white {
   background-color: #FFFFFF;
@@ -69,11 +75,6 @@ a:hover {
   background-color: #000000;
 }
 
-.background-colour-hover-white:hover,
-.background-colour-white {
-  background-color: #FFFFFF;
-}
-
 .background-colour-hover-grey-extra-light:hover,
 .background-colour-grey-extra-light {
   background-color: #D7D7D7;
@@ -94,6 +95,11 @@ a:hover {
   background-color: #4A4A4A;
 }
 
+.background-colour-hover-brand-6:hover,
+.background-colour-brand-6 {
+  background-color: #62CFC9;
+}
+
 .fill-primary {
   fill: #2C089B;
 }
@@ -126,10 +132,6 @@ a:hover {
   fill: #F07D00;
 }
 
-.fill-brand-6 {
-  fill: #CBC8C8;
-}
-
 .fill-brand-afa-pink {
   fill: #BF387D;
 }
@@ -138,6 +140,10 @@ a:hover {
   fill: #62CFC9;
 }
 
+.fill-brand-grey {
+  fill: #CBC8C8;
+}
+
 .fill-white {
   fill: #FFFFFF;
 }
@@ -162,8 +168,8 @@ a:hover {
   fill: #4A4A4A;
 }
 
-.fill-red {
-  fill: red;
+.fill-brand-6 {
+  fill: #CBC8C8;
 }
 
 :host {
@@ -227,6 +233,18 @@ a:hover {
 .generic-icon-item.colour-scheme-brand-5 svg {
   fill: #000000;
 }
+.generic-icon-item.colour-scheme-mhf-turquoise {
+  background-color: #62CFC9;
+}
+.generic-icon-item.colour-scheme-mhf-turquoise svg {
+  fill: #000000;
+}
+.generic-icon-item.colour-scheme-brand-grey {
+  background-color: #CBC8C8;
+}
+.generic-icon-item.colour-scheme-brand-grey svg {
+  fill: #000000;
+}
 .generic-icon-item.colour-scheme-brand-6 {
   background-color: #CBC8C8;
 }
@@ -353,6 +371,18 @@ a:hover {
   .generic-icon-item.colour-scheme-brand-5 svg {
     fill: #000000;
   }
+  .generic-icon-item.colour-scheme-mhf-turquoise {
+    background-color: #62CFC9;
+  }
+  .generic-icon-item.colour-scheme-mhf-turquoise svg {
+    fill: #000000;
+  }
+  .generic-icon-item.colour-scheme-brand-grey {
+    background-color: #CBC8C8;
+  }
+  .generic-icon-item.colour-scheme-brand-grey svg {
+    fill: #000000;
+  }
   .generic-icon-item.colour-scheme-brand-6 {
     background-color: #CBC8C8;
   }

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;

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

@@ -1,5 +1,6 @@
 /**
  * @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.
  */
 a {
   color: inherit;