@gravityforms/design-tokens/README.md

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

# Gravity Forms Design Tokens

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

## Installation

Install the module

```bash
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](https://github.com/postcss/postcss-custom-properties):

```js
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](https://github.com/postcss/postcss-custom-properties):

```js
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](https://github.com/postcss/postcss-custom-media):

```js
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](https://github.com/postcss/postcss-mixins) (after custom properties):

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