Now Particularly Misnamed


    0.0.2 • Public • Published


    NPM version NPM downloads per month Travis branch NPM version Coverage Status Commitizen friendly semantic release code style: prettier

    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

    * Note: Since uses CSS Variables are used, IE11 is supported with the use of a custom variables polyfill, such as postcss-var-shim.


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


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


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


    npm i @brikcss/colors

    DownloadsWeekly Downloads






    Unpacked Size

    6.94 kB

    Total Files


    Last publish


    • thezimmee