README
sircus-tools-color
Install
npm:
$ npm install sircus-variables sircus-tools-color sircus-tools-border
Usage
cssnext:
input.css
@import "sircus-tools-border";
@import "sircus-tools-color";
@import "sircus-variables";
sass:
input.scss
@import "node_modules/sircus-variables/converted";
@import "node_modules/sircus-tools-border/converted";
@import "node_modules/sircus-tools-color/converted";
html
<!-- Type colors -->
<p class="t-colorGray90">...</p>
<p class="t-colorGray80">...</p>
<p class="t-colorGray60">...</p>
<p class="t-colorGray40">...</p>
<p class="t-colorGray20">...</p>
<p class="t-colorGray10">...</p>
<p class="t-colorGray5">...</p>
<div class="t-colorPrimaryDark">...</div>
<div class="t-colorPrimary">...</div>
<div class="t-colorPrimaryLight">...</div>
<div class="t-colorSuccessDark">...</div>
<div class="t-colorSuccess">...</div>
<div class="t-colorSuccessLight">...</div>
<div class="t-colorNoticeDark">...</div>
<div class="t-colorNotice">...</div>
<div class="t-colorNoticeLight">...</div>
<div class="t-colorWarningDark">...</div>
<div class="t-colorWarning">...</div>
<div class="t-colorWarningLight">...</div>
<div class="t-colorErrorDark">...</div>
<div class="t-colorError">...</div>
<div class="t-colorErrorLight">...</div>
<!-- Fill -->
<p class="t-fillGray90">...</p>
<p class="t-fillGray80">...</p>
<p class="t-fillGray60">...</p>
<p class="t-fillGray40">...</p>
<p class="t-fillGray20">...</p>
<p class="t-fillGray10">...</p>
<p class="t-fillGray5">...</p>
<div class="t-fillPrimaryDark">...</div>
<div class="t-fillPrimary">...</div>
<div class="t-fillPrimaryLight">...</div>
<div class="t-fillSuccessDark">...</div>
<div class="t-fillSuccess">...</div>
<div class="t-fillSuccessLight">...</div>
<div class="t-fillNoticeDark">...</div>
<div class="t-fillNotice">...</div>
<div class="t-fillNoticeLight">...</div>
<div class="t-fillWarningDark">...</div>
<div class="t-fillWarning">...</div>
<div class="t-fillWarningLight">...</div>
<div class="t-fillErrorDark">...</div>
<div class="t-fillError">...</div>
<div class="t-fillErrorLight">...</div>
<!-- Borders -->
<p class="t-border t-borderGray90">...</p>
<p class="t-border t-borderGray80">...</p>
<p class="t-border t-borderGray60">...</p>
<p class="t-border t-borderGray40">...</p>
<p class="t-border t-borderGray20">...</p>
<p class="t-border t-borderGray10">...</p>
<p class="t-border t-borderGray5">...</p>
<div class="t-border t-borderPrimaryDark">...</div>
<div class="t-border t-borderPrimary">...</div>
<div class="t-border t-borderPrimaryLight">...</div>
<div class="t-border t-borderSuccessDark">...</div>
<div class="t-border t-borderSuccess">...</div>
<div class="t-border t-borderSuccessLight">...</div>
<div class="t-border t-borderNoticeDark">...</div>
<div class="t-border t-borderNotice">...</div>
<div class="t-border t-borderNoticeLight">...</div>
<div class="t-border t-borderWarningDark">...</div>
<div class="t-border t-borderWarning">...</div>
<div class="t-border t-borderWarningLight">...</div>
<div class="t-border t-borderErrorDark">...</div>
<div class="t-border t-borderError">...</div>
<div class="t-border t-borderErrorLight">...</div>
Contributing
We Need Your Help!
License
Released under the MIT license.