Створіть свою систему дизайну, частина 3: Кольори

У цій статті ми розглянемо, як встановити кольорову систему в CSS та які найкращі практики для того, щоб система була простою у використанні та обслуговуванні.

Ця стаття є частиною серії про системи дизайну, натхненну нашою бібліотекою веб-компонентів. Бібліотека спирається на міцну систему глобальних CSS. Отож це ми ділимося тим, що ми дізналися, встановлюючи глобальний стиль нашої бібліотеки!

Серія статей:
- Частина 1: Типографія
- Частина 2: Сітка та макет
- Частина 3: Кольори
- Частина 4: Пробіли
- Частина 5: Ікони
- Частина 6: Кнопки

Ми запустили редактор кольорів! Інструмент веб-дизайну, який генерує кольорову палітру та теми, сумісні з CodyHouse Framework.

Змінні кольорів 101

На відміну від інших глобальних CSS, створення кольорової системи становить 10% про кодування та 90% про семантику. Працюючи над файлом _colors.scss, ви хочете пам’ятати про наступні цілі:

  1. Змінні кольорів повинні легко запам'ятовуватися → Ви не хочете перевіряти глобальний файл у будь-який час, коли вам потрібно вибрати колір.
  2. Оновлення системи повинно бути легко → Ви будете додавати, видаляти та перейменовувати кольори. Переконайтеся, що зробити це не складно.
  3. Система повинна включати лише найважливіші кольори → ми чули її стільки разів ... але ми завжди маємо більше кольорів, ніж нам потрібно! Справжнім ключем успіху дизайнерської системи є видалення всього необхідного (кольори включені).

Семантичний та декларативний кольори

Що стосується встановлення змінних кольорів, то існує два основних підходи: семантичний та декларативний кольори.

Семантичний підхід виглядає так:

Ось приклад декларативного підходу:

Жодне з них не є помилковим. Вибір того, що відповідає вашим потребам, залежить від такої кількості факторів (наприклад, розмір проекту, релевантність кольорів бренду тощо).

Працюючи над файлом _colors.scss нашої системи, я повинен був врахувати, що користувачі збиралися його редагувати (100%). Це означає, що навіть якщо декларативний підхід був найпростішим у використанні, я повинен був змішати його з семантичним підходом, щоб отримати систему, яку також було легко обслуговувати.

Основна колірна палітра

Крок номер один оголосив мінімальну кількість кольорів, необхідних для створення веб-компонентів. Загалом, основна палітра кольорів складається з:

  1. Основний / основний колір → використовується для посилань, колір тла кнопки тощо. Загалом, це основний колір із закликом до дії.
  2. Колір акценту → використовується для виділення чогось важливого на сторінці. Це має бути не варіацією основного кольору, а доповнюючим кольором.
  3. Шкала нейтральних кольорів → Це, як правило, масштаб сірого тону, який слід використовувати для текстових елементів, тонких елементів, меж тощо.
  4. Кольори зворотнього зв’язку → успіх, помилка, попередження.

Деякі з цих кольорів потребують варіації (темніший / світліший варіант), який часто використовується для виділення інтерактивності (наприклад,: курсор /: активні стани).

У CSS це означає:

* Примітка: ми використовуємо плагін postcss-color-mod-функція для перекладу кольорових функцій у код RGBA, сумісний із усіма браузерами.

Розріз вище представлений кольоровою палітрою: усі кольори, використані в проекті.

Варіації первинного та акцентного кольорів генеруються за допомогою кольорових функцій. Цей підхід стане у нагоді, якщо у вас є файл demo.html (а ми це робимо в наших рамках), щоб ви могли налаштовувати значення функцій, поки ви не будете задоволені отриманими кольорами. Відтінки (або нейтральні) кольори створюються за допомогою chroma.js. У цьому випадку використання функцій було не ідеальним, оскільки у вас зазвичай два протилежних кольори (чорний і білий), і вам потрібно генерувати шкалу значень на основі цих двох кольорів.

Додавання в суміш смислових кольорів

