Components: Fix Styling for `TextControl`and `TextAreaControl` in dark themes #69640

im3dabasia · 2025-03-20T07:08:44Z

What?

This PR introduces theming support for the TextControl and TextAreaControl components.

Why?

This enhancement is necessary because the previous fixed styling approach left components visually inaccessible in dark mode environments, creating poor contrast and readability issues that compromised user experience.

How?

The corresponding SCSS files have been updated to use theming.

Testing Instructions

Run storybook locally. (npm run storybook:dev)
Navigate to the TextControl component.
Change the theme and confirm that there are no visibility issues.
Navigate to the TextAreaControl component, and repeat step 3.

Screenshots

TextControl

Light mode

Before	After

Dark mode

Before	After

TextAreaControl

Light mode

Before	After

Dark mode

Before	After

github-actions · 2025-03-20T15:59:40Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

yogeshbhutkar

Thanks for the PR, @im3dabasia! I tested it across all available themes, and everything looks great ✅.

TextControl	TextareaControl

P.S. This PR is a part of the following tracker #69646

im3dabasia · 2025-03-24T05:08:14Z

Hi @Mamaduka and @t-hamano ,

When you have a moment please review my PR.

t-hamano

Thanks for the PR!

I don't think using a transparent background color to be compatible with dark themes is the right approach.

For example, if there is a coloured background behind the control, it's difficult to see the text. I think this isn't what we want:

trunk	This PR

I'm not sure what is the best approach to make components fully compatible dark themes for now, but it would be good to discuss in ~~#69639~~ #69646 before moving this PR forward.

I think the most important thing is to ensure that the control background color and the text have sufficient contrast, no matter what color the control background is.

P.S. This issue should be related to ~~#69639~~: #44116

cc @WordPress/gutenberg-components

im3dabasia · 2025-03-24T11:05:49Z

I think the most important thing is to ensure that the control background color and the text have sufficient contrast, no matter what color the control background is.

P.S. This issue should be related to #69639: #44116

Thanks for the review @t-hamano !

The related issue #69639 is closed and marked as completed. I believe this is the updated issue tracker: #69646

packages/components/src/text-control/style.scss

im3dabasia · 2025-03-25T09:05:24Z

I am attaching the screenshots of the changes below. Please take a look. I look forward to your feedback.

TextControl

TextareaControl

cc: @t-hamano , @ciampo , @yogeshbhutkar

yogeshbhutkar · 2025-03-26T11:12:19Z

packages/components/src/text-control/style.scss

+	&:focus {
+		border-color: $components-color-accent;
+		box-shadow: 0 0 0 0.5px $components-color-accent;
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 5px solid transparent;
+	}


It looks like you're overriding the focus styles applied using the input-style__focus mixin here.

As per @ciampo's review (in my PR), I'm refining the mixin to support custom accents. Once/If this PR gets merged, you can rebase and use input-style__focus with custom accents directly, as recommended here.

SGTM — let's wait for #69638 to land, so that the input-style__focus can be re-used

packages/edit-site/src/components/global-styles/style.scss

yogeshbhutkar · 2025-04-04T04:08:08Z

Hi @im3dabasia, the PR #69638 has just landed. If possible, could you rebase and refactor the changeset as discussed earlier? Thanks!

packages/components/CHANGELOG.md

packages/components/src/text-control/style.scss

t-hamano · 2025-05-01T08:25:11Z

Thanks for the update!

From what I've tested, this PR works fine. Are the visual changes as shown below?

TextControl

Before	After

Theme-based text and background colors
Fixed focus outline color in dark themes
Fixed focus outline color in classic (accent) theme

TextareaControl

Before	After

Theme-based text and background colors
Fixed invisible placeholder text in dark themes

t-hamano · 2025-05-01T08:28:39Z

If you rebase this PR, the CI failure will be fixed. See #70034.

t-hamano

LGTM!

packages/components/CHANGELOG.md

…k themes (WordPress#69640) Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

im3dabasia force-pushed the fix/darkmode-text-controls branch from eacf2d2 to f470385 Compare March 20, 2025 15:20

im3dabasia marked this pull request as ready for review March 20, 2025 15:59

im3dabasia requested a review from ajitbohra as a code owner March 20, 2025 15:59

yogeshbhutkar mentioned this pull request Mar 21, 2025

UI Components: Add theming support for all the components #69646

Open

4 tasks

yogeshbhutkar approved these changes Mar 21, 2025

View reviewed changes

t-hamano added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Package] Components /packages/components labels Mar 24, 2025

