From 14564f661aed2aa59b49c3f8652caff98692f09d Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 6 Jan 2025 16:23:14 -0800 Subject: [PATCH 01/11] Fix: #39675 --- .../components/jetpack-field-checkbox.js | 5 +++ .../components/jetpack-field-controls.js | 7 ++++ .../forms/src/blocks/contact-form/editor.scss | 39 +++++++++++++++++++ .../forms/src/contact-form/css/grunion.css | 1 + 4 files changed, 52 insertions(+) diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js index 54608cb294afb..2e252081d1726 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js @@ -98,6 +98,11 @@ function JetpackFieldCheckbox( props ) { onChange: value => setAttributes( { labelColor: value } ), label: __( 'Label Text', 'jetpack-forms' ), }, + { + value: attributes.borderColor, + onChange: value => setAttributes( { borderColor: value } ), + label: __( 'Border', 'jetpack-forms' ), + }, ] } /> setAttributes( { borderColor: value } ), + label: __( 'Border', 'jetpack-forms' ), + } ); + } if ( isChoicesBlock && blockStyle === 'button' ) { colorSettings.push( { value: attributes.buttonBackgroundColor, diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 753ddabb7dd42..6e6d3d33ffece 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -335,6 +335,44 @@ opacity: 1; } + &.jetpack-field-checkbox .jetpack-field-checkbox__checkbox { + align-items: center; + all: initial; + appearance: none; + color: var(--jetpack--contact-form--border-color); + + border: none; + font-size: var(--jetpack--contact-form--font-size); + font-family: var(--jetpack--contact-form--font-family); + height: var(--jetpack--contact-form--font-size); + justify-content: center; + margin: 0 10px 0 0; + outline: none; + position: relative; + width: var(--jetpack--contact-form--font-size); + pointer-events: none; + display: flex; + + &::before { + all: initial; + color: inherit; + font-size: inherit; + font-family: inherit; + align-items: center; + border-color: currentColor; + border-radius: min(var(--jetpack--contact-form--button-outline--border-radius, 0px), 4px); + border-style: solid; + border-width: 1px; + box-sizing: border-box; + content: ' '; + + font-weight: bold; + height: var(--jetpack--contact-form--font-size); + justify-content: center; + width: var(--jetpack--contact-form--font-size); + } + } + .jetpack-option__type.jetpack-option__type { align-items: center; all: initial; @@ -461,6 +499,7 @@ align-items: baseline; /* Align input with first label line */ .jetpack-option__type:before { + color: var(--jetpack--contact-form--border-color); display: block; /* display: flex causes baselines to not align */ } } diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index db3af87444d3e..822725d4b5759 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -584,6 +584,7 @@ on production builds, the attributes are being reordered, causing side-effects border: solid 1px currentColor; outline-offset: 4px; + color: var( --jetpack--contact-form--border-color ); } .contact-form .grunion-field-wrap input.radio { From 1596fc303f40edf7ff0d7da8296c1990cabe283e Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Mon, 6 Jan 2025 16:25:10 -0800 Subject: [PATCH 02/11] changelog --- projects/packages/forms/changelog/add-border-styling-radio | 4 ++++ projects/plugins/jetpack/changelog/add-border-styling-radio | 4 ++++ 2 files changed, 8 insertions(+) create mode 100644 projects/packages/forms/changelog/add-border-styling-radio create mode 100644 projects/plugins/jetpack/changelog/add-border-styling-radio diff --git a/projects/packages/forms/changelog/add-border-styling-radio b/projects/packages/forms/changelog/add-border-styling-radio new file mode 100644 index 0000000000000..e83b870deba5b --- /dev/null +++ b/projects/packages/forms/changelog/add-border-styling-radio @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fixes the styling options for multi select options diff --git a/projects/plugins/jetpack/changelog/add-border-styling-radio b/projects/plugins/jetpack/changelog/add-border-styling-radio new file mode 100644 index 0000000000000..5090c4b1d9137 --- /dev/null +++ b/projects/plugins/jetpack/changelog/add-border-styling-radio @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +Form: fixes the colour styling options of multiselect inputs From 7b1cf3fc0b93d72087810a8383a769376ca0f508 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Tue, 7 Jan 2025 09:34:26 -0800 Subject: [PATCH 03/11] fix the editor color for single checkbox --- projects/packages/forms/src/blocks/contact-form/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 6e6d3d33ffece..34a2d7965ef65 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -497,6 +497,7 @@ .wp-block-jetpack-field-option-radio { display: flex; align-items: baseline; /* Align input with first label line */ + color: var(--jetpack--contact-form--text-color); .jetpack-option__type:before { color: var(--jetpack--contact-form--border-color); From 9b2cac96dce834173907a679e2760f9e5c5dacec Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Wed, 8 Jan 2025 16:52:19 -0800 Subject: [PATCH 04/11] Fix single checkbox styling --- .../forms/src/contact-form/css/grunion.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 822725d4b5759..870206e60e1c0 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -143,10 +143,12 @@ .contact-form .grunion-checkbox-multiple-options .contact-form-field, .contact-form .grunion-radio-options .contact-form-field { display: flex; - align-items: baseline; - + align-items: center; margin: 0; } +.contact-form .grunion-radio-options .contact-form-field { + align-items: baseline; +} .contact-form label span.required, .grunion-label-required { @@ -570,6 +572,8 @@ on production builds, the attributes are being reordered, causing side-effects padding-top: 8px; } +.contact-form .grunion-field-wrap input.consent, +.contact-form .grunion-field-wrap input.checkbox, .contact-form .grunion-field-wrap input.checkbox-multiple, .contact-form .grunion-field-wrap input.radio { position: relative; @@ -589,10 +593,11 @@ on production builds, the attributes are being reordered, causing side-effects .contact-form .grunion-field-wrap input.radio { border-radius: 50%; - transform: translateY(15%); /* Small offset to compensate the slightly odd perceived alignment that's due to the circular shape */ } +.contact-form .grunion-field-wrap input.consent:checked::before, +.contact-form .grunion-field-wrap input.checkbox:checked::before, .contact-form .grunion-field-wrap input.checkbox-multiple:checked::before { content: "\2713"; @@ -785,10 +790,8 @@ on production builds, the attributes are being reordered, causing side-effects font-style: normal; font-weight: bold; } - -.contact-form__checkbox-wrap { +.contact-form .contact-form__checkbox-wrap { display: inline-flex; - align-items: baseline; } .contact-form :is([type="submit"],button:not([type="reset"])) { @@ -807,7 +810,7 @@ on production builds, the attributes are being reordered, causing side-effects display: block; } -.visually-hidden { +.contact-form .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; From 13ac0432c6004e7028d767c6230cc54adb10670e Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Wed, 8 Jan 2025 17:01:18 -0800 Subject: [PATCH 05/11] Fix some themes that remove the checkbox --- projects/packages/forms/src/contact-form/css/grunion.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 870206e60e1c0..719d403b6b110 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -585,6 +585,7 @@ on production builds, the attributes are being reordered, causing side-effects padding: 0; appearance: none; + opacity: 100; border: solid 1px currentColor; outline-offset: 4px; @@ -610,7 +611,7 @@ on production builds, the attributes are being reordered, causing side-effects font-size: var(--jetpack--contact-form--font-size); line-height: 1; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } .contact-form .grunion-field-wrap input.radio:checked::before { From 9d6a134d0ee7e25e8411eee592e4636275757f5f Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Thu, 9 Jan 2025 14:40:23 -0800 Subject: [PATCH 06/11] Add blocksyles to the consent checkbox --- .../components/jetpack-field-consent.js | 8 ++ .../forms/src/blocks/contact-form/editor.scss | 81 +++++++------------ .../forms/src/contact-form/css/grunion.css | 8 ++ 3 files changed, 43 insertions(+), 54 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js index 06cadae1c2c12..6d4e2852cfbdd 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-consent.js @@ -6,6 +6,7 @@ import { withSharedFieldAttributes } from '../util/with-shared-field-attributes' import JetpackFieldLabel from './jetpack-field-label'; import JetpackFieldWidth from './jetpack-field-width'; import JetpackManageResponsesSettings from './jetpack-manage-responses-settings'; +import { useJetpackFieldStyles } from './use-jetpack-field-styles'; const JetpackFieldConsent = ( { instanceId, @@ -16,9 +17,11 @@ const JetpackFieldConsent = ( { setAttributes, attributes, } ) => { + const { blockStyle } = useJetpackFieldStyles( attributes ); const blockProps = useBlockProps( { id: `jetpack-field-consent-${ instanceId }`, className: 'jetpack-field jetpack-field-consent', + style: blockStyle, } ); return ( @@ -66,6 +69,11 @@ const JetpackFieldConsent = ( { onChange: value => setAttributes( { labelColor: value } ), label: __( 'Label Text', 'jetpack-forms' ), }, + { + value: attributes.borderColor, + onChange: value => setAttributes( { borderColor: value } ), + label: __( 'Border', 'jetpack-forms' ), + }, ] } /> diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 34a2d7965ef65..eb92085501230 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -328,66 +328,26 @@ margin-bottom: 0; } + &.jetpack-field-consent .jetpack-field-consent__checkbox, &.jetpack-field-checkbox .jetpack-field-checkbox__checkbox, - &.jetpack-field-consent .jetpack-field-consent__checkbox { - margin: 0 0.75rem 0 0; - border-color: currentColor; - opacity: 1; - } - - &.jetpack-field-checkbox .jetpack-field-checkbox__checkbox { - align-items: center; - all: initial; - appearance: none; - color: var(--jetpack--contact-form--border-color); - - border: none; - font-size: var(--jetpack--contact-form--font-size); - font-family: var(--jetpack--contact-form--font-family); - height: var(--jetpack--contact-form--font-size); - justify-content: center; - margin: 0 10px 0 0; - outline: none; - position: relative; - width: var(--jetpack--contact-form--font-size); - pointer-events: none; - display: flex; - - &::before { - all: initial; - color: inherit; - font-size: inherit; - font-family: inherit; - align-items: center; - border-color: currentColor; - border-radius: min(var(--jetpack--contact-form--button-outline--border-radius, 0px), 4px); - border-style: solid; - border-width: 1px; - box-sizing: border-box; - content: ' '; - - font-weight: bold; - height: var(--jetpack--contact-form--font-size); - justify-content: center; - width: var(--jetpack--contact-form--font-size); - } - } - .jetpack-option__type.jetpack-option__type { align-items: center; all: initial; appearance: none; - color: var(--jetpack--contact-form--text-color); + color: var(--jetpack--contact-form--border-color); display: flex; border: none; font-size: var(--jetpack--contact-form--font-size, 16px ); font-family: var(--jetpack--contact-form--font-family); height: var(--jetpack--contact-form--font-size, 16px ); + opacity: 1; justify-content: center; margin: 0 10px 0 0; outline: none; position: relative; width: var(--jetpack--contact-form--font-size, 16px); + min-width: var(--jetpack--contact-form--font-size, 16px); + flex-shrink: inherit; pointer-events: none; &::after, &::before { @@ -399,7 +359,7 @@ &::before { align-items: center; - border-color: currentColor; + border-color: var(--jetpack--contact-form--border-color); border-radius: min(var(--jetpack--contact-form--button-outline--border-radius, 0px), 4px); border-style: solid; border-width: 1px; @@ -407,9 +367,11 @@ content: ' '; display: flex; font-weight: bold; - height: var(--jetpack--contact-form--font-size, 16px); justify-content: center; + height: var(--jetpack--contact-form--font-size, 16px); width: var(--jetpack--contact-form--font-size, 16px); + min-width: var(--jetpack--contact-form--font-size, 16px); + background:var( --jetpack--contact-form--input-background ); } &[type="radio"]::before { @@ -417,6 +379,23 @@ } } + &.jetpack-field-checkbox .jetpack-field-checkbox__checkbox:checked::before { + position: absolute; + content: "\2713"; + + top: calc(var(--jetpack--contact-form--font-size) / 2); + left: calc(var(--jetpack--contact-form--font-size) / 2); + + display: flex; + + font-size: var(--jetpack--contact-form--font-size); + line-height: 1; + + transform: translate(-50%, -50%); + color: var(--jetpack--contact-form--text-color); + opacity: 1; + } + &.jetpack-field-multiple { &.is-style-button { @@ -477,10 +456,6 @@ } } - .jetpack-field-consent__checkbox + .jetpack-field-label { - line-height: normal; - } - .jetpack-field-option { display: flex; align-items: center; @@ -597,15 +572,13 @@ } .jetpack-field-checkbox { - align-items: baseline; .jetpack-field-label { - display: block; + line-height: 1; } } .jetpack-field-consent { - align-items: center; .jetpack-field-label { flex-grow: 1; diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 719d403b6b110..8ab60a4468a1c 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -96,6 +96,8 @@ .contact-form label.checkbox { font-weight: normal; + margin-bottom: 0; + line-height: 1; } .contact-form label.checkbox-multiple, @@ -580,6 +582,7 @@ on production builds, the attributes are being reordered, causing side-effects box-sizing: border-box; width: var(--jetpack--contact-form--font-size); + min-width: var(--jetpack--contact-form--font-size); height: var(--jetpack--contact-form--font-size); margin-inline-end: calc(var(--jetpack--contact-form--font-size) / 2); padding: 0; @@ -590,6 +593,9 @@ on production builds, the attributes are being reordered, causing side-effects outline-offset: 4px; color: var( --jetpack--contact-form--border-color ); + background-color: var(--jetpack--contact-form--input-background); + font-family: var( --jetpack--contact-form--font-family ); + flex-basis: content; } .contact-form .grunion-field-wrap input.radio { @@ -612,6 +618,7 @@ on production builds, the attributes are being reordered, causing side-effects line-height: 1; transform: translate(-50%, -50%); + color: var(--jetpack--contact-form--text-color); } .contact-form .grunion-field-wrap input.radio:checked::before { @@ -624,6 +631,7 @@ on production builds, the attributes are being reordered, causing side-effects position: absolute; transform: translate(-50%, -50%); width: calc(var(--jetpack--contact-form--font-size) / 2); + color: var(--jetpack--contact-form--text-color); } .contact-form .grunion-field-wrap.grunion-field-checkbox-multiple-wrap.is-style-button-wrap .contact-form-field, From 9f49b5be6a3c1711260263e97892f5a9b4f6cbd1 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Thu, 9 Jan 2025 16:14:41 -0800 Subject: [PATCH 07/11] style hardening makes sure that the radio and checkboxes look more like expected across themes --- projects/packages/forms/src/contact-form/css/grunion.css | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index 8ab60a4468a1c..cd2efbfccdca3 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -596,6 +596,7 @@ on production builds, the attributes are being reordered, causing side-effects background-color: var(--jetpack--contact-form--input-background); font-family: var( --jetpack--contact-form--font-family ); flex-basis: content; + text-align: left; } .contact-form .grunion-field-wrap input.radio { From 2f3450b5ce759ad2ab4868d2a92e8f65f5a10601 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Fri, 17 Jan 2025 13:53:36 -0800 Subject: [PATCH 08/11] fix opacity --- projects/packages/forms/src/contact-form/css/grunion.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css index cd2efbfccdca3..540133e8412f5 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.css +++ b/projects/packages/forms/src/contact-form/css/grunion.css @@ -588,7 +588,7 @@ on production builds, the attributes are being reordered, causing side-effects padding: 0; appearance: none; - opacity: 100; + opacity: 1; border: solid 1px currentColor; outline-offset: 4px; From 7555606264e1fa53f964571e4342105632234fe4 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Fri, 17 Jan 2025 16:07:52 -0800 Subject: [PATCH 09/11] Fix up the button styles colour when you have radio buttons --- .../components/jetpack-field-controls.js | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js index 481761a36e343..aa28c7d3bcdc2 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js @@ -35,8 +35,14 @@ const JetpackFieldControls = ( { extraFieldSettings = [], } ) => { const formStyle = useFormStyle( clientId ); - const blockStyle = getBlockStyle( blockClassNames ); + + const blockStyle = + getBlockStyle( blockClassNames ) !== '' + ? getBlockStyle( blockClassNames ) + : attributes?.className && getBlockStyle( attributes.className ); + const isChoicesBlock = [ 'radio', 'checkbox' ].includes( type ); + const isRadioButton = type === 'radio' && blockStyle === 'button'; const setNumberAttribute = ( key, parse = parseInt ) => @@ -78,14 +84,7 @@ const JetpackFieldControls = ( { }, ]; - if ( isChoicesBlock ) { - colorSettings.push( { - value: attributes.borderColor, - onChange: value => setAttributes( { borderColor: value } ), - label: __( 'Border', 'jetpack-forms' ), - } ); - } - if ( isChoicesBlock && blockStyle === 'button' ) { + if ( blockStyle === 'button' ) { colorSettings.push( { value: attributes.buttonBackgroundColor, onChange: value => setAttributes( { buttonBackgroundColor: value } ), @@ -93,13 +92,15 @@ const JetpackFieldControls = ( { } ); } - if ( ! isChoicesBlock || formStyle === FORM_STYLE.OUTLINED ) { + if ( formStyle === FORM_STYLE.OUTLINED ) { colorSettings.push( { value: attributes.fieldBackgroundColor, onChange: value => setAttributes( { fieldBackgroundColor: value } ), label: backgroundColorLabel, } ); + } + if ( ! isRadioButton ) { colorSettings.push( { value: attributes.borderColor, onChange: value => setAttributes( { borderColor: value } ), From 5394f1ca8c5017a958832c8a51cd8cafb3d5e257 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Fri, 17 Jan 2025 16:26:18 -0800 Subject: [PATCH 10/11] Improve alignment. --- projects/packages/forms/src/blocks/contact-form/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index eb92085501230..09b83dbbb3e9e 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -87,6 +87,7 @@ &[data-type='jetpack/field-checkbox'], &[data-type='jetpack/field-consent'] { align-self: center; + align-items: center; } } } From 25fba72d893588d1b179569c775d2c53f10d9d69 Mon Sep 17 00:00:00 2001 From: Enej Bajgoric Date: Tue, 21 Jan 2025 12:43:12 -0800 Subject: [PATCH 11/11] Fix form color overwrite --- .../components/jetpack-field-choice/edit.js | 1 + .../forms/src/blocks/contact-form/editor.scss | 15 +++++++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/edit.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/edit.js index b9d0e2d25acda..2a5ea7c269191 100644 --- a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/edit.js +++ b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-choice/edit.js @@ -23,6 +23,7 @@ const JetpackFieldChoiceEdit = props => { const classes = clsx( className, 'jetpack-field jetpack-field-multiple', { 'is-selected': isSelected, 'has-placeholder': ( options && options.length ) || innerBlocks.length, + 'has-colors': attributes.inputColor || attributes.labelColor, } ); const formStyle = useFormStyle( clientId ); const { blockStyle } = useJetpackFieldStyles( attributes ); diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss index 09b83dbbb3e9e..efbb8a12c356e 100644 --- a/projects/packages/forms/src/blocks/contact-form/editor.scss +++ b/projects/packages/forms/src/blocks/contact-form/editor.scss @@ -473,10 +473,8 @@ .wp-block-jetpack-field-option-radio { display: flex; align-items: baseline; /* Align input with first label line */ - color: var(--jetpack--contact-form--text-color); .jetpack-option__type:before { - color: var(--jetpack--contact-form--border-color); display: block; /* display: flex causes baselines to not align */ } } @@ -489,6 +487,19 @@ } } +.jetpack-field.has-colors { + .jetpack-field-option.field-option-checkbox, + .jetpack-field-option.field-option-radio, + .wp-block-jetpack-field-option-checkbox, + .wp-block-jetpack-field-option-radio { + color: var(--jetpack--contact-form--text-color); + + .jetpack-option__type:before { + color: var(--jetpack--contact-form--border-color); + } + } +} + :where(:not(.contact-form)) > .jetpack-field { .jetpack-field__input, .jetpack-field__textarea { padding-left: max(var(--jetpack--contact-form--input-padding-left, 16px), var(--jetpack--contact-form--border-radius));