SuperAPI AI 工具集

ui-theme-designer-design-tokens

设计与创作

查看项目

更新于 10-16 03:38

技能介绍

用途:回答 SAP Design System / SAP Fiori 设计令牌相关问题,例如存在哪些主题、某主题参数(如 sapButton_Background)的取值、令牌继承关系与注释语义。

环境与准备:以包含本 SKILL.md 的目录为 $THIS,需存在 $THIS/node_modules/ 且不早于 7 天,否则执行 cd $THIS && npm ci。

数据来源:令牌定义在 theming-base-content 的 LESS 文件中,被各框架的 LESS 与 CSS 消费。依赖包内包含 UI5(@openui5 各库的 themes 目录)、UI5 Web Components(@ui5/* 的骨架 CSS、base 参数 CSS 与主题参数 CSS)、Fundamental Styles(dist 下骨架 CSS 与 theming 主题 CSS)、以及 @sap-theming/theming-base-content 的 Base 主题仓库与 .theming 元数据(含 sEntity、sType、aFiles、oExtends、sSourcePathPattern 等)。

取值查询:若只需解析后的参数值,读取 baseLib/<theme>/ 下的预解析产物,优先 css_variables.css(如 --sapButton_Background: #fff;),也可用 less_variables.less 或 variables.json;不要用 design-tokens.json 取值,其颜色字段是 HSLA 引用而非最终值。需要继承或注释语义时,再按 .theming 的 sBaseFileId 与 @import 递归合并 LESS,并把参数定义前的 [Annotation Value] 注释映射到参数,重复标注合并、互斥的正反值同时移除。

组件来源:默认主题 sap_horizon;框架不明时按组件名在 UI5 Web Components 中查找,并在 Base 中补充 sap$COMPONENT_* 参数(标注为尚未被 UI5 Web Components CSS 引用);无组件无框架时用 Base。UI5 Web Components 需合并骨架、base 参数与主题 delta 三层 CSS;Fundamental Styles 则结合 dist CSS、baseLib 的 css_variables.css 与 theming/<theme>.css。

限制:资料未提供官方在线服务、收费或图形界面等信息;不报告 UI5 Web Components 与 Fundamental Styles 的内部专用自定义属性。