لوحات الألوان

يشحن Skeletonic Stylus الإصدار 2.0.0 ثلاث لوحات ألوان اختيارية، كل منها موزّعة كورقة أنماط مصغّرة خاصة بها حتى لا تدفع إلا ثمن ما تستخدمه.

Data table table
اللوحة	الملف	الحجم (min)
Material	`dist/css/palettes/material/skeletonic-material.min.css`	≈8 كيلوبايت
Tachyons	`dist/css/palettes/tachyons/skeletonic-tachyons.min.css`	7.3 كيلوبايت
الألوان الآمنة للويب	`dist/css/palettes/websafe/skeletonic-websafe.min.css`	≈4 كيلوبايت

هذه الصفحة تحمّل لوحة Tachyons حتى تُعرض فئات الألوان المساعدة أدناه بشكل صحيح.

تدرّج الرمادي الأساسي في Skeletonic

تشحن ورقة الأنماط الأساسية تدرّجًا رماديًا سهل الوصول من 11 مستوى مكشوفًا كـ --cl-grey-100 … --cl-grey-1000.

100

300

500

700

200

400

600

900

ألوان العلامة التجارية (الإصدار 2.0.0 — تباين AA)

في الإصدار 2.0.0 تم تغميق رموز الأساسي والثانوي لتحقيق نسبة تباين WCAG بقيمة 4.5:1 مقابل النص الأبيض مباشرة.

--cl-primary
hsl(210 100% 42%)

--cl-secondary
hsl(195 100% 33%)

--cl-tertiary
#757c8a

ملاحظة. --cl-tertiary (#757c8a) يحقق نسبة تباين 4.71:1 على خلفية بيضاء — متوافق مع AA لـ النص الكبير (≥ 18 px غامق / ≥ 24 px عادي) لكن ليس لنص المتن. استخدمه مع خلفيات أغمق أو استخدمه فقط للعناصر الزخرفية غير الأساسية.

فئات أدوات لوحة Tachyons

عند تحميل skeletonic-tachyons.min.css تحصل على مجموعة كاملة من فئات الألوان أحادية الغرض — نفس الأداة المُشحونة، وحدة اختيارية.

<span class="bg-blue white pa2">.bg-blue .white</span>
<span class="bg-light-green dark-green pa2">.bg-light-green .dark-green</span>
<span class="bg-washed-yellow dark-gray pa2">.bg-washed-yellow .dark-gray</span>

مواصفات لوحة Tachyons الكاملة موثّقة في tachyons.io/docs/themes/skins; والنسخة المُشحونة هنا هي تلك التي يجمّعها Skeletonic.

العودة إلى المكوّنات →