Skip to content

Forms: Fix dark theme outline form #45984

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: trunk
Choose a base branch
from
+73 −21
Open

Forms: Fix dark theme outline form #45984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1d65bbe
Calculate the form background color correctly
enejb Nov 18, 2025
b6ddc58
Update css to use the correct form background color as expected.
enejb Nov 18, 2025
f0d1773
Minor fixes to the international form field
enejb Nov 18, 2025
a2ffa35
Fix outline form when border size is set to 0 by default
enejb Nov 18, 2025
388e1c2
Make sure that the input text colour is set to something that is visi…
enejb Nov 18, 2025
ace640a
changelog
enejb Nov 18, 2025
701c4b1
Allow form input to overwrite the input color!
enejb Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/packages/forms/changelog/fix-darktheme-outline-form
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: fixed

Forms: Improve dark theme compatibility and outline form style
2 changes: 1 addition & 1 deletion projects/packages/forms/src/blocks/contact-form/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1073,7 +1073,7 @@
:where(.is-style-outlined .jetpack-contact-form .jetpack-field .notched-label__filler),
:where(.is-style-outlined .jetpack-contact-form .jetpack-field .notched-label__trailing) {
border: var(--jetpack--contact-form--border);
background-color: var(--jetpack--contact-form--input-background);
background-color: var(--jetpack--contact-form--background-color, #fff);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) {
Expand Down
7 changes: 5 additions & 2 deletions projects/packages/forms/src/blocks/contact-form/util/form-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
}

const _document = window[ 'editor-canvas' ] ? window[ 'editor-canvas' ].document : document;
const bodyNode = _document.querySelector( 'body' );

const styleProbe = _document.createElement( 'div' );
styleProbe.className = STYLE_PROBE_CLASS;
Expand All @@ -90,7 +89,7 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
const buttonOutlineNode = styleProbe.querySelector( '.btn-outline' );
const inputNode = styleProbe.querySelector( 'input[type="text"]' );

const backgroundColor = window.jetpackForms.getBackgroundColor( bodyNode );
const backgroundColor = window.jetpackForms.getBackgroundColor( formRootNode );
const inputBackgroundFallback = window.jetpackForms.getBackgroundColor( inputNode );
const inputBackground = window.getComputedStyle( inputNode ).backgroundColor;
const bodyTextColor = window.getComputedStyle( formRootNode ).color;
Expand Down Expand Up @@ -132,6 +131,9 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
backdropFilter: inputBackdropFilter,
} = window.getComputedStyle( inputNode );

const borderWidthOutline =
Copy link
Contributor

