Редактирование: Шаблон:ColorPaletteStyles

<includeonly>{{#switch: {{{1}}}
| Civilian = style="
  --{{{2|template}}}-opaque: var(--civilian-opaque);
  --{{{2|template}}}-primary: var(--civilian-primary);
  --{{{2|template}}}-secondary: var(--civilian-secondary);
  --{{{2|template}}}-light: var(--civilian-light);
  --{{{2|template}}}-transparent: var(--civilian-transparent);
"
| Medical = style="
  --{{{2|template}}}-opaque: var(--medical-opaque);
  --{{{2|template}}}-primary: var(--medical-primary);
  --{{{2|template}}}-secondary: var(--medical-secondary);
  --{{{2|template}}}-light: var(--medical-light);
  --{{{2|template}}}-transparent: var(--medical-transparent);
"
| Supply = style="
  --{{{2|template}}}-opaque: var(--supply-opaque);
  --{{{2|template}}}-primary: var(--supply-primary);
  --{{{2|template}}}-secondary: var(--supply-secondary);
  --{{{2|template}}}-light: var(--supply-light);
  --{{{2|template}}}-transparent: var(--supply-transparent);
"
| Science = style="
  --{{{2|template}}}-opaque: var(--science-opaque);
  --{{{2|template}}}-primary: var(--science-primary);
  --{{{2|template}}}-secondary: var(--science-secondary);
  --{{{2|template}}}-light: var(--science-light);
  --{{{2|template}}}-transparent: var(--science-transparent);
"
| Engineering = style="
  --{{{2|template}}}-opaque: var(--engineer-opaque);
  --{{{2|template}}}-primary: var(--engineer-primary);
  --{{{2|template}}}-secondary: var(--engineer-secondary);
  --{{{2|template}}}-light: var(--engineer-light);
  --{{{2|template}}}-transparent: var(--engineer-transparent);
"
| Security = style="
  --{{{2|template}}}-opaque: var(--security-opaque);
  --{{{2|template}}}-primary: var(--security-primary);
  --{{{2|template}}}-secondary: var(--security-secondary);
  --{{{2|template}}}-light: var(--security-light);
  --{{{2|template}}}-transparent: var(--security-transparent);
"
| Antag = style="
  --{{{2|template}}}-opaque: var(--antag-opaque);
  --{{{2|template}}}-primary: var(--antag-primary);
  --{{{2|template}}}-secondary: var(--antag-secondary);
  --{{{2|template}}}-light: var(--antag-light);
  --{{{2|template}}}-transparent: var(--antag-transparent);
"
| Legal = style="
  --{{{2|template}}}-opaque: var(--legal-opaque);
  --{{{2|template}}}-primary: var(--legal-primary);
  --{{{2|template}}}-secondary: var(--legal-secondary);
  --{{{2|template}}}-light: var(--legal-light);
  --{{{2|template}}}-transparent: var(--legal-transparent);
"
| Command = style="
  --{{{2|template}}}-opaque: var(--command-opaque);
  --{{{2|template}}}-primary: var(--command-primary);
  --{{{2|template}}}-secondary: var(--command-secondary);
  --{{{2|template}}}-light: var(--command-light);
  --{{{2|template}}}-transparent: var(--command-transparent);
"
| Synthetic = style="
  --{{{2|template}}}-opaque: var(--synthetic-opaque);
  --{{{2|template}}}-primary: var(--synthetic-primary);
  --{{{2|template}}}-secondary: var(--synthetic-secondary);
  --{{{2|template}}}-light: var(--synthetic-light);
  --{{{2|template}}}-transparent: var(--synthetic-transparent);
"
| CentCom = style="
  --{{{2|template}}}-opaque: var(--centcom-opaque);
  --{{{2|template}}}-primary: var(--centcom-primary);
  --{{{2|template}}}-secondary: var(--centcom-secondary);
  --{{{2|template}}}-light: var(--centcom-light);
  --{{{2|template}}}-transparent: var(--centcom-transparent);
"
| Special = style="
  --{{{2|template}}}-opaque: var(--special-opaque);
  --{{{2|template}}}-primary: var(--special-primary);
  --{{{2|template}}}-secondary: var(--special-secondary);
  --{{{2|template}}}-light: var(--special-light);
  --{{{2|template}}}-transparent: var(--special-transparent);
"
| Cyan = style="
  --{{{2|template}}}-opaque: var(--cyan-opaque);
  --{{{2|template}}}-primary: var(--cyan-primary);
  --{{{2|template}}}-secondary: var(--cyan-secondary);
  --{{{2|template}}}-light: var(--cyan-light);
  --{{{2|template}}}-transparent: var(--cyan-transparent);
"
| Blue = style="
  --{{{2|template}}}-opaque: var(--blue-opaque);
  --{{{2|template}}}-primary: var(--blue-primary);
  --{{{2|template}}}-secondary: var(--blue-secondary);
  --{{{2|template}}}-light: var(--blue-light);
  --{{{2|template}}}-transparent: var(--blue-transparent);
"
| Green = style="
  --{{{2|template}}}-opaque: var(--green-opaque);
  --{{{2|template}}}-primary: var(--green-primary);
  --{{{2|template}}}-secondary: var(--green-secondary);
  --{{{2|template}}}-light: var(--green-light);
  --{{{2|template}}}-transparent: var(--green-transparent);
"
| Yellow = style="
  --{{{2|template}}}-opaque: var(--yellow-opaque);
  --{{{2|template}}}-primary: var(--yellow-primary);
  --{{{2|template}}}-secondary: var(--yellow-secondary);
  --{{{2|template}}}-light: var(--yellow-light);
  --{{{2|template}}}-transparent: var(--yellow-transparent);
"
| Red = style="
  --{{{2|template}}}-opaque: var(--red-opaque);
  --{{{2|template}}}-primary: var(--red-primary);
  --{{{2|template}}}-secondary: var(--red-secondary);
  --{{{2|template}}}-light: var(--red-light);
  --{{{2|template}}}-transparent: var(--red-transparent);
"
| Pink = style="
  --{{{2|template}}}-opaque: var(--pink-opaque);
  --{{{2|template}}}-primary: var(--pink-primary);
  --{{{2|template}}}-secondary: var(--pink-secondary);
  --{{{2|template}}}-light: var(--pink-light);
  --{{{2|template}}}-transparent: var(--pink-transparent);
"
| Brown = style="
  --{{{2|template}}}-opaque: var(--brown-opaque);
  --{{{2|template}}}-primary: var(--brown-primary);
  --{{{2|template}}}-secondary: var(--brown-secondary);
  --{{{2|template}}}-light: var(--brown-light);
  --{{{2|template}}}-transparent: var(--brown-transparent);
"
| Lavaland = style="
  --{{{2|template}}}-opaque: var(--lavaland-opaque);
  --{{{2|template}}}-primary: var(--lavaland-primary);
  --{{{2|template}}}-secondary: var(--lavaland-secondary);
  --{{{2|template}}}-light: var(--lavaland-light);
  --{{{2|template}}}-transparent: var(--lavaland-transparent);
"
| Cultist = style="
  --{{{2|template}}}-opaque: var(--cult-opaque);
  --{{{2|template}}}-primary: var(--cult-primary);
  --{{{2|template}}}-secondary: var(--cult-secondary);
  --{{{2|template}}}-light: var(--cult-light);
  --{{{2|template}}}-transparent: var(--cult-transparent);
"
| Ratvar = style="
  --{{{2|template}}}-opaque: var(--ratvar-opaque);
  --{{{2|template}}}-primary: var(--ratvar-primary);
  --{{{2|template}}}-secondary: var(--ratvar-secondary);
  --{{{2|template}}}-light: var(--ratvar-light);
  --{{{2|template}}}-transparent: var(--ratvar-transparent);
"
| Wizard = style="
  --{{{2|template}}}-opaque: var(--wizard-opaque);
  --{{{2|template}}}-primary: var(--wizard-primary);
  --{{{2|template}}}-secondary: var(--wizard-secondary);
  --{{{2|template}}}-light: var(--wizard-light);
  --{{{2|template}}}-transparent: var(--wizard-transparent);
"
| Black = style="
  --{{{2|template}}}-opaque: var(--black-opaque);
  --{{{2|template}}}-primary: var(--black-primary);
  --{{{2|template}}}-secondary: var(--black-secondary);
  --{{{2|template}}}-light: var(--black-light);
  --{{{2|template}}}-transparent: var(--black-transparent);
"
| Gray = style="
  --{{{2|template}}}-opaque: var(--gray-opaque);
  --{{{2|template}}}-primary: var(--gray-primary);
  --{{{2|template}}}-secondary: var(--gray-secondary);
  --{{{2|template}}}-light: var(--gray-light);
  --{{{2|template}}}-transparent: var(--gray-transparent);
"
| #default = style="
  --{{{2|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness));
  --{{{2|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);
  --{{{2|template}}}-secondary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5);
  --{{{2|template}}}-light: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25);
  --{{{2|template}}}-transparent: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1);
"
}}</includeonly><noinclude>
= Что это? =
Вариант шаблона [[ColorPalette]] но для использования вместе с классами. <br>
Он в отличии от вышеупомянутого шаблона, возвращает сразу все цвета в виде CSS переменных, что позволяет более тонко использовать цвета но уже в CSS.

