Asharyu-design-token

디자인 토큰

Install

1.npm

npm i asharyu-design-token

2.yarn

yarn add asharyu-design-token

Usage

1. css

import 'asharyu-design-token/index.css';

2.js(ts)

import Token from 'asharyu-design-token';

Concept

;

철학적인 요소를 결합해서 CSS 디자인 시스템을 HTML 처럼 시맨틱하게 할 수 없을까? 라는 발상으로 컨셉을 잡고 시작한 프로젝트입니다. 음양오행설을 베이스로 삼고 어레인지해서 컨셉을 잡습니다.
오행 정색과 간색의 기본색을 정의하고 기본 베이스로 삼았습니다. 음양을 상징하는 흑백(동,서)의 경우 1단계씩 나머지 3정색은 2단계 또 간색은 1단계씩 색상의 단계를 정의하여서 0,1,2,3,4(0의 경우 무시) 5단계로 색상을 정의하였습니다.
오행 정색과 간색의 경우 색상에 대한 정의가 제각각인 점이 있어서 편의적으로 규정한 부분이 있습니다. 실제 철학적인 색상과 100% 일치하지 않습니다.
음양을 기반으로한 심플한 스타일의 디자인 테마와 오행을 기반으로 각 5원소와 그 5원소간의 상극 과정에서 도출되는 간색의 위계와 조화를 통해서 이론적으로 색의 조합과 그 색을 통한 문서의 철학적인(직관) 표현을 유도하는 것이 기본 컨셉입니다.

심플한 스타일의 음양 테마와 화려하면서도 정갈한 오행의 시맨틱한 디자인을 표현하는 것을 디자인 시스템의 컨셉으로 삼았습니다.
해당 프로젝트는 디자인 감각에 의존하지 않아도 되는 시맨틱 CSS를 추구합니다.

Token Structure

core 토큰 구성요소 label, scale, type, category는 4가지.

$red-1: label-scale;
$color-red-1: type-label-scale;
$light-color-red-1:category-type-label-scale;

기본이 되는 value schema와 sementic layer가 존재한다.
토큰은 css와 js(타입스크립트 지원) 두가지 구조로 구성 되어있다. css의 경우 CSS var로 제공된다.

:root {
  --color-yinyang-yin: #000000;
  --color-yinyang-yin-1: #111111;
  --color-yinyang-yin-2: #222222;
  --color-yinyang-yin-3: #333333;
  --color-yinyang-yin-4: #444444;
  --color-yinyang-yang: #ffffff;
  --color-yinyang-yang-1: #eeeeee;
  --color-yinyang-yang-2: #dddddd;
  --color-yinyang-yang-3: #cccccc;
  --color-yinyang-yang-4: #bbbbbb;
  --color-fiveelements-wood: #0000ff;
  --color-fiveelements-wood-1: #0000dd;
  --color-fiveelements-wood-2: #0000bb;
  --color-fiveelements-wood-3: #000099;
  --color-fiveelements-wood-4: #000077;
  --color-fiveelements-fire: #ff0000;
  --color-fiveelements-fire-1: #dd0000;
  --color-fiveelements-fire-2: #bb0000;
  --color-fiveelements-fire-3: #990000;
  --color-fiveelements-fire-4: #770000;
  --color-fiveelements-earth: #ffff00;
  --color-fiveelements-earth-1: #dddd00;
  --color-fiveelements-earth-2: #bbbb00;
  --color-fiveelements-earth-3: #999900;
  --color-fiveelements-earth-4: #777700;
  --color-fiveelements-metal: #ffffff;
  --color-fiveelements-metal-1: #eeeeee;
  --color-fiveelements-metal-2: #dddddd;
  --color-fiveelements-metal-3: #cccccc;
  --color-fiveelements-metal-4: #bbbbbb;
  --color-fiveelements-water: #000000;
  --color-fiveelements-water-1: #111111;
  --color-fiveelements-water-2: #222222;
  --color-fiveelements-water-3: #333333;
  --color-fiveelements-water-4: #444444;
  ......
}

License

This project is licensed under the Apache 2.0 License.