Skip to content

feat(ds): градиент как вид значения цветового токена - #122

Merged
vkaltyrin merged 12 commits into
devfrom
feature/ds-service-color-token-gradients
Oct 28, 2026
Merged

feat(ds): градиент как вид значения цветового токена#122
vkaltyrin merged 12 commits into
devfrom
feature/ds-service-color-token-gradients

Conversation

@vkaltyrin

@vkaltyrin vkaltyrin commented Oct 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Зачем

На экране «Цвета» градиент был отдельным типом токена. Поэтому нельзя было задать градиент только в одной теме или режиме, например цвет в Light и градиент в Dark. Редактор умел только Linear без изменения угла, ступень палитры в стопе сохранялась как HEX. У 12 из 17 сидовых градиентных семейств в web лежала HEX-заглушка, а в iOS и Android — градиент «белый → чёрный». Своё значение для iOS или Android задать было нельзя: каждая правка перезаписывала платформы.

Что сделано

ds-service

  • Тип семейства color или gradient вычисляется из значений всех тем. При смене он пишется редакциями /type определений, перед этим определения семейства блокируются. Значения других тем не переписываются. Члены семейства выбираются по правилу имени без учёта типа.

  • Сплошные значения ios и android всегда хранятся строкой. GET …/tenants/{id}/token-values и общий GET /api/ds/token-values* отдают их у градиентного семейства слоем { kind: "color" }, раскрывают ссылки на палитру внутри стопов и отдают исходник в sourceValue. При ссылке на всё значение отдаётся только paletteRef.

  • Признак своего значения платформы overridden хранится в редакции значения путём /overridden. Запись типографики из feat: typography tokens editor and ds-service typography style operations #121 сохраняет текущий признак значения.

  • Проверка значений:

    • web-градиенты Linear, Radial и Conic по грамматике редактора;
    • структура слоёв iOS и Android;
    • ссылки в стопах.

  • Общие маршруты /api/ds/token-values проверяют вид значения после проверки прав и пересчитывают тип.

  • Журнал: производный /type не показывается. Тип пересчитывается при откате записи токена или значения, а также при удалении темы и откате её создания.

  • Палитра учитывает ссылки в стопах в связях растяжки, при её удалении и при отмене.

  • Миграция V15__color_token_value_kind.sql:

    • колонка overridden;
    • сидовые семейства-заглушки становятся color;
    • нативные заглушки у членов со сплошным web приведены к HEX.

    Строки редакций правятся на месте, без черновых редакций и записей журнала. Прежние значения сохраняются в v15_color_token_backup.

client

  • Вид значения. Переключатель ▣ / ◇ меняет вид отдельно для каждой пары «тема × режим».
  • Редактор градиента:
    • типы «Линейный», «Радиальный» и «Конический»;
    • угол, центр, радиус, начальный угол;
    • перетаскивание стопов, «+» и «−»;
    • цвет стопа в отдельном окне с вкладками «Вручную» и «Библиотека», ступень сохраняется ссылкой.
  • Свои значения платформ.
    • «+» у Light и Dark добавляет строку «↳ iOS» или «↳ Android» с overridden, «×» её убирает.
    • Без своей строки значение платформы строится из web того же члена семейства, включая hover и active.
    • В связанной подтеме строки только показываются, в отвязанной есть «×».
  • Интерфейс.
    • Выбор цвета открывается у поля, по которому щёлкнули, и держит фокус.
    • Переименование на месте двойным щелчком, в дереве и в заголовке инспектора.
    • Поле «Имя» и кнопка «Web» убраны.
  • Журнал показывает цвета и градиенты так же, как редактор: свотчи, ступени по именам, «Угол», «Стоп N · цвет». Параметры откатываются по отдельности, смена вида — целиком.
  • Превью Compose понимает хранимую форму градиента.
  • Удалён мёртвый код: colorTokenActions, gradientTokenActions и parseGradient. После перехода экрана на домен colorTokens у них не осталось потребителей.

OpenSpec

