BlockBuilder (Vue/React) стилизует встроенный UI редактора через CSS custom properties на .bb-app. Можно переключать пресеты, переопределять токены и локализовать строки — без форка компонентов.
BlockBuilderComponent рендерит корневой контейнер .bb-app. Токены темы применяются как inline style через resolveThemeVars(theme, themeVars) и используются в SCSS пакета через var(--bb-*).
На корень также ставится data-bb-theme="default" или data-bb-theme="dark" для селекторов на стороне приложения. Подключите стили: @mushket-co/block-builder/index.esm.css.
theme, themeVars, locale, uiStrings — props BlockBuilderComponent (Vue/React), а не IBlockBuilderOptions.UI_THEME_COLORS_DEFAULT → тёмный пресет (если theme="dark") → ваши переопределения в themeVars.Весь встроенный chrome редактора читает токены --bb-*. Типичные зоны:
Передайте theme="dark" для тёмной палитры пакета (UI_THEME_COLORS_DARK). Без theme — светлая палитра по умолчанию.
Частичная карта токенов --bb-*. Переопределяются только переданные ключи; остальные берутся из default или dark.
Переопределение переменных в своём stylesheet — удобно для статичного брендинга или нескольких редакторов с одним классом темы.
Prop theme — тип TUiTheme: не указывать или default (светлая палитра) или dark. CSS variables записываются на корневой .bb-app.
Тёмный пресет переопределяет brand, surface, neutrals, overlays и danger/warning фоны — не все токены. Для полного тёмного бренда дополните themeVars.
В headless core без UI-рендера theme и locale не влияют на поведение.
Тип IUiThemeVars — частичная запись { '--bb-color-primary'?: string, ... }. Можно переопределить любой токен из справочника ниже.
Из @mushket-co/block-builder/vue или /react: UI_THEME_COLORS_DEFAULT, UI_THEME_COLORS_DARK, resolveThemeVars, IUiThemeVars, IUiThemeColorKey, TUiTheme.
--bb-color-primary, --bb-color-primary-dark, --bb-color-surface, --bb-color-neutral-8 (основной текст).--bb-form-control-height, --bb-form-control-radius, --bb-font-family.--bb-color-surface как rgba(...) и backdrop-filter в CSS приложения на панелях вокруг редактора.--bb-color-primary-alpha-* — они задействованы в кнопках и вкладках.Значения по умолчанию — для светлой темы (theme не указан). Dark preset заменяет подмножество — остальное через themeVars.
Основной акцент — кнопки, ссылки, активные состояния, focus ring.
| Токен | Где используется |
|---|---|
--bb-color-primary | Primary-кнопки, активные вкладки, ссылки, focus outline |
--bb-color-primary-dark | Hover и pressed у кнопок |
--bb-color-primary-light | Фон выделения, подсветка dropzone загрузки |
--bb-color-primary-alpha-10 | Лёгкий hover-фон |
--bb-color-primary-alpha-15 | Слегка тонированные панели |
--bb-color-primary-alpha-20 | Focus ring, тень индикатора вкладки |
--bb-color-primary-alpha-30 | Более насыщенные акцентные фоны |
Фоны, границы, иерархия текста.
| Токен | Где используется |
|---|---|
--bb-color-white | Текст на тёмных оверлеях |
--bb-color-surface | Тело модалки, список dropdown, карточки |
--bb-color-black | Редкие ссылки на чёрный |
--bb-color-neutral-1 | Фон секций, заголовки таблиц |
--bb-color-neutral-2 | Границы, разделители, disabled фон |
--bb-color-neutral-3 | Границы инпутов, пунктир dropzone |
--bb-color-neutral-4 | Усиленные границы |
--bb-color-neutral-5 | Приглушённый текст, placeholder |
--bb-color-neutral-6 | Вторичные подписи, hints |
--bb-color-neutral-7 | Вторичный body-текст |
--bb-color-neutral-8 | Основной текст, заголовки |
--bb-color-neutral-8-rgb | RGB-компоненты для rgba() в SCSS |
--bb-color-neutral-alpha-30 | Disabled оверлеи |
--bb-color-neutral-alpha-50 | Полупрозрачные маски |
Вторичные действия и тёмные акценты.
| Токен | Где используется |
|---|---|
--bb-color-dark | Тёмные UI-акценты |
--bb-color-dark-alpha-20 | Тёмные полупрозрачные оверлеи |
--bb-color-secondary | Secondary-кнопки |
--bb-color-secondary-dark | Hover secondary-кнопок |
Валидация, успех, предупреждения.
| Токен | Где используется |
|---|---|
--bb-color-danger | Текст ошибок, деструктивные действия |
--bb-color-danger-dark | Hover danger-кнопок |
--bb-color-danger-light | Фон поля с ошибкой |
--bb-color-danger-border | Граница поля с ошибкой |
--bb-color-danger-bg | Фон сообщения об ошибке |
--bb-color-danger-alpha-10 | Лёгкая подсветка ошибки |
--bb-color-success | Индикаторы успеха |
--bb-color-success-dark | Hover success |
--bb-color-success-alpha-30 | Свечение success |
--bb-color-success-alpha-40 | Градиентные success-акценты |
--bb-color-warning | Иконки предупреждений |
--bb-color-warning-border | Границы warning |
--bb-color-warning-bg | Баннеры warning |
--bb-color-warning-text | Текст warning |
--bb-color-info | Информационные акценты |
Подложки модалок и превью изображений.
| Токен | Где используется |
|---|---|
--bb-color-overlay | Фон модалки |
--bb-color-overlay-medium | Оверлей превью изображения |
--bb-color-overlay-dark | Плотный scrim при hover |
--bb-color-overlay-alpha-10 | Лёгкие inset-тени, фон вкладок |
Code blocks и градиентные акценты.
| Токен | Где используется |
|---|---|
--bb-color-code-1 | Фон code block |
--bb-color-code-2 | Текст code block |
--bb-color-gradient-1 | Начало градиента (декор) |
--bb-color-gradient-2 | Конец градиента |
--bb-color-gradient-success-1 | Начало success-градиента |
--bb-color-gradient-success-2 | Конец success-градиента |
Внутренние gap в тулбарах, формах, модалках.
| Токен | Где используется |
|---|---|
--bb-spacing-xs | Плотные gap (padding иконок) |
--bb-spacing-sm | Компактные отступы |
--bb-spacing-md | Стандартный gap между контролами |
--bb-spacing-lg | Отступы секций |
--bb-spacing-xl | Padding секций модалки |
--bb-spacing-2xl | Крупные gap между секциями |
Углы карточек, инпутов, модалок.
| Токен | Где используется |
|---|---|
--bb-radius-sm | Мелкие chips, теги |
--bb-radius-md | Инпуты, кнопки, dropdown |
--bb-radius-lg | Модалки, крупные карточки |
Шрифт и шкала размеров UI редактора.
| Токен | Где используется |
|---|---|
--bb-font-family | Весь текст UI редактора |
--bb-font-size-xs | Ошибки, badges |
--bb-font-size-sm | Лейблы, кнопки, инпуты |
--bb-font-size-md | Body в модалках |
--bb-font-size-lg | Заголовки секций |
--bb-font-size-xl | Заголовки модалок |
Elevation для dropdown, модалок, primary-кнопок.
| Токен | Где используется |
|---|---|
--bb-shadow-sm | Лёгкое elevation |
--bb-shadow-md | Dropdown, плавающие панели |
--bb-shadow-lg | Модалки |
--bb-shadow-sm-light | Светлые карточки |
--bb-shadow-primary | Свечение primary-кнопки |
Длительность transition для hover/focus.
| Токен | Где используется |
|---|---|
--bb-transition-fast | Быстрый feedback (checkbox, иконка) |
--bb-transition-base | Стандартный hover |
--bb-transition-slow | Анимации модалок и панелей |
Слои dropdown, модалок, tooltip.
| Токен | Где используется |
|---|---|
--bb-z-index-dropdown | Панели select/dropdown |
--bb-z-index-modal | Модалка create/edit |
--bb-z-index-tooltip | Tooltip поверх модалок |
Общие размеры инпутов, select, textarea.
| Токен | Где используется |
|---|---|
--bb-form-control-height | Высота инпута/select |
--bb-form-control-border-width | Толщина границы инпута |
--bb-form-control-padding-x | Горизонтальный padding внутри инпута |
--bb-form-control-radius | Скругление инпута (часто ссылается на --bb-radius-md) |
--bb-form-control-font-size | Размер текста в инпуте |
--bb-form-label-font-size | Размер лейбла поля |
--bb-form-label-font-weight | Жирность лейбла |
--bb-form-error-font-size | Размер текста ошибки валидации |
Размеры диалога create/edit.
| Токен | Где используется |
|---|---|
--bb-modal-max-width | Максимальная ширина модалки |
--bb-modal-radius | Скругление модалки |
Padding primary/secondary действий.
| Токен | Где используется |
|---|---|
--bb-btn-padding-y | Вертикальный padding кнопки |
--bb-btn-padding-x | Горизонтальный padding кнопки |
Живое демо переключения тем — examples/vue3-theme в репозитории block-builder (default, dark, brand overrides, frosted glass).
Пакет локализует только свой UI (кнопки, подписи контролов, сообщения валидации). Подписи полей в block-config задаёт приложение.
locale — 'ru' (по умолчанию) или 'en'uiStrings / :ui-strings — точечные переопределения отдельных ключей из IUiStrings/vue и /react: UI_STRINGS_RU, UI_STRINGS_EN, resolveUiStrings, IUiStringsСтроки UI резолвятся внутри дерева компонента. Переопределяйте через prop uiStrings; в кастомных рендерерах — useUiStrings() (Vue inject / React context).
Полный список переопределяемых ключей (см. IUiStrings в пакете). Сгруппировано по зонам:
save, clearAll, blocksTotal, addBlock, addBlockTitle
edit, moveUp, moveDown, duplicate, delete, hide, show, expand, collapse, copyIdTitle
createBlock, editBlock, submitCreate, submitSave, cancelButtonText, blockTypeSelectionTitle, deleteBlockConfirmTitle, deleteBlockConfirmMessage, clearAllBlocksConfirmTitle, clearAllBlocksConfirmMessage, deleteBlockSimpleConfirm, clearAllSimpleConfirm
selectPlaceholder, dropdownPlaceholder, dropdownLoading, dropdownEmpty, apiSelectPlaceholder, apiSelectLoading, apiSelectNoResults, apiSelectError, apiSelectConfigMissing, apiSelectLoadMore, chooseFile, chooseImage, replaceFile, changeImage, addFile, add, remove, removeFile, removeImage, imageAlt, validationErrorsAriaLabel
repeaterAdd, repeaterRemove, repeaterItem, repeaterMin, repeaterMax
matrixStructureTab, matrixContentTab, matrixColumn, matrixRow, matrixDeleteColumn, matrixDeleteRow
spacingDefaultLabel, spacingCssVariablesPreview, breakpointDesktop, breakpointTablet, breakpointMobile, spacingPaddingTop, spacingPaddingBottom, spacingMarginTop, spacingMarginBottom
loading, saveNotEnabled, errorSaveFailed, successSaved, unknownError, blockConfigNotFound, blockCreationError, blockUpdateError, blockDuplicateError, blockDeleteError, blocksClearError, initialBlocksLoadError, formLoadError, formSaveError, apiSelectRequired, apiSelectUnavailable, customFieldRequired, customFieldsUnavailable, uploadServerError, uploadFileError, fileImportError, fileReadError, invalidImageFile, customFieldInitError, blockIdCopied, copyIdError, blockAnchorPlaceholder, blockAnchorCustomUrlPlaceholder
Панели CustomDropdown монтируются в body и теряют наследование CSS variables. Пакет автоматически копирует theme vars с ближайшего .bb-app при открытии dropdown (Vue/React CustomDropdown).
Для своего teleported UI пакет использует внутренний хелпер readBbThemeVarsFromClosestApp (не входит в публичные npm-экспорты). Скопируйте паттерн из CustomDropdown в репозитории или продублируйте theme vars на корень teleported-элемента вручную.