Gravity Forms Theme
PostCSS variables, media queries and mixins for Gravity Forms development.
Installation
Install the module
npm install @gravityforms/theme --saveNote: 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',
}
}
}