Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rgb #53

Merged
merged 9 commits into from Dec 17, 2016
Merged

Rgb #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7322c66
WIP
nikgraf Dec 15, 2016
7ec897a
chore(rgb): add first draft of rgb
nikgraf Dec 15, 2016
a46a8f1
Merge branch 'master' into rgb
nikgraf Dec 15, 2016
a5d3080
Merge branch 'master' into rgb
nikgraf Dec 16, 2016
607ddca
chore(internal): add internal reduceHexValue helper
nikgraf Dec 16, 2016
11e159a
chore(rgb): reduce hex values in rgb
nikgraf Dec 16, 2016
ee7dafe
chore(numberToHex): move numberToHex to internal
nikgraf Dec 16, 2016
d884f54
chore(rgb): export rgb and add color to the documentation
nikgraf Dec 17, 2016
b69fc1d
chore(rgb): move comment to fix docs
nikgraf Dec 17, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .documentation.json
View file
Open in desktop
Expand Up @@ -18,6 +18,11 @@
"size",
"timingFunctions",
"wordWrap",
{
"name": "Color",
"description": "Functions that help creating and modifying colors."
},
"rgb",
{
"name": "Shorthands",
"description": "Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation."
Expand Down
176 changes: 159 additions & 17 deletions docs/docs/index.html
View file
Open in desktop
Expand Up @@ -135,6 +135,26 @@ <h3 class='mb0 no-anchor'>polished</h3>
</li>


<li><a
href='#color'
class="h5 bold black caps">
Color

</a>

</li>


<li><a
href='#rgb'
class="">
rgb

</a>

</li>


<li><a
href='#shorthands'
class="h5 bold black caps">
Expand Down Expand Up @@ -259,7 +279,7 @@ <h3 class='fl m0' id='clearfix'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/clearFix.js#L26-L35'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/clearFix.js#L26-L35'>
<span>src/mixins/clearFix.js</span>
</a>

Expand Down Expand Up @@ -345,7 +365,7 @@ <h3 class='fl m0' id='ellipsis'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/ellipsis.js#L29-L38'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/ellipsis.js#L29-L38'>
<span>src/mixins/ellipsis.js</span>
</a>

Expand Down Expand Up @@ -434,7 +454,7 @@ <h3 class='fl m0' id='hidpi'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/hiDPI.js#L32-L40'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/hiDPI.js#L32-L40'>
<span>src/mixins/hiDPI.js</span>
</a>

Expand Down Expand Up @@ -526,7 +546,7 @@ <h3 class='fl m0' id='hidetext'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/hideText.js#L29-L35'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/hideText.js#L29-L35'>
<span>src/mixins/hideText.js</span>
</a>

Expand Down Expand Up @@ -601,7 +621,7 @@ <h3 class='fl m0' id='placeholder'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/placeholder.js#L35-L50'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/placeholder.js#L35-L50'>
<span>src/mixins/placeholder.js</span>
</a>

Expand Down Expand Up @@ -704,7 +724,7 @@ <h3 class='fl m0' id='retinaimage'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/retinaImage.js#L33-L48'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/retinaImage.js#L33-L48'>
<span>src/mixins/retinaImage.js</span>
</a>

Expand Down Expand Up @@ -829,7 +849,7 @@ <h3 class='fl m0' id='selection'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/selection.js#L31-L40'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/selection.js#L31-L40'>
<span>src/mixins/selection.js</span>
</a>

Expand Down Expand Up @@ -928,7 +948,7 @@ <h3 class='fl m0' id='size'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/size.js#L24-L29'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/size.js#L24-L29'>
<span>src/mixins/size.js</span>
</a>

Expand Down Expand Up @@ -1021,7 +1041,7 @@ <h3 class='fl m0' id='timingfunctions'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/timingFunctions.js#L81-L83'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/timingFunctions.js#L81-L83'>
<span>src/mixins/timingFunctions.js</span>
</a>

Expand Down Expand Up @@ -1104,7 +1124,7 @@ <h3 class='fl m0' id='wordwrap'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/wordWrap.js#L26-L33'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/mixins/wordWrap.js#L26-L33'>
<span>src/mixins/wordWrap.js</span>
</a>

Expand Down Expand Up @@ -1175,6 +1195,128 @@ <h3 class='fl m0' id='wordwrap'>



</section>




<div class='keyline-top-not py2'><section class='py2 clearfix'>

<h2 id='Color' class='mt0'>
Color
</h2>


<p>Functions that help creating and modifying colors.</p>


</section>
</div>



<section class='p2 mb2 clearfix bg-white minishadow'>


<div class='clearfix'>

<h3 class='fl m0' id='rgb'>
rgb
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/helpers/rgb.js#L35-L43'>
<span>src/helpers/rgb.js</span>
</a>

</div>


<p>Returns a string value for the color. The returned result is the smalles possible hex notation.</p>


<div class='pre p1 fill-light mt0'>rgb(value: (RgbColor | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>), green: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, blue: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>










<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>

<div class='space-bottom0'>
<div>
<span class='code bold'>value</span> <code class='quiet'>((RgbColor | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>))</code>

</div>

</div>

<div class='space-bottom0'>
<div>
<span class='code bold'>green</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>

</div>

</div>

<div class='space-bottom0'>
<div>
<span class='code bold'>blue</span> <code class='quiet'>(<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>

</div>

</div>

</div>






<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>






<div class='py1 quiet mt1 prose-big'>Example</div>


<pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
<span class="hljs-keyword">const</span> styles = {
<span class="hljs-built_in">background</span>: rgb(<span class="hljs-number">255</span>, <span class="hljs-number">205</span>, <span class="hljs-number">100</span>),
<span class="hljs-built_in">background</span>: rgb({ <span class="hljs-built_in">red</span>: <span class="hljs-number">255</span>, <span class="hljs-built_in">green</span>: <span class="hljs-number">205</span>, <span class="hljs-built_in">blue</span>: <span class="hljs-number">100</span> }),
}

<span class="hljs-comment">// styled-components usage</span>
<span class="hljs-keyword">const</span> div = styled.div`
<span class="hljs-built_in">background</span>: ${rgb(<span class="hljs-number">255</span>, <span class="hljs-number">205</span>, <span class="hljs-number">100</span>)};
<span class="hljs-built_in">background</span>: ${rgb({ <span class="hljs-built_in">red</span>: <span class="hljs-number">255</span>, <span class="hljs-built_in">green</span>: <span class="hljs-number">205</span>, <span class="hljs-built_in">blue</span>: <span class="hljs-number">100</span> })};
`

<span class="hljs-comment">// CSS in JS Output</span>

element {
<span class="hljs-built_in">background</span>: <span class="hljs-string">"#ffcd64"</span>;
<span class="hljs-built_in">background</span>: <span class="hljs-string">"#ffcd64"</span>;
}</pre>








</section>


Expand Down Expand Up @@ -1205,7 +1347,7 @@ <h3 class='fl m0' id='animation'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/shorthands/animation.js#L41-L61'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/shorthands/animation.js#L41-L61'>
<span>src/shorthands/animation.js</span>
</a>

Expand Down Expand Up @@ -1306,7 +1448,7 @@ <h3 class='fl m0' id='buttons'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/shorthands/buttons.js#L47-L49'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/shorthands/buttons.js#L47-L49'>
<span>src/shorthands/buttons.js</span>
</a>

Expand Down Expand Up @@ -1396,7 +1538,7 @@ <h3 class='fl m0' id='textinputs'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/shorthands/textInputs.js#L71-L73'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/shorthands/textInputs.js#L71-L73'>
<span>src/shorthands/textInputs.js</span>
</a>

Expand Down Expand Up @@ -1513,7 +1655,7 @@ <h3 class='fl m0' id='em'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/helpers/em.js#L29-L29'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/helpers/em.js#L29-L29'>
<span>src/helpers/em.js</span>
</a>

Expand Down Expand Up @@ -1606,7 +1748,7 @@ <h3 class='fl m0' id='modularscale'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/helpers/modularScale.js#L66-L82'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/helpers/modularScale.js#L66-L82'>
<span>src/helpers/modularScale.js</span>
</a>

Expand Down Expand Up @@ -1709,7 +1851,7 @@ <h3 class='fl m0' id='rem'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/helpers/rem.js#L28-L28'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/helpers/rem.js#L28-L28'>
<span>src/helpers/rem.js</span>
</a>

Expand Down Expand Up @@ -1802,7 +1944,7 @@ <h3 class='fl m0' id='stripunit'>
</h3>


<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/helpers/stripUnit.js#L24-L28'>
<a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/d884f5416f96dee1d09313a1c5575b3b755977b8/src/helpers/stripUnit.js#L24-L28'>
<span>src/helpers/stripUnit.js</span>
</a>

Expand Down