프로필 페이지 만들기 (2) - 디자인 토큰 적용

 

저번에 진행했던 토이프로젝트2의 디자인 토큰을 참고하여 디자인 토큰을 적용하려 한다.

https://github.com/daangn/seed-design/tree/main/packages/design-token

seed-design/packages/design-token at main · daangn/seed-design

 

위 홈페이지의 당큰마켓의 디자인 토큰을 참고하였다.

 

실제사용 예시는 다음과 같다.

import { vars } from "@seed-design/design-token";

// 시맨틱 토큰
vars.$semantic.color.primary;

// 스케일 토큰
vars.$scale.color.carrot500;

// 스태틱(단일 스케일) 토큰
vars.$static.color.carrot500;

 

파일 구조

설계한 파일 구조는 다음과 같다. 

 

colorRawValue에서는 아래 사진과 같이 색상(value)에 대한 key를 지정하였다.

 

아래 사진은 작성한 스타일 가이드이다.

https://divmagic.com/ko/tools/color-converter

 위의 홈페이지를 통해 값을 얻었다.

어차피 모든 값을 사용하지는 않기 때문에 primay, secondary등에 대한 색만 대입하여 값을 저장하면 된다

색상 변환기 [무료 도구]

 

 

colors에서는 해당 키 값을 이용해 primary, secondary 등을 정의한다.

import { raw } from './colorRawValue';

const scale = {
  primary: {
    s50: raw.teal.r50,
    s100: raw.teal.r100,
    s200: raw.teal.r200,
    s300: raw.teal.r300,
    s400: raw.teal.r400,
    s500: raw.teal.r500,
    s600: raw.teal.r600,
    s700: raw.teal.r700,
    s800: raw.teal.r800,
    s900: raw.teal.r900,
    s950: raw.teal.r950,
  },
  //...
  
  const semantic = {
      primary: scale.primary.s600,
      secondary: scale.secondary.s600,
      success: scale.success.s600,
      danger: scale.danger.s600,
      warning: scale.warning.s600,
  //...

 

그리고 token안의 index.ts에서 반환한 값을 다시 styles.ts에서 반환한다.

export { colors } from './colors';
export { font } from './font';

 

이를 통해 실제 사용할 때는 

import { colors } from '@/styles';
import styled from 'styled-components';

const S = {
  HeaderBar: styled.div`
    width:100%;
    height: 20vh;
    background-color: ${colors.semantic.background.dark};
  `
}

 

다음과 같이 사용할 수 있다.

 

 

* 주의사항 

index.css를 최상위 디렉토리가 아님에 주의하라

따라서 사용하는 파일에서 바꿔줘야하고, 

아래 코드로 수정해서 import해야 한다.

// index.css
@import url(./css/reset.css);
@import url(./css/form.css);