fix(vkontakteCom, vkontakteAndroid): Included colorStrokePrimary (#1151)

VKCOM · Dec 19, 2024 · ed80609 · ed80609
1 parent d85b091
commit ed80609
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.58.0",
+  "version": "4.58.1",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",

diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap
@@ -476608,6 +476608,20 @@ exports[`shapshots vkontakteAndroid theme should match cssVars snapshot 1`] = `
       "value": "var(--vkui--color_stroke_positive, #4bb34b)",
     },
   },
+  "colorStrokePrimary": {
+    "active": {
+      "name": "--vkui--color_stroke_primary--active",
+      "value": "var(--vkui--color_stroke_primary--active, #282B2F)",
+    },
+    "hover": {
+      "name": "--vkui--color_stroke_primary--hover",
+      "value": "var(--vkui--color_stroke_primary--hover, #2A2C2F)",
+    },
+    "normal": {
+      "name": "--vkui--color_stroke_primary",
+      "value": "var(--vkui--color_stroke_primary, #2C2D2E)",
+    },
+  },
   "colorTabbarTextInactive": {
     "active": {
       "name": "--vkui--color_tabbar_text_inactive--active",
@@ -480574,6 +480588,11 @@ exports[`shapshots vkontakteAndroid theme should match pixelify theme snapshot 1
     "hover": "#48AC4A",
     "normal": "#4bb34b",
   },
