Выпустил PostCSS-плагин, чтобы можно было добавлять в цвета полупрозрачность (а не заводить кучу CSS-переменных вида --accent-50, --accent-30).
https://github.com/postcss/postcss-relative-opacity
Как он работает ↓
Выпустил PostCSS-плагин, чтобы можно было добавлять в цвета полупрозрачность (а не заводить кучу CSS-переменных вида --accent-50, --accent-30). https://github.com/postcss/postcss-relative-opacity Как он работает ↓ 3 comments
Плагин полифилит Relative Color через color-mix(). Эта CSS-функция позволяет смешать несколько цветов. Тут мы смешиваем наш цвет с transparent до нужной пропорции. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix Проблема в том, что Фаерфокс не поддерживает Relative Color — на добавление поддержки может потребоваться месяцы или год. А вот color-mix() он уже поддерживает. Поэтому с полифилом Relative Color можно будет использовать уже сегодня — но только для opacity. |
Синтаксис oklch(from …) — это не моя придумка, а Relative Color Syntax. Новая спецификация, чтобы менять цвета прямо в CSS.
https://www.w3.org/TR/css-color-5/#relative-color
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl#extra-color-modification-with-oklch
Этот плагин — частичный полифил, он поддерживает только изменение полупрозрачности.