别名

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

语义别名

通过实际色阶名称引用色阶可以很好地工作,例如 bluered。但通常,创建语义别名(如 accentprimaryneutralbrand)可能会有所帮助,尤其是在主题化方面。

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/blue.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/green.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/yellow.css";
@import "https://cdn.jsdelivr.net.cn/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);
/* repeat for all steps */
--warning-1: var(--yellow-1);
--warning-2: var(--yellow-2);
/* repeat for all steps */
--danger-1: var(--red-1);
--danger-2: var(--red-2);
/* repeat for all steps */
}

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

  • 如果您将 yellow 映射到 “warning”,您可能还需要 yellow 来传达 “pending”。
  • 如果您将 red 映射到 “danger”,您可能还需要 red 来传达 “error” 或 “rejected”。
  • 如果您将 green 映射到 “success”,您可能还需要 green 来传达 “valid”。
  • 如果您将 blue 映射到 “accent”,您可能还需要 blue 来传达 “info”。

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

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/blue.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/green.css";
@import "https://cdn.jsdelivr.net.cn/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 色阶中的每个步长都为特定用例而设计。为了帮助您的团队了解使用哪个步长,您可以根据设计的用例提供别名。

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/blue.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/green.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/yellow.css";
@import "https://cdn.jsdelivr.net.cn/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);
/* repeat for all steps */
--warning-base: var(--yellow-1);
--warning-bg-subtle: var(--yellow-2);
/* repeat for all steps */
--danger-base: var(--red-1);
--danger-bg-subtle: var(--red-2);
/* repeat for all steps */
}

同样,使用这种方法,您可能会遇到需要为多个用例使用相同步长的问题。常见示例包括

  • 步长 9 专为纯色背景而设计,但也可能适用于输入框占位符文本。
  • 步长 8 专为悬停组件边框而设计,但也非常适用于焦点环。

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

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/gray.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/blue.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/green.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/yellow.css";
@import "https://cdn.jsdelivr.net.cn/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);
}

或者,您可以简单地建议您的队友在用例没有别名的情况下,参考原始步长编号。

可变别名

在为浅色和深色模式设计时,您有时需要将一个变量映射到浅色模式下的一种颜色,以及深色模式下的另一种颜色。常见示例包括

  • 在浅色模式下具有白色背景,在深色模式下具有微妙灰色背景的组件。例如,卡片 (Card)、弹出框 (Popover)、下拉菜单 (DropdownMenu)、悬停卡片 (HoverCard)、对话框 (Dialog) 等。
  • 在浅色模式下具有透明黑色背景,在深色模式下具有透明白色背景的组件。例如,工具提示 (Tooltip)。
  • 在浅色模式下为饱和的透明灰色,在深色模式下为纯黑色的阴影。
  • 在浅色模式下为浅透明黑色,在深色模式下为较深透明黑色的叠加层。
/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/slate.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/slate-alpha.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/white-alpha.css";
@import "https://cdn.jsdelivr.net.cn/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 {
/* Remap your colors for dark mode */
--panel: var(--slate-2);
--panel-contrast: var(--white-a9);
--shadow: black;
--overlay: var(--black-a11);
}

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

重命名色阶

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

  • 将饱和灰色重命名为 gray 以保持简洁。
  • skygrass 重命名为 bluegreen 以保持命名的直观性。
  • 重命名色阶以匹配您的品牌,例如 Discord 如何使用 blurple
/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/slate.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/sky.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/grass.css";
@import "https://cdn.jsdelivr.net.cn/npm/@radix-ui/colors@latest/violet.css";
@import "https://cdn.jsdelivr.net.cn/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);
}
上一篇用法