@CGastrell CGastrell Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we actually need this var? By its definition and usage (if I'm not mistaken) we could use border-width: max( var( --jetpack--contact-form--border-size, 0 ), '1px' ); instead.

Would be good to test this with strange values though.

( parseFloat( borderWidth ) > 1 ? parseFloat( borderWidth ) : 1 ) + 'px';

styleProbe.remove();

return {
Expand All @@ -143,6 +145,7 @@ window.jetpackForms.generateStyleVariables = function ( formNode ) {
'--jetpack--contact-form--border': border,
'--jetpack--contact-form--border-color': borderColor,
'--jetpack--contact-form--border-size': borderWidth,
'--jetpack--contact-form--border-size-outline': borderWidthOutline,
Copy link
Contributor

@CGastrell CGastrell Nov 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this is meant to be a fallback for Outlined style I'd say let's use the same wording "outlined" (specially since outline is a different CSS property). Easy fix though.

'--jetpack--contact-form--border-style': borderStyle,
'--jetpack--contact-form--border-radius': borderRadius,
'--jetpack--contact-form--input-background': inputBackground,
Expand Down
1 change: 1 addition & 0 deletions projects/packages/forms/src/contact-form/class-contact-form.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -928,6 +928,7 @@ class='{$container_classes_string}'
id='" . $element_id . "'
method='post'
class='" . esc_attr( $form_classes ) . "' $form_aria_label
data-wp-init='callbacks.initializeForm'
data-wp-on--submit=\"actions.onFormSubmit\"
data-wp-on--reset=\"actions.onFormReset\"
data-wp-class--submission-success=\"context.submissionSuccess\"
Expand Down
1 change: 1 addition & 0 deletions projects/packages/forms/src/contact-form/css/combobox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
border: 0 solid #ddd;
border-radius: 4px;
background: transparent;
box-shadow: none;
cursor: pointer;
display: flex;
align-items: center;
Expand Down
40 changes: 23 additions & 17 deletions projects/packages/forms/src/contact-form/css/grunion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -619,6 +619,10 @@ that needs to mimic the input element styles */
flex-direction: row-reverse;
}

.contact-form .is-style-outlined .grunion-field-wrap:not(.grunion-field-checkbox-wrap):not(.grunion-field-consent-wrap):not(.grunion-field-checkbox-multiple-wrap):not(.grunion-field-radio-wrap):not(.grunion-field-select-wrap):not(.grunion-field-file-wrap), {
background-color: var(--jetpack--contact-form--background-color, transparent);
}

.contact-form .is-style-outlined .grunion-field-wrap .grunion-checkbox-multiple-options,
.contact-form .is-style-outlined .grunion-field-wrap .grunion-radio-options {
padding: var(--jetpack--contact-form--input-padding, 16px);
Expand Down Expand Up @@ -668,67 +672,67 @@ that needs to mimic the input element styles */
:where(.wp-block-jetpack-contact-form.is-style-outlined) .notched-label__leading {
border-color: var(--jetpack--contact-form--border-color);
border-style: var(--jetpack--contact-form--border-style);
border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size));
border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size));
border-left-width: var(--jetpack--contact-form--border-left-size, var(--jetpack--contact-form--border-size));
border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size-outline));
border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size-outline));
border-left-width: var(--jetpack--contact-form--border-left-size, var(--jetpack--contact-form--border-size-outline));
border-radius: var(--jetpack--contact-form--border-radius);
width: var(--jetpack--contact-form--notch-width);
max-width: 100px;
border-right: none !important;
border-top-right-radius: unset !important;
border-bottom-right-radius: unset !important;
background-color: var(--jetpack--contact-form--input-background);
background-color: var(--jetpack--contact-form--background-color);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) .notched-label__notch {
border-color: var(--jetpack--contact-form--border-color);
border-style: var(--jetpack--contact-form--border-style);
border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size));
border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size));
border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size-outline));
border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size-outline));
border-radius: unset !important;
padding: 0 4px;
transition: border 150ms linear;
border-left: none !important;
border-right: none !important;
background-color: var(--jetpack--contact-form--input-background);
background-color: var(--jetpack--contact-form--background-color);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) .notched-label__filler {
border-color: var(--jetpack--contact-form--border-color);
border-style: var(--jetpack--contact-form--border-style);
border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size));
border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size));
border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size-outline));
border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size-outline));
flex-grow: 1;
border-left: none !important;
border-right: none !important;
border-radius: unset !important;
background-color: var(--jetpack--contact-form--input-background);
background-color: var(--jetpack--contact-form--background-color);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) .notched-label__trailing {
border-color: var(--jetpack--contact-form--border-color);
border-style: var(--jetpack--contact-form--border-style);
border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size));
border-right-width: var(--jetpack--contact-form--border-right-size, var(--jetpack--contact-form--border-size));
border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size));
border-top-width: var(--jetpack--contact-form--border-top-size, var(--jetpack--contact-form--border-size-outline));
border-right-width: var(--jetpack--contact-form--border-right-size, var(--jetpack--contact-form--border-size-outline));
border-bottom-width: var(--jetpack--contact-form--border-bottom-size, var(--jetpack--contact-form--border-size-outline));
border-radius: var(--jetpack--contact-form--border-radius);
flex-grow: 1;
max-width: 100px;
border-left: none !important;
border-top-left-radius: unset !important;
border-bottom-left-radius: unset !important;
background-color: var(--jetpack--contact-form--input-background);
background-color: var(--jetpack--contact-form--background-color);
}

/* Preserve the background color for the checkbox multiple and radio
* wrap when using the old checkbox multiple and radio blocks. */
.contact-form .is-style-outlined .grunion-field-checkbox-multiple-wrap:not(.wp-block-jetpack-field-checkbox-multiple),
.contact-form .is-style-outlined .grunion-field-radio-wrap:not(.wp-block-jetpack-field-radio) {
background-color: var(--jetpack--contact-form--input-background);
background-color: var(--jetpack--contact-form--background-color);
}

