이 페이지는 themes/(0000-0000-0000-0001)/assets/css/core/theme-vars.css 와
themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/ 아래의 모듈 파일을 정확히 눈으로 확인하기 위한 인벤토리다.

중앙 제어의 해석 기준

  • 디자인 값은 페이지가 아니라 theme-vars 에서 시작한다.
  • 라이트/다크/언어별 프로필은 같은 변수 이름을 서로 다른 값으로 채운다.
  • 컴포넌트 CSS는 토큰을 복제하지 않고 상속한다.
  • 이 페이지의 역할은 “무엇이 존재하는가”를 빠짐없이 보여 주는 것이다.

모듈 지도

모듈 파일 역할 변수 수 경로
00-foundation.css foundation 26 theme-vars/00-foundation.css
10-typography.css typography 114 theme-vars/10-typography.css
20-shape.css shape / motion 32 theme-vars/20-shape.css
30-components.css components 313 theme-vars/30-components.css
40-colors-light.css colors(light) 105 theme-vars/40-colors-light.css
50-colors-dark.css colors(dark) 55 theme-vars/50-colors-dark.css
60-language.css language 19 theme-vars/60-language.css
70-global.css global 0 theme-vars/70-global.css

시각적 기준점

design probe 중앙 소스는 `theme-vars.css`이며, 이 페이지는 구조 확인용 안내문이다.
중앙 제어 파일
`themes/(0000-0000-0000-0001)/assets/css/core/theme-vars/`
이 파일만 수정하면 전역 톤/간격/타이포/상태값이 함께 바뀌도록 설계되어 있다.
해석 기준
• 색상, 간격, 반경, 그림자, 상호작용 상태는 모두 토큰으로 관리한다.
• 컴포넌트 CSS는 고정 수치보다 토큰을 우선 사용한다.
• 레거시 디자인 경로는 사용하지 않는다.

예시 확인 순서

  1. 00-foundation.css 로 폭, 간격, 브레이크포인트를 확인한다.
  2. 10-typography.css 와 60-language.css 로 서체와 언어 프로필을 확인한다.
  3. 20-shape.css 로 반경, 그림자, 제어 크기를 확인한다.
  4. 30-components.css 로 버튼, CTA, 카드, 코드 영역의 기준값을 확인한다.
  5. 40-colors-light.css 와 50-colors-dark.css 로 라이트/다크 대비를 비교한다.
  6. 70-global.css 로 선택/아이콘/전역 미세 규칙을 확인한다.

모듈별 상세 인벤토리

00-foundation.css · 26개 변수

이 모듈은 foundation 를 담당한다. 실제 UI는 이 파일의 값들을 상속해서 렌더링된다.

변수 값 사용 예
--page-max-width 1120px --page-max-width
--content-max-width 760px --content-max-width
--nav-max-width 1120px --nav-max-width
--page-padding 24px --page-padding
--page-padding-mobile 16px --page-padding-mobile
--gap 24px --gap
--gap-mobile 16px --gap-mobile
--content-gap 24px --content-gap
--nav-width var(--nav-max-width) --nav-width
--breakpoint-sm 340px --breakpoint-sm
--breakpoint-md 768px --breakpoint-md
--breakpoint-lg 900px --breakpoint-lg
--breakpoint-xl 1120px --breakpoint-xl
--cover-responsive-breakpoint-md 768px --cover-responsive-breakpoint-md
--cover-responsive-width-md 720px --cover-responsive-width-md
--main-width var(--content-max-width) --main-width
--header-height 64px --header-height
--footer-height 64px --footer-height
--space-2xs 4px --space-2xs
--space-xs 6px --space-xs
--space-sm 8px --space-sm
--space-md 12px --space-md
--space-lg 16px --space-lg
--space-xl 20px --space-xl
--space-2xl 24px --space-2xl
--space-3xl 32px --space-3xl

10-typography.css · 114개 변수

이 모듈은 typography 를 담당한다. 실제 UI는 이 파일의 값들을 상속해서 렌더링된다.

