ثبّت، وغلّف تطبيقك، وتحكّم بكل رمز تصميمي.

#المتطلّبات

يستهدف dev-dga إصدارات React الحديثة وأي أداة بناء تستطيع استيراد ملف CSS.

#ثبّت الحزم

ثلاث حزم: مكوّنات React، وملف CSS المُجمَّع، والرموز التصميمية. ثبّتها الثلاث معًا.

npm i @dev-dga/react @dev-dga/css @dev-dga/tokens

#استورد الأنماط مرة واحدة

استورد ملف الأنماط مرة واحدة في جذر التطبيق (في التخطيط الجذري أو ملف الدخول). يشحن التصفير والرموز والسمة الداكنة وكل أنماط المكوّنات.

// app/layout.tsx (Next.js) or your entry fileimport '@dev-dga/css';

لأن نظام التصميم يعيش في @layer ddga-base / ddga-components، فأي قاعدة غير مُطبَّقة في طبقة عندك تتجاوزه دون الحاجة إلى !important .

#ضَع تطبيقك داخل المزوّد

يوفّر DgaProvider الاتجاه والوضع الداكن وسمة العلامة وجذر الإرساء الذي تُرسى فيه الطبقات المنبثقة (الحوارات والتلميحات والإشعارات). ضَعه مرة واحدة قرب الجذر فوق كل ما يستخدم المكتبة.

import { DgaProvider } from '@dev-dga/react';import '@dev-dga/css';export default function App({ children }) {  return (    <DgaProvider dir="rtl" mode="light" theme={{ primary: 'saGreen' }}>      {children}    </DgaProvider>  );}

خصائص DgaProvider

#نسّق اللون الرئيس

يتبدّل النظام بأكمله من قيمة واحدة. مرّر theme.primary بأيٍّ من ثلاث صيغ - وتُشتقّ حالات التمرير والضغط تلقائيًا عبر color-mix().

1. 1

   اسم لوحة جاهزة

   إحدى: saGreen أو info أو success أو warning أو error أو gray.

2. 2

   أي لون CSS

   قيمة hex أو rgb أو oklch. وتُشتقّ حالتا التمرير والضغط نيابةً عنك.

3. 3

   ثلاثية صريحة

   تحكّم كامل عبر { base, hover, active, foreground } حين تحتاج قيمًا محدّدة.

// 1 - a built-in palette name<DgaProvider theme={{ primary: 'info' }}>…</DgaProvider><DgaProvider theme={{ primary: '#7C3AED' }}>…</DgaProvider><DgaProvider  theme={{    primary: {      base: '#1B8354',      hover: '#166A45',      active: '#104631',      foreground: '#FFFFFF',    },  }}>  …</DgaProvider>

#تجاوز أي رمز تصميمي

كل لون واستدارة ومسافة وخط وظل هو متغيّر CSS باسم --ddga-* مُعرَّف في @layer ddga-base. أعِد تعريف أيٍّ منها في أي مكان - عامًّا على :root أو محصورًا في شجرة فرعية - فيتبعه النظام. دون خطوة بناء ودون Sass.

مجموعات الرموز

/* your globals.css - imported AFTER '@dev-dga/css' */:root {  --ddga-radius-md: 4px;          /* squarer corners, system-wide */  --ddga-color-primary: #0f766e;  /* teal brand */  --ddga-font-ar: 'Cairo', sans-serif;}.compact {  --ddga-card-padding: var(--ddga-space-3);  --ddga-radius-lg: 6px;}

احصر التجاوزات في شجرة فرعية بضبط المتغيّرات على أي عنصر مُغلِّف - ويتكفّل التتالي بالباقي، في الوضعين الفاتح والداكن.

#باني السمة

لمحة سريعة - عدّل بعض الرموز وشاهد المعاينة تتبدّل. للتحكّم الكامل بكل الرموز الـ188، افتح منسّق السمة الكامل.

@import '@dev-dga/css'; /* the DGA design system (index.css) - load it first */:root {  /* غيّر أي عنصر تحكّم أدناه لتوليد تجاوزات الرموز */}

#الوضع الداكن

الوضع الداكن مجموعة رموز مُنتقاة بعناية، لا عكسٌ آليّ. فعِّله بخاصية mode في المزوّد، أو بتبديل data-theme="dark" على عنصر مُغلِّف. طبّقه قبل أول رسم (كما يفعل هذا الموقع) لتفادي الوميض.

// Controlled by the provider<DgaProvider mode="dark">…</DgaProvider><div data-theme="dark"></div>

#العربية والاتجاه

اضبط dir="rtl" فينعكس التخطيط بالكامل عبر الخصائص المنطقية - دون عملٍ لكل مكوّن. ويغطّي خط IBM Plex Sans Arabic العربية واللاتينية من عائلة واحدة، فيبقى المحتوى المختلط متّسقًا.

<DgaProvider dir="rtl" locale="ar"></DgaProvider>

#الخطوات التالية

اكتمل إعدادك. إلى أين تذهب من هنا: