Socket
Socket
Sign inDemoInstall

@29cm/design-token

Package Overview
Dependencies
0
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@29cm/design-token


Version published
Maintainers
1
Created

Readme

Source

@29cm/design-token

토큰은 디자인 의사결정을 담은 디자인 언어입니다 확장 가능하고 일관된 시각적 시스템을 유지하기 위해 하드 코딩된 값 대신 사용합니다

디자인 토큰은 여러 디자인 도구, 개발환경 간에 디자인 시스템의 최소 단위를 공유할 수 있도록 표준을 제공하는 것을 목표로 합니다. 29CM의 디자인 언어이자, 스타일 집합입니다. 더 이상 그리지마세요.

@29cm/stylesheet 에서 정의된 raw value들을 typescript 환경에서 바로 사용가능하도록 합니다.

토큰 구조

  • scale token
    scale token은 raw value 하나에 이름을 부여한 것 입니다. scale의 이름을 통해 전체 디자인에 사용되는 모든 값을 유한하게 유지할 수 있습니다.
  • static scale token
    static scale token은 모든 theme에서 일관된 색상, 크기를 가집니다
  • semantic token
    semantic token은 scale token의 조합(Composition)으로 구체적인 디자인 의도를 표현한 단위입니다. 실제 디자인과 개발과정에서 주요 빌딩 블록에 사용됩니다

설치법

ruler를 사용하고자 하는 프로젝트에서 패키지를 설치해주세요. 우리는 yarn을 사용합니다. @29cm/stylesheet도 반드시 설치해줘야해요.

yarn add @29cm/stylesheet @29cm/design-token

사용법

import { vars } from '@29cm/design-token';

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

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

// 스태틱 스케일 토큰
vars.$staticScale.color.staticScaleBlackAlpha500;

FAQs

Last updated on 17 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc