색상 함수

색상 함수 (Color functions)

@mantine/core 패키지는 CSS 값으로 사용하기 전에 색상을 조작하거나 정보를 추출할 수 있는 여러 함수를 내보내요.

출처: 문서

본문

darken과 lighten

darken과 lighten 함수는 색상의 밝기를 조작하는 데 사용해요. 첫 번째 인자로 어떤 형식의 색상이든 받고, 두 번째 인자로 더하거나 뺄 밝기(lightness)의 양을 받아요.

import { darken, lighten } from '@mantine/core';

lighten('#228BE6', 0.1); // 10% 밝게
// -> rgba(56, 151, 233, 1)

darken('rgb(245, 159, 0)', 0.5); // 50% 어둡게
// -> rgba(123, 80, 0, 1)

darken('rgba(245, 159, 0, .3)', 0.5); // 50% 어둡게
// -> rgba(123, 80, 0, 1, .3)

lighten('var(--mantine-color-gray-4)', 0.74);
// -> color-mix(in srgb, var(--mantine-color-gray-4), white 74%)

alpha

alpha 함수는 주어진 alpha 채널로 색상을 rgba 형식으로 변환해요. 보통 색상을 더 투명하게 만들 때 사용해요. 색상을 rgba 형식으로 변환할 수 없으면(예: CSS 변수인 경우) color-mix를 사용해요. color-mix는 일부 구형 브라우저에서는 지원되지 않으니 caniuse에서 자세한 정보를 확인할 수 있어요.

import { alpha } from '@mantine/core';

alpha('#4578FC', 0.45); // -> rgba(69, 120, 252, 0.45)
alpha('var(--mantine-color-gray-4)', 0.74);
// -> color-mix(in srgb, var(--mantine-color-gray-4), transparent 26%)

parseThemeColor

parseThemeColor 함수는 주어진 색상에 대한 정보를 다음 형식으로 반환해요:

interface ParseThemeColorResult {
  /**
   * 주어진 색상이 테마 색상이면 true예요. 예를 들어,
   * `blue`, `orange.9`, `pink.3`은 테마 색상이지만
   * `#fff`, `rgba(0, 0, 0, .5)`는 아니에요
   */
  isThemeColor: boolean;

  /**
   * 주어진 색상이 테마 색상이면 `theme.colors`의 키예요. 예를 들어,
   * 주어진 색상이 `blue`면 `blue`,
   * 주어진 색상이 `orange.9`면 `orange`
   */
  color: string;

  /**
   * 해석된 색상 값이에요. 예를 들어,
   * 주어진 색상이 `blue.7`이면 `theme.colors.blue[7]`의 값이고,
   * 주어진 색상이 `#fff`면 `#fff`
   */
  value: string;

  /**
   * 주어진 색상이 테마 색상이면 그것의 shade 값이에요.
   * 예를 들어 주어진 색상이 `blue.7`이면 `7`.
   * 주어진 색상에 인덱스가 없거나 테마 색상이 아니라면 `undefined`
   */
  shade: MantineColorShade | undefined;

  /**
   * 색상 CSS 변수예요. 예를 들어:
   * `blue.7` – `--mantine-color-blue-7`,
   * `red` – `--mantine-color-red-filled`,
   * `white` – `--mantine-color-white`,
   * `#fff` – `undefined`
   */
  variable: CssVariable | undefined;
}

parseThemeColor 함수는 theme 객체를 사용할 수 있는 곳이라면 어디서든 사용할 수 있어요. 예를 들어 CSS variables resolver, variant color resolver, 또는 컴포넌트 본문에서요:

import {
  MantineColor,
  parseThemeColor,
  useMantineTheme,
} from '@mantine/core';

interface DemoProps {
  color: MantineColor;
}

function Demo({ color }: DemoProps) {
  const theme = useMantineTheme();
  const parsedColor = parseThemeColor({ color, theme });

  return <Box style={{ color: parsedColor.value }} />;
}

getThemeColor

getThemeColor는 parseThemeColor 함수의 더 간단한 버전이에요. 첫 번째 인자로 색상 문자열을, 두 번째 인자로 theme 객체를 받아요. 파싱된 색상 값이나 CSS 변수를 반환해요:

import { getThemeColor, useMantineTheme } from '@mantine/core';

function Demo() {
  const theme = useMantineTheme();

  getThemeColor('blue', theme); // -> var(--mantine-color-blue-filled)
  getThemeColor('blue.7', theme); // -> var(--mantine-color-blue-7)
  getThemeColor('white', theme); // -> var(--mantine-color-white)
  getThemeColor('#DF78E4', theme); // -> #DF78E4
}

getGradient

getGradient 함수는 주어진 MantineGradient 객체를 CSS 그라디언트 문자열로 변환해요:

import { getGradient, useMantineTheme } from '@mantine/core';

function Demo() {
  const theme = useMantineTheme();

  getGradient({ deg: 180, from: 'blue', to: 'cyan.7' }, theme);
  // -> `linear-gradient(180deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-7) 100%)`
}

isLightColor

isLightColor 함수는 텍스트와 배경 사이의 대비(contrast)를 더 좋게 만드는 데 사용할 수 있어요:

import { Box, isLightColor } from '@mantine/core';

interface DemoProps {
  color: string;
}

export function Demo({ color }: DemoProps) {
  return (
    <Box
      style={{
        backgroundColor: color,
        color: isLightColor(color) ? 'var(--mantine-color-black)' : 'white',
      }}
    >
      Box with contrast text
    </Box>
  );
}

luminance

luminance 함수는 색상의 휘도(luminance)를 반환해요. 색상 대비를 확인하는 데 사용할 수 있어요:

import { luminance } from '@mantine/core';

luminance('#fff'); // -> 1
luminance('#000'); // -> 0
luminance('#4578FC'); // -> 0.21726425554966