Skip to content

Fix illegible text fields inside wpd-modal dialogs - #374

Merged
epeicher merged 1 commit into
trunkfrom
deskmod-50-drag-to-upload-to-media-library-css-is-broken
Jul 20, 2026
Merged

Fix illegible text fields inside wpd-modal dialogs#374
epeicher merged 1 commit into
trunkfrom
deskmod-50-drag-to-upload-to-media-library-css-is-broken

Conversation

@epeicher

@epeicher epeicher commented Jul 20, 2026

Copy link
Copy Markdown
Collaborator

What it does

Makes text fields inside <wpd-modal> dialogs legible again. The "Upload to Media Library" drag-and-drop dialog rendered its pre-filled Title / Filename / Alt text values as near-white text on white inputs.

Before After
CleanShot 2026-07-20 at 10 56 49@2x CleanShot 2026-07-20 at 10 55 42@2x

Rationale

<wpd-modal>'s dialog surface is dark and re-points the shared kit tokens (--desktop-mode-text, --desktop-mode-border, the muted colors) so slotted wpd-* controls resolve dark-surface colors, but it never re-pointed --desktop-mode-window-bg. That token is the input background for <wpd-text-field> / <wpd-textarea>, so it kept its :root value of #fff (windows are light) while the text inside resolved to the modal's light #f0f0f1 — invisible values.

Implementation

Added the missing token to the existing dark-token block on the modal :host:

--desktop-mode-window-bg: #2c3338;

Solid rather than translucent on purpose: wpd-menu and wpd-multiselect popovers read the same token and must stay opaque over slotted content. Because the fix is at the modal level, it also repairs every other modal hosting form fields (folder share settings, wallpaper renderConfig dialogs, the games challenge dialog). The share-settings capability control keeps its own instance-level inline overrides, which still win.

The static help summary on WpdModal now lists -window-bg among the re-pointed tokens.

Testing instructions

  1. Drag a file from your OS onto the desktop shell.
  2. In the "Upload to Media Library" dialog, the Title / Filename / Alt text / Caption / Description fields should render dark inputs with legible pre-filled text.
  3. npm run test:js stays green (2051 tests).
Open WordPress Playground Preview

@epeicher
epeicher merged commit cbb1619 into trunk Jul 20, 2026
5 checks passed
@epeicher
epeicher deleted the deskmod-50-drag-to-upload-to-media-library-css-is-broken branch July 20, 2026 08:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant