锯齿

¥Aliasing

颜色语义别名指南。

语义别名

¥Semantic aliases

使用实际的色阶名称引用色阶效果会更好,例如 bluered。但通常情况下,创建语义别名(例如 accentprimaryneutralbrand)会很有帮助,尤其是在主题设置方面。

¥Referencing color scales by their actual scale name can work well, like blue and red. But often, creating semantic aliases like accent, primary, neutral, or brand can be helpful, especially when it comes to theming.

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@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);
/* 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 */
}

使用这种方法,你可能会遇到需要对多种语义使用相同比例的问题。常见示例包括:

¥With this approach, you will likely run into issues where you need to use the same scale for multiple semantics. Common examples include:

  • 如果将 yellow 映射到 "warning",你可能还需要 yellow 来与 "pending" 通信。

    ¥If you map yellow to "warning", you might also need yellow to communicate "pending".

  • 如果将 red 映射到 "danger",你可能还需要 red 来与 "error" 或 "rejected" 通信。

    ¥If you map red to "danger", you might also need red to communicate "error" or "rejected".

  • 如果将 green 映射到 "success",你可能还需要 green 来与 "valid" 通信。

    ¥If you map green to "success", you might also need green to communicate "valid".

  • 如果将 blue 映射到 "accent",你可能还需要 blue 来与 "info" 通信。

    ¥If you map blue to "accent", you might also need blue to communicate "info".

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

¥In this scenario, you can choose to define multiple semantic aliases which map to the same scale.

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@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);
}

或者,你可以简单地建议你的队友在缺少合适的语义别名的情况下,使用原始的比例名称。

¥Or you can simply recommend that your teammates defer to the original scale name for situations where there is no appropriate semantic alias.

用例别名

¥Use case aliases

Radix Colors 比例中的每个步骤都是针对特定用例而设计的。为了帮助你的团队了解要使用哪个步骤,你可以根据设计的用例提供别名。

¥Each step in Radix Colors scales is designed for a specific use case. To help your team know which step to use, you can provide aliases based on the designed use cases.

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@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);
/* 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 */
}

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

¥Again, with this approach, you will likely run into issues where you need to use the same step for multiple use cases. Common examples include:

  • 步骤 9 专为纯色背景而设计,但也适用于输入占位符文本。

    ¥Step 9 is designed for solid backgrounds, but it also may work for input placeholder text.

  • 步骤 8 专为悬停的组件边框而设计,但也适用于焦点环。

    ¥Step 8 is designed for hovered component borders, but it also works well for focus rings.

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

¥In these cases, you can choose to define multiple aliases which map to the same step.

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@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);
}

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

¥Or you can simply recommend that your teammates defer to the original step number for situations where use cases don't have an alias.

可变别名

¥Mutable aliases

在同时设计亮色和暗色模式时,有时需要将变量映射到亮色模式下的一种颜色,以及暗色模式下的另一种颜色。常见示例包括:

¥When designing for both light and dark modes, you sometimes need to map a variable to one color in light mode, and another color in dark mode. Common examples include:

  • 组件在亮色模式下具有白色背景,在暗色模式下具有淡灰色背景。例如,卡片、弹出窗口、下拉菜单、悬停卡片、对话框等。

    ¥Components that have a white background in light mode and a subtle gray background in dark mode. For example, Card, Popover, DropdownMenu, HoverCard, Dialog etc.

  • 组件在亮模式下具有透明黑色背景,在夜间模式下具有透明白色背景。例如,工具提示。

    ¥Components that have a transparent black background in light mode and a transparent white background in dark mode. For example, Tooltip.

  • 阴影颜色为饱和色,浅色模式下为透明灰色,夜间模式下为纯黑色。

    ¥Shadows that are saturated, transparent gray in light mode, and pure black in dark mode.

  • 在亮模式下为浅色透明黑色的叠加层,在夜间模式下为深色透明黑色的叠加层。

    ¥An overlay that is light transparent black in light mode, and a darker transparent black in dark mode.

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@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 {
/* Remap your colors for dark mode */
--panel: var(--slate-2);
--panel-contrast: var(--white-a9);
--shadow: black;
--overlay: var(--black-a11);
}

避免使用像 "CardBg" 或 "工具提示" 这样特定的变量名,因为你可能需要在多个用例中使用每个变量。

¥Avoid using specific variable names like "CardBg", or "Tooltip", because you will likely need to use each variable for multiple use cases.

重命名比例

¥Renaming scales

如果你愿意,可以重命名比例。原因可能包括:

¥If you wish, you can rename scales. Reasons might include:

  • 将饱和灰色重命名为 gray,以简化操作。

    ¥Rename a saturated gray to gray to keep things simple.

  • skygrass 重命名为 bluegreen,以保持命名直观。

    ¥Rename sky or grass to blue or green to keep the naming intuitive.

  • 重命名比例以匹配你的品牌,例如 Discord 使用 blurple 的方式。

    ¥Rename a scale to match your brand, like how Discord use blurple.

/*
* Note: Importing from the CDN in production is not recommended.
* It's intended for prototyping only.
*/
@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);
}