Skip to content

Commit 4b3d47a

Browse files
Utzel-ButzelUtzel-Butzel
committed
feat(Colors): brand color shades added
1 parent c977532 commit 4b3d47a

File tree

11 files changed

+103
-88
lines changed

11 files changed

+103
-88
lines changed

‎.storybook/_container.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,30 @@ body {
236236
background: $color__main-80;
237237
}
238238

239+
.color__brand-01-20 {
240+
background: $color__brand-01-20;
241+
}
242+
243+
.color__brand-01-30 {
244+
background: $color__brand-01-30;
245+
}
246+
247+
.color__brand-01-40 {
248+
background: $color__brand-01-40;
249+
}
250+
251+
.color__brand-01-60 {
252+
background: $color__brand-01-60;
253+
}
254+
255+
.color__brand-01-70 {
256+
background: $color__brand-01-70;
257+
}
258+
259+
.color__brand-01-80 {
260+
background: $color__brand-01-80;
261+
}
262+
239263
.color__navy-20 {
240264
background: $color__navy-20;
241265
}

‎CHANGELOG.md‎

Lines changed: 16 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,56 @@
1-
# Change Log
2-
3-
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.
4-
51
# [1.3.0-alpha.37](https://github.com/WFP/UI/compare/v1.3.0-alpha.36...v1.3.0-alpha.37) (2019-12-19)
62

7-
83
### Bug Fixes
94

