Skip to content

Commit ded2831

Browse files
DesignerDaveDave McCarthyhswolff
authored
PD-1714: Update colors in palette to reflect brand refresh (#1080)
* update colors to reflect brand refresh * format * verified commit * GPG verified commit * GPG verified commit for real this time * Update wording in upgrade guide Co-authored-by: Harry Wolff <[email protected]> * update upgrade guide * change base to dark 1 green * Update packages/palette/UPGRADE.md Co-authored-by: Harry Wolff <[email protected]> * update inline references in upgrade.md Co-authored-by: Dave McCarthy <[email protected]> Co-authored-by: Harry Wolff <[email protected]>
1 parent 6d7ae07 commit ded2831

File tree

12 files changed

+239
-81
lines changed

12 files changed

+239
-81
lines changed

‎.changeset/poor-sloths-own.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@leafygreen-ui/palette': minor
3+
---
4+
5+
Adds palette.ts and palette.less files reflecting the brand refresh palette.

‎packages/palette/README.md

+9-11
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,7 @@ yarn add @leafygreen-ui/palette
1818
npm install @leafygreen-ui/palette
1919
```
2020

21-
This package contains the colors for the following palettes
22-
23-
- **UI**: MongoDB-branded, general-use UI palette.
24-
- _Chart (coming soon)_: Color palette for accessible charting colors.
25-
- _Syntax (coming soon)_: Color palette for accessible syntax-highlighting themes.
21+
This package contains the brand-supported MongoDB UI color palette.
2622

2723
## UI Palette
2824

@@ -33,13 +29,12 @@ npm install @leafygreen-ui/palette
3329
```
3430

3531
```js
36-
import { uiColors } from '@leafygreen-ui/palette';
32+
import { palette } from '@leafygreen-ui/palette';
3733

3834
/**
39-
* uiColors = {
35+
* palette = {
4036
* black,
4137
* white,
42-
* focus,
4338
* gray: {
4439
* dark3,
4540
* dark2,
@@ -54,13 +49,16 @@ import { uiColors } from '@leafygreen-ui/palette';
5449
* dark2,
5550
* dark1,
5651
* base,
52+
* light1,
5753
* light2,
5854
* light3,
5955
* },
6056
* blue: {
6157
* dark3,
6258
* dark2,
59+
* dark1,
6360
* base,
61+
* light1,
6462
* light2,
6563
* light3,
6664
* },
@@ -74,19 +72,19 @@ import { uiColors } from '@leafygreen-ui/palette';
7472
* red: {
7573
* dark3,
7674
* dark2,
77-
* dark1,
7875
* base,
76+
* light1,
7977
* light2,
8078
* light3,
8179
* },
8280
* }
8381
*/
8482

8583
const example = () => (
86-
<span style={{ color: uiColors.gray.dark1 }}>Hello World</span>
84+
<span style={{ color: palette.gray.dark1 }}>Hello World</span>
8785
);
8886
```
8987

9088
```less
91-
@import '<path to node_modules>/@leafygreen-ui/palette/dist/ui-colors.less';
89+
@import '<path to node_modules>/@leafygreen-ui/palette/dist/palette.less';
9290
```

‎packages/palette/UPGRADE.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# v3 to v4
2+
3+
v3.3 and above of the palette package contains the updated palette for the brand refresh. In v4, the old palette is removed entirely from this package.
4+
5+
## Imports
6+
7+
### JS
8+
9+
The named export for the new palette has changed from `uiColors` to `palette`. You'll need to import the new colors like so:
10+
11+
```js
12+
import { palette } from '@leafygreen-ui/palette';
13+
```
14+
15+
### Less
16+
17+
The name of the included `.less` variables file has changed from 'ui-colors.less' to `palette.less`. You'll need to import the new file like so:
18+
19+
```less
20+
@import '<path to node_modules>/@leafygreen-ui/palette/dist/palette.less';
21+
```
22+
23+
## Color Variables
24+
25+
### JS
26+
27+
The name and structure of the JS variables is largely unchanged. Here are the notable changes:
28+
29+
- The `focus` variable has been removed. It's recommended to update usage of this color to `palette.blue.light1`.
30+
- The `palette.red.dark1` variable has been removed. It's recommended to update usage of this color to `palette.red.dark2`.
31+
- We've added a new `palette.green.light1` color.
32+
- We've added a new `palette.blue.dark2` color.
33+
- We've added a new `palette.red.light1` color.
34+
- We've added purple to the palette. You can find `dark3`, `dark2`, `base`, `light2`, and `light3` values for the color.
35+
36+
### Less
37+
38+
There's a number of notable changes to the Less variables that are available.
39+
40+
- All variables have moved from a `@leafygreen__[color name]` format to a `@palette__[color name]` format.
41+
- The `@leafygreen__focus` variable has been removed. It's recommended to update usage of this color to `@palette__blue--light-1`.
42+
- The `@leafygreen__red--dark-1` variable has been removed. It's recommended to update usage of this color to `@palette__red--dark-2`.
43+
- We've added a new `@palette__green--light-1` color.
44+
- We've added a new `@palette__blue--dark-2` color.
45+
- We've added a new `@palette__red--light-1` color.
46+
- We've added purple to the palette. You can find `dark-3`, `dark-2`, `base`, `light-2`, and `light-3` values for the color.
47+
48+
## Color Changes
49+
50+
Nearly every color in the palette has been changed to some extent. You'll notice colors are more vibrant all around, though many are compatible with the usage of the previous colors. Here are the most notable changes:
51+
52+
- The new Base Green is lighter, and more vibrant than the previous Base Green (`uiColors.green.base` / `@leafygreen__green--base`). For a 1:1 update, we recommend changing instances of that green to Green: Dark 1 (`palette.green.dark1` / `@palette__green--dark-1`).
53+
- The range of blues available are much more vibrant. While the color contrast should remain largely compatible with the previous blues, we recommend checking instances of Base Blue in particular for any visual oddities.
54+
55+
We recommend visually checking that the new colors make sense in all cases when upgrading, regardless of similarity to the previous palette. For any questions about the color update, please reach out to a product designer working with your team.

‎packages/palette/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
"access": "public"
2121
},
2222
"devDependencies": {
23-
"@emotion/react": "^11.4.0",
24-
"@emotion/styled": "^11.3.0"
23+
"@leafygreen-ui/emotion": "^4.0.0"
2524
},
2625
"gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0"
2726
}

‎packages/palette/src/index.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import * as uiColors from './uiColors';
22
import './ui-colors.less';
33

4-
export { uiColors };
4+
import * as palette from './palette';
5+
import './palette.less';
6+
7+
export { uiColors, palette };

‎packages/palette/src/palette.less

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@palette__white: #ffffff;
2+
@palette__black: #001E2B;
3+
4+
@palette__gray--dark-3: #21313C;
5+
@palette__gray--dark-2: #3D4F58;
6+
@palette__gray--dark-1: #5C6C75;
7+
@palette__gray--base: #889397;
8+
@palette__gray--light-1: #C1C7C6;
9+
@palette__gray--light-2: #E8EDEB;
10+
@palette__gray--light-3: #F9FBFA;
11+
12+
@palette__green--dark-3: #023430;
13+
@palette__green--dark-2: #00684A;
14+
@palette__green--dark-1: #00A35C;
15+
@palette__green--base: #00ED64;
16+
@palette__green--light-1: #71F6BA;
17+
@palette__green--light-2: #C0FAE6;
18+
@palette__green--light-3: #E3FCF7;
19+
20+
@palette__purple--dark-3: #2D0B59;
21+
@palette__purple--dark-2: #5E0C9E;
22+
@palette__purple--base: #B45AF2;
23+
@palette__purple--light-2: #F1D4FD;
24+
@palette__purple--light-3: #F9EBFF;
25+
26+
@palette__blue--dark-3: #0C2657;
27+
@palette__blue--dark-2: #083C90;
28+
@palette__blue--dark-1: #1254B7;
29+
@palette__blue--base: #016BF8;
30+
@palette__blue--light-1: #0498EC;
31+
@palette__blue--light-2: #C3E7FE;
32+
@palette__blue--light-3: #E1F7FF;
33+
34+
@palette__yellow--dark-3: #4C2100;
35+
@palette__yellow--dark-2: #944F01;
36+
@palette__yellow--base: #FFC010;
37+
@palette__yellow--light-2: #FFEC9E;
38+
@palette__yellow--light-3: #FEF7DB;
39+
40+
@palette__red--dark-3: #5B0000;
41+
@palette__red--dark-2: #970606;
42+
@palette__red--base: #DB3030;
43+
@palette__red--light-1: #EF5752;
44+
@palette__red--light-2: #FFCDC7;
45+
@palette__red--light-3: #FFEAE5;

