docs(web): link radius rules directly and tidy curve comment
This commit is contained in:
1 parent
3a9f0f1aab
commit
5c5555eec1
4 files changed
+7
-7
No files matched your search
@@ -9,8 +9,8 @@
|
||||
en: dc8c41fbf9869179
|
||||
zh: e45976a585cb9c86
|
||||
/web-ui-style-reference/component-rules:
|
||||
en: 17ccf65aec7f97b5
|
||||
zh: f2592e85e617b959
|
||||
en: 458da7f974517997
|
||||
zh: 8b45f816151c233d
|
||||
/web-ui-style-reference/corner-radii-and-settings-cards:
|
||||
en: 118972f6c2bd6ce4
|
||||
zh: 85f8416b03e4dd8b
|
||||
|
||||
+1
-1
@@ -21,7 +21,7 @@ Global style sheets belong in `ui-theme/src/styles/`. Component styles live besi
|
||||
- Keep source text, terminal output, and diff lines unwrapped when their component contract requires column preservation; use the shared scrollbar styles rather than component-specific scrollbar selectors.
|
||||
- Put presentation in CSS. Inline React styles may pass component-local custom-property values but must not encode theme branches.
|
||||
- Preserve keyboard focus visibility and reduced-motion behavior when adding transitions or hover-only controls.
|
||||
- Rounded corners default to the global superellipse smoothing from ui-theme's `corner-shape.css` on supporting engines. Follow the [corner-radius standard](ui-radius.md#shapes) for circular shapes and component-specific curves; the ui-theme corner-shape spec enforces the full-round pairing.
|
||||
- Rounded corners default to the global superellipse smoothing from ui-theme's `corner-shape.css` on supporting engines. Follow the radius standard's [circular-shape](ui-radius.md#shapes) and [nested-geometry](ui-radius.md#nested-hover) rules; the ui-theme corner-shape spec enforces the full-round pairing.
|
||||
- Elevated surfaces (menus, popovers, modals, panels, floating buttons, the composer) set `border: 0` and take `box-shadow: var(--dsw-elevation-panel)`, `var(--dsw-elevation-prominent)`, or the composer's `var(--dsw-elevation-soft)` (larger blur at lower alpha): the 0.5px hairline stroke is the first shadow layer, and `--dsw-elevation-stroke-color` rebinds or suppresses it per surface or state. Never pair a `--dsw-alias-border-*` border with an lv/elevation shadow — the ui-theme elevation spec rejects the pairing; state-colored borders (warn panels) stay real borders.
|
||||
- Existing and new dropdown, context, submenu, and selection menus use `Menu` or wrap custom content in `MenuSurface`. The material is the theme-owned `--dsw-menu-surface-fill` plus `--dsw-menu-backdrop-filter`; feature and platform CSS must not override either. The ui-theme menu spec rejects unwrapped menu/listbox renderers, material overrides, and token redefinitions. The schedule-owned `TaskMenu` and `ClockPicker` retain their existing containers and material as explicit exceptions ([owner](../packages/client/ui-schedule/README.md)).
|
||||
- Modal backdrops, including settings and confirmation dialogs, retain their translucent dark mask without blur. The theme sets `--dsw-mask-blur` to `none`; Desktop-owned modal overlays also leave the parent page unfiltered.
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
- 当组件约定要求保留列结构时,源码文本、终端输出和 diff 行不得换行;使用共享滚动条样式,不得定义组件专用滚动条选择器。
|
||||
- 呈现规则写在 CSS 中。React 内联样式可以传递组件局部自定义属性值,但不得编码主题分支。
|
||||
- 添加过渡动画或仅悬停可见的控件时,保留清晰可见的键盘焦点和减少动态效果行为。
|
||||
- 支持的引擎上,圆角默认使用 ui-theme `corner-shape.css` 的全局超级椭圆平滑。圆形与组件专用曲线遵循[圆角规范](ui-radius.zh.md#shapes);ui-theme 的 corner-shape spec 强制全圆声明的配对。
|
||||
- 支持的引擎上,圆角默认使用 ui-theme `corner-shape.css` 的全局超级椭圆平滑。遵循圆角规范中的[圆形](ui-radius.zh.md#shapes)与[嵌套几何](ui-radius.zh.md#nested-hover)规则;ui-theme 的 corner-shape spec 强制全圆声明的配对。
|
||||
- 高层级表面(菜单、浮层、对话框、面板、悬浮按钮、输入框)设 `border: 0` 并使用 `box-shadow: var(--dsw-elevation-panel)`、`var(--dsw-elevation-prominent)` 或输入框专用的 `var(--dsw-elevation-soft)`(更大模糊、更低透明度):0.5px 发丝描边是第一层投影,`--dsw-elevation-stroke-color` 可按表面或状态重绑或抑制描边。不得将 `--dsw-alias-border-*` border 与 lv/elevation 投影配对——ui-theme 的 elevation spec 会拒绝;状态色 border(warn 面板)保持真 border。
|
||||
- 存量和新增的下拉菜单、上下文菜单、子菜单及选择菜单使用 `Menu`,自定义内容用 `MenuSurface` 包裹。材质由主题的 `--dsw-menu-surface-fill` 和 `--dsw-menu-backdrop-filter` 组成;功能及平台 CSS 不得覆盖两者。ui-theme 菜单检查拒绝未使用共享容器的 menu/listbox 渲染、材质覆盖和 token 重定义。计划任务自有的 `TaskMenu` 与 `ClockPicker` 是明确例外,保留现有容器和材质([所属包](../packages/client/ui-schedule/README.zh.md))。
|
||||
- 设置、确认框等模态弹窗保留黑色半透明遮罩,不模糊背景。主题将 `--dsw-mask-blur` 设为 `none`;Desktop 自有模态浮层也不对父页面施加模糊。
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* Default smooth corner curvature. Inside the support guard, corners use
|
||||
* superellipse(1.5) — between a circular arc (round = superellipse(1)) and a
|
||||
* squircle (superellipse(2)) — instead of the
|
||||
* default arc; engines without corner-shape keep circular corners because the
|
||||
* token and the rule exist only inside the guard.
|
||||
* squircle (superellipse(2)) — instead of the default arc. Engines without
|
||||
* corner-shape keep circular corners because the token and the rule exist
|
||||
* only inside the guard.
|
||||
*
|
||||
* corner-shape does not inherit, so the universal selector applies the token
|
||||
* to elements and their ::before/::after; other pseudo-elements (for example
|
||||
|
||||
Reference in new issue
Block a user