https://github.com/brikcss/colors
Colors component to make managing colors in CSS easier.
https://github.com/brikcss/colors
Last synced: about 1 year ago
JSON representation
Colors component to make managing colors in CSS easier.
- Host: GitHub
- URL: https://github.com/brikcss/colors
- Owner: brikcss
- Created: 2018-06-04T15:34:41.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-08T20:42:38.000Z (over 7 years ago)
- Last Synced: 2025-03-15T13:18:45.424Z (over 1 year ago)
- Language: JavaScript
- Size: 214 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://caniuse.com/#search=css%20variables) are used, IE11 is supported with the use of a custom variables polyfill, such as [postcss-var-shim](https://github.com/luwes/postcss-var-shim)._
## Install
1. Install:
```sh
npm i -D @brikcss/colors
```
2. Include file(s) in your app:
- _PostCSS:_ `@import '@brikcss/colors';` with [postcss-import](https://github.com/postcss/postcss-import).
- _Precompiled:_ Include `./dist/colors.min.css` for the precompiled version (i.e., no PostCSS required).
- _Custom:_ To generate your own color variables and classes, use the [colors @mixin](./src/mixins/colors.js) and follow the [source CSS](./src/colors.css).
## Colors mixin usage
The [colors mixin](./src/mixins/colors.js) allows you to generate your own custom color variables and classes in one easy step. _See [postcss-mixins](https://github.com/postcss/postcss-mixins) for documentation on how to configure and use PostCSS mixins._
Sample input:
```css
@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:
```css
: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 to `false` to disable adding CSS variables and only add rules. You may also pass a String to change the default `color__` CSS variable prefix. For example:
```
@mixin colors my-color- {...}
```
will generate CSS variables like this:
```
--my-color-: ;
```