التصميم بالثيمات دون خطوة بناء: كيف يستخدم NYX الدالة color-mix()

عندما بنيت NYX — إطار المكونات الخاص بي بـ CSS + JS دون أي اعتماديات — كانت لدي قاعدة صارمة واحدة: تغيير الثيم يجب ألا يحتاج أبدًا إلى خطوة بناء. لا إعادة تجميع Sass ولا pipeline للـ tokens لإعادة تشغيله. ضع ملف الأنماط، واضبط بضع custom properties، فيعيد النظام كله ضبط نفسه مباشرة. والذي يجعل ذلك ممكنًا هو color-mix().

مشكلة متغير واحد لكل درجة لون

الطريقة الساذجة للتحكم بالثيم عبر custom properties هي تعريف كل درجة يدويًا: أساسي، hover، باهت، حدود، وتعبئة خفيفة. هذه خمسة متغيرات للون واحد — وبمجرد أن يريد أحدهم لونًا جديدًا للعلامة عليه إعادة تعريف الخمسة والحفاظ على انسجامها. هذا لا يتسع للنمو، وهو بالضبط النوع من العمل الروتيني الذي يجب أن يلغيه الإطار.

لون مصدر واحد، والباقي مشتق

مع color-mix() تعلن لون العلامة مرة واحدة وتشتق الباقي في CSS وقت العرض. تحتاج hover أفتح قليلًا؟ امزج اللون الأساسي نحو الأبيض. تحتاج تدرجًا خفيفًا للخلفية؟ امزجه في لون السطح بنسبة منخفضة.

:root {
  --nyx-primary: #386dff;
}
.nyx-btn {
  background: var(--nyx-primary);
}
.nyx-btn:hover {
  /* lift toward white, no second variable needed */
  background: color-mix(in oklch, var(--nyx-primary) 85%, white);
}
.nyx-alert {
  /* a soft tint of the same hue */
  background: color-mix(in oklch, var(--nyx-primary) 12%, transparent);
}

غيّر --nyx-primary فتتبعه كل الألوان المشتقة. متغير واحد، ولوحة ألوان متكاملة ومتناسقة.

لماذا يهم oklch هنا

أمزج في فضاء الألوان oklch عن قصد. المزج في sRGB يميل إلى التعكّر عبر الرمادي وإزاحة الـ hue بطرق تبدو خاطئة. أما OKLCH فهو منتظم إدراكيًا، فيبقى المزج بين لونين في مسار السطوع والـ hue الصحيح — وتبدو الـ hover المفتوحة فعلًا كالون نفسه لكن أسطع، لا كلونٍ مختلف قليلًا.

فاتح وداكن من الـ tokens نفسها

لأن كل شيء مشتق من مجموعة صغيرة من الخصائص، فإن تبديل الثيم يعني مجرد استبدال تلك الخصائص تحت سمة data-theme — بدل صيانة ملف أنماط موازٍ.

[data-theme="dark"] {
  --nyx-bg: #070707;
  --nyx-ink: #ffffff;
}
[data-theme="light"] {
  --nyx-bg: #ffffff;
  --nyx-ink: #0a0a0a;
}

لا تشير المكونات أبدًا إلى لون حرفي — بل إلى الـ tokens فقط — لذلك تتبع الثيم تلقائيًا، بما في ذلك كل اشتقاق عبر color-mix().

الثمرة

يأتي NYX بأكثر من 100 مكوّن وبيئة تشغيل UMD صغيرة، ويمكنك إعادة تلوين كل شيء من console المتصفح بضبط بضعة متغيرات. بلا بناء، وبلا اعتماديات، ودعم RTL من الدرجة الأولى لأن كل ما تحته logical properties. هذه هي الفلسفة كلها: أصبحت المنصة جيدة بما يكفي ليبتعد الإطار عن الطريق. يمكنك تجربته على GitHub عبر github.com/fadyehabamer/NYX.