openyida 2026.9.20 → 2026.9.21

package/yida-skills/skills/yida-design/templates/design-themes/{soft-inset-surfaces.md → soft-inset-surfaces/design.md}

@@ -2,6 +2,7 @@
 name: "{{PROJECT_NAME}}"
 description: "以主题色轻染的浅灰外衬、近白画布和柔圆白面板构成低对比分层；导航以独立配色标记选中，细线图标、浅色圆形标记与局部主题色强调组织阅读，浮层以独立白面和克制投影浮起。"
 themeId: soft-inset-surfaces
+navTheme: light
 tokens:
   application-global:
     appearance:
@@ -12,12 +13,57 @@ tokens:
         "--pod-card-bg-color": "#FFFFFF" # neutral-gray；白色内容面板
         "--pod-table-cell-color": "var(--pod-card-bg-color)"
       navigation:
-        "--pod-shell-theme-bg-color": "#F7F7F7" # neutral-gray；独立浅灰导航
-        "--pod-nav-item-text-color": "#767676" # neutral-gray；保留设计稿普通菜单文字明度
-        "--pod-nav-item-text-hover-color": "#414141" # neutral-gray
-        "--pod-nav-item-text-selected-color": "#303030" # neutral-gray
-        "--pod-nav-menu-bg-hover-color": "#F2F2F2" # neutral-gray；未展示状态的推断
-        "--pod-nav-menu-bg-selected-color": "#EEEEEE" # neutral-gray
+        "--pod-shell-theme-bg-color": "#F7F7F7"
+        "--pod-nav-item-text-color": "#666666"
+        "--pod-nav-item-text-hover-color": "#414141"
+        "--pod-nav-item-text-selected-color": "#303030"
+        "--pod-nav-menu-bg-hover-color": "#F2F2F2"
+        "--pod-nav-menu-bg-selected-color": "#EEEEEE"
+        "--pod-nav-menu-item-selected-shadow": "none"
+        "--pod-page-header-bg-color": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-l-sub-main-bg-color": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-top-main-border-width": "1px"
+        "--pod-nav-top-main-border-color": "#DEDEDE"
+        "--pod-nav-top-tab-indicator-width": "0px"
+        "--pod-nav-logo-text": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-logo-bg": "var(--pod-nav-menu-bg-selected-color)"
+        "--pod-nav-logo-icon": "var(--pod-nav-item-text-selected-color)"
+        "--pod-nav-logo-border": "1px solid #DEDEDE"
+        "--pod-nav-logo-border-radius": "8px"
+        "--pod-nav-sub-divider-color": "#DEDEDE"
+        "--pod-nav-item-text-disabled-color": "rgba(24,28,31,.30)"
+        "--pod-nav-l-container-bg": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-l-group-label-color": "var(--pod-nav-item-text-color)"
+        "--pod-nav-l-search-border-color": "#DEDEDE"
+        "--pod-nav-popup-bg-color": "var(--pod-shell-theme-bg-color)"
+        "--pod-nav-popup-border-radius": "8px"
+        "--pod-nav-popup-shadow": "0 8px 24px rgba(24,28,31,.10)"
+        "--pod-nav-tab-line-hover-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-tab-line-selected-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-search-bg-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-search-bg-hover-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-search-bg-active-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-search-placeholder-color": "var(--pod-nav-item-text-color)"
+        "--pod-nav-search-text-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-search-icon-color": "var(--pod-nav-item-text-color)"
+        "--pod-nav-search-border-color": "#DEDEDE"
+        "--pod-nav-search-border-hover-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-search-border-active-color": "var(--pod-nav-item-text-hover-color)"
+        "--pod-nav-action-icon-color": "var(--pod-nav-item-text-color)"
+        "--pod-nav-action-border-color": "#DEDEDE"
+        "--pod-nav-action-border": "1px solid #DEDEDE"
+        "--pod-nav-action-bg-hover-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-action-bg-active-color": "var(--pod-nav-menu-bg-hover-color)"
+        "--pod-nav-menu-item-height": "42px"
+        "--pod-nav-menu-item-radius": "12px"
+        "--pod-nav-menu-item-border": "none"
+        "--pod-nav-menu-item-hover-border": "none"
+        "--pod-nav-menu-item-selected-border": "none"
+        "--pod-nav-menu-font-size": "14px"
+        "--pod-nav-menu-item-selected-font-weight": "500"
+        "--pod-nav-menu-line-height": "20px"
+        "--pod-nav-menu-gap": "8px"
+        "--pod-shell-lshape-border-radius": "8px"
     colors:
       "--color-white": "var(--pod-card-bg-color)" # 全应用基础表面，跟随内容明暗；不作为固定白字变量
       "--color-brand1-1": "<生成实际色值：--color-brand1-6 88% + #FFFFFF 12%，sRGB 逐通道混合>" # 品牌交互悬停
