@vkontakte/vkui-tokens 4.36.0 → 4.37.0

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

@@ -216,6 +216,11 @@ export interface ColorsDescriptionStruct {
      * @tags color
      */
     colorLinkContrast: ColorDescription;
+    /**
+     * @desc Цвет текста для кнопок
+     * @tags color
+     */
+    colorTextButton: ColorDescription;
     /**
      * @desc Акцентный цвет иконок
      * @tags color, icon
@@ -291,6 +296,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, icon
      */
     colorIconNegative: ColorDescription;
+    /**
+     * @desc Цвет иконок для кнопок
+     * @tags color, icon
+     */
+    colorIconButton: ColorDescription;
     /**
      * @desc Цвет акцентной обводки
      * @tags color,stroke
@@ -351,6 +361,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, stroke
      */
     colorSeparatorPrimary3x: ColorDescription;
+    /**
+     * @desc Цвет обводки для кнопок
+     * @tags color, stroke
+     */
+    colorStrokeButton: ColorDescription;
     /**
      * @desc Палитра цветов. Голубой цвет
      * @tags color, palette
@@ -406,6 +421,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, overlay
      */
     colorOverlayPrimary: ColorDescription;
+    /**
+     * @desc Вторичный цвет для подложек оверлеев
+     * @tags color, overlay
+     */
+    colorOverlaySecondary: ColorDescription;
     /**
      * @desc Фон для компонента Avatar. Не прозрачный
      * @tags color, component
@@ -491,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,10 +177,57 @@ export interface VkontakteAndroidGradients {
 }
 export interface LocalVkontakteAndroidColorsDescriptionStruct {
     vkontakteColorSnippetBorderAlpha: 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;
     vkontakteColorImForwardLineAlpha: ColorDescription;
     vkontakteColorImBubbleBorderAlternateHighlightedAlpha: ColorDescription;
     vkontakteColorImBubbleIncoming: ColorDescription;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.36.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",

package/themeDescriptions/base/paradigm.js

@@ -82,6 +82,7 @@ exports.lightColors = {
         colorTextContrastThemed: '#FFFFFF',
         colorLinkContrast: '#FFFFFF',
         colorTextPositive: '#0DC268',
+        colorTextButton: '#005FF9',
         // Icons
         colorIconAccent: '#005FF9',
         colorIconAccentThemed: '#005FF9',
@@ -98,6 +99,7 @@ exports.lightColors = {
         colorIconContrastThemed: '#FFFFFF',
         colorIconPositive: '#0DC268',
         colorIconContrastSecondary: '#F2F3F5',
+        colorIconButton: '#005FF9',
         // Stroke
         colorStrokeAccent: '#005FF9',
         colorStrokeAccentThemed: '#005FF9',
@@ -111,6 +113,7 @@ exports.lightColors = {
         colorStrokePositive: '#0DC268',
         colorSeparatorPrimary2x: '#CDD0D5',
         colorSeparatorPrimary3x: '#BFC3CA',
+        colorStrokeButton: '#005FF9',
         // Palette
         colorAccentBlue: '#005FF9',
         colorAccentGray: '#A5A7AD',
@@ -140,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',
     },
 };
@@ -199,6 +204,7 @@ exports.darkColors = {
         colorTextContrastThemed: '#2C2D2E',
         colorLinkContrast: '#FFFFFF',
         colorTextPositive: '#0DC268',
+        colorTextButton: '#FFFFFF',
         // Icons
         colorIconAccent: '#3C82FD',
         colorIconAccentThemed: '#FFFFFF',
@@ -215,6 +221,7 @@ exports.darkColors = {
         colorIconContrastThemed: '#2C2D2E',
         colorIconPositive: '#0DC268',
         colorIconContrastSecondary: '#F2F3F5',
+        colorIconButton: '#FFFFFF',
         // Stroke
         colorStrokeAccent: '#3C82FD',
         colorStrokeAccentThemed: '#FFFFFF',
@@ -228,6 +235,7 @@ exports.darkColors = {
         colorSeparatorPrimary2x: '#202022',
         colorSeparatorPrimary3x: '#2d2d2f',
         colorStrokePositive: '#0DC268',
+        colorStrokeButton: '#FFFFFF',
         // Palette
         colorAccentBlue: '#2775FC',
         colorAccentGray: '#9C9DA2',
@@ -257,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',
     },
 };
@@ -419,6 +429,8 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         compact: 24,
     }, sizeBorderRadius: {
         regular: 8,
+    }, sizeBorderRadiusRounded: {
+        regular: 48,
     }, sizeCheckBorderRadius: {
         regular: 4,
     }, sizeBorderRadiusPaper: {

package/themeDescriptions/base/vk.js

@@ -113,6 +113,10 @@ var colorFromFigma = function (colorsScheme) {
             colorTextLinkVisited: text.text_link_visited,
             colorTextMuted: text.text_muted,
             colorLinkContrast: text.link_contrast,
+            colorTextButton: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
             // Icons
             colorIconAccent: icons.icon_accent,
             colorIconAccentThemed: icons.icon_accent_themed,
@@ -129,6 +133,10 @@ var colorFromFigma = function (colorsScheme) {
             colorIconContrastSecondary: icons.icon_contrast_secondary,
             colorIconPositive: icons.icon_positive,
             colorIconNegative: icons.icon_negative,
+            colorIconButton: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
             // Stroke
             colorStrokeAccent: stroke.stroke_accent,
             colorStrokeAccentThemed: stroke.stroke_accent_themed,
@@ -155,6 +163,10 @@ var colorFromFigma = function (colorsScheme) {
                 },
                 dark: 'rgba(255, 255, 255, 0.12)',
             }[colorsScheme],
+            colorStrokeButton: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
             // Palette
             colorAccentBlue: palette.accent_blue,
             colorAccentGray: palette.accent_gray,
@@ -168,6 +180,10 @@ var colorFromFigma = function (colorsScheme) {
             colorAccentSecondary: palette.accent_secondary,
             // Other
             colorOverlayPrimary: other.overlay_primary,
+            colorOverlaySecondary: {
+                light: 'rgb(44, 45, 46, 0.5)',
+                dark: 'rgb(55, 56, 57, 0.5)',
+            }[colorsScheme],
             colorAvatarOverlay: other.avatar_overlay_alpha,
             colorAvatarOverlayInverseAlpha: other.avatar_overlay_inverse_alpha,
             colorActionSheetText: other.action_sheet_text,
@@ -187,6 +203,10 @@ var colorFromFigma = function (colorsScheme) {
             colorSearchFieldBackground: other.search_field_background,
             colorPanelHeaderIcon: other.panel_header_icon,
             colorSegmentedControl: other.segmented_control,
+            colorTabbarTextInactive: {
+                light: '#99a2ad',
+                dark: '#76787a',
+            }[colorsScheme],
             colorTransparent: 'transparent',
         },
     };
@@ -368,6 +388,8 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: 16,
     }, sizeBorderRadius: {
         regular: 8,
+    }, sizeBorderRadiusRounded: {
+        regular: 48,
     }, sizeCheckBorderRadius: {
         regular: 4,
     }, sizeBorderRadiusPaper: {

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

@@ -159,6 +159,7 @@
 	--vkui--size_popup_header_padding--compact: 24px;
 	--vkui--size_border_radius--compact: 8px;
 	--vkui--size_border_radius--regular: 8px;
+	--vkui--size_border_radius_rounded--regular: 48px;
 	--vkui--size_check_border_radius--regular: 4px;
 	--vkui--size_border_radius_paper--regular: 12px;
 	--vkui--size_border_radius_promo--regular: 20px;
@@ -498,6 +499,9 @@
 	--vkui--color_text_positive: #0DC268;
 	--vkui--color_text_positive--hover: #0CBB66;
 	--vkui--color_text_positive--active: #0CB465;
+	--vkui--color_text_button: #005FF9;
+	--vkui--color_text_button--hover: #005CF1;
+	--vkui--color_text_button--active: #0059EA;
 	--vkui--color_icon_accent: #005FF9;
 	--vkui--color_icon_accent--hover: #005CF1;
 	--vkui--color_icon_accent--active: #0059EA;
@@ -543,6 +547,9 @@
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;
+	--vkui--color_icon_button: #005FF9;
+	--vkui--color_icon_button--hover: #005CF1;
+	--vkui--color_icon_button--active: #0059EA;
 	--vkui--color_stroke_accent: #005FF9;
 	--vkui--color_stroke_accent--hover: #005CF1;
 	--vkui--color_stroke_accent--active: #0059EA;
@@ -579,6 +586,9 @@
 	--vkui--color_separator_primary3x: #BFC3CA;
 	--vkui--color_separator_primary3x--hover: #B7BCC4;
 	--vkui--color_separator_primary3x--active: #B0B5BF;
+	--vkui--color_stroke_button: #005FF9;
+	--vkui--color_stroke_button--hover: #005CF1;
+	--vkui--color_stroke_button--active: #0059EA;
 	--vkui--color_accent_blue: #005FF9;
 	--vkui--color_accent_blue--hover: #005CF1;
 	--vkui--color_accent_blue--active: #0059EA;
@@ -660,9 +670,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(44, 45, 46, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(44, 45, 46, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(44, 45, 46, 0.58);
 	--vkui--color_segmented_control: #FFFFFF;
 	--vkui--color_segmented_control--hover: #F5F5F7;
 	--vkui--color_segmented_control--active: #EBECEF;
+	--vkui--color_tabbar_text_inactive: #99A2AD;
+	--vkui--color_tabbar_text_inactive--hover: #939CA9;
+	--vkui--color_tabbar_text_inactive--active: #8D96A4;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);
@@ -1736,6 +1752,7 @@
 	--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);
 	--vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
 	--vkui--size_border_radius: var(--vkui--size_border_radius--regular);
+	--vkui--size_border_radius_rounded: 48px;
 	--vkui--size_check_border_radius: 4px;
 	--vkui--size_border_radius_paper: 12px;
 	--vkui--size_border_radius_promo: 20px;

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

@@ -159,6 +159,7 @@
 	--vkui--size_popup_header_padding--compact: 24px;
 	--vkui--size_border_radius--compact: 8px;
 	--vkui--size_border_radius--regular: 8px;
+	--vkui--size_border_radius_rounded--regular: 48px;
 	--vkui--size_check_border_radius--regular: 4px;
 	--vkui--size_border_radius_paper--regular: 12px;
 	--vkui--size_border_radius_promo--regular: 20px;

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

@@ -150,6 +150,9 @@
 	--vkui--color_text_positive: #0DC268;
 	--vkui--color_text_positive--hover: #0CBB66;
 	--vkui--color_text_positive--active: #0CB465;
+	--vkui--color_text_button: #005FF9;
+	--vkui--color_text_button--hover: #005CF1;
+	--vkui--color_text_button--active: #0059EA;
 	--vkui--color_icon_accent: #005FF9;
 	--vkui--color_icon_accent--hover: #005CF1;
 	--vkui--color_icon_accent--active: #0059EA;
@@ -195,6 +198,9 @@
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;
+	--vkui--color_icon_button: #005FF9;
+	--vkui--color_icon_button--hover: #005CF1;
+	--vkui--color_icon_button--active: #0059EA;
 	--vkui--color_stroke_accent: #005FF9;
 	--vkui--color_stroke_accent--hover: #005CF1;
 	--vkui--color_stroke_accent--active: #0059EA;
@@ -231,6 +237,9 @@
 	--vkui--color_separator_primary3x: #BFC3CA;
 	--vkui--color_separator_primary3x--hover: #B7BCC4;
 	--vkui--color_separator_primary3x--active: #B0B5BF;
+	--vkui--color_stroke_button: #005FF9;
+	--vkui--color_stroke_button--hover: #005CF1;
+	--vkui--color_stroke_button--active: #0059EA;
 	--vkui--color_accent_blue: #005FF9;
 	--vkui--color_accent_blue--hover: #005CF1;
 	--vkui--color_accent_blue--active: #0059EA;
@@ -312,9 +321,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(44, 45, 46, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(44, 45, 46, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(44, 45, 46, 0.58);
 	--vkui--color_segmented_control: #FFFFFF;
 	--vkui--color_segmented_control--hover: #F5F5F7;
 	--vkui--color_segmented_control--active: #EBECEF;
+	--vkui--color_tabbar_text_inactive: #99A2AD;
+	--vkui--color_tabbar_text_inactive--hover: #939CA9;
+	--vkui--color_tabbar_text_inactive--active: #8D96A4;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);

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

@@ -113,6 +113,9 @@
 	--vkui--color_text_positive: #0DC268;
 	--vkui--color_text_positive--hover: #0CBB66;
 	--vkui--color_text_positive--active: #0CB465;
+	--vkui--color_text_button: #005FF9;
+	--vkui--color_text_button--hover: #005CF1;
+	--vkui--color_text_button--active: #0059EA;
 	--vkui--color_icon_accent: #005FF9;
 	--vkui--color_icon_accent--hover: #005CF1;
 	--vkui--color_icon_accent--active: #0059EA;
@@ -158,6 +161,9 @@
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;
+	--vkui--color_icon_button: #005FF9;
+	--vkui--color_icon_button--hover: #005CF1;
+	--vkui--color_icon_button--active: #0059EA;
 	--vkui--color_stroke_accent: #005FF9;
 	--vkui--color_stroke_accent--hover: #005CF1;
 	--vkui--color_stroke_accent--active: #0059EA;
@@ -194,6 +200,9 @@
 	--vkui--color_separator_primary3x: #BFC3CA;
 	--vkui--color_separator_primary3x--hover: #B7BCC4;
 	--vkui--color_separator_primary3x--active: #B0B5BF;
+	--vkui--color_stroke_button: #005FF9;
+	--vkui--color_stroke_button--hover: #005CF1;
+	--vkui--color_stroke_button--active: #0059EA;
 	--vkui--color_accent_blue: #005FF9;
 	--vkui--color_accent_blue--hover: #005CF1;
 	--vkui--color_accent_blue--active: #0059EA;
@@ -275,9 +284,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(44, 45, 46, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(44, 45, 46, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(44, 45, 46, 0.58);
 	--vkui--color_segmented_control: #FFFFFF;
 	--vkui--color_segmented_control--hover: #F5F5F7;
 	--vkui--color_segmented_control--active: #EBECEF;
+	--vkui--color_tabbar_text_inactive: #99A2AD;
+	--vkui--color_tabbar_text_inactive--hover: #939CA9;
+	--vkui--color_tabbar_text_inactive--active: #8D96A4;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);