الرموز في Tailwind ومتغيرات CSS وCSS-in-JS

ينشئ ناتج منصة CSS في Style Dictionary ملفًا من خصائص CSS المخصصة: --color-primary-500: #3b82f6; --spacing-4: 16px; وما شابه ذلك. وتُعرَّف هذه المتغيرات على :root، مما يجعلها متاحة على مستوى التطبيق بالكامل. ويشكّل هذا الأساس لجميع عمليات استخدام الرموز في التطبيق.

استورد ملف رموز CSS المُولَّد في ورقة الأنماط العامة أو في مكوّن التخطيط الجذري: @import './tokens/tokens.css'. في Next.js، استورده في app/layout.tsx أو styles/globals.css. بعد استيراده، يمكن لكل قاعدة CSS ولكل مكوّن في التطبيق الإشارة إلى الخصائص المخصصة.

أشر إلى متغيرات CSS في أوراق أنماط المكوّنات أو وحدات CSS: background-color: var(--color-primary-500); وpadding: var(--spacing-4);. إذا تغيّرت قيمة الرمز في مصدر JSON، فإن إعادة بناء Style Dictionary تحدّث ملف CSS، وتعكس جميع المكوّنات التي تستخدم ذلك المتغير القيمة الجديدة تلقائيًا.

تتيح الخصائص المخصصة في CSS تبديل السمات أثناء التشغيل. لتفعيل الوضع الداكن، تجاوز قيم الرموز ضمن محدد السمة: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }. يؤدي ضبط document.documentElement.setAttribute('data-theme', 'dark') إلى تبديل جميع قيم الرموز فورًا من دون إعادة التحميل أو إعادة البناء.

وسّع سمة Tailwind في tailwind.config.js لاستخدام قيم الرموز: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }. استورد مخرجات JS من Style Dictionary إلى إعدادات Tailwind لضمان استخدام أصناف Tailwind، مثل bg-primary-500، لقيم الرموز المعتمدة دائمًا.

لتفعيل سمات قابلة للتبديل أثناء التشغيل في Tailwind، اضبط اللون بحيث يشير إلى متغير CSS: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'. يتطلب ذلك تخزين متغير CSS لمكوّنات RGB من دون الغلاف rgb()، كما في --color-primary-rgb: 59 130 246. ويتولى Tailwind بعد ذلك التعامل مع أدوات الشفافية تلقائيًا.

تستخدم مكتبات CSS-in-JS كائن سمة مكتوبًا بلغة JavaScript. مرّر مخرجات Style Dictionary بلغة JS بوصفها قيمة موفّر السمة: <ThemeProvider theme={tokens}>. تصل المكوّنات إلى الرموز عبر const theme = useTheme() وtheme.color.primary[500]. ينشئ Style Dictionary كائن الرموز ذي الأنواع، بينما يوزّعه موفّر السمة.

يمكن للمكوّن الإضافي stylelint-no-hardcoded-colors وقواعد ESLint المخصصة فرض عدم ظهور قيم hex الثابتة في أوراق الأنماط أو ملفات المكوّنات. فإذا كتب أحد المطورين color: #3b82f6 بدلًا من color: var(--color-primary-500)، فسيشير linter إلى الخطأ. ويحافظ ذلك على نظام الرموز بوصفه مصدر الألوان الوحيد.

عندما تُنشأ أسماء أصناف Tailwind ديناميكيًا من أسماء الرموز أثناء التشغيل، قد تزيل عملية purge في Tailwind تلك الأصناف لأنها لا تظهر كسلاسل نصية ثابتة في المصدر. أضف أنماط الأصناف الديناميكية إلى safelist في tailwind.config.js: safelist: [{ pattern: /bg-primary-/ }].

تصدّر إضافة Figma Tokens قيم الرموز من Figma مباشرةً إلى تنسيق JSON الخاص بـ Style Dictionary. تسير آلية العمل كالتالي: يحدّث المصممون الألوان في Figma Variables، ويُجرى التصدير عبر الإضافة، ثم يُلتزم بملف JSON المحدّث، ويشغّل البرنامج النصي prebuild ‏Style Dictionary، وتُستخدم مخرجات CSS وJS المحدّثة في تطبيق React. وبذلك يظل التصميم والكود متزامنين.

تقتصر خصائص CSS المخصصة على العنصر الذي عُرّفت عليه وعلى العناصر المتحدرة منه. ويتيح ذلك تجاوزات السمات على مستوى المكوّن: إذ يمكن لمكوّن بطاقة ضبط --color-background: var(--color-surface-elevated) على عنصره الجذري، فتستخدم جميع العناصر المتحدرة لون السطح المرتفع من دون تمرير props عبر المكوّنات.

ما الميزة الأساسية لاستخدام خصائص CSS المخصصة (المتغيرات) لرموز التصميم بدلًا من قيم Tailwind الثابتة؟

ينشئ Style Dictionary خصائص CSS مخصصة للاستيراد على مستوى التطبيق، وكائنات JS للتكامل مع Tailwind وCSS-in-JS. وتتيح متغيرات CSS تبديل السمات أثناء التشغيل عبر تجاوزات [data-theme]. ويوسّع Tailwind إعداداته باستخدام قيم الرموز من مخرجات JS؛ ولتفعيل السمات الواعية بالشفافية، اضبط Tailwind للإشارة إلى متغيرات CSS التي تحتوي على قيم RGB. وتفرض قواعد lint استخدام الرموز فقط للألوان، مما يمنع القيم الثابتة من الوصول إلى قاعدة الكود.