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

<includeonly>{{#switch: {{{1}}}
| Civilian =
{{#switch: {{{2|Primary}}}
| Opaque = var(--civilian-opaque)
| Primary = var(--civilian-primary)
| Secondary = var(--civilian-secondary)
| Light = var(--civilian-light)
| Transparent = var(--civilian-transparent)
}}
| Medical =
{{#switch: {{{2|Primary}}}
| Opaque = var(--medical-opaque)
| Primary = var(--medical-primary)
| Secondary = var(--medical-secondary)
| Light = var(--medical-light)
| Transparent = var(--medical-transparent)
}}
| Supply =
{{#switch: {{{2|Primary}}}
| Opaque = var(--supply-opaque)
| Primary = var(--supply-primary)
| Secondary = var(--supply-secondary)
| Light = var(--supply-light)
| Transparent = var(--supply-transparent)
}}
| Science =
{{#switch: {{{2|Primary}}}
| Opaque = var(--science-opaque)
| Primary = var(--science-primary)
| Secondary = var(--science-secondary)
| Light = var(--science-light)
| Transparent = var(--science-transparent)
}}
| Engineering =
{{#switch: {{{2|Primary}}}
| Opaque = var(--engineer-opaque)
| Primary = var(--engineer-primary)
| Secondary = var(--engineer-secondary)
| Light = var(--engineer-light)
| Transparent = var(--engineer-transparent)
}}
| Security =
{{#switch: {{{2|Primary}}}
| Opaque = var(--security-opaque)
| Primary = var(--security-primary)
| Secondary = var(--security-secondary)
| Light = var(--security-light)
| Transparent = var(--security-transparent)
}}
| Antag =
{{#switch: {{{2|Primary}}}
| Opaque = var(--antag-opaque)
| Primary = var(--antag-primary)
| Secondary = var(--antag-secondary)
| Light = var(--antag-light)
| Transparent = var(--antag-transparent)
}}
| Legal =
{{#switch: {{{2|Primary}}}
| Opaque = var(--legal-opaque)
| Primary = var(--legal-primary)
| Secondary = var(--legal-secondary)
| Light = var(--legal-light)
| Transparent = var(--legal-transparent)
}}
| Command =
{{#switch: {{{2|Primary}}}
| Opaque = var(--command-opaque)
| Primary = var(--command-primary)
| Secondary = var(--command-secondary)
| Light = var(--command-light)
| Transparent = var(--command-transparent)
}}
| Synthetic =
{{#switch: {{{2|Primary}}}
| Opaque = var(--synthetic-opaque)
| Primary = var(--synthetic-primary)
| Secondary = var(--synthetic-secondary)
| Light = var(--synthetic-light)
| Transparent = var(--synthetic-transparent)
}}
| CentCom =
{{#switch: {{{2|Primary}}}
| Opaque = var(--centcom-opaque)
| Primary = var(--centcom-primary)
| Secondary = var(--centcom-secondary)
| Light = var(--centcom-light)
| Transparent = var(--centcom-transparent)
}}
| Special =
{{#switch: {{{2|Primary}}}
| Opaque = var(--special-opaque)
| Primary = var(--special-primary)
| Secondary = var(--special-secondary)
| Light = var(--special-light)
| Transparent = var(--special-transparent)
}}
| Cyan =
{{#switch: {{{2|Primary}}}
| Opaque = var(--cyan-opaque)
| Primary = var(--cyan-primary)
| Secondary = var(--cyan-secondary)
| Light = var(--cyan-light)
| Transparent = var(--cyan-transparent)
}}
| Blue =
{{#switch: {{{2|Primary}}}
| Opaque = var(--blue-opaque)
| Primary = var(--blue-primary)
| Secondary = var(--blue-secondary)
| Light = var(--blue-light)
| Transparent = var(--blue-transparent)
}}
| Green =
{{#switch: {{{2|Primary}}}
| Opaque = var(--green-opaque)
| Primary = var(--green-primary)
| Secondary = var(--green-secondary)
| Light = var(--green-light)
| Transparent = var(--green-transparent)
}}
| Yellow =
{{#switch: {{{2|Primary}}}
| Opaque = var(--yellow-opaque)
| Primary = var(--yellow-primary)
| Secondary = var(--yellow-secondary)
| Light = var(--yellow-light)
| Transparent = var(--yellow-transparent)
}}
| Red =
{{#switch: {{{2|Primary}}}
| Opaque = var(--red-opaque)
| Primary = var(--red-primary)
| Secondary = var(--red-secondary)
| Light = var(--red-light)
| Transparent = var(--red-transparent)
}}
| Pink =
{{#switch: {{{2|Primary}}}
| Opaque = var(--pink-opaque)
| Primary = var(--pink-primary)
| Secondary = var(--pink-secondary)
| Light = var(--pink-light)
| Transparent = var(--pink-transparent)
}}
| Brown =
{{#switch: {{{2|Primary}}}
| Opaque = var(--brown-opaque)
| Primary = var(--brown-primary)
| Secondary = var(--brown-secondary)
| Light = var(--brown-light)
| Transparent = var(--brown-transparent)
}}
| Lavaland =
{{#switch: {{{2|Primary}}}
| Opaque = var(--lavaland-opaque)
| Primary = var(--lavaland-primary)
| Secondary = var(--lavaland-secondary)
| Light = var(--lavaland-light)
| Transparent = var(--lavaland-transparent)
}}
| Cultist =
{{#switch: {{{2|Primary}}}
| Opaque = var(--cult-opaque)
| Primary = var(--cult-primary)
| Secondary = var(--cult-secondary)
| Light = var(--cult-light)
| Transparent = var(--cult-transparent)
}}
| Ratvar =
{{#switch: {{{2|Primary}}}
| Opaque = var(--ratvar-opaque)
| Primary = var(--ratvar-primary)
| Secondary = var(--ratvar-secondary)
| Light = var(--ratvar-light)
| Transparent = var(--ratvar-transparent)
}}
| Wizard =
{{#switch: {{{2|Primary}}}
| Opaque = var(--wizard-opaque)
| Primary = var(--wizard-primary)
| Secondary = var(--wizard-secondary)
| Light = var(--wizard-light)
| Transparent = var(--wizard-transparent)
}}
| Black =
{{#switch: {{{2|Primary}}}
| Opaque = var(--black-opaque)
| Primary = var(--black-primary)
| Secondary = var(--black-secondary)
| Light = var(--black-light)
| Transparent = var(--black-transparent)
}}
| Gray =
{{#switch: {{{2|Primary}}}
| Opaque = var(--gray-opaque)
| Primary = var(--gray-primary)
| Secondary = var(--gray-secondary)
| Light = var(--gray-light)
| Transparent = var(--gray-transparent)
}}
|
{{#switch: {{{2|Primary}}}
| Opaque = hsl(var(--primary-hue), 40%, var(--primary-lightness))
| Primary = hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75)
| Secondary = hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5)
| Light = hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25)
| Transparent = hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1)
}}
}}</includeonly><noinclude>

