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 @brikcss/colors

2. Include file(s) in your app:

   • PostCSS: @import '@brikcss/colors'; with 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 and follow the source CSS.

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>;