@automattic/calypso-color-schemes

3.1.3 • Public • Published

Calypso Color Schemes

This package contains a number of CSS custom properties used in Calypso.

Color scheme thumbnails

Installation

yarn add @automattic/calypso-color-schemes

Usage

Using the CSS output

Add this packages CSS from css/index.css in order to access the CSS custom properties.

When importing, you can do

import '@automattic/calypso-color-schemes';

And this will give you the CSS.

If you want only the :root rules without all the schemes, you can do

import '@automattic/calypso-color-schemes/root-only';

Using the JS output

Sometimes, calypso-color-schemes properties are consumed in JavaScript. To avoid parsing CSS syntax on your own, or to help postcss-custom-properties use them without parsing the CSS (much faster), use the JS output as follows:

import { customProperties } from '@automattic/calypso-color-schemes/js'; // mind the js suffix

Or with postcss-custom-properties, and postcss.config.js can look like this:

module.exports = () => ( {
	plugins: {
		'postcss-custom-properties': {
			importFrom: [ require.resolve( '@automattic/calypso-color-schemes/js' ) ],
		},
	},
} );

Note on using the JS output

The CSS files include variable definitions for all Calypso color schemes (Classic Blue, Contrast, Midnight, ...), but the JS exports include only variables from the :root selector, i.e., only the fallback default theme.

Dependencies (0)

    Dev Dependencies (6)

    Package Sidebar

    Install

    npm i @automattic/calypso-color-schemes

    Weekly Downloads

    12,497

    Version

    3.1.3

    License

    GPL-2.0-or-later

    Unpacked Size

    374 kB

    Total Files

    31

    Last publish

    Collaborators

    • imranh920
    • gmjuhasz
    • rcarvalho
    • briowill
    • bgrgicak
    • dhenridev
    • daledupreez-a8c
    • jeherve
    • yuliyan
    • micbosia8c
    • jeremy.yip
    • wpvip-bot
    • etobiesen
    • kzoschke
    • brunobasto
    • kat3samsin
    • fmfernandes
    • newspack
    • robertsreberski_a8c
    • msurdi-a8c
    • chihsuan
    • manzoorwanijk
    • rjchow
    • andrea-sdl
    • scjr
    • spsiddarthan
    • t2dw4t
    • ehg_
    • wwa
    • sirreal
    • elazzabi
    • royho
    • luismulinari
    • macbre
    • mjangda
    • matticbot
    • a8c
    • blowery
    • noahtallen
    • hanifn
    • sgomes
    • tyxla
    • saroshaga
    • parkcityj
    • nejclovrencic
    • sirbrillig
    • chriszarate
    • robersongomes
    • johngodley