feat(Colors): brand color shades added

wfp · Dec 27, 2019 · 4b3d47a · 4b3d47a
1 parent c977532
commit 4b3d47a
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 88 deletions.
diff --git a/.storybook/_container.scss b/.storybook/_container.scss
@@ -236,6 +236,30 @@ body {
   background: $color__main-80;
 }
 
+.color__brand-01-20 {
+  background: $color__brand-01-20;
+}
+
+.color__brand-01-30 {
+  background: $color__brand-01-30;
+}
+
+.color__brand-01-40 {
+  background: $color__brand-01-40;
+}
+
+.color__brand-01-60 {
+  background: $color__brand-01-60;
+}
+
+.color__brand-01-70 {
+  background: $color__brand-01-70;
+}
+
+.color__brand-01-80 {
+  background: $color__brand-01-80;
+}
+
 .color__navy-20 {
   background: $color__navy-20;
 }

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,110 +1,56 @@
-# Change Log
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
 # [1.3.0-alpha.37](https://github.com/WFP/UI/compare/v1.3.0-alpha.36...v1.3.0-alpha.37) (2019-12-19)
 
-
 ### Bug Fixes
 
-* **Button:** removed count ([08cb0f2](https://github.com/WFP/UI/commit/08cb0f2))
-
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+- **Button:** removed count ([08cb0f2](https://github.com/WFP/UI/commit/08cb0f2))
 
 # [1.3.0-alpha.36](https://github.com/WFP/UI/compare/v1.3.0-alpha.35...v1.3.0-alpha.36) (2019-12-18)
 
-
 ### Bug Fixes
 
-* **Button:** disable timeout onUnmount 87d9ac48ee79cca9e1d823126b1d4bfc981af28f ([53e5bf7](https://github.com/WFP/UI/commit/53e5bf7))
-
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+- **Button:** disable timeout onUnmount 87d9ac48ee79cca9e1d823126b1d4bfc981af28f ([53e5bf7](https://github.com/WFP/UI/commit/53e5bf7))
 
 # [1.3.0-alpha.35](https://github.com/WFP/UI/compare/v1.3.0-alpha.34...v1.3.0-alpha.35) (2019-12-18)
 
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
 # [1.3.0-alpha.34](https://github.com/WFP/UI/compare/v1.3.0-alpha.33...v1.3.0-alpha.34) (2019-12-17)
 
-
 ### Bug Fixes
 
-* **Blockquote:** same padding if no content is present ([6375f82](https://github.com/WFP/UI/commit/6375f82))
-
+- **Blockquote:** same padding if no content is present ([6375f82](https://github.com/WFP/UI/commit/6375f82))
 
 ### Features
 
-* **Blockquote:** depreciate html rendering for security reasons ([7c50420](https://github.com/WFP/UI/commit/7c50420))
-
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+- **Blockquote:** depreciate html rendering for security reasons ([7c50420](https://github.com/WFP/UI/commit/7c50420))
 
 # [1.3.0-alpha.33](https://github.com/WFP/UI/compare/v1.3.0-alpha.32...v1.3.0-alpha.33) (2019-12-06)
 
-
 ### Bug Fixes
 
-* **Select:** inline prop showed the input two times ([b89f8c6](https://github.com/WFP/UI/commit/b89f8c6))
-
+- **Select:** inline prop showed the input two times ([b89f8c6](https://github.com/WFP/UI/commit/b89f8c6))
 
 ### Features
 
-* **Tabs:** resize detector removed and replaced with own solution, tests fixed ([de387b8](https://github.com/WFP/UI/commit/de387b8))
-
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+- **Tabs:** resize detector removed and replaced with own solution, tests fixed ([de387b8](https://github.com/WFP/UI/commit/de387b8))
 
 # [1.3.0-alpha.32](https://github.com/WFP/UI/compare/v1.3.0-alpha.31...v1.3.0-alpha.32) (2019-12-03)
 
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
 # [1.3.0-alpha.31](https://github.com/WFP/UI/compare/v1.3.0-alpha.30...v1.3.0-alpha.31) (2019-12-03)
 
-
 ### Bug Fixes
 
-* **Footer:** SDG logo fixed ([98eb6c3](https://github.com/WFP/UI/commit/98eb6c3))
-* **Icon:** remove iconTitle from props ([11c27d7](https://github.com/WFP/UI/commit/11c27d7))
-
+- **Footer:** SDG logo fixed ([98eb6c3](https://github.com/WFP/UI/commit/98eb6c3))
+- **Icon:** remove iconTitle from props ([11c27d7](https://github.com/WFP/UI/commit/11c27d7))
 
 ### Features
 
-* **Button:** onClick animation added ([87d9ac4](https://github.com/WFP/UI/commit/87d9ac4))
-* **colours:** new colour page and changelog ([2ef611f](https://github.com/WFP/UI/commit/2ef611f))
-* **icons:** custom colors are now supported, emergency icons added ([f409c35](https://github.com/WFP/UI/commit/f409c35))
-* **inputs:** read-only state added and other changes ([8dd71cb](https://github.com/WFP/UI/commit/8dd71cb))
-* **List:** checkmark and cross with custom icons ([b2a236f](https://github.com/WFP/UI/commit/b2a236f))
-* **Select:** disabled state improved ([a230986](https://github.com/WFP/UI/commit/a230986))
-* **Storybook:** favicon now visible in build ([4093726](https://github.com/WFP/UI/commit/4093726))
-* **Toggle:** new design for toggle input ([5ec81b8](https://github.com/WFP/UI/commit/5ec81b8))
-
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+- **Button:** onClick animation added ([87d9ac4](https://github.com/WFP/UI/commit/87d9ac4))
+- **colours:** new colour page and changelog ([2ef611f](https://github.com/WFP/UI/commit/2ef611f))
+- **icons:** custom colors are now supported, emergency icons added ([f409c35](https://github.com/WFP/UI/commit/f409c35))
+- **inputs:** read-only state added and other changes ([8dd71cb](https://github.com/WFP/UI/commit/8dd71cb))
+- **List:** checkmark and cross with custom icons ([b2a236f](https://github.com/WFP/UI/commit/b2a236f))
+- **Select:** disabled state improved ([a230986](https://github.com/WFP/UI/commit/a230986))
+- **Storybook:** favicon now visible in build ([4093726](https://github.com/WFP/UI/commit/4093726))
+- **Toggle:** new design for toggle input ([5ec81b8](https://github.com/WFP/UI/commit/5ec81b8))
 
 # [1.3.0-alpha.30](https://github.com/WFP/UI/compare/v1.3.0-alpha.29...v1.3.0-alpha.30) (2019-11-12)
 

diff --git a/src/components/MainNavigation/_main-navigation.scss b/src/components/MainNavigation/_main-navigation.scss
@@ -228,8 +228,8 @@
         width: 100%;
       }
       padding: $spacing-md $page-padding-mobile;
-      background-color: $color__blue-60;
-      border-bottom: 1px solid lighten($color__blue-60, 5);
+      background-color: $color__brand-01-60;
+      border-bottom: 1px solid lighten($color__brand-01-60, 5);
     }
   }
 }
diff --git a/src/components/Tag/_tag.scss b/src/components/Tag/_tag.scss
@@ -30,7 +30,7 @@
   }
 
   .#{$prefix}--tag--wfp {
-    @include tag-theme($color__blue-10, $color__blue-60);
+    @include tag-theme($color__brand-01-10, $color__brand-01-60);
   }
 
   .#{$prefix}--tag--beta {

diff --git a/src/documentation/Changelog/Changelog-story.js b/src/documentation/Changelog/Changelog-story.js
@@ -16,7 +16,7 @@ storiesOf('Getting started|Getting started', module)
   .addParameters({ options: { showPanel: false, isToolshown: false } })
   .add("What's new (Changelog)", () => (
     <Page title="Changelog" subTitle="Latest updates and versions">
-      <Blockquote title="UI Kit 1.3 is available" kind="warning">
+      <Blockquote title="UI-Kit 1.4 is available" kind="warning">
         We've just release the new version of the UI Kit. Get the{' '}
         <Link href="https://www.npmjs.com/package/@wfp/ui" target="_blank">
           latest version

diff --git a/src/documentation/Colours/ColourDocs.js b/src/documentation/Colours/ColourDocs.js
@@ -297,6 +297,8 @@ const ColourDocs = () => {
         rest of the interface.
       </p>
 
+      <ColorList filter="brand-extended" />
+
       <h3 ref={linkRefs.neutrals}>Neutrals</h3>
 
       <p>

diff --git a/src/documentation/Colours/ColourList.js b/src/documentation/Colours/ColourList.js
@@ -86,7 +86,6 @@ const colorList = ({ filter }) => {
       content={
         <div>
           {color.description && <p>{color.description}</p>}
-          {/* tooltips[color.name] */}
           {color.name}
         </div>
       }

diff --git a/src/documentation/Intro/_intro.scss b/src/documentation/Intro/_intro.scss
@@ -8,6 +8,7 @@ $color-intro: $brand-01;
 $border-width: 2px;
 $color-intro-mobile: $brand-01;
 $color-intro-tablet: $accent-01;
+$easing: cubic-bezier(0.17, 0.89, 0.32, 1.1); //ease-in-out;
 
 .intro-content {
   //background: $brand-01;
@@ -124,7 +125,7 @@ $color-intro-tablet: $accent-01;
   border: $border-width solid $color-intro;
   border-radius: 1rem;
   transition: all 0.5s;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: $easing;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -161,7 +162,7 @@ $color-intro-tablet: $accent-01;
   top: 50%;
   margin-top: -3vw;
   transition: all 0.5s;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: $easing;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -192,7 +193,7 @@ $color-intro-tablet: $accent-01;
   border-bottom: $border-width solid $color-intro;
   display: flex;
   transition: all 0.5s;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: $easing;
   .intro-animation--mobile & {
     transform: translateY(22vw);
     //border-color: $color-intro-mobile;
@@ -225,7 +226,7 @@ $color-intro-tablet: $accent-01;
   height: 100%;
   display: flex;
   transition: all 0.5s;
-  transition-timing-function: ease-in-out;
+  transition-timing-function: $easing;
   .intro-animation--mobile & {
     .intro__dots__dot {
       width: 1.4vw;
@@ -262,6 +263,6 @@ $color-intro-tablet: $accent-01;
     width: 3vw;
     height: 3vw;
     transition: all 0.5s;
-    transition-timing-function: ease-in-out;
+    transition-timing-function: $easing;
   }
 }
diff --git a/src/globals/data/colors.js b/src/globals/data/colors.js
@@ -143,6 +143,48 @@ const colors = {
     type: 'brand',
     shortDescription: 'Accent colour (recommended)',
   },
+  'brand-01-20': {
+    name: 'brand-01-20',
+    hex: '#c2dbec',
+    scss: '$brand-01-20',
+    css: 'color__brand-01-20',
+    type: 'brand-extended',
+  },
+  'brand-01-30': {
+    name: 'brand-01-30',
+    hex: '#85b7da',
+    scss: '$brand-01-30',
+    css: 'color__brand-01-30',
+    type: 'brand-extended',
+  },
+  'brand-01-40': {
+    name: 'brand-01-40',
+    hex: '#4792c7',
+    scss: '$brand-01-40',
+    css: 'color__brand-01-40',
+    type: 'brand-extended',
+  },
+  'brand-01-60': {
+    name: 'brand-01-60',
+    hex: '#085387',
+    scss: '$brand-01-60',
+    css: 'color__brand-01-60',
+    type: 'brand-extended',
+  },
+  'brand-01-70': {
+    name: 'brand-01-70',
+    hex: '#05375a',
+    scss: '$brand-01-70',
+    css: 'color__brand-01-70',
+    type: 'brand-extended',
+  },
+  'brand-01-80': {
+    name: 'brand-01-80',
+    hex: '#031c2d',
+    scss: '$brand-01-80',
+    css: 'color__brand-01-80',
+    type: 'brand-extended',
+  },
   'ui-01': {
     name: 'ui-01',
     hex: '#fbfcfc',

diff --git a/src/globals/scss/_colors.scss b/src/globals/scss/_colors.scss
@@ -64,14 +64,15 @@ $color__main-40: mix(white, $color__main, 25%) !default;
 $color__main-60: mix(black, $color__main, 25%) !default;
 $color__main-70: mix(black, $color__main, 50%) !default;
 $color__main-80: mix(black, $color__main, 75%) !default;
+
 // Alias for blue since it is the same
-$color__blue-10: $color__main-10 !default;
-$color__blue-20: $color__main-20 !default;
-$color__blue-30: $color__main-30 !default;
-$color__blue-40: $color__main-40 !default;
-$color__blue-60: $color__main-60 !default;
-$color__blue-70: $color__main-70 !default;
-$color__blue-80: $color__main-80 !default;
+$color__brand-01-10: $color__main-10 !default;
+$color__brand-01-20: $color__main-20 !default;
+$color__brand-01-30: $color__main-30 !default;
+$color__brand-01-40: $color__main-40 !default;
+$color__brand-01-60: $color__main-60 !default;
+$color__brand-01-70: $color__main-70 !default;
+$color__brand-01-80: $color__main-80 !default;
 // Color Blends, sccs doesn't support dynamic var creation
 $color__navy-20: mix(white, $color__navy, 75%) !default;
 $color__navy-30: mix(white, $color__navy, 50%) !default;

diff --git a/src/globals/scss/_theme-tokens.scss b/src/globals/scss/_theme-tokens.scss
@@ -49,7 +49,7 @@
   $hover-row: rgba($interactive-02, 0.1) !default !global;
 
   // Global
-  $focus: $color__blue-20 !default !global;
+  $focus: $color__brand-01-20 !default !global;
 
   $input-border: 1px solid $color__navy-70 !default;
   $input-label-weight: 600 !default;