변수 값 사용 예
--font-sans-latin 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif --font-sans-latin
--font-sans-ui var(--font-sans-latin) --font-sans-ui
--font-serif-latin Georgia, 'Times New Roman', Times, serif --font-serif-latin
--font-display-latin var(--font-sans-latin) --font-display-latin
--font-mono-latin ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace --font-mono-latin
--font-sans-latin-europe 'Inter', 'Avenir Next', 'Avenir', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif --font-sans-latin-europe
--font-sans-east-asia var(--font-sans-latin) --font-sans-east-asia
--font-sans-southeastasia 'Inter', 'Noto Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif --font-sans-southeastasia
--font-sans-southasia 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Noto Sans Bengali', 'Noto Sans Tamil', sans-serif --font-sans-southasia
--font-sans-rtl 'Noto Sans Arabic', 'Noto Naskh Arabic', 'Noto Sans Hebrew', Tahoma, Arial, sans-serif --font-sans-rtl
--font-serif-latin-europe Georgia, 'Times New Roman', Times, serif --font-serif-latin-europe
--font-mono-cjk 'SFMono-Regular', 'SF Mono', ui-monospace, Consolas, 'Liberation Mono', Menlo, monospace --font-mono-cjk
--font-emoji 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif --font-emoji
--font-sans-korean 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif --font-sans-korean
--font-sans-japanese 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Yu Gothic UI', 'Meiryo', sans-serif --font-sans-japanese
--font-sans-chinese-simplified 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', sans-serif --font-sans-chinese-simplified
--font-sans-chinese-traditional 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', sans-serif --font-sans-chinese-traditional
--font-sans-vietnamese 'Noto Sans', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif --font-sans-vietnamese
--font-sans-cyrillic 'Noto Sans', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif --font-sans-cyrillic
--font-sans-greek 'Noto Sans', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif --font-sans-greek
--font-sans-arabic 'Noto Sans Arabic', 'Noto Naskh Arabic', Tahoma, Arial, sans-serif --font-sans-arabic
--font-sans-hebrew 'Noto Sans Hebrew', 'Arial Hebrew', Arial, sans-serif --font-sans-hebrew
--font-sans-devanagari 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif --font-sans-devanagari
--font-sans-bengali 'Noto Sans Bengali', 'Nirmala UI', sans-serif --font-sans-bengali
--font-sans-thai 'Noto Sans Thai', 'Leelawadee UI', sans-serif --font-sans-thai
--font-sans-cjk var(--font-sans-japanese) --font-sans-cjk
--font-script-latin var(--font-sans-latin) --font-script-latin
--font-script-cjk var(--font-sans-cjk) --font-script-cjk
--font-script-cyrillic var(--font-sans-cyrillic) --font-script-cyrillic
--font-script-greek var(--font-sans-greek) --font-script-greek
--font-script-rtl var(--font-sans-rtl) --font-script-rtl
--font-script-indic var(--font-sans-southasia) --font-script-indic
--font-script-thai var(--font-sans-thai) --font-script-thai
--font-script-southeastasia var(--font-sans-southeastasia) --font-script-southeastasia
--font-sans var(--font-sans-latin) --font-sans
--font-display var(--font-display-latin) --font-display
--font-body var(--font-sans) --font-body
--font-heading var(--font-sans) --font-heading
--font-ui var(--font-sans-ui) --font-ui
--font-mono var(--font-mono-latin) --font-mono
--font-size-xs 12px --font-size-xs
--font-size-sm 14px --font-size-sm
--font-size-md 15px --font-size-md
--font-size-base 16px --font-size-base
--font-size-lg 18px --font-size-lg
--font-size-xl 22px --font-size-xl
--font-size-2xl 28px --font-size-2xl
--font-size-3xl 36px --font-size-3xl
--font-size-4xl 48px --font-size-4xl
--font-size-5xl 64px --font-size-5xl
--page-title-size 40px --page-title-size
--page-title-size-mobile 32px --page-title-size-mobile
--page-title-line-height 1.15 --page-title-line-height
--page-title-letter-spacing -0.02em --page-title-letter-spacing
--heading-1-size 32px --heading-1-size
--heading-1-size-mobile 26px --heading-1-size-mobile
--heading-2-size 26px --heading-2-size
--heading-2-size-mobile 22px --heading-2-size-mobile
--heading-3-size 22px --heading-3-size
--heading-3-size-mobile 18px --heading-3-size-mobile
--heading-4-size 18px --heading-4-size
--heading-4-size-mobile 16px --heading-4-size-mobile
--heading-5-size 16px --heading-5-size
--heading-5-size-mobile 15px --heading-5-size-mobile
--heading-6-size 14px --heading-6-size
--heading-6-size-mobile 14px --heading-6-size-mobile
--heading-line-height 1.25 --heading-line-height
--heading-letter-spacing -0.01em --heading-letter-spacing
--heading-font-weight var(--font-weight-bold) --heading-font-weight
--page-header-font-weight var(--font-weight-bold) --page-header-font-weight
--archive-entry-title-font-weight var(--font-weight-medium) --archive-entry-title-font-weight
--archive-entry-title-line-height var(--line-height-small) --archive-entry-title-line-height
--nav-logo-font-weight var(--font-weight-bold) --nav-logo-font-weight
--nav-link-font-weight var(--font-weight-medium) --nav-link-font-weight
--nav-link-active-font-weight var(--font-weight-medium) --nav-link-active-font-weight
--not-found-font-weight var(--font-weight-bold) --not-found-font-weight
--search-input-font-weight var(--font-weight-bold) --search-input-font-weight
--search-result-font-weight var(--font-weight-medium) --search-result-font-weight
--button-font-weight var(--font-weight-medium) --button-font-weight
--chip-font-weight var(--font-weight-medium) --chip-font-weight
--toc-details-font-weight var(--font-weight-medium) --toc-details-font-weight
--heading-anchor-font-weight var(--font-weight-medium) --heading-anchor-font-weight
--post-content-dl-term-font-weight var(--font-weight-bold) --post-content-dl-term-font-weight
--post-content-figure-caption-font-weight var(--font-weight-semibold) --post-content-figure-caption-font-weight
--post-content-figure-caption-body-font-weight var(--font-weight-regular) --post-content-figure-caption-body-font-weight
--paginav-hover-shadow 0 1px 0 var(--accent) --paginav-hover-shadow
--code-token-strong-font-weight var(--font-weight-bold) --code-token-strong-font-weight
--copy-code-font-weight var(--font-weight-medium) --copy-code-font-weight
--line-height-tight 1.2 --line-height-tight
--line-height-base 1.6 --line-height-base
--line-height-relaxed 1.75 --line-height-relaxed
--line-height-ui 1.5 --line-height-ui
--line-height-small 1.35 --line-height-small
--letter-spacing-normal 0 --letter-spacing-normal
--text-rendering optimizeLegibility --text-rendering
--font-synthesis weight style small-caps --font-synthesis
--font-feature-settings normal --font-feature-settings
--font-feature-settings-cjk normal --font-feature-settings-cjk
--font-feature-settings-rtl normal --font-feature-settings-rtl
--word-break-body break-word --word-break-body
--word-break-table keep-all --word-break-table
--word-break-menu keep-all --word-break-menu
--word-break-code break-all --word-break-code
--overflow-wrap-body anywhere --overflow-wrap-body
--line-break-body auto --line-break-body
--direction-page ltr --direction-page
--direction-code ltr --direction-code
--unicode-bidi-page normal --unicode-bidi-page
--hyphens-body manual --hyphens-body
--font-weight-regular 400 --font-weight-regular
--font-weight-medium 500 --font-weight-medium
--font-weight-semibold 600 --font-weight-semibold
--font-weight-bold 700 --font-weight-bold
--font-weight-black 900 --font-weight-black

20-shape.css · 32개 변수

이 모듈은 shape / motion 를 담당한다. 실제 UI는 이 파일의 값들을 상속해서 렌더링된다.

변수 값 사용 예
--radius-xs 4px --radius-xs
--radius-sm 8px --radius-sm
--radius-md 12px --radius-md
--radius-lg 16px --radius-lg
--radius-xl 20px --radius-xl
--radius-full 9999px --radius-full
--radius var(--radius-md) --radius
--border-width-thin 1px --border-width-thin
--border-width-strong 2px --border-width-strong
--control-size-sm 32px --control-size-sm
--control-size-md 40px --control-size-md
--control-size-lg 44px --control-size-lg
--control-padding-x 14px --control-padding-x
--control-padding-y 10px --control-padding-y
--control-icon-size 18px --control-icon-size
--control-gap 10px --control-gap
--transition-fast 120ms ease --transition-fast
--transition-base 200ms ease --transition-base
--transition-slow 300ms ease --transition-slow
--interactive-transition transform 0.1s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease --interactive-transition
--focus-outline-width 2px --focus-outline-width
--focus-outline-offset 2px --focus-outline-offset
--control-press-scale 0.98 --control-press-scale
--viewport-full-height 100vh --viewport-full-height
--page-min-height calc(var(--viewport-full-height) - var(--header-height) - var(--footer-height)) --page-min-height
--profile-page-min-height calc(var(--viewport-full-height) - var(--header-height) - var(--footer-height) - (var(--gap) * 2)) --profile-page-min-height
--autofill-shadow-spread 50px --autofill-shadow-spread
--shadow-sm 0 1px 2px rgba(72, 32, 19, 0.08) --shadow-sm
--shadow-md 0 10px 28px rgba(72, 32, 19, 0.10) --shadow-md
--shadow-lg 0 18px 50px rgba(72, 32, 19, 0.14) --shadow-lg
--z-index-floating 99 --z-index-floating
--z-index-overlay 120 --z-index-overlay

