Koloro

Temaj koloroj

Ni uzas subaron de ĉiuj koloroj por krei pli malgrandan kolorpaletron por generi kolorskemojn, ankaŭ haveblajn kiel Sass-variablojn kaj Sass-mapon en la scss/_variables.scssdosiero de Bootstrap.

Ĉiuj ĉi tiuj koloroj estas haveblaj kiel Sass-mapo, $theme-colors.

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

Rigardu niajn dokumentojn pri mapoj kaj bukloj de Sass por kiel modifi ĉi tiujn kolorojn.

Ĉiuj koloroj

Ĉiuj Bootstrap-koloroj haveblas kiel Sass-variabloj kaj Sass-mapo en scss/_variables.scssdosiero. Por eviti pliigitajn dosiergrandojn, ni ne kreas tekstajn aŭ fonkolorajn klasojn por ĉiu el ĉi tiuj variabloj. Anstataŭe, ni elektas subaron de ĉi tiuj koloroj por temopaletro .

Nepre monitoru kontrastproporciojn dum vi agordas kolorojn. Kiel montrite sube, ni aldonis tri kontrastajn proporciojn al ĉiu el la ĉefaj koloroj—unu por la nunaj koloroj de la specimeno, unu por kontraŭ blanka, kaj unu por kontraŭ nigra.

Notoj pri Sass

Sass ne povas programe generi variablojn, do ni permane kreis variablojn por ĉiu nuanco kaj ombro mem. Ni specifas la mezpunktan valoron (ekz., $blue-500) kaj uzas kutimajn kolorfunkciojn por nuanci (malpezigi) aŭ ombrigi (malheligi) niajn kolorojn per la kolorfunkcio de Sass mix().

Uzado mix()ne samas kiel lighten()kaj darken()—la unua miksas la specifitan koloron kun blanka aŭ nigra, dum la dua nur ĝustigas la lumvaloron de ĉiu koloro. La rezulto estas multe pli kompleta serio de koloroj, kiel montrite en ĉi tiu CodePen-demo .

Niaj tint-color()kaj shade-color()funkcioj uzas mix()kune kun nia $theme-color-intervalvariablo, kiu specifas paŝitan procentan valoron por ĉiu miksita koloro, kiun ni produktas. Vidu la scss/_functions.scsskaj scss/_variables.scssdosierojn por la plena fontkodo.

Koloraj Sass-mapoj

La fontaj Sass-dosieroj de Bootstrap inkluzivas tri mapojn por helpi vin rapide kaj facile trarigardi liston de koloroj kaj iliaj heksaj valoroj.

• $colorslistigas ĉiujn niajn disponeblajn bazajn ( 500) kolorojn
• $theme-colorslistigas ĉiujn semantike nomitajn etkolorojn (montritajn malsupre)
• $grayslistigas ĉiujn nuancojn kaj nuancojn de griza

Ene scss/_variables.scssde , vi trovos la kolorajn variablojn de Bootstrap kaj Sass-mapon. Jen ekzemplo de la $colorsSass-mapo:

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

Aldonu, forigu aŭ modifi valorojn en la mapo por ĝisdatigi kiel ili estas uzataj en multaj aliaj komponantoj. Bedaŭrinde nuntempe, ne ĉiuj komponantoj uzas ĉi tiun Sass-mapon. Estontaj ĝisdatigoj klopodos plibonigi ĉi tion. Ĝis tiam, planu uzi la ${color}variablojn kaj ĉi tiun Sass-mapon.

Ekzemplo

Jen kiel vi povas uzi ĉi tiujn en via Sass:

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

Koloraj kaj fonaj utilaj klasoj ankaŭ disponeblas por agordi colorkaj background-coloruzi la 500kolorvalorojn.

Generante utilecojn

Bootstrap ne inkluzivas colorkaj background-colorutilecojn por ĉiu kolora variablo, sed vi povas generi ĉi tiujn mem per nia utileca API kaj niaj plilongigitaj Sass-mapoj aldonitaj en v5.1.0.

1. Por komenci, certigu, ke vi importis niajn funkciojn, variablojn, miksaĵojn kaj ilojn.
2. Uzu nian map-merge-multiple()funkcion por rapide kunfandi plurajn Sass-mapojn kune en nova mapo.
3. Kunfandi ĉi tiun novan kombinitan mapon por etendi ajnan ilon kun {color}-{level}klasnomo.

Jen ekzemplo, kiu generas tekstkolorajn ilojn (ekz. .text-purple-500) uzante la suprajn paŝojn.

@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";

Ĉi tio generos novajn .text-{color}-{level}utilecojn por ĉiu koloro kaj nivelo. Vi povas fari la samon ankaŭ por iu ajn alia utileco kaj posedaĵo.