颜色

在设计系统中使用颜色时，常见的模式是拥有一个调色板，其中包含一些深浅不同的基本颜色，例如Polaris 颜色调色板。

这个调色板最好不要直接作为值包含在主题中。应该使用主题对象中的颜色命名来为调色板赋予语义含义，请看这个例子

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    mainForeground: palette.black,
    cardPrimaryBackground: palette.purplePrimary,
    buttonPrimaryBackground: palette.purplePrimary,
  },
});

花时间定义这些语义含义会带来很多好处

• 很容易理解颜色在整个应用中的应用位置和上下文
• 如果对调色板进行更改（例如，将紫色更改为蓝色阴影），我们只需要更新语义名称指向的内容，而无需更新整个应用中所有对 purplePrimary 的引用。
• 即使在上面的示例中 cardPrimaryBackground 和 buttonPrimaryBackground 指向相同的颜色，将按钮更改为绿色（而卡片保持紫色）也变得非常简单。
• 主题可以很容易地在运行时切换。