颜色不透明度修改器

每个与颜色相关的样式属性都可以使用 color-mix 快捷键将不透明度应用于颜色。

¥Every color related style property can use the color-mix shortcut to apply opacity to a color.

语法

¥Syntax

通用语法是 {color}/{opacity}。例如：bg="red.300/40"。

¥The general syntax is {color}/{opacity}. For example: bg="red.300/40".

用法

¥Usage

<Text bg="red.300/40" color="white">
  Hello World
</Text>

这将生成类似以下内容：

¥This will generate something like this:

.css-sxdf {
  --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
  background: var(--mix-background, var(--colors-red-300));
  color: var(--colors-white);
}

CSS 变量

¥CSS Variables

此功能也可以在 CSS 变量中使用。这对于在组件中创建一次性颜色标记非常有用。

¥This feature can be used in css variables as well. This is useful for creating one-off color token in a component.

此功能需要 token 引用语法 {}。

¥The token reference syntax {} is required for this to work.

<Box css={{ "--bg": "{colors.red.400/40}" }}>
  <Text>Hello World</Text>
  <Box bg="var(--bg)" />
</Box>