Security News
Crates.io Users Targeted by Phishing Emails
The Rust Security Response WG is warning of phishing emails from rustfoundation.dev targeting crates.io users.
By Sarah Gooding - Sep 12, 2025
@gravityforms/theme
Advanced tools
@gravityforms/theme
PostCSS variables, media queries and mixins for Gravity Forms development.
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',
}
}
}
FAQs
PostCSS variables, media queries and mixins for Gravity Forms development.
We found that @gravityforms/theme demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 9 open source maintainers collaborating on the project.
Package last updated on 21 Jan 2022
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Product
Introducing Custom Pull Request Alert Comment Headers
Socket now lets you customize pull request alert headers, helping security teams share clear guidance right in PRs to speed reviews and reduce back-and-forth.
By André Staltz - Sep 12, 2025
Product
Rust Support Now in Beta
Socket's Rust support is moving to Beta: all users can scan Cargo projects and generate SBOMs, including Cargo.toml-only crates, with Rust-aware supply chain checks.
By Mikola Lysenko, Trevor Norris - Sep 11, 2025