feat: sizes tokens editor and ds-service size token operations by vkaltyrin · Pull Request #128 · salute-developers/design-system-builder

vkaltyrin · 2026-10-22T05:40:25Z

Что это

OpenSpec change add-sizes-tokens-editor и его реализация.

Спеки одобрены в docs(openspec): propose sizes tokens editor #127. Тот PR закрылся при переименовании ветки feature/sizes-tokens-editor → feat/sizes-tokens-editor, история ревью осталась там.
База — dev (в нём уже feat(ds): версии, журнал изменений и версионная палитра #109, feat: typography tokens editor and ds-service typography style operations #121, feat(ds): градиент как вид значения цветового токена #122, feat(ds-service): Add component editor model API #123 и feat(ds-service): own variations per design system #132).

Радиусы, отступы и тени темы переводятся на прототип SDDS Portal и на предметные операции ds-service, как «Палитра», «Цвета» и «Типографика» (#121). Прежний экран «Формы» убирается.

ds-service

GET /api/ds/tenants/{tenantId}/size-tokens отдаёт радиусы, отступы и тени в px с versionId. У каждого токена:
- свои значения платформ;
- использование компонентами и вычисляемые радиусы — по редакциям конфигураций на той же границе.
PUT …/size-tokens/{tokenId}/value, POST …/size-tokens и DELETE …/size-tokens/{tokenId} работают на предметных редакциях feat(ds): версии, журнал изменений и версионная палитра #109:
- базовые редакции значений, X-DS-Mutation-Metadata;
- Idempotency-Key на создании, логическое удаление, 400 historical_version_read_only.
Своей миграции нет. Признак своего значения платформы — колонка token_value_revisions.overridden из feat(ds): градиент как вид значения цветового токена #122 (V15__color_token_value_kind.sql).
- Раздел пишет признак в редакции значений; журнал, откат и пакетная запись значений учитывают его по механизму feat(ds): градиент как вид значения цветового токена #122.
- Перезапись существующего значения при инициализации темы сохраняет признак.
Цвет слоя тени — HEX или ссылка на ступень палитры [type.shade.step][opacity].
- Ссылка проверяется по палитре темы, хранится как у стопов градиента.
- При чтении раскрывается в HEX: color и colorRef в size-tokens, sourceValue в token-values — через общую публикацию значений TokenValuePublisher из feat(ds): градиент как вид значения цветового токена #122.
- Связи и удаление растяжки и проверка отката учитывают слои теней.
Журнал и откат для shape, spacing и shadow покрыты общими обработчиками feat(ds): версии, журнал изменений и версионная палитра #109.

Клиент

Модуль modules/sizeTokens и экран pages/shapes по экрану «Отступы и радиусы» прототипа:
- дерево «Радиусы / Отступы / Тени»;
- борд радиусов с группой «Вычисляемые», шкала отступов, список теней на отдельных плашках;
- инспектор со своими значениями платформ «↳ iOS / ↳ Android», слоями тени и полем цвета Custom / Library.
Создание — строкой внизу раздела по «+», как в группах «Цветов»: значение по умолчанию раздела, правится в инспекторе. У тени создаётся размер целиком, четыре варианта.
Удаление — с подтверждением, если удаляемые токены используют компоненты. У тени подтверждение считается по четырём вариантам размера.
Автосохранение по модели feat(ds): версии, журнал изменений и версионная палитра #109. Очередь с автоповтором. Неподтверждённые команды size-tokens повторяются при открытии темы, с platforms и прежним ключом. Перечитывание по SSE.
Опубликованная версия (?versionId) открывается только для чтения, переход из журнала — по ?tokenId.

Проверки

./gradlew build в ds-service — PASS: detekt, spotless, тесты, включая Testcontainers.
Клиент: npm run build, npm test (941) — PASS. Изменённые файлы чистые по eslint.
tools/verify fast --change add-sizes-tokens-editor — PASS.
Заодно исправлен манифест маршрутов после feat(ds-service): Add component editor model API #123: группа appearance-editor реализована только в ds-service, но была без origin: "ds-service", и route-manifest.test.ts db-service искал её роутер в db-service.
openspec validate add-sizes-tokens-editor --strict — PASS на 1.6.0 и 1.4.1.
На локальном контуре с копией рабочей базы (до слияния с feat: typography tokens editor and ds-service typography style operations #121 и feat(ds): градиент как вид значения цветового токена #122) проверено:
- правка радиуса, её запись в журнале и переход к источнику;
- своё значение Android;
- вычисляемый round.l −2;
- ссылка цвета слоя на палитру с HEX у потребителей;
- создание и удаление токенов, подтверждение удаления тени.

Не выполнено

tools/verify full, сверка вёрстки с прототипом.
Внешние проверки:
- откат в журнале и вторая вкладка по SSE (6.5);
- опубликованная версия (6.9);
- dsbuilder theme fetch (6.11).

coderabbitai · 2026-10-22T05:40:44Z

Important

🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: defaults
Review profile: CHILL
Plan: Advanced
Run ID: a3a01192-6981-4e98-9082-634b5f40fcd9

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.}

raininforest · 2026-10-22T06:15:44Z

+        val stored = token.copy(values = written.associate { it.platform to SizeStoredValue(it.value, it.overridden) })
+        val resolve = colors.resolver(context.projectId, tenantId)
+        val view = usage.views(designSystemId, listOf(stored), resolve).single()
+        return DsResult.Success(UpdatedSizeToken(view, written))


[P2] После сохранения Library-цвета превью получает сырую ссылку

При сохранении тени с цветом [general.gray.900][0.16] поле token содержит раскрытый HEX, а values — исходную ссылку. Клиентский applyToTheme (modules/sizeTokens/application/themeModel.ts) отдаёт приоритет values: через themeValuesFromWritten ссылка попадает напрямую в WebShadow. Затем getShadowsTokens передаёт это значение в CSS box-shadow, где ссылка на палитру невалидна. В результате превью тени в редакторе компонентов ломается до перезагрузки темы.

Нужно использовать раскрытые цвета при обновлении модели темы, сохранив исходные ссылки для редактирования; например, обновлять модель тени по разрешённому token.

Исправлено

raininforest · 2026-10-22T06:15:44Z

+                   c.name AS component, c.platform::text AS platform
+              FROM variation_values v
+              JOIN live_appearances a ON a.id = v.appearance_id
+              JOIN components c ON c.id = a.component_id


[P2] Использование включает удалённые из ДС компоненты

Запрос соединяет конфигурации с общим каталогом components, но не проверяет действующую связь компонента с дизайн-системой. Если компонент ссылается на round.m, а затем его удаляют из ДС, ExposedDesignSystemComponentRepository.deleteOwned записывает только надгробие design-system-component, оставляя appearances и значения свойств. Поэтому этот запрос продолжает возвращать удалённый компонент в components и вычисляемых радиусах.

Нужно фильтровать использование по действующей редакции design_system_component на той же границе версии, что и конфигурации.

Исправлено

…t shadows

…letion

…isions Add token_value_revisions.overridden and token_value_creation_baselines.overridden (V8). The flag is a subject field of a value revision: the token-value journal handler shows it, the creation baseline and the field reverter restore it, new themes start with false, and every shared value write (token-values PUT, color tokens, palette rewrites, token value API, theme initializer) keeps the flag of the latest revision instead of resetting it.

Read radii, spacing and shadows from token_revisions and token_value_revisions on the transaction boundary with versionId (canEdit is false on a published version) and component usage and derived radii from the latest revisions of component configurations on the same boundary. A value change locks the design system and the token values, rereads them and writes draft revisions of the changed values only with the /value and /overridden paths and a per-platform base revision. Creation writes definitions and values in every theme under the name key lock with Idempotency-Key support; deletion writes tombstones in every theme and clears component references. The theme edit revision, its lock and TENANT_EDIT_CONFLICT are removed; mutations return X-DS-Mutation-Metadata. A shadow layer color may be a palette step reference [type.shade.step][opacity]: it is validated against the theme palette, stored in every platform value and resolved to #RRGGBBAA with colorRef on read.

Shadow layer colors that reference a palette step take part in the theme palette like color token references: the palette snapshot carries shadow tokens and the references of their layers, ramp links and linked counts include them (group by the name rule, not in color token assignments), ramp removal rewrites the layer color in place, and the revert dependency check rejects restoring a layer reference to a removed ramp. GET token-values returns the resolved sourceValue.

…ting model The size-tokens read refers to VersionId; value change, creation and deletion refer to OptionalBaseRevision (creation also to OptionalIdempotencyKey) and describe the X-DS-Mutation-Metadata headers. Bodies and responses drop editRevision and TENANT_EDIT_CONFLICT, deletion takes no body, value changes take per-platform baseRevisions, shadow layers carry colorRef and accept a palette step reference, and tenant token values document sourceValue.

…visions Read the base theme with the derived round.l -2 and a published version with versionId, edit radii and shadows with and without own platform values, edit one value concurrently (warning in the mutation metadata) and different tokens independently, keep the own flag through the shared token-values save, revert an own platform value from the journal, repeat a creation with the same Idempotency-Key, delete with component references reset while the published version keeps the token, delete a token created in the draft without a journal entry, and link a shadow layer color to the palette: validation, resolution in size-tokens and token-values with sourceValue, ramp links, ramp removal and the revert dependency conflict.

… the color field

Size token operations follow contract v2: no editRevision, base revisions of the web, iOS and Android values from subjectRevisions taken when the command is sent, an Idempotency-Key on creation, mutations through subjectMutation with X-DS-Mutation-Metadata and errors with details.field. The queue keeps the 400 ms quiet window and generations, retries network and 5xx errors after 1 s doubling up to 30 s and reports its state as the size-tokens autosave source. Every unconfirmed operation is kept in the theme localStorage as the original size-tokens command (method, path, body with platforms, base revisions, idempotency key) and is replayed by the same command when the theme editor session starts, even if the section is not open; it is never turned into a ds_draft TokenChange. The section reads with versionId and is read-only for a published version, selects ?tokenId through useAddressedToken and reports an unavailable source, rereads after local queues when the theme model is replaced, and size-tokens truncated metadata refreshes theme tokens. Shadow size deletion is confirmed by the union of usage of its four variants with the new dialog texts. The legacy draft banner and legacyDraft are removed.

The swatch inside the layer color field opens the ColorPickerPopover of the colors section with Custom and Library tabs. A Library step is sent as the [type.shade.step][opacity] reference, and the field shows the step name (Gray 900) by colorRef with the reference opacity; HEX input or a Custom color replaces the reference. The picker rules move into size-tokens.css under the section root, the popover opens left of the inspector.

The + of a tree section appears on hover and focus of the section heading row, as for groups in the colors section, instead of anywhere over the section.

…review

…om size token usage

…er dev

… in the route manifest

…tline the selected radius

angirb · 2026-10-28T11:42:57Z

тут при вводе в радиусах и отступах белые рамки появились

в тенях они полные, но синей рамки нет

синяя рамка есть при вводе цвета хекса

Наверно везде должна быть синяя рамка?

…us ring in the size tokens inspector

# Conflicts: # js/apps/client/src/pages/shapes/Shapes.tsx

vkaltyrin · 2026-10-28T13:18:06Z

Исправлено, теперь при вводе везде синяя рамка

vkaltyrin self-assigned this Oct 22, 2026

raininforest reviewed Oct 22, 2026

View reviewed changes

malilex force-pushed the feature/ds-versions branch from 74386d7 to d143d81 Compare October 22, 2026 12:26

vkaltyrin added 25 commits October 22, 2026 16:32

docs(openspec): propose sizes tokens editor

60c4109

docs(openspec): align sizes tokens editor with versioned editing

a23e92d

docs(openspec): link shadow layer colors to the theme palette and lis…

43cd042

…t shadows

docs(openspec): replay size token commands and confirm shadow size de…

83238e7

…letion

feat(ds-service): add size tokens operations

da55f90

feat(ds-service): return size token kind on value update

cb89c0c

feat(client): add sizes tokens editor screen

7f959cb

fix(client): align shadow layers heading and elevation label

ecdfedd

fix(client): list shadows on separate tiles and put the swatch inside…

a56a2c7

… the color field

fix(client): show the tree section add button on its heading row

091a884

The + of a tree section appears on hover and focus of the section heading row, as for groups in the colors section, instead of anywhere over the section.

fix(ds-service): renumber the own platform value migration to V11

b572979

docs(openspec): record sizes tokens editor implementation

43ca0d2

feat(client): create size tokens with an inline row like color tokens

d1aa15e

docs(openspec): record sizes tokens editor external checks

cf2ef0d

fix(client): resolve shadow palette references in size tokens theme p…

d4540b5

…review

fix(ds-service): exclude components removed from the design system fr…

331b5a3

…om size token usage

fix(ds-service): renumber the own platform value migration to V13 aft…

5a34957

…er dev

fix(client): show the new size token row like the color tokens tree row

5a63bf5

vkaltyrin force-pushed the feat/sizes-tokens-editor branch from 6d1aeec to 5a63bf5 Compare October 22, 2026 14:00

vkaltyrin changed the base branch from feature/ds-versions to dev October 22, 2026 14:01

vkaltyrin added 2 commits October 22, 2026 17:07

fix(ds-service): mark the appearance editor routes as ds-service only…

4f90c5a

… in the route manifest

Merge remote-tracking branch 'origin/dev' into feat/sizes-tokens-editor

7072a9a

angirb reviewed Oct 28, 2026

View reviewed changes

Comment thread backend-kt/ds-service/app/src/main/kotlin/com/dsbuilder/ds/app/Application.kt Resolved

angirb reviewed Oct 28, 2026

View reviewed changes

Comment thread backend-kt/ds-service/app/src/main/kotlin/com/dsbuilder/ds/app/Application.kt Resolved

angirb reviewed Oct 28, 2026

View reviewed changes

Comment thread backend-kt/ds-service/app/src/main/kotlin/com/dsbuilder/ds/app/Application.kt Resolved

angirb reviewed Oct 28, 2026

View reviewed changes

Comment thread backend-kt/ds-service/app/src/main/kotlin/com/dsbuilder/ds/app/Application.kt Resolved

fix(client): apply the color tokens field fixes to size tokens and ou…

6fcdc9c

…tline the selected radius

vkaltyrin added 2 commits October 28, 2026 16:11

fix(client): round the selected radius outline and use the accent foc…

2e11fb0

…us ring in the size tokens inspector

Merge remote-tracking branch 'origin/dev' into feat/sizes-tokens-editor

6fc0cbb

# Conflicts: # js/apps/client/src/pages/shapes/Shapes.tsx

angirb approved these changes Oct 28, 2026

View reviewed changes

vkaltyrin merged commit c8de288 into dev Oct 28, 2026
15 checks passed

vkaltyrin mentioned this pull request Oct 29, 2026

feat(backend): модульный монолит в одной JVM #136

Merged

Navigation Menu

Repository navigation

feat: sizes tokens editor and ds-service size token operations - #128

feat: sizes tokens editor and ds-service size token operations#128
vkaltyrin merged 30 commits into
devfrom
feat/sizes-tokens-editor

vkaltyrin commented Oct 22, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 22, 2026 •

edited

Loading

Uh oh!

raininforest Oct 22, 2026

Uh oh!

vkaltyrin Oct 22, 2026

Uh oh!

raininforest Oct 22, 2026

Uh oh!

vkaltyrin Oct 22, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

angirb commented Oct 28, 2026

Uh oh!

vkaltyrin commented Oct 28, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

vkaltyrin commented Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Что это

ds-service

Клиент

Проверки

Не выполнено

Uh oh!

coderabbitai Bot commented Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

raininforest Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

vkaltyrin Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

raininforest Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

vkaltyrin Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

angirb commented Oct 28, 2026

Uh oh!

vkaltyrin commented Oct 28, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vkaltyrin commented Oct 22, 2026 •

edited

Loading

coderabbitai Bot commented Oct 22, 2026 •

edited

Loading