令牌 Tokens
本页直接读取 src/generated/tokens.ts（由 tokens:build 从 DTCG 源生成），非手工拷贝。
Reference Tokens
| 变量 | 取值 |
|---|---|
| --sx-ref-color-ink | #000000 |
| --sx-ref-color-paper | #FFFCF4 |
| --sx-ref-color-white | #ffffff |
| --sx-ref-color-blue-500 | #2f5bea |
| --sx-ref-color-yellow-400 | #FFDC58 |
| --sx-ref-color-red-500 | #f9575c |
| --sx-ref-color-green-500 | #35ad68 |
| --sx-ref-color-mint | #01FFCC |
| --sx-ref-color-lavender | #B8A9FA |
| --sx-ref-color-beige | #EFE7D6 |
| --sx-ref-color-coral | #FF6B6B |
| --sx-ref-color-sky | #74B9FF |
| --sx-ref-color-pop-green | #88D498 |
| --sx-ref-color-cyan | #7FDBDA |
| --sx-ref-color-orange | #FFA552 |
| --sx-ref-color-warm-gray | #6B6355 |
| --sx-ref-color-gray-200 | #CBCCC9 |
| --sx-ref-color-gray-500 | #666666 |
| --sx-ref-color-terminal-bg | #0f1115 |
| --sx-ref-color-terminal-surface | #161a20 |
| --sx-ref-color-terminal-elevated | #1b1f26 |
| --sx-ref-color-terminal-border | #2a2f37 |
| --sx-ref-color-terminal-text | #e6e6e6 |
| --sx-ref-color-terminal-muted | #9aa0a6 |
| --sx-ref-space-1 | 0.25rem |
| --sx-ref-space-2 | 0.5rem |
| --sx-ref-space-3 | 0.75rem |
| --sx-ref-space-4 | 1rem |
| --sx-ref-space-6 | 1.5rem |
| --sx-ref-space-8 | 2rem |
| --sx-ref-space-12 | 3rem |
| --sx-ref-space-16 | 4rem |
| --sx-ref-space-24 | 6rem |
| --sx-ref-font-family-display | 'Bricolage Grotesque' |
| --sx-ref-font-family-body | 'Geist' |
| --sx-ref-font-family-mono | 'Geist Mono' |
| --sx-ref-font-family-ibm-plex-mono | 'IBM Plex Mono' |
Semantic Tokens
| 变量 | 取值 |
|---|---|
| --sx-sys-color-bg-page | #FFFCF4 |
| --sx-sys-color-bg-surface | #ffffff |
| --sx-sys-color-text-primary | #000000 |
| --sx-sys-color-text-soft | #6B6355 |
| --sx-sys-color-text-muted | #666666 |
| --sx-sys-color-action-primary | #2f5bea |
| --sx-sys-color-accent | #FFDC58 |
| --sx-sys-color-border | #000000 |
| --sx-sys-color-danger | #f9575c |
| --sx-sys-color-success | #35ad68 |
| --sx-sys-color-warning | #FFA552 |
| --sx-sys-color-info | #74B9FF |
| --sx-sys-color-mint | #01FFCC |
| --sx-sys-color-lavender | #B8A9FA |
| --sx-sys-color-beige | #EFE7D6 |
| --sx-sys-color-gray-light | #CBCCC9 |
| --sx-sys-color-coral | #FF6B6B |
| --sx-sys-color-sky | #74B9FF |
| --sx-sys-color-pop-green | #88D498 |
| --sx-sys-color-orange | #FFA552 |
| --sx-sys-color-terminal-bg | #0f1115 |
| --sx-sys-color-terminal-surface | #161a20 |
| --sx-sys-color-terminal-elevated | #1b1f26 |
| --sx-sys-color-terminal-border | #2a2f37 |
| --sx-sys-color-terminal-text | #e6e6e6 |
| --sx-sys-color-terminal-muted | #9aa0a6 |
| --sx-sys-font-family-display | 'Bricolage Grotesque' |
| --sx-sys-font-family-body | 'Geist' |
| --sx-sys-font-family-mono | 'Geist Mono' |
| --sx-sys-font-family-terminal | 'IBM Plex Mono' |
| --sx-sys-font-family-mono-system | ui-monospace, SFMono-Regular, Menlo, Consolas, monospace |
| --sx-sys-font-size-xs | 0.6875rem |
| --sx-sys-font-size-sm | 0.75rem |
| --sx-sys-font-size-md | 0.8125rem |
| --sx-sys-font-size-base | 0.9rem |
| --sx-sys-font-size-lg | 1rem |
| --sx-sys-font-size-reading | 1.0625rem |
| --sx-sys-font-size-xl | 1.2rem |
| --sx-sys-font-size-2xl | 1.5rem |
| --sx-sys-font-size-3xl | 2rem |
| --sx-sys-font-size-4xl | 2.5rem |
| --sx-sys-font-display-sm | clamp(1.25rem, 3vw, 1.75rem) |
| --sx-sys-font-display-md | clamp(1.75rem, 4vw, 2.75rem) |
| --sx-sys-font-display-lg | clamp(2.5rem, 7vw, 4.5rem) |
| --sx-sys-border-width | 2px |
| --sx-sys-border-width-strong | 3px |
| --sx-sys-icon-stroke-width | 2.5px |
| --sx-sys-radius-sm | 0 |
| --sx-sys-radius-md | 0 |
| --sx-sys-radius-control | 0 |
| --sx-sys-shadow-color | #000000 |
| --sx-sys-shadow-sm | 3px 3px 0 var(--sx-sys-shadow-color) |
| --sx-sys-shadow-md | 5px 5px 0 var(--sx-sys-shadow-color) |
| --sx-sys-shadow-lg | 8px 8px 0 var(--sx-sys-shadow-color) |
| --sx-sys-shadow-xl | 12px 12px 0 var(--sx-sys-shadow-color) |
| --sx-sys-rotate-sticker | -2deg |
| --sx-sys-layout-width-doc | 80rem |
| --sx-sys-layout-sidebar-width | 13.5rem |
| --sx-sys-layout-gap-doc | 4rem |
| --sx-sys-layout-gap-main | 2rem |
| --sx-sys-layout-padding-inline | 1.5rem |
| --sx-sys-layout-padding-block-start | 2rem |
| --sx-sys-layout-padding-block-end | 3rem |
| --sx-sys-layout-grid-cell-min | 18rem |
| --sx-sys-breakpoint-sm | 36rem |
| --sx-sys-breakpoint-md | 45rem |
| --sx-sys-breakpoint-lg | 48rem |
| --sx-sys-breakpoint-xl | 64rem |
| --sx-sys-breakpoint-2xl | 82rem |
Layout Tokens
| 变量 | 取值 |
|---|---|
| --sx-layout-width-page | 78rem |
Article Tokens
| 变量 | 取值 |
|---|---|
| --sx-article-width-reading | 46rem |
| --sx-article-width-tutorial | 68rem |
| --sx-article-font-size | 1.0625rem |
| --sx-article-line-height | 1.8 |
Component Tokens
| 变量 | 取值 |
|---|---|
| --sx-comp-card-padding | 1rem |
| --sx-comp-card-shadow | 3px 3px 0 var(--sx-sys-shadow-color) |
| --sx-comp-card-radius | 0 |
| --sx-comp-card-hover-shadow | 8px 8px 0 var(--sx-sys-shadow-color) |
| --sx-comp-card-colored-shadow | 5px 5px 0 #FF6B6B |
| --sx-comp-card-colored-border | #FF6B6B |
| --sx-comp-demo-shadow | 8px 8px 0 var(--sx-sys-shadow-color) |
| --sx-comp-term-screen-bg | #0f1115 |
| --sx-comp-term-text | #e6e6e6 |
| --sx-comp-term-light-screen-bg | #FFFCF4 |
| --sx-comp-term-light-text | #000000 |
| --sx-comp-term-shadow | 8px 8px 0 #FFDC58 |
| --sx-comp-header-padding-block | 0.9rem |
| --sx-comp-header-padding-inline | clamp(1rem, 8vw, 6rem) |
| --sx-comp-header-gap | 1rem |
| --sx-comp-header-logo-size | 3.5rem |
| --sx-comp-header-logo-bg | #000000 |
| --sx-comp-header-logo-fg | #FFFCF4 |
| --sx-comp-page-head-margin-block-start | 1.5rem |
| --sx-comp-page-head-margin-block-end | 3rem |
| --sx-comp-page-head-max-width | 42rem |
| --sx-comp-page-head-title-size | clamp(2.5rem, 7vw, 4.5rem) |
| --sx-comp-page-head-desc-size | 1.0625rem |
| --sx-comp-page-head-gap | 0.75rem |
| --sx-comp-code-bg | #1a1a2e |
| --sx-comp-code-fg | #e6e6e6 |
| --sx-comp-code-highlight-selector | #FF6B6B |
| --sx-comp-code-highlight-property | #7FDBDA |
| --sx-comp-code-highlight-value | #FFDC58 |
| --sx-comp-code-highlight-comment | #666666 |
| --sx-comp-code-highlight-tag | #74B9FF |
| --sx-comp-code-highlight-string | #88D498 |