别名

提供颜色的语义别名指南。

语义别名

按实际色阶名称引用颜色色阶可以很好地工作,例如 bluered。但是,创建像 accentprimaryneutralbrand 这样的语义别名通常是有帮助的,尤其是在主题设计中。

/*
* 注意:在生产环境中从 CDN 导入不推荐。
* 仅供原型设计使用。
*/
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css";
:root {
--accent-1: var(--blue-1);
--accent-2: var(--blue-2);
--accent-3: var(--blue-3);
--accent-4: var(--blue-4);
--accent-5: var(--blue-5);
--accent-6: var(--blue-6);
--accent-7: var(--blue-7);
--accent-8: var(--blue-8);
--accent-9: var(--blue-9);
--accent-10: var(--blue-10);
--accent-11: var(--blue-11);
--accent-12: var(--blue-12);
--success-1: var(--green-1);
--success-2: var(--green-2);
/* 为所有步骤重复 */
--warning-1: var(--yellow-1);
--warning-2: var(--yellow-2);
/* 为所有步骤重复 */
--danger-1: var(--red-1);
--danger-2: var(--red-2);
/* 为所有步骤重复 */
}

通过这种方法,您可能会遇到需要在多个语义中使用相同色阶的问题。常见的例子包括:

  • 如果您将 yellow 映射到“警告”,您可能还需要 yellow 来表示“待处理”。
  • 如果您将 red 映射到“危险”,您可能还需要 red 来表示“错误”或“被拒绝”。
  • 如果您将 green 映射到“成功”,您可能还需要 green 来表示“有效”。
  • 如果您将 blue 映射到“强调”,您可能还需要 blue 来表示“信息”。

在这种情况下,您可以选择定义多个映射到相同色阶的语义别名。

/*
* 注意:在生产环境中从 CDN 导入不推荐。
* 仅供原型设计使用。
*/
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css";
:root {
--accent-1: var(--blue-1);
--accent-2: var(--blue-2);
--info-1: var(--blue-1);
--info-2: var(--blue-2);
--success-1: var(--green-1);
--success-2: var(--green-2);
--valid-1: var(--green-1);
--valid-2: var(--green-2);
--warning-1: var(--yellow-1);
--warning-2: var(--yellow-2);
--pending-1: var(--yellow-1);
--pending-2: var(--yellow-2);
}

或者,您可以简单地建议您的团队成员在没有适当语义别名的情况下使用原始色阶名称。

用例别名

Radix Colors 色阶中的每个步骤都是为特定的用例设计的。为了帮助您的团队知道使用哪个步骤,您可以根据设计的用例提供别名。

/*
* 注意:在生产环境中从 CDN 导入不推荐。
* 仅供原型设计使用。
*/
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css";
:root {
--accent-base: var(--blue-1);
--accent-bg-subtle: var(--blue-2);
--accent-bg: var(--blue-3);
--accent-bg-hover: var(--blue-4);
--accent-bg-active: var(--blue-5);
--accent-line: var(--blue-6);
--accent-border: var(--blue-7);
--accent-border-hover: var(--blue-8);
--accent-solid: var(--blue-9);
--accent-solid-hover: var(--blue-10);
--accent-text: var(--blue-11);
--accent-text-contrast: var(--blue-12);
--success-base: var(--green-1);
--success-bg-subtle: var(--green-2);
/* 为所有步骤重复 */
--warning-base: var(--yellow-1);
--warning-bg-subtle: var(--yellow-2);
/* 为所有步骤重复 */
--danger-base: var(--red-1);
--danger-bg-subtle: var(--red-2);
/* 为所有步骤重复 */
}

同样,通过这种方法,您可能会遇到需要在多个用例中使用相同步骤的问题。常见的例子包括:

  • 第 9 步设计用于纯色背景,但它也可以适用于输入占位符文本。
  • 第 8 步设计用于悬停组件边框,但它也适用于聚焦环。

在这些情况下,您可以选择定义多个映射到相同步骤的别名。

/*
* 注意:在生产环境中从 CDN 导入不推荐。
* 仅供原型设计使用。
*/
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/gray.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/blue.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/green.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/yellow.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/red.css";
:root {
--gray-solid: var(--gray-9);
--gray-placeholder-text: var(--gray-9);
--accent-border-hover: var(--blue-8);
--accent-focus-ring: var(--blue-8);
}

或者,您可以简单地建议您的团队成员在没有别名的情况下使用原始步骤编号。

可变别名

在为光明模式和黑暗模式设计时,有时您需要将一个变量在光明模式映射为一种颜色,在黑暗模式映射为另一种颜色。常见的例子包括:

  • 在光明模式中具有白色背景而在黑暗模式中具有微灰色背景的组件。例如,卡片、弹出窗口、下拉菜单、悬停卡、对话框等。
  • 在光明模式中具有透明黑色背景而在黑暗模式中具有透明白色背景的组件。例如,工具提示。
  • 在光明模式中饱和的、透明灰色的阴影,黑暗模式中纯黑色的阴影。
  • 在光明模式中是浅透明黑色的覆盖物,在黑暗模式中是深色透明黑色的覆盖物。
/*
* 注意:在生产环境中从 CDN 导入不推荐。
* 仅供原型设计使用。
*/
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate-alpha.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/white-alpha.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/black-alpha.css";
:root {
--panel: white;
--panel-contrast: var(--black-a9);
--shadow: var(--slate-a3);
--overlay: var(--black-a8);
}
.dark {
/* 为黑暗模式重新映射您的颜色 */
--panel: var(--slate-2);
--panel-contrast: var(--white-a9);
--shadow: black;
--overlay: var(--black-a11);
}

避免使用具体的变量名称,例如“CardBg”或“Tooltip”,因为您可能需要将每个变量用于多个用例。

重新命名色阶

如果愿意,您可以重新命名色阶。原因可能包括:

  • 将饱和灰色重新命名为 gray 以保持简单。
  • skygrass 重命名为 bluegreen 以保持命名直观。
  • 将色阶名称更改为与您的品牌相匹配,例如 Discord 的 blurple
/*
* 注意:在生产环境中从 CDN 导入不推荐。
* 仅供原型设计使用。
*/
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/slate.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/sky.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/grass.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/violet.css";
@import "https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/crimson.css";
:root {
--gray-1: var(--slate-1);
--gray-2: var(--slate-2);
--blue-1: var(--sky-1);
--blue-2: var(--sky-2);
--green-1: var(--grass-1);
--green-2: var(--grass-2);
--blurple-1: var(--violet-1);
--blurple-2: var(--violet-2);
--caribbean-sunset-1: var(--crimson-1);
--caribbean-sunset-2: var(--crimson-2);
}
上一篇Usage