@vkontakte/vkui-tokens 4.35.2-dev-cfbf64.0 → 4.37.0

package/interfaces/general/colors/index.d.ts

@@ -421,6 +421,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, overlay
      */
     colorOverlayPrimary: ColorDescription;
+    /**
+     * @desc Вторичный цвет для подложек оверлеев
+     * @tags color, overlay
+     */
+    colorOverlaySecondary: ColorDescription;
     /**
      * @desc Фон для компонента Avatar. Не прозрачный
      * @tags color, component
@@ -506,6 +511,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, component, background
      */
     colorSegmentedControl: ColorDescription;
+    /**
+     * @desc Цвет текста для неактивного таба в таббаре
+     * @tags color, component, background
+     */
+    colorTabbarTextInactive: ColorDescription;
 }
 export type Colors = {
     [key in keyof ColorsDescriptionStruct]: ColorWithStates;

package/interfaces/general/geometry/index.d.ts

@@ -40,6 +40,11 @@ export interface Sizes {
      * @tags size, stroke
      */
     sizeBorderRadius: number;
+    /**
+     * @desc Значение радиуса закругления для круглых кнопок
+     * @tags size, stroke
+     */
+    sizeBorderRadiusRounded: number;
     /**
      * @desc Legacy
      * @tags size, legacy

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

@@ -177,57 +177,57 @@ export interface VkontakteAndroidGradients {
 }
 export interface LocalVkontakteAndroidColorsDescriptionStruct {
     vkontakteColorSnippetBorderAlpha: ColorDescription;
-    vkontakteColorSnippetBackground?: ColorDescription;
+    vkontakteColorSnippetBackground: ColorDescription;
     vkontakteColorModalCardBorderAlpha: ColorDescription;
     vkontakteColorLandingSnippetBorderAlpha: ColorDescription;
     vkontakteColorActionSheetSeparatorAlpha: ColorDescription;
     vkontakteColorInputBorder: ColorDescription;
-    vkontakteColorSearchBarBackground?: ColorDescription;
-    vkontakteBackgroundHoverAlpha?: ColorDescription;
-    vkontakteColorBackgroundSuggestions?: ColorDescription;
-    vkontakteColorTextName?: ColorDescription;
-    vkontakteColorAccentAlternate?: ColorDescription;
-    vkontakteColorBackgroundKeyboard?: ColorDescription;
-    vkontakteColorContentPlaceholderIcon?: ColorDescription;
-    vkontakteColorContentTintForeground?: ColorDescription;
-    vkontakteColorControlBackground?: ColorDescription;
-    vkontakteColorControlForeground?: ColorDescription;
-    vkontakteColorControlTintMuted?: ColorDescription;
-    vkontakteColorHeaderSearchFieldBackground?: ColorDescription;
-    vkontakteColorHeaderSearchFieldTint?: ColorDescription;
-    vkontakteColorHeaderTabActiveIndicator?: ColorDescription;
-    vkontakteColorIconOutlineMedium?: ColorDescription;
-    vkontakteColorIconOutlineSecondary?: ColorDescription;
-    vkontakteColorSkeletonShimmerFrom?: ColorDescription;
-    vkontakteColorAlphaSkeletonShimmerTo?: ColorDescription;
-    vkontakteColorLoaderBackground?: ColorDescription;
-    vkontakteColorLoaderTint?: ColorDescription;
-    vkontakteColorMusicPlaybackIcon?: ColorDescription;
-    vkontakteColorStatusBackground?: ColorDescription;
-    vkontakteColorPlaceholderIconForegroundPrimary?: ColorDescription;
-    vkontakteColorPlaceholderIconForegroundSecondary?: ColorDescription;
-    vkontakteColorPlaceholderIconTint?: ColorDescription;
-    vkontakteColorPollOptionBackground?: ColorDescription;
-    vkontakteColorSearchBarFieldTint?: ColorDescription;
-    vkontakteColorTabbarActiveIcon?: ColorDescription;
-    vkontakteColorTabbarBackground?: ColorDescription;
-    vkontakteColorTabbarInactiveIcon?: ColorDescription;
-    vkontakteColorTabbarTabletTextSecondary?: ColorDescription;
-    vkontakteColorToolbarAttachBackgroundFrom?: ColorDescription;
-    vkontakteColorSplashScreenIcon?: ColorDescription;
-    vkontakteColorIconName?: ColorDescription;
-    vkontakteColorPanelTabActiveText?: ColorDescription;
-    vkontakteColorBackgroundTextAlpha?: ColorDescription;
-    vkontakteImReplySeparator?: ColorDescription;
-    vkontakteImToolbarVoiceMsgBackground?: ColorDescription;
-    vkontakteColorModalCardHeaderClose?: ColorDescription;
-    vkontakteImBubbleButtonOutgoingBackgroundAlpha?: ColorDescription;
-    vkontakteImBubbleButtonForeground?: ColorDescription;
-    vkontakteImBubbleIncomingHighlighted?: ColorDescription;
-    vkontakteImBubbleGiftBackground?: ColorDescription;
-    vkontakteImBubbleGiftBackgroundHighlighted?: ColorDescription;
-    vkontakteImBubbleOutgoingAlternate?: ColorDescription;
-    vkontakteImAttachTint?: ColorDescription;
+    vkontakteColorSearchBarBackground: ColorDescription;
+    vkontakteBackgroundHoverAlpha: ColorDescription;
+    vkontakteColorBackgroundSuggestions: ColorDescription;
+    vkontakteColorTextName: ColorDescription;
+    vkontakteColorAccentAlternate: ColorDescription;
+    vkontakteColorBackgroundKeyboard: ColorDescription;
+    vkontakteColorContentPlaceholderIcon: ColorDescription;
+    vkontakteColorContentTintForeground: ColorDescription;
+    vkontakteColorControlBackground: ColorDescription;
+    vkontakteColorControlForeground: ColorDescription;
+    vkontakteColorControlTintMuted: ColorDescription;
+    vkontakteColorHeaderSearchFieldBackground: ColorDescription;
+    vkontakteColorHeaderSearchFieldTint: ColorDescription;
+    vkontakteColorHeaderTabActiveIndicator: ColorDescription;
+    vkontakteColorIconOutlineMedium: ColorDescription;
+    vkontakteColorIconOutlineSecondary: ColorDescription;
+    vkontakteColorSkeletonShimmerFrom: ColorDescription;
+    vkontakteColorAlphaSkeletonShimmerTo: ColorDescription;
+    vkontakteColorLoaderBackground: ColorDescription;
+    vkontakteColorLoaderTint: ColorDescription;
+    vkontakteColorMusicPlaybackIcon: ColorDescription;
+    vkontakteColorStatusBackground: ColorDescription;
+    vkontakteColorPlaceholderIconForegroundPrimary: ColorDescription;
+    vkontakteColorPlaceholderIconForegroundSecondary: ColorDescription;
+    vkontakteColorPlaceholderIconTint: ColorDescription;
+    vkontakteColorPollOptionBackground: ColorDescription;
+    vkontakteColorSearchBarFieldTint: ColorDescription;
+    vkontakteColorTabbarActiveIcon: ColorDescription;
+    vkontakteColorTabbarBackground: ColorDescription;
+    vkontakteColorTabbarInactiveIcon: ColorDescription;
+    vkontakteColorTabbarTabletTextSecondary: ColorDescription;
+    vkontakteColorToolbarAttachBackgroundFrom: ColorDescription;
+    vkontakteColorSplashScreenIcon: ColorDescription;
+    vkontakteColorIconName: ColorDescription;
+    vkontakteColorPanelTabActiveText: ColorDescription;
+    vkontakteColorBackgroundTextAlpha: ColorDescription;
+    vkontakteImReplySeparator: ColorDescription;
+    vkontakteImToolbarVoiceMsgBackground: ColorDescription;
+    vkontakteColorModalCardHeaderClose: ColorDescription;
+    vkontakteImBubbleButtonOutgoingBackgroundAlpha: ColorDescription;
+    vkontakteImBubbleButtonForeground: ColorDescription;
+    vkontakteImBubbleIncomingHighlighted: ColorDescription;
+    vkontakteImBubbleGiftBackground: ColorDescription;
+    vkontakteImBubbleGiftBackgroundHighlighted: ColorDescription;
+    vkontakteImBubbleOutgoingAlternate: ColorDescription;
+    vkontakteImAttachTint: ColorDescription;
     vkontakteColorImForwardLineAlpha: ColorDescription;
     vkontakteColorImBubbleBorderAlternateHighlightedAlpha: ColorDescription;
     vkontakteColorImBubbleIncoming: ColorDescription;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.35.2-dev-cfbf64.0",
+  "version": "4.37.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -32,7 +32,7 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.21.8",
+    "@babel/core": "7.22.10",
     "@svgr/webpack": "8.0.1",
     "@types/color": "3.0.3",
     "@types/common-tags": "1.8.1",
@@ -43,12 +43,12 @@
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.4",
-    "@vkontakte/icons": "2.34.0",
+    "@vkontakte/icons": "2.54.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.7.2",
     "@vkontakte/vkjs": "0.32.2",
     "@vkontakte/vkui": "5.4.1",
-    "babel-jest": "29.5.0",
+    "babel-jest": "29.6.2",
     "babel-loader": "9.1.2",
     "clean-webpack-plugin": "4.0.0",
     "clsx": "1.2.1",
@@ -76,7 +76,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.1",
-    "style-loader": "3.3.2",
+    "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.9",
     "ts-jest": "29.1.0",
     "ts-loader": "9.4.2",
@@ -87,7 +87,7 @@
     "type-fest": "3.9.0",
     "typescript": "5.0.4",
     "webpack": "5.77.0",
-    "webpack-cli": "5.0.1",
+    "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.13.3",
     "webpack-notifier": "1.15.0"
   },

package/themeDescriptions/base/figma/vk.json

@@ -0,0 +1,237 @@
+{
+  "light": {
+    "states": {
+      "transparent_contrast": {
+        "active": "rgba(255, 255, 255, 0.12)",
+        "hover": "rgba(255, 255, 255, 0.08)"
+      },
+      "background_accent_themed": { "hover": "#2c7cde", "active": "#1e6fdb" },
+      "background_secondary_alpha": {
+        "active": "rgba(0, 0, 0, 0.12)",
+        "hover": "rgba(0, 0, 0, 0.08)"
+      },
+      "background_accent": { "hover": "#2c7cde", "active": "#1e6fdb" },
+      "background_positive": { "hover": "#3ca03e", "active": "#2f8d32" },
+      "transparent": { "active": "rgba(0, 0, 0, 0.08)", "hover": "rgba(0, 0, 0, 0.04)" },
+      "background_contrast": { "active": "#d7d8db", "hover": "#ebedf0" },
+      "background_secondary": { "hover": "#f0f2f4", "active": "#dcdde0" },
+      "background_negative": { "active": "#c93633", "hover": "#d83e3c" },
+      "background_contrast_secondary_alpha": {
+        "hover": "rgba(255, 255, 255, 0.24)",
+        "active": "rgba(255, 255, 255, 0.28)"
+      }
+    },
+    "elevation_3": "#c4c4c4",
+    "elevation_1": "#c4c4c4",
+    "elevation_2": "#c4c4c4",
+    "elevation_4": "#c4c4c4",
+    "text": {
+      "text_primary": "#000000",
+      "text_link_tint": "#71aaeb",
+      "text_link_visited": "#4986cc",
+      "text_positive": "#4bb44b",
+      "text_subhead": "#6d7885",
+      "text_accent": "#2688eb",
+      "text_negative": "#e64646",
+      "link_contrast": "#ffffff",
+      "text_link": "#2d81e0",
+      "text_secondary": "#818c99",
+      "text_accent_themed": "#2688eb",
+      "text_contrast": "#ffffff",
+      "text_tertiary": "#99a2ad",
+      "text_contrast_themed": "#ffffff",
+      "text_primary_invariably": "#000000",
+      "text_link_themed": "#2d81e0",
+      "text_muted": "#2c2d2e"
+    },
+    "palette": {
+      "accent_orange_fire": "#f05c44",
+      "accent_purple": "#735ce6",
+      "accent_blue": "#3f8ae0",
+      "accent_secondary": "#3f8ae0",
+      "raspberry_pink": "#e03fab",
+      "accent_orange": "#ffa000",
+      "accent_red": "#ff3347",
+      "accent_green": "#4bb34b",
+      "accent_gray": "#a3adb8",
+      "accent_violet": "#792ec0"
+    },
+    "background": {
+      "background_tertiary_alpha": "rgba(0, 0, 0, 0.03)",
+      "background_accent_tint": "#5a9eff",
+      "header_background": "#ffffff",
+      "background_contrast_secondary_alpha": "rgba(255, 255, 255, 0.20)",
+      "background_tertiary": "#f9f9f9",
+      "background_negative_tint": "#faebeb",
+      "background_secondary_alpha": "rgba(0, 0, 0, 0.04)",
+      "background_negative": "#e64646",
+      "background_positive_tint": "#e8f9e8",
+      "background_warning": "#fff2d6",
+      "background_accent": "#2688eb",
+      "background_contrast": "#ffffff",
+      "background_secondary": "#f5f5f5",
+      "background": "#ebedf0",
+      "background_modal": "#ffffff",
+      "background_positive": "#4bb34b",
+      "background_accent_themed": "#2688eb",
+      "background_contrast_inverse": "#2c2d2e",
+      "background_modal_inverse": "#2d2d2e",
+      "background_content": "#ffffff",
+      "field_background": "#f2f3f5"
+    },
+    "stroke": {
+      "separator_primary_alpha": "rgba(0, 0, 0, 0.12)",
+      "stroke_negative": "#e64646",
+      "stroke_accent": "#2688eb",
+      "image_border_alpha": "rgba(0, 0, 0, 0.08)",
+      "separator_primary": "#d7d8d9",
+      "stroke_accent_themed": "#2688eb",
+      "field_border_alpha": "rgba(0, 0, 0, 0.12)",
+      "stroke_positive": "#4bb34b",
+      "separator_secondary": "#e1e3e6",
+      "stroke_contrast": "#ffffff"
+    },
+    "icons": {
+      "icon_accent_themed": "#2688eb",
+      "icon_positive": "#4bb34b",
+      "icon_tertiary": "#b8c1cc",
+      "icon_accent": "#2688eb",
+      "icon_secondary_alpha": "rgba(0, 0, 0, 0.36)",
+      "icon_secondary": "#99a2ad",
+      "icon_contrast_themed": "#ffffff",
+      "icon_primary": "#2c2d2e",
+      "icon_primary_invariably": "#2c2d2e",
+      "icon_negative": "#e64646",
+      "icon_medium": "#818c99",
+      "icon_contrast": "#ffffff",
+      "icon_tertiary_alpha": "rgba(0, 0, 0, 0.24)",
+      "icon_contrast_secondary": "#f2f3f5",
+      "icon_medium_alpha": "rgba(0, 0, 0, 0.48)"
+    },
+    "other": {
+      "segmented_control": "#ffffff",
+      "image_placeholder_alpha": "rgba(0, 28, 61, 0.08)",
+      "avatar_overlay_inverse_alpha": "rgba(255, 255, 255, 0.85)",
+      "track_buffer": "#a0bfe4",
+      "write_bar_input_border": "#e1e3e6",
+      "avatar_overlay_alpha": "rgba(0, 0, 0, 0.60)",
+      "skeleton_from": "#f5f5f5",
+      "action_sheet_text": "#3f8ae0",
+      "write_bar_icon": "#3f8ae0",
+      "skeleton_to": "#e1e3e6",
+      "image_placeholder": "#f2f3f5",
+      "overlay_primary": "rgba(0, 0, 0, 0.40)",
+      "panel_header_icon": "#2688eb",
+      "write_bar_input_background": "#f2f3f5",
+      "track_background": "#e1e3e6",
+      "search_field_background": "#ebedf0"
+    }
+  },
+  "dark": {
+    "elevation_1": "#d9d9d9",
+    "elevation_2": "#d9d9d9",
+    "background": {
+      "background_contrast": "#ffffff",
+      "background_tertiary_alpha": "rgba(255, 255, 255, 0.03)",
+      "background_contrast_secondary_alpha": "rgba(255, 255, 255, 0.20)",
+      "background_secondary_alpha": "rgba(255, 255, 255, 0.10)",
+      "background_positive_tint": "#b1d6b1",
+      "background_content": "#19191a",
+      "background_contrast_inverse": "#2c2d2e",
+      "background_modal_inverse": "#ffffff",
+      "background_accent_tint": "#5a9eff",
+      "background_positive": "#4bb34b",
+      "background_accent": "#529ef4",
+      "header_background": "#19191a",
+      "background_negative_tint": "#522e2e",
+      "background_secondary": "#232324",
+      "background_tertiary": "#202021",
+      "background_modal": "#2c2d2e",
+      "background": "#0a0a0a",
+      "background_accent_themed": "#ffffff",
+      "field_background": "#232324",
+      "background_warning": "#857250",
+      "background_negative": "#ff5c5c"
+    },
+    "elevation_4": "#d9d9d9",
+    "elevation_3": "#d9d9d9",
+    "text": {
+      "text_link_tint": "#71aaeb",
+      "text_negative": "#ff5c5c",
+      "text_accent_themed": "#ffffff",
+      "text_subhead": "#969a9f",
+      "text_secondary": "#76787a",
+      "text_tertiary": "#5d5f61",
+      "link_contrast": "#ffffff",
+      "text_contrast": "#ffffff",
+      "text_contrast_themed": "#000000",
+      "text_accent": "#529ef4",
+      "text_link": "#529ef4",
+      "text_link_visited": "#4986cc",
+      "text_primary": "#e1e3e6",
+      "text_muted": "#e1e3e6",
+      "text_positive": "#4bb34b",
+      "text_link_themed": "#ffffff",
+      "text_primary_invariably": "#000000"
+    },
+    "palette": {
+      "accent_orange_fire": "#f05c44",
+      "raspberry_pink": "#f060c0",
+      "accent_gray": "#a3adb8",
+      "accent_orange": "#ffa000",
+      "accent_blue": "#71aaeb",
+      "accent_secondary": "#3f8ae0",
+      "accent_green": "#4bb34b",
+      "accent_purple": "#8b74ff",
+      "accent_violet": "#a94fff",
+      "accent_red": "#ff3347"
+    },
+    "stroke": {
+      "stroke_accent": "#529ef4",
+      "field_border_alpha": "rgba(255, 255, 255, 0.12)",
+      "separator_primary_alpha": "rgba(255, 255, 255, 0.12)",
+      "image_border_alpha": "rgba(255, 255, 255, 0.08)",
+      "separator_secondary": "#141415",
+      "stroke_positive": "#4bb34b",
+      "stroke_contrast": "#ffffff",
+      "separator_primary": "#363738",
+      "stroke_negative": "#ff5c5c",
+      "stroke_accent_themed": "#ffffff"
+    },
+    "icons": {
+      "icon_accent_themed": "#ffffff",
+      "icon_secondary": "#76787a",
+      "icon_positive": "#4bb34b",
+      "icon_medium": "#b0b1b6",
+      "icon_accent": "#529ef4",
+      "icon_contrast_themed": "#000000",
+      "icon_medium_alpha": "rgba(241, 247, 255, 0.66)",
+      "icon_contrast": "#ffffff",
+      "icon_tertiary": "#5d5f61",
+      "icon_tertiary_alpha": "rgba(255, 255, 255, 0.30)",
+      "icon_primary_invariably": "#2c2d2e",
+      "icon_secondary_alpha": "rgba(0, 0, 0, 0.43)",
+      "icon_contrast_secondary": "#f2f3f5",
+      "icon_primary": "#e1e3e6",
+      "icon_negative": "#ff5c5c"
+    },
+    "other": {
+      "segmented_control": "#626364",
+      "skeleton_to": "#2c2d2e",
+      "search_field_background": "#363738",
+      "track_buffer": "#405772",
+      "track_background": "#454647",
+      "avatar_overlay_alpha": "rgba(0, 0, 0, 0.60)",
+      "overlay_primary": "rgba(0, 0, 0, 0.40)",
+      "avatar_overlay_inverse_alpha": "rgba(255, 255, 255, 0.85)",
+      "action_sheet_text": "#71aaeb",
+      "write_bar_input_background": "#2c2d2e",
+      "image_placeholder": "#2a2b2c",
+      "panel_header_icon": "#71aaeb",
+      "write_bar_input_border": "#2c2d2e",
+      "write_bar_icon": "#76787a",
+      "skeleton_from": "#232324",
+      "image_placeholder_alpha": "rgba(241, 247, 255, 0.08)"
+    }
+  }
+}

package/themeDescriptions/base/paradigm.js

@@ -143,7 +143,9 @@ exports.lightColors = {
         colorAvatarOverlay: 'rgba(145, 147, 153, 0.48)',
         colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.48)',
+        colorOverlaySecondary: 'rgb(44, 45, 46, 0.5)',
         colorSegmentedControl: '#FFFFFF',
+        colorTabbarTextInactive: '#99A2AD',
         colorTransparent: 'transparent',
     },
 };
@@ -263,7 +265,9 @@ exports.darkColors = {
         colorAvatarOverlay: 'rgba(176, 178, 182, 0.48)',
         colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.48)',
+        colorOverlaySecondary: 'rgb(55, 56, 57, 0.5)',
         colorSegmentedControl: '#626364',
+        colorTabbarTextInactive: '#76787A',
         colorTransparent: 'transparent',
     },
 };
@@ -425,6 +429,8 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         compact: 24,
     }, sizeBorderRadius: {
         regular: 8,
+    }, sizeBorderRadiusRounded: {
+        regular: 48,
     }, sizeCheckBorderRadius: {
         regular: 4,
     }, sizeBorderRadiusPaper: {
@@ -453,7 +459,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     }, sizeArrowPromo: {
         regular: 40,
     }, sizePopupSmall: {
-        regular: 420,
+        regular: 430,
     }, sizePopupMedium: {
         regular: 680,
     }, sizePopupLarge: {

package/themeDescriptions/base/vk.d.ts

@@ -1,6 +1,7 @@
 import { ColorsDescription, ThemeDescription } from '../../interfaces/general';
 import { Elevation } from '../../interfaces/general/elevation';
 import { Gradients } from '../../interfaces/general/gradients';
+export declare const colorFromFigma: (colorsScheme: 'light' | 'dark') => ColorsDescription;
 export declare const lightColors: ColorsDescription;
 export declare const lightGradient: Gradients;
 export declare const lightElevation: Elevation;