@foeewni/web-core 3.0.0-alpha.5 → 3.0.0-alpha.6

package/src/components/layout/backgrounds.scss

@@ -4,11 +4,28 @@
   background-attachment: fixed !important;
 }
 
-.bg-accent,
-.bg-dark,
-.bg-extradark {
+/*******************************
+ * Background tweaks according to 
+ * Author options white/primary/dark/extradark are re-mapped to reflect the brand colours and prefered combinations
+ * bg-dark uses iris which is the accent colour
+ * bg-extradark has been replaced with sunset, it was decided to not use the space for a background colour so the inability
+ * to access this combination shouldn't be a problem and this will account for any other instances where author accessible
+ * theme colours are referenced in the code
+ * $foe-leaf-75 is used in some places to increase the number of accessible options available
+ ******************************/
+
+
+.bg-accent {
   @include heading_colours($foe-offwhite, $foe-secondary);
   @include text_colours($foe-offwhite, $foe-secondary);
+
+  .btn-primary {
+    @include button-variant($foe-primary, $foe-primary);
+  }
+
+  .btn-outline-primary {
+    @include button-outline-variant($foe-offwhite);
+  }
 }
 
 .bg-primary,
@@ -17,17 +34,31 @@
   @include text_colours($foe-extradark, $foe-extradark);
 }
 
-.bg-primary {
-  background-color: $foe-leaf-75 !important;
+.bg-extradark,
+.bg-sunset {
+  background-color: $foe-sunset !important;
+
+  @include heading_colours($foe-extradark, $foe-extradark);
+  @include text_colours($foe-extradark, $foe-extradark);
+
+  .btn-primary {
+    @include button-variant($foe-extradark, $foe-extradark);
+  }
 
   .btn-outline-primary {
     @include button-outline-variant($foe-extradark);
   }
 }
 
-.bg-accent {
+.bg-dark,
+.bg-iris {
+  background-color: $foe-iris !important;
+
+  @include heading_colours($foe-offwhite, $foe-secondary);
+  @include text_colours($foe-offwhite, $foe-secondary);
+
   .btn-primary {
-    @include button-variant($foe-primary, $foe-primary);
+    @include button-variant($foe-leaf-75, $foe-leaf-75);
   }
 
   .btn-outline-primary {
@@ -35,10 +66,8 @@
   }
 }
 
-.bg-sunset {
-  .btn-primary {
-    @include button-variant($foe-extradark, $foe-extradark);
-  }
+.bg-primary {
+  background-color: $foe-leaf-75 !important;
 
   .btn-outline-primary {
     @include button-outline-variant($foe-extradark);

package/src/components/typography/fonts.scss

@@ -20,8 +20,8 @@ Our type system is comprised of two fonts:
 To use them on your CSS please import the webfonts through Google Fonts
 
 ```
-@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');
 ```
 
 */
-@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;1&family=Libre+Franklin:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

package/src/utils/scss/helpers/_mixins.scss

@@ -31,8 +31,9 @@
 
 // Applies colours to <p> and <a> elements
 @mixin text_colours ($main, $link) {
-  p,
-  li {
+  label,
+  li,
+  p {
     color: $main;
   }
 

package/src/utils/scss/helpers/_variables.scss

@@ -29,7 +29,7 @@ $foe-iris-25:         #deddec !default;
 $foe-primary:         $foe-leaf !default;
 $foe-light:           $foe-leaf-25 !default;
 $foe-secondary:       $foe-light !default;
-$foe-dark:            #182f2a !default;
+$foe-dark:            $foe-iris !default;
 $foe-extradark:       $foe-space !default;
 
 $foe-white:           #fff !default;
@@ -471,7 +471,7 @@ $headings-map: (
 
 $headings-margin-bottom:      calc($spacer / 2);
 $headings-font-family:        inherit;
-$headings-font-weight:        600;
+$headings-font-weight:        900;
 $headings-line-height:        1.2;
 $headings-color:              $foe-accent;
 
@@ -480,7 +480,7 @@ $display2-size:               calc(60 / 16) * $font-size-base;
 $display3-size:               4.5rem;
 $display4-size:               3.5rem;
 
-$display1-weight:             600;
+$display1-weight:             900;
 $display2-weight:             300;
 $display3-weight:             300;
 $display4-weight:             300;