@imwebme/oms-token

소개

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

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

??

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

공지

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

시뮬레이션

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

현재 @imwebme/token@0.2.13버전에서는 다크모드와 라이트 모드 모두 지원하게 제작되어있습니다. 피그마에서 시멘틱-라이트-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',
  },
});