Как организовать общий набор CSS цветов в Rails + Vue.js?

Question

[Дмитрий]

Создаю приложение на Ruby on Rails где публичная часть страниц реализована через стандартный рендер (slim), а админская часть с помощью Vue. Требуется иметь общий набор стандартных фирменных цветов, общих для публичной части и для внутренней.

Сейчас я использую Tailwindcss с кастомными цветами, и это точно не идеальное решение.

У меня прописаны цвета в tailwind.js:

colors: {
  white: 'hsl(200, 2%, 90%)',
  'white-50': 'hsla(200, 2%, 90%, 0.5)',
  'white-20': 'hsla(200, 2%, 90%, 0.2)',
  ...
}

А так же продублированы в colors.scss с использованием библиотеки "postcss-color-adjustment":

$white: hsl(200, 2%, 90%);
$white-50: color($white alpha(.5));
$white-20: color($white alpha(.2));
$white-05: color($white alpha(.05));

В основном использую цвета из Tailwind в общих scss-файлах и во Vue.
В scss так:

label {
  @apply uppercase text-white;
}

И так же во Vue:

<style style="scss" scoped>
  .panel {
    @apply border border-white;
  }
</style>

Но иногда цвета требуются как запчасть для градиентов. И тогда использую переменные из colors.scss:

$red-grad-x-hover: linear-gradient(to right, color($orange brighten(10%)), color($red brighten(10%)));

В идеале хотелось бы иметь библиотеку зависимых цветов, которые можно было легко менять скопом. Поменял "white" и поменялись все "white-50", "white-20" и т.д. Чтобы второй цвет зависел от первого через функцию цвета (как в "postcss-color-adjustment"). Лучше всего коллекцию SCSS-переменных. Чтобы можно было гибко их переиспользовать в градиентах, даже во Vue.
В целом это возможно, но тогда надо не забывать импортировать такой scss-файл в каждый *.vue файл... Что кажется не очень, но может я просто привиредничаю?))

Подскажите, куда смотреть, что может стоит попробовать? Хотелось бы продолжить работать с Tailwind, но получается как-то некрасиво с цветами.

Заранее благодарю за любой коментарий!

Answer 1

[Alex]

Если вам не нужно поддерживать IE11, Тогда вы можете использовать CSS переменные. Примерно так:

:root {
  --white-color: 200, 2%, 90%;
  --white-alpha: 100%;
  --white: hsla(var(--white-color), var(--white-alpha));
}

.component {
  background: var(--white);  
}

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

Comments

[Дмитрий]

Думал над таким вариантом, но поскольку еще не работал с css-переменными — сомневался.

Это реально рабочая история? Никаких проблем с поддержкой, производительностью и удобством использования?

[Alex]

Дмитрий, Всё зависит от вашего стека поддерживаемых браузеров.
https://caniuse.com/#feat=css-variables

На моих проектах уже используется в проде для компонентов, где есть один основной цвет и внутри него несколько вариаций этого цвета.

[Дмитрий]

Alex, я пока не определился со стеком. Планировал что сначала запущу, посмотрю кто как заходит — если будет IE < 5% точно исключу.

С одной стороны эти переменные это кажется универсально и удобно для быстрой смены цветовых схем, а с другой, зачем придумали такой некрасивый синтаксис?))

Мне переменные скорее всего не подходят, потому что придется делать двойную работу — прописывать переменные в css-файле и соответсвующие классы в конфиге Tailwind. Ну либо писать плагин, который бы классы Тайлвинда преобразовывать в переменные... Надо подумать.

[Nikola Okonesh]

Не проще ли tailwindcss + postcss использовать?

[Дмитрий]

Nikola Okonesh, так и делаю в итоге. Зависимые цвета создаю в отдельном файле с помощью js библиотеки "color". Подключаю к конфигу в tailwind.js. Для градиентов еще дописал небольшой плагин в Тайлвинд.