Після того, як палітра кольорів буде готова, ми можемо додати смислові кольори. Створення смислових кольорів не означає збільшення кількості кольорів, а розподіл кольорів за допомогою семантичних посилань.

Чому я вважаю, що це хороший підхід

Перш за все, ця система спирається на два основні кольори: основний та акцентний кольори. Це означає, що коли вам потрібно використовувати кольорові змінні, вам не буде складно згадати, що представляють собою ці змінні (навіть якщо ви не використовуєте декларативних імен, таких як "синій" та "червоний").

Вашій системі може знадобитися включити більше кольорів (наприклад, вторинний колір). Ви все ще маєте справу лише з трьома кольорами. Керувати системою на основі 10+ основних кольорів буде важко незалежно від підходу, який ви використовуєте, тому ви можете розглянути можливість її спрощення.

Кольори сірого кольору використовують інший режим іменування: чим вище число в кінці змінної, тим темніше колір.
Цей підхід стає корисним, коли ви не впевнені, який нейтральний колір ви хочете застосувати. Якщо сірий-2 виглядає занадто тонко, можна спробувати сірий-3. Можливо, ви помітили, що відсутні деякі відтінки (наприклад, сірий-5). У нашому випадку вони не були важливими (ми ніколи не використовували їх під час створення веб-компонентів), тому ми видалили їх із кольорової палітри.

Семантичні кольори додаються до суміші з трьох основних причин:

  1. Файл _colors.scss стає джерелом істини в будь-який час, коли вам потрібно змінити колір. Чи вважаєте ви, що елементи заголовка тексту повинні бути темнішими? Відкрийте файл _colors.scss та відредагуйте змінну заголовка кольорового тексту.
  2. Наприклад, якщо ви визначаєте межу кольорів, вам не потрібно буде шукати сірий колір, який ви використовували в інших компонентах при наступному створенні елемента рамки. Це ж поняття стосується багатьох елементів, а не лише кордонів.
  3. Це робить його шматок пирога для створення та підтримки різних тем.

Темінг

Як тільки ми зможемо використовувати змінні CSS, не покладаючись на плагіни або polyfill, створення кольорових тем буде дуже простим *! Це означає, що ми не можемо створювати теми сьогодні? Ні, ми можемо. У нас є два варіанти.

* у наших рамках ми використовуємо плагін postcss-css-змінних для компіляції змінних CSS. Наразі він не підтримує оновлення змінних у класі CSS.

Варіант 1 - це оновлення змінних CSS у будь-якому випадку. У веб-переглядачах, які не підтримують змінні, буде показана тема кольорів за замовчуванням. Це не проблема, якщо вміст доступний.

Наприклад, у вас є тематика кольорів за замовчуванням → білий фон і чорний колір тексту, а. Темно-темний → чорний фон і білий колір тексту. Потім ви створюєте два компоненти, один із темою за замовчуванням, а другий із .dark-topic. Якщо наявність обох компонентів із темою за замовчуванням не впливає на користувальницький досвід, то ви можете розглянути .dark-тему як вдосконалення (необов’язково). У цьому випадку має сенс оновити змінні для створення різних тем, навіть якщо вони не підтримуються скрізь.

Ось як ви створюєте нову тему, оновлюючи деякі ключові змінні CSS:

Мені подобається це рішення, оскільки воно абстрагує корекцію кольорів і дозволяє зберігати свої кольорові теми в одному файлі. Роблячи це, ми можемо потенційно змінити стан кожного компонента (від теми-a до теми-b), просто застосувавши клас CSS.

Варіант 2 орієнтований на всі елементи, на зовнішність яких впливає тема. Перевага цього методу полягає в тому, що він підтримується всіма браузерами. Однак, це не так просто в обслуговуванні порівняно з тими, що базуються повністю на змінних CSS.

Ось приклад варіанту 2 дії:

Тепер ви знаєте, як ми плануємо обробляти кольори в наших рамках! Якщо у вас є відгуки / пропозиції, повідомте нас у коментарі!

Сподіваюся, вам сподобалася стаття! Щоб дізнатися більше про саморобки веб-дизайну, слідкуйте за нами тут на Medium або Twitter.