Gravity Flow Design Tokens

Design tokens as PostCSS variables, media queries, and mixins for Gravity Flow development.

Installation

Install the module

npm install @gravityflow/design-tokens --save

Note: This package requires node 16.13.0 or later, and npm 8.1.0 or later.

Overview

A collection of design tokens as variables and mixins that drive our theme for Gravity Flow in objects that map to PostCSS plugins, grouped for the common, admin, and theme contexts in WordPress.

Currently, we supply customProperties, customMedia, and mixins. Please note the required PostCSS plugins that must be used with each module type.

Usage

Use all of our admin custom properties in postcss-custom-properties:

const postcssPlugins = [
        ...otherPlugins,
	require( 'postcss-custom-properties' )( {
		importFrom: [
			{ customProperties: require( '@gravityflow/design-tokens/custom-properties/admin' ) },
		],
	} ),
	...otherPlugins,
];

Use only our admin color custom properties in postcss-custom-properties:

const postcssPlugins = [
        ...otherPlugins,
	require( 'postcss-custom-properties' )( {
		importFrom: [
			{ customProperties: require( '@gravityflow/design-tokens/custom-properties/admin/colors' ) },
		],
	} ),
	...otherPlugins,
];

Use all of our admin custom media (media queries) in postcss-custom-media:

const postcssPlugins = [
        ...otherPlugins,
	require( 'postcss-custom-media' )( {
		importFrom: [
			{ customMedia: require( '@gravityflow/design-tokens/custom-media/admin' ) },
		],
	} ),
	...otherPlugins,
];

Use all of our admin mixins in postcss-mixins (after custom properties):

const postcssPlugins = [
        ...otherPlugins,
	require( 'postcss-mixins' )( {
		mixins: require( '@gravityflow/design-tokens/mixins/admin' ),
	} ),
	...otherPlugins,
];

Reference

Common

Design Tokens

Mixins

Admin

Design Tokens

Mixins

Theme

Design Tokens

Mixins