@vkontakte/vkui-tokens 4.35.1 → 4.36.0

package/package.json

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

@@ -447,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;