@gravityforms/design-tokens/gravityforms/mixins/theme/framework/control.js

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

module.exports = {
	themeFrameworkControlHover() {
		return {
			'--gf-local-bg-color': 'var(--gf-ctrl-bg-color-hover)',
			'--gf-local-border-color': 'var(--gf-ctrl-border-color-hover)',
			'--gf-local-color': 'var(--gf-ctrl-color-hover)',
		};
	},
	// NOTE: we need to keep --gf-local-shadow for backward
	// compatibility for add-ons for a while
	themeFrameworkControlFocus() {
		return {
			'--gf-local-bg-color': 'var(--gf-ctrl-bg-color-focus)',
			'--gf-local-border-color': 'var(--gf-ctrl-border-color-focus)',
			'--gf-local-color': 'var(--gf-ctrl-color-focus)',
			'--gf-local-outline-color': 'var(--gf-ctrl-outline-color-focus)',
			'--gf-local-outline-width': 'var(--gf-ctrl-outline-width-focus)',
			'--gf-local-shadow': 'var(--gf-ctrl-shadow-focus)',
		};
	},
	themeFrameworkControlDisabled() {
		return {
			'--gf-local-bg-color': 'var(--gf-ctrl-bg-color-disabled)',
			'--gf-local-border-color': 'var(--gf-ctrl-border-color-disabled)',
			'--gf-local-color': 'var(--gf-ctrl-color-disabled)',
		};
	},
	themeFrameworkControlError() {
		return {
			'--gf-local-bg-color': 'var(--gf-ctrl-bg-color-error)',
			'--gf-local-border-color': 'var(--gf-ctrl-border-color-error)',
			'--gf-local-color': 'var(--gf-ctrl-color-error)',
		};
	},
	themeFrameworkControlPlaceholder() {
		return {
			color: 'var(--gf-ctrl-placeholder-color)',
			'font-family': 'var(--gf-ctrl-placeholder-font-family)',
			'font-size': 'var(--gf-ctrl-placeholder-font-size)',
			'font-style': 'var(--gf-ctrl-placeholder-font-style)',
			'font-weight': 'var(--gf-ctrl-placeholder-font-weight)',
			'letter-spacing': 'var(--gf-ctrl-placeholder-letter-spacing)',
			opacity: 'var(--gf-ctrl-placeholder-opacity)',
		};
	},
};