:where(.wp-block-jetpack-contact-form.is-style-outlined) .wp-block-jetpack-options {
background-color: var(--jetpack--contact-form--input-background);
background-color: var(--jetpack--contact-form--background-color);
}


Expand Down Expand Up @@ -756,6 +760,7 @@ on production builds, the attributes are being reordered, causing side-effects
pointer-events: none;
transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
margin: 0;
background-color: transparent;
}

.contact-form .is-style-outlined .grunion-field-wrap .notched-label .grunion-label-text {
Expand Down Expand Up @@ -848,6 +853,7 @@ on production builds, the attributes are being reordered, causing side-effects
.contact-form .is-style-outlined .grunion-field-wrap select:not(.jetpack-field__input-element) {
background: none !important; /* Need to override styles coming from the style attribute*/
border-color: transparent !important; /* Need to override styles coming from the style attribute*/
color: var(--jetpack--contact-form--body-text-color); /* Need to override styles coming from the style attribute*/
border-radius: unset !important; /* Need to override styles coming from the style attribute*/
outline: none;
padding-left: calc(min(100px, var(--jetpack--contact-form--notch-width)) + 4px);
Expand Down Expand Up @@ -1061,7 +1067,7 @@ on production builds, the attributes are being reordered, causing side-effects
transition: opacity 0.1s ease-in-out, scale 0.15s ease-in-out;

font-size: inherit;
border: solid var(--jetpack--contact-form--inverted-text-color, var(--jetpack--contact-form--input-background));
border: solid var(--jetpack--contact-form--background-color);
border-width: 0 2px 2px 0;
transform: translate(-50%, -60%) rotate(40deg);
top: 0;
Expand Down
9 changes: 8 additions & 1 deletion projects/packages/forms/src/contact-form/css/phone-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,10 @@
.is-style-outlined & {

.jetpack-field__input-phone-wrapper {
z-index: unset;
border-color: transparent !important;
background-color: transparent !important;
border-radius: unset;
z-index: 3;

&:has(.jetpack-field__input-element:focus) {
outline: unset;
Expand All @@ -133,6 +135,7 @@
// while no input element is selected, force transparent so label is visible
.jetpack-field__input-element {
background-color: transparent !important;
box-shadow: none !important;
}

.jetpack-field__input-prefix:not(:has(~ .has-placeholder),:has(~ .has-value)) {
Expand All @@ -155,6 +158,10 @@
font-size: 0.8em;
}
}

&:has(~.jetpack-field__input-phone-wrapper.is-combobox-open) .notched-label__label {
background-color: var(--jetpack--contact-form--background-color);
}
}

.notched-label:has(~* .jetpack-field__input-element:focus) .notched-label__notch,
Expand Down
26 changes: 26 additions & 0 deletions projects/packages/forms/src/modules/form/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -562,6 +562,32 @@ const { state, actions } = store( NAMESPACE, {
},

callbacks: {
initializeForm() {
const { ref } = getElement();
const innerDiv = ref.querySelector( '.wp-block-jetpack-contact-form' );

if ( innerDiv ) {
let backgroundColorCss = '';
const backgroundColor = window.getComputedStyle( innerDiv ).backgroundColor;
if (
! (
! backgroundColor ||
backgroundColor === 'rgba(0, 0, 0, 0)' ||
backgroundColor === 'transparent'
)
) {
backgroundColorCss = `--jetpack--contact-form--background-color: ${ backgroundColor }`;
}
const bodyTextColor = window.getComputedStyle( innerDiv ).color;
const style = innerDiv.getAttribute( 'style' ) ?? '';
innerDiv.setAttribute(
'style',
style +
`; ${ backgroundColorCss }; --jetpack--contact-form--body-text-color: ${ bodyTextColor };`
);
}
},

initializeField() {
const context = getContext();
const { fieldId, fieldType, fieldLabel, fieldValue, fieldIsRequired, fieldExtra } = context;
Expand Down
4 changes: 4 additions & 0 deletions projects/plugins/jetpack/changelog/fix-darktheme-outline-form
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: bugfix

Forms: Improve dark theme vomatibility and outline form style
Loading