토큰
색상 역할
텍스트, 표면, 선의 역할이며 각각 라이트와 다크 값을 갖습니다.
이 페이지의 내용
클래스
| 클래스 | 선언 |
|---|---|
fg-text-<name> | color: var(--color-text-<name>); |
bg-surface-<name> | background-color: var(--color-surface-<name>); |
b-line-<name> | border-color: var(--color-line-<name>); |
다른 색상 계열 19개
| 클래스 | 선언 |
|---|---|
b-<role>-<name> | border-color: var(--color-<role>-<name>); |
bb-<role>-<name> | border-bottom-color: var(--color-<role>-<name>); |
bg-<role>-<name> | background-color: var(--color-<role>-<name>); |
bl-<role>-<name> | border-left-color: var(--color-<role>-<name>); |
br-<role>-<name> | border-right-color: var(--color-<role>-<name>); |
bt-<role>-<name> | border-top-color: var(--color-<role>-<name>); |
bx-<role>-<name> | border-inline-color: var(--color-<role>-<name>); |
by-<role>-<name> | border-block-color: var(--color-<role>-<name>); |
fg-<role>-<name> | color: var(--color-<role>-<name>); |
bxe-<role>-<name> | border-inline-end-color: var(--color-<role>-<name>); |
bxs-<role>-<name> | border-inline-start-color: var(--color-<role>-<name>); |
bye-<role>-<name> | border-block-end-color: var(--color-<role>-<name>); |
bys-<role>-<name> | border-block-start-color: var(--color-<role>-<name>); |
fill-<role>-<name> | fill: var(--color-<role>-<name>); |
caret-<role>-<name> | caret-color: var(--color-<role>-<name>); |
accent-<role>-<name> | accent-color: var(--color-<role>-<name>); |
stroke-<role>-<name> | stroke: var(--color-<role>-<name>); |
outline-<role>-<name> | outline-color: var(--color-<role>-<name>); |
text-fill-color-<role>-<name> | -webkit-text-fill-color: var(--color-<role>-<name>); |
역할은 색상 키의 일부입니다. fg-text-muted는 color 네임스페이스를 통해 --color-text-muted를 참조합니다. bg-text-link와 outline-line-control을 포함한 모든 색상 계열이 역할 키를 허용하며, 역할 이름이 속성을 제한하지는 않습니다.
값
라이트와 다크는 각 프리셋 light-dark() 값의 두 인수에 해당합니다. 실제 선택은 요소가 사용하는 색 구성표에 따라 결정되며 클래스 접두사나 운영체제만으로 정해지지 않습니다.
텍스트
| 클래스 | 라이트 | 다크 |
|---|---|---|
fg-text-body | var(--color-zinc-70) | var(--color-zinc-30) |
fg-text-strong | var(--color-zinc-100) | var(--color-white) |
fg-text-muted | var(--color-zinc-60) | var(--color-zinc-40) |
fg-text-disabled | var(--color-zinc-40) | var(--color-zinc-60) |
fg-text-inverse | var(--color-white) | var(--color-black) |
fg-text-link | var(--color-blue-60) | var(--color-blue-30) |
fg-text-link-hover | var(--color-blue-70) | var(--color-blue-20) |
fg-text-stone | var(--color-stone-60) | var(--color-stone-30) |
fg-text-gray | var(--color-gray-60) | var(--color-gray-30) |
fg-text-zinc | var(--color-zinc-60) | var(--color-zinc-30) |
fg-text-neutral | var(--color-neutral-60) | var(--color-neutral-30) |
fg-text-slate | var(--color-slate-60) | var(--color-slate-30) |
fg-text-brown | var(--color-brown-60) | var(--color-brown-30) |
fg-text-orange | var(--color-orange-70) | var(--color-orange-30) |
fg-text-amber | var(--color-amber-80) | var(--color-amber-40) |
fg-text-yellow | var(--color-yellow-90) | var(--color-yellow-40) |
fg-text-lime | var(--color-lime-80) | var(--color-lime-40) |
fg-text-green | var(--color-green-80) | var(--color-green-40) |
fg-text-beryl | var(--color-beryl-90) | var(--color-beryl-40) |
fg-text-teal | var(--color-teal-90) | var(--color-teal-40) |
fg-text-cyan | var(--color-cyan-90) | var(--color-cyan-40) |
fg-text-sky | var(--color-sky-70) | var(--color-sky-30) |
fg-text-blue | var(--color-blue-60) | var(--color-blue-30) |
fg-text-indigo | var(--color-indigo-60) | var(--color-indigo-30) |
fg-text-violet | var(--color-violet-60) | var(--color-violet-30) |
fg-text-purple | var(--color-purple-60) | var(--color-purple-30) |
fg-text-fuchsia | var(--color-fuchsia-70) | var(--color-fuchsia-30) |
fg-text-pink | var(--color-pink-80) | var(--color-pink-30) |
fg-text-crimson | var(--color-crimson-80) | var(--color-crimson-30) |
fg-text-red | var(--color-red-80) | var(--color-red-30) |
표면
| 클래스 | 라이트 | 다크 |
|---|---|---|
bg-surface-base | var(--color-zinc-0) | var(--color-zinc-95) |
bg-surface-inset | var(--color-zinc-5) | var(--color-zinc-100) |
bg-surface-raised | var(--color-white) | var(--color-zinc-90) |
bg-surface-floating | var(--color-white) | var(--color-zinc-80) |
bg-surface-inverse | var(--color-black) | var(--color-white) |
선
| 클래스 | 라이트 | 다크 |
|---|---|---|
b-line-divider | oklch(0% 0 none / .12) | oklch(100% 0 none / .12) |
b-line-control | var(--color-zinc-50) | var(--color-zinc-40) |
b-line-subtle | oklch(0% 0 none / .06) | oklch(100% 0 none / .06) |
로컬 색 구성표가 값을 선택합니다
fg-text-muted는 color: var(--color-text-muted)를 출력합니다. 프리셋 값은 light-dark(var(--color-zinc-60), var(--color-zinc-40))를 사용하며 라이트는 첫 번째 색상을, 다크는 두 번째 색상을 선택합니다. 클래스와 생성 규칙은 바뀌지 않습니다.
하나의 역할, 두 로컬 색 구성표
실제로 사용하는 색 구성표가 첫 번째 또는 두 번째 색상을 선택합니다. 두 견본은 fg-text-muted와 bg-surface-base를 유지하며 로컬 색 구성표가 계산된 색상을 바꿉니다.
텍스트 설명
- fg-text-muted는 color: var(--color-text-muted)를 생성합니다. 프리셋 토큰에는 light-dark(var(--color-zinc-60), var(--color-zinc-40))가 들어 있습니다.
- 라이트 견본은 첫 번째 인수인 --color-zinc-60을, 다크 견본은 두 번째 인수인 --color-zinc-40을 사용합니다.
- 두 견본은 bg-surface-base와 같은 텍스트 클래스를 사용합니다. 색이 있는 연결선은 두 인수를 식별하는 주석이며 결과 텍스트 색상이 아닙니다.
- 분기는 로컬에서 실제로 사용하는 색 구성표가 선택합니다. 이 비교는 시스템 미디어 쿼리가 수동으로 선택한 로컬 테마를 따른다는 뜻이 아닙니다.
프리셋은 루트에서 color-scheme: light dark를 활성화합니다. data-theme="light"와 data-theme="dark" 선택자로 루트, 중첩 영역, 섀도 호스트의 색 구성표를 선택할 수 있습니다. 선택은 네이티브 CSS가 수행하므로 색 구성표를 전환해도 이 유틸리티를 다시 생성할 필요가 없습니다.
@dark와 @light 클래스 접미사는 시스템 환경설정을 확인합니다. data-theme를 수동으로 선택해도 이 미디어 쿼리가 활성화되지는 않습니다. 선택자 기반 조건은 모드 계약에 정의된 형식을 사용하세요.
역할은 색상을 제공할 뿐 컴포넌트나 모든 배경에 대한 대비를 보장하지 않습니다. 반전 표면에는 짝이 되는 반전 텍스트 역할이 있습니다. 구분선과 은은한 선은 장식용이며 컨트롤 선은 경계를 식별합니다. 표면, 불투명도, 토큰 값을 변경하면 실제 색상 쌍을 다시 확인하세요.
관련 문서: 변수와 모드, 네이티브 light-dark() 선택.
사용 예
역할을 조합해 카드를 만듭니다. 올라온 표면, 구분선, 강조 텍스트, 본문 텍스트, 보조 텍스트를 사용합니다.
Make space for ideas
A steady rhythm keeps the focus on the content.
4 min read
<article class="… b(1) b-solid b-line-divider bg-surface-raised"> <h3 class="… fg-text-strong">Make space for ideas</h3> <p class="… fg-text-body">A steady rhythm keeps the focus on the content.</p> <p class="… bt(1) bt-solid bt-line-divider fg-text-muted">4 min read</p></article>생성된 CSS
@layer theme { :root, :host { --color-zinc-30: oklch(78% .0025 265); --color-zinc-40: oklch(68.6% .0028 265); --color-zinc-60: oklch(48.6% .003 265); --color-zinc-70: oklch(39.8% .0028 265); --color-zinc-90: oklch(24.6% .0022 265); --color-zinc-100: oklch(15% .0016 265) } :root, :host { --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90)); --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12)); --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30)); --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white)); --color-text-muted: light-dark(var(--color-zinc-60), var(--color-zinc-40)) } :root, :host { --color-white: oklch(100% 0 none) }}@layer utilities { .bg-surface-raised { background-color: var(--color-surface-raised) } .b-line-divider { border-color: var(--color-line-divider) } .bt-line-divider { border-top-color: var(--color-line-divider) } .b-solid { border-style: solid } .bt-solid { border-top-style: solid } .b\(1\) { border-width: calc(1 * 1px) } .bt\(1\) { border-top-width: calc(1 * 1px) } .fg-text-body { color: var(--color-text-body) } .fg-text-muted { color: var(--color-text-muted) } .fg-text-strong { color: var(--color-text-strong) }}사용자 정의
각 색 구성표에 하나의 값을 갖는 역할을 추가하세요. --color-text-brand를 정의하면 fg-text-brand가 생성됩니다.
@theme { --color-text-brand: light-dark( var(--color-indigo-60), var(--color-indigo-30) );}생성된 CSS
@layer theme { :root, :host { --color-indigo-30: oklch(70.2% .1611 282.9); --color-indigo-60: oklch(50.06% .2906 282) } :root, :host { --color-text-brand: light-dark(var(--color-indigo-60), var(--color-indigo-30)) }}@layer utilities { .fg-text-brand { color: var(--color-text-brand) }}