Релиз Berry CSS 5.3

Новая версия Berry CSS 5.3 содержит минимум изменений. Они в основном затрагивают поддержку совместимости с новыми версиями Dart Sass. Sass скоро будет полностью модульным, а значит все его функции перестанут быть доступны вне модулей.

Скажем раньше я использовал map-get, сейчас это map.get. Или было percentage сейчас это math.percentage. В общем я внёс изменения так, чтобы Sass больше не показывал предупреждения об устаревшем синтаксисе.

Новый модуль spoiler

Это два класса, которые делают текст видимым-невидимым по клику. Очень похоже на реализацию в телеграмме, когда нужно скрыть часть текста. Выглядит так:

text spoiler text text

text spoiler text text text

text spoiler text text

text <span class="spoiler" onclick="this.classList.toggle('spoiler-show')">spoiler text</span> text

text <span class="spoiler animation-pulse" onclick="this.classList.toggle('spoiler-show')">spoiler text</span> text text

Для изменения фона используются две css-переменные:

:root {
    --spoiler-bg: var(--primary200);
    --spoiler-bg-dark: var(--primary700);
    
    <!-- giphy.com -->
    --spoiler-bg: url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGxtM3N0NGlzZmhtMTJneDBuODExZDBhc2dwZzN5MGY0bjB5eTlpOCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l41YplTbvZal0CdUc/giphy.gif');
}

Само переключение через onclick — я не стал делать обёртку, поскольку это создаст лишнюю зависимость. Если кому нужно, то это всего пара строк js-кода.

Маркеры списков

Добавил новые маркеры списков. Важный момент в том, что можно создавать маркер не только для UL, но и для LI:

<ul>
<li class="marker-none">marker-none</li>
<li class="marker-hyphen">marker-hyphen</li>
<li class="marker-square">marker-square</li>
<li class="marker-disc">marker-disc</li>
<li class="marker-circle">marker-circle</li>
<li class="marker-decimal">marker-decimal</li>
<li class="marker-decimal-leading-zero">marker-decimal-leading-zero</li>
<li class="marker-lower-alpha">marker-lower-alpha</li>
<li class="marker-upper-alpha">marker-upper-alpha</li>
<li class="marker-lower-greek">marker-lower-greek</li>
<li class="marker-lower-roman">marker-lower-roman</li>
<li class="marker-upper-roman">marker-upper-roman</li>
<li class="marker-lower-latin">marker-lower-latin</li>
<li class="marker-upper-latin">marker-upper-latin</li>
<li class="marker-disclosure-open">marker-disclosure-open</li>
<li class="marker-disclosure-closed">marker-disclosure-closed</li>
</ul>

• marker-none
• marker-hyphen
• marker-square
• marker-disc
• marker-circle
• marker-decimal
• marker-decimal-leading-zero
• marker-lower-alpha
• marker-upper-alpha
• marker-lower-greek
• marker-lower-roman
• marker-upper-roman
• marker-lower-latin
• marker-upper-latin
• marker-disclosure-open
• marker-disclosure-closed

Доработал переносы колонок

Теперь классы .break-inside-XXX распространяются не только на элемент ячейки, но и на вложенный LI. Это позволяет указать его только у контейнера.

.break-inside-auto li, 
.break-inside-auto {
    break-inside: auto;
}

и т.д.

Прочие изменения

Остальное — мелкие изменения, например я добавил новые значения для ширины, высоты, размеров текстов и т.п. Все они указываются в конфигурации, просто теперь будут дефолтными. 👍