Skip to content

Commit 7637594

Browse files
author
adamraider
authored
fix(colors): add 03 gray (#8)
* fix(colors): add 03 gray fix #2 * retrigger ci * fix: add color table to storybook
1 parent 0ddcb9a commit 7637594

File tree

8 files changed

+97
-180
lines changed

8 files changed

+97
-180
lines changed

‎packages/core/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@storybook/core": "^5.0.6",
2929
"@storybook/react": "^5.0.5",
3030
"babel-loader": "8.0.5",
31+
"color": "^3.1.1",
3132
"css-loader": "1.0.1",
3233
"del": "3.0.0",
3334
"emotion-theming": "^10.0.7",

‎packages/core/src/components/button/_button.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
border-color: transparent;
157157

158158
&:hover {
159-
background-color: $ray-color-gray-02;
159+
background-color: $ray-color-gray-03;
160160
}
161161

162162
&:focus {

‎packages/core/src/global/_colors.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ $ray-color-green-70: hsl(132, 76%, 100% - 70%);
2121
$ray-color-green-80: hsl(132, 76%, 100% - 80%);
2222
$ray-color-green-90: hsl(132, 76%, 100% - 90%);
2323

24-
$ray-color-gray-02: hsl(0, 0%, 100% - 02%);
24+
$ray-color-gray-03: hsl(0, 0%, 100% - 03%);
2525
$ray-color-gray-10: hsl(0, 0%, 100% - 10%);
2626
$ray-color-gray-30: hsl(0, 0%, 100% - 30%);
2727
$ray-color-gray-50: hsl(0, 0%, 100% - 50%);

‎packages/core/src/global/_typography.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@
171171
.#{$ray-class-prefix}blockquote {
172172
padding: $ray-spacing-lg;
173173
margin: $ray-spacing-lg 0;
174-
background-color: $ray-color-gray-02;
174+
background-color: $ray-color-gray-03;
175175
border-radius: $ray-border-radius;
176176
border: 1px solid $ray-color-gray-10;
177177
color: $ray-color-text-dark;

‎packages/core/src/ray-exports.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
ray-color-green-70: $ray-color-green-70;
4444
ray-color-green-80: $ray-color-green-80;
4545
ray-color-green-90: $ray-color-green-90;
46-
ray-color-gray-02: $ray-color-gray-02;
46+
ray-color-gray-03: $ray-color-gray-03;
4747
ray-color-gray-10: $ray-color-gray-10;
4848
ray-color-gray-30: $ray-color-gray-30;
4949
ray-color-gray-50: $ray-color-gray-50;

‎packages/core/stories/colors.stories.js

Lines changed: 83 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,92 @@
11
import React from 'react';
22
import { storiesOf } from '@storybook/react';
3+
import Color from 'color';
34

4-
const BLUES = [
5-
'ray-color-blue-10',
6-
'ray-color-blue-20',
7-
'ray-color-blue-50',
8-
'ray-color-blue-60',
9-
'ray-color-blue-70'
10-
];
5+
import * as rayVars from '../src/ray-exports.scss';
116

12-
const REDS = [
13-
'ray-color-red-10',
14-
'ray-color-red-20',
15-
'ray-color-red-50',
16-
'ray-color-red-60',
17-
'ray-color-red-70'
18-
];
19-
20-
const GREENS = [
21-
'ray-color-green-10',
22-
'ray-color-green-20',
23-
'ray-color-green-70',
24-
'ray-color-green-80',
25-
'ray-color-green-90'
26-
];
27-
28-
const GRAYS = [
29-
'ray-color-gray-02',
30-
'ray-color-gray-10',
31-
'ray-color-gray-30',
32-
'ray-color-gray-50',
33-
'ray-color-gray-60'
34-
];
7+
storiesOf('Colors', module).add('all', () => {
8+
const colorKeys = Object.keys(rayVars).filter(rayVariable =>
9+
rayVariable.startsWith('ray-color-')
10+
);
3511

36-
const Color = function(props) {
3712
return (
38-
<div
39-
{...props}
40-
style={{
41-
width: '100%',
42-
height: `calc(${100 / 6}vh - 4px)`,
43-
marginRight: '0.5rem',
44-
fontSize: '1.25rem',
45-
fontWeight: 600,
46-
color: '#fff',
47-
display: 'flex',
48-
flexDirection: 'column',
49-
textShadow: '0 1px 4px rgba(0,0,0,.1)'
50-
}}
51-
/>
52-
);
53-
};
13+
<div className="ray-grid">
14+
<div className="ray-grid__inner">
15+
<table className="ray-table color-table">
16+
<thead>
17+
<tr>
18+
<th>variable</th>
19+
<th>hsl</th>
20+
<th>rgb</th>
21+
<th>hex</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
{colorKeys.map(colorKey => {
26+
const color = Color(rayVars[colorKey]);
27+
const textColor = color.isDark() ? 'white' : 'black';
5428

55-
storiesOf('Colors', module).add('all', () => (
56-
<div className="ray-grid">
57-
<div className="ray-grid__inner">
58-
<div
59-
className="ray-grid__cell--span-2-phone ray-grid__cell--span-4-tablet ray-grid__cell--span-6-desktop"
60-
style={{
61-
marginBottom: '24px'
62-
}}
63-
>
64-
<Color className="ray-color-white" />
65-
</div>
66-
<div
67-
className="ray-grid__cell--span-2-phone ray-grid__cell--span-4-tablet ray-grid__cell--span-6-desktop"
68-
style={{
69-
marginBottom: '24px'
70-
}}
71-
>
72-
<Color className="ray-color-black" />
73-
</div>
74-
<div className="ray-grid__cell--span-1-phone ray-grid__cell--span-2-tablet ray-grid__cell--span-3-desktop">
75-
{GRAYS.map(color => (
76-
<Color className={color} />
77-
))}
78-
</div>
79-
<div className="ray-grid__cell--span-1-phone ray-grid__cell--span-2-tablet ray-grid__cell--span-3-desktop">
80-
{BLUES.map(color => (
81-
<Color className={color} />
82-
))}
83-
</div>
84-
<div className="ray-grid__cell--span-1-phone ray-grid__cell--span-2-tablet ray-grid__cell--span-3-desktop">
85-
{REDS.map(color => (
86-
<Color className={color} />
87-
))}
88-
</div>
89-
<div className="ray-grid__cell--span-1-phone ray-grid__cell--span-2-tablet ray-grid__cell--span-3-desktop">
90-
{GREENS.map(color => (
91-
<Color className={color} />
92-
))}
29+
return (
30+
<tr
31+
key={colorKey}
32+
style={{
33+
padding: 0
34+
}}
35+
>
36+
<td>
37+
<div
38+
style={{
39+
backgroundColor: rayVars[colorKey],
40+
display: 'inline-block',
41+
padding: '.25rem .5rem',
42+
marginRight: '1rem',
43+
verticalAlign: 'middle',
44+
color: textColor,
45+
borderRadius: '0.25rem'
46+
}}
47+
>
48+
<pre>${colorKey}</pre>
49+
</div>
50+
</td>
51+
<td>
52+
<pre
53+
style={{
54+
display: 'inline-block',
55+
verticalAlign: 'middle'
56+
}}
57+
>
58+
{color
59+
.hsl()
60+
.round()
61+
.string()}
62+
</pre>
63+
</td>
64+
<td>
65+
<pre
66+
style={{
67+
display: 'inline-block',
68+
verticalAlign: 'middle'
69+
}}
70+
>
71+
{color.rgb().string()}
72+
</pre>
73+
</td>
74+
<td>
75+
<pre
76+
style={{
77+
display: 'inline-block',
78+
verticalAlign: 'middle'
79+
}}
80+
>
81+
{color.hex().toString()}
82+
</pre>
83+
</td>
84+
</tr>
85+
);
86+
})}
87+
</tbody>
88+
</table>
9389
</div>
9490
</div>
95-
</div>
96-
));
91+
);
92+
});

‎packages/core/stories/styles/index.scss

Lines changed: 0 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,2 @@
11
@import '../../src/ray-core.scss';
22
@import '../../src/ray-debug.scss';
3-
4-
.ray-color-white {
5-
background-color: $ray-color-white;
6-
}
7-
8-
.ray-color-black {
9-
background-color: $ray-color-black;
10-
}
11-
12-
.ray-color-blue-10 {
13-
background-color: $ray-color-blue-10;
14-
}
15-
16-
.ray-color-blue-20 {
17-
background-color: $ray-color-blue-20;
18-
}
19-
20-
.ray-color-blue-50 {
21-
background-color: $ray-color-blue-50;
22-
}
23-
24-
.ray-color-blue-60 {
25-
background-color: $ray-color-blue-60;
26-
}
27-
28-
.ray-color-blue-70 {
29-
background-color: $ray-color-blue-70;
30-
}
31-
32-
.ray-color-red-10 {
33-
background-color: $ray-color-red-10;
34-
}
35-
36-
.ray-color-red-20 {
37-
background-color: $ray-color-red-20;
38-
}
39-
40-
.ray-color-red-50 {
41-
background-color: $ray-color-red-50;
42-
}
43-
44-
.ray-color-red-60 {
45-
background-color: $ray-color-red-60;
46-
}
47-
48-
.ray-color-red-70 {
49-
background-color: $ray-color-red-70;
50-
}
51-
52-
.ray-color-green-10 {
53-
background-color: $ray-color-green-10;
54-
}
55-
56-
.ray-color-green-20 {
57-
background-color: $ray-color-green-20;
58-
}
59-
60-
.ray-color-green-70 {
61-
background-color: $ray-color-green-70;
62-
}
63-
64-
.ray-color-green-80 {
65-
background-color: $ray-color-green-80;
66-
}
67-
68-
.ray-color-green-90 {
69-
background-color: $ray-color-green-90;
70-
}
71-
72-
.ray-color-gray-02 {
73-
background-color: $ray-color-gray-02;
74-
}
75-
76-
.ray-color-gray-10 {
77-
background-color: $ray-color-gray-10;
78-
}
79-
80-
.ray-color-gray-30 {
81-
background-color: $ray-color-gray-30;
82-
}
83-
84-
.ray-color-gray-50 {
85-
background-color: $ray-color-gray-50;
86-
}
87-
88-
.ray-color-gray-60 {
89-
background-color: $ray-color-gray-60;
90-
}

‎yarn.lock

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3489,7 +3489,7 @@
34893489
"@xtuc/long" "4.2.2"
34903490

34913491
"@wework/ray-core@file:packages/core":
3492-
version "0.4.0"
3492+
version "0.5.1"
34933493

34943494
"@xtuc/ieee754@^1.2.0":
34953495
version "1.2.0"
@@ -6126,6 +6126,14 @@ color@^3.0.0, color@^3.1.0:
61266126
color-convert "^1.9.1"
61276127
color-string "^1.5.2"
61286128

6129+
color@^3.1.1:
6130+
version "3.1.1"
6131+
resolved "https://registry.yarnpkg.com/color/-/color-3.1.1.tgz#7abf5c0d38e89378284e873c207ae2172dcc8a61"
6132+
integrity sha512-PvUltIXRjehRKPSy89VnDWFKY58xyhTLyxIg21vwQBI6qLwZNPmC8k3C1uytIgFKEpOIzN4y32iPm8231zFHIg==
6133+
dependencies:
6134+
color-convert "^1.9.1"
6135+
color-string "^1.5.2"
6136+
61296137
colors@^1.1.2:
61306138
version "1.3.3"
61316139
resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.3.tgz#39e005d546afe01e01f9c4ca8fa50f686a01205d"

0 commit comments

Comments
 (0)