From 4e96c9ea3d9b14ce37156cc71929439118cdf0c7 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Thu, 27 Nov 2025 14:59:41 -0300 Subject: [PATCH 1/5] checkbox background color should not be same as text color anymore --- projects/packages/forms/src/contact-form/css/grunion.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index a51cd8a566fa7..018fcbcbd01c4 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -1041,12 +1041,6 @@ on production builds, the attributes are being reordered, causing side-effects border-radius: 50%; } -.contact-form .is-style-list input.consent:checked, -.contact-form .is-style-list input.checkbox:checked, -.contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple:checked { - background-color: currentColor; - -} .contact-form .is-style-list input.consent::before, .contact-form .is-style-list input.checkbox::before, From 457a536068b73b7d3e117356beb3a69040ec800b Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Thu, 27 Nov 2025 15:09:03 -0300 Subject: [PATCH 2/5] change checkbox ::before border color (the actual checkmark) to be same as text, since background is set to be that of input backgrounds it should always hold a good contrast (merely mocking text input background/font color relation) --- projects/packages/forms/src/contact-form/css/grunion.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index 018fcbcbd01c4..61933e8aada7a 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -1057,7 +1057,10 @@ 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)); + // if checkboxes bg are --jetpack--contact-form--input-background, + // then border-color should text color + border-color: var(--jetpack--contact-form--text-color, fieldText); + border-style: solid; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(40deg); top: 0; From 556ee4e48a02003a93eea3229225c3aa6759eec1 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Thu, 27 Nov 2025 15:10:04 -0300 Subject: [PATCH 3/5] fix checkmark on some themes that use ::after instead of ::before --- projects/packages/forms/src/contact-form/css/grunion.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index 61933e8aada7a..16ecd4c556fc4 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -1067,6 +1067,12 @@ on production builds, the attributes are being reordered, causing side-effects left: 0; } +.contact-form .is-style-list input.consent:checked::after { + // consent checkboxes are sometimes scaled. + // Keep it centered and with same angle. + transform: rotate(30deg) scale(0.7) translate(-40%, -15%); +} + .contact-form .is-style-list input.consent:checked::before, .contact-form .is-style-list input.checkbox:checked::before, .contact-form .grunion-field-wrap:not(.is-style-plain) input.checkbox-multiple:checked::before { From 5980e9862e36e1273d12b897a61de1dc0f6f72cb Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Thu, 27 Nov 2025 15:10:41 -0300 Subject: [PATCH 4/5] some whitespace fix and note on the faux inverted var --- projects/packages/forms/src/contact-form/css/grunion.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/packages/forms/src/contact-form/css/grunion.scss b/projects/packages/forms/src/contact-form/css/grunion.scss index 16ecd4c556fc4..e012e96f9af85 100644 --- a/projects/packages/forms/src/contact-form/css/grunion.scss +++ b/projects/packages/forms/src/contact-form/css/grunion.scss @@ -11,6 +11,7 @@ --jetpack--contact-form--input-padding: 16px; --jetpack--contact-form--font-size: 16px; --jetpack--contact-form--error-color: #b32d2e; + // mind that this is not really "inverted", just fixed to white. --jetpack--contact-form--inverted-text-color: #fff; } @@ -731,7 +732,6 @@ that needs to mimic the input element styles */ background-color: var(--jetpack--contact-form--input-background); } - /* For some reason, when keeping the rule below together with the above selector, on production builds, the attributes are being reordered, causing side-effects From 6f82113d8be02409f5bd88957bd94d8cf5bdb157 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Thu, 27 Nov 2025 16:59:27 -0300 Subject: [PATCH 5/5] changelog --- projects/packages/forms/changelog/fix-form-checkboxes-colors | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 projects/packages/forms/changelog/fix-form-checkboxes-colors diff --git a/projects/packages/forms/changelog/fix-form-checkboxes-colors b/projects/packages/forms/changelog/fix-form-checkboxes-colors new file mode 100644 index 0000000000000..1afdd4524c151 --- /dev/null +++ b/projects/packages/forms/changelog/fix-form-checkboxes-colors @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Fix checkbox checkmark border color to use text color for better contrast