Colores

colorHuk makilla color utilidad clasekunawan significadota apachiy . Yanapakuy estilo t'inkikuna hover estadokunawan, chaymanta.

Kay p'anqapi

Colores

Qillqasqa llimp’i yanapakuykunawan llimp’iy. Sichus t'inkikunata llimp'iyta munanki, .link-*yanapakuq clasekunata llamk'achiy atikunki mayqinkunachus kanku :hoverchaymanta :focusestadokuna.

.qillqa-primaria

.texto-iskay kaq

.texto-allin ruway

.texto-peligro

.qillqa-willakuy

.qillqa-k’anchay

.texto-tutayaq

.texto-cuerpo

.qillqawan upallachisqa

.qillqa-yuraq

.qillqa-yana-50

.qillqa-yuraq-50

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

Yanapakuq tecnologiakunaman significadota apachiy

Color llamk'achiyta significado yapanapaq huk rikuy rikuchiyllata qun, mayqinchus mana yanapakuq tecnologiakuna llamk'aqkunaman chayachikunqachu – pantalla ñawiriqkuna hina. Aseguray willayta llimp'iwan riqsichisqa kikin contenidomanta sut'i kaqta (kayhina rikukuq qillqa), utaq huk ñankunawan churasqa kaqta, kayhina yapasqa qillqa .visually-hiddenclasewan pakasqa.

Especificidad nisqa

Wakin kutiqa huk akllaqpa especificidadninraykum mana clase contextual nisqakuna churakunmanchu. Wakin kutikunapi, huk suficiente llamkanaqa elementoykipa contenidonta huk <div>utaq aswan elemento semántico kaqpi munasqa clasewan p'istuymi.

Sass

Kay qatiq Sass ruwanakunamanta yapasqa, qhaway ñawiriyta ñuqaykumanta churasqa CSS sapanchasqa propiedades kaqmanta (aka CSS tikraqkuna) llimp'ikunapaq chaymanta aswan.

Variables nisqakuna

Yaqa llapan coloryanapakuykuna tema llimp'iykuwan ruwasqa kanku, musuqmanta asignasqa kay genérico llimp'i paleta variablesniykumanta.

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

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

Gris escala llimp'ikunapas kan, ichataq huk huch'uy huñulla ima yanapakuykunatapas paqarichinapaq llamk'achisqa.

$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;

Mapa

Chaymanta tema colorkuna huk Sass mapaman churasqa kanku chaymanta chaykuna patapi llalliyta atiykuman yanapakuyniyku, componente modificadorkuna chaymanta aswan ruwanapaq.

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

Sass mapa hinapas gris nisqa llimp’ikuna kanmi. Kay mapaqa manam ima yanapakuykunatapas ruwanapaqchu.

$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
);

API de Utilidades nisqa

Color yanapakuykuna yanapakuyniyku API kaqpi willasqa kachkanku scss/_utilities.scss. Yachay imayna ruwanakuna API llamk'achiyta.

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),