feat(Colors): renaming coiors accent-01 added

wfp · Dec 26, 2019 · fb81ee0 · fb81ee0
1 parent 556d763
commit fb81ee0
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 68 deletions.
diff --git a/.storybook/_container.scss b/.storybook/_container.scss
@@ -134,12 +134,12 @@ body {
   background: $brand-01;
 }
 
-.color__brand-02 {
-  background: $brand-02;
+.color__interactive-02 {
+  background: $interactive-02;
 }
 
-.color__brand-03 {
-  background: $brand-03;
+.color__accent-01 {
+  background: $accent-01;
 }
 
 .color__interactive-02 {

diff --git a/src/components/Button/_button.scss b/src/components/Button/_button.scss
@@ -81,10 +81,10 @@
 
   .#{$prefix}--btn--accent {
     @include button-theme(
-      $brand-03,
+      $accent-01,
       transparent,
       $text-01,
-      darken($brand-03, 5),
+      darken($accent-01, 5),
       $text-01
     );
 
@@ -324,7 +324,7 @@
       $inverse-01,
       #0353e9,
       $ui-01,
-      $brand-02
+      $interactive-02
     );
   }
 
@@ -351,7 +351,7 @@
       $interactive-01,
       #0353e9,
       $interactive-01,
-      $brand-02
+      $interactive-02
     );
     position: relative;
 

diff --git a/src/components/Card/_card.scss b/src/components/Card/_card.scss
@@ -46,7 +46,7 @@
   }
 
   .#{$prefix}--photo-card--no-background {
-    background: $brand-02;
+    background: $interactive-02;
   }
 
   .#{$prefix}--photo-card__info {

