Design tokens as PostCSS variables, media queries, and mixins for Gravity Forms development.
npm install @gravityforms/design-tokensDesign tokens as PostCSS variables, media queries, and mixins for Gravity Forms development.
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.
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.
Use all of our Gravity Forms admin custom properties in 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:
`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:
`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 (after custom properties):
`js``
const postcssPlugins = [
...otherPlugins,
require( 'postcss-mixins' )( {
mixins: require( '@gravityforms/design-tokens/gravityforms/mixins/admin' ),
} ),
...otherPlugins,
];