用途:为 SGDS 组件和容器应用主题感知的语义化边框颜色,日夜主题切换时自动适配(固定变体除外)。
主要能力:所有边框颜色工具采用 sgds:border-{semantic}-{modifier} 命名并带 sgds: 前缀。基础边框包括 default、emphasis、muted、fixed-light、fixed-dark、translucent、transparent。语义色包括 primary、accent、success、danger、warning、purple、cyan、neutral,各含 default、emphasis、muted 变体。另有仅用于 input、select、textarea、form 的表单专用令牌(默认、禁用、校验状态)。
使用方式:先完成 sgds-utilities-setup 设置,并引入工具 CSS 与主题文件 day.css、night.css。选择语义类别,再调整强调程度,最后决定是否固定明暗。示例:sgds:border-default、sgds:border-primary-default、sgds:border-danger-emphasis。边框颜色必须与边框宽度类(如 sgds:border)搭配使用,仅颜色不会产生可见边框。
适用场景:卡片、分隔线、布局分隔、行边框;选中或激活态、品牌强调、焦点指示;信息提示、链接相关边框;校验成功或错误提示、警告提示;非语义分类区分;表单元素边框。
限制:边框颜色仅在组件和容器级别,无页面级区分。语义色应与父组件语义一致;muted 降低视觉重量,emphasis 增强。表单令牌仅适用于原生 HTML 表单元素。缺失细节暂未提供。