diff --git a/src/components/DatePicker/_date-picker.scss b/src/components/DatePicker/_date-picker.scss
@@ -233,7 +233,7 @@
     left: 0;
   }
   .DayPickerKeyboardShortcuts_show__topLeft:hover::before {
-    border-left: 33px solid $brand-02;
+    border-left: 33px solid $interactive-02;
   }
   .DayPickerKeyboardShortcuts_showSpan {
     color: #fff;

diff --git a/src/components/Link/_link.scss b/src/components/Link/_link.scss
@@ -29,7 +29,7 @@
     &:active,
     &:hover,
     &:focus {
-      color: $brand-02;
+      color: $interactive-02;
     }
 
     &:focus {

diff --git a/src/documentation/ColourGuidelines-story-depreciated.js b/src/documentation/ColourGuidelines-story-depreciated.js
@@ -118,7 +118,7 @@ storiesOf('Getting started|Core', module)
         </ListItem>
         <ListItem kind="cross">Primary and secondary colours</ListItem>
       </List>
-      <Color color="brand-02" />
+      <Color color="interactive-02" />
       <h4 className="wfp--story__sub-heading">
         Interactive emphasis colour (e.g. hovers)
       </h4>
@@ -133,7 +133,7 @@ storiesOf('Getting started|Core', module)
         elements within a component, such different variants used on a floating
         action button container as well as the icon within it.
       </p>
-      <Color color="brand-03" />
+      <Color color="accent-01" />
       <h4 className="wfp--story__sub-heading">Accent secondary colour</h4>
       <img
         alt="Brand colour"

diff --git a/src/documentation/Colours/ColourDocs.js b/src/documentation/Colours/ColourDocs.js
@@ -155,22 +155,6 @@ const ColourDocs = () => {
           </List>
         </div>
       </section>
-      <Color color="brand-02" />
-      <h4 className="wfp--story__sub-heading">
-        Interactive emphasis colour (e.g. hovers)
-      </h4>
-      <p>
-        This colour is used for hover and active states.{' '}
-        {/* and to create contrast
-        between UI elements such as distinguishing the BannerNavigation bar from
-        the MainNavigation. You can use this dark variant of our primary colour
-        on elements.*/}
-      </p>
-      {/*<p>
-        You can also use variants to distinguish elements within a component,
-        such different variants used on a floating action button container as
-        well as the icon within it.
-      </p>*/}
 
       <Color color="interactive-01" />
       <h4 className="wfp--story__sub-heading">
@@ -191,6 +175,23 @@ const ColourDocs = () => {
         }}
         src={`${process.env.STORYBOOK_INTERNAL_ASSETS}internal/brand-color.png`}
       />
+
+      <Color color="interactive-02" />
+      <h4 className="wfp--story__sub-heading">
+        Interactive emphasis colour (e.g. hovers)
+      </h4>
+      <p>
+        This colour is used for hover and active states.{' '}
+        {/* and to create contrast
+        between UI elements such as distinguishing the BannerNavigation bar from
+        the MainNavigation. You can use this dark variant of our primary colour
+        on elements.*/}
+      </p>
+      {/*<p>
+        You can also use variants to distinguish elements within a component,
+        such different variants used on a floating action button container as
+        well as the icon within it.
+      </p>*/}
       <section className="dodonot">
         <div>
           <h4>Use interactive - 01 for:</h4>
@@ -216,7 +217,7 @@ const ColourDocs = () => {
         </div>
       </section>
 
-      <Color color="brand-03" />
+      <Color color="accent-01" />
       <h4 className="wfp--story__sub-heading">Accent secondary colour</h4>
       <img
         alt="Brand colour"

diff --git a/src/documentation/Intro/Intro-story.js b/src/documentation/Intro/Intro-story.js
@@ -105,11 +105,12 @@ storiesOf('Getting started|Getting started', module)
             <span className="intro__version">v1.4</span>
           </h1>
           <p>
-            The World Food Programme’s user interface style guide emphasizes
-            WFP’s commitment to establish and build the brand.
+            The World Food Programme’s User Interface Kit provides you with
+            guidelines, components and templates to boost the user experience of
+            your products.
           </p>
           <Button
-            kind="accent"
+            kind="primary"
             icon={iconLightGlyph}
             style={{ marginRight: '0.5em' }}
             onClick={linkTo('Getting started|Getting started', 'Developers')}>

diff --git a/src/documentation/Intro/_intro.scss b/src/documentation/Intro/_intro.scss
@@ -1,21 +1,26 @@
 $css--reset: false;
 @import '../../globals/scss/vars';
 @import '../../globals/scss/spacing';
+@import '../../globals/scss/layout';
 @import '../../globals/scss/helper-mixins';
 
 $color-intro: $brand-01;
 $color-intro-mobile: $brand-01;
-$color-intro-tablet: $brand-03;
+$color-intro-tablet: $accent-01;
 h1 {
   font-size: 8vw;
 }
 
 .intro-content {
   //background: $brand-01;
   background: $ui-02;
-  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
-  margin-top: -15%;
-  padding-top: 15%;
+  margin-top: 2%;
+  padding-top: 0;
+  @include breakpoint(bp--md--major) {
+    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0% 100%);
+    margin-top: -15%;
+    padding-top: 15%;
+  }
   z-index: -1;
   position: relative;
   /*color: #fff;
@@ -35,13 +40,20 @@ h1 {
 .intro {
   //background: $ui-02;
   //background: linear-gradient(90deg, $brand-01, 0%, lighten($brand-01, 5) 100%);
-  height: 90vh;
-  width: 100vw;
+  @include breakpoint(bp--md--major) {
+    height: 90vh;
+    width: 100vw;
+  }
   display: flex;
   //box-shadow: inset 0px -22px 22px rgba(#000, 0.015);
   position: relative;
   align-items: center;
-  padding: 0 5%;
+  @include breakpointMax(bp--md--major) {
+    flex-direction: column;
+    padding: 0 3%;
+  }
+  padding: 0 11% 0 14%;
+
   //color: #fff;
   h1 {
     letter-spacing: 0.05rem;
@@ -57,11 +69,14 @@ h1 {
     text-transform: initial;
   }
   &__left {
-    width: 50%;
-    min-width: 50%;
-    max-width: 50%;
-    padding: 0 3% 0 10%;
-    margin-top: -5%;
+    @include breakpoint(bp--md--major) {
+      width: 50%;
+      min-width: 50%;
+      max-width: 50%;
+      margin-top: -5%;
+    }
+    padding: 0 3% 0 0%;
+
     h1 {
       font-size: 4rem;
       //font-weight: 100;
@@ -74,10 +89,15 @@ h1 {
     }
   }
   &__right {
-    padding-left: 5%;
-    padding-right: 15%;
-    width: 50%;
-    max-width: 50%;
+    padding-left: 2%;
+    padding-right: 0%;
+    @include breakpointMax(bp--md--major) {
+      display: none;
+    }
+    @include breakpoint(bp--md--major) {
+      width: 50%;
+      max-width: 50%;
+    }
   }
 }
 

diff --git a/src/globals/data/colors.js b/src/globals/data/colors.js
@@ -119,14 +119,6 @@ const colors = {
     type: 'brand',
     shortDescription: 'WFP brand color',
   },
-  'brand-02': {
-    name: 'brand-02',
-    hex: '#085387',
-    scss: '$brand-02',
-    css: 'color__brand-02',
-    type: 'brand',
-    shortDescription: 'BannerNavigation',
-  },
   'interactive-01': {
     name: 'interactive-01',
     hex: '#0b77c2',
@@ -137,10 +129,18 @@ const colors = {
   },
   'interactive-02': {
     name: 'interactive-02',
-    hex: '#f7b825',
+    hex: '#085387',
     scss: '$interactive-02',
     css: 'color__interactive-02',
     type: 'brand',
+    shortDescription: 'BannerNavigation',
+  },
+  'accent-01': {
+    name: 'accent-01',
+    hex: '#f7b825',
+    scss: '$accent-01',
+    css: 'color__accent-01',
+    type: 'brand',
     shortDescription: 'Accent colour (recommended)',
   },
   'ui-01': {

diff --git a/src/globals/data/colors.json b/src/globals/data/colors.json
@@ -90,11 +90,11 @@
     "type": "ui",
     "description": "Primary interactive color, Primary buttons"
   },
-  "brand-02": {
-    "name": "brand-02",
+  "interactive-02": {
+    "name": "interactive-02",
     "hex": "#085387",
-    "scss": "$brand-02",
-    "css": "color__brand-02",
+    "scss": "$interactive-02",
+    "css": "color__interactive-02",
     "type": "ui",
     "description": "BannerNavigation"
   },

diff --git a/src/globals/scss/_helper-mixins.scss b/src/globals/scss/_helper-mixins.scss
@@ -64,7 +64,7 @@
   }
 
   @if ($type == 'border-small') {
-    outline: 2px solid $brand-02;
+    outline: 2px solid $interactive-02;
     outline-offset: 2px;
   }
 

diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss
@@ -9,10 +9,10 @@
 
   // Color Theme Variables
   $interactive-01: $color__main-51 !default !global; // Main Link and Button Color
-  $interactive-02: $color__yellow !default !global; // Darker WFP Blue // $color__teal-20
+  $accent-02: $color__yellow !default !global; // Darker WFP Blue // $color__teal-20
   $brand-01: $color__main !default !global; // Main Link and Button Color
-  $brand-02: $color__main-60 !default !global; // Main WFP Color //$color__blue-40
-  $brand-03: $color__yellow !default !global;
+  $interactive-02: $color__main-60 !default !global; // Main WFP Color //$color__blue-40
+  $accent-01: $color__yellow !default !global;
   $inverse-01: $color__white !default !global;
   $inverse-02: $color__white !default !global;
   $inverse-03: $color__navy-gray-3 !default !global;
@@ -46,7 +46,7 @@
   $hover-primary-text: darken($interactive-01, 15%) !default !global;
   $hover-danger: darken($support-01, 10%) !default !global;
   $hover-secondary: $interactive-01 !default !global;
-  $hover-row: rgba($brand-02, 0.1) !default !global;
+  $hover-row: rgba($interactive-02, 0.1) !default !global;
 
   // Global
   $focus: $color__blue-20 !default !global;

diff --git a/src/globals/scss/_vars.scss b/src/globals/scss/_vars.scss
@@ -33,7 +33,7 @@ $hover-primary: darken($interactive-01, 10%) !default;
 $hover-primary-text: darken($interactive-01, 15%) !default;
 $hover-danger: darken($support-01, 10%) !default;
 $hover-secondary: $interactive-01 !default;
-$hover-row: rgba($brand-02, 0.1) !default;
+$hover-row: rgba($interactive-02, 0.1) !default;
 // Global
 $input-border: 1px solid $color__navy-30 !default;
 $input-label-weight: 600 !default;