이 문서는 themes/(0000-0000-0000-0001)/assets/css/core/theme-vars.css와 그 하위 모듈을 실제 렌더링 관점에서 읽는 검증 페이지다.
아래 내용은 디자인을 설명하는 메모가 아니라, 프런트엔드에서 어떤 토큰이 어떤 결과를 내는지 확인하기 위한 실물 예시다.
- 전체 변수 수: 942개
- 모듈 수: 8개
- 읽는 방식: 위에서 아래로가 아니라 기초 → 타입 → 모양 → 컴포넌트 → 색상 → 언어 순으로 점검
design probe
중앙 소스는 `theme-vars.css`이며, 이 페이지는 구조 확인용 안내문이다.
중앙 제어 파일
`themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/`
이 파일만 수정하면 전역 톤/간격/타이포/상태값이 함께 바뀌도록 설계되어 있다.
해석 기준
• 색상, 간격, 반경, 그림자, 상호작용 상태는 모두 토큰으로 관리한다.
• 컴포넌트 CSS는 고정 수치보다 토큰을 우선 사용한다.
• 레거시 디자인 경로는 사용하지 않는다.
모듈 요약
| 모듈 | 변수 수 | 확인 포인트 |
|---|---|---|
00-foundation |
26 | 페이지 폭, 여백, 반응형 기준, 기본 간격의 뼈대 |
10-typography |
114 | 서체, 문자 방향, line-height, font weight, locale별 글꼴 |
20-shape |
32 | 반경, 테두리, 컨트롤 사이즈, 그림자, z-index |
30-components |
317 | 버튼, CTA, 카드, 칩, 아카이브, 메뉴, 폼 컴포넌트 |
40-colors-light |
210 | 라이트 테마의 색상 원본 |
50-colors-dark |
55 | 다크 테마의 색상 오버라이드 |
60-language |
188 | 언어별 서체와 줄바꿈 정책 |
70-global |
0 | 전역 보정값과 공통 훅 |
읽는 법
- 값은 실제 원본이다.
- 미리보기는 브라우저에서 어떻게 번역되는지를 보여준다.
- 색상은 배경과 테두리로, 길이 값은 막대와 폭으로, 폰트 값은 샘플 문장으로 확인한다.
- 이 페이지 하나만 봐도 토큰이 흩어져 있지 않은지 거의 드러나야 한다.
| 변수 | 값 | 미리보기 |
|---|---|---|
--page-max-width |
1120px |
1120px |
--content-max-width |
760px |
760px |
--nav-max-width |
1120px |
1120px |
--page-padding |
24px |
24px |
--page-padding-mobile |
16px |
16px |
--gap |
24px |
24px |
--gap-mobile |
16px |
16px |
--content-gap |
24px |
24px |
--nav-width |
var(--nav-max-width) |
var(–nav-max-width) |
--breakpoint-sm |
340px |
340px |
--breakpoint-md |
768px |
768px |
--breakpoint-lg |
900px |
900px |
--breakpoint-xl |
1120px |
1120px |
--cover-responsive-breakpoint-md |
768px |
768px |
--cover-responsive-width-md |
720px |
720px |
--main-width |
var(--content-max-width) |
var(–content-max-width) |
--header-height |
64px |
64px |
--footer-height |
64px |
64px |
--space-2xs |
4px |
4px |
--space-xs |
6px |
6px |
--space-sm |
8px |
8px |
--space-md |
12px |
12px |
--space-lg |
16px |
16px |
--space-xl |
20px |
20px |
--space-2xl |
24px |
24px |
--space-3xl |
32px |
32px |
| 변수 | 값 | 미리보기 |
|---|---|---|
--font-sans-latin |
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
Aa 가나다 123 ‘Inter’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif |
--font-sans-ui |
var(--font-sans-latin) |
Aa 가나다 123 var(–font-sans-latin) |
--font-serif-latin |
Georgia, 'Times New Roman', Times, serif |
Aa 가나다 123 Georgia, ‘Times New Roman’, Times, serif |
--font-display-latin |
var(--font-sans-latin) |
Aa 가나다 123 var(–font-sans-latin) |
--font-mono-latin |
ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace |
Aa 가나다 123 ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace |
--font-sans-latin-europe |
'Inter', 'Avenir Next', 'Avenir', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
Aa 가나다 123 ‘Inter’, ‘Avenir Next’, ‘Avenir’, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif |
--font-sans-east-asia |
var(--font-sans-latin) |
Aa 가나다 123 var(–font-sans-latin) |
--font-sans-southeastasia |
'Inter', 'Noto Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
Aa 가나다 123 ‘Inter’, ‘Noto Sans’, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif |
--font-sans-southasia |
'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Noto Sans Bengali', 'Noto Sans Tamil', sans-serif |
Aa 가나다 123 ‘Noto Sans Devanagari’, ‘Nirmala UI’, ‘Mangal’, ‘Noto Sans Bengali’, ‘Noto Sans Tamil’, sans-serif |
--font-sans-rtl |
'Noto Sans Arabic', 'Noto Naskh Arabic', 'Noto Sans Hebrew', Tahoma, Arial, sans-serif |
Aa 가나다 123 ‘Noto Sans Arabic’, ‘Noto Naskh Arabic’, ‘Noto Sans Hebrew’, Tahoma, Arial, sans-serif |
--font-serif-latin-europe |
Georgia, 'Times New Roman', Times, serif |
Aa 가나다 123 Georgia, ‘Times New Roman’, Times, serif |
--font-mono-cjk |
'SFMono-Regular', 'SF Mono', ui-monospace, Consolas, 'Liberation Mono', Menlo, monospace |
Aa 가나다 123 ‘SFMono-Regular’, ‘SF Mono’, ui-monospace, Consolas, ‘Liberation Mono’, Menlo, monospace |
--font-emoji |
'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif |
Aa 가나다 123 ‘Apple Color Emoji’, ‘Segoe UI Emoji’, ‘Noto Color Emoji’, sans-serif |
--font-sans-korean |
'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif |
Aa 가나다 123 ‘Pretendard’, ‘Apple SD Gothic Neo’, ‘Noto Sans KR’, ‘Malgun Gothic’, sans-serif |
--font-sans-japanese |
'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Yu Gothic UI', 'Meiryo', sans-serif |
Aa 가나다 123 ‘Noto Sans JP’, ‘Hiragino Sans’, ‘Yu Gothic’, ‘Yu Gothic UI’, ‘Meiryo’, sans-serif |
--font-sans-chinese-simplified |
'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', sans-serif |
Aa 가나다 123 ‘Noto Sans SC’, ‘PingFang SC’, ‘Microsoft YaHei’, ‘Heiti SC’, sans-serif |
--font-sans-chinese-traditional |
'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', sans-serif |
Aa 가나다 123 ‘Noto Sans TC’, ‘PingFang TC’, ‘Microsoft JhengHei’, ‘Heiti TC’, sans-serif |
--font-sans-vietnamese |
'Noto Sans', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
Aa 가나다 123 ‘Noto Sans’, ‘Inter’, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif |
--font-sans-cyrillic |
'Noto Sans', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
Aa 가나다 123 ‘Noto Sans’, ‘Inter’, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif |
--font-sans-greek |
'Noto Sans', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif |
Aa 가나다 123 ‘Noto Sans’, ‘Inter’, ‘Segoe UI’, Roboto, Helvetica, Arial, sans-serif |
--font-sans-arabic |
'Noto Sans Arabic', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif |
Aa 가나다 123 ‘Noto Sans Arabic’, ‘Noto Naskh Arabic’, Tahoma, Arial, sans-serif |
--font-sans-hebrew |
'Noto Sans Hebrew', 'Arial Hebrew', Arial, sans-serif |
Aa 가나다 123 ‘Noto Sans Hebrew’, ‘Arial Hebrew’, Arial, sans-serif |
--font-sans-devanagari |
'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif |
Aa 가나다 123 ‘Noto Sans Devanagari’, ‘Nirmala UI’, ‘Mangal’, sans-serif |
--font-sans-bengali |
'Noto Sans Bengali', 'Nirmala UI', sans-serif |
Aa 가나다 123 ‘Noto Sans Bengali’, ‘Nirmala UI’, sans-serif |
--font-sans-thai |
'Noto Sans Thai', 'Leelawadee UI', sans-serif |
Aa 가나다 123 ‘Noto Sans Thai’, ‘Leelawadee UI’, sans-serif |
--font-sans-cjk |
var(--font-sans-japanese) |
Aa 가나다 123 var(–font-sans-japanese) |
--font-script-latin |
var(--font-sans-latin) |
Aa 가나다 123 var(–font-sans-latin) |
--font-script-cjk |
var(--font-sans-cjk) |
Aa 가나다 123 var(–font-sans-cjk) |
--font-script-cyrillic |
var(--font-sans-cyrillic) |
Aa 가나다 123 var(–font-sans-cyrillic) |
--font-script-greek |
var(--font-sans-greek) |
Aa 가나다 123 var(–font-sans-greek) |
--font-script-rtl |
var(--font-sans-rtl) |
Aa 가나다 123 var(–font-sans-rtl) |
--font-script-indic |
var(--font-sans-southasia) |
Aa 가나다 123 var(–font-sans-southasia) |
--font-script-thai |
var(--font-sans-thai) |
Aa 가나다 123 var(–font-sans-thai) |
--font-script-southeastasia |
var(--font-sans-southeastasia) |
Aa 가나다 123 var(–font-sans-southeastasia) |
--font-sans |
var(--font-sans-latin) |
Aa 가나다 123 var(–font-sans-latin) |
--font-display |
var(--font-display-latin) |
Aa 가나다 123 var(–font-display-latin) |
--font-body |
var(--font-sans) |
Aa 가나다 123 var(–font-sans) |
--font-heading |
var(--font-sans) |
Aa 가나다 123 var(–font-sans) |
--font-ui |
var(--font-sans-ui) |
Aa 가나다 123 var(–font-sans-ui) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--font-size-xs |
12px |
Aa 가나다 123 12px |
--font-size-sm |
14px |
Aa 가나다 123 14px |
--font-size-md |
15px |
Aa 가나다 123 15px |
--font-size-base |
16px |
Aa 가나다 123 16px |
--font-size-lg |
18px |
Aa 가나다 123 18px |
--font-size-xl |
22px |
Aa 가나다 123 22px |
--font-size-2xl |
28px |
Aa 가나다 123 28px |
--font-size-3xl |
36px |
Aa 가나다 123 36px |
--font-size-4xl |
48px |
Aa 가나다 123 48px |
--font-size-5xl |
64px |
Aa 가나다 123 64px |
--page-title-size |
40px |
40px |
--page-title-size-mobile |
32px |
32px |
--page-title-line-height |
1.15 |
한 줄 / 두 줄 / 세 줄 1.15 |
--page-title-letter-spacing |
-0.02em |
-0.02em |
--heading-1-size |
32px |
32px |
--heading-1-size-mobile |
26px |
26px |
--heading-2-size |
26px |
26px |
--heading-2-size-mobile |
22px |
22px |
--heading-3-size |
22px |
22px |
--heading-3-size-mobile |
18px |
18px |
--heading-4-size |
18px |
18px |
--heading-4-size-mobile |
16px |
16px |
--heading-5-size |
16px |
16px |
--heading-5-size-mobile |
15px |
15px |
--heading-6-size |
14px |
14px |
--heading-6-size-mobile |
14px |
14px |
--heading-line-height |
1.25 |
한 줄 / 두 줄 / 세 줄 1.25 |
--heading-letter-spacing |
-0.01em |
-0.01em |
--heading-font-weight |
var(--font-weight-bold) |
Aa 가나다 123 var(–font-weight-bold) |
--page-header-font-weight |
var(--font-weight-bold) |
Aa 가나다 123 var(–font-weight-bold) |
--archive-entry-title-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--archive-entry-title-line-height |
var(--line-height-small) |
한 줄 / 두 줄 / 세 줄 var(–line-height-small) |
--nav-logo-font-weight |
var(--font-weight-bold) |
Aa 가나다 123 var(–font-weight-bold) |
--nav-link-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--nav-link-active-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--not-found-font-weight |
var(--font-weight-bold) |
Aa 가나다 123 var(–font-weight-bold) |
--search-input-font-weight |
var(--font-weight-bold) |
Aa 가나다 123 var(–font-weight-bold) |
--search-result-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--button-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--chip-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--toc-details-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--heading-anchor-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--post-content-dl-term-font-weight |
var(--font-weight-bold) |
Aa 가나다 123 var(–font-weight-bold) |
--post-content-figure-caption-font-weight |
var(--font-weight-semibold) |
Aa 가나다 123 var(–font-weight-semibold) |
--post-content-figure-caption-body-font-weight |
var(--font-weight-regular) |
Aa 가나다 123 var(–font-weight-regular) |
--paginav-hover-shadow |
0 1px 0 var(--accent) |
0 1px 0 var(–accent) |
--code-token-strong-font-weight |
var(--font-weight-bold) |
Aa 가나다 123 var(–font-weight-bold) |
--copy-code-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--line-height-tight |
1.2 |
한 줄 / 두 줄 / 세 줄 1.2 |
--line-height-base |
1.6 |
한 줄 / 두 줄 / 세 줄 1.6 |
--line-height-relaxed |
1.75 |
한 줄 / 두 줄 / 세 줄 1.75 |
--line-height-ui |
1.5 |
한 줄 / 두 줄 / 세 줄 1.5 |
--line-height-small |
1.35 |
한 줄 / 두 줄 / 세 줄 1.35 |
--letter-spacing-normal |
0 |
0 |
--text-rendering |
optimizeLegibility |
optimizeLegibility |
--font-synthesis |
weight style small-caps |
Aa 가나다 123 weight style small-caps |
--font-feature-settings |
normal |
Aa 가나다 123 normal |
--font-feature-settings-cjk |
normal |
Aa 가나다 123 normal |
--font-feature-settings-rtl |
normal |
Aa 가나다 123 normal |
--word-break-body |
break-word |
break-word |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--word-break-code |
break-all |
break-all |
--overflow-wrap-body |
anywhere |
anywhere |
--line-break-body |
auto |
auto |
--direction-page |
ltr |
ltr |
--direction-code |
ltr |
ltr |
--unicode-bidi-page |
normal |
normal |
--hyphens-body |
manual |
manual |
--font-weight-regular |
400 |
Aa 가나다 123 400 |
--font-weight-medium |
500 |
Aa 가나다 123 500 |
--font-weight-semibold |
600 |
Aa 가나다 123 600 |
--font-weight-bold |
700 |
Aa 가나다 123 700 |
--font-weight-black |
900 |
Aa 가나다 123 900 |
| 변수 | 값 | 미리보기 |
|---|---|---|
--radius-xs |
4px |
4px |
--radius-sm |
8px |
8px |
--radius-md |
12px |
12px |
--radius-lg |
16px |
16px |
--radius-xl |
20px |
20px |
--radius-full |
9999px |
9999px |
--radius |
var(--radius-md) |
var(–radius-md) |
--border-width-thin |
1px |
1px |
--border-width-strong |
2px |
2px |
--control-size-sm |
32px |
32px |
--control-size-md |
40px |
40px |
--control-size-lg |
44px |
44px |
--control-padding-x |
14px |
14px |
--control-padding-y |
10px |
10px |
--control-icon-size |
18px |
18px |
--control-gap |
10px |
10px |
--transition-fast |
120ms ease |
120ms ease |
--transition-base |
200ms ease |
200ms ease |
--transition-slow |
300ms ease |
300ms ease |
--interactive-transition |
transform 0.1s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease |
transform 0.1s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease |
--focus-outline-width |
2px |
2px |
--focus-outline-offset |
2px |
2px |
--control-press-scale |
0.98 |
0.98 |
--viewport-full-height |
100vh |
100vh |
--page-min-height |
calc(var(--viewport-full-height) - var(--header-height) - var(--footer-height)) |
calc(var(–viewport-full-height) - var(–header-height) - var(–footer-height)) |
--profile-page-min-height |
calc(var(--viewport-full-height) - var(--header-height) - var(--footer-height) - (var(--gap) * 2)) |
calc(var(–viewport-full-height) - var(–header-height) - var(–footer-height) - (var(–gap) * 2)) |
--autofill-shadow-spread |
50px |
50px |
--shadow-sm |
0 1px 2px rgba(72, 32, 19, 0.08) |
0 1px 2px rgba(72, 32, 19, 0.08) |
--shadow-md |
0 10px 28px rgba(72, 32, 19, 0.10) |
0 10px 28px rgba(72, 32, 19, 0.10) |
--shadow-lg |
0 18px 50px rgba(72, 32, 19, 0.14) |
0 18px 50px rgba(72, 32, 19, 0.14) |
--z-index-floating |
99 |
z 99 |
--z-index-overlay |
120 |
z 120 |
| 변수 | 값 | 미리보기 |
|---|---|---|
--button-radius |
var(--radius-md) |
var(–radius-md) |
--button-border-width |
1px |
1px |
--button-border-color |
var(--border) |
var(–border) |
--button-primary-bg |
var(--accent) |
var(–accent) |
--button-primary-fg |
var(--accent-contrast) |
var(–accent-contrast) |
--button-secondary-bg |
var(--surface-quiet) |
var(–surface-quiet) |
--button-secondary-fg |
var(--primary) |
var(–primary) |
--button-secondary-border-color |
var(--border) |
var(–border) |
--button-secondary-shadow |
none |
none |
--cta-radius |
var(--button-radius) |
var(–button-radius) |
--cta-border-width |
var(--button-border-width) |
var(–button-border-width) |
--cta-border-color |
var(--button-border-color) |
var(–button-border-color) |
--cta-primary-bg |
var(--button-primary-bg) |
var(–button-primary-bg) |
--cta-primary-fg |
var(--button-primary-fg) |
var(–button-primary-fg) |
--cta-secondary-bg |
var(--button-secondary-bg) |
var(–button-secondary-bg) |
--cta-secondary-fg |
var(--button-secondary-fg) |
var(–button-secondary-fg) |
--cta-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--cta-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--cta-gap |
var(--control-gap) |
var(–control-gap) |
--cta-padding-x |
var(--control-padding-x) |
var(–control-padding-x) |
--cta-padding-y |
var(--control-padding-y) |
var(–control-padding-y) |
--cta-min-height |
var(--control-size-md) |
var(–control-size-md) |
--cta-note-font-size |
var(--font-size-xs) |
Aa 가나다 123 var(–font-size-xs) |
--cta-subtitle-font-size |
var(--font-size-sm) |
Aa 가나다 123 var(–font-size-sm) |
--cta-inline-max-width |
min(100%, 44rem) |
min(100%, 44rem) |
--cta-block-max-width |
min(100%, 50rem) |
min(100%, 50rem) |
--cta-frame-gap |
var(--space-sm) |
var(–space-sm) |
--cta-support-gap |
var(--space-sm) |
var(–space-sm) |
--cta-support-padding-block-start |
var(--space-md) |
var(–space-md) |
--cta-support-border-width |
var(--border-width-thin) |
var(–border-width-thin) |
--cta-support-border-color |
var(--border) |
var(–border) |
--cta-support-border |
var(--cta-support-border-width) solid var(--cta-support-border-color) |
var(–cta-support-border-width) solid var(–cta-support-border-color) |
--cta-link-gap |
0 |
0 |
--cta-link-padding-x |
16px |
16px |
--cta-link-padding-y |
10px |
10px |
--cta-link-min-height |
44px |
44px |
--cta-link-radius |
var(--button-radius) |
var(–button-radius) |
--cta-link-border-width |
var(--button-border-width) |
var(–button-border-width) |
--cta-link-border-color |
var(--button-border-color) |
var(–button-border-color) |
--cta-link-background |
var(--surface-quiet) |
var(–surface-quiet) |
--cta-link-background-image |
linear-gradient(180deg, color-mix(in srgb, var(--surface) 99%, white 1%), color-mix(in srgb, var(--surface-quiet) 97%, black 3%)) |
linear-gradient(180deg, color-mix(in srgb, var(–surface) 99%, white 1%), color-mix(in srgb, var(–surface-quiet) 97%, black 3%)) |
--cta-link-foreground |
var(--primary) |
var(–primary) |
--cta-link-font-family |
var(--font-ui) |
Aa 가나다 123 var(–font-ui) |
--cta-link-letter-spacing |
-0.004em |
-0.004em |
--cta-link-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--cta-link-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--cta-link-hover-border-color |
var(--border-strong) |
var(–border-strong) |
--cta-link-hover-transform |
translateY(-1px) |
translateY(-1px) |
--cta-link-active-transform |
translateY(0) scale(0.99) |
translateY(0) scale(0.99) |
--cta-link-disabled-opacity |
0.58 |
0.58 |
--cta-link-icon-size |
var(--control-icon-size) |
var(–control-icon-size) |
--cta-link-icon-color |
var(--accent) |
var(–accent) |
--cta-link-icon-opacity |
1 |
1 |
--cta-link-label-font-weight |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--cta-link-label-font-weight-primary |
var(--font-weight-semibold) |
Aa 가나다 123 var(–font-weight-semibold) |
--cta-link-label-font-weight-secondary |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--cta-link-label-font-weight-tertiary |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--cta-link-label-font-weight-utility |
var(--font-weight-medium) |
Aa 가나다 123 var(–font-weight-medium) |
--cta-link-subtitle-color |
var(--secondary) |
var(–secondary) |
--cta-link-note-color |
var(--secondary) |
var(–secondary) |
--cta-link-body-color |
var(--content) |
var(–content) |
--cta-link-body-font-size |
var(--font-size-base) |
Aa 가나다 123 var(–font-size-base) |
--cta-link-badge-background |
var(--accent-muted) |
var(–accent-muted) |
--cta-link-badge-foreground |
var(--accent) |
var(–accent) |
--cta-link-badge-radius |
var(--radius-full) |
var(–radius-full) |
--cta-link-badge-padding-x |
var(--space-sm) |
var(–space-sm) |
--cta-link-badge-font-size |
var(--font-size-xs) |
Aa 가나다 123 var(–font-size-xs) |
--cta-link-primary-background |
var(--cta-primary-bg) |
var(–cta-primary-bg) |
--cta-link-primary-background-image |
linear-gradient(180deg, color-mix(in srgb, var(--cta-primary-bg) 84%, white 16%), color-mix(in srgb, var(--cta-primary-bg) 98%, black 2%)), radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, white 18%, transparent) 0%, transparent 62%) |
linear-gradient(180deg, color-mix(in srgb, var(–cta-primary-bg) 84%, white 16%), color-mix(in srgb, var(–cta-primary-bg) 98%, black 2%)), radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, white 18%, transparent) 0%, transparent 62%) |
--cta-link-primary-background-image-hover |
linear-gradient(180deg, color-mix(in srgb, var(--cta-primary-bg) 78%, white 22%), color-mix(in srgb, var(--cta-primary-bg) 94%, black 6%)), radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, white 24%, transparent) 0%, transparent 58%) |
linear-gradient(180deg, color-mix(in srgb, var(–cta-primary-bg) 78%, white 22%), color-mix(in srgb, var(–cta-primary-bg) 94%, black 6%)), radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, white 24%, transparent) 0%, transparent 58%) |
--cta-link-primary-foreground |
var(--cta-primary-fg) |
var(–cta-primary-fg) |
--cta-link-primary-border-color |
color-mix(in srgb, var(--cta-primary-bg) 74%, black 26%) |
color-mix(in srgb, var(–cta-primary-bg) 74%, black 26%) |
--cta-link-primary-shadow |
0 10px 24px color-mix(in srgb, var(--cta-primary-bg) 20%, transparent) |
0 10px 24px color-mix(in srgb, var(–cta-primary-bg) 20%, transparent) |
--cta-link-secondary-background |
color-mix(in srgb, var(--surface) 95%, var(--cta-primary-bg) 5%) |
color-mix(in srgb, var(–surface) 95%, var(–cta-primary-bg) 5%) |
--cta-link-secondary-background-image |
linear-gradient(180deg, color-mix(in srgb, var(--surface) 99%, white 1%), color-mix(in srgb, var(--surface) 96%, var(--cta-primary-bg) 4%)) |
linear-gradient(180deg, color-mix(in srgb, var(–surface) 99%, white 1%), color-mix(in srgb, var(–surface) 96%, var(–cta-primary-bg) 4%)) |
--cta-link-secondary-foreground |
color-mix(in srgb, var(--primary) 92%, var(--cta-primary-bg) 8%) |
color-mix(in srgb, var(–primary) 92%, var(–cta-primary-bg) 8%) |
--cta-link-secondary-border-color |
color-mix(in srgb, var(--cta-primary-bg) 68%, var(--border) 32%) |
color-mix(in srgb, var(–cta-primary-bg) 68%, var(–border) 32%) |
--cta-link-secondary-shadow |
none |
none |
--cta-link-tertiary-background |
color-mix(in srgb, var(--surface) 98%, var(--cta-primary-bg) 2%) |
color-mix(in srgb, var(–surface) 98%, var(–cta-primary-bg) 2%) |
--cta-link-tertiary-background-image |
linear-gradient(180deg, color-mix(in srgb, var(--surface) 100%, white 0%), color-mix(in srgb, var(--surface) 98%, var(--cta-primary-bg) 2%)) |
linear-gradient(180deg, color-mix(in srgb, var(–surface) 100%, white 0%), color-mix(in srgb, var(–surface) 98%, var(–cta-primary-bg) 2%)) |
--cta-link-tertiary-foreground |
color-mix(in srgb, var(--secondary) 84%, var(--primary) 16%) |
color-mix(in srgb, var(–secondary) 84%, var(–primary) 16%) |
--cta-link-tertiary-border-color |
color-mix(in srgb, var(--cta-primary-bg) 48%, var(--border) 52%) |
color-mix(in srgb, var(–cta-primary-bg) 48%, var(–border) 52%) |
--cta-link-tertiary-shadow |
none |
none |
--cta-link-utility-background |
color-mix(in srgb, var(--surface) 94%, var(--secondary) 6%) |
color-mix(in srgb, var(–surface) 94%, var(–secondary) 6%) |
--cta-link-utility-border-color |
var(--border) |
var(–border) |
--cta-link-utility-shadow |
none |
none |
--cta-link-utility-radius |
var(--chip-radius) |
var(–chip-radius) |
--cta-link-utility-padding-x |
var(--chip-padding-x) |
var(–chip-padding-x) |
--cta-link-utility-padding-y |
0 |
0 |
--cta-link-utility-min-height |
var(--control-size-sm) |
var(–control-size-sm) |
--cta-focus-ring |
var(--accent) |
var(–accent) |
--cta-link-default-transition |
var(--interactive-transition) |
var(–interactive-transition) |
--control-radius |
var(--radius-md) |
var(–radius-md) |
--card-radius |
var(--radius-md) |
var(–radius-md) |
--surface-radius |
var(--radius-md) |
var(–radius-md) |
--media-radius |
8px |
8px |
--image-radius |
8px |
8px |
--avatar-radius |
var(--radius-full) |
var(–radius-full) |
--card-bg |
var(--surface-quiet) |
var(–surface-quiet) |
--home-list-card-bg |
var(--surface-quiet) |
var(–surface-quiet) |
--home-list-card-border-width |
var(--border-width-thin) |
var(–border-width-thin) |
--home-list-card-border-color |
var(--border) |
var(–border) |
--home-list-card-border-hover-color |
var(--border-strong) |
var(–border-strong) |
--home-list-card-border |
var(--home-list-card-border-width) solid var(--home-list-card-border-color) |
var(–home-list-card-border-width) solid var(–home-list-card-border-color) |
--home-list-card-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--home-list-card-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--card-border-width |
var(--border-width-thin) |
var(–border-width-thin) |
--card-border-color |
var(--border) |
var(–border) |
--card-border |
var(--card-border-width) solid var(--card-border-color) |
var(–card-border-width) solid var(–card-border-color) |
--post-entry-border-width |
var(--border-width-thin) |
var(–border-width-thin) |
--post-entry-border-color |
var(--border) |
var(–border) |
--post-entry-border |
var(--post-entry-border-width) solid var(--post-entry-border-color) |
var(–post-entry-border-width) solid var(–post-entry-border-color) |
--archive-entry-border-width |
var(--border-width-thin) |
var(–border-width-thin) |
--archive-entry-border-color |
var(--border) |
var(–border) |
--archive-entry-border |
var(--archive-entry-border-width) solid var(--archive-entry-border-color) |
var(–archive-entry-border-width) solid var(–archive-entry-border-color) |
--icon-fill-default |
currentColor |
currentColor |
--icon-stroke-default |
currentColor |
currentColor |
--chip-gap |
var(--space-sm) |
var(–space-sm) |
--chip-radius |
var(--radius-full) |
var(–radius-full) |
--chip-padding-x |
var(--control-padding-x) |
var(–control-padding-x) |
--chip-padding-y |
0 |
0 |
--chip-line-height |
34px |
한 줄 / 두 줄 / 세 줄 34px |
--table-cell-padding-x |
var(--space-sm) |
var(–space-sm) |
--table-cell-padding-y |
var(--space-md) |
var(–space-md) |
--inline-code-radius |
4px |
4px |
--input-background |
var(--surface) |
var(–surface) |
--input-border-width |
var(--border-width-thin) |
var(–border-width-thin) |
--input-border-color |
var(--border) |
var(–border) |
--input-focus-border-color |
var(--accent) |
var(–accent) |
--input-foreground |
var(--primary) |
var(–primary) |
--input-padding-x |
var(--control-padding-x) |
var(–control-padding-x) |
--input-padding-y |
var(--control-padding-y) |
var(–control-padding-y) |
--input-radius |
var(--radius-md) |
var(–radius-md) |
--floating-action-offset-block |
72px |
72px |
--floating-action-offset-inline |
24px |
24px |
--first-entry-min-height |
360px |
360px |
--first-entry-min-height-mobile |
280px |
280px |
--archive-month-header-width |
220px |
220px |
--profile-buttons-max-width |
480px |
480px |
--table-cell-min-width |
88px |
88px |
--highlight-table-first-column-width |
44px |
44px |
--page-title-line-height |
1.15 |
한 줄 / 두 줄 / 세 줄 1.15 |
--page-title-letter-spacing |
-0.02em |
-0.02em |
--heading-letter-spacing |
-0.01em |
-0.01em |
--header-logo-image-offset-y |
-10% |
-10% |
--header-control-inline-margin |
4px |
4px |
--header-switch-inline-margin |
3px |
3px |
--header-active-border-width |
2px |
2px |
--footer-line-height |
24px |
한 줄 / 두 줄 / 세 줄 24px |
--footer-inline-gap |
1px |
1px |
--footer-link-border-width |
1px |
1px |
--footer-floating-transition |
visibility 0.5s, opacity 0.8s linear, background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base) |
visibility 0.5s, opacity 0.8s linear, background-color var(–transition-base), color var(–transition-base), border-color var(–transition-base) |
--footer-icon-shadow |
drop-shadow(0 0 0 var(--theme)) |
drop-shadow(0 0 0 var(–theme)) |
--entry-content-gap |
8px |
8px |
--entry-cover-gap |
0.5rem |
0.5rem |
--entry-link-visually-hidden-offset |
-9999px |
-9999px |
--link-underline-offset |
0.3rem |
0.3rem |
--post-content-link-underline-offset |
0.3rem |
0.3rem |
--post-content-inline-code-shadow |
0 -1px 0 var(--accent) inset |
0 -1px 0 var(–accent) inset |
--post-content-heading-1-margin |
2rem 0 1rem |
2rem 0 1rem |
--post-content-heading-2-margin |
1.75rem 0 1rem |
1.75rem 0 1rem |
--post-content-heading-3-margin |
1.5rem 0 0.875rem |
1.5rem 0 0.875rem |
--post-content-heading-4-margin |
1.5rem 0 0.75rem |
1.5rem 0 0.75rem |
--post-content-heading-5-margin |
1.25rem 0 0.75rem |
1.25rem 0 0.75rem |
--post-content-heading-6-margin |
1.25rem 0 0.75rem |
1.25rem 0 0.75rem |
--post-content-dl-term-width |
25% |
25% |
--post-content-dl-definition-width |
75% |
75% |
--post-content-dl-definition-padding-inline-start |
var(--space-sm) |
var(–space-sm) |
--post-content-table-line-height |
1.5 |
한 줄 / 두 줄 / 세 줄 1.5 |
--post-content-blockquote-border-width |
4px |
4px |
--post-content-hr-margin-block |
1rem |
1rem |
--post-content-hr-height |
2px |
2px |
--post-content-image-margin-block |
1rem |
1rem |
--toc-inner-margin-inline |
2.4rem |
2.4rem |
--toc-inner-padding-bottom |
0.6rem |
0.6rem |
--post-footer-item-gap |
10px |
10px |
--post-tags-gap |
10px |
10px |
--share-button-size |
40px |
40px |
--share-button-icon-size |
18px |
18px |
--share-button-gap |
12px |
12px |
--paginav-line-height |
30px |
한 줄 / 두 줄 / 세 줄 30px |
--paginav-link-gap |
0.5rem |
0.5rem |
--paginav-title-letter-spacing |
1px |
1px |
--breadcrumbs-gap |
0.2rem |
0.2rem |
--breadcrumbs-icon-size |
1em |
1em |
--breadcrumbs-inline-margin |
3px |
3px |
--social-icon-size |
26px |
26px |
--copy-code-offset |
4px |
4px |
--copy-code-line-height |
34px |
한 줄 / 두 줄 / 세 줄 34px |
--code-line-number-gutter-padding-start |
12px |
12px |
--code-line-number-padding-block |
8px |
8px |
--code-line-number-padding-inline |
10px |
10px |
--code-line-number-gap |
0.4em |
0.4em |
--code-line-number-inline-padding |
0.4em |
0.4em |
--scrollbar-thumb-border-width |
5px |
5px |
--scrollbar-thumb-border-width-compact |
2px |
2px |
--scrollbar-track-width |
19px |
19px |
--scrollbar-track-height |
11px |
11px |
--scrollbar-track-width-mobile |
0 |
0 |
--scroll-to-top-mobile-offset |
-5rem |
-5rem |
--footer-mobile-content-gap |
10px |
10px |
--profile-image-scale-mobile |
0.85 |
0.85 |
--not-found-height |
80% |
80% |
--probe-table-min-width |
980px |
980px |
--probe-preview-min-width |
220px |
220px |
--token-preview-swatch-min-height |
48px |
48px |
--token-preview-avatar-size |
64px |
64px |
--token-preview-layer-min-height |
88px |
88px |
--token-preview-layer-inset-1 |
12px 24px 0 0 |
12px 24px 0 0 |
--token-preview-layer-inset-2 |
0 12px 12px 12px |
0 12px 12px 12px |
--token-preview-measure-height |
12px |
12px |
--share-icon-size |
30px |
30px |
--content-inline-size |
var(--content-max-width) |
var(–content-max-width) |
--page-shell-hero-padding-block |
clamp(24px, 4vw, 40px) |
clamp(24px, 4vw, 40px) |
--page-shell-hero-padding-inline |
clamp(20px, 4vw, 32px) |
clamp(20px, 4vw, 32px) |
--page-shell-title-size |
clamp(32px, 4.6vw, 56px) |
clamp(32px, 4.6vw, 56px) |
--page-shell-title-size-mobile |
clamp(30px, 7vw, 40px) |
clamp(30px, 7vw, 40px) |
--page-shell-title-line-height |
1.08 |
한 줄 / 두 줄 / 세 줄 1.08 |
--page-shell-lead-max-width |
48rem |
48rem |
--page-shell-action-min-height |
44px |
44px |
--page-shell-action-padding-x |
var(--control-padding-x) |
var(–control-padding-x) |
--page-shell-action-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--page-shell-action-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--page-hub-stat-grid-gap |
var(--page-shell-grid-gap) |
var(–page-shell-grid-gap) |
--page-hub-stat-min-width |
180px |
180px |
--page-hub-stat-padding |
clamp(16px, 3vw, 24px) |
clamp(16px, 3vw, 24px) |
--page-hub-stat-bg |
var(--surface) |
var(–surface) |
--page-hub-stat-border |
var(--border) |
var(–border) |
--page-hub-stat-border-hover |
var(--border-strong) |
var(–border-strong) |
--page-hub-stat-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--page-hub-stat-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--page-hub-stat-value-size |
var(--font-size-2xl) |
var(–font-size-2xl) |
--page-hub-stat-value-color |
var(--primary) |
var(–primary) |
--page-hub-stat-label-color |
var(--accent) |
var(–accent) |
--page-hub-stat-text-color |
var(--secondary) |
var(–secondary) |
--page-shell-hero-padding-block |
clamp(24px, 4vw, 40px) |
clamp(24px, 4vw, 40px) |
--page-shell-hero-padding-inline |
clamp(20px, 4vw, 32px) |
clamp(20px, 4vw, 32px) |
--page-shell-card-padding |
clamp(18px, 3vw, 28px) |
clamp(18px, 3vw, 28px) |
--page-shell-card-radius |
var(--radius-lg) |
var(–radius-lg) |
--page-shell-card-border-width |
var(--border-width-thin) |
var(–border-width-thin) |
--page-shell-card-border-color |
var(--border) |
var(–border) |
--page-shell-card-border-hover-color |
var(--border-strong) |
var(–border-strong) |
--page-shell-card-bg |
var(--surface-quiet) |
var(–surface-quiet) |
--page-shell-card-bg-hover |
var(--surface-elevated) |
var(–surface-elevated) |
--page-shell-card-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--page-shell-card-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--page-shell-card-min-width |
240px |
240px |
--page-shell-grid-gap |
var(--space-lg) |
var(–space-lg) |
--page-shell-layout-gap |
var(--space-3xl) |
var(–space-3xl) |
--page-shell-action-gap |
var(--space-sm) |
var(–space-sm) |
--page-shell-kicker-color |
var(--accent) |
var(–accent) |
--page-shell-lead-color |
var(--secondary) |
var(–secondary) |
--page-shell-text-color |
var(--content) |
var(–content) |
--page-shell-empty-bg |
var(--surface-quiet) |
var(–surface-quiet) |
--page-shell-empty-border |
var(--border) |
var(–border) |
--page-shell-term-card-bg |
var(--surface-quiet) |
var(–surface-quiet) |
--page-shell-term-card-border |
var(--border) |
var(–border) |
--page-shell-term-card-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--page-shell-term-card-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--page-shell-term-count-color |
var(--secondary) |
var(–secondary) |
--page-shell-term-min-width |
180px |
180px |
--menu-shell-gap |
var(--space-2xl) |
var(–space-2xl) |
--menu-shell-gap-mobile |
var(--space-xl) |
var(–space-xl) |
--menu-hero-gap |
var(--space-lg) |
var(–space-lg) |
--menu-hero-padding |
clamp(20px, 4vw, 40px) |
clamp(20px, 4vw, 40px) |
--menu-hero-bg |
var(--gradient-surface) |
var(–gradient-surface) |
--menu-hero-border |
var(--border) |
var(–border) |
--menu-hero-radius |
var(--page-shell-card-radius) |
var(–page-shell-card-radius) |
--menu-hero-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--menu-badge-padding-x |
var(--space-sm) |
var(–space-sm) |
--menu-badge-line-height |
1.8 |
한 줄 / 두 줄 / 세 줄 1.8 |
--menu-badge-size |
var(--font-size-xs) |
var(–font-size-xs) |
--menu-badge-fg |
var(--accent-contrast) |
var(–accent-contrast) |
--menu-badge-bg |
var(--accent) |
var(–accent) |
--menu-badge-radius |
var(--radius-full) |
var(–radius-full) |
--menu-grid-columns |
repeat(auto-fit, minmax(240px, 1fr)) |
repeat(auto-fit, minmax(240px, 1fr)) |
--menu-grid-gap |
var(--page-shell-grid-gap) |
var(–page-shell-grid-gap) |
--menu-section-gap |
var(--space-3xl) |
var(–space-3xl) |
--menu-card-min-height |
180px |
180px |
--menu-card-padding |
clamp(18px, 3vw, 28px) |
clamp(18px, 3vw, 28px) |
--menu-card-bg |
var(--surface) |
var(–surface) |
--menu-card-border |
var(--border) |
var(–border) |
--menu-card-border-hover-color |
var(--border-strong) |
var(–border-strong) |
--menu-card-radius |
var(--page-shell-card-radius) |
var(–page-shell-card-radius) |
--menu-card-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--menu-card-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--menu-card-title-size |
var(--font-size-xl) |
var(–font-size-xl) |
--menu-card-title-line-height |
var(--heading-line-height) |
한 줄 / 두 줄 / 세 줄 var(–heading-line-height) |
--menu-card-title-color |
var(--primary) |
var(–primary) |
--menu-card-meta-color |
var(--secondary) |
var(–secondary) |
--menu-card-link-color |
var(--accent) |
var(–accent) |
--menu-lead-color |
var(--secondary) |
var(–secondary) |
--not-found-shell-gap |
var(--space-xl) |
var(–space-xl) |
--not-found-card-bg |
var(--gradient-surface) |
var(–gradient-surface) |
--not-found-card-border |
var(--border) |
var(–border) |
--not-found-card-radius |
var(--page-shell-card-radius) |
var(–page-shell-card-radius) |
--not-found-card-shadow |
var(--shadow-md) |
var(–shadow-md) |
--not-found-title-size |
clamp(28px, 4vw, 44px) |
clamp(28px, 4vw, 44px) |
--not-found-text-max-width |
42rem |
42rem |
--content-measure-narrow |
760px |
760px |
--content-measure-wide |
1120px |
1120px |
--post-entry-radius |
var(--card-radius) |
var(–card-radius) |
--post-entry-background |
var(--card-bg) |
var(–card-bg) |
--post-entry-border-color |
var(--border) |
var(–border) |
--post-entry-border-hover-color |
var(--border-strong) |
var(–border-strong) |
--post-entry-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--post-entry-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--post-entry-hover-transform |
translateY(-2px) |
translateY(-2px) |
--post-entry-link-hover-background |
var(--accent-muted) |
var(–accent-muted) |
--archive-entry-radius |
var(--card-radius) |
var(–card-radius) |
--archive-entry-background |
var(--card-bg) |
var(–card-bg) |
--archive-entry-border-color |
var(--border) |
var(–border) |
--archive-entry-border-hover-color |
var(--border-strong) |
var(–border-strong) |
--archive-entry-shadow |
var(--shadow-sm) |
var(–shadow-sm) |
--archive-entry-shadow-hover |
var(--shadow-md) |
var(–shadow-md) |
--archive-entry-hover-transform |
translateY(-2px) |
translateY(-2px) |
--archive-entry-link-hover-background |
var(--accent-muted) |
var(–accent-muted) |
| 변수 | 값 | 미리보기 |
|---|---|---|
--color-brand-primary |
rgb(184, 58, 32) |
rgb(184, 58, 32) |
--color-brand-primary-hover |
rgb(156, 47, 27) |
rgb(156, 47, 27) |
--color-brand-primary-active |
rgb(129, 38, 22) |
rgb(129, 38, 22) |
--color-brand-primary-muted |
rgba(184, 58, 32, 0.16) |
rgba(184, 58, 32, 0.16) |
--color-brand-primary-contrast |
rgb(255, 255, 255) |
rgb(255, 255, 255) |
--color-brand-secondary |
rgb(214, 94, 29) |
rgb(214, 94, 29) |
--color-brand-secondary-hover |
rgb(188, 77, 22) |
rgb(188, 77, 22) |
--color-brand-secondary-active |
rgb(162, 63, 17) |
rgb(162, 63, 17) |
--color-brand-secondary-muted |
rgba(214, 94, 29, 0.16) |
rgba(214, 94, 29, 0.16) |
--color-brand-secondary-contrast |
rgb(255, 255, 255) |
rgb(255, 255, 255) |
--color-neutral-page-background |
rgb(255, 250, 246) |
rgb(255, 250, 246) |
--color-neutral-surface |
rgb(255, 255, 255) |
rgb(255, 255, 255) |
--color-neutral-surface-quiet |
rgb(251, 244, 239) |
rgb(251, 244, 239) |
--color-neutral-surface-strong |
rgb(240, 231, 224) |
rgb(240, 231, 224) |
--color-neutral-surface-elevated |
rgb(255, 252, 249) |
rgb(255, 252, 249) |
--color-neutral-text |
rgb(37, 29, 24) |
rgb(37, 29, 24) |
--color-neutral-text-muted |
rgb(111, 95, 86) |
rgb(111, 95, 86) |
--color-neutral-text-subtle |
rgb(170, 154, 144) |
rgb(170, 154, 144) |
--color-neutral-border |
rgb(228, 216, 208) |
rgb(228, 216, 208) |
--color-neutral-border-strong |
rgb(208, 194, 185) |
rgb(208, 194, 185) |
--color-neutral-code-bg |
rgb(248, 240, 235) |
rgb(248, 240, 235) |
--color-neutral-code-block-bg |
rgb(39, 24, 19) |
rgb(39, 24, 19) |
--color-neutral-code-block-fg |
rgb(246, 231, 224) |
rgb(246, 231, 224) |
--color-neutral-code-inline-bg |
rgba(124, 53, 29, 0.08) |
rgba(124, 53, 29, 0.08) |
--color-neutral-code-inline-fg |
rgb(37, 29, 24) |
rgb(37, 29, 24) |
--color-neutral-scrollbar-thumb |
rgb(127, 105, 95) |
rgb(127, 105, 95) |
--color-neutral-scrollbar-thumb-hover |
rgb(162, 140, 128) |
rgb(162, 140, 128) |
--color-neutral-scrollbar-thumb-border |
rgb(255, 250, 246) |
rgb(255, 250, 246) |
--color-neutral-scrollbar-thumb-border-alt |
rgb(251, 244, 239) |
rgb(251, 244, 239) |
--color-neutral-scrollbar-thumb-border-gist |
rgb(255, 250, 246) |
rgb(255, 250, 246) |
--color-neutral-scrollbar-thumb-alt |
rgb(127, 105, 95) |
rgb(127, 105, 95) |
--color-neutral-scrollbar-thumb-alt-hover |
rgb(162, 140, 128) |
rgb(162, 140, 128) |
--color-neutral-scrollbar-thumb-gist |
rgb(177, 156, 145) |
rgb(177, 156, 145) |
--color-neutral-scrollbar-thumb-gist-hover |
rgb(120, 99, 88) |
rgb(120, 99, 88) |
--color-semantic-success |
rgb(22, 128, 74) |
rgb(22, 128, 74) |
--color-semantic-warning |
rgb(205, 122, 22) |
rgb(205, 122, 22) |
--color-semantic-danger |
rgb(199, 57, 52) |
rgb(199, 57, 52) |
--color-semantic-info |
rgb(184, 58, 32) |
rgb(184, 58, 32) |
--color-semantic-selection-bg |
rgba(184, 58, 32, 0.18) |
rgba(184, 58, 32, 0.18) |
--color-semantic-selection-fg |
rgb(37, 29, 24) |
rgb(37, 29, 24) |
--color-semantic-focus-ring |
rgba(184, 58, 32, 0.42) |
rgba(184, 58, 32, 0.42) |
--color-effect-overlay |
rgba(90, 42, 24, 0.10) |
rgba(90, 42, 24, 0.10) |
--color-effect-scrim |
rgba(33, 18, 13, 0.56) |
rgba(33, 18, 13, 0.56) |
--color-effect-gradient-primary |
linear-gradient(135deg, rgb(184, 58, 32) 0%, rgb(214, 94, 29) 100%) |
linear-gradient(135deg, rgb(184, 58, 32) 0%, rgb(214, 94, 29) 100%) |
--color-effect-gradient-secondary |
linear-gradient(135deg, rgb(251, 244, 239) 0%, rgb(240, 231, 224) 100%) |
linear-gradient(135deg, rgb(251, 244, 239) 0%, rgb(240, 231, 224) 100%) |
--color-effect-gradient-surface |
linear-gradient(180deg, rgba(255, 252, 249, 0.98) 0%, rgba(251, 244, 239, 0.98) 100%) |
linear-gradient(180deg, rgba(255, 252, 249, 0.98) 0%, rgba(251, 244, 239, 0.98) 100%) |
--color-effect-copy-code-bg |
rgba(56, 28, 20, 0.82) |
rgba(56, 28, 20, 0.82) |
--color-effect-copy-code-fg |
rgb(255, 255, 255) |
rgb(255, 255, 255) |
--color-effect-tooltip-bg |
rgba(34, 21, 17, 0.96) |
rgba(34, 21, 17, 0.96) |
--color-effect-tooltip-fg |
rgb(255, 255, 255) |
rgb(255, 255, 255) |
--color-effect-glass-bg |
rgba(255, 252, 249, 0.78) |
rgba(255, 252, 249, 0.78) |
--color-effect-glass-border |
rgba(255, 255, 255, 0.46) |
rgba(255, 255, 255, 0.46) |
--theme |
var(--color-neutral-page-background) |
var(–color-neutral-page-background) |
--entry |
var(--color-neutral-surface) |
var(–color-neutral-surface) |
--primary |
var(--color-neutral-text) |
var(–color-neutral-text) |
--secondary |
var(--color-neutral-text-muted) |
var(–color-neutral-text-muted) |
--tertiary |
var(--color-neutral-text-subtle) |
var(–color-neutral-text-subtle) |
--content |
var(--color-neutral-text) |
var(–color-neutral-text) |
--surface |
var(--color-neutral-surface) |
var(–color-neutral-surface) |
--surface-quiet |
var(--color-neutral-surface-quiet) |
var(–color-neutral-surface-quiet) |
--surface-strong |
var(--color-neutral-surface-strong) |
var(–color-neutral-surface-strong) |
--surface-elevated |
var(--color-neutral-surface-elevated) |
var(–color-neutral-surface-elevated) |
--text |
var(--color-neutral-text) |
var(–color-neutral-text) |
--text-muted |
var(--color-neutral-text-muted) |
var(–color-neutral-text-muted) |
--text-subtle |
var(--color-neutral-text-subtle) |
var(–color-neutral-text-subtle) |
--code-block-bg |
var(--color-neutral-code-block-bg) |
var(–color-neutral-code-block-bg) |
--code-block-fg |
var(--color-neutral-code-block-fg) |
var(–color-neutral-code-block-fg) |
--code-bg |
var(--color-neutral-code-bg) |
var(–color-neutral-code-bg) |
--code-inline-bg |
var(--color-neutral-code-inline-bg) |
var(–color-neutral-code-inline-bg) |
--code-inline-fg |
var(--color-neutral-code-inline-fg) |
var(–color-neutral-code-inline-fg) |
--border |
var(--color-neutral-border) |
var(–color-neutral-border) |
--border-strong |
var(--color-neutral-border-strong) |
var(–color-neutral-border-strong) |
--link |
var(--color-brand-primary) |
var(–color-brand-primary) |
--link-hover |
var(--color-brand-primary-hover) |
var(–color-brand-primary-hover) |
--accent |
var(--color-brand-primary) |
var(–color-brand-primary) |
--accent-strong |
var(--color-brand-primary-hover) |
var(–color-brand-primary-hover) |
--accent-muted |
var(--color-brand-primary-muted) |
var(–color-brand-primary-muted) |
--accent-contrast |
var(--color-brand-primary-contrast) |
var(–color-brand-primary-contrast) |
--success |
var(--color-semantic-success) |
var(–color-semantic-success) |
--warning |
var(--color-semantic-warning) |
var(–color-semantic-warning) |
--danger |
var(--color-semantic-danger) |
var(–color-semantic-danger) |
--info |
var(--color-semantic-info) |
var(–color-semantic-info) |
--selection-bg |
var(--color-semantic-selection-bg) |
var(–color-semantic-selection-bg) |
--selection-fg |
var(--color-semantic-selection-fg) |
var(–color-semantic-selection-fg) |
--focus-ring |
var(--color-semantic-focus-ring) |
var(–color-semantic-focus-ring) |
--overlay |
var(--color-effect-overlay) |
var(–color-effect-overlay) |
--scrim |
var(--color-effect-scrim) |
var(–color-effect-scrim) |
--gradient-primary |
var(--color-effect-gradient-primary) |
var(–color-effect-gradient-primary) |
--gradient-secondary |
var(--color-effect-gradient-secondary) |
var(–color-effect-gradient-secondary) |
--gradient-surface |
var(--color-effect-gradient-surface) |
var(–color-effect-gradient-surface) |
--copy-code-bg |
var(--color-effect-copy-code-bg) |
var(–color-effect-copy-code-bg) |
--copy-code-fg |
var(--color-effect-copy-code-fg) |
var(–color-effect-copy-code-fg) |
--tooltip-bg |
var(--color-effect-tooltip-bg) |
var(–color-effect-tooltip-bg) |
--tooltip-fg |
var(--color-effect-tooltip-fg) |
var(–color-effect-tooltip-fg) |
--glass-bg |
var(--color-effect-glass-bg) |
var(–color-effect-glass-bg) |
--glass-border |
var(--color-effect-glass-border) |
var(–color-effect-glass-border) |
--scrollbar-thumb |
var(--color-neutral-scrollbar-thumb) |
var(–color-neutral-scrollbar-thumb) |
--scrollbar-thumb-hover |
var(--color-neutral-scrollbar-thumb-hover) |
var(–color-neutral-scrollbar-thumb-hover) |
--scrollbar-thumb-border |
var(--color-neutral-scrollbar-thumb-border) |
var(–color-neutral-scrollbar-thumb-border) |
--scrollbar-thumb-border-alt |
var(--color-neutral-scrollbar-thumb-border-alt) |
var(–color-neutral-scrollbar-thumb-border-alt) |
--scrollbar-thumb-border-gist |
var(--color-neutral-scrollbar-thumb-border-gist) |
var(–color-neutral-scrollbar-thumb-border-gist) |
--scrollbar-thumb-alt |
var(--color-neutral-scrollbar-thumb-alt) |
var(–color-neutral-scrollbar-thumb-alt) |
--scrollbar-thumb-alt-hover |
var(--color-neutral-scrollbar-thumb-alt-hover) |
var(–color-neutral-scrollbar-thumb-alt-hover) |
--scrollbar-thumb-gist |
var(--color-neutral-scrollbar-thumb-gist) |
var(–color-neutral-scrollbar-thumb-gist) |
--scrollbar-thumb-gist-hover |
var(--color-neutral-scrollbar-thumb-gist-hover) |
var(–color-neutral-scrollbar-thumb-gist-hover) |
--color-brand-primary |
rgb(255, 176, 138) |
rgb(255, 176, 138) |
--color-brand-primary-hover |
rgb(255, 156, 112) |
rgb(255, 156, 112) |
--color-brand-primary-active |
rgb(255, 138, 88) |
rgb(255, 138, 88) |
--color-brand-primary-muted |
rgba(255, 176, 138, 0.18) |
rgba(255, 176, 138, 0.18) |
--color-brand-primary-contrast |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-brand-secondary |
rgb(255, 198, 150) |
rgb(255, 198, 150) |
--color-brand-secondary-hover |
rgb(255, 176, 120) |
rgb(255, 176, 120) |
--color-brand-secondary-active |
rgb(255, 155, 92) |
rgb(255, 155, 92) |
--color-brand-secondary-muted |
rgba(255, 198, 150, 0.18) |
rgba(255, 198, 150, 0.18) |
--color-brand-secondary-contrast |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-neutral-page-background |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-neutral-surface |
rgb(31, 24, 21) |
rgb(31, 24, 21) |
--color-neutral-surface-quiet |
rgb(40, 31, 27) |
rgb(40, 31, 27) |
--color-neutral-surface-strong |
rgb(52, 41, 36) |
rgb(52, 41, 36) |
--color-neutral-surface-elevated |
rgb(35, 27, 24) |
rgb(35, 27, 24) |
--color-neutral-text |
rgb(245, 236, 230) |
rgb(245, 236, 230) |
--color-neutral-text-muted |
rgb(201, 184, 173) |
rgb(201, 184, 173) |
--color-neutral-text-subtle |
rgb(136, 120, 111) |
rgb(136, 120, 111) |
--color-neutral-border |
rgb(69, 56, 50) |
rgb(69, 56, 50) |
--color-neutral-border-strong |
rgb(92, 75, 66) |
rgb(92, 75, 66) |
--color-neutral-code-bg |
rgb(40, 31, 27) |
rgb(40, 31, 27) |
--color-neutral-code-block-bg |
rgb(24, 18, 16) |
rgb(24, 18, 16) |
--color-neutral-code-block-fg |
rgb(246, 231, 224) |
rgb(246, 231, 224) |
--color-neutral-code-inline-bg |
rgba(255, 176, 138, 0.08) |
rgba(255, 176, 138, 0.08) |
--color-neutral-code-inline-fg |
rgb(245, 236, 230) |
rgb(245, 236, 230) |
--color-neutral-scrollbar-thumb |
rgb(122, 103, 94) |
rgb(122, 103, 94) |
--color-neutral-scrollbar-thumb-hover |
rgb(154, 134, 124) |
rgb(154, 134, 124) |
--color-neutral-scrollbar-thumb-border |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-neutral-scrollbar-thumb-border-alt |
rgb(31, 24, 21) |
rgb(31, 24, 21) |
--color-neutral-scrollbar-thumb-border-gist |
rgb(255, 250, 246) |
rgb(255, 250, 246) |
--color-neutral-scrollbar-thumb-alt |
rgb(122, 103, 94) |
rgb(122, 103, 94) |
--color-neutral-scrollbar-thumb-alt-hover |
rgb(154, 134, 124) |
rgb(154, 134, 124) |
--color-neutral-scrollbar-thumb-gist |
rgb(173, 154, 144) |
rgb(173, 154, 144) |
--color-neutral-scrollbar-thumb-gist-hover |
rgb(132, 112, 102) |
rgb(132, 112, 102) |
--color-semantic-success |
rgb(94, 213, 128) |
rgb(94, 213, 128) |
--color-semantic-warning |
rgb(255, 199, 98) |
rgb(255, 199, 98) |
--color-semantic-danger |
rgb(255, 146, 136) |
rgb(255, 146, 136) |
--color-semantic-info |
rgb(255, 176, 138) |
rgb(255, 176, 138) |
--color-semantic-selection-bg |
rgba(255, 176, 138, 0.22) |
rgba(255, 176, 138, 0.22) |
--color-semantic-selection-fg |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-semantic-focus-ring |
rgba(255, 176, 138, 0.48) |
rgba(255, 176, 138, 0.48) |
--color-effect-overlay |
rgba(22, 16, 14, 0.22) |
rgba(22, 16, 14, 0.22) |
--color-effect-scrim |
rgba(22, 16, 14, 0.70) |
rgba(22, 16, 14, 0.70) |
--color-effect-gradient-primary |
linear-gradient(135deg, rgb(255, 176, 138) 0%, rgb(255, 138, 88) 100%) |
linear-gradient(135deg, rgb(255, 176, 138) 0%, rgb(255, 138, 88) 100%) |
--color-effect-gradient-secondary |
linear-gradient(135deg, rgb(31, 24, 21) 0%, rgb(40, 31, 27) 100%) |
linear-gradient(135deg, rgb(31, 24, 21) 0%, rgb(40, 31, 27) 100%) |
--color-effect-gradient-surface |
linear-gradient(180deg, rgba(31, 24, 21, 0.98) 0%, rgba(22, 16, 14, 0.98) 100%) |
linear-gradient(180deg, rgba(31, 24, 21, 0.98) 0%, rgba(22, 16, 14, 0.98) 100%) |
--color-effect-copy-code-bg |
rgba(255, 246, 240, 0.92) |
rgba(255, 246, 240, 0.92) |
--color-effect-copy-code-fg |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-effect-tooltip-bg |
rgba(255, 247, 241, 0.92) |
rgba(255, 247, 241, 0.92) |
--color-effect-tooltip-fg |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-effect-glass-bg |
rgba(31, 24, 21, 0.74) |
rgba(31, 24, 21, 0.74) |
--color-effect-glass-border |
rgba(255, 255, 255, 0.14) |
rgba(255, 255, 255, 0.14) |
--theme |
var(--color-neutral-page-background) |
var(–color-neutral-page-background) |
--entry |
var(--color-neutral-surface) |
var(–color-neutral-surface) |
--primary |
var(--color-neutral-text) |
var(–color-neutral-text) |
--secondary |
var(--color-neutral-text-muted) |
var(–color-neutral-text-muted) |
--tertiary |
var(--color-neutral-text-subtle) |
var(–color-neutral-text-subtle) |
--content |
var(--color-neutral-text) |
var(–color-neutral-text) |
--surface |
var(--color-neutral-surface) |
var(–color-neutral-surface) |
--surface-quiet |
var(--color-neutral-surface-quiet) |
var(–color-neutral-surface-quiet) |
--surface-strong |
var(--color-neutral-surface-strong) |
var(–color-neutral-surface-strong) |
--surface-elevated |
var(--color-neutral-surface-elevated) |
var(–color-neutral-surface-elevated) |
--text |
var(--color-neutral-text) |
var(–color-neutral-text) |
--text-muted |
var(--color-neutral-text-muted) |
var(–color-neutral-text-muted) |
--text-subtle |
var(--color-neutral-text-subtle) |
var(–color-neutral-text-subtle) |
--code-block-bg |
var(--color-neutral-code-block-bg) |
var(–color-neutral-code-block-bg) |
--code-block-fg |
var(--color-neutral-code-block-fg) |
var(–color-neutral-code-block-fg) |
--code-bg |
var(--color-neutral-code-bg) |
var(–color-neutral-code-bg) |
--code-inline-bg |
var(--color-neutral-code-inline-bg) |
var(–color-neutral-code-inline-bg) |
--code-inline-fg |
var(--color-neutral-code-inline-fg) |
var(–color-neutral-code-inline-fg) |
--border |
var(--color-neutral-border) |
var(–color-neutral-border) |
--border-strong |
var(--color-neutral-border-strong) |
var(–color-neutral-border-strong) |
--link |
var(--color-brand-primary) |
var(–color-brand-primary) |
--link-hover |
var(--color-brand-primary-hover) |
var(–color-brand-primary-hover) |
--accent |
var(--color-brand-primary) |
var(–color-brand-primary) |
--accent-strong |
var(--color-brand-primary-hover) |
var(–color-brand-primary-hover) |
--accent-muted |
var(--color-brand-primary-muted) |
var(–color-brand-primary-muted) |
--accent-contrast |
var(--color-brand-primary-contrast) |
var(–color-brand-primary-contrast) |
--success |
var(--color-semantic-success) |
var(–color-semantic-success) |
--warning |
var(--color-semantic-warning) |
var(–color-semantic-warning) |
--danger |
var(--color-semantic-danger) |
var(–color-semantic-danger) |
--info |
var(--color-semantic-info) |
var(–color-semantic-info) |
--selection-bg |
var(--color-semantic-selection-bg) |
var(–color-semantic-selection-bg) |
--selection-fg |
var(--color-semantic-selection-fg) |
var(–color-semantic-selection-fg) |
--focus-ring |
var(--color-semantic-focus-ring) |
var(–color-semantic-focus-ring) |
--overlay |
var(--color-effect-overlay) |
var(–color-effect-overlay) |
--scrim |
var(--color-effect-scrim) |
var(–color-effect-scrim) |
--gradient-primary |
var(--color-effect-gradient-primary) |
var(–color-effect-gradient-primary) |
--gradient-secondary |
var(--color-effect-gradient-secondary) |
var(–color-effect-gradient-secondary) |
--gradient-surface |
var(--color-effect-gradient-surface) |
var(–color-effect-gradient-surface) |
--copy-code-bg |
var(--color-effect-copy-code-bg) |
var(–color-effect-copy-code-bg) |
--copy-code-fg |
var(--color-effect-copy-code-fg) |
var(–color-effect-copy-code-fg) |
--tooltip-bg |
var(--color-effect-tooltip-bg) |
var(–color-effect-tooltip-bg) |
--tooltip-fg |
var(--color-effect-tooltip-fg) |
var(–color-effect-tooltip-fg) |
--glass-bg |
var(--color-effect-glass-bg) |
var(–color-effect-glass-bg) |
--glass-border |
var(--color-effect-glass-border) |
var(–color-effect-glass-border) |
--scrollbar-thumb |
var(--color-neutral-scrollbar-thumb) |
var(–color-neutral-scrollbar-thumb) |
--scrollbar-thumb-hover |
var(--color-neutral-scrollbar-thumb-hover) |
var(–color-neutral-scrollbar-thumb-hover) |
--scrollbar-thumb-border |
var(--color-neutral-scrollbar-thumb-border) |
var(–color-neutral-scrollbar-thumb-border) |
--scrollbar-thumb-border-alt |
var(--color-neutral-scrollbar-thumb-border-alt) |
var(–color-neutral-scrollbar-thumb-border-alt) |
--scrollbar-thumb-border-gist |
var(--color-neutral-scrollbar-thumb-border-gist) |
var(–color-neutral-scrollbar-thumb-border-gist) |
--scrollbar-thumb-alt |
var(--color-neutral-scrollbar-thumb-alt) |
var(–color-neutral-scrollbar-thumb-alt) |
--scrollbar-thumb-alt-hover |
var(--color-neutral-scrollbar-thumb-alt-hover) |
var(–color-neutral-scrollbar-thumb-alt-hover) |
--scrollbar-thumb-gist |
var(--color-neutral-scrollbar-thumb-gist) |
var(–color-neutral-scrollbar-thumb-gist) |
--scrollbar-thumb-gist-hover |
var(--color-neutral-scrollbar-thumb-gist-hover) |
var(–color-neutral-scrollbar-thumb-gist-hover) |
| 변수 | 값 | 미리보기 |
|---|---|---|
--color-brand-primary |
rgb(255, 176, 138) |
rgb(255, 176, 138) |
--color-brand-primary-hover |
rgb(255, 156, 112) |
rgb(255, 156, 112) |
--color-brand-primary-active |
rgb(255, 138, 88) |
rgb(255, 138, 88) |
--color-brand-primary-muted |
rgba(255, 176, 138, 0.18) |
rgba(255, 176, 138, 0.18) |
--color-brand-primary-contrast |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-brand-secondary |
rgb(255, 198, 150) |
rgb(255, 198, 150) |
--color-brand-secondary-hover |
rgb(255, 176, 120) |
rgb(255, 176, 120) |
--color-brand-secondary-active |
rgb(255, 155, 92) |
rgb(255, 155, 92) |
--color-brand-secondary-muted |
rgba(255, 198, 150, 0.18) |
rgba(255, 198, 150, 0.18) |
--color-brand-secondary-contrast |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-neutral-page-background |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-neutral-surface |
rgb(31, 24, 21) |
rgb(31, 24, 21) |
--color-neutral-surface-quiet |
rgb(40, 31, 27) |
rgb(40, 31, 27) |
--color-neutral-surface-strong |
rgb(52, 41, 36) |
rgb(52, 41, 36) |
--color-neutral-surface-elevated |
rgb(35, 27, 24) |
rgb(35, 27, 24) |
--color-neutral-text |
rgb(245, 236, 230) |
rgb(245, 236, 230) |
--color-neutral-text-muted |
rgb(201, 184, 173) |
rgb(201, 184, 173) |
--color-neutral-text-subtle |
rgb(136, 120, 111) |
rgb(136, 120, 111) |
--color-neutral-border |
rgb(69, 56, 50) |
rgb(69, 56, 50) |
--color-neutral-border-strong |
rgb(92, 75, 66) |
rgb(92, 75, 66) |
--color-neutral-code-bg |
rgb(40, 31, 27) |
rgb(40, 31, 27) |
--color-neutral-code-block-bg |
rgb(24, 18, 16) |
rgb(24, 18, 16) |
--color-neutral-code-block-fg |
rgb(246, 231, 224) |
rgb(246, 231, 224) |
--color-neutral-code-inline-bg |
rgba(255, 176, 138, 0.08) |
rgba(255, 176, 138, 0.08) |
--color-neutral-code-inline-fg |
rgb(245, 236, 230) |
rgb(245, 236, 230) |
--color-neutral-scrollbar-thumb |
rgb(122, 103, 94) |
rgb(122, 103, 94) |
--color-neutral-scrollbar-thumb-hover |
rgb(154, 134, 124) |
rgb(154, 134, 124) |
--color-neutral-scrollbar-thumb-border |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-neutral-scrollbar-thumb-border-alt |
rgb(31, 24, 21) |
rgb(31, 24, 21) |
--color-neutral-scrollbar-thumb-border-gist |
rgb(255, 250, 246) |
rgb(255, 250, 246) |
--color-neutral-scrollbar-thumb-alt |
rgb(122, 103, 94) |
rgb(122, 103, 94) |
--color-neutral-scrollbar-thumb-alt-hover |
rgb(154, 134, 124) |
rgb(154, 134, 124) |
--color-neutral-scrollbar-thumb-gist |
rgb(173, 154, 144) |
rgb(173, 154, 144) |
--color-neutral-scrollbar-thumb-gist-hover |
rgb(132, 112, 102) |
rgb(132, 112, 102) |
--color-semantic-success |
rgb(94, 213, 128) |
rgb(94, 213, 128) |
--color-semantic-warning |
rgb(255, 199, 98) |
rgb(255, 199, 98) |
--color-semantic-danger |
rgb(255, 146, 136) |
rgb(255, 146, 136) |
--color-semantic-info |
rgb(255, 176, 138) |
rgb(255, 176, 138) |
--color-semantic-selection-bg |
rgba(255, 176, 138, 0.22) |
rgba(255, 176, 138, 0.22) |
--color-semantic-selection-fg |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-semantic-focus-ring |
rgba(255, 176, 138, 0.48) |
rgba(255, 176, 138, 0.48) |
--color-effect-overlay |
rgba(22, 16, 14, 0.22) |
rgba(22, 16, 14, 0.22) |
--color-effect-scrim |
rgba(22, 16, 14, 0.70) |
rgba(22, 16, 14, 0.70) |
--color-effect-gradient-primary |
linear-gradient(135deg, rgb(255, 176, 138) 0%, rgb(255, 138, 88) 100%) |
linear-gradient(135deg, rgb(255, 176, 138) 0%, rgb(255, 138, 88) 100%) |
--color-effect-gradient-secondary |
linear-gradient(135deg, rgb(31, 24, 21) 0%, rgb(40, 31, 27) 100%) |
linear-gradient(135deg, rgb(31, 24, 21) 0%, rgb(40, 31, 27) 100%) |
--color-effect-gradient-surface |
linear-gradient(180deg, rgba(31, 24, 21, 0.98) 0%, rgba(22, 16, 14, 0.98) 100%) |
linear-gradient(180deg, rgba(31, 24, 21, 0.98) 0%, rgba(22, 16, 14, 0.98) 100%) |
--color-effect-copy-code-bg |
rgba(255, 246, 240, 0.92) |
rgba(255, 246, 240, 0.92) |
--color-effect-copy-code-fg |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-effect-tooltip-bg |
rgba(255, 247, 241, 0.92) |
rgba(255, 247, 241, 0.92) |
--color-effect-tooltip-fg |
rgb(22, 16, 14) |
rgb(22, 16, 14) |
--color-effect-glass-bg |
rgba(31, 24, 21, 0.74) |
rgba(31, 24, 21, 0.74) |
--color-effect-glass-border |
rgba(255, 255, 255, 0.14) |
rgba(255, 255, 255, 0.14) |
--shadow-sm |
0 1px 2px rgba(0, 0, 0, 0.24) |
0 1px 2px rgba(0, 0, 0, 0.24) |
--shadow-md |
0 10px 28px rgba(0, 0, 0, 0.28) |
0 10px 28px rgba(0, 0, 0, 0.28) |
--shadow-lg |
0 18px 50px rgba(0, 0, 0, 0.34) |
0 18px 50px rgba(0, 0, 0, 0.34) |
| 변수 | 값 | 미리보기 |
|---|---|---|
--font-sans |
var(--font-sans-latin-europe) |
Aa 가나다 123 var(–font-sans-latin-europe) |
--font-body |
var(--font-sans-latin-europe) |
Aa 가나다 123 var(–font-sans-latin-europe) |
--font-heading |
var(--font-sans-latin-europe) |
Aa 가나다 123 var(–font-sans-latin-europe) |
--font-display |
var(--font-display-latin) |
Aa 가나다 123 var(–font-display-latin) |
--font-ui |
var(--font-sans-ui) |
Aa 가나다 123 var(–font-sans-ui) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--font-feature-settings |
normal |
Aa 가나다 123 normal |
--word-break-body |
normal |
normal |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.65 |
한 줄 / 두 줄 / 세 줄 1.65 |
--line-height-relaxed |
1.8 |
한 줄 / 두 줄 / 세 줄 1.8 |
--font-sans |
var(--font-sans-korean) |
Aa 가나다 123 var(–font-sans-korean) |
--font-body |
var(--font-sans-korean) |
Aa 가나다 123 var(–font-sans-korean) |
--font-heading |
var(--font-sans-korean) |
Aa 가나다 123 var(–font-sans-korean) |
--font-display |
var(--font-sans-korean) |
Aa 가나다 123 var(–font-sans-korean) |
--font-ui |
var(--font-sans-korean) |
Aa 가나다 123 var(–font-sans-korean) |
--font-mono |
var(--font-mono-cjk) |
Aa 가나다 123 var(–font-mono-cjk) |
--font-feature-settings |
var(--font-feature-settings-cjk) |
Aa 가나다 123 var(–font-feature-settings-cjk) |
--word-break-body |
keep-all |
keep-all |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--line-break-body |
strict |
strict |
--line-height-base |
1.75 |
한 줄 / 두 줄 / 세 줄 1.75 |
--line-height-relaxed |
1.9 |
한 줄 / 두 줄 / 세 줄 1.9 |
--page-title-letter-spacing |
-0.01em |
-0.01em |
--heading-letter-spacing |
-0.01em |
-0.01em |
--font-sans |
var(--font-sans-japanese) |
Aa 가나다 123 var(–font-sans-japanese) |
--font-body |
var(--font-sans-japanese) |
Aa 가나다 123 var(–font-sans-japanese) |
--font-heading |
var(--font-sans-japanese) |
Aa 가나다 123 var(–font-sans-japanese) |
--font-display |
var(--font-sans-japanese) |
Aa 가나다 123 var(–font-sans-japanese) |
--font-ui |
var(--font-sans-japanese) |
Aa 가나다 123 var(–font-sans-japanese) |
--font-mono |
var(--font-mono-cjk) |
Aa 가나다 123 var(–font-mono-cjk) |
--font-feature-settings |
var(--font-feature-settings-cjk) |
Aa 가나다 123 var(–font-feature-settings-cjk) |
--word-break-body |
keep-all |
keep-all |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--line-break-body |
strict |
strict |
--line-height-base |
1.8 |
한 줄 / 두 줄 / 세 줄 1.8 |
--line-height-relaxed |
1.95 |
한 줄 / 두 줄 / 세 줄 1.95 |
--page-title-letter-spacing |
-0.01em |
-0.01em |
--heading-letter-spacing |
-0.01em |
-0.01em |
--font-sans |
var(--font-sans-chinese-simplified) |
Aa 가나다 123 var(–font-sans-chinese-simplified) |
--font-body |
var(--font-sans-chinese-simplified) |
Aa 가나다 123 var(–font-sans-chinese-simplified) |
--font-heading |
var(--font-sans-chinese-simplified) |
Aa 가나다 123 var(–font-sans-chinese-simplified) |
--font-display |
var(--font-sans-chinese-simplified) |
Aa 가나다 123 var(–font-sans-chinese-simplified) |
--font-ui |
var(--font-sans-chinese-simplified) |
Aa 가나다 123 var(–font-sans-chinese-simplified) |
--font-mono |
var(--font-mono-cjk) |
Aa 가나다 123 var(–font-mono-cjk) |
--font-feature-settings |
var(--font-feature-settings-cjk) |
Aa 가나다 123 var(–font-feature-settings-cjk) |
--word-break-body |
keep-all |
keep-all |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--line-break-body |
strict |
strict |
--line-height-base |
1.78 |
한 줄 / 두 줄 / 세 줄 1.78 |
--line-height-relaxed |
1.92 |
한 줄 / 두 줄 / 세 줄 1.92 |
--page-title-letter-spacing |
-0.01em |
-0.01em |
--heading-letter-spacing |
-0.01em |
-0.01em |
--font-sans |
var(--font-sans-chinese-traditional) |
Aa 가나다 123 var(–font-sans-chinese-traditional) |
--font-body |
var(--font-sans-chinese-traditional) |
Aa 가나다 123 var(–font-sans-chinese-traditional) |
--font-heading |
var(--font-sans-chinese-traditional) |
Aa 가나다 123 var(–font-sans-chinese-traditional) |
--font-display |
var(--font-sans-chinese-traditional) |
Aa 가나다 123 var(–font-sans-chinese-traditional) |
--font-ui |
var(--font-sans-chinese-traditional) |
Aa 가나다 123 var(–font-sans-chinese-traditional) |
--font-mono |
var(--font-mono-cjk) |
Aa 가나다 123 var(–font-mono-cjk) |
--font-feature-settings |
var(--font-feature-settings-cjk) |
Aa 가나다 123 var(–font-feature-settings-cjk) |
--word-break-body |
keep-all |
keep-all |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--line-break-body |
strict |
strict |
--line-height-base |
1.78 |
한 줄 / 두 줄 / 세 줄 1.78 |
--line-height-relaxed |
1.92 |
한 줄 / 두 줄 / 세 줄 1.92 |
--page-title-letter-spacing |
-0.01em |
-0.01em |
--heading-letter-spacing |
-0.01em |
-0.01em |
--font-sans |
var(--font-sans-vietnamese) |
Aa 가나다 123 var(–font-sans-vietnamese) |
--font-body |
var(--font-sans-vietnamese) |
Aa 가나다 123 var(–font-sans-vietnamese) |
--font-heading |
var(--font-sans-vietnamese) |
Aa 가나다 123 var(–font-sans-vietnamese) |
--font-display |
var(--font-sans-vietnamese) |
Aa 가나다 123 var(–font-sans-vietnamese) |
--font-ui |
var(--font-sans-vietnamese) |
Aa 가나다 123 var(–font-sans-vietnamese) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--word-break-body |
normal |
normal |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.7 |
한 줄 / 두 줄 / 세 줄 1.7 |
--line-height-relaxed |
1.85 |
한 줄 / 두 줄 / 세 줄 1.85 |
--font-sans |
var(--font-sans-southeastasia) |
Aa 가나다 123 var(–font-sans-southeastasia) |
--font-body |
var(--font-sans-southeastasia) |
Aa 가나다 123 var(–font-sans-southeastasia) |
--font-heading |
var(--font-sans-southeastasia) |
Aa 가나다 123 var(–font-sans-southeastasia) |
--font-display |
var(--font-sans-southeastasia) |
Aa 가나다 123 var(–font-sans-southeastasia) |
--font-ui |
var(--font-sans-southeastasia) |
Aa 가나다 123 var(–font-sans-southeastasia) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--word-break-body |
normal |
normal |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.7 |
한 줄 / 두 줄 / 세 줄 1.7 |
--line-height-relaxed |
1.85 |
한 줄 / 두 줄 / 세 줄 1.85 |
--font-sans |
var(--font-sans-thai) |
Aa 가나다 123 var(–font-sans-thai) |
--font-body |
var(--font-sans-thai) |
Aa 가나다 123 var(–font-sans-thai) |
--font-heading |
var(--font-sans-thai) |
Aa 가나다 123 var(–font-sans-thai) |
--font-display |
var(--font-sans-thai) |
Aa 가나다 123 var(–font-sans-thai) |
--font-ui |
var(--font-sans-thai) |
Aa 가나다 123 var(–font-sans-thai) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--word-break-body |
normal |
normal |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.78 |
한 줄 / 두 줄 / 세 줄 1.78 |
--line-height-relaxed |
1.92 |
한 줄 / 두 줄 / 세 줄 1.92 |
--font-sans |
var(--font-sans-cyrillic) |
Aa 가나다 123 var(–font-sans-cyrillic) |
--font-body |
var(--font-sans-cyrillic) |
Aa 가나다 123 var(–font-sans-cyrillic) |
--font-heading |
var(--font-sans-cyrillic) |
Aa 가나다 123 var(–font-sans-cyrillic) |
--font-display |
var(--font-sans-cyrillic) |
Aa 가나다 123 var(–font-sans-cyrillic) |
--font-ui |
var(--font-sans-cyrillic) |
Aa 가나다 123 var(–font-sans-cyrillic) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--word-break-body |
normal |
normal |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.65 |
한 줄 / 두 줄 / 세 줄 1.65 |
--line-height-relaxed |
1.8 |
한 줄 / 두 줄 / 세 줄 1.8 |
--font-sans |
var(--font-sans-greek) |
Aa 가나다 123 var(–font-sans-greek) |
--font-body |
var(--font-sans-greek) |
Aa 가나다 123 var(–font-sans-greek) |
--font-heading |
var(--font-sans-greek) |
Aa 가나다 123 var(–font-sans-greek) |
--font-display |
var(--font-sans-greek) |
Aa 가나다 123 var(–font-sans-greek) |
--font-ui |
var(--font-sans-greek) |
Aa 가나다 123 var(–font-sans-greek) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--word-break-body |
normal |
normal |
--word-break-table |
keep-all |
keep-all |
--word-break-menu |
keep-all |
keep-all |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.68 |
한 줄 / 두 줄 / 세 줄 1.68 |
--line-height-relaxed |
1.82 |
한 줄 / 두 줄 / 세 줄 1.82 |
--font-sans |
var(--font-sans-arabic) |
Aa 가나다 123 var(–font-sans-arabic) |
--font-body |
var(--font-sans-arabic) |
Aa 가나다 123 var(–font-sans-arabic) |
--font-heading |
var(--font-sans-arabic) |
Aa 가나다 123 var(–font-sans-arabic) |
--font-display |
var(--font-sans-arabic) |
Aa 가나다 123 var(–font-sans-arabic) |
--font-ui |
var(--font-sans-arabic) |
Aa 가나다 123 var(–font-sans-arabic) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--direction-page |
rtl |
rtl |
--direction-code |
ltr |
ltr |
--unicode-bidi-page |
plaintext |
plaintext |
--word-break-body |
normal |
normal |
--word-break-table |
normal |
normal |
--word-break-menu |
normal |
normal |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.85 |
한 줄 / 두 줄 / 세 줄 1.85 |
--line-height-relaxed |
2 |
한 줄 / 두 줄 / 세 줄 2 |
--page-title-letter-spacing |
0 |
0 |
--heading-letter-spacing |
0 |
0 |
--font-sans |
var(--font-sans-hebrew) |
Aa 가나다 123 var(–font-sans-hebrew) |
--font-body |
var(--font-sans-hebrew) |
Aa 가나다 123 var(–font-sans-hebrew) |
--font-heading |
var(--font-sans-hebrew) |
Aa 가나다 123 var(–font-sans-hebrew) |
--font-display |
var(--font-sans-hebrew) |
Aa 가나다 123 var(–font-sans-hebrew) |
--font-ui |
var(--font-sans-hebrew) |
Aa 가나다 123 var(–font-sans-hebrew) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--direction-page |
rtl |
rtl |
--direction-code |
ltr |
ltr |
--unicode-bidi-page |
plaintext |
plaintext |
--word-break-body |
normal |
normal |
--word-break-table |
normal |
normal |
--word-break-menu |
normal |
normal |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.85 |
한 줄 / 두 줄 / 세 줄 1.85 |
--line-height-relaxed |
2 |
한 줄 / 두 줄 / 세 줄 2 |
--page-title-letter-spacing |
0 |
0 |
--heading-letter-spacing |
0 |
0 |
--font-sans |
var(--font-sans-devanagari) |
Aa 가나다 123 var(–font-sans-devanagari) |
--font-body |
var(--font-sans-devanagari) |
Aa 가나다 123 var(–font-sans-devanagari) |
--font-heading |
var(--font-sans-devanagari) |
Aa 가나다 123 var(–font-sans-devanagari) |
--font-display |
var(--font-sans-devanagari) |
Aa 가나다 123 var(–font-sans-devanagari) |
--font-ui |
var(--font-sans-devanagari) |
Aa 가나다 123 var(–font-sans-devanagari) |
--font-mono |
var(--font-mono-latin) |
Aa 가나다 123 var(–font-mono-latin) |
--word-break-body |
normal |
normal |
--word-break-table |
normal |
normal |
--word-break-menu |
normal |
normal |
--hyphens-body |
auto |
auto |
--line-break-body |
auto |
auto |
--line-height-base |
1.78 |
한 줄 / 두 줄 / 세 줄 1.78 |
--line-height-relaxed |
1.95 |
한 줄 / 두 줄 / 세 줄 1.95 |
| 변수 | 값 | 미리보기 |
|---|
실제로 확인해야 하는 것
theme-vars.css하나만 바꿔도 색, 간격, 반경, 텍스트가 같이 움직이는가- 라이트와 다크 팔레트가 같은 변수명을 기준으로 교체되는가
- 컴포넌트 전용 값이 기초 토큰을 다시 덮어쓰지 않는가
- 언어별 서체 정책이 본문과 코드, 내비게이션에 따로 적용되는가