fix: background color in dark mode on password-field (#1175)

[Fabian Hüske (fabianhueske)]

What?

Fixes the mt-password-field showing the parent surface behind the password visibility-toggle button in dark mode. The field now renders a consistent --color-background-primary-default surface across both the input and the toggle button.

Closes #1175

Why?

In dark mode the toggle button's box was transparent, so the darker parent surface bled through next to the input, breaking the visual continuity of the field. The field surface is painted only by the <input> (background: var(--color-background-primary-default)), while .mt-block-field__block has no background of its own and the toggle button only sets a background on hover/focus. The mismatch is invisible in light mode (everything is near-white) but obvious in dark mode, where --color-background-primary-default (#1e1e24) differs from the surrounding parent surfaces (for example #101013).

The disabled state was already patched at the block level in this component, but the default state was missed.

How?

Scoped to the password field, the field block now gets --color-background-primary-default as its default background (mirroring the existing disabled override), so the transparent toggle-button area inherits the field surface instead of the parent. An explicit --color-background-critical-default override is added for the error state so the cascade cannot regress it.

.mt-password-field :deep(.mt-block-field__block) {
  background-color: var(--color-background-primary-default);

  &:has(input:disabled) {
    background-color: var(--color-background-tertiary-default);
  }
}

.mt-password-field.has--error :deep(.mt-block-field__block) {
  background-color: var(--color-background-critical-default);
}

A patch changeset is included for @shopware-ag/meteor-component-library.

Testing?

• Verify the password field in dark mode: the toggle-button area matches the input surface with no parent background showing through.
• Confirm light mode is unchanged.
• Check the default, disabled, error, and show-password states in both themes.
• Visual snapshot tests may need regeneration if the test runner reports diffs.

Screenshots (optional)

Before / after in dark mode (toggle button area):

Before	After
Parent surface visible behind the toggle button	Consistent field surface

Anything Else?

The underlying cause sits in the shared mt-base-field, where .mt-block-field__block has no background of its own and relies on the <input> to paint the surface. This fix is scoped to the password field to stay low-risk, but a follow-up could give the block a default background in the base component so any field embedding extra controls in the element slot gets consistent theming for free.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
meteor-component-library	Ready	Preview, Comment	Jun 24, 2026 7:59am

[pkg-pr-new]

Open in StackBlitz

@shopware-ag/meteor-admin-sdk

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-admin-sdk@1177

@shopware-ag/meteor-component-library

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-component-library@1177

@shopware-ag/create-meteor-extension

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/create-meteor-extension@1177

@shopware-ag/meteor-icon-kit

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-icon-kit@1177

@shopware-ag/meteor-prettier-config

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-prettier-config@1177

@shopware-ag/stylelint-plugin-meteor

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/stylelint-plugin-meteor@1177

@shopware-ag/meteor-tokens

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-tokens@1177

commit: a3464e1