From 588d8563dc3d5ac22a83a273316714cee0f65acb Mon Sep 17 00:00:00 2001 From: nick Date: Wed, 14 Aug 2024 14:47:43 +0300 Subject: [PATCH] fix(vkCom): Updated primary invariably colors --- .../__snapshots__/snapthots.test.ts.snap | 192 +++++++++--------- src/themeDescriptions/themes/vkCom/index.ts | 33 ++- 2 files changed, 118 insertions(+), 107 deletions(-) diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap index 5f0dd4fb..73e0599a 100644 --- a/src/build/__snapshots__/snapthots.test.ts.snap +++ b/src/build/__snapshots__/snapthots.test.ts.snap @@ -353810,15 +353810,15 @@ exports[`shapshots vkCom theme should match cssVars snapshot 1`] = ` "colorIconPrimaryInvariably": { "active": { "name": "--vkui--color_icon_primary_invariably--active", - "value": "var(--vkui--color_icon_primary_invariably--active, #2F3034)", + "value": "var(--vkui--color_icon_primary_invariably--active, #282B2F)", }, "hover": { "name": "--vkui--color_icon_primary_invariably--hover", - "value": "var(--vkui--color_icon_primary_invariably--hover, #313233)", + "value": "var(--vkui--color_icon_primary_invariably--hover, #2A2C2F)", }, "normal": { "name": "--vkui--color_icon_primary_invariably", - "value": "var(--vkui--color_icon_primary_invariably, #333333)", + "value": "var(--vkui--color_icon_primary_invariably, #2C2D2E)", }, }, "colorIconSecondary": { @@ -354370,15 +354370,15 @@ exports[`shapshots vkCom theme should match cssVars snapshot 1`] = ` "colorTextPrimaryInvariably": { "active": { "name": "--vkui--color_text_primary_invariably--active", - "value": "var(--vkui--color_text_primary_invariably--active, #2F3034)", + "value": "var(--vkui--color_text_primary_invariably--active, #000105)", }, "hover": { "name": "--vkui--color_text_primary_invariably--hover", - "value": "var(--vkui--color_text_primary_invariably--hover, #313233)", + "value": "var(--vkui--color_text_primary_invariably--hover, #000102)", }, "normal": { "name": "--vkui--color_text_primary_invariably", - "value": "var(--vkui--color_text_primary_invariably, #333333)", + "value": "var(--vkui--color_text_primary_invariably, #000000)", }, }, "colorTextSecondary": { @@ -356588,9 +356588,9 @@ exports[`shapshots vkCom theme should match pixelify theme snapshot 1`] = ` "normal": "#2c2d2e", }, "colorIconPrimaryInvariably": { - "active": "#2F3034", - "hover": "#313233", - "normal": "#333333", + "active": "#282B2F", + "hover": "#2A2C2F", + "normal": "#2C2D2E", }, "colorIconSecondary": { "active": "#8D96A4", @@ -356788,9 +356788,9 @@ exports[`shapshots vkCom theme should match pixelify theme snapshot 1`] = ` "normal": "#000000", }, "colorTextPrimaryInvariably": { - "active": "#2F3034", - "hover": "#313233", - "normal": "#333333", + "active": "#000105", + "hover": "#000102", + "normal": "#000000", }, "colorTextSecondary": { "active": "#778292", @@ -357589,9 +357589,9 @@ exports[`shapshots vkCom theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_icon_primary, #2c2d2e)", }, "colorIconPrimaryInvariably": { - "active": "var(--vkui--color_icon_primary_invariably--active, #2F3034)", - "hover": "var(--vkui--color_icon_primary_invariably--hover, #313233)", - "normal": "var(--vkui--color_icon_primary_invariably, #333333)", + "active": "var(--vkui--color_icon_primary_invariably--active, #282B2F)", + "hover": "var(--vkui--color_icon_primary_invariably--hover, #2A2C2F)", + "normal": "var(--vkui--color_icon_primary_invariably, #2C2D2E)", }, "colorIconSecondary": { "active": "var(--vkui--color_icon_secondary--active, #8D96A4)", @@ -357789,9 +357789,9 @@ exports[`shapshots vkCom theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_text_primary, #000000)", }, "colorTextPrimaryInvariably": { - "active": "var(--vkui--color_text_primary_invariably--active, #2F3034)", - "hover": "var(--vkui--color_text_primary_invariably--hover, #313233)", - "normal": "var(--vkui--color_text_primary_invariably, #333333)", + "active": "var(--vkui--color_text_primary_invariably--active, #000105)", + "hover": "var(--vkui--color_text_primary_invariably--hover, #000102)", + "normal": "var(--vkui--color_text_primary_invariably, #000000)", }, "colorTextSecondary": { "active": "var(--vkui--color_text_secondary--active, #778292)", @@ -358590,9 +358590,9 @@ exports[`shapshots vkCom theme should match root theme snapshot 1`] = ` "normal": "#2c2d2e", }, "colorIconPrimaryInvariably": { - "active": "#2F3034", - "hover": "#313233", - "normal": "#333333", + "active": "#282B2F", + "hover": "#2A2C2F", + "normal": "#2C2D2E", }, "colorIconSecondary": { "active": "#8D96A4", @@ -358790,9 +358790,9 @@ exports[`shapshots vkCom theme should match root theme snapshot 1`] = ` "normal": "#000000", }, "colorTextPrimaryInvariably": { - "active": "#2F3034", - "hover": "#313233", - "normal": "#333333", + "active": "#000105", + "hover": "#000102", + "normal": "#000000", }, "colorTextSecondary": { "active": "#778292", @@ -360121,15 +360121,15 @@ exports[`shapshots vkComDark theme should match cssVars snapshot 1`] = ` "colorIconPrimaryInvariably": { "active": { "name": "--vkui--color_icon_primary_invariably--active", - "value": "var(--vkui--color_icon_primary_invariably--active, #434343)", + "value": "var(--vkui--color_icon_primary_invariably--active, #3D3E3F)", }, "hover": { "name": "--vkui--color_icon_primary_invariably--hover", - "value": "var(--vkui--color_icon_primary_invariably--hover, #3B3B3B)", + "value": "var(--vkui--color_icon_primary_invariably--hover, #343536)", }, "normal": { "name": "--vkui--color_icon_primary_invariably", - "value": "var(--vkui--color_icon_primary_invariably, #333333)", + "value": "var(--vkui--color_icon_primary_invariably, #2C2D2E)", }, }, "colorIconSecondary": { @@ -360681,15 +360681,15 @@ exports[`shapshots vkComDark theme should match cssVars snapshot 1`] = ` "colorTextPrimaryInvariably": { "active": { "name": "--vkui--color_text_primary_invariably--active", - "value": "var(--vkui--color_text_primary_invariably--active, #434343)", + "value": "var(--vkui--color_text_primary_invariably--active, #141414)", }, "hover": { "name": "--vkui--color_text_primary_invariably--hover", - "value": "var(--vkui--color_text_primary_invariably--hover, #3B3B3B)", + "value": "var(--vkui--color_text_primary_invariably--hover, #0A0A0A)", }, "normal": { "name": "--vkui--color_text_primary_invariably", - "value": "var(--vkui--color_text_primary_invariably, #333333)", + "value": "var(--vkui--color_text_primary_invariably, #000000)", }, }, "colorTextSecondary": { @@ -362899,9 +362899,9 @@ exports[`shapshots vkComDark theme should match pixelify theme snapshot 1`] = ` "normal": "#e1e3e6", }, "colorIconPrimaryInvariably": { - "active": "#434343", - "hover": "#3B3B3B", - "normal": "#333333", + "active": "#3D3E3F", + "hover": "#343536", + "normal": "#2C2D2E", }, "colorIconSecondary": { "active": "#8C8C8C", @@ -363099,9 +363099,9 @@ exports[`shapshots vkComDark theme should match pixelify theme snapshot 1`] = ` "normal": "#E1E3E6", }, "colorTextPrimaryInvariably": { - "active": "#434343", - "hover": "#3B3B3B", - "normal": "#333333", + "active": "#141414", + "hover": "#0A0A0A", + "normal": "#000000", }, "colorTextSecondary": { "active": "#8C8C8C", @@ -363900,9 +363900,9 @@ exports[`shapshots vkComDark theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_icon_primary, #e1e3e6)", }, "colorIconPrimaryInvariably": { - "active": "var(--vkui--color_icon_primary_invariably--active, #434343)", - "hover": "var(--vkui--color_icon_primary_invariably--hover, #3B3B3B)", - "normal": "var(--vkui--color_icon_primary_invariably, #333333)", + "active": "var(--vkui--color_icon_primary_invariably--active, #3D3E3F)", + "hover": "var(--vkui--color_icon_primary_invariably--hover, #343536)", + "normal": "var(--vkui--color_icon_primary_invariably, #2C2D2E)", }, "colorIconSecondary": { "active": "var(--vkui--color_icon_secondary--active, #8C8C8C)", @@ -364100,9 +364100,9 @@ exports[`shapshots vkComDark theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_text_primary, #E1E3E6)", }, "colorTextPrimaryInvariably": { - "active": "var(--vkui--color_text_primary_invariably--active, #434343)", - "hover": "var(--vkui--color_text_primary_invariably--hover, #3B3B3B)", - "normal": "var(--vkui--color_text_primary_invariably, #333333)", + "active": "var(--vkui--color_text_primary_invariably--active, #141414)", + "hover": "var(--vkui--color_text_primary_invariably--hover, #0A0A0A)", + "normal": "var(--vkui--color_text_primary_invariably, #000000)", }, "colorTextSecondary": { "active": "var(--vkui--color_text_secondary--active, #8C8C8C)", @@ -364901,9 +364901,9 @@ exports[`shapshots vkComDark theme should match root theme snapshot 1`] = ` "normal": "#e1e3e6", }, "colorIconPrimaryInvariably": { - "active": "#434343", - "hover": "#3B3B3B", - "normal": "#333333", + "active": "#3D3E3F", + "hover": "#343536", + "normal": "#2C2D2E", }, "colorIconSecondary": { "active": "#8C8C8C", @@ -365101,9 +365101,9 @@ exports[`shapshots vkComDark theme should match root theme snapshot 1`] = ` "normal": "#E1E3E6", }, "colorTextPrimaryInvariably": { - "active": "#434343", - "hover": "#3B3B3B", - "normal": "#333333", + "active": "#141414", + "hover": "#0A0A0A", + "normal": "#000000", }, "colorTextSecondary": { "active": "#8C8C8C", @@ -421885,15 +421885,15 @@ exports[`shapshots vkontakteCom theme should match cssVars snapshot 1`] = ` "colorIconPrimaryInvariably": { "active": { "name": "--vkui--color_icon_primary_invariably--active", - "value": "var(--vkui--color_icon_primary_invariably--active, #2F3034)", + "value": "var(--vkui--color_icon_primary_invariably--active, #282B2F)", }, "hover": { "name": "--vkui--color_icon_primary_invariably--hover", - "value": "var(--vkui--color_icon_primary_invariably--hover, #313233)", + "value": "var(--vkui--color_icon_primary_invariably--hover, #2A2C2F)", }, "normal": { "name": "--vkui--color_icon_primary_invariably", - "value": "var(--vkui--color_icon_primary_invariably, #333333)", + "value": "var(--vkui--color_icon_primary_invariably, #2C2D2E)", }, }, "colorIconSecondary": { @@ -422445,15 +422445,15 @@ exports[`shapshots vkontakteCom theme should match cssVars snapshot 1`] = ` "colorTextPrimaryInvariably": { "active": { "name": "--vkui--color_text_primary_invariably--active", - "value": "var(--vkui--color_text_primary_invariably--active, #2F3034)", + "value": "var(--vkui--color_text_primary_invariably--active, #000105)", }, "hover": { "name": "--vkui--color_text_primary_invariably--hover", - "value": "var(--vkui--color_text_primary_invariably--hover, #313233)", + "value": "var(--vkui--color_text_primary_invariably--hover, #000102)", }, "normal": { "name": "--vkui--color_text_primary_invariably", - "value": "var(--vkui--color_text_primary_invariably, #333333)", + "value": "var(--vkui--color_text_primary_invariably, #000000)", }, }, "colorTextSecondary": { @@ -425807,9 +425807,9 @@ exports[`shapshots vkontakteCom theme should match pixelify theme snapshot 1`] = "normal": "#2c2d2e", }, "colorIconPrimaryInvariably": { - "active": "#2F3034", - "hover": "#313233", - "normal": "#333333", + "active": "#282B2F", + "hover": "#2A2C2F", + "normal": "#2C2D2E", }, "colorIconSecondary": { "active": "#8D96A4", @@ -426007,9 +426007,9 @@ exports[`shapshots vkontakteCom theme should match pixelify theme snapshot 1`] = "normal": "#000000", }, "colorTextPrimaryInvariably": { - "active": "#2F3034", - "hover": "#313233", - "normal": "#333333", + "active": "#000105", + "hover": "#000102", + "normal": "#000000", }, "colorTextSecondary": { "active": "#778292", @@ -427202,9 +427202,9 @@ exports[`shapshots vkontakteCom theme should match pseudo theme from CssVars 1`] "normal": "var(--vkui--color_icon_primary, #2c2d2e)", }, "colorIconPrimaryInvariably": { - "active": "var(--vkui--color_icon_primary_invariably--active, #2F3034)", - "hover": "var(--vkui--color_icon_primary_invariably--hover, #313233)", - "normal": "var(--vkui--color_icon_primary_invariably, #333333)", + "active": "var(--vkui--color_icon_primary_invariably--active, #282B2F)", + "hover": "var(--vkui--color_icon_primary_invariably--hover, #2A2C2F)", + "normal": "var(--vkui--color_icon_primary_invariably, #2C2D2E)", }, "colorIconSecondary": { "active": "var(--vkui--color_icon_secondary--active, #8D96A4)", @@ -427402,9 +427402,9 @@ exports[`shapshots vkontakteCom theme should match pseudo theme from CssVars 1`] "normal": "var(--vkui--color_text_primary, #000000)", }, "colorTextPrimaryInvariably": { - "active": "var(--vkui--color_text_primary_invariably--active, #2F3034)", - "hover": "var(--vkui--color_text_primary_invariably--hover, #313233)", - "normal": "var(--vkui--color_text_primary_invariably, #333333)", + "active": "var(--vkui--color_text_primary_invariably--active, #000105)", + "hover": "var(--vkui--color_text_primary_invariably--hover, #000102)", + "normal": "var(--vkui--color_text_primary_invariably, #000000)", }, "colorTextSecondary": { "active": "var(--vkui--color_text_secondary--active, #778292)", @@ -428597,9 +428597,9 @@ exports[`shapshots vkontakteCom theme should match root theme snapshot 1`] = ` "normal": "#2c2d2e", }, "colorIconPrimaryInvariably": { - "active": "#2F3034", - "hover": "#313233", - "normal": "#333333", + "active": "#282B2F", + "hover": "#2A2C2F", + "normal": "#2C2D2E", }, "colorIconSecondary": { "active": "#8D96A4", @@ -428797,9 +428797,9 @@ exports[`shapshots vkontakteCom theme should match root theme snapshot 1`] = ` "normal": "#000000", }, "colorTextPrimaryInvariably": { - "active": "#2F3034", - "hover": "#313233", - "normal": "#333333", + "active": "#000105", + "hover": "#000102", + "normal": "#000000", }, "colorTextSecondary": { "active": "#778292", @@ -430522,15 +430522,15 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = ` "colorIconPrimaryInvariably": { "active": { "name": "--vkui--color_icon_primary_invariably--active", - "value": "var(--vkui--color_icon_primary_invariably--active, #434343)", + "value": "var(--vkui--color_icon_primary_invariably--active, #3D3E3F)", }, "hover": { "name": "--vkui--color_icon_primary_invariably--hover", - "value": "var(--vkui--color_icon_primary_invariably--hover, #3B3B3B)", + "value": "var(--vkui--color_icon_primary_invariably--hover, #343536)", }, "normal": { "name": "--vkui--color_icon_primary_invariably", - "value": "var(--vkui--color_icon_primary_invariably, #333333)", + "value": "var(--vkui--color_icon_primary_invariably, #2C2D2E)", }, }, "colorIconSecondary": { @@ -431082,15 +431082,15 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = ` "colorTextPrimaryInvariably": { "active": { "name": "--vkui--color_text_primary_invariably--active", - "value": "var(--vkui--color_text_primary_invariably--active, #434343)", + "value": "var(--vkui--color_text_primary_invariably--active, #141414)", }, "hover": { "name": "--vkui--color_text_primary_invariably--hover", - "value": "var(--vkui--color_text_primary_invariably--hover, #3B3B3B)", + "value": "var(--vkui--color_text_primary_invariably--hover, #0A0A0A)", }, "normal": { "name": "--vkui--color_text_primary_invariably", - "value": "var(--vkui--color_text_primary_invariably, #333333)", + "value": "var(--vkui--color_text_primary_invariably, #000000)", }, }, "colorTextSecondary": { @@ -434444,9 +434444,9 @@ exports[`shapshots vkontakteComDark theme should match pixelify theme snapshot 1 "normal": "#e1e3e6", }, "colorIconPrimaryInvariably": { - "active": "#434343", - "hover": "#3B3B3B", - "normal": "#333333", + "active": "#3D3E3F", + "hover": "#343536", + "normal": "#2C2D2E", }, "colorIconSecondary": { "active": "#8C8C8C", @@ -434644,9 +434644,9 @@ exports[`shapshots vkontakteComDark theme should match pixelify theme snapshot 1 "normal": "#E1E3E6", }, "colorTextPrimaryInvariably": { - "active": "#434343", - "hover": "#3B3B3B", - "normal": "#333333", + "active": "#141414", + "hover": "#0A0A0A", + "normal": "#000000", }, "colorTextSecondary": { "active": "#8C8C8C", @@ -435839,9 +435839,9 @@ exports[`shapshots vkontakteComDark theme should match pseudo theme from CssVars "normal": "var(--vkui--color_icon_primary, #e1e3e6)", }, "colorIconPrimaryInvariably": { - "active": "var(--vkui--color_icon_primary_invariably--active, #434343)", - "hover": "var(--vkui--color_icon_primary_invariably--hover, #3B3B3B)", - "normal": "var(--vkui--color_icon_primary_invariably, #333333)", + "active": "var(--vkui--color_icon_primary_invariably--active, #3D3E3F)", + "hover": "var(--vkui--color_icon_primary_invariably--hover, #343536)", + "normal": "var(--vkui--color_icon_primary_invariably, #2C2D2E)", }, "colorIconSecondary": { "active": "var(--vkui--color_icon_secondary--active, #8C8C8C)", @@ -436039,9 +436039,9 @@ exports[`shapshots vkontakteComDark theme should match pseudo theme from CssVars "normal": "var(--vkui--color_text_primary, #E1E3E6)", }, "colorTextPrimaryInvariably": { - "active": "var(--vkui--color_text_primary_invariably--active, #434343)", - "hover": "var(--vkui--color_text_primary_invariably--hover, #3B3B3B)", - "normal": "var(--vkui--color_text_primary_invariably, #333333)", + "active": "var(--vkui--color_text_primary_invariably--active, #141414)", + "hover": "var(--vkui--color_text_primary_invariably--hover, #0A0A0A)", + "normal": "var(--vkui--color_text_primary_invariably, #000000)", }, "colorTextSecondary": { "active": "var(--vkui--color_text_secondary--active, #8C8C8C)", @@ -437234,9 +437234,9 @@ exports[`shapshots vkontakteComDark theme should match root theme snapshot 1`] = "normal": "#e1e3e6", }, "colorIconPrimaryInvariably": { - "active": "#434343", - "hover": "#3B3B3B", - "normal": "#333333", + "active": "#3D3E3F", + "hover": "#343536", + "normal": "#2C2D2E", }, "colorIconSecondary": { "active": "#8C8C8C", @@ -437434,9 +437434,9 @@ exports[`shapshots vkontakteComDark theme should match root theme snapshot 1`] = "normal": "#E1E3E6", }, "colorTextPrimaryInvariably": { - "active": "#434343", - "hover": "#3B3B3B", - "normal": "#333333", + "active": "#141414", + "hover": "#0A0A0A", + "normal": "#000000", }, "colorTextSecondary": { "active": "#8C8C8C", diff --git a/src/themeDescriptions/themes/vkCom/index.ts b/src/themeDescriptions/themes/vkCom/index.ts index 66ba4ceb..b8a9475b 100644 --- a/src/themeDescriptions/themes/vkCom/index.ts +++ b/src/themeDescriptions/themes/vkCom/index.ts @@ -55,8 +55,8 @@ const vkComColors = (theme: typeof vkcom_light) => ({ // Text colorTextAccent: resolveColor(theme.colors.accent), colorTextAccentThemed: '#3770B1', - colorTextPrimary: resolveColor(theme.colors.text_primary), - colorTextPrimaryInvariably: resolveColor(theme.colors.media_overlay_button_foreground), + colorTextPrimary: '#000000', + colorTextPrimaryInvariably: '#000000', colorTextSecondary: resolveColor(theme.colors.text_secondary), colorTextSubhead: resolveColor(theme.colors.text_subhead), colorTextTertiary: resolveColor(theme.colors.text_tertiary), @@ -70,11 +70,11 @@ const vkComColors = (theme: typeof vkcom_light) => ({ colorTextMuted: resolveColor(theme.colors.text_muted), colorLinkContrast: '#FFFFFF', - // Icons + // Icon colorIconAccent: resolveColor(theme.colors.accent), colorIconAccentThemed: '#3770B1', // colorIconPrimary: '#E1E3E6', - colorIconPrimaryInvariably: resolveColor(theme.colors.media_overlay_button_foreground), + colorIconPrimaryInvariably: '#2C2D2E', colorIconMedium: resolveColor(theme.colors.icon_medium), colorIconMediumAlpha: resolveColor(theme.colors.icon_medium_alpha), colorIconSecondary: resolveColor(theme.colors.icon_secondary), @@ -348,7 +348,7 @@ const vkComDarkColor: ColorsDescription = { colors: { ...darkColors.colors, ...vkComColors(vkcom_dark), - + // Background colorBackgroundAccentThemed: { normal: resolveColor(vkcom_dark.colors.button_primary_background), hover: '#D8DBDF', @@ -360,26 +360,37 @@ const vkComDarkColor: ColorsDescription = { hover: 'rgba(255, 255, 255, 0.12)', active: 'rgba(255, 255, 255, 0.14)', }, - colorButtonText: '#E1E3E6', - colorButtonIcon: '#E1E3E6', - colorButtonStroke: '#E1E3E6', - colorOverlaySecondary: 'rgba(55, 56, 57, 0.5)', colorBackgroundContrastThemed: '#323232', + colorBackgroundModalInverse: '#FFFFFF', + + // Text + colorTextPrimary: '#E1E3E6', colorTextAccentThemed: '#E1E3E6', + colorLinkContrast: '#FFFFFF', + + // Icon colorIconAccentThemed: '#E1E3E6', + + // Stroke colorStrokeAccentThemed: '#E1E3E6', - colorBackgroundModalInverse: '#FFFFFF', - colorLinkContrast: '#FFFFFF', colorSeparatorPrimary: '#363738', colorSeparatorPrimary2x: '#444546', colorSeparatorPrimary3x: '#505253', colorBackgroundNegativeTint: '#522E2E', colorBackgroundPositiveTint: '#2F422F', + + // Palette colorAccentLime: '#CAF96C', colorAccentCyan: '#55F1D2', colorAccentAzure: '#5D9EE9', colorAccentViolet: '#A94FFF', colorAccentPink: '#F899FF', + + // Other + colorOverlaySecondary: 'rgba(55, 56, 57, 0.5)', + colorButtonText: '#E1E3E6', + colorButtonIcon: '#E1E3E6', + colorButtonStroke: '#E1E3E6', }, };