トークン
すべてのコンポーネントが共有するカスタムプロパティ。色と書体はテーマの一部です（themes/signal.css）。タイプスケールと余白のステップは構造で、tokens.css から来ます。
ここではライトモードを表示しています。値はすべて light-dark です。WCAG 2.2 AA の下限は、テキストが 4.5:1、コントロールの枠線が 3:1。チップなどの色はすべて変数から取っています。
面と線
- --rst-bg#f4f5f8
- --rst-header-rulecolor-mix(in oklab, var(--rst-accent) 45%, var(--rst-line))
- --rst-line#dde0e7
- --rst-line-strong#6d7482
- --rst-rail-bgvar(--rst-surface)
- --rst-surface#ffffff
- --rst-surface-2#eef0f4
文字
- --rst-text#0c0e12
- --rst-text-faint#5b6270
- --rst-text-muted#454b57
アクセント
- --rst-accent#1a56ff
- --rst-accent-fillvar(--rst-accent)
- --rst-accent-fill-edgevar(--rst-accent)
- --rst-accent-fill-edge-hovervar(--rst-accent-strong)
- --rst-accent-fill-hovervar(--rst-accent-strong)
- --rst-accent-soft#e9eeff
- --rst-accent-strong#0f3fd6
- --rst-on-accent#ffffff
- --rst-on-accent-fillvar(--rst-on-accent)
状態のトーン
- --rst-tone-negative-bg#fbdee0
- --rst-tone-negative-fg#a8121f
- --rst-tone-neutral-bg#e6e8ee
- --rst-tone-neutral-fg#3b414d
- --rst-tone-positive-bg#d6efe6
- --rst-tone-positive-fg#08624a
- --rst-tone-warning-bg#f8e5c2
- --rst-tone-warning-fg#7a4708
奥行き
- --rst-depth-ambienttransparent
- --rst-depth-contacttransparent
- --rst-depth-face0
- --rst-depth-hltransparent
- --rst-light-rimvar(--rst-line)
- --rst-light-washtransparent
- --rst-overlayrgba(9, 11, 16, 0.55)
- --rst-press-drop0px
- --rst-press-spot0
- --rst-press-spot-plain0
- --rst-press-wash0
- --rst-press-wash-plain0
- --rst-shadow-knob0 1px 2px light-dark(rgba(12, 14, 18, 0.45), rgba(0, 0, 0, 0.6))
- --rst-shadow-knob-hovervar(--rst-shadow-knob)
- --rst-shadow-lift0 1px 2px light-dark(rgba(12, 14, 18, 0.2), rgba(0, 0, 0, 0.5))
- --rst-shadow-pop0 4px 10px light-dark(rgba(12, 14, 18, 0.22), rgba(0, 0, 0, 0.62))
- --rst-sheen-filltransparent
- --rst-sheen-plaintransparent
コントロール
- --rst-control-bordervar(--rst-line-strong)
- --rst-control-border-hovervar(--rst-accent)
- --rst-control-facevar(--rst-surface)
- --rst-control-face-hovervar(--rst-surface)
- --rst-control-face-presstransparent
- --rst-control-text-hovervar(--rst-accent)
- --rst-danger-fillvar(--rst-tone-negative-fg)
- --rst-danger-fill-edgevar(--rst-tone-negative-fg)
- --rst-danger-fill-edge-hovervar(--rst-tone-negative-fg)
- --rst-danger-fill-hovervar(--rst-tone-negative-fg)
- --rst-danger-hover-filterbrightness(0.9)
- --rst-focus-edgevar(--rst-line-strong)
- --rst-focus-halotransparent
- --rst-ghost-edgevar(--rst-line-strong)
- --rst-ghost-edge-hovervar(--rst-line-strong)
- --rst-ghost-face-hovertransparent
- --rst-knobvar(--rst-surface)
- --rst-knob-shadevar(--rst-surface)
- --rst-nav-current-bgvar(--rst-accent-soft)
- --rst-nav-current-fgvar(--rst-accent)
- --rst-on-danger-fillvar(--rst-on-accent)
- --rst-on-danger-fill-hovervar(--rst-on-accent)
- --rst-row-tint-hovervar(--rst-surface-2)
- --rst-row-tint-pressvar(--rst-surface-2)
- --rst-summary-edgetransparent
- --rst-summary-edge-hovertransparent
- --rst-summary-facetransparent
- --rst-summary-face-hovertransparent
- --rst-summary-radius0
- --rst-switch-h19px
- --rst-switch-knob15px
- --rst-switch-touch-h19px
- --rst-switch-touch-knob15px
- --rst-switch-touch-w34px
- --rst-switch-w34px
- --rst-tint-card-hovertransparent
- --rst-tint-group-hovertransparent
- --rst-tint-hovervar(--rst-accent-soft)
- --rst-tint-pressvar(--rst-accent-soft)
- --rst-tint-taptransparent
- --rst-tint-tile-hovervar(--rst-surface)
- --rst-tint-tile-pressvar(--rst-surface)
- --rst-track-offvar(--rst-line-strong)
文字組みの選択
- --rst-heading-sizevar(--rst-fs-base)
- --rst-label-caseuppercase
- --rst-label-track0.06em
- --rst-title-size1.375rem
- --rst-title-track-0.015em
- --rst-title-weight600
角の丸み
- --rst-radius4px
- --rst-radius-pill999px
- --rst-radius-sm2px
書体
- --rst-font"Helvetica Neue", Helvetica, "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, ui-sans-serif, system-ui, sans-serif
文字サイズの段階
- Ag--rst-fs-base0.875rem
- Ag--rst-fs-lg1.0625rem
- Ag--rst-fs-sm0.78125rem
- Ag--rst-fs-xs0.71875rem
余白
- --rst-sp-10.25rem
- --rst-sp-20.5rem
- --rst-sp-30.75rem
- --rst-sp-41rem
- --rst-sp-51.5rem
- --rst-sp-62.5rem