¥Aliasing
颜色语义别名指南。
¥Semantic aliases
使用实际的色阶名称引用色阶效果会更好,例如 blue
和 red
。但通常情况下,创建语义别名(例如 accent
、primary
、neutral
或 brand
)会很有帮助,尤其是在主题设置方面。
¥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.
使用这种方法,你可能会遇到需要对多种语义使用相同比例的问题。常见示例包括:
¥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.
或者,你可以简单地建议你的队友在缺少合适的语义别名的情况下,使用原始的比例名称。
¥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.
同样,使用这种方法,你可能会遇到需要在多个用例中使用相同步骤的问题。常见示例包括:
¥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.
或者,你可以简单地建议你的队友在用例没有别名的情况下,使用原始的步长编号。
¥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.
避免使用像 "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.
将 sky
或 grass
重命名为 blue
或 green
,以保持命名直观。
¥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
.