pbstyles
Готовые цвета, типографика, размеры и темы для CSS, LESS, SCSS и Tailwind CSS 4 из дизайн-токенов в формате DTCG.
@prosazhin/pbstyles — базовые стили для быстрой сборки интерфейса. Пакет содержит типографику, палитру, семантические цвета, размеры, контейнеры, брейкпоинты, скругления, непрозрачность и тени. Те же токены поставляются в форматах CSS, LESS, SCSS и как тема Tailwind CSS 4.
Ресурсы: GitHub · npm · Figma Community · Behance · Дизайн-система.
Установка
npm install @prosazhin/pbstylesПакет содержит готовые файлы. Для использования опубликованных стилей запуск генераторов не нужен.
Tailwind CSS 4
@import 'tailwindcss';
@import '@prosazhin/pbstyles/styles/tailwind/theme.css';После импорта доступны утилиты на основе токенов: цвета bg-basic-0, text-basic-400, text-primary-400, текстовые стили text-h64, text-t16, а также размеры, скругления и тени из темы. Этот сайт подключает пакет именно так. Импорт работает и с префиксом Tailwind, например @import 'tailwindcss' prefix(tw);.
CSS, LESS и SCSS
@import '@prosazhin/pbstyles/styles/css';@import '@prosazhin/pbstyles/styles/less';@import '@prosazhin/pbstyles/styles/scss';В LESS и SCSS есть миксины текстовых стилей, брейкпоинтов и анимаций:
.title {
@include h64;
}
@include mobile {
.sidebar {
display: none;
}
}Форматы
| Формат | Импорт | Содержимое |
|---|---|---|
| CSS | @prosazhin/pbstyles/styles/css | CSS-переменные и семантическая тема. |
| LESS | @prosazhin/pbstyles/styles/less | Переменные и миксины. |
| SCSS | @prosazhin/pbstyles/styles/scss | Переменные и миксины. |
| Tailwind 4 | @prosazhin/pbstyles/styles/tailwind/theme.css | Тема, утилиты через токены и светлые/тёмные значения. |
Что входит
| Категория | CSS | LESS | SCSS | Tailwind 4 |
|---|---|---|---|---|
| Типографика, цвета, размеры, контейнеры, брейкпоинты, границы, скругления, непрозрачность, тени | ✓ | ✓ | ✓ | ✓ |
| Колонки | ✓ | ✓ | ✓ | — |
| Миксины анимации, типографики и брейкпоинтов | — | ✓ | ✓ | ✓ |
Обычный CSS содержит переменные без миксинов. В LESS и SCSS доступны переменные и миксины; в Tailwind 4 они становятся частью темы и утилит.
Разделы
Темы
Светлая и тёмная тема, data-theme на любом элементе, переопределение цветов.
Токены DTCG
Как устроены исходные токены, как они превращаются в стили и что изменилось в 1.4.
Версия 1.4
С версии 1.4 исходные токены pbstyles записаны в стандарте DTCG 2025.10. Сгенерированные стили не изменились: обновление с 1.3 не требует правок в проекте. Подробнее — в разделе Токены DTCG.
Как создаётся пакет
Готовые CSS/LESS/SCSS-файлы генерируются mixin-dictionary, а тема Tailwind CSS — tailwind-dictionary из токенов репозитория pbstyles. CI проверяет, что опубликованные стили совпадают с результатом сборки токенов.