Oleg Isonen
3f18f44456
## Change Settings collapsibles now use `fullWidth` so right-side Builder Style and Settings panel content owns its inline padding. Existing visual insets are preserved, and Action explicitly owns its zero inset so its header and action rows can span the section width. - Forward `fullWidth` through `CollapsibleSectionWithAddButton`. - Remove the `fullWidth` prop and padding wrapper from `StyleSection`; all ten StyleSection callers own their content insets locally, including Size's zero inset and full-width separator. - Move Properties & attributes, diagnostics, individual Style panel section insets into their own content. - Keep normal property controls inset and let Action control its own header, rows, error, and redirect spacing. - Retain the earlier Form Action add-trigger and resource-row changes. Action content starts below its full section header with a small gap. ## Implementation - [x] Prevent overlap between the Action section header and its items: start content below the full header with the existing 2px gap, preserving row size and inset. - [x] Review padding-only wrappers from the right-side Settings and Style panel refactors. Apply padding directly to an existing Flex container where possible and remove redundant Box wrappers. - [x] Replace the Action dropdown hardcoded 180px minimum width with the closest existing spacing token, `theme.spacing[26]` (176px; 4px narrower). - [x] Review documentation impact for the dropdown token change: reviewed the Form action documentation; no update required. - [x] Remove the `fullWidth` prop from `StyleSection`. Each individual Style panel section content container explicitly owns its inline padding: ordinary sections retain 12px and Size retains zero inset, with existing gaps preserved. - [x] Give CollapsibleSection content zero inline padding using the existing `fullWidth` API for right-side Builder Style and Settings panel sections. Each section explicitly owns its inline padding, preserving current visual insets and allowing sections such as Action to control alignment. ## Verification - Action spacing: 13 focused Chromium browser tests, focused oxlint, formatting, and `git diff --check` passed. Geometry asserts a 36px header, 2px gap before the first item, button clearance, and unchanged 24px row height. - Restored Page Settings to its original padding ownership; all 7 focused Page Settings Chromium tests, focused oxlint, and `git diff --check` passed. - Padding-wrapper follow-up: removed redundant Box wrappers around the Navigation mode Flex and baseline Action header fixture; audited right-side Settings and Style panel padding owners. 10 focused Action Chromium tests, focused oxlint, and `git diff --check` passed. - Dropdown token follow-up: 13 focused Action Chromium tests, focused oxlint, and `git diff --check` passed. The browser assertion verifies the 176px computed minimum width. - 428 Style panel Chromium browser tests passed after moving padding into individual sections. - 43 focused Chromium browser tests passed: Action, PropsSection, page settings, search, diagnostics, and request inspector. - Builder TypeScript check, focused oxlint, and `git diff --check` passed. - Assert the Properties collapsible has zero inline padding while its child owns its 12px inset; existing Action geometry checks pass.
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.