Skip to content

feat: typography tokens editor and ds-service typography style operations - #125

Merged
vkaltyrin merged 6 commits into
feature/typography-tokens-editorfrom
feature/typography-tokens-editor-impl
Oct 20, 2026
Merged

vkaltyrin merged 6 commits into
feature/typography-tokens-editorfrom
feature/typography-tokens-editor-impl

Conversation

@vkaltyrin

Copy link
Copy Markdown
Contributor

Что это

Реализация OpenSpec change add-typography-tokens-editor (#121). PR открыт поверх ветки change, поэтому в диффе только реализация. После мержа #121 база сменится на dev.

Раздел «Типографика» переведён на прототип SDDS Portal и на операции ds-service, как «Палитра» и «Цвета».

ds-service

  • GET /api/ds/tenants/{tenantId}/typography-styles отдаёт:
    • стили screen-l, screen-m, screen-s в px с токенами начертаний;
    • семейства шрифтов дизайн-системы;
    • число тем;
    • компоненты, которые используют стиль.
  • Использование считается по значениям свойств вариаций и инвариантов компонентов дизайн-системы темы. Ссылка на стиль бывает трёх видов: без экрана (body.m.normal), с экраном и через token_id.
  • PATCH /api/ds/tenants/{tenantId}/typography-styles/{tokenId} пишет в текущую тему в одной транзакции:
    • размер, высоту строки и трекинг — в три токена стиля на экране токена;
    • вес — в токен начертания на всех экранах;
    • семейство — во все девять токенов стиля.
  • Ревизия темы общая с «Цветами» и «Палитрой»: она сверяется и увеличивается при каждом изменении.
  • Значения пишутся в формате платформ по таблице design.md:
    • на вебе rem при базе 16, нулевой трекинг — "normal";
    • на iOS вес словом: 100 thin, 200 ultraLight.
  • Остальные поля значения сохраняются.
  • Проверка значений использует тексты прототипа. Вес допускается от 100 до 900 с шагом 100. Ошибка — 400 INVALID_TYPOGRAPHY_VALUE, поле передаётся в details.field.
  • Операции описаны в route-manifest.json и OpenAPI.

Клиент

  • Модуль modules/typographyTokens:
    • домен;
    • порт и HTTP-адаптер;
    • очередь автосохранения;
    • перенос записей прежнего черновика.
  • Экран pages/typography:
    • переключатель «Крупные / Средние / Мелкие»;
    • дерево с поиском и сворачиванием групп;
    • борд-шкала;
    • инспектор с разделами «Стиль», «Начертания» и «Влияние».
  • Сохранение работает как в «Цветах»:
    • одна операция на стиль после паузы 400 мс;
    • статус «Сохранение…» / «Сохранено»;
    • «Повторить» после ошибки сети;
    • перезагрузка стилей при 409;
    • отправка очереди при уходе со страницы.
  • Очередь живёт в сессии темы и переживает перемонтирование экрана.
  • Ошибка значения показывается у поля, у стиля остаётся последнее сохранённое значение.
  • Записи типографии из прежнего черновика можно сохранить или отбросить. Удаляются только сохранённые записи.
  • Стили — правила прототипа под корнем .typography-screen, как color-tokens.css. Меню семейства вынесено из поля с overflow: hidden.
  • Удалены прежний экран, действия добавления и отключения токенов типографии и TypographyPicker.

Проверки

  • ds-service.
    • Тесты домена и use case.
    • HTTP-тест на Testcontainers. Он покрывает:
      • области записи;
      • другие темы;
      • использование через token_id, имя с экраном и инварианты;
      • компоненты другой дизайн-системы;
      • коды ошибок и права.
  • Клиент. Тесты домена, очереди, адаптера, переноса черновика и экрана. Всего в клиенте 64 файла тестов, все проходят.
  • tools/verify full --change add-typography-tokens-editor — PASS.
  • Базовая линия strictacode javascript-client обновлена по решению разработчика. Плотность сложности 9.4 → 9.6: новый код несёт логику, а удалённый экран был в основном разметкой.
  • На локальном контуре с копией рабочей базы (base_default):
    • размер Body M на «Крупных» меняет три токена screen-l.body.m.* на трёх платформах, screen-m и screen-s не меняются;
    • вес Bold и семейство меняются на всех экранах, другие темы не меняются;
    • у Body M 34 компонента и 67 использований — совпадает с выборкой из конфигураций;
    • вёрстка при 1440 px сверена с прототипом.
  • Не выполнено: 6.8 — dsbuilder theme fetch с изменёнными значениями. Change будет заархивирован после этой проверки.

Расхождения с прототипом

Таблица — в design.md. К согласованным в #121 добавилась одна строка: в панели инструментов есть состояние сохранения и «Повторить», как в «Цветах».

Read and edit typography styles of a theme (OpenSpec change
add-typography-tokens-editor):

- GET /tenants/{tenantId}/typography-styles returns the styles of
  screen-l, screen-m and screen-s in px with variant tokens, the font
  families of the design system and the components that use each style;
- PATCH /tenants/{tenantId}/typography-styles/{tokenId} writes size, line
  height and letter spacing to the three style tokens of the token screen,
  variant weights and the font family to the style on every screen, in the
  platform formats of web, android and ios, and checks and increments the
  shared theme editRevision.

Values are validated with the prototype messages; weights are limited to
100..900 in steps of 100 and map to iOS words as the token parser does.
Replace the old typography screen with the prototype Typography screen:
screen switch, style tree, scale board and inspector with style, variant
weights and component usage. Edits are saved by ds-service style
operations with the colors autosave queue; typography entries of the old
draft can be saved or discarded. The old screen, its add and disable
actions and TypographyPicker are removed.
…y editor

The typography module and screen add logic-dense code (domain, autosave
queue, draft migration) while the removed old screen was mostly markup, so
the client complexity density rises from 9.4 to 9.6. The baseline is
recomputed by the developer's decision.
Mark the implemented tasks, name details.field as the location of the
invalid field in INVALID_TYPOGRAPHY_VALUE and list the save status in the
toolbar among the prototype differences.
@coderabbitai

coderabbitai Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration
  • Configuration used: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 48904aca-f7bd-4a98-8d0c-afcb64cded0a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Board rows keep the prototype heights, which are tuned for the default
theme values, and grow when the letters of the sample (0.75 of the font
size plus 8 px) do not fit, so an enlarged style is not cropped.
The prototype board is fixed to the 1440 px window (719 px) and leaves an
empty area on wide screens; the board now takes the canvas width and the
sample column grows. The single-line sample uses a line height not smaller
than the font size, so a style with a short line height is not cropped.
@vkaltyrin
vkaltyrin merged commit 0363097 into feature/typography-tokens-editor Oct 20, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant