@brikcss/colors

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

1. Install:

   npm i -D

2. 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 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-<color-name>: <color-value>;