Barvy

Paleta

Osmnáct barev, každá v deseti odstínech. Široká paleta nám umoňuje vybrat pro každou situaci vždy tu správnou.

<div class="foo">Foo</div>
<div class="bar">Bar</div>
<div class="qux">Qux</div>

.foo {
	background-color: @pink--60;
}

.bar {
	background-color: @pink--30;
}

.qux {
	border: 4px solid;
	background-color: @pink--20;
	border-color: @pink--30;
}

Branding

Kombinací primární a sekundární barvy je možné vytvořit vlastní branding, pokud by zákazník vyžadoval použití svých barev. Výchozí schéma modrá-modrá není potřeba dodržovat.

<div class="foo foo--primary"></div>
<div class="foo foo--secondary"></div>

.foo--primary {
  .themify(background-color, @color-primary);   
}

.foo--secondary {
  .themify(background-color, @color-secondary);   
}

Jak změnit branding

@branding-primary   : "deeporange";
@branding-secondary : "yellow";

Po této úpravě ve vlastních stylech a následné kompilaci dojde k přetěžení proměných výchozích barev brandingu. V tomto konkrétním příkladu se změní primární barva na tmavě oranžovou a sekundární barva na žlutou.

Stav

K barevnému zvýraznění stavu stačí využít předvolených barev. Není tak nutné si pamatovat nebo zpětně dohledávat přesnou barvu.

<div class="foo foo--success"></div>
<div class="foo foo--warning"></div>
<div class="foo foo--error"></div>
<div class="foo foo--information"></div>

.foo--success {
  .themify(background-color, @color-success);   
}

.foo--warning {
  .themify(background-color, @color-warning);   
}

.foo--error {
  .themify(background-color, @color-error);   
}

.foo--information {
  .themify(background-color, @color-information);   
}

Práva

K barevnému zvýraznění práv stačí využít předvolených barev. Není tak nutné si pamatovat nebo zpětně dohledávat přesnou barvu. Méně syté barvy jsou k dispozici také v ControlsVariables.less v sekci EditableControl.

<div class="foo foo--required"></div>
<div class="foo foo--posponedrequired"></div>
<div class="foo foo--recommended"></div>

.foo--required {
  .themify(background-color, @color-required);   
}

.foo--posponedrequired {
  .themify(background-color, @color-posponedrequired);   
}

.foo--recommended {
  .themify(background-color, @color-recommended);   
} 

Oddělovač

Oddělovač je tenká linka napomáhající rozdělit skupiny prvků, například řádky seznamu.

<div class="list__item"> … </div>
<div class="list__item"> … </div>
<div class="list__item"> … </div>

.list__item {
  padding: var(--base) 0;

  // Oddělovač mají všechny položky kromě poslední
  &:not(:last-child) {
       border-bottom: 1px solid;
       .themify(border-bottom-color, @divider);
  }
}

Typy

@divider
@divider-prominent
@divider-block