SuperAPI AI 工具集

aura-theme

通用与其它

查看项目

更新于 10-16 01:14

技能介绍

用途:根据用户的自由描述生成 Vaadin Aura 主题 CSS 文件,并完成与项目的集成。

主要能力:解析描述中的颜色、氛围、密度、字体、布局、表面层级、语义品牌色及组件样式需求;参考 property-values.md 获取合法属性值与默认值,并选取最接近的参考 CSS 作为范例;将意图映射为 Aura 属性,如 color-scheme、accent 颜色、base-size、base-radius、contrast-level、surface-level、surface-opacity、字体与布局 inset 等;按需生成侧边导航、按钮、卡片、输入框、用户颜色与 Grid 等组件样式。

使用方式:先定位 styles.css(默认 /src/main/resources/META-INF/resources/styles.css,找不到则搜索 **/styles.css),在相同目录创建描述性命名的主题 CSS 文件,并在 styles.css 顶部添加 @import "filename.css";。核心 Aura 属性写在 html 选择器上,组件覆盖可用第二个 html 块。仅输出非默认属性,浅色与深色强调色需同色系配对,背景色需成对设置,自定义字体需使用参考列表中精确的 @import URL。

适用场景:创建新主题、调整视觉风格、定制设计系统、按描述生成配色与排版方案。

限制:不得设置参考中标注为只读的属性;--aura-base-radius 只缩放派生步骤,方形角需直接设 --vaadin-radius-s/m/l: 0;app layout inset 必须带单位(如 0px);Grid 等组件属性仅在明确提及时使用;自定义十六进制颜色仅在用户明确要求预设外颜色时使用。具体字体清单、预设值与完整示例以参考文件为准。