-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix(colors): add 03 gray fix #2 * retrigger ci * fix: add color table to storybook
- @wework/ray-core@1.8.5
- @wework/ray-core@1.8.4
- @wework/ray-core@1.8.3
- @wework/ray-core@1.8.2
- @wework/ray-core@1.8.1
- @wework/ray-core@1.8.0
- @wework/ray-core@1.7.4
- @wework/ray-core@1.7.3
- @wework/ray-core@1.7.2
- @wework/ray-core@1.7.1
- @wework/ray-core@1.7.0
- @wework/ray-core@1.6.0
- @wework/ray-core@1.5.2
- @wework/ray-core@1.5.1
- @wework/ray-core@1.5.0
- @wework/ray-core@1.4.3
- @wework/ray-core@1.4.2
- @wework/ray-core@1.4.1
- @wework/ray-core@1.4.0
- @wework/ray-core@1.3.12
- @wework/ray-core@1.3.11
- @wework/ray-core@1.3.10
- @wework/ray-core@1.3.9
- @wework/ray-core@1.3.8
- @wework/ray-core@1.3.7
- @wework/ray-core@1.3.6
- @wework/ray-core@1.3.5
- @wework/ray-core@1.3.4
- @wework/ray-core@1.3.3
- @wework/ray-core@1.3.2
- @wework/ray-core@1.3.1
- @wework/ray-core@1.3.0
- @wework/ray-core@1.2.0
- @wework/ray-core@1.1.0
- @wework/ray-core@1.0.5
- @wework/ray-core@1.0.4
- @wework/ray-core@1.0.3
- @wework/ray-core@1.0.2
- @wework/ray-core@1.0.1
- @wework/ray-core@1.0.0
- @wework/ray-core@0.6.9
- @wework/ray-core@0.6.8
- @wework/ray-core@0.6.7
- @wework/ray-core@0.6.6
- @wework/ray-core@0.6.5
- @wework/ray-core@0.6.4
- @wework/ray-core@0.6.3
- v1.16.9
- v1.16.8
- v1.16.7
- v1.16.6
- v1.16.5
- v1.16.4
- v1.16.3
- v1.16.2
- v1.16.1
- v1.16.0
- v1.15.4
- v1.15.3
- v1.15.2
- v1.15.1
- v1.15.0
- v1.14.0
- v1.13.10
- v1.13.9
- v1.13.8
- v1.13.7
- v1.13.6
- v1.13.5
- v1.13.4
- v1.13.3
- v1.13.2
- v1.13.1
- v1.13.0
- v1.12.4
- v1.12.3
- v1.12.2
- v1.12.1
- v1.12.0
- v1.11.5
- v1.11.4
- v1.11.3
- v1.11.2
- v1.11.1
- v1.11.0
- v1.10.2
- v1.10.1
- v1.10.0
- v1.9.0
- rehype-react@3.1.5
- rehype-react@3.1.4
- ray-website-gatsby@1.4.12
- ray-website-gatsby@1.4.11
- ray-website-gatsby@1.4.10
- ray-website-gatsby@1.4.9
- ray-website-gatsby@1.4.8
- ray-website-gatsby@1.4.7
- ray-website-gatsby@1.4.6
- ray-website-gatsby@1.4.5
- ray-website-gatsby@1.4.4
- ray-website-gatsby@1.4.3
- ray-website-gatsby@1.4.2
- ray-website-gatsby@1.4.1
- ray-website-gatsby@1.4.0
- ray-website-gatsby@1.3.4
- ray-website-gatsby@1.3.3
- ray-website-gatsby@1.3.2
- ray-website-gatsby@1.3.1
- ray-website-gatsby@1.3.0
- ray-website-gatsby@1.2.5
- ray-website-gatsby@1.2.4
- ray-website-gatsby@1.2.3
- ray-website-gatsby@1.2.2
- ray-website-gatsby@1.2.1
- ray-website-gatsby@1.2.0
- ray-website-gatsby@1.1.16
- ray-website-gatsby@1.1.15
- ray-website-gatsby@1.1.14
- ray-website-gatsby@1.1.13
- ray-website-gatsby@1.1.12
- ray-website-gatsby@1.1.11
- ray-website-gatsby@1.1.10
- ray-website-gatsby@1.1.9
- ray-website-gatsby@1.1.8
- ray-website-gatsby@1.1.7
- ray-website-gatsby@1.1.6
- ray-website-gatsby@1.1.5
- ray-website-gatsby@1.1.4
- ray-website-gatsby@1.1.3
- ray-website-gatsby@1.1.2
- ray-website-gatsby@1.1.1
- ray-website-gatsby@1.1.0
- ray-website-gatsby@1.0.9
- ray-website-gatsby@1.0.8
- ray-website-gatsby@1.0.7
- ray-website-gatsby@1.0.6
- ray-website-gatsby@1.0.5
- ray-website-gatsby@1.0.4
- ray-website-gatsby@1.0.3
- ray-website-gatsby@1.0.2
- ray-website-gatsby@1.0.1
- ray-website-gatsby@1.0.0
- ray-website-gatsby@0.5.16
- ray-website-gatsby@0.5.15
- ray-website-gatsby@0.5.14
- ray-website-gatsby@0.5.13
- ray-website-gatsby@0.5.12
- ray-website-gatsby@0.5.11
- ray-website-gatsby@0.5.10
- ray-website-gatsby@0.5.9
adamraider
authored
Apr 30, 2019
1 parent
0ddcb9a
commit 7637594
Showing
8 changed files
with
97 additions
and
180 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
)); | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters