0.0.2 • Published 6 years ago
@brikcss/colors v0.0.2
Colors
Colors component to make creating and managing color class and variables in CSS easier.
Environment and browser support
Node | CLI | UMD | ES Module | Browser |
---|---|---|---|---|
x | x | x | x | ✓ |
Chrome | Firefox | Safari | Edge | IE | iOS | Android |
---|---|---|---|---|---|---|
✓ | ✓ | ✓ | ✓ | 11 | ✓ | ✓ |
* Note: Since uses CSS Variables are used, IE11 is supported with the use of a custom variables polyfill, such as postcss-var-shim.
Install
Install:
npm i -D
Include desired file(s) in your app:
./dist/colors.init.css
is the default CSS file, precompiled with PostCSS. Include this to use all defaults../src/colors.init.css
is the source CSS file. Use this as an example, along with the source PostCSS mixins, to generate your own colors../src/mixins/colors.js
is the source colors mixin. Use this to generate your own color variables and classes.
Colors mixin usage
The colors mixin allows you to generate your own custom color variables and classes in one easy step. See postcss-mixins for documentation on how to configure and use PostCSS mixins.
Sample input:
@mixin colors {
/* CSS variables are created for each color value. */
brand1: red;
brand2: blue;
text: white;
/* Rules are created for each value in its `colors` property. */
.color- {
colors: text;
color: color();
}
.bg- {
colors: brand1 brand2;
background-color: color();
fill: color();
color: var(--color__text);
}
}
Output:
:root {
--color__brand1: red;
--color__brand2: blue;
--color__text: white;
}
.color-text {
color: var(--color__text);
}
.bg-brand1 {
background-color: var(--color__brand1);
fill: var(--color__brand1);
color: var(--color__text);
}
.bg-brand2 {
background-color: var(--color__brand2);
fill: var(--color__brand2);
color: var(--color__text);
}
Options
addVariables {Boolean|String}
true
Set tofalse
to disable adding CSS variables and only add rules. You may also pass a String to change the defaultcolor__
CSS variable prefix. For example:``` @mixin colors my-color- {...} ``` will generate CSS variables like this: ``` --my-color-<color-name>: <color-value>; ```