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.