SDAIA

الهويات

تأتي مكتبة SDAIA UI بهويّتين: العامة (الافتراضية) والخاصة. الهوية ليست مجرد طبقة شكلية — بل تتحكّم في القواعد البصرية التي يلتزم بها كل مكوّن، بما في ذلك الطباعة، وانحناء الحواف، والحشوات والمسافات، وأحجام الأيقونات، ولوحة ألوان الهوية. يتم تفعيل الهوية من خلال إضافة فئة CSS واحدة إلى عنصر سَلَفي في تطبيقك.

نظرة سريعة

نفس المكونات، نفس السلوك، نفس إمكانية الوصول - حرية بصرية مختلفة.

العامة — هوية DGA الصارمة

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

الخاصة — هوية مرنة

نفس الإعدادات الافتراضية، لكن يمكن تجاوز كل رمز على مستوى الهوية. خصِّص المظهر لمنتجك دون نسخ المكوّنات.

العامة مقابل الخاصة

تأتي الهويّتان بنفس الإعدادات الافتراضية — بما في ذلك خط IBM Plex Sans Arabic — وبنفس سلوك المكوّنات. الفارق يكمن في أيٍّ من تلك الإعدادات يُسمح للمصمم أو المطوّر بتعديله. تلتزم العامة بمعيار التصميم لـ DGA بصرامة؛ بينما الخاصة هوية أكثر مرونة موجَّهة للمنتجات التي تحتاج حرية بصرية أكبر.

العامة — هوية DGA الصارمة

تفرض هوية القطاع العام قواعد DGA البصرية ولا يمكن تجاوزها. خط IBM Plex Sans Arabic هو الخط الرسمي ولا يجوز استبداله. تأتي المكوّنات بانحناءات ثابتة، ومقاييس حشوات ومسافات ثابتة، وأحجام أيقونات ثابتة، ولوحة ألوان مقفلة. يضمن ذلك أن كل منتج يستخدم الهوية العامة يكون متناغماً بصرياً مع جميع الخدمات الحكومية الأخرى. استخدم العامة لأي خدمة يجب أن تتوافق مع معيار التصميم لـ DGA.

الخاصة — هوية مرنة

تخفّف هوية القطاع الخاص قيود DGA. يمكن تخصيص الخط، والانحناءات، والحشوات والمسافات، وأحجام الأيقونات، ولوحة ألوان الهوية بالكامل عبر الرموز — يبقى IBM Plex Sans Arabic هو الخط الافتراضي، لكن يمكنك استبداله بأي خط يحتاجه منتجك. يمنح ذلك فرق المنتجات مساحة للتعبير عن هوية متميّزة مع الحفاظ على نفس سلوك المكوّنات، وإمكانية الوصول، ودعم اللغات من اليمين لليسار. استخدم الخاصة للمنتجات غير المُلزَمة بمعيار DGA البصري، أو للأدوات الداخلية وتجارب الهويات المخصّصة.

جنباً إلى جنب: ما الذي يتغيّر بين العامة والخاصة

توضّح هذه المقارنات كيف تتصرّف نفس رموز المكوّنات تحت كل هوية. القيم المعروضة للخاصة هي أمثلة — تكشف الهوية عن الرموز ليتمكّن كل منتج من شحن مقاييسه الخاصة.

ألوان الهوية

لوحة ألوان الهوية هي أكثر فارق ظاهر. تستخدم العامة لوحة DGA الرسمية؛ بينما تكشف الخاصة نفس الرموز للتجاوز. القيم أدناه استرشادية — يمكن لسمة الخاصة شحن أي لوحة ألوان.

اللون الأساسي 600--ds-color-brand-primary-600
Public
#1B8354
Private
#6E56CF

اللون الافتراضي للإجراءات المُستخدَم عبر الأزرار والروابط والحالات النشطة.

اللون الأساسي 500--ds-color-brand-primary-500
Public
#25935F
Private
#7C66D9
اللون الأساسي 300--ds-color-brand-primary-300
Public
#7BC9A2
Private
#B7A4F0
اللون الأساسي 50--ds-color-brand-primary-50
Public
#F3FCF6
Private
#F5F2FF

انحناء الحواف

تقفل العامة كل مكوّن على مقياس انحناء DGA. تكشف الخاصة نفس الرموز ليتمكّن أي منتج من شحن مظهر أكثر حدّة أو أكثر نعومة.

انحناء صغير--ds-radius-sm
Public
4px
Private
8px
انحناء متوسط--ds-radius-md
Public
8px
Private
14px
انحناء كبير--ds-radius-lg
Public
12px
Private
20px
انحناء أكبر--ds-radius-xl
Public
16px
Private
28px

الحشوات والمسافات

يحكم مقياس المسافات الكثافة. تستخدم العامة إيقاع DGA الثابت؛ بينما يمكن للخاصة ضبط المقياس ليناسب واجهة أكثر كثافة أو أكثر اتساعاً.

