@foeewni/web-core 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/components/typography/blockquotes.scss

@@ -19,18 +19,15 @@ The Friends of the Earth blockquotes use the secondary font
 @import '../../utils/scss/loader';
 
 blockquote {
-  border-color: $gray-400;
-  border-style: double;
-  border-width: .2em 0;
-  padding: $spacer*1.5 0;
+  padding: $spacer * 1.5 0;
   width: 80%;
-  margin: $spacer*2 auto;
+  margin: ($spacer * 2) auto;
   float: none;
   clear: both;
 
   p {
     font-family: $font-family-serif;
-    font-weight: 700;
+    font-weight: normal;
     font-size: $blockquote-font-size;
     line-height: $blockquote-font-size * 1.35;
     color: $foe-extradark;
@@ -54,8 +51,6 @@ blockquote {
   }
 
   @include media-breakpoint-up(sm) {
-    width: calc(100% * 4 / 6);
-
     // NOTE: The width, margin-left, and margin-right values below are
     // over-ridden for sanity within CKEditor contexts.
     &.left {
@@ -63,6 +58,7 @@ blockquote {
       clear: left;
       margin-left: calc(-100% / 6);
       margin-right: 2em;
+      width: calc(100% * 4 / 6);
     }
 
     &.right {
@@ -70,29 +66,27 @@ blockquote {
       clear: right;
       margin-left: 2em;
       margin-right: calc(-100% / 6);
+      width: calc(100% * 4 / 6);
     }
   }
 
   cite,
   & + .citation {
-    font-family: $font-family-sans-serif;
-    font-size: 1rem;
-    line-height: 1.3rem;
-    font-weight: 400;
-    font-style: italic;
-    color: $gray-500;
+    width: 80%;
+    margin: auto;
+    font-family: $font-family-serif;
+    font-size: $blockquote-font-size;
+    line-height: $spacer * 2;
+    font-weight: bold;
+    color: $foe-extradark;
     display: block;
-    text-align: right;
-    margin-top: 1em;
-    padding-left: 10%;
-
-    &::before {
-      content: "\2014\00A0\00A0";
-      color: $foe-primary;
-    }
+    text-align: left;
+    margin-top: $spacer;
   }
 
   & + .citation {
-    margin-top: $spacer * -1;
+    margin-top: $spacer * -2.5;
+    margin-bottom: $spacer * 2;
+    text-align: center;
   }
 }

package/src/components/typography/display.scss

@@ -4,7 +4,12 @@
   .display-#{$i} {
     @include media-breakpoint-down(md) {
       font-size: calc(32 / 14) * 1rem !important;
-      line-height: 1.05;
+      line-height: 4rem;
+    }
+
+    &::after {
+      content: '\A';
+      white-space: pre;
     }
   }
 }

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/fonts.js

@@ -32,6 +32,7 @@ To use them on your CSS please import the webfonts through Google Fonts
 // Note, single line deep imports are needed here, for some reason fontawesome messes up
 // with normal imports and webpack ends up bundling the whole library (1.25mb!)
 import { library, dom } from '@fortawesome/fontawesome-svg-core';
+
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons/faEnvelope';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -40,19 +41,6 @@ import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons/faExt
 import { faArrowAltCircleUp } from '@fortawesome/free-solid-svg-icons/faArrowAltCircleUp';
 import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
-import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
-import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
-import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
-import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';
-import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
-import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
-import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
-import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
-import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
-import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
-import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
-import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
-import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -76,6 +64,23 @@ import { faSave } from '@fortawesome/free-solid-svg-icons/faSave';
 import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
 
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter';
+import { faXTwitter } from '@fortawesome/free-brands-svg-icons/faXTwitter';
+import { faFacebook } from '@fortawesome/free-brands-svg-icons/faFacebook';
+import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
+import { faPinterest } from '@fortawesome/free-brands-svg-icons/faPinterest';
+import { faLinkedin } from '@fortawesome/free-brands-svg-icons/faLinkedin';
+import { faInstagram } from '@fortawesome/free-brands-svg-icons/faInstagram';
+import { faYoutube } from '@fortawesome/free-brands-svg-icons/faYoutube';
+import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
+import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
+import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
+import { faTelegram } from '@fortawesome/free-brands-svg-icons/faTelegram';
+import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';
+import { faTiktok } from '@fortawesome/free-brands-svg-icons/faTiktok';
+import { faBluesky } from '@fortawesome/free-brands-svg-icons/faBluesky';
+import { faThreads } from '@fortawesome/free-brands-svg-icons/faThreads';
+
 
 // Add actually used FA icons
 library.add(
@@ -88,6 +93,7 @@ library.add(
   faShare,
   faLink,
   faTwitter,
+  faXTwitter,
   faFacebook,
   faFacebookF,
   faPinterest,
@@ -121,20 +127,25 @@ library.add(
   faSave,
   faTrashAlt,
   faCloudUploadAlt,
-  faSignInAlt
+  faSignInAlt,
+  faBluesky,
+  faThreads
 );
 
 // Look for Google fonts and append them if they are not there already
 // We avoiding using @import url(); because the new URL has semicolons on it
 // and it tremendously gets broken from some preprocessors.
 
-const fonts = window.document.createElement('link');
 // eslint-disable-next-line max-len
-const href = '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';
-fonts.setAttribute('rel', 'stylesheet');
-fonts.setAttribute('crossorigin', 'anonymous');
-fonts.setAttribute('href', href);
-document.head.appendChild(fonts);
+const googleFontsHref = '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';
+const googleFontsLink = window.document.querySelector(`link[href="${googleFontsHref}"]`);
+if (!googleFontsLink) {
+  const fonts = window.document.createElement('link');
+  fonts.setAttribute('rel', 'stylesheet');
+  fonts.setAttribute('crossorigin', 'anonymous');
+  fonts.setAttribute('href', googleFontsHref);
+  document.head.appendChild(fonts);
+}
 
 // Kicks off the process of finding <i> tags and replacing with <svg>
 dom.watch();

package/src/main.js

@@ -19,6 +19,7 @@ import './components/tools/data-click-track';
 import './components/tools/rubik-tracking';
 import './components/tools/data-defer-src';
 import './components/tools/stickystack';
+import './components/tools/jaunty';
 
 // Bootstrap helpers
 import './components/layout/alerts.scss';

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

@@ -31,12 +31,14 @@
 
 // Applies colours to <p> and <a> elements
 @mixin text_colours ($main, $link) {
+  label,
+  li,
   p,
-  li {
+  .caption {
     color: $main;
   }
 
-  a:not(.foe-cta) {
+  a:not(.foe-cta):not(.btn) {
     color: $link;
 
     &:hover {

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

@@ -8,17 +8,34 @@
 //
 
 // Colours
-$foe-primary:         #61bdaa !default;
-$foe-light:           #dff2ee !default;
-$foe-secondary:         $foe-light !default;
-$foe-dark:            #182f2a !default;
-$foe-extradark:       #1e234d !default;
+$foe-leaf:            #61bdaa !default;
+$foe-iris:            #5a54a0 !default;
 $foe-sunset:          #ed6132 !default;
+$foe-space:           #1e234d !default;
+$foe-ice:             #f3f3f7 !default;
+$foe-conch:           #f1e2d4 !default;
+
+// Tints, would prefer to do this algorithmically but it's useful to have the hex codes on hand to compare with figmas
+$foe-leaf-75:         #81cabb !default;
+$foe-leaf-50:         #c0e5dd !default;
+$foe-leaf-25:         #dff2ee !default;
+$foe-sunset-75:       #f1815b !default;
+$foe-sunset-50:       #f6b099 !default;
+$foe-sunset-25:       #fbdfd6 !default;
+$foe-iris-75:         #6d68a7 !default;
+$foe-iris-50:         #adaad0 !default;
+$foe-iris-25:         #deddec !default;
+
+$foe-primary:         $foe-leaf !default;
+$foe-light:           $foe-leaf-25 !default;
+$foe-secondary:       $foe-light !default;
+$foe-dark:            $foe-iris !default;
+$foe-extradark:       $foe-space !default;
 
 $foe-white:           #fff !default;
 $foe-gray:            #b1b8c0 !default;
-$foe-accent:          #5a54a0 !default;
-$foe-offwhite:        #f4f6fa !default;
+$foe-accent:          $foe-iris !default;
+$foe-offwhite:        $foe-ice !default;
 
 $foe-success:         #5cb85c !default;
 $foe-info:            #5bc0de !default;
@@ -27,8 +44,8 @@ $foe-danger:          #d9534f !default;
 
 $foe-text:            $foe-extradark !default;
 
-$foe-donate:            $foe-sunset !default;
-$foe-donate-text:       $foe-extradark !default;
+$foe-donate:            $foe-iris !default;
+$foe-donate-text:       $foe-ice !default;
 
 $foe-join:            #ffef1e !default;
 $foe-join-text:         $foe-text !default;
@@ -50,6 +67,11 @@ $foe-nav-shadow:  0 0 .5em .2em rgba(0, 0, 0, .25);
 
 $foe-text-shadow: 0 0 .5rem $foe-tint-overlay-heavy !default;
 
+$foe-backgrounds:
+  $foe-leaf-50,
+  $foe-sunset-50,
+  $foe-iris-50;
+
 //
 // Palettes vars, needed for Campaignion (mostly) maybe also D8
 //
@@ -288,7 +310,7 @@ $body-color:                $foe-text;
 // Style anchor elements.
 
 $link-color:                theme-color("accent");
-$link-decoration:           none;
+$link-decoration:           underline;
 $link-hover-color:          darken($link-color, 15%);
 $link-hover-decoration:     underline;
 
@@ -390,7 +412,7 @@ $line-height-sm:              1.5;
 $border-width:                1px;
 $border-color:                $gray-300;
 
-$border-radius:               .1rem * 3;
+$border-radius:               0; // .1rem * 3;
 $border-radius-lg:            .1rem * 4;
 $border-radius-sm:            .1rem * 2;
 
@@ -407,6 +429,12 @@ $transition-base:             all .2s ease-in-out;
 $transition-fade:             opacity .15s linear;
 $transition-collapse:         height .35s ease;
 
+$foe-element-default-focus-width: .125rem;
+$foe-element-default-focus-color: $black;
+
+$foe-element-default-outline: .125rem solid $white;
+$foe-element-default-outline-offset: .125rem;
+
 
 // Fonts
 //
@@ -421,7 +449,8 @@ $font-family-base:            $font-family-sans-serif;
 
 $font-size-base:              1rem; // Assumes the browser default, typically `16px`
 $font-size-lg:                ($font-size-base * 1.25);
-$font-size-sm:                ($font-size-base * .7);
+// #13222 increase small text to just above 12px as per footer design https://www.figma.com/design/gimnDUG8AGkZdwuLTSGdkK/Design-system-%E2%80%93-Meg?node-id=197-22&t=bFuYz1SRqubH1qkg-0
+$font-size-sm:                ($font-size-base * .8);
 
 $font-weight-light:           300;
 $font-weight-normal:          400;
@@ -432,8 +461,8 @@ $font-weight-base:            $font-weight-normal;
 $line-height-base:            1.5;
 
 $h1-font-size:                calc(56 / 16) * $font-size-base;
-$h2-font-size:                calc(44 / 16) * $font-size-base;
-$h3-font-size:                calc(34 / 16) * $font-size-base;
+$h2-font-size:                calc(40 / 16) * $font-size-base;
+$h3-font-size:                calc(32 / 16) * $font-size-base;
 $h4-font-size:                calc(26 / 16) * $font-size-base;
 $h5-font-size:                calc(20 / 16) * $font-size-base;
 $h6-font-size:                calc(16 / 16) * $font-size-base;
@@ -449,23 +478,23 @@ $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;
 
-$display1-size:               calc(60 / 16) * $font-size-base;
-$display2-size:               calc(60 / 16) * $font-size-base;
-$display3-size:               4.5rem;
-$display4-size:               3.5rem;
+$display1-size:               $h1-font-size;
+$display2-size:               $h1-font-size;
+$display3-size:               $h3-font-size;
+$display4-size:               $h4-font-size;
 
-$display1-weight:             600;
+$display1-weight:             900;
 $display2-weight:             300;
 $display3-weight:             300;
 $display4-weight:             300;
 $display-line-height:         $headings-line-height;
 
-$lead-font-size:              ($font-size-base * 1.25);
-$lead-font-weight:            300;
+$lead-font-size:              $font-size-base;
+$lead-font-weight:            bold;
 
 $small-font-size:             80%;
 
@@ -527,9 +556,9 @@ $input-btn-padding-y:         .5rem;
 $input-btn-padding-x:         .75rem;
 $input-btn-line-height:       $line-height-base;
 
-$input-btn-focus-width:       .2rem;
-$input-btn-focus-color:       rgba($component-active-bg, .75);
-$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color;
+$input-btn-focus-width:       $foe-element-default-focus-width;
+$input-btn-focus-color:       $foe-element-default-focus-color;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !important; //to override bootstrap default in button-variant mixin
 
 $input-btn-padding-y-sm:      .25rem;
 $input-btn-padding-x-sm:      .5rem;
@@ -572,9 +601,9 @@ $btn-link-disabled-color:     $gray-600;
 $btn-block-spacing-y:         .5rem;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius;
-$btn-border-radius-lg:        $border-radius-lg;
-$btn-border-radius-sm:        $border-radius-sm;
+$btn-border-radius:           0;
+$btn-border-radius-lg:        0;
+$btn-border-radius-sm:        0;
 
 $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;