--surf-badge-caution-bg
Status
…
소스와 참조
:root
oklch(from color-mix(in srgb, var(--surf-status-caution-fg) 3%, var(--surf-status-caution-bg)) l c h / alpha)tokens.css:795
디자인 토큰
테마별 토큰 값, 별칭, 소스를 나열합니다.
원칙
- 값이 아니라 토큰을 참조하세요. 토큰이 가리키는 색 대신
var(--surf-ink)를 써야 테마와 화면 크기가 코드에 반영됩니다. - 토큰은 역할로 고르세요.
--surf-ink-muted,--surf-canvas,--surf-space-4같은 역할 토큰은 값의 용도를 말하고, 모습은 테마가 정합니다. - 컴포넌트는 자기 토큰으로 조정하세요.
--surf-control-height같은 컴포넌트 토큰은 역할 토큰을 참조하므로, 내부 스타일을 덮지 않고도 한 번의 재정의가 모든 부분에 닿습니다.
토큰 읽는 법
각 행은 토큰의 이름, 카테고리, 용도를 보여 주고, 현재 테마와 창 너비에서 계산된 값을 이어서 보여 줍니다. 테마를 바꾸거나 창 크기를 조절하면 값이 따라 바뀝니다.
소스와 참조에는 선언마다 컨텍스트, 파일, 줄이 있고, 참조하는 토큰으로 가는 링크가 있습니다. 복사하면 var(--name)이 클립보드에 들어갑니다.
전체 토큰
CSS 소스에서 생성한 토큰 389개입니다. 이름, 용도, 별칭으로 검색하세요.
일치하는 토큰 389개 / 24개 표시
--surf-badge-danger-bg
Status
…
소스와 참조
:root
oklch(from color-mix(in srgb, var(--surf-status-danger-fg) 3%, var(--surf-status-danger-bg)) l c h / alpha)tokens.css:786
--surf-badge-info-bg
Status
…
소스와 참조
:root
oklch(from color-mix(in srgb, var(--surf-status-info-fg) 3%, var(--surf-status-info-bg)) l c h / alpha)tokens.css:805
--surf-badge-neutral-bg
Status
…
소스와 참조
:root
var(--surf-status-neutral-bg)tokens.css:776
--surf-badge-progress-bg
Status
…
소스와 참조
:root
var(--surf-status-progress-bg)tokens.css:804
--surf-badge-success-bg
Status
…
소스와 참조
:root
oklch(from color-mix(in srgb, var(--surf-status-success-fg) 3%, var(--surf-status-success-bg)) l c h / alpha)tokens.css:777
--surf-brand
Color / Surface for primary actions and limited emphasis
…
소스와 참조
:root
oklch(0.82 0.12 210)tokens.css:59
:root[data-theme="light"]
oklch(0.82 0.12 210)tokens.css:116
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.82 0.12 210)tokens.css:560
--surf-brand-ink
Color / Link and brand text color with contrast against the background
…
소스와 참조
:root
oklch(0.82 0.12 210)tokens.css:62
:root[data-theme="light"]
oklch(0.2368845 0.00973297 248.23792711)tokens.css:117
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.2368845 0.00973297 248.23792711)tokens.css:561
--surf-brand-mark
Color / Brand as a mark on the sheet, such as a progress fill; darker in light themes for 3:1
…
소스와 참조
:root
var(--surf-brand)tokens.css:377
:root[data-theme="light"]
oklch(from var(--surf-brand) min(l, 0.6) min(c, 0.12) h)tokens.css:383
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(from var(--surf-brand) min(l, 0.6) min(c, 0.12) h)tokens.css:543
--surf-brand-tint
Color
…
소스와 참조
:root
oklch(0.82 0.12 210 / 0.25098039)tokens.css:68
:root[data-theme="light"]
oklch(0.82 0.12 210 / 0.30196078)tokens.css:121
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.82 0.12 210 / 0.30196078)tokens.css:565
--surf-canvas
Color / Main content surface that holds work or documents
…
소스와 참조
:root
oklch(0.27850211 0.01320057 253.03643104)tokens.css:29
:root[data-theme="light"]
oklch(1 0 0)tokens.css:105
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(1 0 0)tokens.css:549
--surf-caution
Color
…
소스와 참조
:root
oklch(0.88362398 0.17366333 93.66977695)tokens.css:76
:root[data-theme="light"]
oklch(0.88362398 0.17366333 93.66977695)tokens.css:129
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.88362398 0.17366333 93.66977695)tokens.css:573
--surf-chart-category-1
Color
…
소스와 참조
:root
oklch(0.76 0.12 250)tokens.css:833
:root[data-theme="light"]
oklch(0.5 0.14 255)tokens.css:860
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.5 0.14 255)tokens.css:887
--surf-chart-category-10
Color
…
소스와 참조
:root
oklch(0.9 0.105 108)tokens.css:842
:root[data-theme="light"]
oklch(0.45 0.09 108)tokens.css:869
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.45 0.09 108)tokens.css:896
--surf-chart-category-11
Color
…
소스와 참조
:root
oklch(0.87 0.065 52)tokens.css:843
:root[data-theme="light"]
oklch(0.42 0.105 52)tokens.css:870
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.42 0.105 52)tokens.css:897
--surf-chart-category-12
Color
…
소스와 참조
:root
oklch(0.86 0.095 345)tokens.css:844
:root[data-theme="light"]
oklch(0.4 0.12 345)tokens.css:871
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.4 0.12 345)tokens.css:898
--surf-chart-category-13
Color
…
소스와 참조
:root
oklch(0.56 0.12 250)tokens.css:845
:root[data-theme="light"]
oklch(0.64 0.14 255)tokens.css:872
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.64 0.14 255)tokens.css:899
--surf-chart-category-14
Color
…
소스와 참조
:root
oklch(0.63 0.11 185)tokens.css:846
:root[data-theme="light"]
oklch(0.63 0.085 190)tokens.css:873
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.63 0.085 190)tokens.css:900
--surf-chart-category-15
Color
…
소스와 참조
:root
oklch(0.55 0.14 135)tokens.css:847
:root[data-theme="light"]
oklch(0.62 0.13 140)tokens.css:874
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.62 0.13 140)tokens.css:901
--surf-chart-category-16
Color
…
소스와 참조
:root
oklch(0.64 0.13 80)tokens.css:848
:root[data-theme="light"]
oklch(0.64 0.12 70)tokens.css:875
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.64 0.12 70)tokens.css:902
--surf-chart-category-17
Color
…
소스와 참조
:root
oklch(0.58 0.14 25)tokens.css:849
:root[data-theme="light"]
oklch(0.64 0.17 25)tokens.css:876
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.64 0.17 25)tokens.css:903
--surf-chart-category-18
Color
…
소스와 참조
:root
oklch(0.61 0.12 310)tokens.css:850
:root[data-theme="light"]
oklch(0.64 0.15 310)tokens.css:877
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.64 0.15 310)tokens.css:904
--surf-chart-category-19
Color
…
소스와 참조
:root
oklch(0.67 0.065 280)tokens.css:851
:root[data-theme="light"]
oklch(0.58 0.12 280)tokens.css:878
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.58 0.12 280)tokens.css:905
--surf-chart-category-2
Color
…
소스와 참조
:root
oklch(0.78 0.11 185)tokens.css:834
:root[data-theme="light"]
oklch(0.52 0.09 190)tokens.css:861
@media (prefers-color-scheme: light) / :root:not([data-theme="dark"]):not([data-theme="light"])
oklch(0.52 0.09 190)tokens.css:888