مسافة صغيرة--ds-spacing-sm
Public
6px
Private
8px
مسافة متوسطة--ds-spacing-md
Public
8px
Private
12px
مسافة كبيرة--ds-spacing-lg
Public
12px
Private
16px
مسافة أكبر--ds-spacing-xl
Public
16px
Private
24px

أحجام الأيقونات

تفرض العامة مقياس أيقونات DGA. تكشف الخاصة رموز الأحجام للمنتجات التي تفضّل أيقونات أكبر أو أصغر.

أيقونة صغيرة--ds-size-icon-sm
Public
16px
Private
18px
أيقونة متوسطة--ds-size-icon-md
Public
20px
Private
22px
أيقونة كبيرة--ds-size-icon-lg
Public
24px
Private
28px

الطباعة

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

خط العناوين--ds-brand-font-display
PublicIBM Plex Sans Arabic (مقفل)
PrivateIBM Plex Sans Arabic — أو أي خط مخصّص
خط النص--ds-brand-font-text
PublicIBM Plex Sans Arabic (مقفل)
PrivateIBM Plex Sans Arabic — أو أي خط مخصّص

التفعيل الثابت

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

الموصى به — على عنصر <html>

وضع الفئة على <html> يتماشى مع الطريقة المعتادة لضبط الوضع الداكن واتجاه المستند. كما يتفادى ومضة الهوية أثناء الترطيب لأن الفئة موجودة قبل تشغيل أي كود React.

<!DOCTYPE html>
<html lang="en" class="brand-private">
<body>
<!-- جميع مكوّنات SDAIA UI داخل هذا العنصر تُعرض بهوية القطاع الخاص -->
</body>
</html>

بديل — على عنصر <body>

إذا كانت بيئتك لا تسمح لك بالتحكّم في وسم <html> (بعض قوالب أنظمة إدارة المحتوى، والودجات القابلة للتضمين، والواجهات المصغّرة)، تعمل الفئة أيضاً على <body> أو على أي عنصر حاوٍ. تُحدَّد الهوية من أقرب عنصر سَلَفي يحمل الفئة.

<body class="brand-private">
<!-- المكوّنات أدناه تُعرض بهوية القطاع الخاص -->
</body>

في Next.js (موجّه التطبيقات)

اضبط الفئة في تخطيط الجذر ليتم شحنها ضمن حمولة HTML الأولية. يضمن ذلك عرض الهوية الصحيحة من جهة الخادم ويمنع تبدّلاً بصرياً عند ترطيب شجرة React.

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="brand-private">
<body>{children}</body>
</html>
);
}

التفعيل الديناميكي (قابل للتبديل)

استخدم التفعيل الديناميكي عندما يجب أن يتمكّن المستخدمون من تبديل الهويات أثناء التشغيل — مثل مُحدِّد الهوية في الإعدادات، أو أداة معاينة. توفّر SDAIA UI موفّر BrandModeProvider الذي يدير الفئة على المستند ويحفظ الاختيار في localStorage.

١. غلّف تطبيقك بالموفّر

ثبّت BrandModeProvider مرة واحدة في أعلى مستوى ممكن من الشجرة. يُطبّق فئة الهوية على جذر المستند ويبقيها متزامنة مع الحالة.

// app/providers.tsx
'use client';
import { BrandModeProvider } from 'sdaia-ui';
export function Providers({ children }: { children: React.ReactNode }) {
return <BrandModeProvider>{children}</BrandModeProvider>;
}

٢. اقرأ وحدّث الهوية من أي مكوّن

استخدم خطّاف useBrandMode لقراءة الهوية الحالية وتبديلها. يُرجع الخطّاف { brand, setBrand } — حيث تكون brand إما 'public' أو 'private'.

'use client';
import { useBrandMode } from 'sdaia-ui';
export function BrandSwitch() {
const { brand, setBrand } = useBrandMode();
return (
<button onClick={() => setBrand(brand === 'public' ? 'private' : 'public')}>
Switch to {brand === 'public' ? 'Private' : 'Public'}
</button>
);
}

تحديد نطاق الهوية لجزء من الشجرة

بما أن فئة الهوية تُحدَّد من أقرب عنصر سَلَفي، يمكنك تطبيق الخاصة على قسم واحد من الصفحة بينما يبقى الباقي على العامة. هذا مفيد لأدوات المعاينة، وعروض الهويات المضمَّنة، أو لوحات التحكّم متعدّدة المستأجرين.

<main>
{/* الهوية العامة هنا (موروثة من <html>) */}
<Hero />
<section className="brand-private">
{/* تنطبق الهوية الخاصة على كل ما في هذا القسم */}
<PrivatePreview />
</section>
<Footer />
</main>