30-components.css · 313개 변수

이 모듈은 components 를 담당한다. 실제 UI는 이 파일의 값들을 상속해서 렌더링된다.

변수 값 사용 예
--button-radius var(--radius-md) --button-radius
--button-border-width 1px --button-border-width
--button-border-color var(--border) --button-border-color
--button-primary-bg var(--accent) --button-primary-bg
--button-primary-fg var(--accent-contrast) --button-primary-fg
--button-secondary-bg var(--surface-quiet) --button-secondary-bg
--button-secondary-fg var(--primary) --button-secondary-fg
--button-secondary-border-color var(--border) --button-secondary-border-color
--button-secondary-shadow none --button-secondary-shadow
--cta-radius var(--button-radius) --cta-radius
--cta-border-width var(--button-border-width) --cta-border-width
--cta-border-color var(--button-border-color) --cta-border-color
--cta-primary-bg var(--button-primary-bg) --cta-primary-bg
--cta-primary-fg var(--button-primary-fg) --cta-primary-fg
--cta-secondary-bg var(--button-secondary-bg) --cta-secondary-bg
--cta-secondary-fg var(--button-secondary-fg) --cta-secondary-fg
--cta-shadow var(--shadow-sm) --cta-shadow
--cta-shadow-hover var(--shadow-md) --cta-shadow-hover
--cta-gap var(--control-gap) --cta-gap
--cta-padding-x var(--control-padding-x) --cta-padding-x
--cta-padding-y var(--control-padding-y) --cta-padding-y
--cta-min-height var(--control-size-md) --cta-min-height
--cta-note-font-size var(--font-size-xs) --cta-note-font-size
--cta-subtitle-font-size var(--font-size-sm) --cta-subtitle-font-size
--cta-inline-max-width min(100%, 44rem) --cta-inline-max-width
--cta-block-max-width min(100%, 50rem) --cta-block-max-width
--cta-frame-gap var(--space-sm) --cta-frame-gap
--cta-support-gap var(--space-sm) --cta-support-gap
--cta-support-padding-block-start var(--space-md) --cta-support-padding-block-start
--cta-support-border-width var(--border-width-thin) --cta-support-border-width
--cta-support-border-color var(--border) --cta-support-border-color
--cta-support-border var(--cta-support-border-width) solid var(--cta-support-border-color) --cta-support-border
--cta-link-gap 0 --cta-link-gap
--cta-link-padding-x 16px --cta-link-padding-x
--cta-link-padding-y 10px --cta-link-padding-y
--cta-link-min-height 44px --cta-link-min-height
--cta-link-radius var(--button-radius) --cta-link-radius
--cta-link-border-width var(--button-border-width) --cta-link-border-width
--cta-link-border-color var(--button-border-color) --cta-link-border-color
--cta-link-background var(--surface-quiet) --cta-link-background
--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%)) --cta-link-background-image
--cta-link-foreground var(--primary) --cta-link-foreground
--cta-link-font-family var(--font-ui) --cta-link-font-family
--cta-link-letter-spacing -0.004em --cta-link-letter-spacing
--cta-link-shadow var(--shadow-sm) --cta-link-shadow
--cta-link-shadow-hover var(--shadow-md) --cta-link-shadow-hover
--cta-link-hover-border-color var(--border-strong) --cta-link-hover-border-color
--cta-link-hover-transform translateY(-1px) --cta-link-hover-transform
--cta-link-active-transform translateY(0) scale(0.99) --cta-link-active-transform
--cta-link-disabled-opacity 0.58 --cta-link-disabled-opacity
--cta-link-icon-size var(--control-icon-size) --cta-link-icon-size
--cta-link-icon-color var(--accent) --cta-link-icon-color
--cta-link-icon-opacity 1 --cta-link-icon-opacity
--cta-link-label-font-weight var(--font-weight-medium) --cta-link-label-font-weight
--cta-link-label-font-weight-primary var(--font-weight-semibold) --cta-link-label-font-weight-primary
--cta-link-label-font-weight-secondary var(--font-weight-medium) --cta-link-label-font-weight-secondary
--cta-link-label-font-weight-tertiary var(--font-weight-medium) --cta-link-label-font-weight-tertiary
--cta-link-label-font-weight-utility var(--font-weight-medium) --cta-link-label-font-weight-utility
--cta-link-subtitle-color var(--secondary) --cta-link-subtitle-color
--cta-link-note-color var(--secondary) --cta-link-note-color
--cta-link-body-color var(--content) --cta-link-body-color
--cta-link-body-font-size var(--font-size-base) --cta-link-body-font-size
--cta-link-badge-background var(--accent-muted) --cta-link-badge-background
--cta-link-badge-foreground var(--accent) --cta-link-badge-foreground
--cta-link-badge-radius var(--radius-full) --cta-link-badge-radius
--cta-link-badge-padding-x var(--space-sm) --cta-link-badge-padding-x
--cta-link-badge-font-size var(--font-size-xs) --cta-link-badge-font-size
--cta-link-primary-background var(--cta-primary-bg) --cta-link-primary-background
--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%) --cta-link-primary-background-image
--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%) --cta-link-primary-background-image-hover
--cta-link-primary-foreground var(--cta-primary-fg) --cta-link-primary-foreground
--cta-link-primary-border-color color-mix(in srgb, var(--cta-primary-bg) 74%, black 26%) --cta-link-primary-border-color
--cta-link-primary-shadow 0 10px 24px color-mix(in srgb, var(--cta-primary-bg) 20%, transparent) --cta-link-primary-shadow
--cta-link-secondary-background color-mix(in srgb, var(--surface) 95%, var(--cta-primary-bg) 5%) --cta-link-secondary-background
--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%)) --cta-link-secondary-background-image
--cta-link-secondary-foreground color-mix(in srgb, var(--primary) 92%, var(--cta-primary-bg) 8%) --cta-link-secondary-foreground
--cta-link-secondary-border-color color-mix(in srgb, var(--cta-primary-bg) 68%, var(--border) 32%) --cta-link-secondary-border-color
--cta-link-secondary-shadow none --cta-link-secondary-shadow
--cta-link-tertiary-background color-mix(in srgb, var(--surface) 98%, var(--cta-primary-bg) 2%) --cta-link-tertiary-background
--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%)) --cta-link-tertiary-background-image
--cta-link-tertiary-foreground color-mix(in srgb, var(--secondary) 84%, var(--primary) 16%) --cta-link-tertiary-foreground
--cta-link-tertiary-border-color color-mix(in srgb, var(--cta-primary-bg) 48%, var(--border) 52%) --cta-link-tertiary-border-color
--cta-link-tertiary-shadow none --cta-link-tertiary-shadow
--cta-link-utility-background color-mix(in srgb, var(--surface) 94%, var(--secondary) 6%) --cta-link-utility-background
--cta-link-utility-border-color var(--border) --cta-link-utility-border-color
--cta-link-utility-shadow none --cta-link-utility-shadow
--cta-link-utility-radius var(--chip-radius) --cta-link-utility-radius
--cta-link-utility-padding-x var(--chip-padding-x) --cta-link-utility-padding-x
--cta-link-utility-padding-y 0 --cta-link-utility-padding-y
--cta-link-utility-min-height var(--control-size-sm) --cta-link-utility-min-height
--cta-focus-ring var(--accent) --cta-focus-ring
--cta-link-default-transition var(--interactive-transition) --cta-link-default-transition
--control-radius var(--radius-md) --control-radius
--card-radius var(--radius-md) --card-radius
--surface-radius var(--radius-md) --surface-radius
--media-radius 8px --media-radius
--image-radius 8px --image-radius
--avatar-radius var(--radius-full) --avatar-radius
--card-bg var(--surface-quiet) --card-bg
--home-list-card-bg var(--surface-quiet) --home-list-card-bg
--home-list-card-border-width var(--border-width-thin) --home-list-card-border-width
--home-list-card-border-color var(--border) --home-list-card-border-color
--home-list-card-border-hover-color var(--border-strong) --home-list-card-border-hover-color
--home-list-card-border var(--home-list-card-border-width) solid var(--home-list-card-border-color) --home-list-card-border
--home-list-card-shadow var(--shadow-sm) --home-list-card-shadow
--home-list-card-shadow-hover var(--shadow-md) --home-list-card-shadow-hover
--card-border-width var(--border-width-thin) --card-border-width
--card-border-color var(--border) --card-border-color
--card-border var(--card-border-width) solid var(--card-border-color) --card-border
--post-entry-border-width var(--border-width-thin) --post-entry-border-width
--post-entry-border-color var(--border) --post-entry-border-color
--post-entry-border var(--post-entry-border-width) solid var(--post-entry-border-color) --post-entry-border
--archive-entry-border-width var(--border-width-thin) --archive-entry-border-width
--archive-entry-border-color var(--border) --archive-entry-border-color
--archive-entry-border var(--archive-entry-border-width) solid var(--archive-entry-border-color) --archive-entry-border
--icon-fill-default currentColor --icon-fill-default
--icon-stroke-default currentColor --icon-stroke-default
--chip-gap var(--space-sm) --chip-gap
--chip-radius var(--radius-full) --chip-radius
--chip-padding-x var(--control-padding-x) --chip-padding-x
--chip-padding-y 0 --chip-padding-y
--chip-line-height 34px --chip-line-height
--table-cell-padding-x var(--space-sm) --table-cell-padding-x
--table-cell-padding-y var(--space-md) --table-cell-padding-y
--inline-code-radius 4px --inline-code-radius
--input-background var(--surface) --input-background
--input-border-width var(--border-width-thin) --input-border-width
--input-border-color var(--border) --input-border-color
--input-focus-border-color var(--accent) --input-focus-border-color
--input-foreground var(--primary) --input-foreground
--input-padding-x var(--control-padding-x) --input-padding-x
--input-padding-y var(--control-padding-y) --input-padding-y
--input-radius var(--radius-md) --input-radius
--floating-action-offset-block 72px --floating-action-offset-block
--floating-action-offset-inline 24px --floating-action-offset-inline
--first-entry-min-height 360px --first-entry-min-height
--first-entry-min-height-mobile 280px --first-entry-min-height-mobile
--archive-month-header-width 220px --archive-month-header-width
--profile-buttons-max-width 480px --profile-buttons-max-width
--table-cell-min-width 88px --table-cell-min-width
--highlight-table-first-column-width 44px --highlight-table-first-column-width
--page-title-line-height 1.15 --page-title-line-height
--page-title-letter-spacing -0.02em --page-title-letter-spacing
--heading-letter-spacing -0.01em --heading-letter-spacing
--header-logo-image-offset-y -10% --header-logo-image-offset-y
--header-control-inline-margin 4px --header-control-inline-margin
--header-switch-inline-margin 3px --header-switch-inline-margin
--header-active-border-width 2px --header-active-border-width
--footer-line-height 24px --footer-line-height
--footer-inline-gap 1px --footer-inline-gap
--footer-link-border-width 1px --footer-link-border-width
--footer-floating-transition visibility 0.5s, opacity 0.8s linear, background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base) --footer-floating-transition
--footer-icon-shadow drop-shadow(0 0 0 var(--theme)) --footer-icon-shadow
--entry-content-gap 8px --entry-content-gap
--entry-cover-gap 0.5rem --entry-cover-gap
--entry-link-visually-hidden-offset -9999px --entry-link-visually-hidden-offset
--link-underline-offset 0.3rem --link-underline-offset
--post-content-link-underline-offset 0.3rem --post-content-link-underline-offset
--post-content-inline-code-shadow 0 -1px 0 var(--accent) inset --post-content-inline-code-shadow
--post-content-heading-1-margin 2rem 0 1rem --post-content-heading-1-margin
--post-content-heading-2-margin 1.75rem 0 1rem --post-content-heading-2-margin
--post-content-heading-3-margin 1.5rem 0 0.875rem --post-content-heading-3-margin
--post-content-heading-4-margin 1.5rem 0 0.75rem --post-content-heading-4-margin
--post-content-heading-5-margin 1.25rem 0 0.75rem --post-content-heading-5-margin
--post-content-heading-6-margin 1.25rem 0 0.75rem --post-content-heading-6-margin
--post-content-dl-term-width 25% --post-content-dl-term-width
--post-content-dl-definition-width 75% --post-content-dl-definition-width
--post-content-dl-definition-padding-inline-start var(--space-sm) --post-content-dl-definition-padding-inline-start
--post-content-table-line-height 1.5 --post-content-table-line-height
--post-content-blockquote-border-width 4px --post-content-blockquote-border-width
--post-content-hr-margin-block 1rem --post-content-hr-margin-block
--post-content-hr-height 2px --post-content-hr-height
--post-content-image-margin-block 1rem --post-content-image-margin-block
--toc-inner-margin-inline 2.4rem --toc-inner-margin-inline
--toc-inner-padding-bottom 0.6rem --toc-inner-padding-bottom
--post-footer-item-gap 10px --post-footer-item-gap
--post-tags-gap 10px --post-tags-gap
--share-button-size 40px --share-button-size
--share-button-icon-size 18px --share-button-icon-size
--share-button-gap 12px --share-button-gap
--paginav-line-height 30px --paginav-line-height
--paginav-link-gap 0.5rem --paginav-link-gap
--paginav-title-letter-spacing 1px --paginav-title-letter-spacing
--breadcrumbs-gap 0.2rem --breadcrumbs-gap
--breadcrumbs-icon-size 1em --breadcrumbs-icon-size
--breadcrumbs-inline-margin 3px --breadcrumbs-inline-margin
--social-icon-size 26px --social-icon-size
--copy-code-offset 4px --copy-code-offset
--copy-code-line-height 34px --copy-code-line-height
--code-line-number-gutter-padding-start 12px --code-line-number-gutter-padding-start
--code-line-number-padding-block 8px --code-line-number-padding-block
--code-line-number-padding-inline 10px --code-line-number-padding-inline
--code-line-number-gap 0.4em --code-line-number-gap
--code-line-number-inline-padding 0.4em --code-line-number-inline-padding
--scrollbar-thumb-border-width 5px --scrollbar-thumb-border-width
--scrollbar-thumb-border-width-compact 2px --scrollbar-thumb-border-width-compact
--scrollbar-track-width 19px --scrollbar-track-width
--scrollbar-track-height 11px --scrollbar-track-height
--scrollbar-track-width-mobile 0 --scrollbar-track-width-mobile
--scroll-to-top-mobile-offset -5rem --scroll-to-top-mobile-offset
--footer-mobile-content-gap 10px --footer-mobile-content-gap
--profile-image-scale-mobile 0.85 --profile-image-scale-mobile
--not-found-height 80% --not-found-height
--probe-table-min-width 980px --probe-table-min-width
--probe-preview-min-width 220px --probe-preview-min-width
--token-preview-swatch-min-height 48px --token-preview-swatch-min-height
--token-preview-avatar-size 64px --token-preview-avatar-size
--token-preview-layer-min-height 88px --token-preview-layer-min-height
--token-preview-layer-inset-1 12px 24px 0 0 --token-preview-layer-inset-1
--token-preview-layer-inset-2 0 12px 12px 12px --token-preview-layer-inset-2
--token-preview-measure-height 12px --token-preview-measure-height
--share-icon-size 30px --share-icon-size
--content-inline-size var(--content-max-width) --content-inline-size
--page-shell-hero-padding-block clamp(24px, 4vw, 40px) --page-shell-hero-padding-block
--page-shell-hero-padding-inline clamp(20px, 4vw, 32px) --page-shell-hero-padding-inline
--page-shell-title-size clamp(32px, 4.6vw, 56px) --page-shell-title-size
--page-shell-title-size-mobile clamp(30px, 7vw, 40px) --page-shell-title-size-mobile
--page-shell-title-line-height 1.08 --page-shell-title-line-height
--page-shell-lead-max-width 48rem --page-shell-lead-max-width
--page-shell-action-min-height 44px --page-shell-action-min-height
--page-shell-action-padding-x var(--control-padding-x) --page-shell-action-padding-x
--page-shell-action-shadow var(--shadow-sm) --page-shell-action-shadow
--page-shell-action-shadow-hover var(--shadow-md) --page-shell-action-shadow-hover
--page-hub-stat-grid-gap var(--page-shell-grid-gap) --page-hub-stat-grid-gap
--page-hub-stat-min-width 180px --page-hub-stat-min-width
--page-hub-stat-padding clamp(16px, 3vw, 24px) --page-hub-stat-padding
--page-hub-stat-bg var(--surface) --page-hub-stat-bg
--page-hub-stat-border var(--border) --page-hub-stat-border
--page-hub-stat-border-hover var(--border-strong) --page-hub-stat-border-hover
--page-hub-stat-shadow var(--shadow-sm) --page-hub-stat-shadow
--page-hub-stat-shadow-hover var(--shadow-md) --page-hub-stat-shadow-hover
--page-hub-stat-value-size var(--font-size-2xl) --page-hub-stat-value-size
--page-hub-stat-value-color var(--primary) --page-hub-stat-value-color
--page-hub-stat-label-color var(--accent) --page-hub-stat-label-color
--page-hub-stat-text-color var(--secondary) --page-hub-stat-text-color
--page-shell-card-padding clamp(18px, 3vw, 28px) --page-shell-card-padding
--page-shell-card-radius var(--radius-lg) --page-shell-card-radius
--page-shell-card-border-width var(--border-width-thin) --page-shell-card-border-width
--page-shell-card-border-color var(--border) --page-shell-card-border-color
--page-shell-card-border-hover-color var(--border-strong) --page-shell-card-border-hover-color
--page-shell-card-bg var(--surface-quiet) --page-shell-card-bg
--page-shell-card-bg-hover var(--surface-elevated) --page-shell-card-bg-hover
--page-shell-card-shadow var(--shadow-sm) --page-shell-card-shadow
--page-shell-card-shadow-hover var(--shadow-md) --page-shell-card-shadow-hover
--page-shell-card-min-width 240px --page-shell-card-min-width
--page-shell-grid-gap var(--space-lg) --page-shell-grid-gap
--page-shell-layout-gap var(--space-3xl) --page-shell-layout-gap
--page-shell-action-gap var(--space-sm) --page-shell-action-gap
--page-shell-kicker-color var(--accent) --page-shell-kicker-color
--page-shell-lead-color var(--secondary) --page-shell-lead-color
--page-shell-text-color var(--content) --page-shell-text-color
--page-shell-empty-bg var(--surface-quiet) --page-shell-empty-bg
--page-shell-empty-border var(--border) --page-shell-empty-border
--page-shell-term-card-bg var(--surface-quiet) --page-shell-term-card-bg
--page-shell-term-card-border var(--border) --page-shell-term-card-border
--page-shell-term-card-shadow var(--shadow-sm) --page-shell-term-card-shadow
--page-shell-term-card-shadow-hover var(--shadow-md) --page-shell-term-card-shadow-hover
--page-shell-term-count-color var(--secondary) --page-shell-term-count-color
--page-shell-term-min-width 180px --page-shell-term-min-width
--menu-shell-gap var(--space-2xl) --menu-shell-gap
--menu-shell-gap-mobile var(--space-xl) --menu-shell-gap-mobile
--menu-hero-gap var(--space-lg) --menu-hero-gap
--menu-hero-padding clamp(20px, 4vw, 40px) --menu-hero-padding
--menu-hero-bg var(--gradient-surface) --menu-hero-bg
--menu-hero-border var(--border) --menu-hero-border
--menu-hero-radius var(--page-shell-card-radius) --menu-hero-radius
--menu-hero-shadow var(--shadow-sm) --menu-hero-shadow
--menu-badge-padding-x var(--space-sm) --menu-badge-padding-x
--menu-badge-line-height 1.8 --menu-badge-line-height
--menu-badge-size var(--font-size-xs) --menu-badge-size
--menu-badge-fg var(--accent-contrast) --menu-badge-fg
--menu-badge-bg var(--accent) --menu-badge-bg
--menu-badge-radius var(--radius-full) --menu-badge-radius
--menu-grid-columns repeat(auto-fit, minmax(240px, 1fr)) --menu-grid-columns
--menu-grid-gap var(--page-shell-grid-gap) --menu-grid-gap
--menu-section-gap var(--space-3xl) --menu-section-gap
--menu-card-min-height 180px --menu-card-min-height
--menu-card-padding clamp(18px, 3vw, 28px) --menu-card-padding
--menu-card-bg var(--surface) --menu-card-bg
--menu-card-border var(--border) --menu-card-border
--menu-card-border-hover-color var(--border-strong) --menu-card-border-hover-color
--menu-card-radius var(--page-shell-card-radius) --menu-card-radius
--menu-card-shadow var(--shadow-sm) --menu-card-shadow
--menu-card-shadow-hover var(--shadow-md) --menu-card-shadow-hover
--menu-card-title-size var(--font-size-xl) --menu-card-title-size
--menu-card-title-line-height var(--heading-line-height) --menu-card-title-line-height
--menu-card-title-color var(--primary) --menu-card-title-color
--menu-card-meta-color var(--secondary) --menu-card-meta-color
--menu-card-link-color var(--accent) --menu-card-link-color
--menu-lead-color var(--secondary) --menu-lead-color
--not-found-shell-gap var(--space-xl) --not-found-shell-gap
--not-found-card-bg var(--gradient-surface) --not-found-card-bg
--not-found-card-border var(--border) --not-found-card-border
--not-found-card-radius var(--page-shell-card-radius) --not-found-card-radius
--not-found-card-shadow var(--shadow-md) --not-found-card-shadow
--not-found-title-size clamp(28px, 4vw, 44px) --not-found-title-size
--not-found-text-max-width 42rem --not-found-text-max-width
--content-measure-narrow 760px --content-measure-narrow
--content-measure-wide 1120px --content-measure-wide
--post-entry-radius var(--card-radius) --post-entry-radius
--post-entry-background var(--card-bg) --post-entry-background
--post-entry-border-hover-color var(--border-strong) --post-entry-border-hover-color
--post-entry-shadow var(--shadow-sm) --post-entry-shadow
--post-entry-shadow-hover var(--shadow-md) --post-entry-shadow-hover
--post-entry-hover-transform translateY(-2px) --post-entry-hover-transform
--post-entry-link-hover-background var(--accent-muted) --post-entry-link-hover-background
--archive-entry-radius var(--card-radius) --archive-entry-radius
--archive-entry-background var(--card-bg) --archive-entry-background
--archive-entry-border-hover-color var(--border-strong) --archive-entry-border-hover-color
--archive-entry-shadow var(--shadow-sm) --archive-entry-shadow
--archive-entry-shadow-hover var(--shadow-md) --archive-entry-shadow-hover
--archive-entry-hover-transform translateY(-2px) --archive-entry-hover-transform
--archive-entry-link-hover-background var(--accent-muted) --archive-entry-link-hover-background

