اللون (Color)

الألوان

لقد استمرت لوحة ألوان الـ Bootstrap في التوسع وأصبحت أكثر دقة في الإصدار v5.3.0. لقد أضفنا متغيرات جديدة لألوان النصوص والخلفيات secondary و tertiary بالإضافة إلى {color}-bg-subtle و {color}-border-subtle و {color}-text-emphasis لألوان السمة الخاصة بنا. هذه الألوان الجديدة متاحة من خلال متغيرات Sass و CSS (ولكن ليس من خلال خرائط الألوان أو فئات الأدوات المساعدة) بهدف صريح هو تسهيل التخصيص عبر أنماط ألوان متعددة مثل الفاتح والمظلم. يتم تعيين هذه المتغيرات الجديدة عالمياً على :root وهي متكيفة مع وضع الألوان المظلم الجديد بينما تظل ألوان السمة الأصلية دون تغيير.

توفر الألوان التي تنتهي بـ -rgb قيم red, green, blue لاستخدامها في أنماط ألوان rgb() و rgba(). على سبيل المثال، rgba(var(--bs-secondary-bg-rgb), .5).

استخدام الألوان الجديدة

يمكن الوصول إلى هذه الألوان الجديدة عبر متغيرات الـ CSS والفئات (classes) المساعدة مثل --bs-primary-bg-subtle و .bg-primary-subtle مما يتيح لك إنشاء قواعد الـ CSS الخاصة بك باستخدام المتغيرات، أو تطبيق الأنماط بسرعة عبر الفئات (classes). تم بناء الأدوات المساعدة باستخدام متغيرات الـ CSS المرتبطة باللون، وبما أننا نقوم بتخصيص متغيرات الـ CSS هذه للوضع المظلم، فإنها تكون متكيفة مع وضع الألوان بشكل افتراضي.

<div class="p-3 text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-3">
  Example element with utilities
</div>

ألوان السمة (Theme colors)

نستخدم مجموعة فرعية من جميع الألوان لإنشاء لوحة ألوان أصغر لتوليد مخططات الألوان، وهي متاحة أيضاً كمتغيرات Sass وخريطة (map) Sass في ملف scss/_variables.scss الخاص بـ Bootstrap.

جميع هذه الألوان متاحة كخريطة (map) Sass، $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Check out our Sass maps and loops docs for how to modify these colors.

جميع الألوان

جميع ألوان الـ Bootstrap متاحة كمتغيرات Sass وخريطة (map) Sass في ملف scss/_variables.scss. ولتجنب زيادة أحجام الملفات، لا نقوم بإنشاء فئات (classes) للنصوص أو ألوان الخلفية لكل متغير من هذه المتغيرات. بدلاً من ذلك، نختار مجموعة فرعية من هذه الألوان لـ لوحة ألوان السمة.

تأكد من مراقبة نسب التباين أثناء تخصيص الألوان. كما هو موضح أدناه، أضفنا ثلاث نسب تباين لكل لون من الألوان الرئيسية—واحدة لألوان العينة الحالية، وواحدة مقابل اللون الأبيض، وواحدة مقابل اللون الأسود.

ملاحظات حول الـ Sass

لا يمكن للـ Sass توليد المتغيرات برمجياً، لذا قمنا بإنشاء متغيرات لكل درجة تفتيح (tint) وتغميق (shade) يدوياً. نحن نحدد القيمة المتوسطة (على سبيل المثال $blue-500) ونستخدم دوال ألوان مخصصة لتفتيح (lighten) أو تغميق (darken) ألواننا عبر دالة الألوان mix() الخاصة بالـ Sass.

استخدام mix() ليس هو نفسه استخدام lighten() و darken()؛ حيث تقوم الأولى بدمج اللون المحدد مع الأبيض أو الأسود، بينما تقوم الثانية فقط بتعديل قيمة السطوع لكل لون. والنتيجة هي مجموعة ألوان أكثر اكتمالاً، كما هو موضح في عرض CodePen هذا.

تستخدم الدوال tint-color() و shade-color() دالة mix() جنباً إلى جنب مع المتغير $theme-color-interval الخاص بنا، والذي يحدد قيمة مئوية متدرجة لكل لون مختلط ننتجه. راجع ملفي scss/_functions.scss و scss/_variables.scss للحصول على الكود المصدري الكامل.

خرائط الـ Sass للألوان

تتضمن ملفات الـ Sass المصدرية لـ Bootstrap ثلاث خرائط (maps) لمساعدتك في التكرار بسرعة وسهولة عبر قائمة من الألوان وقيم الـ hex الخاصة بها.

• $colors تسرد جميع ألواننا الأساسية المتاحة (500)
• $theme-colors تسرد جميع ألوان السمة المسماة دلالياً (موضحة أدناه)
• $grays تسرد جميع درجات التفتيح والتغميق للون الرمادي

داخل scss/_variables.scss ، ستجد متغيرات ألوان الـ Bootstrap وخريطة (map) الـ Sass. إليك مثال على خريطة $colors الـ Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "black":      $black,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

قم بإضافة أو إزالة أو تعديل القيم داخل الخريطة (map) لتحديث كيفية استخدامها في العديد من المكونات الأخرى. لسوء الحظ، في الوقت الحالي، لا يستخدم كل مكون خريطة الـ Sass هذه. ستسعى التحديثات المستقبلية إلى تحسين ذلك. وحتى ذلك الحين، خطط لاستخدام متغيرات ${color} وهذه الخريطة (map) الـ Sass.

مثال

إليك كيفية استخدام هذه المتغيرات في الـ Sass الخاص بك:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

فئات (classes) الأدوات المساعدة لـ اللون و الخلفية متاحة أيضاً لتعيين color و background-color باستخدام قيم الألوان 500.

توليد الأدوات المساعدة (Generating utilities)

لا يتضمن الـ Bootstrap أدوات مساعدة لـ color و background-color لكل متغير لون، ولكن يمكنك توليد هذه الأدوات بنفسك باستخدام utility API وخرائط الـ Sass الموسعة التي تمت إضافتها في الإصدار v5.1.0.

1. للبدء، تأكد من استيراد الدوال (functions)، والمتغيرات (variables)، والمزجات (mixins)، والأدوات المساعدة (utilities) الخاصة بنا.
2. استخدم الدالة (function) map-merge-multiple() لدمج عدة خرائط (maps) Sass معاً بسرعة في خريطة (map) جديدة.
3. ادمج هذه الخريطة المجمعة الجديدة لتوسيع أي أداة مساعدة باسم فئة (class) بتنسيق {color}-{level}.

إليك مثال يقوم بتوليد أدوات مساعدة لألوان النصوص (على سبيل المثال .text-purple-500) باستخدام الخطوات المذكورة أعلاه.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

سيؤدي هذا إلى توليد أدوات مساعدة جديدة .text-{color}-{level} لكل لون ومستوى. يمكنك القيام بنفس الشيء لأي أداة مساعدة أو خاصية أخرى أيضاً.