الانتقال إلى المحتوى
الأقسام
اللغة، حاليًا العربية
نظام تصميم Rastrillo

الرموز

خصائص مخصّصة مشتركة بين كل المكوّنات. اللون والخط جزء من السمة (themes/plain.css). سلّم الأحجام ودرجات التباعد بنية، وتأتي من tokens.css.

يُعرض هنا الوضع الفاتح، وكل القيم مكتوبة بـ light-dark. حدود WCAG 2.2 AA الدنيا: 4.5:1 للنص و3:1 لحدود عناصر التحكّم. كل الألوان في الرقائق وغيرها تأتي من المتغيّرات.

الأسطح والخطوط

  • --rst-bg#ffffff
  • --rst-header-rulevar(--rst-line)
  • --rst-line#e0e0e0
  • --rst-line-strong#767676
  • --rst-rail-bgvar(--rst-surface)
  • --rst-surface#ffffff
  • --rst-surface-2#f4f4f4

النص

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

لون التمييز

  • --rst-accent#111111
  • --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#ededed
  • --rst-accent-strong#000000
  • --rst-on-accent#ffffff
  • --rst-on-accent-fillvar(--rst-on-accent)

نغمات الحالة

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

العمق

  • --rst-depth-ambienttransparent
  • --rst-depth-contacttransparent
  • --rst-depth-face0
  • --rst-depth-hltransparent
  • --rst-light-rimvar(--rst-line)
  • --rst-light-washtransparent
  • --rst-overlayrgba(0, 0, 0, 0.4)
  • --rst-press-drop0px
  • --rst-press-spot0
  • --rst-press-spot-plain0
  • --rst-press-wash0
  • --rst-press-wash-plain0
  • --rst-shadow-knob0 1px 1px light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.4))
  • --rst-shadow-knob-hovervar(--rst-shadow-knob)
  • --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))
  • --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-sm3px

عائلة الخط

  • --rst-fontsystem-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, 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