Gravity Forms Theme

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

Installation

Install the module

npm install @gravityforms/theme --save

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

Overview

A collection of 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 admin custom properties in postcss-custom-properties:

const postcssPlugins = [
        ...otherPlugins,
	require( 'postcss-custom-properties' )( {
		importFrom: [
			{ customProperties: require( '@gravityforms/theme/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( '@gravityforms/theme/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( '@gravityforms/theme/custom-media/admin' ) },
		],
	} ),
	...otherPlugins,
];

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

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

Reference

@gravityforms/theme/custom-media/admin

module.exports = {
	'--viewport-xxsmall': '(min-width: 400px)',
	'--viewport-xsmall': '(min-width: 500px)',
	'--viewport-small': '(min-width: 600px)',
	'--viewport-medium': '(min-width: 768px)',
	'--viewport-wpadmin': '(min-width: 783px)',
	'--viewport-full-down': '(max-width: 960px)',
	'--viewport-full': '(min-width: 960px)',
	'--viewport-large': '(min-width: 1200px)',
	'--viewport-xlarge': '(min-width: 1260px)',
	'--viewport-xxlarge': '(min-width: 1390px)',
	'--viewport-retina': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
}

@gravityforms/theme/custom-properties/admin/box-shadow

module.exports = {
	'--bs-datepicker': '0 0.125rem 0.75rem rgba(28, 31, 63, 0.09)',
	'--bs-focus-light': '0 0 0 1px var(--c-focus)',
	'--bs-focus': '0 0 0 2px var(--c-focus)',
	'--bs-focus-sm': '0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 2px var(--c-white-lilac)',
	'--bs-button': '0 1px 2px rgba(0, 0, 0, 0.05)',
	'--bs-small': 'var(--bs-datepicker)',
	'--bs-input-focus': '0 0.125rem 0.0675rem rgba(28, 31, 63, 0.0634624), 0 0 0 2px var(--c-focus)',
	'--bs-input-hover': '0 0.25rem 0.25rem rgba(18, 25, 97, 0.0405344)',
	'--bs-outline-light': '0 2px 2px rgba(58, 58, 87, 0.0596411)',
	'--bs-outline-light-hover': '0 4px 2px rgba(58, 58, 87, 0.1)',
	'--bs-outline-light-hover-alt': '0 2px 2px rgba(58, 58, 87, 0.0796)',
}

@gravityforms/theme/custom-properties/admin/colors

module.exports = {
	'--c-white': '#fff',
	'--c-black': '#000',
	'--c-titan-white': '#fdfdff',
	'--c-zircon': '#fbfdff',
	'--c-light-blue': '#f6f9fc',
	'--c-comet': '#5b5e80',
	'--c-blue-haze': '#c3c5db',
	'--c-white-lilac': '#ecedf8',
	'--c-white-iris': '#f4f5fb',
	'--c-snuff': '#d5d7e9',
	'--c-santas': '#9b9db8',
	'--c-amethyst-smoke': '#9092b2',
	'--c-gravity-blue': '#3e7da6',
	'--c-primary-light': '#3985b7',
	'--c-chathams': '#0f3d6c',
	'--c-orange': '#f15a2b',
	'--c-green': '#22a753',
	'--c-hunter': '#276a52',
	'--c-tara': '#e1f6ed',
	'--c-emerald': '#57c091',
	'--c-red': '#dd301d',
	'--c-background-red': '#feefef',
	'--c-blue-ribbon': '#175cff',
	'--c-yellow': '#ffbe03',
	'--c-warning': '#a16938',
	'--c-port': '#242748',
	'--c-port-dark': '#1c1f3f',
	'--c-spindle': '#bed8ed',
	'--c-placeholder': 'var(--c-comet)',
	'--c-border': 'var(--c-amethyst-smoke)',
	'--c-button-disabled': '#639cc1',
	'--c-focus': 'var(--c-spindle)',
	'--c-icon': 'var(--c-amethyst-smoke)',
	'--c-text': 'var(--c-port)',
	'--c-disabled': 'var(--c-white-iris)',
	'--c-error': 'var(--c-red)',
	'--c-button': 'var(--c-gravity-blue)',
}

@gravityforms/theme/custom-properties/admin/heights

module.exports = {
	'--h-editor-accordion-toggles': '3.375rem',
}

@gravityforms/theme/custom-properties/admin/transitions

module.exports = {
	'--tr-hover': 'all 0.15s ease',
	'--tr-hover-slow': 'color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out',
	'--tr-color': 'color 0.15s ease',
	'--tr-dropdown': 'opacity 0.15s ease',
	'--tr-button': 'transform 300ms ease, box-shadow 300ms ease, background-color 300ms ease',
	'--tr-inputs': 'box-shadow 0.15s ease, background-color 0.15s ease',
	'--tr-toggles': 'left 0.25s ease',
	'--cl-linear-transform': 'transform 200ms',
	'--cl-bezier-flyout': 'transform 200ms cubic-bezier(1, 0, 0, 1.005)',
	'--tr-cl-button-focus': 'border-color 200ms ease-in-out, box-shadow 200ms ease-in-out',
	'--tr-cl-flyout-reveal': 'opacity 190ms ease-in-out, transform 190ms ease-in-out',
}

@gravityforms/theme/custom-properties/admin/typography

module.exports = {
	'--t-font-family-base': 'inter, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif',
	'--t-font-family-admin-icons': '"gform-icons-admin"',
	'--t-font-family-theme-icons': '"gform-icons-theme"',
	'--t-font-weight-normal': '400',
	'--t-font-weight-medium': '500',
	'--t-font-weight-bold': '600',
	'--t-font-size-small': '0.75rem',
	'--t-font-size-base': '0.8125rem',
	'--t-font-size-label': '0.875rem',
	'--t-font-size-large-label': '1.0625rem',
	'--t-line-height-base': '1.188rem',
	'--t-line-height-label': '1.125rem',
}

@gravityforms/theme/custom-properties/theme/box-shadow

module.exports = {
	'--bs-datepicker': '0 0.0625rem 0.25rem rgba(0, 0, 0, 0.11), 0 0 0.25rem rgba(18, 25, 97, 0.0405344)',
	'--bs-datepicker-active-day': '0 0.125rem 0.125rem rgba(58, 58, 87, 0.0596411)',
	'--bs-datepicker-disabled-day': '0 0.125rem 0.125rem rgba(58, 58, 87, 0.0596411)',
}

@gravityforms/theme/custom-properties/theme/colors

module.exports = {
	'--c-white': '#fff',
	'--c-text-default': '#585e6a',
	'--c-label': '#686e77',
	'--c-very-light-grey': '#f2f3f5',
	'--c-medium-grey': '#d0d1d3',
	'--c-sorta-grey': '#607382',
	'--c-dark-blue': '#2f4054',
	'--c-disabled-border': 'rgba(32, 32, 46, 0.079)',
}

@gravityforms/theme/custom-properties/theme/transitions

module.exports = {
	'--tr-hover': 'all 0.15s ease',
	'--tr-hover-slow': 'color 300ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out',
}

@gravityforms/theme/custom-properties/theme/typography

module.exports = {
	'--t-font-family-theme-icons': 'gform-icons-theme',
	'--t-font-weight-normal': '400',
	'--t-font-weight-medium': '500',
	'--t-font-weight-bold': '600',
	'--t-font-size-small': '0.75rem',
	'--t-font-size-base': '0.8125rem',
	'--t-font-size-label': '0.875rem',
	'--t-font-size-large-label': '1.0625rem',
	'--t-line-height-base': '1.188rem',
	'--t-line-height-label': '1.125rem',
}

@gravityforms/theme/mixins/admin/admin-icon

module.exports = {
	adminIcon: function () {
		return {
			'font-family': 'var(--t-font-family-admin-icons) !important',
			'font-style': 'normal',
			'font-variant': 'normal',
			'font-weight': 'normal',
			'line-height': '1',
			'speak': 'none',
			'text-transform': 'none',
		}
	}
}

@gravityforms/theme/mixins/admin/input-focus

module.exports = {
	inputFocus: function () {
		return {
			'border': '1px solid var(--c-primary-light)',
			'box-shadow': 'var(--bs-input-focus)',
			'color': 'var(--c-text)',
		}
	}
}

@gravityforms/theme/mixins/admin/input-hover

module.exports = {
	inputHover: function () {
		return {
			'box-shadow': 'var(--bs-input-hover)',
			'color': 'var(--c-text)',
		}
	}
}

@gravityforms/theme/mixins/admin/section-border

module.exports = {
	sectionBorder: function () {
		return {
			'background': 'var(--c-white)',
			'border': '1px solid #e3e6ef',
			'border-radius': '3px',
			'box-shadow': '0 1px 4px rgba(18, 25, 97, 0.0779552)',
		}
	}
}

@gravityforms/theme/mixins/admin/select

module.exports = {
	select: function () {
		return {
			'background': 'url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%239092B2%22%2F%3E%3C%2Fsvg%3E) no-repeat right 0.6rem top 55%',
			'background-color': 'var(--c-white)',
			'background-size': '1rem 1rem',
			'font-size': '0.8125rem',
			'line-height': '1.6875rem',
			'max-height': '2.25rem',
			'min-height': '2.25rem',
			'padding': '0 2rem 0 0.8125rem',
			'width': '100%',
		}
	}
}

@gravityforms/theme/mixins/theme/list-columns

module.exports = {
	listColumns: function ( mixin, colcount ) {
		return {
			'display': '-ms-grid',
			'display': 'grid',
			'-ms-grid-columns': '(1fr) [ ' + colcount + ' ]',
			'grid-template-columns': 'repeat( ' + colcount + ', 1fr )',
			'grid-template-rows': 'repeat( auto-fill, auto )',
			'grid-column-gap': '2rem',
		}
	}
}

@gravityforms/theme/mixins/theme/list-columns-vertical

module.exports = {
	listColumnsVertical: function ( mixin, colcount ) {
		return {
			'column-count': colcount,
			'grid-column-gap': '2rem',
		}
	}
}

@gravityforms/theme/mixins/theme/theme-icon

module.exports = {
	themeIcon: function () {
		return {
			'font-family': 'var(--t-font-family-theme-icons) !important',
			'font-style': 'normal',
			'font-variant': 'normal',
			'font-weight': 'normal',
			'line-height': '1',
			'speak': 'none',
			'text-transform': 'none',
		}
	}
}

@gravityforms/theme/mixins/common/common-icon

module.exports = {
	commonIcon: function () {
		return {
			'font-family': 'var(--t-font-family-common-icons) !important',
			'font-style': 'normal',
			'font-variant': 'normal',
			'font-weight': 'normal',
			'line-height': '1',
			'speak': 'none',
			'text-transform': 'none',
		}
	}
}