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

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

@@ -216,11 +216,6 @@ export interface ColorsDescriptionStruct {
      * @tags color
      */
     colorLinkContrast: ColorDescription;
-    /**
-     * @desc Цвет текста для кнопок
-     * @tags color
-     */
-    colorTextButton: ColorDescription;
     /**
      * @desc Акцентный цвет иконок
      * @tags color, icon
@@ -296,11 +291,6 @@ export interface ColorsDescriptionStruct {
      * @tags color, icon
      */
     colorIconNegative: ColorDescription;
-    /**
-     * @desc Цвет иконок для кнопок
-     * @tags color, icon
-     */
-    colorIconButton: ColorDescription;
     /**
      * @desc Цвет акцентной обводки
      * @tags color,stroke
@@ -361,11 +351,6 @@ export interface ColorsDescriptionStruct {
      * @tags color, stroke
      */
     colorSeparatorPrimary3x: ColorDescription;
-    /**
-     * @desc Цвет обводки для кнопок
-     * @tags color, stroke
-     */
-    colorStrokeButton: ColorDescription;
     /**
      * @desc Палитра цветов. Голубой цвет
      * @tags color, palette

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

@@ -177,57 +177,10 @@ 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.35.2-dev-cfbf64.0",
+  "version": "4.36.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -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

@@ -82,7 +82,6 @@ exports.lightColors = {
         colorTextContrastThemed: '#FFFFFF',
         colorLinkContrast: '#FFFFFF',
         colorTextPositive: '#0DC268',
-        colorTextButton: '#005FF9',
         // Icons
         colorIconAccent: '#005FF9',
         colorIconAccentThemed: '#005FF9',
@@ -99,7 +98,6 @@ exports.lightColors = {
         colorIconContrastThemed: '#FFFFFF',
         colorIconPositive: '#0DC268',
         colorIconContrastSecondary: '#F2F3F5',
-        colorIconButton: '#005FF9',
         // Stroke
         colorStrokeAccent: '#005FF9',
         colorStrokeAccentThemed: '#005FF9',
@@ -113,7 +111,6 @@ exports.lightColors = {
         colorStrokePositive: '#0DC268',
         colorSeparatorPrimary2x: '#CDD0D5',
         colorSeparatorPrimary3x: '#BFC3CA',
-        colorStrokeButton: '#005FF9',
         // Palette
         colorAccentBlue: '#005FF9',
         colorAccentGray: '#A5A7AD',
@@ -202,7 +199,6 @@ exports.darkColors = {
         colorTextContrastThemed: '#2C2D2E',
         colorLinkContrast: '#FFFFFF',
         colorTextPositive: '#0DC268',
-        colorTextButton: '#FFFFFF',
         // Icons
         colorIconAccent: '#3C82FD',
         colorIconAccentThemed: '#FFFFFF',
@@ -219,7 +215,6 @@ exports.darkColors = {
         colorIconContrastThemed: '#2C2D2E',
         colorIconPositive: '#0DC268',
         colorIconContrastSecondary: '#F2F3F5',
-        colorIconButton: '#FFFFFF',
         // Stroke
         colorStrokeAccent: '#3C82FD',
         colorStrokeAccentThemed: '#FFFFFF',
@@ -233,7 +228,6 @@ exports.darkColors = {
         colorSeparatorPrimary2x: '#202022',
         colorSeparatorPrimary3x: '#2d2d2f',
         colorStrokePositive: '#0DC268',
-        colorStrokeButton: '#FFFFFF',
         // Palette
         colorAccentBlue: '#2775FC',
         colorAccentGray: '#9C9DA2',
@@ -453,7 +447,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;