= Что это? =
Это гибкая палитра цветов, сделанная специально для WIKI. <br>
В ней достаточно цветов, дабы покрыть необходимость срать хардкоженными цветами.
<br>
=== В чём её преимущество? ===
В том что она, при использовании, вставляет CSS переменную. <br>
Например, когда вы пишите <nowiki>{{ColorPalette|Cyan|Primary}}</nowiki><br>
Оно возвращает: {{ColorPalette|Cyan|Primary}}
Это очень удобно использовать в шаблонах, так как в конечном итоге, достаточно будет лишь вписать название цвета. 
<br>
=== С какой целью это сделано? === 
В первую очередь ради возможности сделать 2 темы: светлую и тёмную. <br>
Во вторую очередь, ради удобства редакторов. Вам не нужно вручную подбирать цвета каждый раз, как используете какой-либо шаблон.<br>
Все цвета уже сделаны за вас, и вам достаточно лишь выбрать нужный, и использовать его! Всё просто, не так ли?

<b>НАСТОЯТЕЛЬНО</b> рекомендуется использовать <b>ТОЛЬКО</b> шаблон ColorPalette или [[ColorPaletteStyles]], если вы хотите разукрасить свой шаблон. <br>
В противном случае, он может быть нечитабельным на противоположной теме.
<br>
=== Как использовать? ===
Если вы создаёте шаблон, то в стилях, просто вызываете шаблон палитры, вот пример:<br>
background-color: <nowiki>{{ColorPalette|{{{Color}}}|Primary}}</nowiki>;
<br><br>
Таким образом, при использовании шаблона, вам достаточно ввести в поле <b>Color</b> нужный цвет, примерно вот так:<br>
<code><nowiki>{| Имя шаблона | Text = Тестовый текст | Color = Security |}</nowiki></code>
<br><br>
У каждого цвета имеется несколько вариация, они же оттенки:<br><br>
<b>Opaque</b> - Непрозрачный. Используется в основном у обводки (border)<br>
<b>Primary</b> - Слегка прозрачный. Основной цвет на котором текст<br>
<b>Secondary</b> - Дополнительный цвет, чуть прозрачнее чем основной<br>
<b>Light</b> - Прозрачный цвет, можно использовать в качестве дополнительного фона<br>
<b>Transparent</b> - Самый прозрачный из имеющихся, если быть конкретнее, то он прозрачен на 90%. Идеален для разбавления фона<br>
<br>

