Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Tweaked CSS gradients and struct.json gradients #1131

Merged
merged 3 commits into from
Dec 2, 2024
Merged

fix: Tweaked CSS gradients and struct.json gradients #1131

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
414262a
fix: Tweaked CSS gradients and struct.json gradients
qurle Nov 28, 2024
2056011
updated doc
qurle Nov 28, 2024
40359b7
translated comment
qurle Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: Tweaked CSS gradients and struct.json gradients
  • Loading branch information
@qurle
qurle committed Nov 28, 2024
commit 414262aa0c021ca3619c5e177d819bb40d11e8bf
64 changes: 32 additions & 32 deletions src/build/__snapshots__/snapthots.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -446784,19 +446784,19 @@ exports[`shapshots vkontakteAndroid theme should match cssVars snapshot 1`] = `
},
"gradient": {
"name": "--vkui--gradient",
"value": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
},
"gradientBlack": {
"name": "--vkui--gradient_black",
"value": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
},
"gradientTint": {
"name": "--vkui--gradient_tint",
"value": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
},
"gradientWhite": {
"name": "--vkui--gradient_white",
"value": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
},
"opacityDisable": {
"name": "--vkui--opacity_disable",
Expand Down Expand Up @@ -449547,10 +449547,10 @@ exports[`shapshots vkontakteAndroid theme should match pixelify theme snapshot 1
"fontWeightBase1": 600,
"fontWeightBase2": 500,
"fontWeightBase3": 400,
"gradient": "var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%",
"gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%",
"gradientTint": "var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%",
"gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 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%, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 100%",
"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%",
"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%",
"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%",
"opacityDisable": 0.4,
"opacityDisableAccessibility": 0.64,
"sizeArrow": {
Expand Down Expand Up @@ -450978,10 +450978,10 @@ exports[`shapshots vkontakteAndroid theme should match pseudo theme from CssVars
"fontWeightBase1": "var(--vkui--font_weight_base1, 600)",
"fontWeightBase2": "var(--vkui--font_weight_base2, 500)",
"fontWeightBase3": "var(--vkui--font_weight_base3, 400)",
"gradient": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
"gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)",
"gradientTint": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
"gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
"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%)",
"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%)",
"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%)",
"opacityDisable": "var(--vkui--opacity_disable, 0.4)",
"opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)",
"sizeArrow": {
Expand Down Expand Up @@ -452409,10 +452409,10 @@ exports[`shapshots vkontakteAndroid theme should match root theme snapshot 1`] =
"fontWeightBase1": 600,
"fontWeightBase2": 500,
"fontWeightBase3": 400,
"gradient": "var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%",
"gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%",
"gradientTint": "var(--vkui--color_background_tertiary, rgba(249, 249, 249, 1)) 0%, rgba(0, 0, 0, 0) 100%",
"gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 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%, var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 100%",
"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%",
"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%",
"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%",
"opacityDisable": 0.4,
"opacityDisableAccessibility": 0.64,
"sizeArrow": {
Expand Down Expand Up @@ -455697,19 +455697,19 @@ exports[`shapshots vkontakteAndroidDark theme should match cssVars snapshot 1`]
},
"gradient": {
"name": "--vkui--gradient",
"value": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
},
"gradientBlack": {
"name": "--vkui--gradient_black",
"value": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
},
"gradientTint": {
"name": "--vkui--gradient_tint",
"value": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
},
"gradientWhite": {
"name": "--vkui--gradient_white",
"value": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
},
"opacityDisable": {
"name": "--vkui--opacity_disable",
Expand Down Expand Up @@ -458460,10 +458460,10 @@ exports[`shapshots vkontakteAndroidDark theme should match pixelify theme snapsh
"fontWeightBase1": 600,
"fontWeightBase2": 500,
"fontWeightBase3": 400,
"gradient": "var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%",
"gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%",
"gradientTint": "var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%",
"gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%",
"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%",
"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%",
"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%",
"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%",
"opacityDisable": 0.4,
"opacityDisableAccessibility": 0.64,
"sizeArrow": {
Expand Down Expand Up @@ -459891,10 +459891,10 @@ exports[`shapshots vkontakteAndroidDark theme should match pseudo theme from Css
"fontWeightBase1": "var(--vkui--font_weight_base1, 600)",
"fontWeightBase2": "var(--vkui--font_weight_base2, 500)",
"fontWeightBase3": "var(--vkui--font_weight_base3, 400)",
"gradient": "var(--vkui--gradient, var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
"gradientBlack": "var(--vkui--gradient_black, rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%)",
"gradientTint": "var(--vkui--gradient_tint, var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%)",
"gradientWhite": "var(--vkui--gradient_white, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%)",
"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%)",
"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%)",
"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%)",
"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%)",
"opacityDisable": "var(--vkui--opacity_disable, 0.4)",
"opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)",
"sizeArrow": {
Expand Down Expand Up @@ -461322,10 +461322,10 @@ exports[`shapshots vkontakteAndroidDark theme should match root theme snapshot 1
"fontWeightBase1": 600,
"fontWeightBase2": 500,
"fontWeightBase3": 400,
"gradient": "var(--vkui--color_background_content, rgba(25, 25, 26, 1)) 0%, rgba(0, 0, 0, 0) 100%",
"gradientBlack": "rgba(0, 0, 0, 0.376) 0%, rgba(0, 0, 0, 0) 100%",
"gradientTint": "var(--vkui--color_background_tertiary, rgba(32, 32, 33, 1)) 0%, rgba(0, 0, 0, 0) 100%",
"gradientWhite": "rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%",
"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%",
"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%",
"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%",
"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%",
"opacityDisable": 0.4,
"opacityDisableAccessibility": 0.64,
"sizeArrow": {
Expand Down
41 changes: 20 additions & 21 deletions src/build/compilers/structJSON/compileStructJSON.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ describe('compileJSON', () => {
'rgba(0, 0, 255, 1) 100%',
].join(', '),
gradientOneVariable: [
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%',
'rgba(0, 0, 255, 0) 0%',
'rgba(0, 0, 255, 0.05) 15%',
'rgba(0, 0, 255, 0.2) 30%',
'rgba(0, 0, 255, 0.8) 70%',
'rgba(0, 0, 255, 0.95) 85%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
].join(', '),
};
Expand All @@ -42,85 +42,84 @@ describe('compileJSON', () => {
"gradient": {
"gradientTest": [
{
"step": 0,
"color": "rgba(255, 255, 255, 1)",
"token": "colorBackgroundContent",
"step": 0,
"alpha": 1
},
{
"color": "rgba(0, 0, 0, 0)",
"step": 1,
"alpha": 0,
"token": "colorBackgroundContent"
"color": "rgba(0, 0, 0, 0)",
"alpha": 0
}
],
"gradientOneColor": [
{
"color": "rgba(0, 0, 255, 0)",
"step": 0,
"color": "rgba(0, 0, 255, 0)",
"alpha": 0
},
{
"color": "rgba(0, 0, 255, 0.05)",
"step": 0.15,
"color": "rgba(0, 0, 255, 0.05)",
"alpha": 0.05
},
{
"color": "rgba(0, 0, 255, 0.2)",
"step": 0.3,
"color": "rgba(0, 0, 255, 0.2)",
"alpha": 0.2
},
{
"color": "rgba(0, 0, 255, 0.8)",
"step": 0.7,
"color": "rgba(0, 0, 255, 0.8)",
"alpha": 0.8
},
{
"color": "rgba(0, 0, 255, 0.95)",
"step": 0.85,
"color": "rgba(0, 0, 255, 0.95)",
"alpha": 0.95
},
{
"color": "rgba(0, 0, 255, 1)",
"step": 1,
"color": "rgba(0, 0, 255, 1)",
"alpha": 1
}
],
"gradientOneVariable": [
{
"step": 0,
"color": "rgba(0, 0, 255, 0)",
"token": "colorIconPrimary",
"step": 0,
"alpha": 0
},
{
"step": 0.15,
"color": "rgba(0, 0, 255, 0.05)",
"token": "colorIconPrimary",
"step": 0.15,
"alpha": 0.05
},
{
"step": 0.3,
"color": "rgba(0, 0, 255, 0.2)",
"token": "colorIconPrimary",
"step": 0.3,
"alpha": 0.2
},
{
"step": 0.7,
"color": "rgba(0, 0, 255, 0.8)",
"token": "colorIconPrimary",
"step": 0.7,
"alpha": 0.8
},
{
"step": 0.85,
"color": "rgba(0, 0, 255, 0.95)",
"token": "colorIconPrimary",
"step": 0.85,
"alpha": 0.95
},
{
"step": 1,
"color": "rgba(0, 0, 255, 1)",
"token": "colorIconPrimary",
"step": 1,
"alpha": 1
}
]
Expand Down
15 changes: 10 additions & 5 deletions src/build/compilers/structJSON/compileStructJSON.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ const groups = [
] as const;

interface StructGradientPoint {
step?: number;
color: string;
token?: string;
step?: number;
alpha?: number;
}

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

return {
step,
color: varValue,
token: convertSnakeToCamel(varName),
step,
alpha: new Color(varValue).alpha(),
};
}
Expand All @@ -69,10 +69,15 @@ function compileStructGradients(
const rawPoints = cssGradients[key].split('%').slice(0, -1);

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

Expand Down
10 changes: 5 additions & 5 deletions src/build/helpers/tokenHelpers.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@ describe('tokenHelpers', () => {

expect(gradientValue).toEqual(
[
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%',
'rgba(0, 0, 255, 0) 0%',
'rgba(0, 0, 255, 0.05) 15%',
'rgba(0, 0, 255, 0.2) 30%',
'rgba(0, 0, 255, 0.8) 70%',
'rgba(0, 0, 255, 0.95) 85%',
'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
].join(', '),
);
Expand Down
7 changes: 5 additions & 2 deletions src/build/helpers/tokenHelpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,17 @@ export function gradient<T extends ThemeDescription>(
...stops: (Property.Color | NamedTokenFunction<T>)[]
): TokenFunction<T> {
const opacityPoints = stops.length > 1 ? makeOpacityPoints(stops.length) : defaultOpacityPoints;

return (theme) => {
return opacityPoints
.map(([pointOpacity, pointCoordinate], index) => {
const stop = stops[index] ?? stops[stops.length - 1];
const [stopKey, stopValue] = typeof stop === 'function' ? stop(theme) : [undefined, stop];

const pointRaw = makeGradientPointRaw(stopValue, stopKey);
const pointRaw = makeGradientPointRaw(
stopValue,
// Bind only last point to variable (if not explicitely set)
pointOpacity === 1 ? stopKey : undefined,
);

return getGradientPointsFromColor(pointRaw, 1, [[pointOpacity, pointCoordinate]]);
})
Expand Down
8 changes: 4 additions & 4 deletions src/themeDescriptions/themes/vkontakteAndroid/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,10 +279,10 @@ const colorGradients: VkontakteAndroidGradients = makeFunctionalGradients({
});

const gradients: Gradients = {
gradient: gradient(namedAlias('colorBackgroundContent'), 'transparent'),
gradientTint: gradient(namedAlias('colorBackgroundTertiary'), 'transparent'),
gradientWhite: gradient('#FFFFFF', 'transparent'),
gradientBlack: gradient('#00000060', 'transparent'),
gradient: gradient(namedAlias('colorBackgroundContent')),
gradientTint: gradient(namedAlias('colorBackgroundTertiary')),
gradientWhite: gradient('#FFFFFF'),
gradientBlack: gradient('#00000066'),
};

export const vkontakteDisplayTitleFontsPartial: DeepPartial<typeof fonts> = {
Expand Down