=== В чём её преимущество? ===
В отличии от [[ColorPalette]], этот шаблон вставляет сразу набор CSS переменных сразу же обёрнутых в `style=""`, что минимизирует инлайн стили и позволяет лишь 1 раз использовать шаблон для указания цвета, вместо указания цвета для каждого CSS свойства.

Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам! <br>
Использование <nowiki>{{ColorPalette|Civilian|example}}</nowiki><br>
Вернёт следующий код:
<pre>
style="
--example-opaque: var(--civilian-opaque);
--example-primary: var(--civilian-primary);
--example-secondary: var(--civilian-secondary);
--example-light: var(--civilian-light);
--example-transparent: var(--civilian-transparent);
"
</pre>
Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.<br>
Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css

=== С какой целью это сделано? === 
Исходя из всего вышеописанного, вы уже могли сделать некоторые выводи, но подытожим.<br>
Этот шаблон позволяет:
* Держать вёрстку шаблона в чистоте
* Тонко стилизовать шаблон с помощью <code>TemplateStyles</code>, так как все цвета доступны в виде переменных
* Сохранять преимущества [[ColorPalette]], позволяя делать шаблоны с возможностью смены цвета и сохраняя совместимость со светлой темой

=== Как использовать? ===
При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:
<pre><nowiki>
<div class="wrapper" {{ColorPaletteStyles|Civilian|example}}>
  <span class="example-text">Обычный текст</span>
</div>
</nowiki></pre>

Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице <code>Шаблон:Notice</code><br>
Нам нужно создать страницу <code>Шаблон:Notice/styles.css</code>, это '''ОБЯЗАТЕЛЬНО'''<br>
После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:
<pre><nowiki>
<templatestyles src="Notice/styles.css" />
<div class="notice" {{ColorPaletteStyles|Cargo|notice}}>
  <span class="notice-text">Обычный текст</span>
</div>
</nowiki></pre>

Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.<br>
Теперь же, на странице стилей мы можем... стилизовать наш шаблон:
<pre><nowiki>
.notice {
  background-color: var(--notice-primary);
  border: 1px solid var(--notice-light);
}

.notice-text {
  color: var(--color-text); /* Эта переменная создана в самом скине */
}
</nowiki></pre>

= Имеющиеся цвета =
См. [[ColorPalette#Имеющиеся_цвета|ColorPalette]]