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 = { fontDisplayTitle1: { regular: { @@ -386,7 +394,7 @@ const androidFonts: typeof fonts = lodash.merge