10-
* **Button:** removed count ([08cb0f2](https://github.com/WFP/UI/commit/08cb0f2))
11-
12-
13-
14-
# Change Log
15-
16-
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.
5+
- **Button:** removed count ([08cb0f2](https://github.com/WFP/UI/commit/08cb0f2))
176

187
# [1.3.0-alpha.36](https://github.com/WFP/UI/compare/v1.3.0-alpha.35...v1.3.0-alpha.36) (2019-12-18)
198

20-
219
### Bug Fixes
2210

23-
* **Button:** disable timeout onUnmount 87d9ac48ee79cca9e1d823126b1d4bfc981af28f ([53e5bf7](https://github.com/WFP/UI/commit/53e5bf7))
24-
25-
26-
27-
# Change Log
28-
29-
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.
11+
- **Button:** disable timeout onUnmount 87d9ac48ee79cca9e1d823126b1d4bfc981af28f ([53e5bf7](https://github.com/WFP/UI/commit/53e5bf7))
3012

3113
# [1.3.0-alpha.35](https://github.com/WFP/UI/compare/v1.3.0-alpha.34...v1.3.0-alpha.35) (2019-12-18)
3214

33-
34-
35-
# Change Log
36-
37-
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.
38-
3915
# [1.3.0-alpha.34](https://github.com/WFP/UI/compare/v1.3.0-alpha.33...v1.3.0-alpha.34) (2019-12-17)
4016

41-
4217
### Bug Fixes
4318

44-
* **Blockquote:** same padding if no content is present ([6375f82](https://github.com/WFP/UI/commit/6375f82))
45-
19+
- **Blockquote:** same padding if no content is present ([6375f82](https://github.com/WFP/UI/commit/6375f82))
4620

4721
### Features
4822

49-
* **Blockquote:** depreciate html rendering for security reasons ([7c50420](https://github.com/WFP/UI/commit/7c50420))
50-
51-
52-
53-
# Change Log
54-
55-
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.
23+
- **Blockquote:** depreciate html rendering for security reasons ([7c50420](https://github.com/WFP/UI/commit/7c50420))
5624

5725
# [1.3.0-alpha.33](https://github.com/WFP/UI/compare/v1.3.0-alpha.32...v1.3.0-alpha.33) (2019-12-06)
5826

59-
6027
### Bug Fixes
6128

62-
* **Select:** inline prop showed the input two times ([b89f8c6](https://github.com/WFP/UI/commit/b89f8c6))
63-
29+
- **Select:** inline prop showed the input two times ([b89f8c6](https://github.com/WFP/UI/commit/b89f8c6))
6430

6531
### Features
6632

67-
* **Tabs:** resize detector removed and replaced with own solution, tests fixed ([de387b8](https://github.com/WFP/UI/commit/de387b8))
68-
69-
70-
71-
# Change Log
72-
73-
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.
33+
- **Tabs:** resize detector removed and replaced with own solution, tests fixed ([de387b8](https://github.com/WFP/UI/commit/de387b8))
7434

7535
# [1.3.0-alpha.32](https://github.com/WFP/UI/compare/v1.3.0-alpha.31...v1.3.0-alpha.32) (2019-12-03)
7636

77-
78-
79-
# Change Log
80-
81-
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.
82-
8337
# [1.3.0-alpha.31](https://github.com/WFP/UI/compare/v1.3.0-alpha.30...v1.3.0-alpha.31) (2019-12-03)
8438

85-
8639
### Bug Fixes
8740

88-
* **Footer:** SDG logo fixed ([98eb6c3](https://github.com/WFP/UI/commit/98eb6c3))
89-
* **Icon:** remove iconTitle from props ([11c27d7](https://github.com/WFP/UI/commit/11c27d7))
90-
41+
- **Footer:** SDG logo fixed ([98eb6c3](https://github.com/WFP/UI/commit/98eb6c3))
42+
- **Icon:** remove iconTitle from props ([11c27d7](https://github.com/WFP/UI/commit/11c27d7))
9143

9244
### Features
9345

94-
* **Button:** onClick animation added ([87d9ac4](https://github.com/WFP/UI/commit/87d9ac4))
95-
* **colours:** new colour page and changelog ([2ef611f](https://github.com/WFP/UI/commit/2ef611f))
96-
* **icons:** custom colors are now supported, emergency icons added ([f409c35](https://github.com/WFP/UI/commit/f409c35))
97-
* **inputs:** read-only state added and other changes ([8dd71cb](https://github.com/WFP/UI/commit/8dd71cb))
98-
* **List:** checkmark and cross with custom icons ([b2a236f](https://github.com/WFP/UI/commit/b2a236f))
99-
* **Select:** disabled state improved ([a230986](https://github.com/WFP/UI/commit/a230986))
100-
* **Storybook:** favicon now visible in build ([4093726](https://github.com/WFP/UI/commit/4093726))
101-
* **Toggle:** new design for toggle input ([5ec81b8](https://github.com/WFP/UI/commit/5ec81b8))
102-
103-
104-
105-
# Change Log
106-
107-
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.
46+
- **Button:** onClick animation added ([87d9ac4](https://github.com/WFP/UI/commit/87d9ac4))
47+
- **colours:** new colour page and changelog ([2ef611f](https://github.com/WFP/UI/commit/2ef611f))
48+
- **icons:** custom colors are now supported, emergency icons added ([f409c35](https://github.com/WFP/UI/commit/f409c35))
49+
- **inputs:** read-only state added and other changes ([8dd71cb](https://github.com/WFP/UI/commit/8dd71cb))
50+
- **List:** checkmark and cross with custom icons ([b2a236f](https://github.com/WFP/UI/commit/b2a236f))
51+
- **Select:** disabled state improved ([a230986](https://github.com/WFP/UI/commit/a230986))
52+
- **Storybook:** favicon now visible in build ([4093726](https://github.com/WFP/UI/commit/4093726))
53+
- **Toggle:** new design for toggle input ([5ec81b8](https://github.com/WFP/UI/commit/5ec81b8))
10854

10955
# [1.3.0-alpha.30](https://github.com/WFP/UI/compare/v1.3.0-alpha.29...v1.3.0-alpha.30) (2019-11-12)
11056

‎src/components/MainNavigation/_main-navigation.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,8 +228,8 @@
228228
width: 100%;
229229
}
230230
padding: $spacing-md $page-padding-mobile;
231-
background-color: $color__blue-60;
232-
border-bottom: 1px solid lighten($color__blue-60, 5);
231+
background-color: $color__brand-01-60;
232+
border-bottom: 1px solid lighten($color__brand-01-60, 5);
233233
}
234234
}
235235
}

‎src/components/Tag/_tag.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
}
3131

3232
.#{$prefix}--tag--wfp {
33-
@include tag-theme($color__blue-10, $color__blue-60);
33+
@include tag-theme($color__brand-01-10, $color__brand-01-60);
3434
}
3535

3636
.#{$prefix}--tag--beta {

‎src/documentation/Changelog/Changelog-story.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ storiesOf('Getting started|Getting started', module)
1616
.addParameters({ options: { showPanel: false, isToolshown: false } })
1717
.add("What's new (Changelog)", () => (
1818
<Page title="Changelog" subTitle="Latest updates and versions">
19-
<Blockquote title="UI Kit 1.3 is available" kind="warning">
19+
<Blockquote title="UI-Kit 1.4 is available" kind="warning">
2020
We've just release the new version of the UI Kit. Get the{' '}
2121
<Link href="https://www.npmjs.com/package/@wfp/ui" target="_blank">
2222
latest version

‎src/documentation/Colours/ColourDocs.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,8 @@ const ColourDocs = () => {
297297
rest of the interface.
298298
</p>
299299

300+
<ColorList filter="brand-extended" />
301+
300302
<h3 ref={linkRefs.neutrals}>Neutrals</h3>
301303

302304
<p>

‎src/documentation/Colours/ColourList.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@ const colorList = ({ filter }) => {
8686
content={
8787
<div>
8888
{color.description && <p>{color.description}</p>}
89-
{/* tooltips[color.name] */}
9089
{color.name}
9190
</div>
9291
}

‎src/documentation/Intro/_intro.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ $color-intro: $brand-01;
88
$border-width: 2px;
99
$color-intro-mobile: $brand-01;
1010
$color-intro-tablet: $accent-01;
11+
$easing: cubic-bezier(0.17, 0.89, 0.32, 1.1); //ease-in-out;
1112

1213
.intro-content {
1314
//background: $brand-01;
@@ -124,7 +125,7 @@ $color-intro-tablet: $accent-01;
124125
border: $border-width solid $color-intro;
125126
border-radius: 1rem;
126127
transition: all 0.5s;
127-
transition-timing-function: ease-in-out;
128+
transition-timing-function: $easing;
128129
display: flex;
129130
flex-direction: column;
130131
align-items: center;
@@ -161,7 +162,7 @@ $color-intro-tablet: $accent-01;
161162
top: 50%;
162163
margin-top: -3vw;
163164
transition: all 0.5s;
164-
transition-timing-function: ease-in-out;
165+
transition-timing-function: $easing;
165166
display: flex;
166167
flex-wrap: wrap;
167168
justify-content: center;
@@ -192,7 +193,7 @@ $color-intro-tablet: $accent-01;
192193
border-bottom: $border-width solid $color-intro;
193194
display: flex;
194195
transition: all 0.5s;
195-
transition-timing-function: ease-in-out;
196+
transition-timing-function: $easing;
196197
.intro-animation--mobile & {
197198
transform: translateY(22vw);
198199
//border-color: $color-intro-mobile;
@@ -225,7 +226,7 @@ $color-intro-tablet: $accent-01;
225226
height: 100%;
226227
display: flex;
227228
transition: all 0.5s;
228-
transition-timing-function: ease-in-out;
229+
transition-timing-function: $easing;
229230
.intro-animation--mobile & {
230231
.intro__dots__dot {
231232
width: 1.4vw;
@@ -262,6 +263,6 @@ $color-intro-tablet: $accent-01;
262263
width: 3vw;
263264
height: 3vw;
264265
transition: all 0.5s;
265-
transition-timing-function: ease-in-out;
266+
transition-timing-function: $easing;
266267
}
267268
}

‎src/globals/data/colors.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,48 @@ const colors = {
143143
type: 'brand',
144144
shortDescription: 'Accent colour (recommended)',
145145
},
146+
'brand-01-20': {
147+
name: 'brand-01-20',
148+
hex: '#c2dbec',
149+
scss: '$brand-01-20',
150+
css: 'color__brand-01-20',
151+
type: 'brand-extended',
152+
},
153+
'brand-01-30': {
154+
name: 'brand-01-30',
155+
hex: '#85b7da',
156+
scss: '$brand-01-30',
157+
css: 'color__brand-01-30',
158+
type: 'brand-extended',
159+
},
160+
'brand-01-40': {
161+
name: 'brand-01-40',
162+
hex: '#4792c7',
163+
scss: '$brand-01-40',
164+
css: 'color__brand-01-40',
165+
type: 'brand-extended',
166+
},
167+
'brand-01-60': {
168+
name: 'brand-01-60',
169+
hex: '#085387',
170+
scss: '$brand-01-60',
171+
css: 'color__brand-01-60',
172+
type: 'brand-extended',
173+
},
174+
'brand-01-70': {
175+
name: 'brand-01-70',
176+
hex: '#05375a',
177+
scss: '$brand-01-70',
178+
css: 'color__brand-01-70',
179+
type: 'brand-extended',
180+
},
181+
'brand-01-80': {
182+
name: 'brand-01-80',
183+
hex: '#031c2d',
184+
scss: '$brand-01-80',
185+
css: 'color__brand-01-80',
186+
type: 'brand-extended',
187+
},
146188
'ui-01': {
147189
name: 'ui-01',
148190
hex: '#fbfcfc',

‎src/globals/scss/_colors.scss‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,15 @@ $color__main-40: mix(white, $color__main, 25%) !default;
6464
$color__main-60: mix(black, $color__main, 25%) !default;
6565
$color__main-70: mix(black, $color__main, 50%) !default;
6666
$color__main-80: mix(black, $color__main, 75%) !default;
67+
6768
// Alias for blue since it is the same
68-
$color__blue-10: $color__main-10 !default;
69-
$color__blue-20: $color__main-20 !default;
70-
$color__blue-30: $color__main-30 !default;
71-
$color__blue-40: $color__main-40 !default;
72-
$color__blue-60: $color__main-60 !default;
73-
$color__blue-70: $color__main-70 !default;
74-
$color__blue-80: $color__main-80 !default;
69+
$color__brand-01-10: $color__main-10 !default;
70+
$color__brand-01-20: $color__main-20 !default;
71+
$color__brand-01-30: $color__main-30 !default;
72+
$color__brand-01-40: $color__main-40 !default;
73+
$color__brand-01-60: $color__main-60 !default;
74+
$color__brand-01-70: $color__main-70 !default;
75+
$color__brand-01-80: $color__main-80 !default;
7576
// Color Blends, sccs doesn't support dynamic var creation
7677
$color__navy-20: mix(white, $color__navy, 75%) !default;
7778
$color__navy-30: mix(white, $color__navy, 50%) !default;

0 commit comments

Comments
 (0)