السمات

مفاتيح الضبط

مفتاح الضبط متغيّر CSS واحد تقرؤه أصناف كثيرة. غيّره مرة واحدة، فتتبعه كل المكوّنات.

الوضع كتلة واحدة

لا يوجد كائن سمة، ولا خاصية في المزوّد للألوان. الوضع كتلة CSS يختارها data-theme.

[data-theme='ocean'] {
  --tc-primary-solid: var(--color-cyan-700);
  --tc-primary-on-solid: var(--color-white);
  /* cyan-800 not cyan-700: the whole ocean soft ramp fails at cyan-700. */
  --tc-primary-on-soft: var(--color-cyan-800);
  --tc-primary-hover: var(--color-cyan-800);
  --tc-primary-active: var(--color-cyan-900);
  --tc-radius: 9999px;
}

هذا وضع المحيط كاملًا: يغيّر نبرة واحدة ومفتاح ضبط واحدًا.

حصر السمة في قسم

يعمل data-theme على أي عنصر، لا على الجذر وحده. ضعه على لوحة فيُعاد حساب كل ما بداخلها، بما في ذلك الصبغات الخفيفة وحلقة التركيز.

<section data-theme="dark" className="bg-page text-body">
  {/* every component in here is dark, including
      its focus ring and its soft tints */}
</section>

ما لا يقبل التخصيص عن قصد

سلّم أحجام الخط وسلّم المسافات وبنية المكوّنات ثابتة، كي يصطفّ أي مكوّنين في صف واحد دائمًا.