# كود المنصات

> سجل shadcn لنظام التصميم الموحد (DGA) في السعودية، مبني على Base UI وTailwind CSS v4. عربي وإنجليزي (RTL وLTR)، فاتح وداكن، وفق WCAG 2.1 AA.

Install: `npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.json`, then `npx shadcn@latest add @dga/button`.
Every docs page is available as Markdown at its URL plus `.md`. Full text: https://dga.omqkhafi.dev/ar/llms-full.txt
English: https://dga.omqkhafi.dev/en/llms.txt

## المكوّنات

- [Avatar](https://dga.omqkhafi.dev/ar/docs/components/avatar.md): صورة شخص أو أحرفه الأولى أو أيقونة عامة. سبعة أحجام، دائري أو مربع، ومجموعات الصور الرمزية.
- [Badge](https://dga.omqkhafi.dev/ar/docs/components/badge.md): تسمية قصيرة لحالة أو عدد أو فئة. سبعة ألوان، مملوءة أو بحد فقط، وثلاثة أحجام.
- [Button](https://dga.omqkhafi.dev/ar/docs/components/button.md): يُنفّذ إجراءً. ستة أنماط، ونسختان للإجراءات المدمّرة وللخلفيات الملونة، وثلاثة أحجام، وزر الأيقونة فقط وحالة التحميل.
- [Divider](https://dga.omqkhafi.dev/ar/docs/components/divider.md): خط رفيع يفصل المحتوى إلى أقسام. أفقي أو عمودي، وأربعة ألوان.
- [Featured Icon](https://dga.omqkhafi.dev/ar/docs/components/featured-icon.md): أيقونة داخل حاوية مظلَّلة تتصدر البطاقات والحالات الفارغة وصناديق الحوار. خفيفة وصلبة وبحد فقط، وستة ألوان.
- [Link](https://dga.omqkhafi.dev/ar/docs/components/link.md): ينقل المستخدم إلى صفحة أو قسم آخر. بنمط primary وneutral وللخلفيات الملونة، وحجمان، ومضمّن وخارجي.
- [Skeleton](https://dga.omqkhafi.dev/ar/docs/components/skeleton.md): عناصر نائبة تظهر أثناء تحميل المحتوى. مستطيل ومربع ودائرة وخط بأحجام Figma.
- [Spinner](https://dga.omqkhafi.dev/ar/docs/components/spinner.md): يوضح أن عملية قيد التنفيذ. سبعة أحجام، بنمط primary وneutral وللخلفيات الملونة.
- [Tag](https://dga.omqkhafi.dev/ar/docs/components/tag.md): تسميات للفئات والمرشحات والحالات. Tag وStatus Tag، مملوءان أو بحد فقط، وثلاثة أحجام، وقابلان للإزالة اختياريًا.

## التوثيق

- [التباين](https://dga.omqkhafi.dev/ar/docs/contrast.md): كل زوج لوني يفحصه كود المنصات وفق WCAG 2.1 AA، لكل مكوّن ولواجهة موقع التوثيق نفسه، في الوضعين الفاتح والداكن.
- [الاختلافات عن DGA](https://dga.omqkhafi.dev/ar/docs/deviations.md): كل موضع يختلف فيه كود المنصات عن ملف DGA في Figma، مع القيمة الأصلية وما اعتمدناه والسبب.
- [مقدمة](https://dga.omqkhafi.dev/ar/docs/index.md): ما هو كود المنصات، وصلته بنظام التصميم الموحد (DGA)، وما الموجود في السجل اليوم.
- [التثبيت](https://dga.omqkhafi.dev/ar/docs/installation.md): أضف نمط DGA إلى مشروع جديد أو قائم عبر سطر أوامر shadcn.

## الأساسيات

- [الألوان](https://dga.omqkhafi.dev/ar/docs/foundations/colors.md): ألوان DGA الأساسية، والرموز الدلالية للوضعين الفاتح والداكن، ونسب تباينها وفق WCAG.
- [الوضع الداكن](https://dga.omqkhafi.dev/ar/docs/foundations/dark-mode.md): كيف تُبنى السمة الداكنة، والسلّم المحايد وأدواره، وButton وBadge وTag وLink وأسطح الحالة في الوضعين الفاتح والداكن جنبًا إلى جنب.
- [الأيقونات](https://dga.omqkhafi.dev/ar/docs/foundations/icons.md): Hugeicons، مجموعة أيقونات DGA، مع قواعد الانعكاس في اتجاه RTL.
- [الزوايا](https://dga.omqkhafi.dev/ar/docs/foundations/radius.md): انحناءات زوايا DGA.
- [الظلال](https://dga.omqkhafi.dev/ar/docs/foundations/shadows.md): ظلال الارتفاع في DGA وطمس الخلفية.
- [المسافات](https://dga.omqkhafi.dev/ar/docs/foundations/spacing.md): سلّم المسافات بوحدة 4px، ورموز مسافات المكوّنات، ونقاط التوقف، والشبكات، والخصائص المنطقية.
- [الخطوط](https://dga.omqkhafi.dev/ar/docs/foundations/typography.md): خط IBM Plex Sans Arabic وسلّم الخطوط في DGA وأنماطه المتجاوبة.