Angular Material 18中use-system-variables的作用是什么？

• 映射主题参数为全局CSS自定义属性
  当该配置设为true时，Angular Material会将你定义的M3主题中的颜色（主色、tertiary色等）、排版（字体大小、字重、行高）相关Sass变量，自动转换为:root作用域下的CSS自定义属性。比如主题里的主色会对应--md-sys-color-primary，正文大号字体大小对应--md-sys-typescale-body-large-font-size这类变量。

• 实现无编译的动态主题调整
  有了这些全局CSS变量后，你无需重新编译Sass代码就能动态修改主题。比如切换亮暗模式、调整主题色彩，只需要通过JavaScript直接修改对应的CSS变量值即可，大幅简化了动态换肤或跟随系统主题的开发流程。

• 取舍：增大打包体积
  正如生成主题时的提示所述，启用该选项会导致最终打包的CSS体积增加。因为Angular Material需要生成包含CSS变量的样式声明，同时保留部分静态编译后的样式以兼容组件需求，这会额外增加样式代码量。

结合你提供的配置示例，color和typography模块都开启了use-system-variables: true，意味着整个M3主题的色彩系统和排版系统都会完全映射为全局CSS自定义属性。

内容的提问来源于stack exchange，提问作者Robert