السمات والرموز

الوضعان الفاتح والداكن مدمجان. وكل لون وخط ومسافة وحافة هو رمز تصميم يمكنك قراءته في CSS أو JavaScript.

الفاتح والداكن

الوضع الداكن يتبع إعداد الجهاز. ولاختيار وضع بنفسك، اضبط data-theme على العنصر الجذري.

html

<html data-theme="dark">   <!-- or "light"; leave it out to follow the device -->

استخدام الرموز

استخدم متغيرات CSS في أنماطك، لتتغير شاشاتك مع الوضع:

css

.panel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  font-family: var(--font-body);
}

الرمز	يُستخدم في
`--surface`, `--surface-alt`, `--surface-raised`	الصفحة واللوحات والبطاقات المرتفعة
`--ink`, `--ink-muted`	النص والنص الثانوي
`--primary`, `--on-primary`	الإجراءات الرئيسية والنص فوقها
`--accent`	الروابط والتمييز والصفحة الحالية
`--border`, `--border-strong`, `--focus-ring`	الخطوط وحدود الحقول والتركيز
`--success`, `--danger`	الحالة
`--space-`, `--radius-`, `--shadow-card`	المسافات والحواف والعمق
`--font-display`, `--font-body`	العناوين والنص

القيم نفسها متاحة في JavaScript، للرسوم البيانية أو التطبيقات الأصلية:

import { light, dark } from "@truvar-ai/design-system/tokens";

light.primary; // "#001250"

الخطوط

افتراضيًا، العناوين بخط Poppins والنص بخط DM Sans، ومعهما Alexandria و IBM Plex Sans Arabic للعربية، وكلها تأتي مع الحزمة في fonts.css. لاستخدام خطوطك، حمّلها بالطريقة التي تفضلها، ولا تستورد fonts.css، ثم اضبط رمزي الخطوط بعد styles.css:

app.css

:root {
  --font-display: "Inter", "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
}

اترك خطًا عربيًا في المرتبة الثانية في كل قائمة. يستخدم المتصفح أول خط يحتوي على الحرف، فيحصل كل من النص الإنجليزي والعربي على خطه المناسب.

لتغيير الخطوط لعلامة تجارية واحدة فقط، ضع الأسطر نفسها تحت :root[data-brand="<name>"].

العلامات التجارية

Truvar هي العلامة الافتراضية. وأي علامة أخرى هي ملف صغير يغيّر بعض الرموز: اضبط data-brand="<name>" على العنصر الجذري لتحصل على ألوانها في الوضعين، وغلّف التطبيق بـ BrandProvider ليرسم Logo شعارها.