Sa'y

Umi colores de tema rehegua

Jaipuru peteĩ subconjunto opaite saꞌi rehegua jajapo hag̃ua peteĩ saꞌi saꞌi michĩvéva ñamoheñói hag̃ua esquema saꞌi rehegua, ojeguerekóva avei Sass mbaꞌekuaarã ramo ha peteĩ Sass mapa Bootstrap scss/_variables.scssvore ryepýpe.

Opa ko’ã sa’y ojeguereko peteĩ mapa Sass ramo, $theme-colors.

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

Ehecháke ore Sass mapa ha bucle docs mba’éichapa ikatu remoambue ko’ã sa’y.

Opaite sa’ykuéra

Opaite Bootstrap saꞌi ojeguereko Sass mbaꞌekuaarã ramo ha peteĩ Sass mapa scss/_variables.scssvore ryepýpe. Ani hag̃ua oñembohetave vore tuichakue, ndajajapói jehaipyre térã tapykuehoha saꞌi mboꞌepy peteĩteĩ koꞌã mbaꞌekuaarãme g̃uarã. Upéva rangue, jaiporavo peteĩ subconjunto ko’ã color-gui peteĩ paleta tema rehegua .

Ejesareko katuete umi relación de contraste rehe emohenda aja umi sa’y. Ohechaukaháicha koꞌape, romoĩkuri mbohapy relación contraste peteĩteĩ umi saꞌi tenondeguápe —peteĩva umi saꞌi koꞌag̃agua swatch rehegua, peteĩva morotĩva rehe ha peteĩva morotĩva rehe.

Notas sobre Sass rehegua

Sass ndaikatúi ogenera programáticamente umi variable, upévare rojapo manualmente umi variable opaite tinte ha sombra-pe g̃uarã orejehegui. Jaikuaauka pe valor punto medio rehegua (techapyrã, $blue-500) ha jaipuru umi función color personalizada ñatintávo (ñamohesakã) térã ñamopytũ hag̃ua ñande colorkuéra Sass mix()función color rupive.

Jepuru mix()ndahaꞌei peteĩchagua lighten()ha darken()—pe peteĩha ombojeheꞌa pe saꞌi ojeꞌevaꞌekue morotĩ térã morotĩva ndive, ha ipahaguéva katu omohenda peteĩteĩva saꞌi valor tesape rehegua añoite. Pe resultado ha’e peteĩ suite hetaiteve hekoitépe umi sa’y rehegua, ojehechaukaháicha ko CodePen demostración -pe .

Ñande tint-color()ha shade-color()función oipuru mix()ñande $theme-color-intervalvariable ykére, ohechaukáva peteĩ valor porcentual escalonado peteĩteĩva color mixto jajapóvape g̃uarã. Ehecha umi scss/_functions.scssha scss/_variables.scssvorekuéra kódigo fuente henyhẽva rehegua.

Mapas de color Sass rehegua

Bootstrap vore Sass ypykue oguereko mbohapy mapa nepytyvõ hag̃ua pyaꞌe ha ndahasýi ojejapo hag̃ua peteĩ lista saꞌi ha ivalór hexagonal rehegua.

• $colorsomoĩ opaite ñande base ( 500) colores ojeguerekóva
• $theme-colorsomoĩ opaite tema sa’y oñembohérava semánticamente (ojehechauka iguýpe) .
• $graysomoĩ opaite tinte ha sombra gris rehegua

, ryepýpe scss/_variables.scss, rejuhúta Bootstrap sa’y ñemoambue ha Sass mapa. Ko’ápe oĩ peteĩ techapyrã $colorsSass mapa rehegua:

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

Emoĩ, eipe’a térã emoambue mba’ekuaarã mapa ryepýpe embopyahu hag̃ua mba’éichapa ojepuru heta ambue componente-pe. Ñambyasy ko’ã momento-pe, ndaha’éi opaite componente oipurúva ko mapa Sass. Umi actualización oútava oñeha’ãta omoporãve ko mba’e. Upe peve, eplanea eipuru hagua umi ${color}variable ha ko mapa Sass rehegua.

Tembiecharã

Ko’ápe ojehecha mba’éichapa ikatu reipuru ko’ãva nde Sass-pe:

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

Ojeguereko avei umi clase utilidad color ha fondocolor rehegua oñemboguapy ha background-colorojepuru hag̃ua umi 500valor color rehegua.

Ogenera haguã servicios públicos

Bootstrap ndoikéiva colorha background-colorutilidad opaite color variable-pe g̃uarã, ha katu ikatu emoheñói ko’ãva ndete voi ore utilidad API ha ore Sass mapa oñembotuicháva oñembojoapýva v5.1.0-pe.

1. Eñepyrũ hag̃ua, eñangareko emoinge hague ore rembiaporã, mbaꞌekuaarã, mixin ha tembipururã.
2. Eipuru ore map-merge-multiple()función embojoaju pyaꞌe hag̃ua heta Sass mapa oñondive peteĩ mapa pyahúpe.
3. Embojoaju ko mapa pyahu oñembojoajúva embohape hag̃ua oimeraẽva utilidad peteĩ {color}-{level}mbo’esyry réra reheve.

Ko’ápe oĩ peteĩ techapyrã omoheñóiva utilidad jehaipyre sa’y rehegua (techapyrã, .text-purple-500) oipurúvo umi tembiaporã yvategua.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@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";

Péicha omoheñóita .text-{color}-{level}utilidad pyahu opaite color ha nivel-pe g̃uarã. Ikatu rejapo upéicha avei oimeraẽ ambue utilidad ha propiedad rehe avei.