40-colors-light.css · 105개 변수

이 모듈은 colors(light) 를 담당한다. 실제 UI는 이 파일의 값들을 상속해서 렌더링된다.

변수 값 사용 예
--color-brand-primary rgb(184, 58, 32) --color-brand-primary
--color-brand-primary-hover rgb(156, 47, 27) --color-brand-primary-hover
--color-brand-primary-active rgb(129, 38, 22) --color-brand-primary-active
--color-brand-primary-muted rgba(184, 58, 32, 0.16) --color-brand-primary-muted
--color-brand-primary-contrast rgb(255, 255, 255) --color-brand-primary-contrast
--color-brand-secondary rgb(214, 94, 29) --color-brand-secondary
--color-brand-secondary-hover rgb(188, 77, 22) --color-brand-secondary-hover
--color-brand-secondary-active rgb(162, 63, 17) --color-brand-secondary-active
--color-brand-secondary-muted rgba(214, 94, 29, 0.16) --color-brand-secondary-muted
--color-brand-secondary-contrast rgb(255, 255, 255) --color-brand-secondary-contrast
--color-neutral-page-background rgb(255, 250, 246) --color-neutral-page-background
--color-neutral-surface rgb(255, 255, 255) --color-neutral-surface
--color-neutral-surface-quiet rgb(251, 244, 239) --color-neutral-surface-quiet
--color-neutral-surface-strong rgb(240, 231, 224) --color-neutral-surface-strong
--color-neutral-surface-elevated rgb(255, 252, 249) --color-neutral-surface-elevated
--color-neutral-text rgb(37, 29, 24) --color-neutral-text
--color-neutral-text-muted rgb(111, 95, 86) --color-neutral-text-muted
--color-neutral-text-subtle rgb(170, 154, 144) --color-neutral-text-subtle
--color-neutral-border rgb(228, 216, 208) --color-neutral-border
--color-neutral-border-strong rgb(208, 194, 185) --color-neutral-border-strong
--color-neutral-code-bg rgb(248, 240, 235) --color-neutral-code-bg
--color-neutral-code-block-bg rgb(39, 24, 19) --color-neutral-code-block-bg
--color-neutral-code-block-fg rgb(246, 231, 224) --color-neutral-code-block-fg
--color-neutral-code-inline-bg rgba(124, 53, 29, 0.08) --color-neutral-code-inline-bg
--color-neutral-code-inline-fg rgb(37, 29, 24) --color-neutral-code-inline-fg
--color-neutral-scrollbar-thumb rgb(127, 105, 95) --color-neutral-scrollbar-thumb
--color-neutral-scrollbar-thumb-hover rgb(162, 140, 128) --color-neutral-scrollbar-thumb-hover
--color-neutral-scrollbar-thumb-border rgb(255, 250, 246) --color-neutral-scrollbar-thumb-border
--color-neutral-scrollbar-thumb-border-alt rgb(251, 244, 239) --color-neutral-scrollbar-thumb-border-alt
--color-neutral-scrollbar-thumb-border-gist rgb(255, 250, 246) --color-neutral-scrollbar-thumb-border-gist
--color-neutral-scrollbar-thumb-alt rgb(127, 105, 95) --color-neutral-scrollbar-thumb-alt
--color-neutral-scrollbar-thumb-alt-hover rgb(162, 140, 128) --color-neutral-scrollbar-thumb-alt-hover
--color-neutral-scrollbar-thumb-gist rgb(177, 156, 145) --color-neutral-scrollbar-thumb-gist
--color-neutral-scrollbar-thumb-gist-hover rgb(120, 99, 88) --color-neutral-scrollbar-thumb-gist-hover
--color-semantic-success rgb(22, 128, 74) --color-semantic-success
--color-semantic-warning rgb(205, 122, 22) --color-semantic-warning
--color-semantic-danger rgb(199, 57, 52) --color-semantic-danger
--color-semantic-info rgb(184, 58, 32) --color-semantic-info
--color-semantic-selection-bg rgba(184, 58, 32, 0.18) --color-semantic-selection-bg
--color-semantic-selection-fg rgb(37, 29, 24) --color-semantic-selection-fg
--color-semantic-focus-ring rgba(184, 58, 32, 0.42) --color-semantic-focus-ring
--color-effect-overlay rgba(90, 42, 24, 0.10) --color-effect-overlay
--color-effect-scrim rgba(33, 18, 13, 0.56) --color-effect-scrim
--color-effect-gradient-primary linear-gradient(135deg, rgb(184, 58, 32) 0%, rgb(214, 94, 29) 100%) --color-effect-gradient-primary
--color-effect-gradient-secondary linear-gradient(135deg, rgb(251, 244, 239) 0%, rgb(240, 231, 224) 100%) --color-effect-gradient-secondary
--color-effect-gradient-surface linear-gradient(180deg, rgba(255, 252, 249, 0.98) 0%, rgba(251, 244, 239, 0.98) 100%) --color-effect-gradient-surface
--color-effect-copy-code-bg rgba(56, 28, 20, 0.82) --color-effect-copy-code-bg
--color-effect-copy-code-fg rgb(255, 255, 255) --color-effect-copy-code-fg
--color-effect-tooltip-bg rgba(34, 21, 17, 0.96) --color-effect-tooltip-bg
--color-effect-tooltip-fg rgb(255, 255, 255) --color-effect-tooltip-fg
--color-effect-glass-bg rgba(255, 252, 249, 0.78) --color-effect-glass-bg
--color-effect-glass-border rgba(255, 255, 255, 0.46) --color-effect-glass-border
--theme var(--color-neutral-page-background) --theme
--entry var(--color-neutral-surface) --entry
--primary var(--color-neutral-text) --primary
--secondary var(--color-neutral-text-muted) --secondary
--tertiary var(--color-neutral-text-subtle) --tertiary
--content var(--color-neutral-text) --content
--surface var(--color-neutral-surface) --surface
--surface-quiet var(--color-neutral-surface-quiet) --surface-quiet
--surface-strong var(--color-neutral-surface-strong) --surface-strong
--surface-elevated var(--color-neutral-surface-elevated) --surface-elevated
--text var(--color-neutral-text) --text
--text-muted var(--color-neutral-text-muted) --text-muted
--text-subtle var(--color-neutral-text-subtle) --text-subtle
--code-block-bg var(--color-neutral-code-block-bg) --code-block-bg
--code-block-fg var(--color-neutral-code-block-fg) --code-block-fg
--code-bg var(--color-neutral-code-bg) --code-bg
--code-inline-bg var(--color-neutral-code-inline-bg) --code-inline-bg
--code-inline-fg var(--color-neutral-code-inline-fg) --code-inline-fg
--border var(--color-neutral-border) --border
--border-strong var(--color-neutral-border-strong) --border-strong
--link var(--color-brand-primary) --link
--link-hover var(--color-brand-primary-hover) --link-hover
--accent var(--color-brand-primary) --accent
--accent-strong var(--color-brand-primary-hover) --accent-strong
--accent-muted var(--color-brand-primary-muted) --accent-muted
--accent-contrast var(--color-brand-primary-contrast) --accent-contrast
--success var(--color-semantic-success) --success
--warning var(--color-semantic-warning) --warning
--danger var(--color-semantic-danger) --danger
--info var(--color-semantic-info) --info
--selection-bg var(--color-semantic-selection-bg) --selection-bg
--selection-fg var(--color-semantic-selection-fg) --selection-fg
--focus-ring var(--color-semantic-focus-ring) --focus-ring
--overlay var(--color-effect-overlay) --overlay
--scrim var(--color-effect-scrim) --scrim
--gradient-primary var(--color-effect-gradient-primary) --gradient-primary
--gradient-secondary var(--color-effect-gradient-secondary) --gradient-secondary
--gradient-surface var(--color-effect-gradient-surface) --gradient-surface
--copy-code-bg var(--color-effect-copy-code-bg) --copy-code-bg
--copy-code-fg var(--color-effect-copy-code-fg) --copy-code-fg
--tooltip-bg var(--color-effect-tooltip-bg) --tooltip-bg
--tooltip-fg var(--color-effect-tooltip-fg) --tooltip-fg
--glass-bg var(--color-effect-glass-bg) --glass-bg
--glass-border var(--color-effect-glass-border) --glass-border
--scrollbar-thumb var(--color-neutral-scrollbar-thumb) --scrollbar-thumb
--scrollbar-thumb-hover var(--color-neutral-scrollbar-thumb-hover) --scrollbar-thumb-hover
--scrollbar-thumb-border var(--color-neutral-scrollbar-thumb-border) --scrollbar-thumb-border
--scrollbar-thumb-border-alt var(--color-neutral-scrollbar-thumb-border-alt) --scrollbar-thumb-border-alt
--scrollbar-thumb-border-gist var(--color-neutral-scrollbar-thumb-border-gist) --scrollbar-thumb-border-gist
--scrollbar-thumb-alt var(--color-neutral-scrollbar-thumb-alt) --scrollbar-thumb-alt
--scrollbar-thumb-alt-hover var(--color-neutral-scrollbar-thumb-alt-hover) --scrollbar-thumb-alt-hover
--scrollbar-thumb-gist var(--color-neutral-scrollbar-thumb-gist) --scrollbar-thumb-gist
--scrollbar-thumb-gist-hover var(--color-neutral-scrollbar-thumb-gist-hover) --scrollbar-thumb-gist-hover

