[Feature] 커스텀 스타일을 위한 ClassName 규칙 생성

[yondo123]

Class Rules

1. 모든 클래스는 j-패키지명__요소로 구성 됩니다.
2. 디자인시스템에 적용되어있는 모든 컴포넌트 요소에 적용이 되어야 합니다.
3. HTML 요소 역할에 맞게 적용 필요.
4. 사용되는 요소 클래스는 아래와 같습니다.
   만일 필요로하는 기능이 있다면 theme/src/types/cssVariants.ts에 추가가 필요합니다.
   • overlay: 오버레이
   • wrapper: 최상위 요소를 감싸주는 역할
   • content: 컴포넌트 단위의 요소를 감싸주는 역할
   • label: html 라벨 역할
   • ul: 순서가 중요하지 않은 리스트
   • ol: 순서가 중요한 리스트
   • item: 리스트의 아이템
   • footer: footer 역할
   • header: header 역할
   • trigger: event trigger 역할
   • message: 단문의 정보를 나타내는 요소
   • article: 장문의 정보를 나타내는 요소
   • button: 버튼
   • input: input 역할
5. 필요에 따라 요소 접미사 앞에 수식어구를 붙일 수 있습니다. (의미에 맞게 적용)
   • ex) 드롭다운 → 중첩 구조로되어있을 때 sub를 명시한다.

Example

<ul className="j-dropdown__ul">
	...
	<ul className="j-dropdown__sub-ul">..</ul>
</ul>
<input type="text" j-select__input />
<input type="password" j-select__input-password />

Work

• css 변수 생성을 위한 createClassVariant 함수를 생성한다.
• box
• checkbox
• flex
• modal
• tabs
• tooltip
• button
• drawer
• select
• popover
• textarea
• card
• dopdown
• input
• radio
• stack