@@ -139,15 +185,17 @@ tokens:
 
 ### 2.2 应用导航
 
-导航按项目确定的明暗成组配色，独立于内容画布。背景使用 `--pod-shell-theme-bg-color`，普通文字与图标使用 `--pod-nav-item-text-color`；悬停文字与背景使用 `--pod-nav-item-text-hover-color`、`--pod-nav-menu-bg-hover-color`，选中文字与背景使用 `--pod-nav-item-text-selected-color`、`--pod-nav-menu-bg-selected-color`。图标跟随对应文字状态，颜色以项目 tokens 为准。
+冷浅灰导航与白色内容区保持细微层差，菜单圆角柔和，选中与搜索使用中性浅底。
 
-六项颜色不引用内容区的 Text、Fill、卡片或页面变量。导航切换明暗时成组确定其配色；需要主题强调时引用相应 Brand Token，保留导航的独立使用职责。`--color-brand1-3` 和 `--color-brand1-5` 保持主题派生浅色与深色语义，应用外观可按用途引用。本主题默认只提供浅色方案，出现模式开关不等于已定义深色内容方案。
+菜单轮廓使用 --pod-nav-menu-item-radius、--pod-nav-menu-item-border、--pod-nav-menu-item-hover-border、--pod-nav-menu-item-selected-border。侧栏和顶部菜单共用轮廓，各状态保持相同边框宽度，文字位置稳定；具体数值以本项目 Token 为准。
 
-仅当项目已确定自绘导航时，先按第五部分「自定义导航视觉设计指南」确定形态、容器关系与选中表达。默认侧栏采用 `--corner-2` 的圆角菜单和中性选中底面；顶部导航的下划线、紧凑导航的胶囊等按指南选择。导航背景、普通文字、悬停与选中文字仍沿用本节专属变量，形态变化不另建一套配色。
+导航与应用框架、表单、自定义页面和详情页共用设计语言。先按业务入口安排菜单、分组、搜索、品牌区与常用操作，再一起确定导航与正文的明暗、表面、字体、边界、圆角和密度。平台导航使用真实页面菜单；自绘导航按同一套导航 Token 实现。命名模板沿用自身 navTheme，换主色保持导航明暗与内容画布；需要另一导航明暗时改选主题，自由创意按项目明确设计。
 
-自绘导航共用尺度：行内图标与文字间距为 `--s-2`，菜单行高可取 `--s-9` 或 `--s-10`，左右内边距为 `--s-3`；分组间距用 `--s-6`，分组名用 caption 文字。此处尺度为推断。选中项使用专用选中文字色，图标可实心强调，普通项保持细线。已有子级入口用缩进与浅色连接线表达；不要为复制构图增加分组、入口、推广区或模式开关。导航与内容之间的边界按所选容器关系确定。
+导航底色使用 --pod-shell-theme-bg-color；普通、悬停和选中文字分别使用 --pod-nav-item-text-color、--pod-nav-item-text-hover-color、--pod-nav-item-text-selected-color；悬停和选中背景使用 --pod-nav-menu-bg-hover-color、--pod-nav-menu-bg-selected-color。图标跟随对应文字状态，当前入口同时用背景或字重表达。
 
-导航中的已有工作区选择器可用白色按钮表面；它展开后的选项层必须使用 `--color-fill1-5`，前景按白色覆盖层配套。头像、产品标识仅使用项目真实素材。
+菜单高度、圆角与间距使用 --pod-nav-menu-item-height、--pod-nav-menu-item-radius、--pod-nav-menu-gap；搜索、品牌区、分组、操作和弹出菜单使用 navigation 分组中的对应 Token。弹出菜单的底色、文字与搜索状态成组配套，导航与内容可以分别选择明暗。选中项使用 --pod-nav-menu-item-selected-shadow：none 关闭额外标记，完整 box-shadow 值可表达左、右或底部内阴影，不占据菜单布局空间；该 Token 独立于导航明暗。菜单高度、文字行高、内距和框架留白一起调整，给外阴影、长标题与键盘焦点留出空间。
+
+桌面检查菜单、搜索、选中态与表单的协调；折叠后保留可识别图标和入口名称；窄屏保持菜单可展开、当前页面可定位、键盘焦点可见。提交、编辑、详情与自定义页都沿用这一导航设计。
 
 ### 2.3 页面标题与操作
 

package/yida-skills/skills/yida-design/templates/design-themes/soft-inset-surfaces/form-layout.json

@@ -0,0 +1,13 @@
+[
+  {
+    "type": "ColumnContainer",
+    "layout": "12",
+    "columnGap": "16px",
+    "rowGap": "16px",
+    "display": "VERTICAL",
+    "mobileRowGap": "16px",
+    "children": [
+      []
+    ]
+  }
+]