用途:m3-web-ink 面向使用 Ink(React for CLIs)构建交互式命令行界面的开发者,帮助在终端中套用 Material Design 3(M3)的视觉规范,使 CLI 工具与开发者工具获得一致的 Material 风格。
主要能力:提供 M3 设计令牌到终端颜色的映射方案,包含浅色与深色两套主题对象(如 primary、onPrimary、secondary、tertiary、error、surface、onSurface、outline 等),并给出面向旧终端的命名 ANSI 颜色回退(primary→magenta、secondary→gray、tertiary→cyan、error→red、success→green)。同时给出 M3 组件到 Ink/@inkjs/ui 的对应表,例如 Filled Button 用 Box+Text 样式实现、Text Field 用 TextInput、Select/Menu 用 Select、多选用 MultiSelect、进度用 Spinner/ProgressBar、徽章用 Badge、确认框用 ConfirmInput、卡片用带圆角边框的 Box、分隔线用重复字符、列表用 UnorderedList/OrderedList、提示用 Alert。还演示了用 extendTheme 与 ThemeProvider 统一配置 TextInput、Select、Spinner 的焦点色与高亮色。
使用方式:安装命令为 npm install ink react @inkjs/ui。定义 m3Theme 与 m3ThemeDark 主题对象后,在组件中通过 color、borderColor、backgroundColor 等属性引用令牌,并用 ThemeProvider 包裹应用。终端颜色方面,现代终端支持 24 位真彩色可直接使用 M3 十六进制值;旧终端需映射为命名 ANSI 颜色,可用 chalk.level 或 supports-color 检测颜色支持级别,并始终提供命名颜色回退。
适用场景:Node.js CLI 工具、开发者工具、交互式终端应用,以及希望终端界面保持 M3 一致风格的 React CLI 项目。
限制:资料未提供具体版本兼容性、性能数据、收费或许可信息;组件映射与颜色回退需开发者自行按终端环境验证。