Package Exports

@gravityforms/theme

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gravityforms/theme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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`

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