Использовать в стилях достаточно легко. Пример:
<code>background-color: {{ColorPalette|Security|Primary}}</code><br>
Однако, если вы хотите покрасить текст, рекомендуется использовать CSS переменные. Их список вы найдёте нажав F12 и прокрутив в самый низ. Пример:<br>
<code>color: var(--color-white);</code><br>
<code>color: var(--color-olive);</code>
<br><br>
Таким же образом, можете использовать вариации цветов, просто впишите нужную вместо <b>Primary</b><br>
Выбирайте вариации цвета для шаблона с умом! Ваш шаблон не должен быть вырвиглазным на одной теме, но нормальным на другой.<br>
Если же не получается сделать с имеющимися вариациями так, чтобы шаблон хорошо смотрелся на обоих темах, обратитесь в дискорд, скорее всего требуется точечная настройка переменной цвета для определённой темы.
<br>

= Имеющиеся цвета =
Ниже перечислен список всех имеющихся на данный момент цветов, со всеми возможными вариациями.<br>
Цвет текста во всех динамический, зависящий от выбранной темы, так что не удивляйтесь чёрному тексту на чёрном фоне.<br>
Вы можете попросить в дискорде добавить дополнительный уникальный оттенок, если вам его не хватает.<br>

<div style="display: flex; flex-wrap: wrap; text-align: center;">
{{ColorPalettePreview|Civilian}}
{{ColorPalettePreview|Medical}}
{{ColorPalettePreview|Supply}}
{{ColorPalettePreview|Science}}
{{ColorPalettePreview|Engineering}}
{{ColorPalettePreview|Security}}
{{ColorPalettePreview|Antag}}
{{ColorPalettePreview|Legal}}
{{ColorPalettePreview|Command}}
{{ColorPalettePreview|Synthetic}}
{{ColorPalettePreview|CentCom}}
{{ColorPalettePreview|Special}}
{{ColorPalettePreview|Cyan}}
{{ColorPalettePreview|Blue}}
{{ColorPalettePreview|Green}}
{{ColorPalettePreview|Yellow}}
{{ColorPalettePreview|Red}}
{{ColorPalettePreview|Pink}}
{{ColorPalettePreview|Brown}}
{{ColorPalettePreview|Lavaland}}
{{ColorPalettePreview|Cultist}}
{{ColorPalettePreview|Ratvar}}
{{ColorPalettePreview|Wizard}}
{{ColorPalettePreview|Black}}
{{ColorPalettePreview|Gray}}
{{ColorPalettePreview}}
</div>