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 14.15.0 or later, and npm 6.14.8 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

  js 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

  js 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

  js 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

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

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

  js 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

  js 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

  js 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

  js 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

  js 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

  js 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

  js 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

  js 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

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

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

  js 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

  js 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

  js 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

  js 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',
        }
    }
}