Oleg Isonen f76dadcef9 fix: Restore command, form, and split-button states (#6313)
Closes #6312

## Summary

- Restore the Commands & search header to the command panel surface so
its embedded input no longer appears darker or exposes rounded
bottom-corner cutouts.
- Restore unchecked checkboxes to the borderless resting treatment used
by inputs and textareas.
- Restore unchecked switches to the neutral control surface used before
the redesign.
- Restore the header split button's open background on the dropdown
segment.
- Keep checkbox hover and keyboard-focus boundaries visible.

## Technical choices

- Override the generic `InputField` background only in the command
component; ordinary inputs continue using the secondary control surface.
- Use a transparent resting checkbox border to preserve dimensions, then
apply the existing default border on hover and focus border on keyboard
focus.
- Share the existing neutral button surface recipe with the unchecked
Switch track, preserving the historical relationship without adding a
new semantic theme variable.
- Match the split-menu trigger's semantic `aria-expanded` state because
the nested tooltip owns and overwrites `data-state`.
- Remove the obsolete forced 3:1 resting-boundary recipe.

## Todo

- [x] Audit text inputs, textareas, search, selects, comboboxes,
checkbox, radio, switch, toggle, and nested control surfaces.
- [x] Restore the command header's panel-background override.
- [x] Remove the checkbox's high-contrast resting border.
- [x] Restore the unchecked Switch's neutral track surface.
- [x] Preserve checkbox hover and focus feedback.
- [x] Restore the split-button dropdown segment's open background.
- [x] Add light- and dark-mode regression coverage and confirm the tests
fail before each fix and pass after it.
- [x] Visually verify affected controls and the open split button in
Storybook in light and dark modes.
- [x] Review documentation impact; no user-facing documentation update
is required for restoring the previous visual treatment.
- [x] Review fixture impact; no fixture inputs or generated outputs are
affected.

## Verification

- `pnpm --filter @webstudio-is/design-system test` — 19 files and 228
tests passed.
- `pnpm --filter @webstudio-is/design-system typecheck`
- Targeted Oxlint, formatting, and `git diff --check`
- Storybook audit and visual review in light and dark modes
2026-09-02 13:33:31 +02:00
2026-07-12 11:27:58 +02:00
2026-02-05 10:25:17 +01:00
2026-03-20 21:09:47 +01:00
2023-09-06 21:43:29 +03:00

builder-screenshot

Webstudio is an Open Source Visual Development Platform for developers, designers, and cross-functional teams. You own the data, components, and infrastructure. You can use the hosted version or roll out your own.


Learning Resources

Social Media

License

  • Webstudio core (all functionality in this repository) is free/open-source under AGPL-3.0-or-later.
  • sdk-components-animation package (optional) is proprietary. You must accept the Webstudio, Inc. EULA located in sdk-components-animation/LICENSE before using it.
Languages
TypeScript 98.9%
PLpgSQL 0.5%
CSS 0.3%
Shell 0.2%
JavaScript 0.1%