Gravity Forms Design Tokens

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

Installation

Install the module

npm install @gravityforms/design-tokens --save

Note: This package requires node 20.10.0 or later, and npm 10.2.3 or later.

Overview

A collection of design tokens as variables and mixins that drive our theme for Gravity Forms in objects that map to PostCSS plugins, grouped for the 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 Gravity Forms admin custom properties in postcss-custom-properties:

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

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

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

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

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

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

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