50-colors-dark.css · 55개 변수

이 모듈은 colors(dark) 를 담당한다. 실제 UI는 이 파일의 값들을 상속해서 렌더링된다.

변수 값 사용 예
--color-brand-primary rgb(255, 176, 138) --color-brand-primary
--color-brand-primary-hover rgb(255, 156, 112) --color-brand-primary-hover
--color-brand-primary-active rgb(255, 138, 88) --color-brand-primary-active
--color-brand-primary-muted rgba(255, 176, 138, 0.18) --color-brand-primary-muted
--color-brand-primary-contrast rgb(22, 16, 14) --color-brand-primary-contrast
--color-brand-secondary rgb(255, 198, 150) --color-brand-secondary
--color-brand-secondary-hover rgb(255, 176, 120) --color-brand-secondary-hover
--color-brand-secondary-active rgb(255, 155, 92) --color-brand-secondary-active
--color-brand-secondary-muted rgba(255, 198, 150, 0.18) --color-brand-secondary-muted
--color-brand-secondary-contrast rgb(22, 16, 14) --color-brand-secondary-contrast
--color-neutral-page-background rgb(22, 16, 14) --color-neutral-page-background
--color-neutral-surface rgb(31, 24, 21) --color-neutral-surface
--color-neutral-surface-quiet rgb(40, 31, 27) --color-neutral-surface-quiet
--color-neutral-surface-strong rgb(52, 41, 36) --color-neutral-surface-strong
--color-neutral-surface-elevated rgb(35, 27, 24) --color-neutral-surface-elevated
--color-neutral-text rgb(245, 236, 230) --color-neutral-text
--color-neutral-text-muted rgb(201, 184, 173) --color-neutral-text-muted
--color-neutral-text-subtle rgb(136, 120, 111) --color-neutral-text-subtle
--color-neutral-border rgb(69, 56, 50) --color-neutral-border
--color-neutral-border-strong rgb(92, 75, 66) --color-neutral-border-strong
--color-neutral-code-bg rgb(40, 31, 27) --color-neutral-code-bg
--color-neutral-code-block-bg rgb(24, 18, 16) --color-neutral-code-block-bg
--color-neutral-code-block-fg rgb(246, 231, 224) --color-neutral-code-block-fg
--color-neutral-code-inline-bg rgba(255, 176, 138, 0.08) --color-neutral-code-inline-bg
--color-neutral-code-inline-fg rgb(245, 236, 230) --color-neutral-code-inline-fg
--color-neutral-scrollbar-thumb rgb(122, 103, 94) --color-neutral-scrollbar-thumb
--color-neutral-scrollbar-thumb-hover rgb(154, 134, 124) --color-neutral-scrollbar-thumb-hover
--color-neutral-scrollbar-thumb-border rgb(22, 16, 14) --color-neutral-scrollbar-thumb-border
--color-neutral-scrollbar-thumb-border-alt rgb(31, 24, 21) --color-neutral-scrollbar-thumb-border-alt
--color-neutral-scrollbar-thumb-border-gist rgb(255, 250, 246) --color-neutral-scrollbar-thumb-border-gist
--color-neutral-scrollbar-thumb-alt rgb(122, 103, 94) --color-neutral-scrollbar-thumb-alt
--color-neutral-scrollbar-thumb-alt-hover rgb(154, 134, 124) --color-neutral-scrollbar-thumb-alt-hover
--color-neutral-scrollbar-thumb-gist rgb(173, 154, 144) --color-neutral-scrollbar-thumb-gist
--color-neutral-scrollbar-thumb-gist-hover rgb(132, 112, 102) --color-neutral-scrollbar-thumb-gist-hover
--color-semantic-success rgb(94, 213, 128) --color-semantic-success
--color-semantic-warning rgb(255, 199, 98) --color-semantic-warning
--color-semantic-danger rgb(255, 146, 136) --color-semantic-danger
--color-semantic-info rgb(255, 176, 138) --color-semantic-info
--color-semantic-selection-bg rgba(255, 176, 138, 0.22) --color-semantic-selection-bg
--color-semantic-selection-fg rgb(22, 16, 14) --color-semantic-selection-fg
--color-semantic-focus-ring rgba(255, 176, 138, 0.48) --color-semantic-focus-ring
--color-effect-overlay rgba(22, 16, 14, 0.22) --color-effect-overlay
--color-effect-scrim rgba(22, 16, 14, 0.70) --color-effect-scrim
--color-effect-gradient-primary linear-gradient(135deg, rgb(255, 176, 138) 0%, rgb(255, 138, 88) 100%) --color-effect-gradient-primary
--color-effect-gradient-secondary linear-gradient(135deg, rgb(31, 24, 21) 0%, rgb(40, 31, 27) 100%) --color-effect-gradient-secondary
--color-effect-gradient-surface linear-gradient(180deg, rgba(31, 24, 21, 0.98) 0%, rgba(22, 16, 14, 0.98) 100%) --color-effect-gradient-surface
--color-effect-copy-code-bg rgba(255, 246, 240, 0.92) --color-effect-copy-code-bg
--color-effect-copy-code-fg rgb(22, 16, 14) --color-effect-copy-code-fg
--color-effect-tooltip-bg rgba(255, 247, 241, 0.92) --color-effect-tooltip-bg
--color-effect-tooltip-fg rgb(22, 16, 14) --color-effect-tooltip-fg
--color-effect-glass-bg rgba(31, 24, 21, 0.74) --color-effect-glass-bg
--color-effect-glass-border rgba(255, 255, 255, 0.14) --color-effect-glass-border
--shadow-sm 0 1px 2px rgba(0, 0, 0, 0.24) --shadow-sm
--shadow-md 0 10px 28px rgba(0, 0, 0, 0.28) --shadow-md
--shadow-lg 0 18px 50px rgba(0, 0, 0, 0.34) --shadow-lg