+  "colorStrokePrimary": {
+    "active": "#282B2F",
+    "hover": "#2A2C2F",
+    "normal": "#2C2D2E",
+  },
   "colorTabbarTextInactive": {
     "active": "#8D96A4",
     "hover": "#939CA9",
@@ -482050,6 +482069,11 @@ exports[`shapshots vkontakteAndroid theme should match pseudo theme from CssVars
     "hover": "var(--vkui--color_stroke_positive--hover, #48AC4A)",
     "normal": "var(--vkui--color_stroke_positive, #4bb34b)",
   },
+  "colorStrokePrimary": {
+    "active": "var(--vkui--color_stroke_primary--active, #282B2F)",
+    "hover": "var(--vkui--color_stroke_primary--hover, #2A2C2F)",
+    "normal": "var(--vkui--color_stroke_primary, #2C2D2E)",
+  },
   "colorTabbarTextInactive": {
     "active": "var(--vkui--color_tabbar_text_inactive--active, #8D96A4)",
     "hover": "var(--vkui--color_tabbar_text_inactive--hover, #939CA9)",
@@ -483526,6 +483550,11 @@ exports[`shapshots vkontakteAndroid theme should match root theme snapshot 1`] =
     "hover": "#48AC4A",
     "normal": "#4bb34b",
   },
+  "colorStrokePrimary": {
+    "active": "#282B2F",
+    "hover": "#2A2C2F",
+    "normal": "#2C2D2E",
+  },
   "colorTabbarTextInactive": {
     "active": "#8D96A4",
     "hover": "#939CA9",
@@ -485782,6 +485811,20 @@ exports[`shapshots vkontakteAndroidDark theme should match cssVars snapshot 1`]
       "value": "var(--vkui--color_stroke_positive, #4bb34b)",
     },
   },
+  "colorStrokePrimary": {
+    "active": {
+      "name": "--vkui--color_stroke_primary--active",
+      "value": "var(--vkui--color_stroke_primary--active, #E3E5E8)",
+    },
+    "hover": {
+      "name": "--vkui--color_stroke_primary--hover",
+      "value": "var(--vkui--color_stroke_primary--hover, #E2E4E7)",
+    },
+    "normal": {
+      "name": "--vkui--color_stroke_primary",
+      "value": "var(--vkui--color_stroke_primary, #E1E3E6)",
+    },
+  },
   "colorTabbarTextInactive": {
     "active": {
       "name": "--vkui--color_tabbar_text_inactive--active",
@@ -489748,6 +489791,11 @@ exports[`shapshots vkontakteAndroidDark theme should match pixelify theme snapsh
     "hover": "#52B652",
     "normal": "#4bb34b",
   },
+  "colorStrokePrimary": {
+    "active": "#E3E5E8",
+    "hover": "#E2E4E7",
+    "normal": "#E1E3E6",
+  },
   "colorTabbarTextInactive": {
     "active": "#818385",
     "hover": "#7B7D7F",
@@ -491224,6 +491272,11 @@ exports[`shapshots vkontakteAndroidDark theme should match pseudo theme from Css
     "hover": "var(--vkui--color_stroke_positive--hover, #52B652)",
     "normal": "var(--vkui--color_stroke_positive, #4bb34b)",
   },
+  "colorStrokePrimary": {
+    "active": "var(--vkui--color_stroke_primary--active, #E3E5E8)",
+    "hover": "var(--vkui--color_stroke_primary--hover, #E2E4E7)",
+    "normal": "var(--vkui--color_stroke_primary, #E1E3E6)",
+  },
   "colorTabbarTextInactive": {
     "active": "var(--vkui--color_tabbar_text_inactive--active, #818385)",
     "hover": "var(--vkui--color_tabbar_text_inactive--hover, #7B7D7F)",
@@ -492700,6 +492753,11 @@ exports[`shapshots vkontakteAndroidDark theme should match root theme snapshot 1
     "hover": "#52B652",
     "normal": "#4bb34b",
   },
+  "colorStrokePrimary": {
+    "active": "#E3E5E8",
+    "hover": "#E2E4E7",
+    "normal": "#E1E3E6",
+  },
   "colorTabbarTextInactive": {
     "active": "#818385",
     "hover": "#7B7D7F",
@@ -494956,6 +495014,20 @@ exports[`shapshots vkontakteCom theme should match cssVars snapshot 1`] = `
       "value": "var(--vkui--color_stroke_positive, #4BB34B)",
     },
   },
+  "colorStrokePrimary": {
+    "active": {
+      "name": "--vkui--color_stroke_primary--active",
+      "value": "var(--vkui--color_stroke_primary--active, #282B2F)",
+    },
+    "hover": {
+      "name": "--vkui--color_stroke_primary--hover",
+      "value": "var(--vkui--color_stroke_primary--hover, #2A2C2F)",
+    },
+    "normal": {
+      "name": "--vkui--color_stroke_primary",
+      "value": "var(--vkui--color_stroke_primary, #2C2D2E)",
+    },
+  },
   "colorTabbarTextInactive": {
     "active": {
       "name": "--vkui--color_tabbar_text_inactive--active",
@@ -498810,6 +498882,11 @@ exports[`shapshots vkontakteCom theme should match pixelify theme snapshot 1`] =
     "hover": "#48AC4A",
     "normal": "#4BB34B",
   },
+  "colorStrokePrimary": {
+    "active": "#282B2F",
+    "hover": "#2A2C2F",
+    "normal": "#2C2D2E",
+  },
   "colorTabbarTextInactive": {
     "active": "#8D96A4",
     "hover": "#939CA9",
@@ -500270,6 +500347,11 @@ exports[`shapshots vkontakteCom theme should match pseudo theme from CssVars 1`]
     "hover": "var(--vkui--color_stroke_positive--hover, #48AC4A)",
     "normal": "var(--vkui--color_stroke_positive, #4BB34B)",
   },
+  "colorStrokePrimary": {
+    "active": "var(--vkui--color_stroke_primary--active, #282B2F)",
+    "hover": "var(--vkui--color_stroke_primary--hover, #2A2C2F)",
+    "normal": "var(--vkui--color_stroke_primary, #2C2D2E)",
+  },
   "colorTabbarTextInactive": {
     "active": "var(--vkui--color_tabbar_text_inactive--active, #8D96A4)",
     "hover": "var(--vkui--color_tabbar_text_inactive--hover, #939CA9)",
@@ -501730,6 +501812,11 @@ exports[`shapshots vkontakteCom theme should match root theme snapshot 1`] = `
     "hover": "#48AC4A",
     "normal": "#4BB34B",
   },
+  "colorStrokePrimary": {
+    "active": "#282B2F",
+    "hover": "#2A2C2F",
+    "normal": "#2C2D2E",
+  },
   "colorTabbarTextInactive": {
     "active": "#8D96A4",
     "hover": "#939CA9",
@@ -503970,6 +504057,20 @@ exports[`shapshots vkontakteComDark theme should match cssVars snapshot 1`] = `
       "value": "var(--vkui--color_stroke_positive, #4BB34B)",
     },
   },
+  "colorStrokePrimary": {
+    "active": {
+      "name": "--vkui--color_stroke_primary--active",
+      "value": "var(--vkui--color_stroke_primary--active, #E3E5E8)",
+    },
+    "hover": {
+      "name": "--vkui--color_stroke_primary--hover",
+      "value": "var(--vkui--color_stroke_primary--hover, #E2E4E7)",
+    },
+    "normal": {
+      "name": "--vkui--color_stroke_primary",
+      "value": "var(--vkui--color_stroke_primary, #E1E3E6)",
+    },
+  },
   "colorTabbarTextInactive": {
     "active": {
       "name": "--vkui--color_tabbar_text_inactive--active",
@@ -507824,6 +507925,11 @@ exports[`shapshots vkontakteComDark theme should match pixelify theme snapshot 1
     "hover": "#52B652",
     "normal": "#4BB34B",
   },
+  "colorStrokePrimary": {
+    "active": "#E3E5E8",
+    "hover": "#E2E4E7",
+    "normal": "#E1E3E6",
+  },
   "colorTabbarTextInactive": {
     "active": "#818385",
     "hover": "#7B7D7F",
@@ -509284,6 +509390,11 @@ exports[`shapshots vkontakteComDark theme should match pseudo theme from CssVars
     "hover": "var(--vkui--color_stroke_positive--hover, #52B652)",
     "normal": "var(--vkui--color_stroke_positive, #4BB34B)",
   },
+  "colorStrokePrimary": {
+    "active": "var(--vkui--color_stroke_primary--active, #E3E5E8)",
+    "hover": "var(--vkui--color_stroke_primary--hover, #E2E4E7)",
+    "normal": "var(--vkui--color_stroke_primary, #E1E3E6)",
+  },
   "colorTabbarTextInactive": {
     "active": "var(--vkui--color_tabbar_text_inactive--active, #818385)",
     "hover": "var(--vkui--color_tabbar_text_inactive--hover, #7B7D7F)",
@@ -510744,6 +510855,11 @@ exports[`shapshots vkontakteComDark theme should match root theme snapshot 1`] =
     "hover": "#52B652",
     "normal": "#4BB34B",
   },
+  "colorStrokePrimary": {
+    "active": "#E3E5E8",
+    "hover": "#E2E4E7",
+    "normal": "#E1E3E6",
+  },
   "colorTabbarTextInactive": {
     "active": "#818385",
     "hover": "#7B7D7F",
@@ -512984,6 +513100,20 @@ exports[`shapshots vkontakteIOS theme should match cssVars snapshot 1`] = `
       "value": "var(--vkui--color_stroke_positive, #4bb34b)",
     },
   },
+  "colorStrokePrimary": {
+    "active": {
+      "name": "--vkui--color_stroke_primary--active",
+      "value": "var(--vkui--color_stroke_primary--active, #282B2F)",
+    },
+    "hover": {
+      "name": "--vkui--color_stroke_primary--hover",
+      "value": "var(--vkui--color_stroke_primary--hover, #2A2C2F)",
+    },
+    "normal": {
+      "name": "--vkui--color_stroke_primary",
+      "value": "var(--vkui--color_stroke_primary, #2C2D2E)",
+    },
+  },
   "colorTabbarTextInactive": {
     "active": {
       "name": "--vkui--color_tabbar_text_inactive--active",
@@ -516838,6 +516968,11 @@ exports[`shapshots vkontakteIOS theme should match pixelify theme snapshot 1`] =
     "hover": "#48AC4A",
     "normal": "#4bb34b",
   },
+  "colorStrokePrimary": {
+    "active": "#282B2F",
+    "hover": "#2A2C2F",
+    "normal": "#2C2D2E",
+  },
   "colorTabbarTextInactive": {
     "active": "#8D96A4",
     "hover": "#939CA9",
@@ -518298,6 +518433,11 @@ exports[`shapshots vkontakteIOS theme should match pseudo theme from CssVars 1`]
     "hover": "var(--vkui--color_stroke_positive--hover, #48AC4A)",
     "normal": "var(--vkui--color_stroke_positive, #4bb34b)",
   },
+  "colorStrokePrimary": {
+    "active": "var(--vkui--color_stroke_primary--active, #282B2F)",
+    "hover": "var(--vkui--color_stroke_primary--hover, #2A2C2F)",
+    "normal": "var(--vkui--color_stroke_primary, #2C2D2E)",
+  },
   "colorTabbarTextInactive": {
     "active": "var(--vkui--color_tabbar_text_inactive--active, #8D96A4)",
     "hover": "var(--vkui--color_tabbar_text_inactive--hover, #939CA9)",
@@ -519758,6 +519898,11 @@ exports[`shapshots vkontakteIOS theme should match root theme snapshot 1`] = `
     "hover": "#48AC4A",
     "normal": "#4bb34b",
   },
+  "colorStrokePrimary": {
+    "active": "#282B2F",
+    "hover": "#2A2C2F",
+    "normal": "#2C2D2E",
+  },
   "colorTabbarTextInactive": {
     "active": "#8D96A4",
     "hover": "#939CA9",
@@ -521998,6 +522143,20 @@ exports[`shapshots vkontakteIOSDark theme should match cssVars snapshot 1`] = `
       "value": "var(--vkui--color_stroke_positive, #4bb34b)",
     },
   },
+  "colorStrokePrimary": {
+    "active": {
+      "name": "--vkui--color_stroke_primary--active",
+      "value": "var(--vkui--color_stroke_primary--active, #E3E5E8)",
+    },
+    "hover": {
+      "name": "--vkui--color_stroke_primary--hover",
+      "value": "var(--vkui--color_stroke_primary--hover, #E2E4E7)",
+    },
+    "normal": {
+      "name": "--vkui--color_stroke_primary",
+      "value": "var(--vkui--color_stroke_primary, #E1E3E6)",
+    },
+  },
   "colorTabbarTextInactive": {
     "active": {
       "name": "--vkui--color_tabbar_text_inactive--active",
@@ -525852,6 +526011,11 @@ exports[`shapshots vkontakteIOSDark theme should match pixelify theme snapshot 1
     "hover": "#52B652",
     "normal": "#4bb34b",
   },
+  "colorStrokePrimary": {
+    "active": "#E3E5E8",
+    "hover": "#E2E4E7",
+    "normal": "#E1E3E6",
+  },
   "colorTabbarTextInactive": {
     "active": "#818385",
     "hover": "#7B7D7F",
@@ -527312,6 +527476,11 @@ exports[`shapshots vkontakteIOSDark theme should match pseudo theme from CssVars
     "hover": "var(--vkui--color_stroke_positive--hover, #52B652)",
     "normal": "var(--vkui--color_stroke_positive, #4bb34b)",
   },
+  "colorStrokePrimary": {
+    "active": "var(--vkui--color_stroke_primary--active, #E3E5E8)",
+    "hover": "var(--vkui--color_stroke_primary--hover, #E2E4E7)",
+    "normal": "var(--vkui--color_stroke_primary, #E1E3E6)",
+  },
   "colorTabbarTextInactive": {
     "active": "var(--vkui--color_tabbar_text_inactive--active, #818385)",
     "hover": "var(--vkui--color_tabbar_text_inactive--hover, #7B7D7F)",
@@ -528772,6 +528941,11 @@ exports[`shapshots vkontakteIOSDark theme should match root theme snapshot 1`] =
     "hover": "#52B652",
     "normal": "#4bb34b",
   },
+  "colorStrokePrimary": {
+    "active": "#E3E5E8",
+    "hover": "#E2E4E7",
+    "normal": "#E1E3E6",
+  },
   "colorTabbarTextInactive": {
     "active": "#818385",
     "hover": "#7B7D7F",

diff --git a/src/interfaces/themes/legoAndroid/index.ts b/src/interfaces/themes/legoAndroid/index.ts
@@ -1,30 +1,6 @@
-import { ThemeCssVars } from '@/interfaces/general';
-import {
-	ColorDescription,
-	ColorsDescriptionStruct,
-	ColorWithStates,
-} from '@/interfaces/general/colors';
-import {
-	LocalVkontakteAndroidColorsDescriptionStruct,
-	ThemeVkontakteAndroid,
-	ThemeVkontakteAndroidDescription,
+// Сюда нельзя добавлять локальные переменные — так условились с разработкой Android
+export {
+	ThemeVkontakteAndroid as ThemeLegoAndroid,
+	ThemeVkontakteAndroidCssVars as ThemeLegoAndroidCssVars,
+	ThemeVkontakteAndroidDescription as ThemeLegoAndroidDescription,
 } from '@/interfaces/themes/vkontakteAndroid';
-
-// Описание локальных цветов
-export interface LocalLegoAndroidColorsDescriptionStruct {
-	colorStrokePrimary: ColorDescription;
-}
-
-// Резолв локальных цветов
-export type LegoAndroidLocalColors = {
-	[key in keyof LocalLegoAndroidColorsDescriptionStruct]: ColorWithStates;
-};
-
-// Эскпорт интерфейсов описанной + наследованной темы
-export interface ThemeLegoAndroid extends ThemeVkontakteAndroid, LegoAndroidLocalColors {}
-export interface ThemeLegoAndroidDescription extends ThemeVkontakteAndroidDescription {
-	colors: LocalLegoAndroidColorsDescriptionStruct &
-		LocalVkontakteAndroidColorsDescriptionStruct &
-		ColorsDescriptionStruct;
-}
-export interface ThemeLegoAndroidCssVars extends ThemeCssVars<ThemeLegoAndroid> {}
diff --git a/src/interfaces/themes/vkontakteAndroid/index.ts b/src/interfaces/themes/vkontakteAndroid/index.ts
@@ -297,6 +297,8 @@ export interface LocalVkontakteAndroidColorsDescriptionStruct {
 	vkontakteStoriesSkeletonLoaderBackground: ColorDescription;
 
 	vkontaktePaletteBlack: ColorDescription;
+
+	colorStrokePrimary: ColorDescription;
 }
 
 export type VkontakteAndroidLocalColors = {