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

package/src/components/navigation/_nav-items.scss

@@ -5,7 +5,7 @@
     width: auto;
     float: right;
     padding: 0;
-    margin: 0;
+    margin: 0 $spacer/2 0 0;
     line-height: 4rem;
 
     @include media-breakpoint-down(md) {
@@ -31,16 +31,18 @@
         position: relative;
         line-height: $foe-nav-height-small;
         font-weight: bold;
-        padding: 0;
         display: block;
-        color: rgba($foe-offwhite, 1);
+        color: $foe-extradark;
+        text-decoration: none;
+        box-shadow: inset 0 0 0 0 $foe-accent;
         transition:
-          line-height $foe-transition-duration-base $foe-transition-easing,
-          color $foe-transition-duration-base $foe-transition-easing;
+          color $foe-transition-duration-base ease-in-out,
+          box-shadow $foe-transition-duration-base ease-in-out;
+        // transition: line-height $foe-transition-duration-base $foe-transition-easing, color $foe-transition-duration-base $foe-transition-easing;
 
         @include media-breakpoint-up(lg) {
           padding: 0 18px;
-          line-height: $foe-nav-height-large;
+          line-height: $foe-nav-height-large/2;
         }
 
         &:focus {
@@ -49,28 +51,10 @@
         }
 
         &:hover {
-          // opacity: 0.7; <= Originally all links were .7 opacity, since we're using a pseudo element inside the anchor we can't fade the whole element
-          color: rgba($foe-offwhite, .7);
-          background: transparent;
+          color: $foe-offwhite;
+          box-shadow: inset 10rem 0 0 0 $foe-accent;
           text-decoration: none;
         }
-
-        &::after {
-          $arrow-size: 10px;
-
-          position: absolute;
-          z-index: $zindex-navbar + 21;
-          content: '';
-          width: 0;
-          height: 0;
-          border: $arrow-size solid transparent;
-          border-bottom-color: $foe-offwhite;
-          bottom: -1px;
-          left: 50%;
-          margin-left: ($arrow-size * -1);
-          opacity: 0;
-          transition: opacity $foe-transition-duration-base $foe-transition-easing;
-        }
       }
 
       &.active > a {

package/src/components/typography/blockquotes.scss

@@ -33,7 +33,7 @@ blockquote {
     font-weight: 700;
     font-size: $blockquote-font-size;
     line-height: $blockquote-font-size * 1.35;
-    color: $foe-primary;
+    color: $foe-extradark;
 
     @include media-breakpoint-down(sm) {
       font-size: strip-units($blockquote-font-size) * $font-size-sm;

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

@@ -8,27 +8,27 @@
 //
 
 // Colours
-$foe-primary:         #56a085 !default;
-$foe-light:           #7ae1bd !default;
+$foe-primary:         #61bdaa !default;
+$foe-light:           #dff2ee !default;
 $foe-secondary:         $foe-light !default;
-$foe-dark:            #3b867f !default;
-$foe-extradark:       #232f4a !default;
-$foe-sunset:          #ea5c5c !default;
+$foe-dark:            #182f2a !default;
+$foe-extradark:       #1e234d !default;
+$foe-sunset:          #ed6132 !default;
 
-$foe-white:           #f3f3f7 !default;
+$foe-white:           #fff !default;
 $foe-gray:            #b1b8c0 !default;
-$foe-accent:          #34da96 !default;
-$foe-offwhite:        #f3f3f7 !default;
+$foe-accent:          #5a54a0 !default;
+$foe-offwhite:        #f4f6fa !default;
 
 $foe-success:         #5cb85c !default;
 $foe-info:            #5bc0de !default;
 $foe-warning:         #f0ad4e !default;
 $foe-danger:          #d9534f !default;
 
-$foe-text:            #6b6b6f !default;
+$foe-text:            $foe-extradark !default;
 
-$foe-donate:          #ea4848 !default;
-$foe-donate-text:       $foe-offwhite !default;
+$foe-donate:            $foe-sunset !default;
+$foe-donate-text:       $foe-extradark !default;
 
 $foe-join:            #ffef1e !default;
 $foe-join-text:         $foe-text !default;
@@ -218,11 +218,11 @@ $theme-colors: map-merge(
 $theme-color-interval:      8%;
 
 // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold:  150;
+$yiq-contrasted-threshold:  142; // this works for a hover cover for text-dark over leaf - any higher and it uses text-light.
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark:             $gray-900;
-$yiq-text-light:            $white;
+$yiq-text-dark:             $foe-extradark;
+$yiq-text-light:            $foe-offwhite;
 
 // Options
 //
@@ -287,7 +287,7 @@ $body-color:                $foe-text;
 //
 // Style anchor elements.
 
-$link-color:                theme-color("primary");
+$link-color:                theme-color("accent");
 $link-decoration:           none;
 $link-hover-color:          darken($link-color, 15%);
 $link-hover-decoration:     underline;
@@ -398,8 +398,8 @@ $box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
 $box-shadow:                  0 .5rem 1rem rgba($black, .15);
 $box-shadow-lg:               0 1rem 3rem rgba($black, .175);
 
-$component-active-color:      $gray-900;
-$component-active-bg:         theme-color("accent");
+$component-active-color:      $foe-extradark;
+$component-active-bg:         theme-color("primary");
 
 $caret-width:                 .3em;
 
@@ -451,7 +451,7 @@ $headings-margin-bottom:      calc($spacer / 2);
 $headings-font-family:        inherit;
 $headings-font-weight:        600;
 $headings-line-height:        1.2;
-$headings-color:              $foe-primary;
+$headings-color:              $foe-accent;
 
 $display1-size:               calc(60 / 16) * $font-size-base;
 $display2-size:               calc(60 / 16) * $font-size-base;