60-language.css · 19개 변수

이 모듈은 language 를 담당한다. 실제 UI는 이 파일의 값들을 상속해서 렌더링된다.

변수 값 사용 예
--font-sans var(--font-sans-latin-europe) --font-sans
--font-body var(--font-sans-latin-europe) --font-body
--font-heading var(--font-sans-latin-europe) --font-heading
--font-display var(--font-display-latin) --font-display
--font-ui var(--font-sans-ui) --font-ui
--font-mono var(--font-mono-latin) --font-mono
--font-feature-settings normal --font-feature-settings
--word-break-body normal --word-break-body
--word-break-table keep-all --word-break-table
--word-break-menu keep-all --word-break-menu
--hyphens-body auto --hyphens-body
--line-break-body auto --line-break-body
--line-height-base 1.65 --line-height-base
--line-height-relaxed 1.8 --line-height-relaxed
--page-title-letter-spacing -0.01em --page-title-letter-spacing
--heading-letter-spacing -0.01em --heading-letter-spacing
--direction-page rtl --direction-page
--direction-code ltr --direction-code
--unicode-bidi-page plaintext --unicode-bidi-page

70-global.css · 0개 변수

이 모듈은 global 를 담당한다. 실제 UI는 이 파일의 값들을 상속해서 렌더링된다.

변수 값 사용 예

검증 노트

  • 각 값은 실제로 렌더링되는 컴포넌트의 기준값이다.
  • var(--...) 형식의 alias도 그대로 남겨 두어 상속 체인을 추적할 수 있게 했다.
  • 한 줄 요약보다 실제 값이 더 중요하므로, 이 페이지는 요약과 원본을 함께 보여 준다.
색상과 표면 보기