الألوان (Colors)

نقل المعنى من خلال color مع مجموعة من الفئات (classes) المساعدة للألوان. تتضمن أيضاً دعماً لتنسيق الروابط مع حالات التحويم (hover).

في هذه الصفحة

نصيحة حول إمكانية الوصول: استخدام اللون لإضافة معنى يوفر إشارة بصرية فقط، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة مثل قارئات الشاشة. يرجى التأكد من أن المعنى واضح من المحتوى نفسه (على سبيل المثال، النص المرئي مع كافٍ تباين الألوان) أو مدرج عبر وسائل بديلة، مثل نص إضافي مخفي باستخدام الفئة (class) .visually-hidden.

الألوان

قم بتلوين النصوص باستخدام أدوات الألوان المساعدة. إذا كنت ترغب في تلوين الروابط، يمكنك استخدام الفئات المساعدة .link-* التي تحتوي على حالات :hover و :focus.

أدوات الألوان المساعدة مثل .text-* التي تم إنشاؤها من خريطة (map) الـ $theme-colors الأصلية في الـ Sass لا تستجيب بعد لوضعيات الألوان، ومع ذلك، فإن أي أداة .text-*-emphasis ستستجيب. سيتم حل هذه المشكلة في الإصدار v6.

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

.text-black

.text-white

.text-black-50

.text-white-50

html

<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>

<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>

<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

استبعاد: مع إضافة أدوات .text-opacity-* ومتغيرات CSS لأدوات النصوص، تم استبعاد .text-black-50 و .text-white-50 بدءاً من الإصدار v5.1.0. وسيتم إزالتهما في الإصدار v6.0.0.

استبعاد: مع إضافة ألوان ومتغيرات السمة الموسعة، تم استبعاد أداة .text-muted بدءاً من الإصدار v5.3.0. كما تم إعادة تعيين قيمتها الافتراضية إلى متغير CSS الجديد --bs-secondary-color لدعم وضعيات الألوان بشكل أفضل. سيتم إزالتها في الإصدار v6.0.0.

الشفافية (Opacity)

تمت الإضافة في الإصدار v5.1.0

بدءاً من الإصدار v5.1.0، يتم إنشاء أدوات ألوان النصوص باستخدام الـ Sass عبر متغيرات CSS. وهذا يسمح بتغييرات الألوان في الوقت الفعلي دون الحاجة إلى تجميع (compilation) وتغييرات ديناميكية في شفافية ألفا (alpha transparency).

كيف يعمل ؟

تأمل في أداة .text-primary الافتراضية لدينا.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

نحن نستخدم نسخة RGB من متغير CSS الخاص بنا --bs-primary (بقيمة 13, 110, 253) وأضفنا متغير CSS ثانٍ، --bs-text-opacity، لشفافية ألفا (بقيمة افتراضية 1 بفضل متغير CSS محلي). هذا يعني أنه في أي وقت تستخدم فيه .text-primary الآن، ستكون قيمة اللون color المحسوبة هي rgba(13, 110, 253, 1). يتجنب متغير CSS المحلي داخل كل فئة .text-* مشكلات الوراثة حتى لا تحصل النسخ المتداخلة من الأدوات المساعدة تلقائياً على شفافية ألفا معدلة.

مثال

لتغيير تلك الشفافية، قم بتجاوز --bs-text-opacity عبر أنماط مخصصة أو أنماط مضمنة (inline styles).

This is default primary text

This is 50% opacity primary text

html

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

أو اختر من أي من أدوات .text-opacity المساعدة:

This is default primary text

This is 75% opacity primary text

This is 50% opacity primary text

This is 25% opacity primary text

html

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

الخصوصية

في بعض الأحيان لا يمكن تطبيق الفئات السياقية بسبب خصوصية محدد (selector) آخر. في بعض الحالات، يكون الحل المناسب هو تغليف محتوى العنصر الخاص بك في <div> أو عنصر أكثر دلالية مع الفئة المطلوبة.

الـ (CSS)

بالإضافة إلى وظائف الـ Sass التالية، يرجى القراءة عن خصائص CSS المخصصة (المعروفة أيضاً بمتغيرات CSS) المضمنة لدينا للألوان وغيرها.

متغيرات الـ (Sass)