تفادي ومضة الهوية قبل التحميل

إذا ضبطت الهوية من كود العميل فقط، قد يرى المستخدمون الهوية العامة لفترة وجيزة قبل أن يعمل سكربتك ويبدّلها إلى الخاصة. لتفادي ذلك، إما اعرض الفئة بشكل ثابت من جهة الخادم (الموصى به)، أو استخدم سكربتاً مضمّناً صغيراً في رأس المستند يقرأ الهوية المحفوظة من localStorage ويُطبّق الفئة قبل تركيب شجرة React.

<!-- ضعه في <head>، قبل أي سكربت آخر -->
<script>
(function () {
try {
var b = localStorage.getItem('brand-mode');
if (b === 'private') document.documentElement.classList.add('brand-private');
} catch (e) {}
})();
</script>

ما الذي يتغيّر بين الهويتين

تُبدّل فئة الهوية رموز قواعد التصميم التي تحكم الشكل والكثافة واللون. الطباعة وسلوك المكوّنات وإمكانية الوصول ودعم اللغات من اليمين لليسار متطابقة عبر الهويتين.

مقفل في العامة، قابل للتخصيص في الخاصة:

  • الطباعة — العامة مقفلة على IBM Plex Sans Arabic؛ بينما تكشف الخاصة رموز الخطوط لتمكّنك من شحن خط مخصّص.
  • مقياس انحناء الحواف — تستخدم العامة انحناءات DGA الثابتة؛ بينما تكشف الخاصة رموز الانحناء للتجاوز.
  • مقياس الحشوات والمسافات — تقفل العامة إيقاع مسافات DGA؛ بينما تتيح لك الخاصة تعديل رموز المسافات لتناسب تخطيطاً أكثر كثافة أو اتساعاً.
  • أحجام الأيقونات — تفرض العامة مقياس أحجام أيقونات DGA؛ بينما تسمح الخاصة بأحجام أيقونات بديلة.
  • لوحة ألوان الهوية — تستخدم العامة ألوان DGA الرسمية فقط؛ بينما تكشف الخاصة رموز ألوان الهوية لتمكّنك من شحن لوحة مخصّصة.

موحَّد بين الهويتين:

  • الخط الافتراضي — تبدأ كلتا الهويتين بـ IBM Plex Sans Arabic؛ والخاصة وحدها يمكنها تغييره.
  • سلوك المكوّنات — أنماط التفاعل، ومعالجة لوحة المفاتيح، وإدارة التركيز متطابقة.
  • إمكانية الوصول — الدلالات المتوافقة مع WCAG وسمات ARIA وسلوك قارئات الشاشة لا تتغيّر بين الهويتين.
  • دعم اللغات من اليمين لليسار — يعمل عكس الاتجاه بنفس الطريقة في كلتا الهويتين.

تجاوز رموز الهوية الخاصة

بما أن الخاصة تكشف رموز الهوية، يمكنك تجاوزها في أي مكان تنطبق فيه الفئة brand-private. عرّف قيمك داخل قاعدة CSS محدَّدة النطاق بـ .brand-private — سيلتقطها التتالي تلقائياً.

/* app/brand-private.css */
.brand-private {
/* ألوان الهوية */
--ds-color-brand-primary-600: #6E56CF;
--ds-color-brand-primary-500: #7C66D9;
--ds-color-brand-primary-300: #B7A4F0;
--ds-color-brand-primary-50: #F5F2FF;
/* الانحناءات */
--ds-radius-md: 14px;
--ds-radius-lg: 20px;
/* المسافات */
--ds-spacing-md: 12px;
--ds-spacing-lg: 16px;
/* الطباعة (اختيارية — الافتراضي IBM Plex Sans Arabic) */
--ds-brand-font-display: 'Inter', system-ui, sans-serif;
--ds-brand-font-text: 'Inter', system-ui, sans-serif;
}

استكشاف الأخطاء

أخطاء شائعة عندما لا تظهر أنماط الهوية كما هو متوقّع.

  • الفئة على عنصر شقيق، وليس على سَلَف — أنماط الهوية تُورَّث للأسفل فقط. انقل الفئة إلى عنصر أب مشترك للمكوّنات التي تريد تنسيقها.
  • هناك سَلَف داخلي يحمل أيضاً brand-private — يفوز أقرب سَلَف. أزل الفئة الداخلية إن أردت العودة إلى العامة.
  • خطوط الهوية لا تُحمَّل — تأكّد من أن Inter و IBM Plex Sans Arabic مضمَّنان في غلاف تطبيقك (مثل next/font في Next.js).
  • ومضة الهوية عند أول رسم — اضبط الفئة بشكل ثابت على <html> أثناء عرض الخادم، أو استخدم مقتطف السكربت المضمَّن أعلاه.
الأسئلة الشائعة
أنماط الخطوط