enerdot-front-system
v0.1.0-beta.12
Published
enerdot frontend system
Readme
Enerdot Frontend System
에너닷에서 공용으로 사용하는 디자인 시스템 컴포넌트, theme 등을 라이브러리로 제공합니다.
사용 라이브러리
- react
- react-dom
- scss
- moment
- korean-regexp
배포 요소
- color theme
- buttons
- inputs
- textarea
- checkbox and radio button
- button filter
- dropdown
- chip
- pagination
- datePicker
- tab
Docs
다크모드 색상 추가 (0.1.0 배포 예정)
SCSS 변수 파일 생성
yarn generate:variables위 명령어 실행 시 src/lib/theme/color.style.ts → src/lib/styles/_variables.scss 파일이 자동 생성됩니다.
새로운 색상 추가 방법:
themeColors,ThemeColors에 hex 값과 신규 타입만 추가하면 됩니다.
커스텀 색상 적용
특정 CSS 모듈 selector에서 커스텀 색상을 사용하고자 할 때:
예시: .primary selector에서 dark 모드일 때 green300을 사용하려면
.primary {
:global(:root[data-theme="dark"]) & {
--color-background-primary: #{$green300};
}
}프로젝트에서 사용할 때
1. 테마 변수 import
- 최상단 SCSS 파일에 아래 import를 추가합니다.
@import "enerdot-front-system/src/theme"; -> (data-theme 관련 css vars)
@import "enerdot-front-system/style.css"; -> style.css를 import (SSR에서 초기 렌더링되는 CSS에 문제가 발생하여 빌드타임에 CSS를 export하도록 변경했습니다.)- next.config.js 파일
module.exports = {
sassOptions: {
includePaths: [
...
path.join(__dirname, "node_modules"),
],
prependData: `@import "enerdot-front-system/src/lib/styles/_variables";`,
},
};- React Server Components(RSC)에서는 enerdot-front-system/server에서 import 해주세요.
2. htlm 태그에 테마 설정
-data-theme 추가
<html lang="ko" data-theme="dark">