التنسيق

طبقات CSS ورموز التصميم --owe-* والسمتان الفاتحة والداكنة.

في هذه الصفحة

المحرّر معزول عن CSS صفحتك: لا تصل إليه قواعد إعادة الضبط ولا قواعد العناصر ولا الأصناف المساعدة، ولا يتجاوز قواعدَه إلا محدِّد أكثر تخصيصًا أو !important. خصّص مظهر المحرّر بتعيين رموز التصميم (design tokens).

ملفات التنسيق

يحتوي open-wysiwyg-editor/style.css على تنسيق المحرّر وواجهته ومحتواه. أما content.css ففيه تنسيق المحتوى فقط للصفحات المنشورة: غلّف الـ HTML المحفوظ بـ <div class="owe-content-root">. وتأتي كل حزمة إطار عمل بالملفات نفسها تحت اسمها، مثل @open-wysiwyg-editor/vue/style.css.

رموز التصميم

عيّن الرموز على .owe (أو :root). وهكذا يخصّص هذا الموقع مظهر المحرّر:

CSS

.owe {
  --owe-brand: #0066ff;
  --owe-font: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --owe-radius: 24px;
}

رموز التصميم الشائعة
الرمز	النوع	ما الذي يتحكم به
`--owe-font`	font stack	خط الواجهة والمحتوى.
`--owe-font-size, --owe-line-height`	length	الحجم الأساسي للمحتوى.
`--owe-radius, --owe-radius-sm`	length	استدارة زوايا المحرّر وعناصر التحكم.
`--owe-bg, --owe-chrome, --owe-surface`	color	خلفيات منطقة المحتوى وشريط الأدوات واللوحات.
`--owe-text, --owe-muted`	color	ألوان النص.
`--owe-border, --owe-border-subtle`	color	الحدود. أبقِ `--owe-border` بنسبة تباين 3:1 مع الخلفية.
`--owe-brand, --owe-brand-2, --owe-on-brand`	color	لون الهوية الواحد، واللون الثاني للحافة المتدرجة، ولون النص على أسطح الهوية. راجع دليل المظهر.
`--owe-accent, --owe-primary, --owe-focus`	color	مشتقة من لون الهوية: الروابط والنص، وتعبئة الأزرار المضغوطة، وحلقة التركيز.

فاتح وداكن

يأتي المحرّر بمجموعتي رموز، فاتحة وداكنة. عيّن ui.theme إلى light أو dark أو auto (الافتراضي، ويتبع النظام)، وبدّل الرموز تحت .owe[data-theme="dark"] لقيم مختلفة لكل سمة.

عدّل هذه الصفحة على GitHub