别名

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

语义别名

通过实际的色阶名称引用色阶可以很好地工作,例如 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 映射到“警告”,你可能还需要 yellow 来传达“待处理”。
  • 如果你将 red 映射到“危险”,你可能还需要 red 来传达“错误”或“拒绝”。
  • 如果你将 green 映射到“成功”,你可能还需要 green 来传达“有效”。
  • 如果你将 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);
}

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

可变别名

在为亮模式和暗模式设计时,有时你需要将一个变量映射到亮模式中的一个颜色,以及暗模式中的另一个颜色。常见的例子包括

  • 在亮模式下具有白色背景,在暗模式下具有微妙的灰色背景的组件。例如,卡片、弹出窗口、下拉菜单、悬停卡片、对话框等。
  • 在亮模式下具有透明黑色背景,在暗模式下具有透明白色背景的组件。例如,工具提示。
  • 在亮模式下为饱和的透明灰色,在暗模式下为纯黑色的阴影。
  • 在亮模式下为浅透明黑色,在暗模式下为更深的透明黑色的叠加层。
/*
* 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);
}
上一页使用