اللون
رموز الألوان الدلالية التي يُبنى منها كل مكوّن في BoardUI - أدوار المقدمة والنص والخلفية والحدود، مسمّاة 1:1 مع متغيرات Figma.
كيف يعمل النظام
الألوان مرتبة في طبقتين. الأساسيات هي لوحة الألوان الخام - مقاييس OKLCH الافتراضية لـ Tailwind بالإضافة إلى عدد من التعديلات المضبوطة عبر Figma في styles/theme.css. الرموز الدلالية تجلس فوق تلك العناصر الأولية وتشير إليها بواسطة الغرض - ما اللون مخصص له، وليس كيف يبدو. --color-text-secondary says “supporting copy”, not “neutral 500”.
تستهلك المكوّنات الطبقة الدلالية فقط. هذا التوجيه الأحادي هو ما يجعل النظام قابلاً للصيانة: أعد ضبط قيمة أساسية أو أعد تعيين رمز دلالي وستتحدث جميع المكوّنات دفعة واحدة - دون تغيير أي ملفات مكوّنات. وهذا أيضاً المسار نحو الوضع الداكن: .dark في theme.css يُعيد توجيه نفس الرموز إلى قيم داكنة، لذا لا تحتاج المكوّنات أبداً إلى dark: البادئات.
تعكس أسماء الرموز مسارات متغيرات Figma (text/primary → --color-text-primary) لذا تُترجم مواصفات التصميم إلى شيفرة دون الحاجة إلى جدول بحث. لاحظ البادئة المضاعفة في أسماء الفئات - text-text-primary, bg-background-primary-default - الجزء الأول هو أداة Tailwind، والباقي هو المسار الدلالي الكامل للرمز.
نظام رموز تصميم واحد، ثيمان
إضافة .dark إلى العنصر الجذري. يعيد BoardUI تعيين رموز التصميم الدلالية نفسها، لذا يتغير كل مكوّن معه.
عيّن كل سمة
احتفظ بالقيم الفاتحة في :root والقيم الداكنة في .dark.
استخدم الألوان الدلالية
استخدم الرموز مثل bg-background-primary-default، وليس الألوان الخام.
احتفظ به مركزياً
تجنب استخدام dark: التجاوزات حتى تظل التغييرات قابلة للتنبؤ.
يتضمن الاستمرارية وسكريبت تهيئة بدون وميض.
عرض دليل التثبيتلون تمييز واحد، لكل دعوة للإجراء
كل سطح تفاعلي - تدرجات الزر الرئيسي، ومربعات الاختيار، وأزرار الاختيار، والمفاتيح، والشرائح، والتبويبات، وعنصر الشريط الجانبي المحدد، وحلقات التركيز - يقرأ من --color-accent-50…950 تدرج يعتمد الأزرق افتراضيًا. اختر أي درجة لونية أدناه (أو لونًا مخصصًا بالكامل) وشاهد هذه الصفحة تتلوّن مباشرةً؛ تبقى ألوان المخططات والحالات ثابتة عمدًا.
يقع اللون المخصص تمامًا على --color-accent-500، الدرجة التي يبدأ منها تدرّج الأزرار الأساسية وتستخدمها حلقات التركيز، وتُبنى الدرجات العشر الأخرى حوله. تضع الأزرار نصًا أبيض فوقه، لذا اختر لونًا داكنًا بما يكفي لقراءته.
خذه معك: انسخ التجاوز المكوّن من أحد عشر متغيراً والصقه بعد استيراد theme.css.
المقدمة
تعبئات الأيقونات والمقدمات العكسية/على الألوان - كل شيء مرسوم فوق سطح ليس نصاً جارياً.
نص
التسلسل الهرمي للنوع: أساسي للعناوين والقيم الرئيسية، وثانوي للنص الداعم، وثالثي للتلميحات، بالإضافة إلى حالات معطّلة وخطأ.
الخلفية
تعبئات السطح. Full هو اللوحة الخارجية؛ وتصف primary وsecondary وtertiary الأسطح المتداخلة تدريجياً وحالات تفاعلها.
حدود
الخطوط الرفيعة وحلقات التركيز. تصبح حدود الأزرار أغمق تدريجياً عند التمرير والضغط؛ وحلقة التركيز هي اللون الأزرق التمييزي الوحيد.
الرسوم البيانية
Chart colors. Track is the background bar/ring behind a series, cursor the hover outline and dashed reference line, neutral an “other”-style data slice. The numbered accents are a categorical ramp — each pairs a base fill with a one-tone-darker active used for hover emphasis (the 400 → 500 recipe every chart follows). In charts these are consumed as CSS variables (e.g. fill=“var(--color-chart-1)”) rather than classes.
الحالة
ألوان تغذية راجعة دلالية تبقى معانيها ثابتة عبر السمات المختلفة.