fix(vkIdOk): Updated primary colors in dark theme (#1174)

VKCOM · Feb 6, 2025 · 145d361 · 145d361
1 parent 46ddc74
commit 145d361
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 73 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.59.0",
+  "version": "4.60.0",
   "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
@@ -461603,15 +461603,15 @@ exports[`shapshots vkIdOkDark theme should match cssVars snapshot 1`] = `
   "colorBackgroundContent": {
     "active": {
       "name": "--vkui--color_background_content--active",
-      "value": "var(--vkui--color_background_content--active, #2B2B2C)",
+      "value": "var(--vkui--color_background_content--active, #2C2C2E)",
     },
     "hover": {
       "name": "--vkui--color_background_content--hover",
-      "value": "var(--vkui--color_background_content--hover, #222223)",
+      "value": "var(--vkui--color_background_content--hover, #232325)",
     },
     "normal": {
       "name": "--vkui--color_background_content",
-      "value": "var(--vkui--color_background_content, #19191a)",
+      "value": "var(--vkui--color_background_content, #1A1A1C)",
     },
   },
   "colorBackgroundContentAlpha": {
@@ -462079,15 +462079,15 @@ exports[`shapshots vkIdOkDark theme should match cssVars snapshot 1`] = `
   "colorIconPrimary": {
     "active": {
       "name": "--vkui--color_icon_primary--active",
-      "value": "var(--vkui--color_icon_primary--active, #E3E5E8)",
+      "value": "var(--vkui--color_icon_primary--active, #D7D8DB)",
     },
     "hover": {
       "name": "--vkui--color_icon_primary--hover",
-      "value": "var(--vkui--color_icon_primary--hover, #E2E4E7)",
+      "value": "var(--vkui--color_icon_primary--hover, #EBEDF0)",
     },
     "normal": {
       "name": "--vkui--color_icon_primary",
-      "value": "var(--vkui--color_icon_primary, #e1e3e6)",
+      "value": "var(--vkui--color_icon_primary, #FFFFFF)",
     },
   },
   "colorIconPrimaryInvariably": {
@@ -462653,15 +462653,15 @@ exports[`shapshots vkIdOkDark theme should match cssVars snapshot 1`] = `
   "colorTextPrimary": {
     "active": {
       "name": "--vkui--color_text_primary--active",
-      "value": "var(--vkui--color_text_primary--active, #E3E5E8)",
+      "value": "var(--vkui--color_text_primary--active, #D7D8DB)",
     },
     "hover": {
       "name": "--vkui--color_text_primary--hover",
-      "value": "var(--vkui--color_text_primary--hover, #E2E4E7)",
+      "value": "var(--vkui--color_text_primary--hover, #EBEDF0)",
     },
     "normal": {
       "name": "--vkui--color_text_primary",
-      "value": "var(--vkui--color_text_primary, #e1e3e6)",
+      "value": "var(--vkui--color_text_primary, #FFFFFF)",
     },
   },
   "colorTextPrimaryAlpha": {
@@ -464776,9 +464776,9 @@ exports[`shapshots vkIdOkDark theme should match pixelify theme snapshot 1`] = `
     "normal": "#F38910",
   },
   "colorBackgroundContent": {
-    "active": "#2B2B2C",
-    "hover": "#222223",
-    "normal": "#19191a",
+    "active": "#2C2C2E",
+    "hover": "#232325",
+    "normal": "#1A1A1C",
   },
   "colorBackgroundContentAlpha": {
     "active": "rgba(25, 25, 26, 0.88)",
@@ -464946,9 +464946,9 @@ exports[`shapshots vkIdOkDark theme should match pixelify theme snapshot 1`] = `
     "normal": "#4bb34b",
   },
   "colorIconPrimary": {
-    "active": "#E3E5E8",
-    "hover": "#E2E4E7",
-    "normal": "#e1e3e6",
+    "active": "#D7D8DB",
+    "hover": "#EBEDF0",
+    "normal": "#FFFFFF",
   },
   "colorIconPrimaryInvariably": {
     "active": "#3D3E3F",
@@ -465151,9 +465151,9 @@ exports[`shapshots vkIdOkDark theme should match pixelify theme snapshot 1`] = `
     "normal": "#4bb34b",
   },
   "colorTextPrimary": {
-    "active": "#E3E5E8",
-    "hover": "#E2E4E7",
-    "normal": "#e1e3e6",
+    "active": "#D7D8DB",
+    "hover": "#EBEDF0",
+    "normal": "#FFFFFF",
   },
   "colorTextPrimaryAlpha": {
     "active": "rgba(249, 252, 255, 0.8)",
@@ -465810,9 +465810,9 @@ exports[`shapshots vkIdOkDark theme should match pseudo theme from CssVars 1`] =
     "normal": "var(--vkui--color_background_accent_tint, #F38910)",
   },
   "colorBackgroundContent": {
-    "active": "var(--vkui--color_background_content--active, #2B2B2C)",
-    "hover": "var(--vkui--color_background_content--hover, #222223)",
-    "normal": "var(--vkui--color_background_content, #19191a)",
+    "active": "var(--vkui--color_background_content--active, #2C2C2E)",
+    "hover": "var(--vkui--color_background_content--hover, #232325)",
+    "normal": "var(--vkui--color_background_content, #1A1A1C)",
   },
   "colorBackgroundContentAlpha": {
     "active": "var(--vkui--color_background_content_alpha--active, rgba(25, 25, 26, 0.88))",
@@ -465980,9 +465980,9 @@ exports[`shapshots vkIdOkDark theme should match pseudo theme from CssVars 1`] =
     "normal": "var(--vkui--color_icon_positive, #4bb34b)",
   },
   "colorIconPrimary": {
-    "active": "var(--vkui--color_icon_primary--active, #E3E5E8)",
-    "hover": "var(--vkui--color_icon_primary--hover, #E2E4E7)",
-    "normal": "var(--vkui--color_icon_primary, #e1e3e6)",
+    "active": "var(--vkui--color_icon_primary--active, #D7D8DB)",
+    "hover": "var(--vkui--color_icon_primary--hover, #EBEDF0)",
+    "normal": "var(--vkui--color_icon_primary, #FFFFFF)",
   },
   "colorIconPrimaryInvariably": {
     "active": "var(--vkui--color_icon_primary_invariably--active, #3D3E3F)",
@@ -466185,9 +466185,9 @@ exports[`shapshots vkIdOkDark theme should match pseudo theme from CssVars 1`] =
     "normal": "var(--vkui--color_text_positive, #4bb34b)",
   },
   "colorTextPrimary": {
-    "active": "var(--vkui--color_text_primary--active, #E3E5E8)",
-    "hover": "var(--vkui--color_text_primary--hover, #E2E4E7)",
-    "normal": "var(--vkui--color_text_primary, #e1e3e6)",
+    "active": "var(--vkui--color_text_primary--active, #D7D8DB)",
+    "hover": "var(--vkui--color_text_primary--hover, #EBEDF0)",
+    "normal": "var(--vkui--color_text_primary, #FFFFFF)",
   },
   "colorTextPrimaryAlpha": {
     "active": "var(--vkui--color_text_primary_alpha--active, rgba(249, 252, 255, 0.8))",
@@ -466844,9 +466844,9 @@ exports[`shapshots vkIdOkDark theme should match root theme snapshot 1`] = `
     "normal": "#F38910",
   },
   "colorBackgroundContent": {
-    "active": "#2B2B2C",
-    "hover": "#222223",
-    "normal": "#19191a",
+    "active": "#2C2C2E",
+    "hover": "#232325",
+    "normal": "#1A1A1C",
   },
   "colorBackgroundContentAlpha": {
     "active": "rgba(25, 25, 26, 0.88)",
@@ -467014,9 +467014,9 @@ exports[`shapshots vkIdOkDark theme should match root theme snapshot 1`] = `
     "normal": "#4bb34b",
   },
   "colorIconPrimary": {
-    "active": "#E3E5E8",
-    "hover": "#E2E4E7",
-    "normal": "#e1e3e6",
+    "active": "#D7D8DB",
+    "hover": "#EBEDF0",
+    "normal": "#FFFFFF",
   },
   "colorIconPrimaryInvariably": {
     "active": "#3D3E3F",
@@ -467219,9 +467219,9 @@ exports[`shapshots vkIdOkDark theme should match root theme snapshot 1`] = `
     "normal": "#4bb34b",
   },
   "colorTextPrimary": {
-    "active": "#E3E5E8",
-    "hover": "#E2E4E7",
-    "normal": "#e1e3e6",
+    "active": "#D7D8DB",
+    "hover": "#EBEDF0",
+    "normal": "#FFFFFF",
   },
   "colorTextPrimaryAlpha": {
     "active": "rgba(249, 252, 255, 0.8)",
@@ -474619,15 +474619,15 @@ exports[`shapshots vkIdOkIOSDark theme should match cssVars snapshot 1`] = `
   "colorBackgroundContent": {
     "active": {
       "name": "--vkui--color_background_content--active",
-      "value": "var(--vkui--color_background_content--active, #2B2B2C)",
+      "value": "var(--vkui--color_background_content--active, #2C2C2E)",
     },
     "hover": {
       "name": "--vkui--color_background_content--hover",
-      "value": "var(--vkui--color_background_content--hover, #222223)",
+      "value": "var(--vkui--color_background_content--hover, #232325)",
     },
     "normal": {
       "name": "--vkui--color_background_content",
-      "value": "var(--vkui--color_background_content, #19191a)",
+      "value": "var(--vkui--color_background_content, #1A1A1C)",
     },
   },
   "colorBackgroundContentAlpha": {
@@ -475095,15 +475095,15 @@ exports[`shapshots vkIdOkIOSDark theme should match cssVars snapshot 1`] = `
   "colorIconPrimary": {
     "active": {
       "name": "--vkui--color_icon_primary--active",
-      "value": "var(--vkui--color_icon_primary--active, #E3E5E8)",
+      "value": "var(--vkui--color_icon_primary--active, #D7D8DB)",
     },
     "hover": {
       "name": "--vkui--color_icon_primary--hover",
-      "value": "var(--vkui--color_icon_primary--hover, #E2E4E7)",
+      "value": "var(--vkui--color_icon_primary--hover, #EBEDF0)",
     },
     "normal": {
       "name": "--vkui--color_icon_primary",
-      "value": "var(--vkui--color_icon_primary, #e1e3e6)",
+      "value": "var(--vkui--color_icon_primary, #FFFFFF)",
     },
   },
   "colorIconPrimaryInvariably": {
@@ -475669,15 +475669,15 @@ exports[`shapshots vkIdOkIOSDark theme should match cssVars snapshot 1`] = `
   "colorTextPrimary": {
     "active": {
       "name": "--vkui--color_text_primary--active",
-      "value": "var(--vkui--color_text_primary--active, #E3E5E8)",
+      "value": "var(--vkui--color_text_primary--active, #D7D8DB)",
     },
     "hover": {
       "name": "--vkui--color_text_primary--hover",
-      "value": "var(--vkui--color_text_primary--hover, #E2E4E7)",
+      "value": "var(--vkui--color_text_primary--hover, #EBEDF0)",
     },
     "normal": {
       "name": "--vkui--color_text_primary",
-      "value": "var(--vkui--color_text_primary, #e1e3e6)",
+      "value": "var(--vkui--color_text_primary, #FFFFFF)",
     },
   },
   "colorTextPrimaryAlpha": {
@@ -477792,9 +477792,9 @@ exports[`shapshots vkIdOkIOSDark theme should match pixelify theme snapshot 1`]
     "normal": "#F38910",
   },
   "colorBackgroundContent": {
-    "active": "#2B2B2C",
-    "hover": "#222223",
-    "normal": "#19191a",
+    "active": "#2C2C2E",
+    "hover": "#232325",
+    "normal": "#1A1A1C",
   },
   "colorBackgroundContentAlpha": {
     "active": "rgba(25, 25, 26, 0.88)",
@@ -477962,9 +477962,9 @@ exports[`shapshots vkIdOkIOSDark theme should match pixelify theme snapshot 1`]
     "normal": "#4bb34b",
   },
   "colorIconPrimary": {
-    "active": "#E3E5E8",
-    "hover": "#E2E4E7",
-    "normal": "#e1e3e6",
+    "active": "#D7D8DB",
+    "hover": "#EBEDF0",
+    "normal": "#FFFFFF",
   },
   "colorIconPrimaryInvariably": {
     "active": "#3D3E3F",
@@ -478167,9 +478167,9 @@ exports[`shapshots vkIdOkIOSDark theme should match pixelify theme snapshot 1`]
     "normal": "#4bb34b",
   },
   "colorTextPrimary": {
-    "active": "#E3E5E8",
-    "hover": "#E2E4E7",
-    "normal": "#e1e3e6",
+    "active": "#D7D8DB",
+    "hover": "#EBEDF0",
+    "normal": "#FFFFFF",
   },
   "colorTextPrimaryAlpha": {
     "active": "rgba(249, 252, 255, 0.8)",
@@ -478826,9 +478826,9 @@ exports[`shapshots vkIdOkIOSDark theme should match pseudo theme from CssVars 1`
     "normal": "var(--vkui--color_background_accent_tint, #F38910)",
   },
   "colorBackgroundContent": {
-    "active": "var(--vkui--color_background_content--active, #2B2B2C)",
-    "hover": "var(--vkui--color_background_content--hover, #222223)",
-    "normal": "var(--vkui--color_background_content, #19191a)",
+    "active": "var(--vkui--color_background_content--active, #2C2C2E)",
+    "hover": "var(--vkui--color_background_content--hover, #232325)",
+    "normal": "var(--vkui--color_background_content, #1A1A1C)",
   },
   "colorBackgroundContentAlpha": {
     "active": "var(--vkui--color_background_content_alpha--active, rgba(25, 25, 26, 0.88))",
@@ -478996,9 +478996,9 @@ exports[`shapshots vkIdOkIOSDark theme should match pseudo theme from CssVars 1`
     "normal": "var(--vkui--color_icon_positive, #4bb34b)",
   },
   "colorIconPrimary": {
-    "active": "var(--vkui--color_icon_primary--active, #E3E5E8)",
-    "hover": "var(--vkui--color_icon_primary--hover, #E2E4E7)",
-    "normal": "var(--vkui--color_icon_primary, #e1e3e6)",
+    "active": "var(--vkui--color_icon_primary--active, #D7D8DB)",
+    "hover": "var(--vkui--color_icon_primary--hover, #EBEDF0)",
+    "normal": "var(--vkui--color_icon_primary, #FFFFFF)",
   },
   "colorIconPrimaryInvariably": {
     "active": "var(--vkui--color_icon_primary_invariably--active, #3D3E3F)",
@@ -479201,9 +479201,9 @@ exports[`shapshots vkIdOkIOSDark theme should match pseudo theme from CssVars 1`
     "normal": "var(--vkui--color_text_positive, #4bb34b)",
   },
   "colorTextPrimary": {
-    "active": "var(--vkui--color_text_primary--active, #E3E5E8)",
-    "hover": "var(--vkui--color_text_primary--hover, #E2E4E7)",
-    "normal": "var(--vkui--color_text_primary, #e1e3e6)",
+    "active": "var(--vkui--color_text_primary--active, #D7D8DB)",
+    "hover": "var(--vkui--color_text_primary--hover, #EBEDF0)",
+    "normal": "var(--vkui--color_text_primary, #FFFFFF)",
   },
   "colorTextPrimaryAlpha": {
     "active": "var(--vkui--color_text_primary_alpha--active, rgba(249, 252, 255, 0.8))",
@@ -479860,9 +479860,9 @@ exports[`shapshots vkIdOkIOSDark theme should match root theme snapshot 1`] = `
     "normal": "#F38910",
   },
   "colorBackgroundContent": {
-    "active": "#2B2B2C",
-    "hover": "#222223",
-    "normal": "#19191a",
+    "active": "#2C2C2E",
+    "hover": "#232325",
+    "normal": "#1A1A1C",
   },
   "colorBackgroundContentAlpha": {
     "active": "rgba(25, 25, 26, 0.88)",
@@ -480030,9 +480030,9 @@ exports[`shapshots vkIdOkIOSDark theme should match root theme snapshot 1`] = `
     "normal": "#4bb34b",
   },
   "colorIconPrimary": {
-    "active": "#E3E5E8",
-    "hover": "#E2E4E7",
-    "normal": "#e1e3e6",
+    "active": "#D7D8DB",
+    "hover": "#EBEDF0",
+    "normal": "#FFFFFF",
   },
   "colorIconPrimaryInvariably": {
     "active": "#3D3E3F",
@@ -480235,9 +480235,9 @@ exports[`shapshots vkIdOkIOSDark theme should match root theme snapshot 1`] = `
     "normal": "#4bb34b",
   },
   "colorTextPrimary": {
-    "active": "#E3E5E8",
-    "hover": "#E2E4E7",
-    "normal": "#e1e3e6",
+    "active": "#D7D8DB",
+    "hover": "#EBEDF0",
+    "normal": "#FFFFFF",
   },
   "colorTextPrimaryAlpha": {
     "active": "rgba(249, 252, 255, 0.8)",

diff --git a/src/themeDescriptions/themes/vkIdOk/index.ts b/src/themeDescriptions/themes/vkIdOk/index.ts
@@ -54,12 +54,15 @@ export const vkIdOkThemeDark: ThemeVkIdOkDarkDescription = {
 			hover: '#EBEDF0',
 			active: '#D7D8DB',
 		},
+		colorTextPrimary: '#FFFFFF',
 		colorTextLink: '#969A9F',
 		colorTextLinkThemed: '#FFFFFF',
 		colorTextLinkTint: '#76787A',
 		colorTextLinkVisited: '#969A9F',
 		colorIconAccent: '#EE8208',
 		colorIconAccentThemed: '#FFFFFF',
+		colorIconPrimary: '#FFFFFF',
+		colorBackgroundContent: '#1A1A1C',
 		colorBackgroundAccentThemedAlpha: 'rgba(255, 255, 255, 0.2)',
 		colorBackgroundAccentTint: '#F38910',
 		colorBackgroundAccentAlternative: '#F38910',