색상 투명도 수정자

색상 투명도 수정자 (Color Opacity Modifier)

color-mix를 활용해서 색상이나 색상 토큰의 투명도를 동적으로 설정하는 방법을 알려드려요. 색상에 투명도를 간편하게 입히고 싶을 때 아주 유용해요.

출처: 문서

본문

색상과 관련된 모든 style property는 color-mix 단축 문법을 사용해서 색상에 투명도를 적용할 수 있어요.

문법

일반적인 문법은 {color}/{opacity}예요. 예를 들어 bg="red.300/40"처럼 쓸 수 있어요.

사용법

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

이렇게 하면 다음과 같은 결과가 생성돼요.

.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 변수에서도 사용할 수 있어요. 컴포넌트 안에서 일회성으로 쓸 색상 토큰을 만들 때 유용해요.

이 기능을 사용하려면 토큰 참조 문법 {}가 필요해요.

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

더 알아보기 (Learn more)

• CSS 변수
• Style Props