用途：这是 Saleor Dashboard 的样式指南，用于在创建、重构或修改 React 组件时，按 macaw-ui 设计系统规范添加样式。
主要能力：提供两种样式策略。策略一用 @saleor/macaw-ui-next 的 Box 内联属性处理简单样式，支持 display、flexDirection、alignItems、justifyContent、gap、padding、margin、宽高、圆角、背景色、定位、cursor、opacity、flexGrow/Shrink/Wrap、网格列等 sprinkle 属性；间距/尺寸接受 0 至 52 的令牌数值，支持响应式对象（如 display={{ mobile: "none", tablet: "flex", desktop: "grid" }}），可用 __ 前缀写任意 CSS 值，也可写 hover 等状态值。策略二用 CSS Modules 处理复杂样式，适合伪选择器、动画、媒体查询、嵌套选择器或单元素超过约 5 条规则的情况；每个组件一个同名 .module.css 文件，禁止跨组件共用。
使用方式：简单布局与间距用 Box 属性；复杂交互样式用 .module.css 并通过 import styles from "./X.module.css" 引用。必须使用 macaw 设计令牌：CSS 中用 var(--mu-*) 变量（如 var(--mu-colors-text-default1)、var(--mu-colors-background-default2)、var(--mu-colors-border-default1)），TypeScript 中从 @saleor/macaw-ui-next 导入 vars（如 vars.spacing[2]、vars.colors.border.default1）。文档还给出 hover 显隐、折叠旋转、响应式侧栏等 CSS Module 模式。
限制与反模式：不要用内联 style={{}}；不要为组件使用未加 module 的普通 .css；不要硬编码颜色；不要共用 CSS module。Box 与 CSS Modules 可在同一组件组合使用。完整令牌列表见 node_modules/@saleor/macaw-ui 下的 style.css 与 theme 类型文件。其他具体版本或收费信息暂未提供。