Skip to content

Commit 8c5c314

Browse files
qurlequrle
authored
fix: Tweaked CSS gradients and struct.json gradients (#1131)
1 parent 27dc7c4 commit 8c5c314

File tree

7 files changed

+78
-74
lines changed

7 files changed

+78
-74
lines changed

‎docs/src/articles/TokenHelpers.md

+2-5
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,7 @@ export const myCustomTheme: ParadigmThemeDescription = {
142142
## `gradient`
143143
Функция создаёт градиент из одного или нескольких цветов.
144144

145-
Если передан один цвет, система сборки сгенериурет градиент из указанного цвета в прозрачный. При этом
146-
градиент будет построен по точкам, указанным в файле `opacityMap.json`.
145+
Если передан один цвет, система сборки сгенериурет градиент из указанного цвета в прозрачный. При этом градиент будет построен по точкам, указанным в файле `opacityMap.json`.
147146

148147
Если передано два и более цветов, будет сгенерирован градиент между этими цветами с равномерной расстановкой точек.
149148

@@ -155,8 +154,7 @@ export function gradient<T extends ThemeDescription> (
155154
```
156155

157156
### Параметры
158-
* **stops** &mdash; Список точек градиента. Можно использовать цвета в строковом формате (rgba, hex) и именованые
159-
алиасы, созданные с помощью хелпера `namedAlias`.
157+
* **stops** &mdash; Список точек градиента. Можно использовать цвета в строковом формате (rgba, hex) и именованые алиасы, созданные с помощью хелпера `namedAlias`.
160158

161159
### Пример
162160
Исходный файл темы:
@@ -196,7 +194,6 @@ export const myCustomTheme: ParadigmThemeDescription = {
196194
},
197195
{
198196
"color": "rgba(32, 32, 32, 1)",
199-
"token": "colorIconPrimary",
200197
"step": 1,
201198
"alpha": 1
202199
}

‎src/build/__snapshots__/snapthots.test.ts.snap

+32-32
Original file line numberDiff line numberDiff line change
@@ -446784,19 +446784,19 @@ exports[`shapshots vkontakteAndroid theme should match cssVars snapshot 1`] = `
446784446784
},
446785446785
"gradient": {
446786446786
"name": "--vkui--gradient",
446787-
"value": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
446787+
"value": "var(--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%)",
446788446788
},
446789446789
"gradientBlack": {
446790446790
"name": "--vkui--gradient_black",
446791-
"value": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)",
446791+
"value": "var(--vkui--gradient_black, 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%)",
446792446792
},
446793446793
"gradientTint": {
446794446794
"name": "--vkui--gradient_tint",
446795-
"value": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
446795+
"value": "var(--vkui--gradient_tint, 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%, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 100%)",
446796446796
},
446797446797
"gradientWhite": {
446798446798
"name": "--vkui--gradient_white",
446799-
"value": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)",
446799+
"value": "var(--vkui--gradient_white, 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%)",
446800446800
},
446801446801
"opacityDisable": {
446802446802
"name": "--vkui--opacity_disable",
@@ -449547,10 +449547,10 @@ exports[`shapshots vkontakteAndroid theme should match pixelify theme snapshot 1
449547449547
"fontWeightBase1": 600,
449548449548
"fontWeightBase2": 500,
449549449549
"fontWeightBase3": 400,
449550-
"gradient": "var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%",
449551-
"gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%",
449552-
"gradientTint": "var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%",
449553-
"gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%",
449550+
"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%",
449551+
"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%",
449552+
"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%, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 100%",
449553+
"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%",
449554449554
"opacityDisable": 0.4,
449555449555
"opacityDisableAccessibility": 0.64,
449556449556
"sizeArrow": {
@@ -450978,10 +450978,10 @@ exports[`shapshots vkontakteAndroid theme should match pseudo theme from CssVars
450978450978
"fontWeightBase1": "var(--vkui--font_weight_base1, 600)",
450979450979
"fontWeightBase2": "var(--vkui--font_weight_base2, 500)",
450980450980
"fontWeightBase3": "var(--vkui--font_weight_base3, 400)",
450981-
"gradient": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
450982-
"gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)",
450983-
"gradientTint": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
450984-
"gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)",
450981+
"gradient": "var(--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%)",
450982+
"gradientBlack": "var(--vkui--gradient_black, 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%)",
450983+
"gradientTint": "var(--vkui--gradient_tint, 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%, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 100%)",
450984+
"gradientWhite": "var(--vkui--gradient_white, 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%)",
450985450985
"opacityDisable": "var(--vkui--opacity_disable, 0.4)",
450986450986
"opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)",
450987450987
"sizeArrow": {
@@ -452409,10 +452409,10 @@ exports[`shapshots vkontakteAndroid theme should match root theme snapshot 1`] =
452409452409
"fontWeightBase1": 600,
452410452410
"fontWeightBase2": 500,
452411452411
"fontWeightBase3": 400,
452412-
"gradient": "var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%",
452413-
"gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%",
452414-
"gradientTint": "var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%",
452415-
"gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%",
452412+
"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%",
452413+
"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%",
452414+
"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%, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 100%",
452415+
"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%",
452416452416
"opacityDisable": 0.4,
452417452417
"opacityDisableAccessibility": 0.64,
452418452418
"sizeArrow": {
@@ -455697,19 +455697,19 @@ exports[`shapshots vkontakteAndroidDark theme should match cssVars snapshot 1`]
455697455697
},
455698455698
"gradient": {
455699455699
"name": "--vkui--gradient",
455700-
"value": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
455700+
"value": "var(--vkui--gradient, rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 100%)",
455701455701
},
455702455702
"gradientBlack": {
455703455703
"name": "--vkui--gradient_black",
455704-
"value": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)",
455704+
"value": "var(--vkui--gradient_black, 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%)",
455705455705
},
455706455706
"gradientTint": {
455707455707
"name": "--vkui--gradient_tint",
455708-
"value": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
455708+
"value": "var(--vkui--gradient_tint, rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 100%)",
455709455709
},
455710455710
"gradientWhite": {
455711455711
"name": "--vkui--gradient_white",
455712-
"value": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)",
455712+
"value": "var(--vkui--gradient_white, 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%)",
455713455713
},
455714455714
"opacityDisable": {
455715455715
"name": "--vkui--opacity_disable",
@@ -458460,10 +458460,10 @@ exports[`shapshots vkontakteAndroidDark theme should match pixelify theme snapsh
458460458460
"fontWeightBase1": 600,
458461458461
"fontWeightBase2": 500,
458462458462
"fontWeightBase3": 400,
458463-
"gradient": "var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%",
458464-
"gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%",
458465-
"gradientTint": "var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%",
458466-
"gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%",
458463+
"gradient": "rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 100%",
458464+
"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%",
458465+
"gradientTint": "rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 100%",
458466+
"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%",
458467458467
"opacityDisable": 0.4,
458468458468
"opacityDisableAccessibility": 0.64,
458469458469
"sizeArrow": {
@@ -459891,10 +459891,10 @@ exports[`shapshots vkontakteAndroidDark theme should match pseudo theme from Css
459891459891
"fontWeightBase1": "var(--vkui--font_weight_base1, 600)",
459892459892
"fontWeightBase2": "var(--vkui--font_weight_base2, 500)",
459893459893
"fontWeightBase3": "var(--vkui--font_weight_base3, 400)",
459894-
"gradient": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
459895-
"gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)",
459896-
"gradientTint": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
459897-
"gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)",
459894+
"gradient": "var(--vkui--gradient, rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 100%)",
459895+
"gradientBlack": "var(--vkui--gradient_black, 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%)",
459896+
"gradientTint": "var(--vkui--gradient_tint, rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 100%)",
459897+
"gradientWhite": "var(--vkui--gradient_white, 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%)",
459898459898
"opacityDisable": "var(--vkui--opacity_disable, 0.4)",
459899459899
"opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)",
459900459900
"sizeArrow": {
@@ -461322,10 +461322,10 @@ exports[`shapshots vkontakteAndroidDark theme should match root theme snapshot 1
461322461322
"fontWeightBase1": 600,
461323461323
"fontWeightBase2": 500,
461324461324
"fontWeightBase3": 400,
461325-
"gradient": "var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%",
461326-
"gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%",
461327-
"gradientTint": "var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%",
461328-
"gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%",
461325+
"gradient": "rgba(25, 25, 26, 0) 0%, rgba(25, 25, 26, 0.05) 15%, rgba(25, 25, 26, 0.2) 30%, rgba(25, 25, 26, 0.8) 70%, rgba(25, 25, 26, 0.95) 85%, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 100%",
461326+
"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%",
461327+
"gradientTint": "rgba(32, 32, 33, 0) 0%, rgba(32, 32, 33, 0.05) 15%, rgba(32, 32, 33, 0.2) 30%, rgba(32, 32, 33, 0.8) 70%, rgba(32, 32, 33, 0.95) 85%, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 100%",
461328+
"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%",
461329461329
"opacityDisable": 0.4,
461330461330
"opacityDisableAccessibility": 0.64,
461331461331
"sizeArrow": {

‎src/build/compilers/structJSON/compileStructJSON.test.ts

+20-21
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ describe('compileJSON', () => {
1919
'rgba(0, 0, 255, 1) 100%',
2020
].join(', '),
2121
gradientOneVariable: [
22-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%',
23-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%',
24-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%',
25-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%',
26-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%',
22+
'rgba(0, 0, 255, 0) 0%',
23+
'rgba(0, 0, 255, 0.05) 15%',
24+
'rgba(0, 0, 255, 0.2) 30%',
25+
'rgba(0, 0, 255, 0.8) 70%',
26+
'rgba(0, 0, 255, 0.95) 85%',
2727
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
2828
].join(', '),
2929
};
@@ -42,85 +42,84 @@ describe('compileJSON', () => {
4242
"gradient": {
4343
"gradientTest": [
4444
{
45+
"step": 0,
4546
"color": "rgba(255, 255, 255, 1)",
4647
"token": "colorBackgroundContent",
47-
"step": 0,
4848
"alpha": 1
4949
},
5050
{
51-
"color": "rgba(0, 0, 0, 0)",
5251
"step": 1,
53-
"alpha": 0,
54-
"token": "colorBackgroundContent"
52+
"color": "rgba(0, 0, 0, 0)",
53+
"alpha": 0
5554
}
5655
],
5756
"gradientOneColor": [
5857
{
59-
"color": "rgba(0, 0, 255, 0)",
6058
"step": 0,
59+
"color": "rgba(0, 0, 255, 0)",
6160
"alpha": 0
6261
},
6362
{
64-
"color": "rgba(0, 0, 255, 0.05)",
6563
"step": 0.15,
64+
"color": "rgba(0, 0, 255, 0.05)",
6665
"alpha": 0.05
6766
},
6867
{
69-
"color": "rgba(0, 0, 255, 0.2)",
7068
"step": 0.3,
69+
"color": "rgba(0, 0, 255, 0.2)",
7170
"alpha": 0.2
7271
},
7372
{
74-
"color": "rgba(0, 0, 255, 0.8)",
7573
"step": 0.7,
74+
"color": "rgba(0, 0, 255, 0.8)",
7675
"alpha": 0.8
7776
},
7877
{
79-
"color": "rgba(0, 0, 255, 0.95)",
8078
"step": 0.85,
79+
"color": "rgba(0, 0, 255, 0.95)",
8180
"alpha": 0.95
8281
},
8382
{
84-
"color": "rgba(0, 0, 255, 1)",
8583
"step": 1,
84+
"color": "rgba(0, 0, 255, 1)",
8685
"alpha": 1
8786
}
8887
],
8988
"gradientOneVariable": [
9089
{
90+
"step": 0,
9191
"color": "rgba(0, 0, 255, 0)",
9292
"token": "colorIconPrimary",
93-
"step": 0,
9493
"alpha": 0
9594
},
9695
{
96+
"step": 0.15,
9797
"color": "rgba(0, 0, 255, 0.05)",
9898
"token": "colorIconPrimary",
99-
"step": 0.15,
10099
"alpha": 0.05
101100
},
102101
{
102+
"step": 0.3,
103103
"color": "rgba(0, 0, 255, 0.2)",
104104
"token": "colorIconPrimary",
105-
"step": 0.3,
106105
"alpha": 0.2
107106
},
108107
{
108+
"step": 0.7,
109109
"color": "rgba(0, 0, 255, 0.8)",
110110
"token": "colorIconPrimary",
111-
"step": 0.7,
112111
"alpha": 0.8
113112
},
114113
{
114+
"step": 0.85,
115115
"color": "rgba(0, 0, 255, 0.95)",
116116
"token": "colorIconPrimary",
117-
"step": 0.85,
118117
"alpha": 0.95
119118
},
120119
{
120+
"step": 1,
121121
"color": "rgba(0, 0, 255, 1)",
122122
"token": "colorIconPrimary",
123-
"step": 1,
124123
"alpha": 1
125124
}
126125
]

‎src/build/compilers/structJSON/compileStructJSON.ts

+10-5
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ const groups = [
2222
] as const;
2323

2424
interface StructGradientPoint {
25+
step?: number;
2526
color: string;
2627
token?: string;
27-
step?: number;
2828
alpha?: number;
2929
}
3030

@@ -44,9 +44,9 @@ function parseRawToken(rawToken: string): StructGradientPoint {
4444
const varValue = rawToken.slice(varNameRaw[0].length, -1).trim().slice(1).trim();
4545

4646
return {
47+
step,
4748
color: varValue,
4849
token: convertSnakeToCamel(varName),
49-
step,
5050
alpha: new Color(varValue).alpha(),
5151
};
5252
}
@@ -69,10 +69,15 @@ function compileStructGradients(
6969
const rawPoints = cssGradients[key].split('%').slice(0, -1);
7070

7171
structGradients[key] = rawPoints.map(parseRawToken).map((structToken, index, array) => {
72-
if (index > 0 && !structToken.token) {
72+
if (!structToken.token) {
7373
return {
74-
...structToken,
75-
token: structToken.token ?? array[0].token,
74+
step: structToken.step,
75+
color: structToken.color,
76+
// Только последнее значение распространяется на все точки
77+
// (как в градиенте, сгенерированном по 1 переменной)
78+
// Тут могут всплыть ошибки, так что заранее сорри
79+
token: structToken.token ?? array[array.length - 1].token,
80+
alpha: structToken.alpha,
7681
};
7782
}
7883

‎src/build/helpers/tokenHelpers.test.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,11 @@ describe('tokenHelpers', () => {
5757

5858
expect(gradientValue).toEqual(
5959
[
60-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%',
61-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%',
62-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%',
63-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%',
64-
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%',
60+
'rgba(0, 0, 255, 0) 0%',
61+
'rgba(0, 0, 255, 0.05) 15%',
62+
'rgba(0, 0, 255, 0.2) 30%',
63+
'rgba(0, 0, 255, 0.8) 70%',
64+
'rgba(0, 0, 255, 0.95) 85%',
6565
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
6666
].join(', '),
6767
);

0 commit comments

Comments
 (0)