fix: Tweaked CSS gradients and struct.json gradients

Че случилось

Немного переписал логику генерации градиентов. Теперь в CSS-версии токены не пишутся в каждый стоп градиента — только в точки с модификатором прозрачности 100%. В struct.json токен прописывается в каждом стопе градиента, если градиент сгенерирован по одной точке.

Обновлены тесты и пример в доке.

Пример работы

1 точка с алиасом

Source

gradient: gradient(namedAlias(‘colorBackgroundContent’))

CSS

--vkui--gradient: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 100%;

JSON

"gradient": [
            {
                "step": 0,
                "color": "rgba(255, 255, 255, 0)",
                "token": "colorBackgroundContent",
                "alpha": 0
            },
            {
                "step": 0.15,
                "color": "rgba(255, 255, 255, 0.05)",
                "token": "colorBackgroundContent",
                "alpha": 0.05
            },
            {
                "step": 0.3,
                "color": "rgba(255, 255, 255, 0.2)",
                "token": "colorBackgroundContent",
                "alpha": 0.2
            },
            {
                "step": 0.7,
                "color": "rgba(255, 255, 255, 0.8)",
                "token": "colorBackgroundContent",
                "alpha": 0.8
            },
            {
                "step": 0.85,
                "color": "rgba(255, 255, 255, 0.95)",
                "token": "colorBackgroundContent",
                "alpha": 0.95
            },
            {
                "step": 1,
                "color": "rgba(255, 255, 255, 1)",
                "token": "colorBackgroundContent",
                "alpha": 1
            }
        ]

2 точки с алиасом

Source

gradient: gradient(namedAlias(‘colorBackgroundContent’, transparent))

CSS

--vkui--gradient: var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%;

JSON

"gradient": [
            {
                "step": 0,
                "color": "rgba(255, 255, 255, 1)",
                "token": "colorBackgroundContent",
                "alpha": 1
            },
            {
                "step": 1,
                "color": "rgba(0, 0, 0, 0)",
                "alpha": 0
            }
        ],

Потенциальные проблемы

В struct.json значение токена во всех точках теперь наследуется от последней точки градиента — это точка со 100% непрозрачностью при задании градиента как gradient(namedAlias(tokenName)). Это может приводить к ошибкам, если градиент задаётся как gradient('#FFF', namedAlias(tokenName)) — тогда в первой точке появится неуместная ссылка на токен:

"gradient": [
            {
                "step": 1,
                "color": "rgba(255, 255, 255, 1)",
                "token": tokenName,
                "alpha": 1
            }
            {
                "step": 0,
                "color": "rgba(204, 255, 0, 1)",
                "token": tokenName,
                "alpha": 1
            },
        ],

До этого значение токена наследовалось от первой точки градиента. Переписал на наследование от последней точки, потому что именно она в CSS-записи будет привязанна к переменной при задании градиента от одной точки: gradient: gradient(namedAlias(‘colorBackgroundContent’)) превращается в

--vkui--gradient: rgba(255, 255, 255, 0) 0%, ... , var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 100%;

Старый вид наследования мог вызывать аналогичный баги, но просто не работал в условиях фикса, который я старательно описываю в тексте этого пулл-реквеста.

St.^{:grey_question:}	Category	Percentage	Covered / Total
🟢	Statements	92.45%	1274/1378
🟢	Branches	89.2%	355/398
🟢	Functions	93.4%	184/197
🟢	Lines	92.11%	1179/1280

VKCOM / vkui-tokens