SuperAPI AI 工具集

token-usage

前端与建站

查看项目

更新于 10-15 22:38

技能介绍

用途:指导正确在 React 组件与 CSS 中使用 IDS 设计令牌(design tokens),包括导入方式、常见错误与各令牌类别的实用规则。

使用时机:生成需要颜色、间距、排版或圆角值的 React 组件;为基于 IDS 的应用编写自定义 CSS 或内联样式;审查或修正既有代码的令牌使用;在组件属性、CSS 变量与 cssVars JS 对象之间做选择;查询可用令牌值与命名约定。

工作流:先检查组件属性是否已处理(多数 IDS 组件接受 IressCSSProps,如 p、m、gap、bg、color、textStyle),优先用属性;再判断令牌类别(颜色/间距/排版/圆角);然后选择正确导入(内联样式用 cssVars,样式表用 CSS 变量);需要具体值时查阅 token 参考。

安装:IDS v6 处于 beta,使用 npm install @iress-oss/ids-tokens@beta;如同时用 React 组件,npm install @iress-oss/ids-components@beta。React 需包裹 IressProvider 并导入 @iress-oss/ids-tokens/build/css-vars.css。非 React 环境可仅导入 CSS 样式表或使用 cssVars/designTokens。注意 IressProvider 运行时会加载 Google 字体,若启用 CSP 需放行相应来源。

主要用法:CSS 中用 var(--colour-neutral-10) 等公共变量,勿直接引用 --iress-* 主题覆盖变量;CSS-in-JS 用 cssVars.colour.neutral[10] 等类型安全引用;仅检视元数据时用 designTokens。分类规则:颜色永远用令牌,禁止硬编码色值;间距以 4px 为基准,有效值为 spacing.0 至 spacing.10(无 spacing.9),别名 none/xs/sm/md/lg/xl,padding 仅正数、margin 可负数;圆角 radius.0-4;文字统一用 IressText 与 textStyle,而非原生 HTML 元素。

限制:具体组件属性、参考文档与主题化细节需安装 @iress-oss/ids-components 后方可查阅;官方未提供更多版本、收费或平台信息。