t-hamano reviewed Mar 24, 2025

View reviewed changes

ciampo reviewed Mar 24, 2025

View reviewed changes

packages/components/src/text-control/style.scss Outdated Show resolved Hide resolved

im3dabasia force-pushed the fix/darkmode-text-controls branch from c8fc768 to 35dcf7f Compare March 25, 2025 09:05

im3dabasia requested review from ciampo, t-hamano and yogeshbhutkar March 25, 2025 10:52

im3dabasia force-pushed the fix/darkmode-text-controls branch from 35dcf7f to 989a0d0 Compare March 25, 2025 10:56

yogeshbhutkar reviewed Mar 26, 2025

View reviewed changes

ciampo reviewed Mar 28, 2025

View reviewed changes

packages/edit-site/src/components/global-styles/style.scss Outdated Show resolved Hide resolved

im3dabasia force-pushed the fix/darkmode-text-controls branch from 989a0d0 to 95dd4bc Compare April 4, 2025 05:41

ciampo reviewed Apr 4, 2025

View reviewed changes

packages/components/CHANGELOG.md Outdated Show resolved Hide resolved

ciampo reviewed Apr 4, 2025

View reviewed changes

packages/components/src/text-control/style.scss Outdated Show resolved Hide resolved

ciampo reviewed Apr 4, 2025

View reviewed changes

packages/components/src/text-control/style.scss Outdated Show resolved Hide resolved

im3dabasia force-pushed the fix/darkmode-text-controls branch from 02a9bba to 14c091a Compare April 30, 2025 11:13

im3dabasia requested a review from ciampo April 30, 2025 11:15

im3dabasia force-pushed the fix/darkmode-text-controls branch from 14c091a to 93ae414 Compare May 2, 2025 10:59

t-hamano approved these changes May 3, 2025

View reviewed changes

packages/components/CHANGELOG.md Outdated Show resolved Hide resolved

im3dabasia added 15 commits May 5, 2025 16:59

fix: Background color for text-control

f9e47b1

style: Add color settings for text/textarea control component

a5a5f32

style: Fix focus styles in textarea

55211ad

style: Adjust box shadow CSS

1f3e511

docs: Update changelog

b5a5caa

fix: Bg styling in text* components

e63334c

chore: Use input focus styles

c4dbd82

revert: Extra css override

d4ad5fd

revert: Extra css line

1e215d2

docs: Add changelog entry

8e8d9c0

chore: remove duplicate logs

2f38e59

fix: Use mixins for input-control

e0e3e9b

chore: remove log

fbdc62e

chore: Add changelog entry

865f7ba

chore: minor doc update

d774b13

im3dabasia force-pushed the fix/darkmode-text-controls branch from 93ae414 to d774b13 Compare May 5, 2025 11:30

im3dabasia requested a review from t-hamano May 5, 2025 11:31

Mamaduka merged commit 1f9744c into WordPress:trunk May 5, 2025
61 checks passed

github-actions bot added this to the Gutenberg 20.9 milestone May 5, 2025

Components: Fix Styling for TextControland TextAreaControl in dark themes #69640

Components: Fix Styling for TextControland TextAreaControl in dark themes #69640

Uh oh!

Conversation

im3dabasia commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Screenshots

TextControl

Light mode

Dark mode

TextAreaControl

Light mode

Dark mode

Uh oh!

github-actions bot commented Mar 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yogeshbhutkar left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

im3dabasia commented Mar 24, 2025

Uh oh!

t-hamano left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

im3dabasia commented Mar 24, 2025

Uh oh!

Uh oh!

im3dabasia commented Mar 25, 2025

TextControl

TextareaControl

Uh oh!

yogeshbhutkar Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ciampo Mar 28, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

yogeshbhutkar commented Apr 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

t-hamano commented May 1, 2025

TextControl

TextareaControl

Uh oh!

t-hamano commented May 1, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Components: Fix Styling for `TextControl`and `TextAreaControl` in dark themes #69640

Components: Fix Styling for `TextControl`and `TextAreaControl` in dark themes #69640

im3dabasia commented Mar 20, 2025 •

edited

Loading

github-actions bot commented Mar 20, 2025 •

edited

Loading

yogeshbhutkar left a comment •

edited

Loading

t-hamano left a comment •

edited

Loading

yogeshbhutkar Mar 26, 2025 •

edited

Loading