Как проверено

  • После перебазирования на dev (feat: typography tokens editor and ds-service typography style operations #121):
    • ds-service: 380 тестов, detekt, spotless и build;
    • клиент: vitest 871 тест, tsc, сборка;
    • js/cli: 62 теста;
    • Strictacode для backend, client и cli — без регресса;
    • openspec validate --all --strict: 87 из 87.
  • Три круга независимого ревью: блокирующих замечаний не осталось.
  • Стенд, копия рабочей базы с данными до V7:
    • миграции до нашей включительно (тогда V11, теперь V15) применились за 2 с;
    • в базовой ДС градиентными остались 5 семейств, 12 стали цветовыми; во второй ДС — 2 и 15;
    • нативных слоёв у цветовых токенов нет, журналы черновиков пусты.
  • Через gateway:
    • градиент в Dark одной темы даёт type: gradient, у второй темы новых редакций нет, её сплошные значения Android отдаются слоем;
    • откат в журнале возвращает color.
  • В браузере пройдены сценарии редактора, строк платформ, переименования, журнала и режима просмотра.

Что важно знать

  • Публичный API пакета. Переход токена между color и gradient переносит его между {platform}_color.json и {platform}_gradient.json. Предупреждения в интерфейсе нет, так решила команда. Сидовые семейства-заглушки выключены, поэтому пакет по умолчанию миграция не меняет.
  • V15 меняет историю опубликованных версий. Строки правятся на месте, но затрагиваются только выключенные заглушки; бэкап лежит в v15_color_token_backup.
  • Номер миграции. После перебазирования на dev миграция стала V15, потому что V11–V14 заняли feat(ds): версии, журнал изменений и версионная палитра #109, feat(ds-service): Add component editor model API #123, feat: host Compose preview plugin builds on the backend (host-compose-preview-plugin) #124 и feat(ds-service): own variations per design system #132.
  • Strictacode клиента с минимальным запасом. Плотность сложности 9,57 при базе dev 9,58. Чтобы уложиться, разбор градиентов переведён на таблицы, а мёртвые действия цветов удалены. Часть снижения дала особенность анализатора: он не считает ветвления внутри безымянных колбэков.
  • Частичная отмена в журнале для web-градиента. Работает, только если в записи изменился один параметр, потому что сервер хранит слой одной CSS-строкой. Для iOS и Android параметры откатываются по отдельности.

Не входит

  • Значение, хранимое через palette_id, и та же ступень, записанная строкой, считаются разными. Поэтому правки без изменения цвета дают записи в журнале. Поведение было и до этого PR, вынесено отдельной задачей.
  • Правка второго и следующих слоёв многослойного градиента и начальный радиус Radial на iOS.

OpenSpec

  • Архив: openspec/changes/archive/2026-10-21-add-color-token-groups
  • Архив: openspec/changes/archive/2026-10-22-add-color-token-gradients

@coderabbitai

coderabbitai Bot commented Oct 19, 2026 •
edited
Loading

Copy link
Copy Markdown

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: 6db09d1d-63ef-425c-b682-24022b2793d1
  • 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.

@vkaltyrin vkaltyrin self-assigned this Oct 19, 2026
@vkaltyrin vkaltyrin mentioned this pull request Oct 20, 2026
Closed
@vkaltyrin
vkaltyrin force-pushed the feature/ds-service-color-token-gradients branch from 7367882 to 480b3ea Compare October 21, 2026 11:30
@vkaltyrin vkaltyrin changed the title docs(openspec): градиенты цветовых токенов и архив групп docs(openspec): градиенты цветовых токенов поверх версий и архив групп Oct 21, 2026
@vkaltyrin
vkaltyrin changed the base branch from dev to feature/ds-versions October 21, 2026 11:30
This was referenced Oct 21, 2026
Merged
Merged
@vkaltyrin
vkaltyrin force-pushed the feature/ds-service-color-token-gradients branch from 480b3ea to e2fcd22 Compare October 22, 2026 07:52
@vkaltyrin vkaltyrin changed the title docs(openspec): градиенты цветовых токенов поверх версий и архив групп feat(ds): градиент как вид значения цветового токена Oct 22, 2026
@malilex
malilex force-pushed the feature/ds-versions branch from 74386d7 to d143d81 Compare October 22, 2026 12:26
@vkaltyrin
vkaltyrin force-pushed the feature/ds-service-color-token-gradients branch from e2fcd22 to f75341d Compare October 22, 2026 14:24
@vkaltyrin
vkaltyrin changed the base branch from feature/ds-versions to dev October 22, 2026 14:24
@vkaltyrin
docs(openspec): архивировать add-color-token-groups
5ca8c31 
Код групп токенов уже в dev (#106). Дельты перенесены в openspec/specs,
добавлена спека token-groups-api. Требование «Группа токена в палитре»
заменено явно: сценарии выбора группы палитры в интерфейсе убраны вместе
с полем инспектора.
@vkaltyrin
docs(openspec): предложить add-color-token-gradients
d37fd07 
Градиент как вид значения цветового токена в паре тема × режим: тип
семейства вычисляет ds-service, редактор Linear / Radial / Conic с
отдельным окном цвета стопа, свои значения iOS и Android строками в
инспекторе, ссылки стопов на палитру, миграция V7 сидовых заглушек.
@vkaltyrin
docs(openspec): адаптировать add-color-token-gradients к версиям #109
6e46d8a 
Тип семейства пишется редакциями /type под блокировкой определений,
значения других тем не переписываются: сплошные значения платформ
хранятся строкой, слой color добавляет чтение token-values. Признак
overridden — путь редакции значения, производный тип скрыт в журнале
и пересчитывается при откате, миграция V8 правит редакции на месте.
@vkaltyrin
feat(ds-service): градиент как вид значения цветового токена
ca5ef10 
Тип семейства color/gradient вычисляется из значений всех тем и пишется
редакциями /type под блокировкой определений семейства; значения других
тем не переписываются. Сплошные значения ios/android хранятся строкой,
token-values (по теме и общий) отдаёт их слоем color у градиентного
семейства, раскрывает ссылки на палитру в стопах и отдаёт sourceValue.
Признак overridden — путь /overridden редакции значения. Проверка
web-градиентов (linear, radial, conic) и слоёв платформ, ссылки в стопах
в связях, удалении и отмене растяжки. Производный /type скрыт в журнале
и пересчитывается при откате, удалении темы и записи через общие
маршруты значений. Миграция V11 приводит сидовые заглушки к color.
@vkaltyrin
feat(client): редактор градиентов и свои значения платформ на экране …
b72cf38 
…«Цвета»

Вид значения цвет/градиент в каждой паре тема × режим, редактор
Linear/Radial/Conic с отдельным окном цвета стопа, строки «↳ iOS»
и «↳ Android» с признаком overridden, построение платформ из web по
членам семейства, переименование на месте, без поля «Имя» и кнопки
«Web». Выбор цвета открывается у поля. Журнал показывает цвета
и градиенты в терминах редактора с частичной отменой параметров.
Превью Compose понимает хранимую форму градиента.
@vkaltyrin
docs(openspec): уточнить add-color-token-gradients по ревью и проверк…
8fca886 
…е на стенде

Миграция V11, члены семейства по правилу имени, пересчёт типа при
удалении темы и записи через общие маршруты, sourceValue/paletteRef,
форма значений в общем GET, «+» и «×» платформ и подтемы, выбор цвета
у поля, переименование на месте, журнал в терминах редактора.
@vkaltyrin
docs(openspec): архивировать add-color-token-gradients
3fa2b0d 
Дельты перенесены в openspec/specs. Требования «Значения градиентных
токенов проверяются при записи» и «Выбор цвета повторяет прототип»
заменены явно: градиент стал видом значения цветового токена.
@vkaltyrin
refactor(client): упростить домен градиентов и убрать мёртвые действи…
d75f10e 
…я цветов

После перебазирования на dev плотность сложности клиента выросла до 9,56 при
базовой 9,33. Без смены базы:

- разбор слоёв web и iOS/Android по таблицам геометрии вместо цепочек условий;
- readPaint общий для web и платформ, подписи и CSS градиента по типу из таблицы;
- прозрачность значения через помощники домена градиентов вместо своих копий;
- превью Compose раскрывает ссылки палитры одним проходом по значению;
- удалены colorTokenActions, gradientTokenActions и parseGradient: после
  перехода редактора на домен colorTokens у них не осталось потребителей.
@vkaltyrin
fix(client): выбор цвета по замечаниям QA
0abc168 
- вкладки выбора цвета «Свой» и «Палитра», заголовок списка стопов «Стопы»;
  типы градиента Linear, Radial и Conic остаются общепринятыми названиями;
- ползунок тона белого, чёрного и почти серого цвета не прыгает после записи:
  пока цвет совпадает с записанным, ползунки показывают записанное положение,
  а не восстановленное из HEX;
- у списка типа градиента своя стрелка с отступом от края поля.
@vkaltyrin
fix(client): русские названия типов градиента
80e7c57 
Linear, Radial и Conic в списке типа, подписи поля значения и журнале
стали «Линейный», «Радиальный» и «Конический», как в макете.
@vkaltyrin
vkaltyrin force-pushed the feature/ds-service-color-token-gradients branch from b0f6bdf to 80e7c57 Compare October 27, 2026 12:21
@vkaltyrin
vkaltyrin merged commit 06d7439 into dev Oct 28, 2026
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@neretin-trike neretin-trike neretin-trike approved these changes
@angirb angirb angirb approved these changes

Assignees

@vkaltyrin vkaltyrin

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@vkaltyrin @neretin-trike @angirb