نبتون مبني على نظام design tokens متّسق. يعني كل لون أو حجم أو خط في الثيم بيرجع لـtoken واحد. تغيير الـtoken بيعدّل كل اللي مرتبط بيه.

#ليه design tokens؟

قبل: لو حابب تغيّر اللون الأساسي، لازم تعدّل في 30 component مختلف. بعد: تغيّر متغيّر واحد، كل الـcomponents بتتطابق تلقائياً.

#الـtokens الأساسية

css
:root {
  --color-background: 240 11% 4%;
  --color-foreground: 240 9% 96%;
  --color-primary: 193 82% 31%;
  --color-accent: 187 85% 53%;
  --color-border: 240 8% 16%;
  --radius: 0.75rem;
}

#التعديل من لوحة سلة

كل token له مقابل في لوحة "تخصيص الثيم":

المتغيّراللوحةالنوع
--color-primaryالهوية → اللون الأساسيColor picker
--color-accentالهوية → اللون البارزColor picker
--color-backgroundالهوية → خلفية الموقعColor picker
--font-familyالهوية → الخطDropdown
--radiusالمظهر → دوران الزواياSlider (0-1.5rem)

#التعديل من Code (للـdevs)

css
/* في القسم Custom CSS */
.light {
  --color-primary: 200 90% 40%;  /* لون primary مختلف في light mode */
}

[data-section="hero"] {
  --section-padding: 6rem 0;     /* override فقط لـhero */
}

#أمثلة على التخصيص

#غيّر اللون الأساسي للـbrand

css
:root {
  --color-primary: 280 70% 50%;  /* بنفسجي بدل tealو */
  --color-accent: 290 90% 70%;
}

#غيّر الـfont إلى Tajawal

css
:root {
  --font-family: 'Tajawal', system-ui, sans-serif;
}