‎packages/palette/src/palette.spec.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { uiColors } from '.';
1+
import { palette } from '.';
22

33
interface HueRange {
44
dark3: string;
@@ -10,10 +10,11 @@ interface HueRange {
1010
light3: string;
1111
}
1212

13-
const requiredKeys = new Set(['dark3', 'base', 'light3']);
14-
const optionalKeys = new Set(['dark2', 'dark1', 'light1', 'light2']);
13+
const requiredKeys = new Set(['dark3', 'dark2', 'base', 'light2', 'light3']);
14+
const optionalKeys = new Set(['dark1', 'light1']);
15+
16+
const allColors: Array<string | HueRange> = Object.values(palette);
1517

16-
const allColors: Array<string | HueRange> = Object.values(uiColors);
1718
describe('packages/palette', function () {
1819
test('all colors have only expected hues', () => {
1920
allColors.forEach(color => {

‎packages/palette/src/palette.story.tsx

+47-45
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,63 @@
11
import React from 'react';
22
import { storiesOf } from '@storybook/react';
3-
import { styled } from '@storybook/theming';
3+
import { css } from '@leafygreen-ui/emotion';
44
import { lighten, darken, readableColor, transparentize } from 'polished';
5-
import * as uiColors from './uiColors';
5+
import * as palette from './palette';
66

77
interface ColorBlockProps {
88
color: string;
99
name: string;
1010
}
1111

12-
const ColorBlock = styled<'div', ColorBlockProps>('div')`
13-
background-color: ${props => props.color};
14-
border-top-color: transparent;
15-
display: inline-block;
16-
position: relative;
17-
height: 80px;
18-
width: 80px;
19-
border-radius: 8px;
20-
margin: 10px;
21-
margin-bottom: 20px;
22-
box-shadow: 0 8px 6px -8px ${props => transparentize(0.7, darken(0.2, props.color))},
23-
0 2px 3px ${props => transparentize(0.8, darken(0.5, props.color))};
12+
function ColorBlock({ color, name }: ColorBlockProps) {
13+
const styles = css`
14+
border-top-color: transparent;
15+
display: inline-block;
16+
position: relative;
17+
height: 80px;
18+
width: 80px;
19+
border-radius: 8px;
20+
margin: 10px;
21+
margin-bottom: 20px;
22+
background-color: ${color};
23+
box-shadow: 0 8px 6px -8px ${transparentize(0.7, darken(0.2, color))},
24+
0 2px 3px ${transparentize(0.8, darken(0.5, color))};
2425
25-
&:before {
26-
content: attr(color);
27-
position: absolute;
28-
bottom: 0.3rem;
29-
left: 0.3rem;
30-
right: 0.3rem;
31-
font-size: 12px;
32-
text-align: center;
33-
padding: 3px 0.3rem;
34-
color: ${props => readableColor(lighten(0.2, props.color))};
35-
background-color: ${props => lighten(0.2, props.color)};
36-
border-radius: 4px;
37-
}
26+
&:before {
27+
content: '${color}';
28+
position: absolute;
29+
bottom: 0.3rem;
30+
left: 0.3rem;
31+
right: 0.3rem;
32+
font-size: 12px;
33+
text-align: center;
34+
padding: 3px 0.3rem;
35+
border-radius: 4px;
36+
color: ${readableColor(lighten(0.2, color))};
37+
background-color: ${lighten(0.2, color)};
38+
}
39+
40+
&:after {
41+
content: '${name}';
42+
position: absolute;
43+
top: calc(100% + 8px);
44+
font-size: 12px;
45+
text-align: center;
46+
color: ${palette.gray.dark1};
47+
margin: auto;
48+
left: -10px;
49+
right: -10px;
50+
}
51+
`;
3852

39-
&:after {
40-
content: attr(name);
41-
position: absolute;
42-
top: calc(100% + 8px);
43-
font-size: 12px;
44-
text-align: center;
45-
color: ${uiColors.gray.dark1};
46-
margin: auto;
47-
left: -10px;
48-
right: -10px;
49-
}
50-
`;
51-
/**
52-
*
53-
*/
53+
return <div className={styles} />;
54+
}
5455

5556
function renderColors() {
56-
const ranges = Object.keys(uiColors) as Array<keyof typeof uiColors>;
57+
const ranges = Object.keys(palette) as Array<keyof typeof palette>;
5758

5859
const renderedRanges = ranges.map(range => {
59-
const currentVal = uiColors[range];
60+
const currentVal = palette[range];
6061

6162
if (typeof currentVal === 'string') {
6263
return <ColorBlock key={range} color={currentVal} name={range} />;
@@ -76,8 +77,9 @@ function renderColors() {
7677
</div>
7778
);
7879
});
80+
// const renderedRanges = 'hello world'
7981

8082
return <div>{renderedRanges}</div>;
8183
}
8284

83-
storiesOf('Palette', module).add('UI', renderColors);
85+
storiesOf('Palette', module).add('Default', renderColors);

‎packages/palette/src/palette.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
export const white = '#FFFFFF';
2+
export const black = '#001E2B';
3+
4+
export const gray = {
5+
dark3: '#21313C',
6+
dark2: '#3D4F58',
7+
dark1: '#5C6C75',
8+
base: '#889397',
9+
light1: '#C1C7C6',
10+
light2: '#E8EDEB',
11+
light3: '#F9FBFA',
12+
} as const;
13+
14+
export const green = {
15+
dark3: '#023430',
16+
dark2: '#00684A',
17+
dark1: '#00A35C',
18+
base: '#00ED64',
19+
light1: '#71F6BA',
20+
light2: '#C0FAE6',
21+
light3: '#E3FCF7',
22+
} as const;
23+
24+
export const purple = {
25+
dark3: '#2D0B59',
26+
dark2: '#5E0C9E',
27+
base: '#B45AF2',
28+
light2: '#F1D4FD',
29+
light3: '#F9EBFF',
30+
} as const;
31+
32+
export const blue = {
33+
dark3: '#0C2657',
34+
dark2: '#083C90',
35+
dark1: '#1254B7',
36+
base: '#016BF8',
37+
light1: '#0498EC',
38+
light2: '#C3E7FE',
39+
light3: '#E1F7FF',
40+
} as const;
41+
42+
export const yellow = {
43+
dark3: '#4C2100',
44+
dark2: '#944F01',
45+
base: '#FFC010',
46+
light2: '#FFEC9E',
47+
light3: '#FEF7DB',
48+
} as const;
49+
50+
export const red = {
51+
dark3: '#5B0000',
52+
dark2: '#970606',
53+
base: '#DB3030',
54+
light1: '#EF5752',
55+
light2: '#FFCDC7',
56+
light3: '#FFEAE5',
57+
} as const;

0 commit comments

Comments
 (0)