Đi tới nội dung
Mục
Ngôn ngữ, hiện là Tiếng Việt
Hệ thống thiết kế Rastrillo
Ngôn ngữ, hiện là Tiếng Việt
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

Token

Các thuộc tính tuỳ chỉnh dùng chung cho mọi thành phần. Màu và kiểu chữ thuộc về chủ đề (themes/day.css). Thang cỡ chữ và các bước giãn cách là cấu trúc, đến từ tokens.css.

Ở đây hiển thị chế độ sáng; mọi giá trị đều dùng light-dark. Ngưỡng WCAG 2.2 AA: 4,5:1 cho chữ và 3:1 cho viền điều khiển. Mọi màu trong các ô mẫu và chỗ khác đều lấy từ biến.

Nền và đường kẻ

  • --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

Chữ

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

Màu nhấn

  • --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

Sắc thái trạng thái

  • --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

Chiều sâu

  • --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)

Điều khiển

  • --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

Lựa chọn kiểu chữ

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

Bo góc

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

Họ chữ

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

Thang cỡ chữ

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

Khoảng cách

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