hệ thống thiết kế rastrillo

Tổng quan mọi thứ hệ thống thiết kế cung cấp. Chủ đề: plain. Ngôn ngữ: Tiếng Việt.

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/plain.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#ffffff
• --rst-header-rulevar(--rst-line)
• --rst-line#e0e0e0
• --rst-line-strong#767676
• --rst-surface#ffffff
• --rst-surface-2#f4f4f4

Chữ

• --rst-text#111111
• --rst-text-faint#636363
• --rst-text-muted#4a4a4a

Màu nhấn

• --rst-accent#111111
• --rst-accent-soft#ededed
• --rst-accent-strong#000000
• --rst-on-accent#ffffff

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

• --rst-tone-negative-bg#f0e3e3
• --rst-tone-negative-fg#7a2c2c
• --rst-tone-neutral-bg#eaeaea
• --rst-tone-neutral-fg#3f3f3f
• --rst-tone-positive-bg#e4ebe6
• --rst-tone-positive-fg#2e5b3e
• --rst-tone-warning-bg#efeadd
• --rst-tone-warning-fg#6a5320

Chiều sâu

• --rst-overlayrgba(0, 0, 0, 0.4)
• --rst-shadow-knob0 1px 1px light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.4))
• --rst-shadow-lift0 1px 1px light-dark(rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.3))
• --rst-shadow-pop0 1px 3px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.5))

Bo góc

• --rst-radius4px
• --rst-radius-pill999px
• --rst-radius-sm3px

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