디자인 시스템 색상, 폰트 토큰

theme.css.ts

import { createGlobalTheme } from "@vanilla-extract/css";

// 색상 토큰
export const ColorVar = createGlobalTheme(":root", {
  white: "#fff",
  transparent: "transparent",
  green: "#00CD0E",
  yellow: "#FFD000",
  red: "#D90000",
  grey: {
    1: "#EBEBEB",
    2: "#DADADA",
    // .. 중략
    10: "#121212",
  },
  greyBlue: {
   // 1 ~ 10 생략
  },
  blue: {
    light: {
   // 1 ~ 10 생략
    },
    dark: {
    // 1 ~ 10 생략
    },
  },
});
export const Color = createGlobalTheme(":root", {
  bg: ColorVar.grey[10],
  success: ColorVar.green,
  warning: ColorVar.yellow,
  critical: ColorVar.red,
  primary: {
    default: ColorVar.white,
    hover: ColorVar.greyBlue[1],
    active: ColorVar.greyBlue[2],
    disabled: ColorVar.greyBlue[9],
  },
  secondary: {
    //... 생략
  },
  accent: {
    //... 생략
  },
  outline: {
    //... 생략
  },
  text: {
    default: ColorVar.white,
    sub: ColorVar.grey[6],
    light: ColorVar.grey[3],
    inverse: ColorVar.grey[10],
    disabled: ColorVar.grey[7],
  },
  border: ColorVar.greyBlue[6],
});
  

typograph.css.ts

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",
});

// Font Size
export const FontSizeVar = createGlobalTheme(":root", {
  "2xsmall": "10px",
  xsmall: "11px",
  small: "12px",
  medium: "14px",
  // ..생략
});
// Line Height
export const LineHeightVar = createGlobalTheme(":root", {
  "2xsmall": "13px",
  xsmall: "14px",
  // ..중략
  heading2xlarge: "44px",
  heading3xlarge: "50px",
});

const sprinkles = defineProperties({
  properties: {
    text: {
      "2xsmall": {
        fontSize: FontSizeVar["2xsmall"],
        lineHeight: LineHeightVar["2xsmall"],
        fontWeight: FontWeight.regular,
      },
      xsmall: {
        fontSize: FontSizeVar.xsmall,
        lineHeight: LineHeightVar.xsmall,
        fontWeight: FontWeight.regular,
      },
      // 이하 
  },
});

export const textSprinkles = createSprinkles(sprinkles);