diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap index ebafa3cf..ee906c96 100644 --- a/src/build/__snapshots__/snapthots.test.ts.snap +++ b/src/build/__snapshots__/snapthots.test.ts.snap @@ -388508,15 +388508,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": { @@ -389068,15 +389068,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": { @@ -391286,9 +391286,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", @@ -391486,9 +391486,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", @@ -392287,9 +392287,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)", @@ -392487,9 +392487,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)", @@ -393288,9 +393288,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", @@ -393488,9 +393488,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", @@ -394819,15 +394819,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": { @@ -395379,15 +395379,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": { @@ -397597,9 +397597,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", @@ -397797,9 +397797,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", @@ -398598,9 +398598,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)", @@ -398798,9 +398798,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)", @@ -399599,9 +399599,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", @@ -399799,9 +399799,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", @@ -456583,15 +456583,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": { @@ -457143,15 +457143,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": { @@ -460505,9 +460505,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", @@ -460705,9 +460705,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", @@ -461900,9 +461900,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)", @@ -462100,9 +462100,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)", @@ -463295,9 +463295,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", @@ -463495,9 +463495,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", @@ -465220,15 +465220,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": { @@ -465780,15 +465780,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": { @@ -469142,9 +469142,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", @@ -469342,9 +469342,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", @@ -470537,9 +470537,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)", @@ -470737,9 +470737,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)", @@ -471932,9 +471932,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", @@ -472132,9 +472132,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', }, };