用途:这是 Equinor Design System(EDS)的紧凑设计规则参考,源自 eds.equinor.com 与 Equinor Communication Toolbox,供消费型智能体按需查阅并直接应用规则,本身不含工作流步骤。
主要能力: 颜色令牌:统一使用 EDS CSS 自定义属性(--eds-color-*),命名模式为 --eds-color-<layer>-<semantic>-<variant>,涵盖背景(bg)、文本(text)、边框(border)三类,如 --eds-color-bg-surface、--eds-color-text-strong、--eds-color-border-focus。禁止在 Fusion 应用代码中使用原始 hex、rgb() 或命名颜色。品牌约束:Equinor 红(#FF1243)仅用于主标志,不得作为 UI 操作或语义色。 排版:使用 @equinor/eds-core-react 的 Typography 组件及 variant 属性(h1–h4、overline、body_long、body_short、caption、label),不得手动设置 font-size、font-family 或 line-height。Fusion 应用须使用 EDS 系统字体,不得引入 Equinor 品牌字体。 间距:使用 --eds-spacing-horizontal-<size> 与 --eds-spacing-vertical-<size>,尺寸从 4xs 到 3xl,水平与垂直刻度可能略有差异,应按轴向选用。 圆角与阴影:标准圆角用 --eds-shape-corners-border-radius;EDS v2 未将阴影暴露为 CSS 自定义属性,优先使用 Paper 组件,需要原始值时从 @equinor/eds-tokens 的 JS 对象导入。 图标:使用 @equinor/eds-icons 配合 Icon 组件,通过 data 属性传入图标数据,提供 title 以保障可访问性,尺寸固定为 16、24(默认)、32、40、48。 页面布局:Fusion Portal 应用运行于 Portal 外壳内,顶部导航、左侧栏与外边距由外壳负责,应用不得复制或冲突。三区结构为顶部栏(外壳提供)、主内容区、侧面板(@equinor/fusion-react-side-sheet)。根组件不得添加外边距或内边距,不得固定高度,不得创建包裹整页的自定义滚动容器。 空态与加载态:加载用 EDS CircularProgress 或 ProgressIndicator 居中;空态用 Typography 加可选 Button;错误用 body_short 配 --eds-color-text-danger-strong 及重试操作。
使用方式:在 styled-components 中优先使用 EDS CSS 自定义属性,以自动适配系统深色/浅色模式。
限制:资料未提供安装命令、版本兼容细节、收费信息或平台支持范围。