addOpacity

addOpacity는 테마 팔레트에 투명도를 조절합니다.

Introduce

테마 팔레트에 투명도를 조절할 때 사용합니다.

import { addOpacity, css } from '@montage-ui/core';

import type { Theme } from '@montage-ui/core';

export const exampleStyle = (theme: Theme) => css`
  background-color: ${addOpacity(
    theme.semantic.foreground.neutral.primary,
    theme.opacity[12],
  )};
`;

위 코드는 아래와 같이 렌더링 됩니다.

.montage-exampleStyle1 {
  background-color: rgba(var(--semantic-foreground-neutral-primary-rgb), var(--opacity-12));
}

Custom color

Custom Hex 색상에도 사용할 수 있습니다.

import { addOpacity, css } from '@montage-ui/core';

import type { Theme } from '@montage-ui/core';

export const exampleStyle = (theme: Theme) => css`
  background-color: ${addOpacity('#000000', theme.opacity[12])};
`;

위 코드는 아래와 같이 렌더링 됩니다.

.montage-exampleStyle1 {
  background-color: rgba(0, 0, 0, var(--opacity-12));
}