Chakra UI의 시맨틱 토큰 ⚛

Chakra UI v1.8.0은 시맨틱 토큰이라는 새로운 기능을 도입했습니다.
시맨틱 토큰을 사용하면 일반 디자인 토큰에 매핑되는 Chakra 소품에서 특정 이름을 가진 토큰을 사용할 수 있습니다. 예를 들어 "green.500"색상에 매핑되는 "성공"이라는 색상 시맨틱 토큰을 만들 수 있습니다.

const theme = extendTheme({
  semanticTokens: {
    colors: {
      success: "green.500"
    }
  }
});

이제 "성공"토큰을 Chakra 구성 요소에서 "green.500"에 대한 "별칭"으로 사용할 수 있습니다.

<Button bg="success">Accept</Button>

이는 우리에게 다음과 같은 결과를 줄 것입니다.

<Button bg="green.500">Accept</Button>

시맨틱 값

또 다른 멋진 기능은 현재 테마를 기반으로 다른 값으로 매핑하는 것입니다. 예를 들어 시맨틱 토큰 "error"를 밝은 테마에서는 "red.600"으로, 어두운 테마에서는 "red.300"으로 매핑할 수 있습니다.

const theme = extendTheme({
  semanticTokens: {
    colors: {
      error: {
        default: "red.600",
        _dark: "red.300"
      }
    }
  }
});

이것은 정말 유용하며 현재와 같이 useColorModeValue의 사용을 줄일 수 있습니다.

<Button bg={useColorModeValue('red.600', 'red.300')}>Retry</Button>

"오류"시맨틱 토큰을 간단히 사용할 수 있습니다.

<Button bg="error">Retry</Button>

가능한 시맨틱 토큰 필드

색상에 대한 시맨틱 토큰을 생성할 뿐만 아니라 Chakra UI의 모든 스케일(글꼴 크기, 테두리, 반지름, 크기 등)에 대한 시맨틱 토큰을 생성할 수도 있습니다. 전체 목록here 및 here을 참조하십시오.

다음 예에서는 그림자 및 반지름에 대한 시맨틱 토큰을 만듭니다.

const theme = extendTheme({
  semanticTokens: {
    shadows: {
      card: {
        default: "md",
        _dark: "none"
      }
    },
    radii: {
      card: "lg"
    }
  }
});

이제 새 토큰을 다음과 같이 사용할 수 있습니다.

<Box boxShadow="card" borderRadius="card">Card Content</Box>

다음은 이러한 시맨틱 토큰을 시연하는 Lazar Nikolov(Chakra UI 핵심 팀원)의 codesandbox 데모입니다.

다음 단계로 나아가기

위에서 배운 모든 것을 사용하여 차크라의 기본 색상과 유사한 변형(50-900)이 있는 시맨틱 토큰 기반 디자인 시스템을 만들 수 있습니다.
사용 가능한 색조(50-900)에 대한 배열을 만드는 것으로 시작합니다.

const availableColorTints = [
  '50',
  '100',
  '200',
  '300',
  '400',
  '500',
  '600',
  '700',
  '800',
  '900',
];

이제 시맨틱 토큰 -> 차크라 테마 색상의 맵을 생성해 보겠습니다.

const tokenToColorMap = {
  primary: 'blue',
  accent: 'teal',
  success: 'green',
  warning: 'orange',
  error: 'red',
  neutral: 'gray',
};

이제 tints 배열과 토큰 맵을 사용하여 테마의 색상 개체를 빌드하고 useColorModeValue 호출을 방지하는 데 도움이 되는 어둡고 밝은 테마에 대한 간단한 색상 반전 논리를 포함할 것입니다.
(primary.300은 어두운 테마의 경우 blue.300이 되고 밝은 테마의 경우 blue.600이 됩니다. 내 경험상 동일한 색상으로 두는 것보다 더 나은 결과를 제공합니다.)

const colors = Object.entries(tokenToColorMap).reduce((acc, [token, color]) => {
  availableColorTints.forEach((tint, index) => {
    acc[`${token}.${tint}`] = {
      default: `${color}.${availableColorTints[availableColorTints.length - 1 - index]}`,
      _dark: `${color}.${tint}`,
    };
  });
  return acc;
}, {});

이렇게 하면 런타임에 다음 색상 개체가 생성됩니다.

{
  primary.50: {
    default: "blue.900",
    _dark: "blue.50"
  },
  primary.100: {
    default: "blue.800",
    _dark: "blue.100"
  },
  primary.200: {
    default: "blue.700",
    _dark: "blue.200"
  },
  primary.300: {
    default: "blue.600",
    _dark: "blue.300"
  },
  primary.400: {
    default: "blue.500",
    _dark: "blue.400"
  },
  primary.500: {
    default: "blue.400",
    _dark: "blue.500"
  },
  primary.600: {
    default: "blue.300",
    _dark: "blue.600"
  },
  primary.700: {
    default: "blue.200",
    _dark: "blue.700"
  },
  primary.800: {
    default: "blue.100",
    _dark: "blue.800"
  },
  primary.900: {
    default: "blue.50",
    _dark: "blue.900"
  },
  accent.50: {
    default: "teal.900",
    _dark: "teal.50"
  },
  // etc.
}

이제 우리는 구성 요소에서 멋진 새 시맨틱 토큰을 사용할 수 있습니다.

<Button bg="primary.300" color="neutral.300">Ok</Button>
<Button bg="accent.400" color="neutral.400">Cancel</Button>
<Box bg="error.300" borderColor="error.400">Something went wrong</Box>

테마 파일 및 사용법의 전체 예는 my personal website's github page 에서 볼 수 있습니다.

요약

시맨틱 토큰이 무엇인지, 이점은 무엇인지, Chakra UI의 내장 토큰을 기반으로 하는 디자인 시스템을 구축할 때 이를 어떻게 활용할 수 있는지에 대해 논의했습니다.

읽어 주셔서 감사합니다! 🚀


시맨틱 토큰에 대한 자세한 내용은 Chakra UI's docs을 참조하십시오.