{"id":"l-ds-2-3","courseId":"design-systems","lang":"ar","kind":"lesson","summary":"ابنِ themes فاتحة وداكنة وعلامات تجارية وmodes للكثافة بإعادة ربط الـ semantic tokens تحت data attributes، حتى تظهر المكوّنات نفسها بشكل صحيح في كل تركيبة.","html":"<p>ظلّ مستخدمو المناوبة الليلية في تطبيق الـ dispatch يطلبون الوضع الداكن سنتين. وكان كل تقدير يعود بـ «ستة أسابيع لكل منتج»، لأن الألوان كانت مكتوبة يدويًا في مئات المكوّنات. ومع الطبقة الدلالية من الدرس السابق، استغرق الوضع الداكن في Northwind تسعة أيام، معظمها مراجعة تصميم. ولم تتغيّر المكوّنات إطلاقًا.</p>\n<h2 id=\"sec-1\" tabindex=\"-1\">الـ theme إعادة ربط</h2>\n<p>الـ theme يغيّر الـ primitive الذي يشير إليه كل semantic token. ولا شيء غير ذلك.</p>\n<div class=\"code-block\" dir=\"ltr\" data-lang=\"css\" data-index=\"0\"><div class=\"code-head\"><span class=\"code-title\">CSS</span><span class=\"code-actions\"><button type=\"button\" class=\"code-btn\" data-action=\"copy\" aria-label=\"نسخ الكود\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/></svg><span>نسخ</span></button></span></div><pre class=\"shiki\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">:root</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> {</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-color-surface</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-gray-0</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-color-text</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-gray-900</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-color-action-bg</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-blue-600</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-color-action-text</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-gray-0</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">}</span></span>\n<span class=\"line\"></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">[</span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">data-theme</span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">=</span><span style=\"color:#0A3069;--shiki-dark:#A5D6FF\">\"dark\"</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">] {</span></span>\n<span class=\"line\"><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">  color-scheme</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">dark</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">;</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-color-surface</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-gray-950</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-color-text</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-gray-100</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-color-action-bg</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-blue-400</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-color-action-text</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-gray-950</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">}</span></span></code></pre></div>\n<p>هناك تفصيلتان مهمّتان. الأولى أن الـ selector هو <code dir=\"ltr\">[data-theme=&quot;dark&quot;]</code> لا <code dir=\"ltr\">html[data-theme=&quot;dark&quot;]</code>، فيستطيع أي عنصر بدء شجرة فرعية داكنة: الواجهة الرئيسية في الموقع التسويقي داكنة على صفحة فاتحة في باقيها. والثانية أن <code dir=\"ltr\">color-scheme: dark</code> تخبر المتصفّح أن يرسم واجهته الخاصة، مثل أشرطة التمرير ومربّعات الاختيار وحقول التاريخ، بألوان داكنة أيضًا.</p>\n<p>لاحظ أن أزرق الإجراء يغيّر درجته، من 600 إلى 400. الخلفيات الداكنة تحتاج ألوان تمييز أفتح لتحافظ على التباين، لذا فالوضع الداكن مهمّة تصميم، لا قلبٌ للألوان.</p>\n<h2 id=\"sec-2\" tabindex=\"-1\">تصميم لوحة الألوان الداكنة</h2>\n<p>ثلاث قواعد وفّرت على Northwind أسابيع من المراجعة. افحص التباين لكل زوج من النص والخلفية في الـ theme الداكن على حدة، لأن الزوج الذي ينجح على الأبيض قد يفشل على ما يقارب الأسود. وتجنّب الأسطح السوداء تمامًا؛ فالرمادي الداكن جدًا مثل <code dir=\"ltr\">#111827</code> أريح للعين ويترك مجالًا لظلال أغمق. وعبّر عن الارتفاع (elevation) بأسطح أفتح لا بظلال أثقل، لأن الظلال بالكاد تظهر على الخلفيات الداكنة: البطاقة المرتفعة في الوضع الداكن أفتح بدرجة من الصفحة التي خلفها.</p>\n<p>هذه القاعدة الأخيرة مثال جيد على حاجة الطبقة الدلالية إلى أسماء مثل <code dir=\"ltr\">--nw-color-surface-raised</code>. في الوضع الفاتح يرتبط بالأبيض على صفحة رمادية فاتحة؛ وفي الوضع الداكن يرتبط برمادي أفتح قليلًا. الاسم نفسه، والدور نفسه، والقيم مختلفة.</p>\n<aside class=\"callout callout-mistake\" role=\"note\"><p class=\"callout-title\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></svg><span><span class=\"callout-kind\">خطأ شائع</span><span class=\"callout-sep\" aria-hidden=\"true\"> · </span>الوضع الداكن عبر filter: invert()‎</span></p>\n<p>قلب ألوان الصفحة اختصار مغرٍ. لكنه يقلب الصور والشعارات، ويحوّل ألوان العلامة إلى ألوانها المكمّلة، وينتج تباينًا لم تختبره قط. صمّم لوحة الألوان الداكنة واربطها عبر الـ semantic tokens.</p>\n</aside>\n<h2 id=\"sec-3\" tabindex=\"-1\">اتّباع تفضيل النظام</h2>\n<p>احترم إعداد نظام التشغيل افتراضيًا، واسمح للمستخدمين بتجاوزه:</p>\n<div class=\"code-block\" dir=\"ltr\" data-lang=\"css\" data-index=\"1\"><div class=\"code-head\"><span class=\"code-title\">CSS</span><span class=\"code-actions\"><button type=\"button\" class=\"code-btn\" data-action=\"copy\" aria-label=\"نسخ الكود\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/></svg><span>نسخ</span></button></span></div><pre class=\"shiki\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">@media</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> (prefers-color-scheme: dark) {</span></span>\n<span class=\"line\"><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">  :root:not</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">([</span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">data-theme</span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">=</span><span style=\"color:#0A3069;--shiki-dark:#A5D6FF\">\"light\"</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">]) {</span></span>\n<span class=\"line\"><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">    color-scheme</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">dark</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">;</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">    --nw-color-surface</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-gray-950</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#6E7781;--shiki-dark:#8B949E\">    /* …same remapping as [data-theme=\"dark\"] */</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">  }</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">}</span></span></code></pre></div>\n<div class=\"code-block\" dir=\"ltr\" data-lang=\"js\" data-index=\"2\"><div class=\"code-head\"><span class=\"code-title\">JavaScript</span><span class=\"code-actions\"><button type=\"button\" class=\"code-btn\" data-action=\"copy\" aria-label=\"نسخ الكود\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/></svg><span>نسخ</span></button></span></div><pre class=\"shiki\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6E7781;--shiki-dark:#8B949E\">// Inline in &#x3C;head>, before the CSS paints, so there is no flash of the wrong theme.</span></span>\n<span class=\"line\"><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">const</span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\"> saved</span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\"> =</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> localStorage.</span><span style=\"color:#8250DF;--shiki-dark:#D2A8FF\">getItem</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#0A3069;--shiki-dark:#A5D6FF\">'nw-theme'</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">if</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> (saved </span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">===</span><span style=\"color:#0A3069;--shiki-dark:#A5D6FF\"> 'light'</span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\"> ||</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> saved </span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">===</span><span style=\"color:#0A3069;--shiki-dark:#A5D6FF\"> 'dark'</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">) {</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">  document.documentElement.dataset.theme </span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">=</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> saved;</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">}</span></span></code></pre></div>\n<p>تكرار الكتلة الداكنة داخل الـ media query هو ثمن دعم الطريقتين معًا. خط إنتاج الـ tokens في Northwind يولّد النسختين من مصدر واحد، وستجهّزه بعد درسين. وللألوان البسيطة ذات الوضعين يمكنك أيضًا استخدام الدالة <code dir=\"ltr\">light-dark()</code> في CSS مع <code dir=\"ltr\">color-scheme: light dark</code>، لكنها لا تبدّل إلا الألوان (والصور أيضًا في المتصفّحات الأحدث) بين وضعين فقط، فلا تغني عن إعادة ربط الـ tokens للعلامات أو الكثافة.</p>\n<h2 id=\"sec-4\" tabindex=\"-1\">الـ modes محاور مستقلة</h2>\n<p>لدى Northwind ثلاثة محاور، يُحدَّد كلٌّ منها بسمة خاصة به:</p>\n<figure class=\"diagram\"><svg class=\"diagram-svg\" focusable=\"false\" viewBox=\"0 0 660 250\" role=\"img\" aria-labelledby=\"l-ds-2-3-t1\"><defs><marker id=\"arrow-l-ds-2-3-1\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto-start-reverse\"><path d=\"M0 0 L10 5 L0 10 z\" class=\"d-arrowhead\"/></marker></defs>\n  <title id=\"l-ds-2-3-t1\">ثلاثة أعمدة. نظام الألوان، فاتح أو داكن، يملك tokens الأسطح والنص. العلامة، Northwind أو Tidewater، تملك تدرّج ألوان العلامة. الكثافة، مريحة أو مضغوطة، تملك المسافات وارتفاع العناصر. والثلاثة تغذّي المكوّنات نفسها.</title>\n  <rect class=\"d-box-primary\" x=\"20\" y=\"20\" width=\"190\" height=\"96\" rx=\"10\"/>\n  <text class=\"d-label-strong\" x=\"115\" y=\"46\" text-anchor=\"middle\">data-theme</text>\n  <text class=\"d-label\" x=\"115\" y=\"72\" text-anchor=\"middle\">light | dark</text>\n  <text class=\"d-label-muted\" x=\"115\" y=\"98\" text-anchor=\"middle\">الأسطح، النص، الدرجات</text>\n  <rect class=\"d-box-accent\" x=\"235\" y=\"20\" width=\"190\" height=\"96\" rx=\"10\"/>\n  <text class=\"d-label-strong\" x=\"330\" y=\"46\" text-anchor=\"middle\">data-brand</text>\n  <text class=\"d-label\" x=\"330\" y=\"72\" text-anchor=\"middle\">northwind | tidewater</text>\n  <text class=\"d-label-muted\" x=\"330\" y=\"98\" text-anchor=\"middle\">تدرّج العلامة، الخطوط</text>\n  <rect class=\"d-box-success\" x=\"450\" y=\"20\" width=\"190\" height=\"96\" rx=\"10\"/>\n  <text class=\"d-label-strong\" x=\"545\" y=\"46\" text-anchor=\"middle\">data-density</text>\n  <text class=\"d-label\" x=\"545\" y=\"72\" text-anchor=\"middle\">comfortable | compact</text>\n  <text class=\"d-label-muted\" x=\"545\" y=\"98\" text-anchor=\"middle\">المسافات، ارتفاع العناصر</text>\n  <path class=\"d-arrow\" d=\"M115 116 L300 180\" marker-end=\"url(#arrow-l-ds-2-3-1)\"/>\n  <path class=\"d-arrow\" d=\"M330 116 L330 176\" marker-end=\"url(#arrow-l-ds-2-3-1)\"/>\n  <path class=\"d-arrow\" d=\"M545 116 L360 180\" marker-end=\"url(#arrow-l-ds-2-3-1)\"/>\n  <rect class=\"d-box\" x=\"230\" y=\"182\" width=\"200\" height=\"48\" rx=\"10\"/>\n  <text class=\"d-label\" x=\"330\" y=\"211\" text-anchor=\"middle\">المكوّنات نفسها</text>\n</svg><figcaption>ثلاثة محاور مستقلة، يملك كلٌّ منها مجموعة مختلفة من الـ tokens</figcaption></figure>\n<p>الحيلة التي تحفظ استقلالها هي الملكية: كل محور يعيد ربط الـ tokens الخاصة به، ولا يلمس tokens محور آخر أبدًا. الكثافة لا تلمس إلا المسافات:</p>\n<div class=\"code-block\" dir=\"ltr\" data-lang=\"css\" data-index=\"3\"><div class=\"code-head\"><span class=\"code-title\">CSS</span><span class=\"code-actions\"><button type=\"button\" class=\"code-btn\" data-action=\"copy\" aria-label=\"نسخ الكود\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/></svg><span>نسخ</span></button></span></div><pre class=\"shiki\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">:root</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> {</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-space-control-y</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-space-2</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-space-control-x</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-space-4</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">}</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">[</span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">data-density</span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">=</span><span style=\"color:#0A3069;--shiki-dark:#A5D6FF\">\"compact\"</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">] {</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-space-control-y</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-space-1</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-space-control-x</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-space-3</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">}</span></span></code></pre></div>\n<p>أما العلامة ونظام الألوان فيتفاعلان فعلًا، لأن فيروزي Tidewater يحتاج درجة أفتح في الوضع الداكن تمامًا مثل أزرق Northwind. والحلّ مستوى واحد من الوساطة: العلامة تعرّف تدرّجًا من primitives العلامة، والـ theme يختار الدرجة.</p>\n<div class=\"code-block\" dir=\"ltr\" data-lang=\"css\" data-index=\"4\"><div class=\"code-head\"><span class=\"code-title\">CSS</span><span class=\"code-actions\"><button type=\"button\" class=\"code-btn\" data-action=\"copy\" aria-label=\"نسخ الكود\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/></svg><span>نسخ</span></button></span></div><pre class=\"shiki\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">:root</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> { </span><span style=\"color:#6E7781;--shiki-dark:#8B949E\">/* Northwind is the default brand */</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-brand-400</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-blue-400</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-brand-600</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-blue-600</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">}</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">[</span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">data-brand</span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">=</span><span style=\"color:#0A3069;--shiki-dark:#A5D6FF\">\"tidewater\"</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">] {</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-brand-400</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-teal-400</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#953800;--shiki-dark:#FFA657\">  --nw-brand-600</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-teal-600</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">);</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">}</span></span>\n<span class=\"line\"><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">:root</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\"> { </span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-color-action-bg</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-brand-600</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">); }</span></span>\n<span class=\"line\"><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">[</span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">data-theme</span><span style=\"color:#CF222E;--shiki-dark:#FF7B72\">=</span><span style=\"color:#0A3069;--shiki-dark:#A5D6FF\">\"dark\"</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">] { </span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-color-action-bg</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">: </span><span style=\"color:#0550AE;--shiki-dark:#79C0FF\">var</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">(</span><span style=\"color:#953800;--shiki-dark:#FFA657\">--nw-brand-400</span><span style=\"color:#1F2328;--shiki-dark:#E6EDF3\">); }</span></span></code></pre></div>\n<p>الآن يعمل <code dir=\"ltr\">&lt;html data-brand=&quot;tidewater&quot; data-theme=&quot;dark&quot; data-density=&quot;compact&quot;&gt;</code> دون selector مركّب واحد. ملاحظة واحدة: هذه النسخة تفترض أن <code dir=\"ltr\">data-brand</code> موجودة على <code dir=\"ltr\">&lt;html&gt;</code>، وهذا صحيح في Northwind لأن الصفحة تنتمي إلى علامة واحدة. فالربط على <code dir=\"ltr\">:root</code> يُحسب مرة واحدة عند الجذر، وإن كان يمكن للعلامة أن تتغيّر في منتصف الصفحة فستكرّر الروابط الدلالية تحت <code dir=\"ltr\">[data-brand]</code> أيضًا، للسبب نفسه الذي يجعل الـ component tokens تعيش على الـ selectors الخاصة بالمكوّنات. العلامة تقرّر أيّ الألوان، والـ theme يقرّر مدى الفتح، والكثافة تقرّر مدى الإحكام. ثماني تركيبات، وست كتل صغيرة.</p>\n<aside class=\"callout callout-tip\" role=\"note\"><p class=\"callout-title\"><svg class=\"icon \" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5\"/><path d=\"M9 18h6\"/><path d=\"M10 22h4\"/></svg><span><span class=\"callout-kind\">نصيحة</span><span class=\"callout-sep\" aria-hidden=\"true\"> · </span>اختبر الزوايا</span></p>\n<p>التركيبات التي لا تنظر إليها أبدًا هي التي تنكسر. الاختبارات البصرية في Northwind تعرض كل مكوّن أساسي في التركيبات الثماني كلها؛ ويشرح القسم 4 كيف. وحتى ذلك الحين، احتفظ بصفحة تجارب تعرض زرًا وحقل إدخال وبطاقة في كل زاوية.</p>\n</aside>\n<p>في التمرين تضيف theme داكنًا يعمل على أي عنصر، وmode كثافة مضغوطة. وبعدها تنقل هذه الـ tokens من CSS مكتوب يدويًا إلى صيغة تقرؤها كل الأدوات.</p>\n","toc":[{"id":"sec-1","text":"الـ theme إعادة ربط","level":2},{"id":"sec-2","text":"تصميم لوحة الألوان الداكنة","level":2},{"id":"sec-3","text":"اتّباع تفضيل النظام","level":2},{"id":"sec-4","text":"الـ modes محاور مستقلة","level":2}],"takeaways":["الـ theme أو الـ mode إعادةُ ربط للـ semantic tokens؛ أما المكوّنات والـ primitives فتبقى كما هي.","عامل نظام الألوان والعلامة والكثافة كمحاور مستقلة، يملك كلٌّ منها مجموعة tokens خاصة به، حتى لا تتضاعف أعمالك مع التركيبات.","الـ selectors مثل <code dir=\"ltr\">[data-theme=&quot;dark&quot;]</code> تعمل على أي عنصر، فيمكن لقسم من الصفحة أن يستخدم theme مختلفًا عن بقيتها.","حدّد <code dir=\"ltr\">color-scheme</code> مع الـ theme الداكن حتى تتطابق الأجزاء التي يرسمها المتصفّح، مثل عناصر النماذج وأشرطة التمرير."],"further":[{"title":"prefers-color-scheme (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme"},{"title":"color-scheme (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme"},{"title":"light-dark() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark"}],"quiz":[{"q":"<p>لدى Northwind نظاما ألوان، وعلامتان، ومستويا كثافة. كم ملف theme مكتوبًا يدويًا يجب أن تحتاج إن كانت المحاور مستقلة؟</p>","options":[{"text":"ثمانية، واحد لكل تركيبة.","why":"هذه نتيجة معاملة التركيبات كـ themes؛ العدد يكبر بالضرب، وكل ملف يكرّر الملفات الأخرى."},{"text":"ستة، كتلة لكل قيمة على كل محور، مع تخصيصات صغيرة فقط حيث يتفاعل محوران فعلًا.","why":"صحيح. كل محور يملك الـ tokens الخاصة به، فتكتب 2 + 2 + 2 من الكتل وتترك الـ cascade يجمعها."},{"text":"اثنان، فاتح وداكن، مع معالجة العلامة والكثافة داخل المكوّنات.","why":"دفع العلامة والكثافة إلى المكوّنات يعني أن كل مكوّن يجب أن يعرف عنهما، وهذا بالضبط ما تتجنّبه الـ tokens."},{"text":"واحد، لأن المتصفّح يحسب الألوان الداكنة تلقائيًا.","why":"المتصفّحات لا تشتقّ لوحة ألوان داكنة صالحة من لوحة فاتحة؛ أنت مَن يصمّمها ويربطها."}],"answer":1},{"q":"<p>تضع الواجهة الرئيسية في الموقع التسويقي <code dir=\"ltr\">data-theme=&quot;dark&quot;</code> على الـ <code dir=\"ltr\">&lt;section&gt;</code> الخاص بها، لكن بطاقاتها تبقى بيضاء. الكتلة الداكنة مكتوبة هكذا <code dir=\"ltr\">html[data-theme=&quot;dark&quot;] { … }</code>. ما الخطأ؟</p>","options":[{"text":"الـ data attributes لا تعمل على عناصر <code dir=\"ltr\">&lt;section&gt;</code>.","why":"أي عنصر يمكنه حمل data attributes، والـ attribute selectors تطابقها في أي مكان."},{"text":"الـ custom properties لا تُورَّث عبر <code dir=\"ltr\">&lt;section&gt;</code>.","why":"الـ custom properties تُورَّث عبر كل العناصر."},{"text":"الـ type selector المسمّى <code dir=\"ltr\">html</code> يحصر الـ tokens الداكنة في الجذر، فلا تتطابق سمة القسم أبدًا.","why":"صحيح. كتابة <code dir=\"ltr\">[data-theme=&quot;dark&quot;]</code> وحدها تسمح لأي عنصر ببدء شجرة فرعية داكنة."},{"text":"تحتاج الواجهة الرئيسية إلى <code dir=\"ltr\">color-scheme: dark</code> لتفعيل الـ tokens.","why":"خاصية <code dir=\"ltr\">color-scheme</code> تغيّر واجهة المتصفّح المرسومة مثل أشرطة التمرير؛ ولا تبدّل الـ custom properties الخاصة بك."}],"answer":2},{"q":"<p>في الوضع الداكن تستخدم أزرار Northwind اللون <code dir=\"ltr\">--nw-blue-400</code> بدل <code dir=\"ltr\">--nw-blue-600</code>، وأزرار Tidewater تستخدم تدرّجًا فيروزيًا. أيّ بنية تتعامل مع الحالتين بنظافة؟</p>","options":[{"text":"العلامة تحدّد تدرّجًا من الـ primitives باسم <code dir=\"ltr\">--nw-brand-*</code>، والـ theme يختار أي درجة من التدرّج يستخدمها كل semantic token.","why":"صحيح. العلامة تقرّر <em>أيّ</em> الألوان، والـ theme يقرّر <em>مدى فتحها أو غمقها</em>، ولا يحتاج أيّ منهما أن يعرف عن الآخر."},{"text":"أربع كتل بـ selectors مركّبة لكل زوج من علامة وtheme.","why":"ينجح مع علامتين، لكن كل علامة أو mode جديد يضاعف الكتل التي يجب صيانتها."},{"text":"مكوّنات أزرار منفصلة لكل علامة.","why":"نسخ المكوّنات لكل علامة ينقض سبب وجود نظام مشترك أصلًا."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"<main class=\"page\">\n  <article class=\"card\" id=\"app-card\">\n    <h3>Route 18 · 6 stops</h3>\n    <button class=\"nw-button\" id=\"app-btn\">Dispatch</button>\n  </article>\n  <section class=\"hero\" data-theme=\"dark\">\n    <article class=\"card\" id=\"hero-card\">\n      <h3>Ship smarter with Northwind</h3>\n      <button class=\"nw-button\">Book a demo</button>\n    </article>\n  </section>\n</main>","css":":root {\n  /* Primitives */\n  --nw-gray-0: #ffffff;\n  --nw-gray-100: #e4e7eb;\n  --nw-gray-900: #1f2933;\n  --nw-gray-950: #111827;\n  --nw-blue-400: #6b93f5;\n  --nw-blue-600: #1f5ae0;\n  --nw-space-1: 0.25rem;\n  --nw-space-2: 0.5rem;\n  --nw-space-3: 0.75rem;\n  --nw-space-4: 1rem;\n\n  /* Semantic tokens: light theme, comfortable density */\n  --nw-color-surface: var(--nw-gray-0);\n  --nw-color-text: var(--nw-gray-900);\n  --nw-color-action-bg: var(--nw-blue-600);\n  --nw-color-action-text: var(--nw-gray-0);\n  --nw-space-control-y: var(--nw-space-2);\n  --nw-space-control-x: var(--nw-space-4);\n}\n\n/* Add the dark theme here */\n\n/* Add the compact density here */\n\n/* Components (don't change these) */\n.card {\n  background: var(--nw-color-surface);\n  color: var(--nw-color-text);\n  padding: 16px;\n  border-radius: 8px;\n  margin-bottom: 16px;\n}\n.card h3 { margin: 0 0 12px; }\n.nw-button {\n  --nw-button-bg: var(--nw-color-action-bg);\n  --nw-button-text: var(--nw-color-action-text);\n  background: var(--nw-button-bg);\n  color: var(--nw-button-text);\n  padding: var(--nw-space-control-y) var(--nw-space-control-x);\n  border: 0;\n  border-radius: 6px;\n  font: inherit;\n}\n","js":""},"solution":{"html":"<main class=\"page\">\n  <article class=\"card\" id=\"app-card\">\n    <h3>Route 18 · 6 stops</h3>\n    <button class=\"nw-button\" id=\"app-btn\">Dispatch</button>\n  </article>\n  <section class=\"hero\" data-theme=\"dark\">\n    <article class=\"card\" id=\"hero-card\">\n      <h3>Ship smarter with Northwind</h3>\n      <button class=\"nw-button\">Book a demo</button>\n    </article>\n  </section>\n</main>","css":":root {\n  /* Primitives */\n  --nw-gray-0: #ffffff;\n  --nw-gray-100: #e4e7eb;\n  --nw-gray-900: #1f2933;\n  --nw-gray-950: #111827;\n  --nw-blue-400: #6b93f5;\n  --nw-blue-600: #1f5ae0;\n  --nw-space-1: 0.25rem;\n  --nw-space-2: 0.5rem;\n  --nw-space-3: 0.75rem;\n  --nw-space-4: 1rem;\n\n  /* Semantic tokens: light theme, comfortable density */\n  --nw-color-surface: var(--nw-gray-0);\n  --nw-color-text: var(--nw-gray-900);\n  --nw-color-action-bg: var(--nw-blue-600);\n  --nw-color-action-text: var(--nw-gray-0);\n  --nw-space-control-y: var(--nw-space-2);\n  --nw-space-control-x: var(--nw-space-4);\n}\n\n[data-theme=\"dark\"] {\n  color-scheme: dark;\n  --nw-color-surface: var(--nw-gray-950);\n  --nw-color-text: var(--nw-gray-100);\n  --nw-color-action-bg: var(--nw-blue-400);\n  --nw-color-action-text: var(--nw-gray-950);\n}\n\n[data-density=\"compact\"] {\n  --nw-space-control-y: var(--nw-space-1);\n  --nw-space-control-x: var(--nw-space-3);\n}\n\n/* Components (don't change these) */\n.card {\n  background: var(--nw-color-surface);\n  color: var(--nw-color-text);\n  padding: 16px;\n  border-radius: 8px;\n  margin-bottom: 16px;\n}\n.card h3 { margin: 0 0 12px; }\n.nw-button {\n  --nw-button-bg: var(--nw-color-action-bg);\n  --nw-button-text: var(--nw-color-action-text);\n  background: var(--nw-button-bg);\n  color: var(--nw-button-text);\n  padding: var(--nw-space-control-y) var(--nw-space-control-x);\n  border: 0;\n  border-radius: 6px;\n  font: inherit;\n}\n","js":""},"checks":[{"id":"light-default","test":"return style('#app-card', 'background-color') === 'rgb(255, 255, 255)' && style('#app-btn', 'background-color') === 'rgb(31, 90, 224)';"},{"id":"hero-dark","test":"return style('#hero-card', 'background-color') === 'rgb(17, 24, 39)' && style('#hero-card', 'color') === 'rgb(228, 231, 235)';"},{"id":"dark-button","test":"const b = $('#hero-card .nw-button'); return style(b, 'background-color') === 'rgb(107, 147, 245)' && style(b, 'color') === 'rgb(17, 24, 39)';"},{"id":"page-dark","test":"const root = document.documentElement; root.dataset.theme = 'dark'; const ok = style('#app-card', 'background-color') === 'rgb(17, 24, 39)' && getComputedStyle(root).colorScheme === 'dark'; delete root.dataset.theme; return ok;"},{"id":"compact","test":"const root = document.documentElement; root.dataset.density = 'compact'; const ok = style('#app-btn', 'padding-top') === '4px' && style('#app-btn', 'padding-left') === '12px'; delete root.dataset.density; return ok && style('#app-btn', 'padding-top') === '8px';"}],"title":"أضف theme داكنًا وmode مضغوطًا","prompt":"<p>الـ theme الفاتح والمكوّنات جاهزة. أضف اثنين من الـ modes بإعادة ربط الـ semantic tokens فقط (لا تلمس المكوّنات):</p>\n<ul>\n<li><strong>theme داكن</strong> لأي عنصر يحمل <code dir=\"ltr\">data-theme=&quot;dark&quot;</code>، لا <code dir=\"ltr\">&lt;html&gt;</code> وحده: السطح ← <code dir=\"ltr\">--nw-gray-950</code>، والنص ← <code dir=\"ltr\">--nw-gray-100</code>، وخلفية الإجراء ← <code dir=\"ltr\">--nw-blue-400</code>، ونص الإجراء ← <code dir=\"ltr\">--nw-gray-950</code>. وحدّد أيضًا <code dir=\"ltr\">color-scheme: dark</code>.</li>\n<li><strong>كثافة مضغوطة</strong> لـ <code dir=\"ltr\">data-density=&quot;compact&quot;</code>: الحشوة العمودية للعناصر ← <code dir=\"ltr\">--nw-space-1</code>، والأفقية ← <code dir=\"ltr\">--nw-space-3</code>.</li>\n</ul>\n<p>قسم الواجهة الرئيسية يحمل <code dir=\"ltr\">data-theme=&quot;dark&quot;</code> مسبقًا، فيجب أن يصبح داكنًا بمجرّد أن يعمل الـ theme الخاص بك.</p>\n","hints":["استخدم الـ attribute selectors وحدها: <code dir=\"ltr\">[data-theme=&quot;dark&quot;] { … }</code>. إضافة <code dir=\"ltr\">html</code> قبلها ستمنع الواجهة الرئيسية من المطابقة.","داخل الكتلة، أعد تعريف الـ semantic tokens الأربعة الخاصة بالألوان بـ <code dir=\"ltr\">var()</code> يشير إلى الـ primitives الداكنة.","كتلة الكثافة لا تحتاج إلا <code dir=\"ltr\">--nw-space-control-y</code> و<code dir=\"ltr\">--nw-space-control-x</code>."],"explanation":"<p>كلا الـ modes إعادة ربط خالصة: لم يتغيّر أي CSS خاص بالمكوّنات، ومع ذلك تتبدّل بطاقة الواجهة الرئيسية وزرّها وأي صفحة تحمل <code dir=\"ltr\">data-theme=&quot;dark&quot;</code> على <code dir=\"ltr\">&lt;html&gt;</code>. ولأن الـ selector هو attribute selector مجرّد، يمكن أن يبدأ الـ theme من أي عنصر، ولأن الزر يعرّف الـ component tokens الخاصة به على <code dir=\"ltr\">.nw-button</code>، تُحسب قيمها وفق أقرب theme. والكثافة لا تملك إلا tokens المسافات، فتتركّب مع أيٍّ من الـ themes دون قواعد إضافية.</p>\n","checkLabels":{"light-default":"تبقى الصفحة فاتحة افتراضيًا","hero-dark":"بطاقة الواجهة الرئيسية (داخل <code dir=\"ltr\">data-theme=&quot;dark&quot;</code>) تستخدم السطح والنص الداكنين","dark-button":"الأزرار داخل الواجهة الرئيسية الداكنة تستخدم الأزرق الأفتح مع نص داكن","page-dark":"وضع <code dir=\"ltr\">data-theme=&quot;dark&quot;</code> على <code dir=\"ltr\">&lt;html&gt;</code> يجعل الصفحة كلها داكنة ويحدّد <code dir=\"ltr\">color-scheme: dark</code>","compact":"<code dir=\"ltr\">data-density=&quot;compact&quot;</code> يقلّص حشوة الزر إلى 4px في 12px"}},"words":620,"readMinutes":4}