Skip to content

Commit

Permalink
feat(Android): Added tokenized gradients
Browse files Browse the repository at this point in the history
  • Loading branch information
@qurle
qurle committed Sep 9, 2024
1 parent f740172 commit 2f20105
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 34 deletions.
64 changes: 32 additions & 32 deletions src/build/__snapshots__/snapthots.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down Expand Up @@ -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": {
Expand Down
14 changes: 12 additions & 2 deletions src/themeDescriptions/themes/vkontakteAndroid/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import lodash from 'lodash';

import { Gradients } from '@/interfaces/general/gradients';
import { DeepPartial } from '@/interfaces/general/tools/utils';
import type {
LocalVkontakteAndroidColorsDescriptionStruct,
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -386,7 +394,7 @@ const androidFonts: typeof fonts = lodash.merge<typeof fonts, DeepPartial<typeof

export const vkontakteTokens = {
fontFamilyAccent,
...gradients,
...colorGradients,
};

export const vkontakteAndroidTheme: ThemeVkontakteAndroidDescription = {
Expand All @@ -399,6 +407,7 @@ export const vkontakteAndroidTheme: ThemeVkontakteAndroidDescription = {
...vkLightTheme.colors,
...vkontakteLocalColorLight,
},
...gradients,
...androidFonts,
...vkontakteTokens,
};
Expand All @@ -414,6 +423,7 @@ export const vkontakteAndroidThemeDark: ThemeVkontakteAndroidDarkDescription = {
...vkDarkTheme.colors,
...vkontakteLocalColorDark,
},
...gradients,
...androidFonts,
...vkontakteTokens,
};

0 comments on commit 2f20105

Please sign in to comment.