SuperAPI AI 工具集

fluent2-design-system

设计与创作

查看项目

更新于 10-15 21:41

技能介绍

用途:使用微软 Fluent 2 设计系统与 @fluentui/react-components(v9)构建生产级 React 界面。安装命令为 npm install @fluentui/react-components。

主要能力:提供主题(webLightTheme、webDarkTheme、teamsLightTheme、teamsDarkTheme、teamsHighContrastTheme,以及 createLightTheme/createDarkTheme 自定义品牌色)、基于 Griffel 的 makeStyles 样式方案、设计令牌(tokens.*)、组件模型(slots、appearance/size/shape 变体)、布局与排版规范、颜色系统、无障碍支持,以及常用组件清单(Button、Input、Card、Table、DataGrid、Dialog、Toast 等)。

使用方式:应用需用 FluentProvider 包裹组件树并传入主题;样式在模块作用域用 makeStyles 定义,用 mergeClasses() 组合类名,颜色、间距、字体、圆角、阴影等一律使用 tokens.,不使用内联样式或外部 CSS。CSS 简写属性不受支持,需用 shorthands. 或长写属性;伪选择器与媒体查询使用嵌套对象。

适用场景:需要遵循 Fluent 2 视觉与交互规范的 Web 应用、含明暗主题切换或自定义品牌主题的界面、需要无障碍与高对比度支持的组件开发。

限制:v9 无 Stack 组件,布局需用 CSS Grid/Flexbox;不应从 @fluentui/react(v8)导入;不应直接覆盖颜色系统的 CSS 自定义属性;不应移除焦点指示器。完整令牌与组件参考见资料中提到的 references/tokens.md 与 references/components.md。