From 2f2010579381a5d868f64584beb89133d26dcbde Mon Sep 17 00:00:00 2001
From: nick <wrl.snk@gmail.com>
Date: Mon, 9 Sep 2024 19:38:06 +0300
Subject: [PATCH] feat(Android): Added tokenized gradients

---
 .../__snapshots__/snapthots.test.ts.snap      | 64 +++++++++----------
 .../themes/vkontakteAndroid/index.ts          | 14 +++-
 2 files changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap
index 0b0134af..4f38fe9a 100644
--- a/src/build/__snapshots__/snapthots.test.ts.snap
+++ b/src/build/__snapshots__/snapthots.test.ts.snap
@@ -442628,19 +442628,19 @@ exports[`shapshots vkontakteAndroid theme should match cssVars snapshot 1`] = `
   },
   "gradient": {
     "name": "--vkui--gradient",
-    "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%, rgba(255, 255, 255, 1) 100%)",
+    "value": "var(--vkui--gradient, colorBackgroundContent, transparent)",
   },
   "gradientBlack": {
     "name": "--vkui--gradient_black",
-    "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%)",
+    "value": "var(--vkui--gradient_black, #00000060, transparent)",
   },
   "gradientTint": {
     "name": "--vkui--gradient_tint",
-    "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%, rgba(249, 249, 249, 1) 100%)",
+    "value": "var(--vkui--gradient_tint, colorBackgroundTertiary, transparent)",
   },
   "gradientWhite": {
     "name": "--vkui--gradient_white",
-    "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%)",
+    "value": "var(--vkui--gradient_white, #FFFFFF, transparent)",
   },
   "opacityDisable": {
     "name": "--vkui--opacity_disable",
@@ -445362,10 +445362,10 @@ exports[`shapshots vkontakteAndroid theme should match pixelify theme snapshot 1
   "fontWeightBase1": 600,
   "fontWeightBase2": 500,
   "fontWeightBase3": 400,
