创建您的设计系统,第3部分:颜色

在本文中,我们将研究如何在CSS中设置颜色系统,以及确保该系统易于使用和维护的最佳实践。

本文是受我们的Web组件库启发而设计系统的系列文章的一部分。该库依赖于CSS全局变量的可靠系统。因此,这是我们分享我们所学到的东西,这些东西可以设定图书馆的全球风格!

文章系列:
-第1部分:版式
-第2部分:网格和布局
-第3部分:颜色
-第4部分:间距
-第5部分:图标
-第6部分:按钮

我们已经启动了色彩编辑器!一个Web设计工具,可生成与CodyHouse Framework兼容的调色板和主题。

颜色变量101

与其他CSS全局变量不同,创建颜色系统的编码量为10%,语义量为90%。在处理_colors.scss文件时,您要牢记以下目标:

  1. 颜色变量必须易于记忆→您不想在必须选择颜色时随时检查全局文件。
  2. 该系统必须易于更新→您将添加,删除和重命名颜色。确保这样做并不复杂。
  3. 系统应该只包含基本颜色→我们已经听过很多次了……但是我们最终总是得到比我们需要的更多的颜色!设计系统真正的成功关键是消除所有不必要的内容(包括颜色)。

语义与声明性颜色

设置颜色变量时,有两种主要方法:语义和声明性颜色。

语义方法如下:

这是声明式方法的示例:

他们俩都没有错。选择满足您需求的产品取决于许多因素(例如,项目规模,品牌色彩相关性等)。

在处理我们框架的_colors.scss文件时,我必须考虑到用户将对其进行编辑(100%)。这意味着即使声明式方法最容易使用,我也必须将其与语义方法混合使用才能获得易于维护的系统。

基本调色板

第一个步骤是声明创建Web组件所需的最小颜色数。通常,基本调色板由以下组成:

  1. 链接的主色/主色→按钮背景色等。通常,它是号召性用语的主要颜色。
  2. 强调色→用于突出显示页面上的重要内容。它不应该是原色的变体,而应该是互补色。
  3. 中性色的比例→通常是灰度色调的比例,用于文本元素,微妙元素,边框等。
  4. 反馈颜色→成功,错误,警告。

其中一些颜色需要变化(较暗/较浅的版本),通常用于突出显示交互性(例如:hover /:active状态)。

在CSS中,这表示为:

*注意:我们正在使用postcss-color-mod-function插件将颜色功能转换为与所有浏览器兼容的RGBA代码。

上面的代码段代表了调色板:整个项目中使用的所有颜色。

使用颜色函数可以生成原色和强调色的变化。如果您有一个demo.html文件(并且我们在我们的框架中有此文件),则这种方法会派上用场,以便您可以调整函数的值,直到对所获得的颜色感到满意为止。阴影(或中性)颜色是使用chroma.js生成的。在这种情况下,使用功能并不理想,因为您通常有两种相反的颜色(黑色和白色),并且您需要根据这两种颜色生成一个值的刻度。

在混合中添加语义颜色

调色板准备好后,我们可以添加语义颜色。创建语义颜色并不意味着增加颜色数量,而是使用语义引用来分配颜色。

为什么我认为这是一个好方法

首先,该系统依赖于两种基本颜色:原色和强调色。这意味着,当您需要使用颜色变量时,记住这些变量代表什么并不困难(即使您没有使用诸如“蓝色”和“红色”之类的声明性名称)。

您的系统可能需要包括更多颜色(例如,辅助颜色)。您仍然只需要处理三种颜色。无论使用哪种方法,都难以管理基于10种以上主色的系统,因此您可能需要考虑简化它。

灰度颜色使用不同的命名约定:变量末尾的数字越大,颜色越深。
当您不确定要应用哪种中性色时,此方法会很方便。如果gray-2看起来太微妙,则可以尝试gray-3。您可能已经注意到缺少某些阴影(例如,gray-5)。在我们的案例中,它们不是必需的(在创建Web组件时从未使用过它们),因此我们将它们从调色板中删除了。

语义颜色被添加到混合中的原因主要有三个:

  1. 每当您需要修改颜色时,_colors.scss文件就会成为事实的来源。您是否觉得文字标题元素应该更暗?打开_colors.scss文件,然后编辑color-text-heading变量。
  2. 例如,如果定义了边框,那么下次创建边框元素时,无需查找在其他组件中使用过的灰色。相同的概念不仅适用于边框,还适用于许多元素。
  3. 创建和维护不同的主题很容易。

主题化

一旦我们可以使用CSS变量而不必依赖插件或polyfill,创建颜色主题将变得非常简单*!这是否意味着我们今天无法创建主题?不,我们可以。我们有两个选择。

*在我们的框架中,我们使用postcss-css-variables插件来编译CSS变量。它当前不支持更新CSS类中的变量。

选项1无论如何都会更新CSS变量。不支持变量的浏览器将显示“默认”颜色主题。只要内容可访问,这不是问题。

例如,您具有默认的颜色主题→白色背景和黑色文本颜色,以及.theme-dark→黑色背景和白色文本颜色。然后,您创建两个组件,一个具有默认主题,另一个具有.dark-theme。如果同时具有默认主题的两个组件都不会影响用户体验,则可以将.dark-theme视为增强功能(可选)。在这种情况下,即使并非所有地方都支持变量,也可以更新变量以创建不同的主题。

这是创建新主题以更新一些关键CSS变量的方式:

我喜欢这个解决方案,因为它抽象了色彩校正,并且使您可以将色彩主题保存在一个文件中。这样,我们可以简单地通过应用CSS类来更改每个组件的状态(从主题a到主题b)。

选项2将针对外观受主题影响的所有元素。这种方法的优点是所有浏览器都支持。但是,与完全基于CSS变量的维护相比,维护起来并不容易。

以下是实施方案2的示例:

现在,您知道了我们计划如何在框架中处理颜色!如果您有反馈/建议,请在评论中告诉我们!

希望您喜欢这篇文章!有关更多网页设计的信息,请在Medium或Twitter上关注我们。