소개

@imwebme/token은 아임웹의 피그마에서 디자인한 디자인 시스템을 토큰화해 손쉽게 가져와서 사용할 수 있도록 여러 설정들로 내보냅니다.

현재 token은 아임웹 foundation을 기본으로 지원합니다.

??

사용하는데 불편했던점 dark-semantic-* 토큰을 나눌 필요가없었다. 모두 css 변수로 받다보니까 이 토큰은 진짜 특정생상으 토큰이면 됐었다.

공지

피그마에 토큰은 엔지니어의 구조대로 변경하지 않을 예정입니다. 토큰 프로젝트에 token안쪽에 token-studio json설정들이있습니다. 엔지니어는 이 값을 수정하고 모든 설정들에 맞추게될겁니다.

시뮬레이션

1. 피그마 디자인 토큰변경
2. 피그마에서 토큰 스튜디오 열기
3. 토큰스튜디오에서 변경된 토큰을 수동으로 변경해준다.
4. export하기 export할때 모든 토큰 내보내기하면됩니다.
5. 새로운 토큰작업시작 (이부분은 자동화가능)
6. tailwindcss 토큰 업데이트
7. stitches 토큰 업데이트
8. object 토큰 업데이트
9. css 토큰 추가하기 (추가했다가 자동화가 안되어서 제거했습니다.) (feature)
10. 새로운버전의 토큰을 가져와서 사용하기

현재 @imwebme/[email protected]버전에서는 다크모드와 라이트 모드 모두 지원하게 제작되어있습니다. 피그마에서 시멘틱-라이트-text-sub 시멘틱-다크-text-sub 둘다 이름만 라이트, 다크이고 모드에 상관없이 사용가능합니다.

tailwindcss로 예제 (진행예정)

디자인상 색상이 semantic/dark/text-sub이라면 <button class="text-semantic-dark-text-sub">버튼</button> 위처럼 사용하시면됩니다.

추가 개발할때 좀더 편리하게 작업하기위해서 저 네이밍을 alias 추가하겠습니다.

<button class="text-semantic-dark-text-sub">버튼</button>
<button class="text-sd-text-sub">버튼</button> << alias
<button class="text-s6c-text-sub">버튼</button> << alias
<button class="bg-semantic-dark-text-sub">버튼</button>
<button class="bg-sd-text-sub">버튼</button> << alias
<button class="bg-s6c-text-sub">버튼</button> << alias
<button class="border-semantic-dark-text-sub">버튼</button>
<button class="border-sd-text-sub">버튼</button> << alias
<button class="border-s6c-text-sub">버튼</button> << alias

피그마

• 피그마에서 token-studio 플러그인 실행
• token-studio에서 new set 이름은 semantic
• styles > import styles, all import
• tools > Export to file/folder > export
  • 설정을 건드리지 않습니다.
• token.json을 lib/tailwindcss/tokens/semantic.json으로 가져갑니다.
• 🏁 Semantic 객체 key를 제거

토큰 빌드

yarn build-sd

object token

import token from '@imwebme/token'

token.core['im-blue'][500]
// #1A6DFF

tailwindcss에서 아임웹 token 추가

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [require('@imwebme/token/tailwindcss')],
}

Inspired by tailwindcss-animate

아임웹 토큰 stitches 사용하기

import { styled } from '@imwebme/token/stitches'

const Button = styled('button', {
  backgroundColor: '$core-im-blue-500',
  borderRadius: '9999px',
  fontSize: '13px',
  padding: '10px 15px',
  '&:hover': {
    backgroundColor: 'lightgray',
  },
});