@foeewni/web-core 3.0.0-alpha.1 → 3.0.0-alpha.11

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

@@ -8,28 +8,44 @@
 //
 
 // Colours
-$foe-primary:         #56a085 !default;
-$foe-light:           #7ae1bd !default;
-$foe-secondary:         $foe-light !default;
-$foe-dark:            #3b867f !default;
-// $foe-extradark:       #232f4a !default;
-$foe-extradark:       #a01fed !default;
-$foe-sunset:          #ea5c5c !default;
-
-$foe-white:           #f3f3f7 !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:          #34da96 !default;
-$foe-offwhite:        #f3f3f7 !default;
+$foe-accent:          $foe-iris !default;
+$foe-offwhite:        $foe-ice !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-iris !default;
+$foe-donate-text:       $foe-ice !default;
 
 $foe-join:            #ffef1e !default;
 $foe-join-text:         $foe-text !default;
@@ -51,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
 //
@@ -219,11 +240,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
 //
@@ -288,8 +309,8 @@ $body-color:                $foe-text;
 //
 // Style anchor elements.
 
-$link-color:                theme-color("primary");
-$link-decoration:           none;
+$link-color:                theme-color("accent");
+$link-decoration:           underline;
 $link-hover-color:          darken($link-color, 15%);
 $link-hover-decoration:     underline;
 
@@ -391,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;
 
@@ -399,8 +420,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;
 
@@ -408,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
 //
@@ -422,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,9 +460,9 @@ $font-weight-heavy:           700;
 $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;
+$h1-font-size:                calc(60 / 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;
@@ -450,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-primary;
+$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-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%;
 
@@ -528,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;