Oleg Isonen
f76dadcef9
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
Webstudio design system
This package implements Webstudio's internal design system. It follows the public Craft specification, which defines the universal contract for reusable Webstudio projects and design systems.
Craft and this package have different responsibilities:
- Craft defines the architecture: theme variables, semantic variables, composite Tokens, Local styles, naming, states, accessibility, extensions, and conformance.
- This package implements that architecture for Webstudio: it chooses the color seeds and scheme profiles, derives theme and semantic colors, and consumes those semantics in composite component styles.
The implementation defines each color seed once. A shared light or dark profile
transforms six theme colors into a deliberately small semantic vocabulary. Full
UI documents load @webstudio-is/design-system/global.css once at their root;
components then compose its semantics without injecting global CSS.
Component-owned custom properties stay locally typed instead of entering the
color manifest. These implementation choices are not requirements for other
Craft projects.
The global entry contains only document-wide behavior required by every full design-system UI: font faces, root theme and semantic color variables, base document defaults, and browser-native treatments such as text selection. Component styles remain with their component, while route layout, scroll locking, and feature integrations remain application-owned. The Builder canvas intentionally does not load this entry because it hosts authored user documents.
See Color tokens for the CSS source format, validation, type-only generation workflow, and naming rules.
Tests
Vitest runs pure calculations and server-rendering assertions in Node. Name
tests that require DOM layout, browser APIs, or component interaction
*.browser.test.ts or *.browser.test.tsx; Vitest Browser Mode runs those in
Chromium through Playwright.
pnpm --filter @webstudio-is/design-system test
Do not use jsdom for design-system tests. Keep pure logic in regular test files and use Browser Mode whenever browser behavior is part of the contract.