Всем привет!

Можно больше кастомизации для разработчиков? Можно нормальные CSS-классы, а не рандомные стайледы? Можно фокусы на компоненты? Можно вас из Феникса тянуть?

Можно.

Мы всё переписали и представляем вашему вниманию Дизайн-систему Ростелекома 2-го поколения (Атомаро).

Это полностью новая версия дизайн-системы на новой архитектуре. Дизайн всех компонентов описан дизайн-токенами (СSS-переменными). Теперь вы можете легко изменить внешний вид компонентов, если дизайнер закастомил. Или создать свою тему и полностью поменять дизайн.

Что еще изменилось?

- Обновился визуальный язык и UI, дополнились цветовые палитры и типографика. Автоматический тёмный режим для всего интерфейса (при корректном применении дизайн-токенов в проекте)
- Стили теперь отдельно. Единый bundle.css и один источник правды для наших ДС на разных фреймворках
- Многие компоненты переработали с нуля, другие сильно отрефачили. Добавили больше областей в компонентах, в которые можно прокидывать свою вёрстку (рендер-функции)
- Переработали API, стандартизировали пропсы для всех компонентов
- Возможность пересобирать, дополнять стили (variant, size, breakpoints) с помощью собственной cli (скоро)
- Начали прорабатывать доступность — добавили для всех компонентов состояние focus

Где посмотреть

- На сайте design.rt.ru появилась переключалка между поколениями, дизайн-гайды для 2-го поколения обновлены
- Сторибук 2-го поколения с инструкциями по подключению React
- Дизайн-библиотека 2-го поколения в Figma

Как перейти на второе поколение? Что будет с первым?

Бесшовный переход невозможен из-за разницы в архитектурах. Мы рекомендуем новые проекты начинать со вторым поколением. Небольшие текущие проекты можно отрефакторить под второе поколение.

Большие текущие проекты, когда нет ресурса на рефакторинг, лучше оставить на первом поколении системы. Первое поколение будет поддерживаться, обнаруженные баги будут фикситься.

Инструмент и инструкции к нему продолжаем совершенствовать каждый день. Будем рады любой обратной связи (баги, пожелания и т.д.). Наша цель создавать и совершенствовать инструменты для разработчиков и дизайнеров, сближая их 🫶

p.s. библиотека на Vue.js на подходе!