يتم إنشاء معظم أدوات color المساعدة بواسطة ألوان السمة الخاصة بنا، والتي يتم إعادة تعيينها من متغيرات لوحة ألواننا العامة.

scss/_variables.scss

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

scss/_variables.scss

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

ألوان التدرج الرمادي متاحة أيضاً، ولكن يتم استخدام مجموعة فرعية منها فقط لإنشاء أي أدوات مساعدة.

scss/_variables.scss

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

scss/_maps.scss

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

متغيرات لتعيين الألوان في أدوات .text-*-emphasis المساعدة في الوضعين الفاتح والمظلم:

scss/_variables.scss

$primary-text-emphasis:   shade-color($primary, 60%);
$secondary-text-emphasis: shade-color($secondary, 60%);
$success-text-emphasis:   shade-color($success, 60%);
$info-text-emphasis:      shade-color($info, 60%);
$warning-text-emphasis:   shade-color($warning, 60%);
$danger-text-emphasis:    shade-color($danger, 60%);
$light-text-emphasis:     $gray-700;
$dark-text-emphasis:      $gray-700;

scss/_variables-dark.scss

$primary-text-emphasis-dark:        tint-color($primary, 40%);
$secondary-text-emphasis-dark:      tint-color($secondary, 40%);
$success-text-emphasis-dark:        tint-color($success, 40%);
$info-text-emphasis-dark:           tint-color($info, 40%);
$warning-text-emphasis-dark:        tint-color($warning, 40%);
$danger-text-emphasis-dark:         tint-color($danger, 40%);
$light-text-emphasis-dark:          $gray-100;
$dark-text-emphasis-dark:           $gray-300;

خرائط الـ (Sass)

يتم بعد ذلك وضع ألوان السمة في خريطة (map) Sass حتى نتمكن من التكرار عبرها لإنشاء أدواتنا المساعدة، ومعدلات المكونات، وغيرها.

scss/_variables.scss

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

ألوان التدرج الرمادي متاحة أيضاً كخريطة Sass. هذه الخريطة لا تُستخدم لإنشاء أي أدوات مساعدة.

scss/_variables.scss

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

يتم إنشاء ألوان RGB من خريطة Sass منفصلة:

scss/_maps.scss

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

تعتمد شفافية الألوان على ذلك من خلال خريطتها الخاصة التي تستهلكها واجهة برمجة تطبيقات الأدوات المساعدة (utilities API):

scss/_maps.scss

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

$utilities-text-emphasis-colors: (
  "primary-emphasis": var(--#{$prefix}primary-text-emphasis),
  "secondary-emphasis": var(--#{$prefix}secondary-text-emphasis),
  "success-emphasis": var(--#{$prefix}success-text-emphasis),
  "info-emphasis": var(--#{$prefix}info-text-emphasis),
  "warning-emphasis": var(--#{$prefix}warning-text-emphasis),
  "danger-emphasis": var(--#{$prefix}danger-text-emphasis),
  "light-emphasis": var(--#{$prefix}light-text-emphasis),
  "dark-emphasis": var(--#{$prefix}dark-text-emphasis)
);

ألوان النصوص المتكيفة مع وضع الألوان متاحة أيضاً كخريطة Sass:

scss/_maps.scss

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

scss/_maps.scss

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

واجهة برمجة تطبيقات أدوات Sass (Sass utilities API)

يتم التصريح عن أدوات الألوان المساعدة في واجهة برمجة تطبيقات الأدوات المساعدة الخاصة بنا في scss/_utilities.scss. تعلم كيفية استخدام واجهة برمجة تطبيقات الأدوات المساعدة.

scss/_utilities.scss

"color": (
  property: color,
  class: text,
  local-vars: (
    "text-opacity": 1
  ),
  values: map-merge(
    $utilities-text-colors,
    (
      "muted": var(--#{$prefix}secondary-color), // deprecated
      "black-50": rgba($black, .5), // deprecated
      "white-50": rgba($white, .5), // deprecated
      "body-secondary": var(--#{$prefix}secondary-color),
      "body-tertiary": var(--#{$prefix}tertiary-color),
      "body-emphasis": var(--#{$prefix}emphasis-color),
      "reset": inherit,
    )
  )
),
"text-opacity": (
  css-var: true,
  class: text-opacity,
  values: (
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
"text-color": (
  property: color,
  class: text,
  values: $utilities-text-emphasis-colors
),