feat(Android): Added tokenized gradients

[qurle]

Упростил описание градиентов в теме Android, чтобы разрабы могли сами их парсить и привязывать к внутренним токенам вместо «плоских цветов».

struct.json до:

"gradient": {
	"gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%",
	"gradientWhite": "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%, rgba(255, 255, 255, 1) 100%",
	"gradientTint": "rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.05) 15%, rgba(249, 249, 249, 0.2) 30%, rgba(249, 249, 249, 0.8) 70%, rgba(249, 249, 249, 0.95) 85%, rgba(249, 249, 249, 1) 100%",
	"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%, rgba(255, 255, 255, 1) 100%"
},

struct.json после:

"gradient": {
	"gradientBlack": "#00000060, transparent",
	"gradientWhite": "#FFFFFF, transparent",
	"gradientTint": "colorBackgroundTertiary, transparent",
	"gradient": "colorBackgroundContent, transparent"
},

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟢	Statements	92.46% (+0.48% 🔼)	1275/1379
🟢	Branches	89.2% (+0.25% 🔼)	355/398
🟢	Functions	93.4% (+0.54% 🔼)	184/197
🟢	Lines	92.12% (+0.45% 🔼)	1180/1281

Show new covered files 🐣

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / convertSnakeToCamel.ts	100%	100%	100%	100%

Show files with reduced coverage 🔻

St.❔	File	Statements	Branches	Functions	Lines
🟢	... / tokenHelpers.ts	100%	94.12% (-5.88% 🔻)	100%	100%
🟢	... / compileStructJSON.ts	100%	88.24% (-11.76% 🔻)	100%	100%

Test suite run success

471 tests passing in 38 suites.

Report generated by 🧪jest coverage report action from a6936b8

[8coon]

Если оставить так, то при сборке css получится битый токен. Кажется, нужно обернуть их в var(-- )

[8coon]

Теоретически кто-то может заиспользовать эту тему в webview, так что лучше иметь рабочий css

[qurle]

Типа var(--color_background_content)?
А есть какое-то более изящное решение, чтобы передать разрабу градиент с именем токена?

У нас же нет чисто строковых токенов?

[qurle]

Мб просто добавить новые переменные, из которых разраб будет собирать градиенты 🤔

[8coon]

Если var(--color_background_content) по каким-то причинам не подходит, то в целом можно новые токены тогда завести

А почему вариант с var не нравится?

[qurle]

@8coon
А почему вариант с var не нравится?

Потому что у нас будут CSS-переменные в JSON-файле для мобильных разработчиков. Не очень кросс-платформенно)

[8coon]

А если тогда добавить пост-процессинг этих значений и добалять var(-- только при сборке css-файлов?

[qurle]

Хочется наоборот в JSON засунуть эти алиасы (не в виде CSS), чтобы у разраба были не только сырые цвета. Если есть идеи, как это запостпроцессить, буду рад.

Если идей нет, то будем локально решать.

[8coon]

Можно дотюнить функцию alias из файла tokenHelpers.ts, но она работает так, что подставляет значение в итоговый токен. То есть если например указать в теме:

fontHeadline: alias('fontHeadline1'),
fontHeadline1: 12,

в сборке будет два токена --vkui--font_headline: 12px и --vkui--font_headline1: 12px. Я не уверен, что это то, что нужно.

Можешь пожалуйста описать задачу чуть подробнее?