[vanilla-extract] sprinkles 적용하는 방법

디자인 시스템에서 공통 컴포넌트를 개발하면서 불편한 점이 하나 있었다.

바로 매번 font-size, font-weight, lint-height 속성을 적어주는 것이었다. 

먼저 피그마에서 이를 토큰화하였고, vanilla-extract의 sprinkles를 이용하여 간편하게 코드에 적용하고자 했다.

 

import { createGlobalTheme } from "@vanilla-extract/css";
import { createSprinkles, defineProperties } from "@vanilla-extract/sprinkles";

// text 토큰
export const FontWeight = createGlobalTheme(":root", {
  regular: "400",
  medium: "500",
  semibold: "600",
  bold: "700",
  extrabold: "800",
});

const sprinkles = defineProperties({
  properties: {
    text: {
      "2xsmall": {
        fontSize: "10px",
        lineHeight: "12px",
        fontWeight: FontWeight.regular,
      },
      
        // ... 중략
      "2xlargeBold": {
        fontSize: "20px",
        lineHeight: "24px",
        fontWeight: FontWeight.semibold,
      },
    },
    heading: {
      medium: {
        fontSize: "24px",
        lineHeight: "29px",
        fontWeight: FontWeight.bold,
      },
		// ...중략
      "3xlarge": {
        fontSize: "40px",
        lineHeight: "48px",
        fontWeight: FontWeight.bold,
      },
    },
  },
});

export const textSprinkles = createSprinkles(sprinkles);

 

style () 에서 적용하기

export const description = style([
  {
    color: Color.text.light,
  },
  textSprinkles({
    text: "small",
  }),
]);

기존에 중괄호로 작성했던 코드 밖에 sprinkles를 추가해주고 대괄호로 감싸주자

 

const base = style([
  spacingSprinkles({
    placeItems: "flexCenter",
  }),
  textSprinkles({
    text: "mediumBold",
  }),
  {
    borderRadius: "8px",
    gap: "4px",
    ...
  },
]);

여러 개의 sprinkles도 적용 가능하다

recipe() 에서 적용하기

export const common = recipe({
  base: [
    {
      display: "flex",
      alignItems: "center",
      borderRadius: "8px",
      padding: "8px 12px",

    },
    textSprinkles({
      text: "medium",
    }),
  ],
  variants: {
    disabled: {
      true: {},
    },
  },
  compoundVariants: [
    // 생략
  ],
});

마찬가지로, 기존에 중괄호로 작성한 base 를 대괄호로 감싸주고, 내부에 sprinkles를 추가한다.