How to use @automattic/color-studio - 2 common examples

To help you get started, we’ve selected a few @automattic/color-studio examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Automattic / wp-calypso / bin / audit-svg-colors.js View on Github external
function findPaletteColorName( value ) {
	let name;

	// Iterating from right to make sure color name aliases aren’t caught
	_.forInRight( PALETTE.colors, ( paletteValue, paletteColorName ) => {
		if ( paletteValue === value ) {
			name = paletteColorName;
			return false;
		}
	} );

	return name;
}
github Automattic / wp-calypso / bin / audit-svg-colors.js View on Github external
*/

const { execSync } = require( 'child_process' );
const path = require( 'path' );
const { readFileSync } = require( 'fs' );

const _ = require( 'lodash' );
const chroma = require( 'chroma-js' );
const PALETTE = require( '@automattic/color-studio' );

/**
 * Palette color subsets
 */

// The subset of palette colors allowed in illustrations
const PALETTE_ILLUSTRATION_COLORS = _.pickBy( PALETTE.colors, ( colorValue, colorName ) => {
	// Avoid using pure black
	if ( colorValue === '#000' ) {
		return;
	}
	// Since illustrations are a part of WordPress.com’s and Jetpack’s visual
	// identity, we prefer them over generic Blue, Green, and Celadon. We don’t
	// use WooCommerce Purple either
	return ! (
		_.startsWith( colorName, 'Blue' ) ||
		_.startsWith( colorName, 'Green' ) ||
		_.startsWith( colorName, 'Celadon' ) ||
		_.startsWith( colorName, 'WooCommerce Purple' )
	);
} );

// The subset of palette colors used in app-related images is slightly wider

@automattic/color-studio

The color palette for Automattic products.

GPL-2.0
Latest version published 2 months ago

Package Health Score

78 / 100
Full package analysis

Popular @automattic/color-studio functions

Similar packages