Tokens

Propiedades personalizadas compartidas por todos los componentes. El color y la tipografía forman parte del tema (themes/day.css). La escala tipográfica y los pasos de espaciado son estructura y vienen de tokens.css.

Aquí se muestra el modo claro; todos los valores usan light-dark. Mínimos WCAG 2.2 AA: 4,5:1 para texto y 3:1 para bordes de controles. Todos los colores de las muestras y demás salen de las variables.

Superficies y líneas

• --rst-bg#fbfbfc
• --rst-header-rulevar(--rst-line)
• --rst-line#e6e6ea
• --rst-line-strong#868691
• --rst-rail-bgvar(--rst-bg)
• --rst-surface#ffffff
• --rst-surface-2#f3f3f5

Texto

• --rst-text#18181b
• --rst-text-faint#6b6b75
• --rst-text-muted#52525c

Color de acento

• --rst-accent#1f56d6
• --rst-accent-fill#2257df
• --rst-accent-fill-edge#153ca0
• --rst-accent-fill-edge-hover#12358f
• --rst-accent-fill-hover#1d4dc8
• --rst-accent-soft#ecf1ff
• --rst-accent-strongcolor-mix(in srgb, var(--rst-accent, #1f56d6) 80%, #000000)
• --rst-on-accent#ffffff
• --rst-on-accent-fill#ffffff

Tonos de estado

• --rst-tone-negative-bg#fee2e2
• --rst-tone-negative-fg#b91c1c
• --rst-tone-neutral-bg#eef0f2
• --rst-tone-neutral-fg#374151
• --rst-tone-positive-bg#dcfce7
• --rst-tone-positive-fg#166534
• --rst-tone-warning-bg#fef3c7
• --rst-tone-warning-fg#854d0e

Profundidad

• --rst-depth-ambientrgba(16, 24, 40, 0.06)
• --rst-depth-contactrgba(16, 24, 40, 0.1)
• --rst-depth-face0.04
• --rst-depth-hlrgba(255, 255, 255, 0.8)
• --rst-light-rimcolor-mix(in srgb, var(--rst-accent, #1f56d6) 23%, var(--rst-line))
• --rst-light-washrgba(255, 255, 255, 0)
• --rst-overlayrgba(0, 0, 0, 0.45)
• --rst-press-drop1px
• --rst-press-spot0.16
• --rst-press-spot-plain0.07
• --rst-press-wash0.08
• --rst-press-wash-plain0.04
• --rst-shadow-knob0 1px 2px light-dark(rgba(16, 24, 40, 0.22), rgba(0, 0, 0, 0.5)), 0 0 0 0.5px light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.3))
• --rst-shadow-knob-hover0 1.5px 3px light-dark(rgba(16, 24, 40, 0.26), rgba(0, 0, 0, 0.58)), 0 0 0 0.5px light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.3))
• --rst-shadow-lift0 1px 2px light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.3))
• --rst-shadow-pop0 2px 4px light-dark(rgba(16, 24, 40, 0.06), rgba(0, 0, 0, 0.35)), 0 8px 16px -4px light-dark(rgba(16, 24, 40, 0.1), rgba(0, 0, 0, 0.5))
• --rst-sheen-fillrgba(255, 255, 255, 0.08)
• --rst-sheen-plaincolor-mix(in srgb, var(--rst-accent-fill) 9%, transparent)

Controles

• --rst-control-border#d0d4dc
• --rst-control-border-hover#8a8a95
• --rst-control-face#ffffff
• --rst-control-face-hover#f7f8fa
• --rst-control-face-press#e6e9ee
• --rst-control-text-hover#18181b
• --rst-danger-fill#c62f2f
• --rst-danger-fill-edge#8d1f1f
• --rst-danger-fill-edge-hover#7e1a1a
• --rst-danger-fill-hover#b12929
• --rst-danger-hover-filternone
• --rst-focus-edgevar(--rst-accent, light-dark(#1f56d6, #7aa2ff))
• --rst-focus-halocolor-mix(in srgb, var(--rst-accent, light-dark(#1f56d6, #7aa2ff)) 22%, transparent)
• --rst-ghost-edgetransparent
• --rst-ghost-edge-hovertransparent
• --rst-ghost-face-hover#f3f3f5
• --rst-knob#ffffff
• --rst-knob-shade#f1f3f6
• --rst-nav-current-bg#ffffff
• --rst-nav-current-fg#18181b
• --rst-on-danger-fill#ffffff
• --rst-on-danger-fill-hover#ffffff
• --rst-row-tint-hovervar(--rst-tint-hover)
• --rst-row-tint-pressvar(--rst-tint-press)
• --rst-summary-edge#d0d4dc
• --rst-summary-edge-hover#8a8a95
• --rst-summary-face#ffffff
• --rst-summary-face-hover#f7f8fa
• --rst-summary-radiusvar(--rst-radius-sm)
• --rst-switch-h23px
• --rst-switch-knob19px
• --rst-switch-touch-h31px
• --rst-switch-touch-knob27px
• --rst-switch-touch-w51px
• --rst-switch-w40px
• --rst-tint-card-hovervar(--rst-tint-hover)
• --rst-tint-group-hovervar(--rst-tint-hover)
• --rst-tint-hovercolor-mix(in srgb, var(--rst-accent, #1f56d6) 4.5%, var(--rst-surface))
• --rst-tint-presscolor-mix(in srgb, var(--rst-accent, #1f56d6) 8.5%, var(--rst-surface))
• --rst-tint-tapvar(--rst-tint-press)
• --rst-tint-tile-hovervar(--rst-tint-hover)
• --rst-tint-tile-pressvar(--rst-tint-press)
• --rst-track-off#8a8a95

Decisiones tipográficas

• --rst-heading-size0.8125rem
• --rst-label-casenone
• --rst-label-track0
• --rst-title-size1.25rem
• --rst-title-track-0.012em
• --rst-title-weight600

Radio de esquina

• --rst-radius6px
• --rst-radius-pill999px
• --rst-radius-sm4px

Familia tipográfica

• --rst-fontsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif

Escala tipográfica

• Ag--rst-fs-base0.875rem
• Ag--rst-fs-lg1.0625rem
• Ag--rst-fs-sm0.78125rem
• Ag--rst-fs-xs0.71875rem

Espaciado

• --rst-sp-10.25rem
• --rst-sp-20.5rem
• --rst-sp-30.75rem
• --rst-sp-41rem
• --rst-sp-51.5rem
• --rst-sp-62.5rem