From 7020c7e122190a2c164910f0847c53749995f369 Mon Sep 17 00:00:00 2001 From: "yx.zhang" Date: Tue, 1 Sep 2026 18:25:20 +0800 Subject: [PATCH 01/37] feat(web): superellipse corners and hairline elevation strokes Apply global visual polish across the web client: corner-shape: superellipse(1.5) with corner-shape: round pairing for full circles, elevation tokens that draw 0.5px stroke outlines inside box-shadow for floating surfaces, 0.5px hairline borders and divider lines for neutral-token strokes, and tuned stroke contrast plus larger radii for menus, settings panels, and cards. Stylesheet-scan specs in ui-theme reject unpaired circles, border+shadow mixes, and 1px neutral hairlines repo-wide. Closes #3287 --- ...-01-web-elevation-stroke-shadows.i18n.yaml | 6 + ...2026-09-01-web-elevation-stroke-shadows.md | 42 +++++++ ...6-09-01-web-elevation-stroke-shadows.zh.md | 42 +++++++ ...eb-superellipse-corner-smoothing.i18n.yaml | 6 + ...09-01-web-superellipse-corner-smoothing.md | 34 ++++++ ...01-web-superellipse-corner-smoothing.zh.md | 34 ++++++ docs/web-styling.i18n.yaml | 4 +- docs/web-styling.md | 3 + docs/web-styling.zh.md | 3 + .../locale/src/client/LanguageRow.module.css | 2 +- .../src/client/AgentPresetSection.module.css | 30 +++-- .../src/client/ApprovalPanel.module.css | 1 + .../src/AttachmentRail.module.css | 9 +- .../src/ImageLightbox.module.css | 3 +- .../ui-attachment/src/MessageImage.module.css | 4 +- .../src/client/chat/ChatView.module.css | 6 +- .../src/client/chat/ContextBody.module.css | 2 +- .../client/chat/GenericCommandCard.module.css | 2 +- .../src/client/chat/TurnNavigator.module.css | 4 +- .../chat/TurnProcessNodeView.module.css | 2 +- .../src/client/chat/TurnUsagePanel.module.css | 9 +- .../client/details/DetailsPanel.module.css | 5 +- .../settings/TranscriptViewRow.module.css | 2 +- .../src/client/PopupSelectView.module.css | 13 +- .../src/client/queue/QueueDock.module.css | 7 +- .../settings/EnterBehaviorRow.module.css | 2 +- .../client/skeleton/ContextMeter.module.css | 9 +- .../skeleton/ConversationRoot.module.css | 4 +- .../src/client/skeleton/HeroShell.module.css | 4 +- .../src/client/skeleton/InputBar.module.css | 16 ++- .../src/client/skeleton/TodoPanel.module.css | 2 +- .../src/client/DirectoryBrowser.module.css | 8 +- .../ui-goal/src/client/GoalBar.module.css | 5 +- .../src/client/MenuView.module.css | 9 +- .../src/client/JobListAction.module.css | 7 +- .../ui-layout/src/client/AppFrame.module.css | 6 +- .../client/MessageFeedbackActions.module.css | 7 +- .../src/client/ModelSelect.module.css | 7 +- .../src/client/PermissionRow.module.css | 2 +- .../src/client/PlanModeControl.module.css | 1 + .../ui-primitives/src/Button.module.css | 2 +- .../client/ui-primitives/src/Input.module.css | 2 +- .../client/ui-primitives/src/Menu.module.css | 13 +- .../client/ui-primitives/src/Modal.module.css | 6 +- .../ui-primitives/src/StateDot.module.css | 2 + .../src/TerminalBlock.module.css | 2 +- .../src/markdown/JsonBlock.module.css | 2 +- .../src/markdown/MarkdownText.module.css | 6 +- .../client/ScheduleCatalogAction.module.css | 8 +- .../src/client/SettingsRoot.module.css | 9 +- .../src/client/ModelsSection.module.css | 23 ++-- .../PluginInventorySettingsTab.module.css | 20 ++-- .../src/client/PluginCard.module.css | 9 +- .../client/PluginsSettingsSection.module.css | 2 +- .../SubagentModelSelectionCard.module.css | 5 +- .../src/client/fields.module.css | 6 +- .../src/client/SidebarRoot.module.css | 3 +- .../ui-skill/src/client/SkillRow.module.css | 7 +- .../client/SubagentHeaderLineage.module.css | 9 +- .../SubagentReadOnlyComposer.module.css | 2 +- packages/client/ui-theme/README.i18n.yaml | 4 +- packages/client/ui-theme/README.md | 6 +- packages/client/ui-theme/README.zh.md | 6 +- .../src/client/AppearanceRow.module.css | 6 +- .../src/client/FontSizeRow.module.css | 2 +- packages/client/ui-theme/src/client/styles.ts | 2 + .../ui-theme/src/styles/corner-shape.css | 26 ++++ .../src/styles/gradient-shadow-text.css | 14 +++ .../tests/client-styles.client.spec.ts | 1 + .../tests/corner-shape-styles.client.spec.ts | 80 +++++++++++++ .../tests/elevation-styles.client.spec.ts | 112 ++++++++++++++++++ .../tests/scrollbar-styles.client.spec.ts | 86 +------------- .../client/ui-theme/tests/stylesheet-scan.ts | 91 ++++++++++++++ .../src/client/tool/ToolCallTree.module.css | 2 +- .../components/AskQuestionCard.module.css | 2 +- .../client/tool/components/ToolRow.module.css | 9 +- .../tool/toolviews/bash-sample.module.css | 9 +- .../src/client/TrajectoryCell.module.css | 2 +- .../src/client/TrajectoryTable.module.css | 23 ++-- .../src/client/TrajectoryTimeline.module.css | 6 +- .../src/client/TrajectoryToolbar.module.css | 5 +- .../src/client/PlanReviewPanel.module.css | 1 + .../src/client/QuestionComposer.module.css | 10 +- .../src/client/WorkflowRunPanel.module.css | 1 + .../src/client/rows/Rows.module.css | 2 +- .../client/rows/WorkspaceBrowser.module.css | 8 +- packages/client/web/src/boot-page.module.css | 1 + .../src/client/TeamAction.module.css | 11 +- .../src/client/CordisDefineRow.module.css | 7 +- .../src/client/CordisPanel.module.css | 14 ++- .../src/client/CordisRunRow.module.css | 6 +- .../src/client/HeaderAction.module.css | 2 +- 92 files changed, 772 insertions(+), 287 deletions(-) create mode 100644 .agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.i18n.yaml create mode 100644 .agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.md create mode 100644 .agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.zh.md create mode 100644 .agents/notes/implemented/feature/2026-09-01-web-superellipse-corner-smoothing.i18n.yaml create mode 100644 .agents/notes/implemented/feature/2026-09-01-web-superellipse-corner-smoothing.md create mode 100644 .agents/notes/implemented/feature/2026-09-01-web-superellipse-corner-smoothing.zh.md create mode 100644 packages/client/ui-theme/src/styles/corner-shape.css create mode 100644 packages/client/ui-theme/tests/corner-shape-styles.client.spec.ts create mode 100644 packages/client/ui-theme/tests/elevation-styles.client.spec.ts create mode 100644 packages/client/ui-theme/tests/stylesheet-scan.ts diff --git a/.agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.i18n.yaml b/.agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.i18n.yaml new file mode 100644 index 0000000000..04bab8384f --- /dev/null +++ b/.agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.i18n.yaml @@ -0,0 +1,6 @@ +# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each +# side as of the last confirmed-consistent state. Both languages carry equal authority; +# after editing either side, bring the other along and re-record with: +# pnpm run verify-translation-pairing --write .agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.md +2026-09-01-web-elevation-stroke-shadows.md: 9d5789038267d4fc5693cc46bb8870a4410ce080 +2026-09-01-web-elevation-stroke-shadows.zh.md: 9ad34a6f15098710ee4cee34142c95c4c60e27fe diff --git a/.agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.md b/.agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.md new file mode 100644 index 0000000000..9d57890382 --- /dev/null +++ b/.agents/notes/implemented/feature/2026-09-01-web-elevation-stroke-shadows.md @@ -0,0 +1,42 @@ +# Agent Note: Web elevation — hairline stroke drawn in shadow + +Status: implemented + +English | [中文](2026-09-01-web-elevation-stroke-shadows.zh.md) + +## Problem + +Elevated web-client surfaces — menus, popovers, modals, panels, floating buttons, the composer — each paired a real `border: 1px solid ` with a `--dsw-shadow-lv2`/`lv3` shadow. The border consumes layout (1px per side, and it is the UA-default replacement on `