用途:帮助开发者使用 SGDS 的背景色工具类。这些工具类基于语义令牌,能随明暗主题自动适配(固定变体除外),命名遵循 sgds:bg-{variant}-{modifier} 模式,带 sgds: 前缀。
前提:需先完成 sgds-utilities-setup 技能中的初始化设置;主题感知颜色还需要工具类 CSS 以及 day.css 与 night.css 两个主题文件。
主要能力:核心区分是令牌层级——含 surface 的令牌用于组件级(卡片、徽章、表单),非 surface 令牌用于页面级(区块、整宽区域、body)。命名模式为 sgds:bg-{semantic}-{level}-{emphasis}。基础背景中,组件级有 surface-default(组件默认首选)、surface-raised(与默认背景区分,如卡片上的徽章)、surface-inverse(相反主题色)、surface-fixed-light/dark(不随主题变化,用于图片叠加);页面级有 default、alternate(区分区块)、overlay(仅全屏弹窗/抽屉遮罩)、fixed-light/dark、translucent/subtle(半透明,用于 hover/active)、transparent。语义色包括 primary、accent、success、danger、warning、purple、cyan、neutral,每种带 default、muted、surface-default、surface-emphasis、surface-muted 等变体;另有表单专用背景令牌,用于输入框、选择框和文本域。
使用方式:先判断是组件级还是页面级,再选择基础令牌,必要时叠加语义色,最后按需调整强调程度(emphasis 增强、muted 减弱)。
适用场景:卡片、面板、徽章、图片叠加、页面与区块背景、全屏遮罩、品牌强调、信息提示、成功/错误/警告反馈、非语义标签、表单控件等。
限制:背景需搭配合适的文字颜色以满足可访问性;overlay 仅用于全屏弹窗或抽屉遮罩;固定色仅用于内容不随主题变化的场合;表单令牌只适用于表单组件。各语义色与基础背景的详细示例可参阅对应参考文件。该技能的具体实现细节、收费与效果等资料暂未提供。