Версия от 04:14, 31 мая 2025

Что это?

Вариант шаблона ColorPalette но для использования вместе с классами.
Он в отличии от вышеупомянутого шаблона, возвращает сразу все цвета в виде CSS переменных, что позволяет более тонко использовать цвета но уже в CSS.

В чём её преимущество?

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

Например, вы делаете новый комплексный шаблон, и если вы не хотите захламлять HTML кучей инлайн стилей, достаточно использовать этот шаблон 1 раз и весь шаблон будет иметь доступ к необходимым цветам!
Использование {{ColorPalette|Civilian|example}}
Вернёт следующий код:

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

Эти CSS переменные вы увидете в DevTools которые открываются по нажатию кнопки F12, когда выберете элемент на котором вы использовали шаблон, а так же на всех элементах внутри него.
Благодаря этому, вы можете сохранять код шаблона в чистоте и читабельном состоянии, так как вся стилизация может делаться в styles.css шаблона (предпочтительно), либо в MediaWiki:Common.css

С какой целью это сделано?

Исходя из всего вышеописанного, вы уже могли сделать некоторые выводи, но подытожим.
Этот шаблон позволяет:

Держать вёрстку шаблона в чистоте
Тонко стилизовать шаблон с помощью TemplateStyles, так как все цвета доступны в виде переменных
Сохранять преимущества ColorPalette, позволяя делать шаблоны с возможностью смены цвета и сохраняя совместимость со светлой темой

Как использовать?

При создании шаблона, просто используйте этот шаблон прямо внутри обёртки, внутри которой находятся остальные элементы:

<div class="wrapper" {{ColorPaletteStyles|Civilian|example}}>
  <span class="example-text">Обычный текст</span>
</div>

Далее, давайте представим что мы создаём шаблон уведомления, он находится на условной странице Шаблон:Notice
Нам нужно создать страницу Шаблон:Notice/styles.css, это ОБЯЗАТЕЛЬНО
После того как вы это сделаете, возвращаемся на страницу шаблона и делаем как на примере ниже:

<templatestyles src="Notice/styles.css" />
<div class="notice" {{ColorPaletteStyles|Cargo|notice}}>
  <span class="notice-text">Обычный текст</span>
</div>

Что мы только что сделали? Мы включили в наш шаблон, ранее созданный CSS файл со стилями для него.
Теперь же, на странице стилей мы можем... стилизовать наш шаблон:

.notice {
  background-color: var(--notice-primary);
  border: 1px solid var(--notice-light);
}

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

Имеющиеся цвета

См. ColorPalette

@@ Строка 176: / Строка 176: @@
 "
 | #default = style="
-   --{{{2|template}}}-opaque: hsl(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%));
+   --{{{2|template}}}-opaque: hsl(var(--primary-hue), 40%, var(--primary-lightness));
-   --{{{2|template}}}-primary: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.75);
+   --{{{2|template}}}-primary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.75);
-   --{{{2|template}}}-secondary: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.5);
+   --{{{2|template}}}-secondary: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.5);
-   --{{{2|template}}}-light: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.25);
+   --{{{2|template}}}-light: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.25);
-   --{{{2|template}}}-transparent: hsla(var(--primary-hue), calc(var(--palette-saturation) + 20%), calc(var(--palette-lightness) - 17.5%), 0.1);
+   --{{{2|template}}}-transparent: hsla(var(--primary-hue), 40%, var(--primary-lightness), 0.1);
 "
 }}</includeonly><noinclude>