From c9eae030e5eaceffc8aa71984d1bd4fd11575051 Mon Sep 17 00:00:00 2001 From: Denis Nekhoroshev Date: Fri, 8 Nov 2024 10:29:07 +0300 Subject: [PATCH 1/3] update mediaprojects colors --- .../__snapshots__/snapthots.test.ts.snap | 96 +++++++++---------- .../common/colors/projectColors.ts | 2 - src/themeDescriptions/themes/media/index.ts | 5 + 3 files changed, 53 insertions(+), 50 deletions(-) diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap index af81a629..dd3a751d 100644 --- a/src/build/__snapshots__/snapthots.test.ts.snap +++ b/src/build/__snapshots__/snapthots.test.ts.snap @@ -89938,15 +89938,15 @@ exports[`shapshots media theme should match cssVars snapshot 1`] = ` "colorPrimaryPets": { "active": { "name": "--vkui--color_primary_pets--active", - "value": "var(--vkui--color_primary_pets--active, #006FEF)", + "value": "var(--vkui--color_primary_pets--active, #fc627e)", }, "hover": { "name": "--vkui--color_primary_pets--hover", - "value": "var(--vkui--color_primary_pets--hover, #0073F7)", + "value": "var(--vkui--color_primary_pets--hover, #ec4d6a)", }, "normal": { "name": "--vkui--color_primary_pets", - "value": "var(--vkui--color_primary_pets, #0077FF)", + "value": "var(--vkui--color_primary_pets, #fc738c)", }, }, "colorPrimaryPharma": { @@ -95397,9 +95397,9 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "normal": "#00abf2", }, "colorPrimaryPets": { - "active": "#006FEF", - "hover": "#0073F7", - "normal": "#0077FF", + "active": "#fc627e", + "hover": "#ec4d6a", + "normal": "#fc738c", }, "colorPrimaryPharma": { "active": "#1BC39A", @@ -97260,9 +97260,9 @@ exports[`shapshots media theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_primary_mycom, #00abf2)", }, "colorPrimaryPets": { - "active": "var(--vkui--color_primary_pets--active, #006FEF)", - "hover": "var(--vkui--color_primary_pets--hover, #0073F7)", - "normal": "var(--vkui--color_primary_pets, #0077FF)", + "active": "var(--vkui--color_primary_pets--active, #fc627e)", + "hover": "var(--vkui--color_primary_pets--hover, #ec4d6a)", + "normal": "var(--vkui--color_primary_pets, #fc738c)", }, "colorPrimaryPharma": { "active": "var(--vkui--color_primary_pharma--active, #1BC39A)", @@ -99123,9 +99123,9 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "normal": "#00abf2", }, "colorPrimaryPets": { - "active": "#006FEF", - "hover": "#0073F7", - "normal": "#0077FF", + "active": "#fc627e", + "hover": "#ec4d6a", + "normal": "#fc738c", }, "colorPrimaryPharma": { "active": "#1BC39A", @@ -101885,15 +101885,15 @@ exports[`shapshots mediaDark theme should match cssVars snapshot 1`] = ` "colorPrimaryPets": { "active": { "name": "--vkui--color_primary_pets--active", - "value": "var(--vkui--color_primary_pets--active, #1482FF)", + "value": "var(--vkui--color_primary_pets--active, #fc627e)", }, "hover": { "name": "--vkui--color_primary_pets--hover", - "value": "var(--vkui--color_primary_pets--hover, #0A7CFF)", + "value": "var(--vkui--color_primary_pets--hover, #ec4d6a)", }, "normal": { "name": "--vkui--color_primary_pets", - "value": "var(--vkui--color_primary_pets, #0077FF)", + "value": "var(--vkui--color_primary_pets, #fc738c)", }, }, "colorPrimaryPharma": { @@ -107344,9 +107344,9 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "normal": "#00abf2", }, "colorPrimaryPets": { - "active": "#1482FF", - "hover": "#0A7CFF", - "normal": "#0077FF", + "active": "#fc627e", + "hover": "#ec4d6a", + "normal": "#fc738c", }, "colorPrimaryPharma": { "active": "#2FD7A9", @@ -109207,9 +109207,9 @@ exports[`shapshots mediaDark theme should match pseudo theme from CssVars 1`] = "normal": "var(--vkui--color_primary_mycom, #00abf2)", }, "colorPrimaryPets": { - "active": "var(--vkui--color_primary_pets--active, #1482FF)", - "hover": "var(--vkui--color_primary_pets--hover, #0A7CFF)", - "normal": "var(--vkui--color_primary_pets, #0077FF)", + "active": "var(--vkui--color_primary_pets--active, #fc627e)", + "hover": "var(--vkui--color_primary_pets--hover, #ec4d6a)", + "normal": "var(--vkui--color_primary_pets, #fc738c)", }, "colorPrimaryPharma": { "active": "var(--vkui--color_primary_pharma--active, #2FD7A9)", @@ -111070,9 +111070,9 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "normal": "#00abf2", }, "colorPrimaryPets": { - "active": "#1482FF", - "hover": "#0A7CFF", - "normal": "#0077FF", + "active": "#fc627e", + "hover": "#ec4d6a", + "normal": "#fc738c", }, "colorPrimaryPharma": { "active": "#2FD7A9", @@ -113832,15 +113832,15 @@ exports[`shapshots mycom theme should match cssVars snapshot 1`] = ` "colorPrimaryPets": { "active": { "name": "--vkui--color_primary_pets--active", - "value": "var(--vkui--color_primary_pets--active, #006FEF)", + "value": "var(--vkui--color_primary_pets--active, #fc627e)", }, "hover": { "name": "--vkui--color_primary_pets--hover", - "value": "var(--vkui--color_primary_pets--hover, #0073F7)", + "value": "var(--vkui--color_primary_pets--hover, #ec4d6a)", }, "normal": { "name": "--vkui--color_primary_pets", - "value": "var(--vkui--color_primary_pets, #0077FF)", + "value": "var(--vkui--color_primary_pets, #fc738c)", }, }, "colorPrimaryPharma": { @@ -119297,9 +119297,9 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "normal": "#00abf2", }, "colorPrimaryPets": { - "active": "#006FEF", - "hover": "#0073F7", - "normal": "#0077FF", + "active": "#fc627e", + "hover": "#ec4d6a", + "normal": "#fc738c", }, "colorPrimaryPharma": { "active": "#1BC39A", @@ -121163,9 +121163,9 @@ exports[`shapshots mycom theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_primary_mycom, #00abf2)", }, "colorPrimaryPets": { - "active": "var(--vkui--color_primary_pets--active, #006FEF)", - "hover": "var(--vkui--color_primary_pets--hover, #0073F7)", - "normal": "var(--vkui--color_primary_pets, #0077FF)", + "active": "var(--vkui--color_primary_pets--active, #fc627e)", + "hover": "var(--vkui--color_primary_pets--hover, #ec4d6a)", + "normal": "var(--vkui--color_primary_pets, #fc738c)", }, "colorPrimaryPharma": { "active": "var(--vkui--color_primary_pharma--active, #1BC39A)", @@ -123029,9 +123029,9 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "normal": "#00abf2", }, "colorPrimaryPets": { - "active": "#006FEF", - "hover": "#0073F7", - "normal": "#0077FF", + "active": "#fc627e", + "hover": "#ec4d6a", + "normal": "#fc738c", }, "colorPrimaryPharma": { "active": "#1BC39A", @@ -270529,15 +270529,15 @@ exports[`shapshots pharma theme should match cssVars snapshot 1`] = ` "colorPrimaryPets": { "active": { "name": "--vkui--color_primary_pets--active", - "value": "var(--vkui--color_primary_pets--active, #006FEF)", + "value": "var(--vkui--color_primary_pets--active, #fc627e)", }, "hover": { "name": "--vkui--color_primary_pets--hover", - "value": "var(--vkui--color_primary_pets--hover, #0073F7)", + "value": "var(--vkui--color_primary_pets--hover, #ec4d6a)", }, "normal": { "name": "--vkui--color_primary_pets", - "value": "var(--vkui--color_primary_pets, #0077FF)", + "value": "var(--vkui--color_primary_pets, #fc738c)", }, }, "colorPrimaryPharma": { @@ -276002,9 +276002,9 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "normal": "#00abf2", }, "colorPrimaryPets": { - "active": "#006FEF", - "hover": "#0073F7", - "normal": "#0077FF", + "active": "#fc627e", + "hover": "#ec4d6a", + "normal": "#fc738c", }, "colorPrimaryPharma": { "active": "#1BC39A", @@ -277870,9 +277870,9 @@ exports[`shapshots pharma theme should match pseudo theme from CssVars 1`] = ` "normal": "var(--vkui--color_primary_mycom, #00abf2)", }, "colorPrimaryPets": { - "active": "var(--vkui--color_primary_pets--active, #006FEF)", - "hover": "var(--vkui--color_primary_pets--hover, #0073F7)", - "normal": "var(--vkui--color_primary_pets, #0077FF)", + "active": "var(--vkui--color_primary_pets--active, #fc627e)", + "hover": "var(--vkui--color_primary_pets--hover, #ec4d6a)", + "normal": "var(--vkui--color_primary_pets, #fc738c)", }, "colorPrimaryPharma": { "active": "var(--vkui--color_primary_pharma--active, #1BC39A)", @@ -279738,9 +279738,9 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "normal": "#00abf2", }, "colorPrimaryPets": { - "active": "#006FEF", - "hover": "#0073F7", - "normal": "#0077FF", + "active": "#fc627e", + "hover": "#ec4d6a", + "normal": "#fc738c", }, "colorPrimaryPharma": { "active": "#1BC39A", diff --git a/src/themeDescriptions/common/colors/projectColors.ts b/src/themeDescriptions/common/colors/projectColors.ts index 58884844..2f2f7a5a 100644 --- a/src/themeDescriptions/common/colors/projectColors.ts +++ b/src/themeDescriptions/common/colors/projectColors.ts @@ -13,7 +13,6 @@ export type ProjectColors = { colorPrimaryMycom: Property.Color; colorPrimaryRealty: Property.Color; colorPrimaryPharma: Property.Color; - colorPrimaryPets: Property.Color; colorSecondaryBase: Property.Color; colorSecondaryHealth: Property.Color; @@ -33,7 +32,6 @@ export const projectColors: ProjectColors = { colorPrimaryMycom: '#00abf2', colorPrimaryRealty: '#0077FF', colorPrimaryPharma: '#1DD3A2', - colorPrimaryPets: '#0077FF', colorSecondaryBase: '#0077FF', colorSecondaryHealth: '#0077FF', diff --git a/src/themeDescriptions/themes/media/index.ts b/src/themeDescriptions/themes/media/index.ts index b73ab36f..b39b461c 100644 --- a/src/themeDescriptions/themes/media/index.ts +++ b/src/themeDescriptions/themes/media/index.ts @@ -38,6 +38,11 @@ export const mediaTheme: ThemeMediaDescription = { ...lightTheme.colors, ...projectColors, ...socialColors, + colorPrimaryPets: { + normal: '#fc738c', + hover: '#ec4d6a', + active: '#fc627e', + }, }, breakpoints: { From 1261e4f07a376fa568ce6ee56a09d20716c45147 Mon Sep 17 00:00:00 2001 From: Denis Nekhoroshev Date: Fri, 8 Nov 2024 10:55:14 +0300 Subject: [PATCH 2/3] change grid token for large viewport --- .../__snapshots__/snapthots.test.ts.snap | 32 +++++++++---------- src/themeDescriptions/themes/media/index.ts | 2 +- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap index dd3a751d..da602a55 100644 --- a/src/build/__snapshots__/snapthots.test.ts.snap +++ b/src/build/__snapshots__/snapthots.test.ts.snap @@ -92094,7 +92094,7 @@ exports[`shapshots media theme should match cssVars snapshot 1`] = ` }, "large": { "name": "--vkui--grid_aside_content--large", - "value": "var(--vkui--grid_aside_content--large, 300px)", + "value": "var(--vkui--grid_aside_content--large, 380px)", }, "regular": { "name": "--vkui--grid_aside_content--regular", @@ -95996,7 +95996,7 @@ exports[`shapshots media theme should match pixelify theme snapshot 1`] = ` "gridAsideContent": { "compact": "300px", "compactX": "300px", - "large": "300px", + "large": "380px", "regular": "100%", }, "gridColumnX2": { @@ -97859,7 +97859,7 @@ exports[`shapshots media theme should match pseudo theme from CssVars 1`] = ` "gridAsideContent": { "compact": "var(--vkui--grid_aside_content--compact, 300px)", "compactX": "var(--vkui--grid_aside_content--compact_x, 300px)", - "large": "var(--vkui--grid_aside_content--large, 300px)", + "large": "var(--vkui--grid_aside_content--large, 380px)", "regular": "var(--vkui--grid_aside_content--regular, 100%)", }, "gridColumnX2": { @@ -99722,7 +99722,7 @@ exports[`shapshots media theme should match root theme snapshot 1`] = ` "gridAsideContent": { "compact": 300, "compactX": 300, - "large": 300, + "large": 380, "regular": "100%", }, "gridColumnX2": { @@ -104041,7 +104041,7 @@ exports[`shapshots mediaDark theme should match cssVars snapshot 1`] = ` }, "large": { "name": "--vkui--grid_aside_content--large", - "value": "var(--vkui--grid_aside_content--large, 300px)", + "value": "var(--vkui--grid_aside_content--large, 380px)", }, "regular": { "name": "--vkui--grid_aside_content--regular", @@ -107943,7 +107943,7 @@ exports[`shapshots mediaDark theme should match pixelify theme snapshot 1`] = ` "gridAsideContent": { "compact": "300px", "compactX": "300px", - "large": "300px", + "large": "380px", "regular": "100%", }, "gridColumnX2": { @@ -109806,7 +109806,7 @@ exports[`shapshots mediaDark theme should match pseudo theme from CssVars 1`] = "gridAsideContent": { "compact": "var(--vkui--grid_aside_content--compact, 300px)", "compactX": "var(--vkui--grid_aside_content--compact_x, 300px)", - "large": "var(--vkui--grid_aside_content--large, 300px)", + "large": "var(--vkui--grid_aside_content--large, 380px)", "regular": "var(--vkui--grid_aside_content--regular, 100%)", }, "gridColumnX2": { @@ -111669,7 +111669,7 @@ exports[`shapshots mediaDark theme should match root theme snapshot 1`] = ` "gridAsideContent": { "compact": 300, "compactX": 300, - "large": 300, + "large": 380, "regular": "100%", }, "gridColumnX2": { @@ -116006,7 +116006,7 @@ exports[`shapshots mycom theme should match cssVars snapshot 1`] = ` }, "large": { "name": "--vkui--grid_aside_content--large", - "value": "var(--vkui--grid_aside_content--large, 300px)", + "value": "var(--vkui--grid_aside_content--large, 380px)", }, "regular": { "name": "--vkui--grid_aside_content--regular", @@ -119902,7 +119902,7 @@ exports[`shapshots mycom theme should match pixelify theme snapshot 1`] = ` "gridAsideContent": { "compact": "300px", "compactX": "300px", - "large": "300px", + "large": "380px", "regular": "100%", }, "gridColumnX2": { @@ -121768,7 +121768,7 @@ exports[`shapshots mycom theme should match pseudo theme from CssVars 1`] = ` "gridAsideContent": { "compact": "var(--vkui--grid_aside_content--compact, 300px)", "compactX": "var(--vkui--grid_aside_content--compact_x, 300px)", - "large": "var(--vkui--grid_aside_content--large, 300px)", + "large": "var(--vkui--grid_aside_content--large, 380px)", "regular": "var(--vkui--grid_aside_content--regular, 100%)", }, "gridColumnX2": { @@ -123634,7 +123634,7 @@ exports[`shapshots mycom theme should match root theme snapshot 1`] = ` "gridAsideContent": { "compact": 300, "compactX": 300, - "large": 300, + "large": 380, "regular": "100%", }, "gridColumnX2": { @@ -272699,7 +272699,7 @@ exports[`shapshots pharma theme should match cssVars snapshot 1`] = ` }, "large": { "name": "--vkui--grid_aside_content--large", - "value": "var(--vkui--grid_aside_content--large, 300px)", + "value": "var(--vkui--grid_aside_content--large, 380px)", }, "regular": { "name": "--vkui--grid_aside_content--regular", @@ -276606,7 +276606,7 @@ exports[`shapshots pharma theme should match pixelify theme snapshot 1`] = ` "gridAsideContent": { "compact": "300px", "compactX": "300px", - "large": "300px", + "large": "380px", "regular": "100%", }, "gridColumnX2": { @@ -278474,7 +278474,7 @@ exports[`shapshots pharma theme should match pseudo theme from CssVars 1`] = ` "gridAsideContent": { "compact": "var(--vkui--grid_aside_content--compact, 300px)", "compactX": "var(--vkui--grid_aside_content--compact_x, 300px)", - "large": "var(--vkui--grid_aside_content--large, 300px)", + "large": "var(--vkui--grid_aside_content--large, 380px)", "regular": "var(--vkui--grid_aside_content--regular, 100%)", }, "gridColumnX2": { @@ -280342,7 +280342,7 @@ exports[`shapshots pharma theme should match root theme snapshot 1`] = ` "gridAsideContent": { "compact": 300, "compactX": 300, - "large": 300, + "large": 380, "regular": "100%", }, "gridColumnX2": { diff --git a/src/themeDescriptions/themes/media/index.ts b/src/themeDescriptions/themes/media/index.ts index b39b461c..b6daa9d2 100644 --- a/src/themeDescriptions/themes/media/index.ts +++ b/src/themeDescriptions/themes/media/index.ts @@ -569,7 +569,7 @@ export const mediaTheme: ThemeMediaDescription = { regular: '100%', compactX: 300, compact: 300, - large: 300, + large: 380, }, mediaSizeGap: 20, mediaSizeGrid: 60, From 4e51746be4a06d0db9babc676bf53d287b2a2e50 Mon Sep 17 00:00:00 2001 From: "s.peshkov" Date: Wed, 4 Dec 2024 12:39:27 +0300 Subject: [PATCH 3/3] 4.56.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index edc2e8f9..9893cb52 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vkontakte/vkui-tokens", - "version": "4.56.2", + "version": "4.56.3", "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm", "license": "MIT", "homepage": "https://vkcom.github.io/vkui-tokens",