-  "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%",
-  "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%, 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%",
+  "gradient": "colorBackgroundContent, transparent",
+  "gradientBlack": "#00000060, transparent",
+  "gradientTint": "colorBackgroundTertiary, transparent",
+  "gradientWhite": "#FFFFFF, transparent",
   "opacityDisable": 0.4,
   "opacityDisableAccessibility": 0.64,
   "sizeArrow": {
@@ -446773,10 +446773,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, 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%)",
-  "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%, 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%)",
+  "gradient": "var(--vkui--gradient, colorBackgroundContent, transparent)",
+  "gradientBlack": "var(--vkui--gradient_black, #00000060, transparent)",
+  "gradientTint": "var(--vkui--gradient_tint, colorBackgroundTertiary, transparent)",
+  "gradientWhite": "var(--vkui--gradient_white, #FFFFFF, transparent)",
   "opacityDisable": "var(--vkui--opacity_disable, 0.4)",
   "opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)",
   "sizeArrow": {
@@ -448184,10 +448184,10 @@ exports[`shapshots vkontakteAndroid theme should match root theme snapshot 1`] =
   "fontWeightBase1": 600,
   "fontWeightBase2": 500,
   "fontWeightBase3": 400,
-  "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%",
-  "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%, 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%",
+  "gradient": "colorBackgroundContent, transparent",
+  "gradientBlack": "#00000060, transparent",
+  "gradientTint": "colorBackgroundTertiary, transparent",
+  "gradientWhite": "#FFFFFF, transparent",
   "opacityDisable": 0.4,
   "opacityDisableAccessibility": 0.64,
   "sizeArrow": {
@@ -451425,19 +451425,19 @@ exports[`shapshots vkontakteAndroidDark theme should match cssVars snapshot 1`]
   },
   "gradient": {
     "name": "--vkui--gradient",
-    "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%, rgba(25, 25, 26, 1) 100%)",
+    "value": "var(--vkui--gradient, colorBackgroundContent, transparent)",
   },
   "gradientBlack": {
     "name": "--vkui--gradient_black",
-    "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%)",
+    "value": "var(--vkui--gradient_black, #00000060, transparent)",
   },
   "gradientTint": {
     "name": "--vkui--gradient_tint",
-    "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%, rgba(32, 32, 33, 1) 100%)",
+    "value": "var(--vkui--gradient_tint, colorBackgroundTertiary, transparent)",
   },
   "gradientWhite": {
     "name": "--vkui--gradient_white",
-    "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%)",
+    "value": "var(--vkui--gradient_white, #FFFFFF, transparent)",
   },
   "opacityDisable": {
     "name": "--vkui--opacity_disable",
@@ -454159,10 +454159,10 @@ exports[`shapshots vkontakteAndroidDark theme should match pixelify theme snapsh
   "fontWeightBase1": 600,
   "fontWeightBase2": 500,
   "fontWeightBase3": 400,
-  "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%, 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%, 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%",
+  "gradient": "colorBackgroundContent, transparent",
+  "gradientBlack": "#00000060, transparent",
+  "gradientTint": "colorBackgroundTertiary, transparent",
+  "gradientWhite": "#FFFFFF, transparent",
   "opacityDisable": 0.4,
   "opacityDisableAccessibility": 0.64,
   "sizeArrow": {
@@ -455570,10 +455570,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, 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%, 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%, 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%)",
+  "gradient": "var(--vkui--gradient, colorBackgroundContent, transparent)",
+  "gradientBlack": "var(--vkui--gradient_black, #00000060, transparent)",
+  "gradientTint": "var(--vkui--gradient_tint, colorBackgroundTertiary, transparent)",
+  "gradientWhite": "var(--vkui--gradient_white, #FFFFFF, transparent)",
   "opacityDisable": "var(--vkui--opacity_disable, 0.4)",
   "opacityDisableAccessibility": "var(--vkui--opacity_disable_accessibility, 0.64)",
   "sizeArrow": {
@@ -456981,10 +456981,10 @@ exports[`shapshots vkontakteAndroidDark theme should match root theme snapshot 1
   "fontWeightBase1": 600,
   "fontWeightBase2": 500,
   "fontWeightBase3": 400,
-  "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%, 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%, 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%",
+  "gradient": "colorBackgroundContent, transparent",
+  "gradientBlack": "#00000060, transparent",
+  "gradientTint": "colorBackgroundTertiary, transparent",
+  "gradientWhite": "#FFFFFF, transparent",
   "opacityDisable": 0.4,
   "opacityDisableAccessibility": 0.64,
   "sizeArrow": {
diff --git a/src/themeDescriptions/themes/vkontakteAndroid/index.ts b/src/themeDescriptions/themes/vkontakteAndroid/index.ts
index 77ba55b0..258ccf40 100644
--- a/src/themeDescriptions/themes/vkontakteAndroid/index.ts
+++ b/src/themeDescriptions/themes/vkontakteAndroid/index.ts
@@ -1,5 +1,6 @@
 import lodash from 'lodash';
 
+import { Gradients } from '@/interfaces/general/gradients';
 import { DeepPartial } from '@/interfaces/general/tools/utils';
 import type {
 	LocalVkontakteAndroidColorsDescriptionStruct,
@@ -223,7 +224,7 @@ export const vkontakteLocalColorDark: LocalVkontakteAndroidColorsDescriptionStru
 const fontFamilyAccent =
 	'"VK Sans Display", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif';
 
-const gradients: VkontakteAndroidGradients = {
+const colorGradients: VkontakteAndroidGradients = {
 	vkontakteGradientAquamarineBlue: '#7DF1FA, #2BB4D6',
 	vkontakteGradientBlue: '#66CCFF, #3F8AE0',
 	vkontakteGradientCandy: '#FF99CC, #E52E6A',
@@ -260,6 +261,13 @@ const gradients: VkontakteAndroidGradients = {
 	vkontakteGradientWomensDay: '#FF99CC, #E52E6A',
 };
 
+const gradients: Gradients = {
+	gradient: 'colorBackgroundContent, transparent',
+	gradientTint: 'colorBackgroundTertiary, transparent',
+	gradientWhite: '#FFFFFF, transparent',
+	gradientBlack: '#00000060, transparent',
+};
+
 export const vkontakteDisplayTitleFontsPartial: DeepPartial<typeof fonts> = {
 	fontDisplayTitle1: {
 		regular: {
@@ -386,7 +394,7 @@ const androidFonts: typeof fonts = lodash.merge<typeof fonts, DeepPartial<typeof
 
 export const vkontakteTokens = {
 	fontFamilyAccent,
-	...gradients,
+	...colorGradients,
 };
 
 export const vkontakteAndroidTheme: ThemeVkontakteAndroidDescription = {
@@ -399,6 +407,7 @@ export const vkontakteAndroidTheme: ThemeVkontakteAndroidDescription = {
 		...vkLightTheme.colors,
 		...vkontakteLocalColorLight,
 	},
+	...gradients,
 	...androidFonts,
 	...vkontakteTokens,
 };
@@ -414,6 +423,7 @@ export const vkontakteAndroidThemeDark: ThemeVkontakteAndroidDarkDescription = {
 		...vkDarkTheme.colors,
 		...vkontakteLocalColorDark,
 	},
+	...gradients,
 	...androidFonts,
 	...vkontakteTokens,
 };