Skip to content

Commit

Permalink
fix(colors): add 03 gray (#8)
Browse files Browse the repository at this point in the history
* fix(colors): add 03 gray

fix #2

* retrigger ci

* fix: add color table to storybook
adamraider authored Apr 30, 2019
1 parent 0ddcb9a commit 7637594
Showing 8 changed files with 97 additions and 180 deletions.
1 change: 1 addition & 0 deletions packages/core/package.json
Original file line number Diff line number Diff line change
@@ -28,6 +28,7 @@
"@storybook/core": "^5.0.6",
"@storybook/react": "^5.0.5",
"babel-loader": "8.0.5",
"color": "^3.1.1",
"css-loader": "1.0.1",
"del": "3.0.0",
"emotion-theming": "^10.0.7",
2 changes: 1 addition & 1 deletion packages/core/src/components/button/_button.scss
Original file line number Diff line number Diff line change
@@ -156,7 +156,7 @@
border-color: transparent;

&:hover {
background-color: $ray-color-gray-02;
background-color: $ray-color-gray-03;
}

&:focus {
2 changes: 1 addition & 1 deletion packages/core/src/global/_colors.scss
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ $ray-color-green-70: hsl(132, 76%, 100% - 70%);
$ray-color-green-80: hsl(132, 76%, 100% - 80%);
$ray-color-green-90: hsl(132, 76%, 100% - 90%);

$ray-color-gray-02: hsl(0, 0%, 100% - 02%);
$ray-color-gray-03: hsl(0, 0%, 100% - 03%);
$ray-color-gray-10: hsl(0, 0%, 100% - 10%);
$ray-color-gray-30: hsl(0, 0%, 100% - 30%);
$ray-color-gray-50: hsl(0, 0%, 100% - 50%);
2 changes: 1 addition & 1 deletion packages/core/src/global/_typography.scss
Original file line number Diff line number Diff line change
@@ -171,7 +171,7 @@
.#{$ray-class-prefix}blockquote {
padding: $ray-spacing-lg;
margin: $ray-spacing-lg 0;
background-color: $ray-color-gray-02;
background-color: $ray-color-gray-03;
border-radius: $ray-border-radius;
border: 1px solid $ray-color-gray-10;
color: $ray-color-text-dark;
2 changes: 1 addition & 1 deletion packages/core/src/ray-exports.scss
Original file line number Diff line number Diff line change
@@ -43,7 +43,7 @@
ray-color-green-70: $ray-color-green-70;
ray-color-green-80: $ray-color-green-80;
ray-color-green-90: $ray-color-green-90;
ray-color-gray-02: $ray-color-gray-02;
ray-color-gray-03: $ray-color-gray-03;
ray-color-gray-10: $ray-color-gray-10;
ray-color-gray-30: $ray-color-gray-30;
ray-color-gray-50: $ray-color-gray-50;
170 changes: 83 additions & 87 deletions packages/core/stories/colors.stories.js
Original file line number Diff line number Diff line change
@@ -1,96 +1,92 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import Color from 'color';

const BLUES = [
'ray-color-blue-10',
'ray-color-blue-20',
'ray-color-blue-50',
'ray-color-blue-60',
'ray-color-blue-70'
];
import * as rayVars from '../src/ray-exports.scss';

const REDS = [
'ray-color-red-10',
'ray-color-red-20',
'ray-color-red-50',
'ray-color-red-60',
'ray-color-red-70'
];

const GREENS = [
'ray-color-green-10',
'ray-color-green-20',
'ray-color-green-70',
'ray-color-green-80',
'ray-color-green-90'
];

const GRAYS = [
'ray-color-gray-02',
'ray-color-gray-10',
'ray-color-gray-30',
'ray-color-gray-50',
'ray-color-gray-60'
];
storiesOf('Colors', module).add('all', () => {
const colorKeys = Object.keys(rayVars).filter(rayVariable =>
rayVariable.startsWith('ray-color-')
);

const Color = function(props) {
return (
<div
{...props}
style={{
width: '100%',
height: `calc(${100 / 6}vh - 4px)`,
marginRight: '0.5rem',
fontSize: '1.25rem',
fontWeight: 600,
color: '#fff',
display: 'flex',
flexDirection: 'column',
textShadow: '0 1px 4px rgba(0,0,0,.1)'
}}
/>
);
};
<div className="ray-grid">
<div className="ray-grid__inner">
<table className="ray-table color-table">
<thead>
<tr>
<th>variable</th>
<th>hsl</th>
<th>rgb</th>
<th>hex</th>
</tr>
</thead>
<tbody>
{colorKeys.map(colorKey => {
const color = Color(rayVars[colorKey]);
const textColor = color.isDark() ? 'white' : 'black';

storiesOf('Colors', module).add('all', () => (
<div className="ray-grid">
<div className="ray-grid__inner">
<div
className="ray-grid__cell--span-2-phone ray-grid__cell--span-4-tablet ray-grid__cell--span-6-desktop"
style={{
marginBottom: '24px'
}}
>
<Color className="ray-color-white" />
</div>
<div
className="ray-grid__cell--span-2-phone ray-grid__cell--span-4-tablet ray-grid__cell--span-6-desktop"
style={{
marginBottom: '24px'
}}
>
<Color className="ray-color-black" />
</div>
<div className="ray-grid__cell--span-1-phone ray-grid__cell--span-2-tablet ray-grid__cell--span-3-desktop">
{GRAYS.map(color => (
<Color className={color} />
))}
</div>
<div className="ray-grid__cell--span-1-phone ray-grid__cell--span-2-tablet ray-grid__cell--span-3-desktop">
{BLUES.map(color => (
<Color className={color} />
))}
</div>
<div className="ray-grid__cell--span-1-phone ray-grid__cell--span-2-tablet ray-grid__cell--span-3-desktop">
{REDS.map(color => (
<Color className={color} />
))}
</div>
<div className="ray-grid__cell--span-1-phone ray-grid__cell--span-2-tablet ray-grid__cell--span-3-desktop">
{GREENS.map(color => (
<Color className={color} />
))}
return (
<tr
key={colorKey}
style={{
padding: 0
}}
>
<td>
<div
style={{
backgroundColor: rayVars[colorKey],
display: 'inline-block',
padding: '.25rem .5rem',
marginRight: '1rem',
verticalAlign: 'middle',
color: textColor,
borderRadius: '0.25rem'
}}
>
<pre>${colorKey}</pre>
</div>
</td>
<td>
<pre
style={{
display: 'inline-block',
verticalAlign: 'middle'
}}
>
{color
.hsl()
.round()
.string()}
</pre>
</td>
<td>
<pre
style={{
display: 'inline-block',
verticalAlign: 'middle'
}}
>
{color.rgb().string()}
</pre>
</td>
<td>
<pre
style={{
display: 'inline-block',
verticalAlign: 'middle'
}}
>
{color.hex().toString()}
</pre>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</div>
</div>
));
);
});
88 changes: 0 additions & 88 deletions packages/core/stories/styles/index.scss
Original file line number Diff line number Diff line change
@@ -1,90 +1,2 @@
@import '../../src/ray-core.scss';
@import '../../src/ray-debug.scss';

.ray-color-white {
background-color: $ray-color-white;
}

.ray-color-black {
background-color: $ray-color-black;
}

.ray-color-blue-10 {
background-color: $ray-color-blue-10;
}

.ray-color-blue-20 {
background-color: $ray-color-blue-20;
}

.ray-color-blue-50 {
background-color: $ray-color-blue-50;
}

.ray-color-blue-60 {
background-color: $ray-color-blue-60;
}

.ray-color-blue-70 {
background-color: $ray-color-blue-70;
}

.ray-color-red-10 {
background-color: $ray-color-red-10;
}

.ray-color-red-20 {
background-color: $ray-color-red-20;
}

.ray-color-red-50 {
background-color: $ray-color-red-50;
}

.ray-color-red-60 {
background-color: $ray-color-red-60;
}

.ray-color-red-70 {
background-color: $ray-color-red-70;
}

.ray-color-green-10 {
background-color: $ray-color-green-10;
}

.ray-color-green-20 {
background-color: $ray-color-green-20;
}

.ray-color-green-70 {
background-color: $ray-color-green-70;
}

.ray-color-green-80 {
background-color: $ray-color-green-80;
}

.ray-color-green-90 {
background-color: $ray-color-green-90;
}

.ray-color-gray-02 {
background-color: $ray-color-gray-02;
}

.ray-color-gray-10 {
background-color: $ray-color-gray-10;
}

.ray-color-gray-30 {
background-color: $ray-color-gray-30;
}

.ray-color-gray-50 {
background-color: $ray-color-gray-50;
}

.ray-color-gray-60 {
background-color: $ray-color-gray-60;
}
10 changes: 9 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
@@ -3489,7 +3489,7 @@
"@xtuc/long" "4.2.2"

"@wework/ray-core@file:packages/core":
version "0.4.0"
version "0.5.1"

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

color@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/color/-/color-3.1.1.tgz#7abf5c0d38e89378284e873c207ae2172dcc8a61"
integrity sha512-PvUltIXRjehRKPSy89VnDWFKY58xyhTLyxIg21vwQBI6qLwZNPmC8k3C1uytIgFKEpOIzN4y32iPm8231zFHIg==
dependencies:
color-convert "^1.9.1"
color-string "^1.5.2"

colors@^1.1.2:
version "1.3.3"
resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.3.tgz#39e005d546afe01e01f9c4ca8fa50f686a01205d"

0 comments on commit 7637594

Please sign in to comment.