@vkontakte/vkui-tokens 4.77.0 → 4.78.0

package/interfaces/themes/legoAndroid/index.d.ts

@@ -1,19 +1,5 @@
-import type { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from "../../general/colors/index.ts";
-import type { ThemeCssVars } from "../../general/index.ts";
-import type { Tokens } from "../../general/tools/tokenValue.ts";
-import type { VkontakteAndroidGradients } from "../vkontakteAndroid/index.ts";
-import type { ThemeVkBase, ThemeVkBaseDescription } from "../vkBase/index.ts";
-export interface LocalLegoAndroidColorsDescriptionStruct {
-    // Дополнительные цвета для темы
-    colorBackgroundInverse: ColorDescription;
-}
-export type LegoAndroidLocalColors = {
-    [key in keyof LocalLegoAndroidColorsDescriptionStruct]: ColorWithStates;
-};
-export interface ThemeLegoAndroid extends ThemeVkBase, LegoAndroidLocalColors, VkontakteAndroidGradients {
-}
-export interface ThemeLegoAndroidDescription extends ThemeVkBaseDescription, Tokens<VkontakteAndroidGradients> {
-    colors: LocalLegoAndroidColorsDescriptionStruct & ColorsDescriptionStruct;
-}
-export interface ThemeLegoAndroidCssVars extends ThemeCssVars<ThemeLegoAndroid> {
-}
+// Реэкспорт интерфейсов, так как набор переменных должен совпадать
+import type { ThemeVkontakteAndroid, ThemeVkontakteAndroidCssVars, ThemeVkontakteAndroidDescription } from "../vkontakteAndroid/index.ts";
+export type ThemeLegoAndroid = ThemeVkontakteAndroid;
+export type ThemeLegoAndroidDescription = ThemeVkontakteAndroidDescription;
+export type ThemeLegoAndroidCssVars = ThemeVkontakteAndroidCssVars;

package/interfaces/themes/legoIOS/index.d.ts

@@ -1,9 +1,11 @@
 import type { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from "../../general/colors/index.ts";
 import type { ThemeCssVars } from "../../general/index.ts";
 import type { ThemeVkBase, ThemeVkBaseDescription } from "../vkBase/index.ts";
-export interface LocalVkontakteIOSColorsDescriptionStruct {
-    // Дополнительные цвета для темы
+/**
+ * Дополнительные цвета для темы
+ */ export interface LocalVkontakteIOSColorsDescriptionStruct {
     colorBackgroundInverse: ColorDescription;
+    colorStrokeContrastSecondaryAlpha: ColorDescription;
 }
 export type LegoIOSLocalColors = {
     [key in keyof LocalVkontakteIOSColorsDescriptionStruct]: ColorWithStates;

package/interfaces/themes/vkontakteAndroid/index.d.ts

@@ -142,6 +142,8 @@ export interface VkontakteAndroidGradients {
 	 */ vkontakteGradientWomensDay: GradientPoints;
 }
 export interface LocalVkontakteAndroidColorsDescriptionStruct {
+    colorBackgroundInverse: ColorDescription;
+    colorStrokeContrastSecondaryAlpha: ColorDescription;
     vkontakteColorSnippetBorderAlpha: ColorDescription;
     vkontakteColorSnippetBackground: ColorDescription;
     vkontakteColorModalCardBorderAlpha: ColorDescription;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.77.0",
+  "version": "4.78.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "type": "module",
   "license": "MIT",

package/themeDescriptions/base/paradigm.js

@@ -1,4 +1,4 @@
-import{_ as r}from"@swc/helpers/_/_object_spread";import{_ as o}from"@swc/helpers/_/_object_spread_props";import{getGradientPointsFromColor as e}from"../../build/helpers/getGradientPointsFromColor.js";import{alias as a,staticRef as t}from"../../build/helpers/tokenHelpers.js";import{overlayColors as n}from"../../build/themeProcessors/expandColors/overlayColors.js";import{helpers as l}from"../../utils/common/index.js";var i='apple-system, system-ui, "Helvetica Neue", Arial, sans-serif',c="VKSansDisplay, MailSans, ".concat(i),g="#F6F7F8",d="#252525",u="#232324";export var lightColors={colorsScheme:"light",colors:{// Background
+import{_ as r}from"@swc/helpers/_/_object_spread";import{_ as o}from"@swc/helpers/_/_object_spread_props";import{getGradientPointsFromColor as e}from"../../build/helpers/getGradientPointsFromColor.js";import{alias as a,staticRef as t}from"../../build/helpers/tokenHelpers.js";import{overlayColors as n}from"../../build/themeProcessors/expandColors/overlayColors.js";import{helpers as l}from"../../utils/common";var i='apple-system, system-ui, "Helvetica Neue", Arial, sans-serif',c="VKSansDisplay, MailSans, ".concat(i),g="#F6F7F8",d="#252525",u="#232324";export var lightColors={colorsScheme:"light",colors:{// Background
 colorBackgroundAccent:"#0077FF",colorBackgroundAccentThemed:"#0077FF",colorBackgroundAccentThemedAlpha:"rgba(0, 119, 255, 0.2)",colorBackgroundAccentAlternative:"#FF9E00",colorBackgroundContent:"#FFFFFF",colorBackgroundContentAlpha:"rgba(255, 255, 255, 0.8)",colorBackgroundContentInverse:u,colorBackgroundSecondary:"#F0F1F3",colorBackgroundSecondaryAlpha:{normal:"rgba(0, 16, 61, 0.06)",hover:"rgba(0, 16, 61, 0.1)",active:"rgba(0, 16, 61, 0.14)"},colorBackground:"#FFFFFF",colorBackgroundContrast:"#FFFFFF",colorBackgroundContrastSecondaryAlpha:{normal:"rgba(255, 255, 255, 0.2)",hover:"rgba(255, 255, 255, 0.24)",active:"rgba(255, 255, 255, 0.28)"},colorBackgroundWarning:"#FFF1AD",colorBackgroundNegative:"#ED330A",colorBackgroundTertiary:g,colorBackgroundTertiaryAlpha:{normal:"rgba(0, 0, 0, 0.04)",hover:"rgba(0, 0, 0, 0.08)",active:"rgba(0, 0, 0, 0.12)"},colorBackgroundModal:"#FFFFFF",colorBackgroundPositive:"#0DC268",colorBackgroundNegativeTint:"#FEEFEB",colorBackgroundPositiveTint:"#ECFAF3",colorFieldBackground:"#ffffff",colorBackgroundModalInverse:"#303030",colorBackgroundContrastInverse:"#303030",colorBackgroundContrastThemed:"#FFFFFF",colorBackgroundAccentTint:"#5a9eff",colorBackgroundInfoTint:"#f0f4ff",// Text
 colorTextAccent:"#0070f0",colorTextAccentThemed:"#0070f0",colorTextNegative:"#ED330a",colorTextLink:"#0070f0",colorTextLinkTint:"#71AAEB",colorTextLinkThemed:"#0070f0",colorTextMuted:"#2C2D2E",colorTextPrimary:"#2C2D2E",colorTextPrimaryAlpha:"rgba(37, 41, 46, 0.84)",colorTextPrimaryInvariably:"#2C2D2E",colorTextSecondary:"#87898F",colorTextSecondaryAlpha:"rgba(37, 41, 46, 0.55)",colorTextSubhead:"#797A80",colorTextTertiary:"#AAADB3",colorTextLinkVisited:"#528FDF",colorTextContrast:"#FFFFFF",colorTextContrastThemed:"#FFFFFF",colorLinkContrast:"#FFFFFF",colorTextPositive:"#0DC268",// Icons
 colorIconAccent:"#0077ff",colorIconAccentThemed:"#0077ff",colorIconPrimary:"#2C2D2E",colorIconPrimaryInvariably:"#2C2D2E",colorIconMedium:"#919399",colorIconMediumAlpha:"rgba(39, 43, 55, 0.5)",colorIconSecondary:"#A5A7AD",colorIconSecondaryAlpha:"rgba(39, 43, 55, 0.3)",colorIconTertiary:"#CFD1D6",colorIconTertiaryAlpha:"rgba(39, 43, 55, 0.2)",colorIconContrast:"#FFFFFF",colorIconContrastThemed:"#FFFFFF",colorIconPositive:"#0DC268",colorIconWarning:"#FF9E00",colorIconNegative:"#ED330a",colorIconContrastSecondary:"#F2F3F5",// Stroke

package/themes/legoAndroid/cssVars/declarations/index.css

@@ -65,7 +65,7 @@
 	--vkui--font_headline2--font_size--compact: 14px;
 	--vkui--font_headline2--line_height--compact: 20px;
 	--vkui--font_text--font_size--regular: 16px;
-	--vkui--font_text--line_height--regular: 18.33px;
+	--vkui--font_text--line_height--regular: 18.5px;
 	--vkui--font_text--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_text--font_weight--regular: 600;
 	--vkui--font_text--font_variation_settings--optical_size--regular: 24;
@@ -349,9 +349,9 @@
 	--vkui--color_background_warning: #fff2d6;
 	--vkui--color_background_warning--hover: #F5E9D0;
 	--vkui--color_background_warning--active: #EBE0CA;
-	--vkui--color_background_negative: #fe3c60;
-	--vkui--color_background_negative--hover: #F43A5F;
-	--vkui--color_background_negative--active: #EA385D;
+	--vkui--color_background_negative: #F65460;
+	--vkui--color_background_negative--hover: #EC515F;
+	--vkui--color_background_negative--active: #E24F5D;
 	--vkui--color_background_negative_tint: #ffe9e9;
 	--vkui--color_background_negative_tint--hover: #F5E0E2;
 	--vkui--color_background_negative_tint--active: #EBD8DB;
@@ -400,9 +400,9 @@
 	--vkui--color_text_positive: #34c759;
 	--vkui--color_text_positive--hover: #32C058;
 	--vkui--color_text_positive--active: #30B857;
-	--vkui--color_text_negative: #fe3c60;
-	--vkui--color_text_negative--hover: #F43A5F;
-	--vkui--color_text_negative--active: #EA385D;
+	--vkui--color_text_negative: #F65460;
+	--vkui--color_text_negative--hover: #EC515F;
+	--vkui--color_text_negative--active: #E24F5D;
 	--vkui--color_text_link: #2e90ff;
 	--vkui--color_text_link--hover: #2C8BF7;
 	--vkui--color_text_link--active: #2A86EF;
@@ -466,9 +466,9 @@
 	--vkui--color_icon_warning: #ff6900;
 	--vkui--color_icon_warning--hover: #F56502;
 	--vkui--color_icon_warning--active: #EB6205;
-	--vkui--color_icon_negative: #fe3c60;
-	--vkui--color_icon_negative--hover: #F43A5F;
-	--vkui--color_icon_negative--active: #EA385D;
+	--vkui--color_icon_negative: #F65460;
+	--vkui--color_icon_negative--hover: #EC515F;
+	--vkui--color_icon_negative--active: #E24F5D;
 	--vkui--color_stroke_accent: #2e90ff;
 	--vkui--color_stroke_accent--hover: #2C8BF7;
 	--vkui--color_stroke_accent--active: #2A86EF;
@@ -493,9 +493,9 @@
 	--vkui--color_stroke_positive: #34c759;
 	--vkui--color_stroke_positive--hover: #32C058;
 	--vkui--color_stroke_positive--active: #30B857;
-	--vkui--color_stroke_negative: #fe3c60;
-	--vkui--color_stroke_negative--hover: #F43A5F;
-	--vkui--color_stroke_negative--active: #EA385D;
+	--vkui--color_stroke_negative: #F65460;
+	--vkui--color_stroke_negative--hover: #EC515F;
+	--vkui--color_stroke_negative--active: #E24F5D;
 	--vkui--color_stroke_contrast: #ffffff;
 	--vkui--color_stroke_contrast--hover: #F5F5F7;
 	--vkui--color_stroke_contrast--active: #EBECEF;
@@ -622,6 +622,12 @@
 	--vkui--color_transparent: #00000000;
 	--vkui--color_transparent--hover: rgba(0, 0, 0, 0.04);
 	--vkui--color_transparent--active: rgba(0, 0, 0, 0.08);
+	--vkui--color_background_inverse: #262626;
+	--vkui--color_background_inverse--hover: #242527;
+	--vkui--color_background_inverse--active: #232428;
+	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1f;
+	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
+	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--vkontakte_color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
 	--vkui--vkontakte_color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
 	--vkui--vkontakte_color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
@@ -868,9 +874,6 @@
 	--vkui--vkontakte_palette_black: #000000;
 	--vkui--vkontakte_palette_black--hover: #000102;
 	--vkui--vkontakte_palette_black--active: #000105;
-	--vkui--color_background_inverse: #262626;
-	--vkui--color_background_inverse--hover: #242527;
-	--vkui--color_background_inverse--active: #232428;
 }
 
 .vkui--font_display_title1--regular {
@@ -1056,8 +1059,8 @@
 .vkui--font_text--regular {
 	font-size: 16px;
 	font-size: var(--vkui--font_text--font_size--regular, 16px);
-	line-height: 18.33px;
-	line-height: var(--vkui--font_text--line_height--regular, 18.33px);
+	line-height: 18.5px;
+	line-height: var(--vkui--font_text--line_height--regular, 18.5px);
 	font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	font-family: var(--vkui--font_text--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;

package/themes/legoAndroid/cssVars/declarations/noColors.css

@@ -65,7 +65,7 @@
 	--vkui--font_headline2--font_size--compact: 14px;
 	--vkui--font_headline2--line_height--compact: 20px;
 	--vkui--font_text--font_size--regular: 16px;
-	--vkui--font_text--line_height--regular: 18.33px;
+	--vkui--font_text--line_height--regular: 18.5px;
 	--vkui--font_text--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_text--font_weight--regular: 600;
 	--vkui--font_text--font_variation_settings--optical_size--regular: 24;
@@ -655,8 +655,8 @@
 .vkui--font_text--regular {
 	font-size: 16px;
 	font-size: var(--vkui--font_text--font_size--regular, 16px);
-	line-height: 18.33px;
-	line-height: var(--vkui--font_text--line_height--regular, 18.33px);
+	line-height: 18.5px;
+	line-height: var(--vkui--font_text--line_height--regular, 18.5px);
 	font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	font-family: var(--vkui--font_text--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;

package/themes/legoAndroid/cssVars/declarations/noSizes.css

@@ -133,9 +133,9 @@
 	--vkui--color_background_warning: #fff2d6;
 	--vkui--color_background_warning--hover: #F5E9D0;
 	--vkui--color_background_warning--active: #EBE0CA;
-	--vkui--color_background_negative: #fe3c60;
-	--vkui--color_background_negative--hover: #F43A5F;
-	--vkui--color_background_negative--active: #EA385D;
+	--vkui--color_background_negative: #F65460;
+	--vkui--color_background_negative--hover: #EC515F;
+	--vkui--color_background_negative--active: #E24F5D;
 	--vkui--color_background_negative_tint: #ffe9e9;
 	--vkui--color_background_negative_tint--hover: #F5E0E2;
 	--vkui--color_background_negative_tint--active: #EBD8DB;
@@ -184,9 +184,9 @@
 	--vkui--color_text_positive: #34c759;
 	--vkui--color_text_positive--hover: #32C058;
 	--vkui--color_text_positive--active: #30B857;
-	--vkui--color_text_negative: #fe3c60;
-	--vkui--color_text_negative--hover: #F43A5F;
-	--vkui--color_text_negative--active: #EA385D;
+	--vkui--color_text_negative: #F65460;
+	--vkui--color_text_negative--hover: #EC515F;
+	--vkui--color_text_negative--active: #E24F5D;
 	--vkui--color_text_link: #2e90ff;
 	--vkui--color_text_link--hover: #2C8BF7;
 	--vkui--color_text_link--active: #2A86EF;
@@ -250,9 +250,9 @@
 	--vkui--color_icon_warning: #ff6900;
 	--vkui--color_icon_warning--hover: #F56502;
 	--vkui--color_icon_warning--active: #EB6205;
-	--vkui--color_icon_negative: #fe3c60;
-	--vkui--color_icon_negative--hover: #F43A5F;
-	--vkui--color_icon_negative--active: #EA385D;
+	--vkui--color_icon_negative: #F65460;
+	--vkui--color_icon_negative--hover: #EC515F;
+	--vkui--color_icon_negative--active: #E24F5D;
 	--vkui--color_stroke_accent: #2e90ff;
 	--vkui--color_stroke_accent--hover: #2C8BF7;
 	--vkui--color_stroke_accent--active: #2A86EF;
@@ -277,9 +277,9 @@
 	--vkui--color_stroke_positive: #34c759;
 	--vkui--color_stroke_positive--hover: #32C058;
 	--vkui--color_stroke_positive--active: #30B857;
-	--vkui--color_stroke_negative: #fe3c60;
-	--vkui--color_stroke_negative--hover: #F43A5F;
-	--vkui--color_stroke_negative--active: #EA385D;
+	--vkui--color_stroke_negative: #F65460;
+	--vkui--color_stroke_negative--hover: #EC515F;
+	--vkui--color_stroke_negative--active: #E24F5D;
 	--vkui--color_stroke_contrast: #ffffff;
 	--vkui--color_stroke_contrast--hover: #F5F5F7;
 	--vkui--color_stroke_contrast--active: #EBECEF;
@@ -406,6 +406,12 @@
 	--vkui--color_transparent: #00000000;
 	--vkui--color_transparent--hover: rgba(0, 0, 0, 0.04);
 	--vkui--color_transparent--active: rgba(0, 0, 0, 0.08);
+	--vkui--color_background_inverse: #262626;
+	--vkui--color_background_inverse--hover: #242527;
+	--vkui--color_background_inverse--active: #232428;
+	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1f;
+	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
+	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--vkontakte_color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
 	--vkui--vkontakte_color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
 	--vkui--vkontakte_color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
@@ -652,7 +658,4 @@
 	--vkui--vkontakte_palette_black: #000000;
 	--vkui--vkontakte_palette_black--hover: #000102;
 	--vkui--vkontakte_palette_black--active: #000105;
-	--vkui--color_background_inverse: #262626;
-	--vkui--color_background_inverse--hover: #242527;
-	--vkui--color_background_inverse--active: #232428;
 }

package/themes/legoAndroid/cssVars/declarations/onlyColors.css

@@ -65,9 +65,9 @@
 	--vkui--color_background_warning: #fff2d6;
 	--vkui--color_background_warning--hover: #F5E9D0;
 	--vkui--color_background_warning--active: #EBE0CA;
-	--vkui--color_background_negative: #fe3c60;
-	--vkui--color_background_negative--hover: #F43A5F;
-	--vkui--color_background_negative--active: #EA385D;
+	--vkui--color_background_negative: #F65460;
+	--vkui--color_background_negative--hover: #EC515F;
+	--vkui--color_background_negative--active: #E24F5D;
 	--vkui--color_background_negative_tint: #ffe9e9;
 	--vkui--color_background_negative_tint--hover: #F5E0E2;
 	--vkui--color_background_negative_tint--active: #EBD8DB;
@@ -116,9 +116,9 @@
 	--vkui--color_text_positive: #34c759;
 	--vkui--color_text_positive--hover: #32C058;
 	--vkui--color_text_positive--active: #30B857;
-	--vkui--color_text_negative: #fe3c60;
-	--vkui--color_text_negative--hover: #F43A5F;
-	--vkui--color_text_negative--active: #EA385D;
+	--vkui--color_text_negative: #F65460;
+	--vkui--color_text_negative--hover: #EC515F;
+	--vkui--color_text_negative--active: #E24F5D;
 	--vkui--color_text_link: #2e90ff;
 	--vkui--color_text_link--hover: #2C8BF7;
 	--vkui--color_text_link--active: #2A86EF;
@@ -182,9 +182,9 @@
 	--vkui--color_icon_warning: #ff6900;
 	--vkui--color_icon_warning--hover: #F56502;
 	--vkui--color_icon_warning--active: #EB6205;
-	--vkui--color_icon_negative: #fe3c60;
-	--vkui--color_icon_negative--hover: #F43A5F;
-	--vkui--color_icon_negative--active: #EA385D;
+	--vkui--color_icon_negative: #F65460;
+	--vkui--color_icon_negative--hover: #EC515F;
+	--vkui--color_icon_negative--active: #E24F5D;
 	--vkui--color_stroke_accent: #2e90ff;
 	--vkui--color_stroke_accent--hover: #2C8BF7;
 	--vkui--color_stroke_accent--active: #2A86EF;
@@ -209,9 +209,9 @@
 	--vkui--color_stroke_positive: #34c759;
 	--vkui--color_stroke_positive--hover: #32C058;
 	--vkui--color_stroke_positive--active: #30B857;
-	--vkui--color_stroke_negative: #fe3c60;
-	--vkui--color_stroke_negative--hover: #F43A5F;
-	--vkui--color_stroke_negative--active: #EA385D;
+	--vkui--color_stroke_negative: #F65460;
+	--vkui--color_stroke_negative--hover: #EC515F;
+	--vkui--color_stroke_negative--active: #E24F5D;
 	--vkui--color_stroke_contrast: #ffffff;
 	--vkui--color_stroke_contrast--hover: #F5F5F7;
 	--vkui--color_stroke_contrast--active: #EBECEF;
@@ -338,6 +338,12 @@
 	--vkui--color_transparent: #00000000;
 	--vkui--color_transparent--hover: rgba(0, 0, 0, 0.04);
 	--vkui--color_transparent--active: rgba(0, 0, 0, 0.08);
+	--vkui--color_background_inverse: #262626;
+	--vkui--color_background_inverse--hover: #242527;
+	--vkui--color_background_inverse--active: #232428;
+	--vkui--color_stroke_contrast_secondary_alpha: #ffffff1f;
+	--vkui--color_stroke_contrast_secondary_alpha--hover: rgba(255, 255, 255, 0.16);
+	--vkui--color_stroke_contrast_secondary_alpha--active: rgba(255, 255, 255, 0.2);
 	--vkui--vkontakte_color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
 	--vkui--vkontakte_color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
 	--vkui--vkontakte_color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
@@ -584,7 +590,4 @@
 	--vkui--vkontakte_palette_black: #000000;
 	--vkui--vkontakte_palette_black--hover: #000102;
 	--vkui--vkontakte_palette_black--active: #000105;
-	--vkui--color_background_inverse: #262626;
-	--vkui--color_background_inverse--hover: #242527;
-	--vkui--color_background_inverse--active: #232428;
 }