캥거루 스킨은 자유로운 커스텀이 가능하도록 제작했다. 가이드에 따라 일관성을 유지하며 스타일 변경할 수 있다.
토큰
디자인에 사용한 값을 변수로 저장해 사용한다. 토큰 값을 변경해 스타일을 일괄 적용할 수 있다.
:root{
--white:#ffffff;
--grey-50:#fbfbfb;
--grey-100:#f7f7f7;
--grey-200:#f1f1f1;
...
--icon-size:24px;
--btn-min-w:24px
}자세한 내용은 github에서 확인할 수 있다.
로고
- 제작: PHW
- png, ico 파일: dev-roo/logo
로고는 스킨과 연관된 경우에만 사용을 허용한다.
- 캥거루 스킨 소개 글
- 캥거루 스킨이 적용된 개인 블로그
- 캥거루 스킨을 이용한 2차 저작물 등
색상
netural
--grey-50
--grey-100
--grey-200
--grey-300
--grey-400
--grey-500
--grey-600
--grey-700
--grey-800
--grey-900
--grey-dimmed-85
--grey-dimmed-70
--grey-dimmed-50
--grey-dimmed-20
--grey-dimmed-10
--grey-dimmed-05
symantic
--danger
--warning
--disabled
primary
초록(#065f46)
보라(#7621c0)
차가운 회색(#40575e)
파랑(#2147c4)
--primary-color
--primary-dimmed-70
--primary-dimmed-20
--primary-dimmed-10
primary-color를 추가할 때 배경 색과 대비 정도가 약 7.6:1인 색을 사용한다.
텍스트
크기
티스토리는 기본 본문을 16px로 사용한다. 따라서 캥거루 스킨도 16px을 기준으로 크기를 계산했다.
| --font-h1 | 3rem | 48px |
| --font-h2 | 2rem | 32px |
| --font-h3 | 1.5rem | 24px |
| --font-xl | 1.25rem | 20px |
| --font-lg | 1.125rem | 18px |
| --font-md | 1rem | 16px |
| --font-sm | 0.875rem | 14px |
| --font-xs | 0.75rem | 12px |
색상
텍스트 색상은 #252525를 기본으로 하며, 계층에 따라 색상을 다르게 표현한다.
| --text-color | #252525 |
| --text-light | #474747 |
| --text-lighter | #666666 |
링크는 primary-color를 기본으로 한다. hover의 경우, underline을 적용해 상호 작용 가능한 요소임을 보여준다.
색상에 따른 대비 정도는 다음과 같다. 모두 접근성 기준인 WCGA Level AA를 만족한다.
| --white | --grey-100 | |
| --text-color | 15.23 | 14.30 |
| --text-light | 9.29 | 8.67 |
| --text-lighter | 5.74 | 5.35 |
| --primary-color (파랑) | 7.60 | 7.09 |
| --primary-color (초록) | 7.68 | 7.17 |
| --primary-color (보라) | 7.63 | 7.13 |
| --primary-color (차가운 회색) | 7.65 | 7.14 |
폰트
폰트는 sans-serif를 기본으로 한다.
:root {
--font-sans: -apple-system, BlinkMacSystemFont, Pretendard-Regular, "Nanum Gothic", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}굵기
굵기는 medium과 bold 두 종류를 사용한다.
| --font-medium | 400 |
| --font-bold | 700 |
버튼
| foreground | background | hover | |
| 기본 | --text-color (default) | --bg-btn | --bg-hover |
| disabled | --fg-btn-dark | --disabled | |
| abled, 강조 | --fg-btn-dark | --bg-btn-dark | --bg-btn-dark-hover |
그 외 버튼과 관련된 일반 속성은 다음와 같으며, 상황에 따라 변형해 사용할 수 있다.
- 폰트 크기: --font-sm
- 모서리 곡률: --radius-sm
- 내부 여백: --btn-padding
- 최소 넓이: --btn-min-w
예시:
일반
disabled
abled
아이콘
- 상호작용이 가능한 아이콘은 --icon-size 크기를 가진다.
- 상호작용을 하지 않는 아이콘은 주변 텍스트와 유사한 스타일을 적용한다.
- 외부 아이콘은 material-icons-outlined를 사용한다.