لون واحد يحمل هوية جهتك.

#هوية جهة حكومية في كتلة ⁦CSS⁩ واحدة

عرّف لون جهتك مرة واحدة، واشتق منه درجات ⁦--ddga-brand-*⁩ الاثنتي عشرة عبر ⁦color-mix()⁩. اللون هو الدرجة ⁦600⁩. تمزجه الدرجات الأفتح بالأبيض والأغمق بالأسود، بنسب اللوحات المدمجة نفسها، ودون تشغيل أي ⁦JavaScript⁩.

/* app.css: after @dev-dga/css, outside any @layer */:root {  --entity: #0a5c8a;  --ddga-brand-25: color-mix(in oklab, var(--entity) 3%, white);  --ddga-brand-50: color-mix(in oklab, var(--entity) 6%, white);  --ddga-brand-100: color-mix(in oklab, var(--entity) 14%, white);  --ddga-brand-200: color-mix(in oklab, var(--entity) 28%, white);  --ddga-brand-300: color-mix(in oklab, var(--entity) 46%, white);  --ddga-brand-400: color-mix(in oklab, var(--entity) 64%, white);  --ddga-brand-500: color-mix(in oklab, var(--entity) 88%, white);  --ddga-brand-600: var(--entity);  --ddga-brand-700: color-mix(in oklab, var(--entity) 86%, black);  --ddga-brand-800: color-mix(in oklab, var(--entity) 74%, black);  --ddga-brand-900: color-mix(in oklab, var(--entity) 64%, black);  --ddga-brand-950: color-mix(in oklab, var(--entity) 48%, black);}

ضع الكتلة بعد استيراد ⁦@dev-dga/css⁩ وخارج أي ⁦@layer⁩. تعرّف المكتبة متغيراتها في طبقة ⁦ddga-base⁩، والأنماط خارج الطبقات تتقدم على الأنماط داخلها. لا تمرر ⁦theme⁩ إلى ⁦DgaProvider⁩ مع الكتلة، لأن قيمه المضمنة تتقدم عليها.

#الدرجة التي يقرؤها كل دور

تقرأ المكونات متغيرات الأدوار وحدها. يشير كل دور إلى درجة من سلم العلامة، وينقله الوضع الداكن إلى درجة أفتح ليبقى واضحاً على الأسطح الداكنة.

إذا لم تضبط ⁦--ddga-brand-foreground⁩، يكون النص على اللون الرئيس أبيض في الوضع الفاتح. تحسب الأدوار عند ⁦:root⁩ وعند كل عنصر يحمل ⁦data-theme⁩. يضع ⁦DgaProvider⁩ الخاصية ⁦data-theme⁩ على جذره، مما يجعل الوضع الداكن يقرأ السلم نفسه.

#تحقق من النص على الأزرار الرئيسة

في الوضع الفاتح تعرض الأزرار الرئيسة نصاً أبيض على لونك. إذا لم يبلغ الأبيض نسبة ⁦4.5:1⁩ عليه، كما في الأصفر أو الأخضر الفاتح، اضبط ⁦--ddga-brand-foreground⁩ على نص داكن. ويستخدم الوضع الداكن دائماً نص ⁦gray-950⁩ على الدرجة ⁦400⁩.

:root {  --entity: #f5bd02;  /* … the 12 steps above … */  --ddga-brand-foreground: var(--ddga-gray-950); /* dark text on a light brand color */}

يحذر ⁦DgaProvider⁩ أثناء التطوير حين يقل تباين لون السمة عن ⁦4.5:1⁩، لكن كتلة ⁦CSS⁩ لا تمر عبره. افحص لونك بأداة لقياس التباين قبل الإطلاق.

#اضبط اللون في ⁦DgaProvider⁩

تقبل ⁦theme.primary⁩ اللون نفسه وتبني منه الدرجات الاثنتي عشرة نفسها، أو تقبل اسم لوحة مدمجة. استخدمها حين يأتي اللون من البيانات، مثل إعداد خاص بكل جهة.

import { DgaProvider } from '@dev-dga/react';// A color string: step 600 of a 12-step ramp, the same mix as the CSS block<DgaProvider dir="rtl" locale="ar" theme={{ primary: '#0a5c8a' }}>  <App /></DgaProvider>// A built-in palette: saGreen, lavender, gold, info, success, warning, error, gray<DgaProvider theme={{ primary: 'lavender' }}>  <App /></DgaProvider>

للعرض من الخادم أو لمنطقة محددة، ترجع ⁦buildTheme⁩ المتغيرات نفسها في كائن عادي. مرره إلى عنصر يحمل ⁦data-theme⁩.

import { buildTheme } from '@dev-dga/tokens';const vars = buildTheme({ primary: '#0a5c8a' });// { '--ddga-brand-25': 'color-mix(in oklab, #0a5c8a 3%, white)', …, '--ddga-brand-600': '#0a5c8a', … }// Spread it on an element that carries data-theme; a plain <section> keeps the old brand.<div data-theme="light" style={vars}>…</div>

لضبط رموز أخرى غير سلم العلامة، استخدم منسق السمة

#الترقية من ⁦1.5⁩

التطبيقات التي تمرر لوناً إلى ⁦theme.primary⁩ ستلاحظ هذه التغييرات:

• تتبع لونك الدرجات الفاتحة، حلقات التركيز، التحديد، والوضع الداكن، بدل الأخضر السعودي.
• حالة التمرير هي الدرجة ⁦700⁩ وحالة الضغط هي الدرجة ⁦900⁩، بفارق طفيف عن قيم ⁦color-mix(in srgb)⁩ السابقة.
• يعرض الوضع الداكن نص ⁦gray-950⁩ على تعبئات اللون الرئيس بدل الأبيض، في اللوحات والألوان المخصصة.
• في الوضع الفاتح تنتقل لوحتا ⁦warning⁩ و⁦success⁩ إلى نص ⁦gray-950⁩.
• ترجع ⁦buildTheme⁩ مع لون قيم ⁦--ddga-brand-*⁩ وحدها؛ مررها إلى عنصر يحمل ⁦data-theme⁩.
• الثلاثية الصريحة ⁦{ base, hover, active, foreground }⁩ لم تتغير.