@vkontakte/vkui-tokens 4.28.0 → 4.29.1

package/README.md

@@ -5,6 +5,8 @@
 [![Npm](https://img.shields.io/npm/v/@vkontakte/vkui-tokens)](https://www.npmjs.com/package/@vkontakte/vkui-tokens)
 [![GitHub Repo stars](https://img.shields.io/github/stars/VKCOM/vkui-tokens?label=GitHub%20Repo%20Stars&style=social)](https://github.com/VKCOM/vkui-tokens)
 
+**[Интерактивная документация](https://vkcom.github.io/vkui-tokens/)**
+
 Этот репозиторий содержит токены единой дизайн-системы VKUI и
 их значения для тем оформления различных проектов.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.28.0",
+  "version": "4.29.1",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -36,20 +36,21 @@
     "@svgr/webpack": "6.5.1",
     "@types/color": "3.0.3",
     "@types/common-tags": "1.8.1",
-    "@types/fs-extra": "9.0.13",
-    "@types/jest": "29.2.4",
+    "@types/fs-extra": "11.0.1",
+    "@types/jest": "29.4.0",
     "@types/node": "18.11.10",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.51.4",
-    "@vkontakte/icons": "2.3.0",
+    "@vkontakte/icons": "2.14.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.7.2",
-    "@vkontakte/vkui": "4.40.0",
-    "babel-jest": "29.3.1",
-    "babel-loader": "9.1.0",
+    "@vkontakte/vkjs": "0.31.0",
+    "@vkontakte/vkui": "5.1.0",
+    "babel-jest": "29.4.1",
+    "babel-loader": "9.1.2",
     "clean-webpack-plugin": "4.0.0",
     "clsx": "1.2.1",
     "color": "4.2.3",
@@ -69,7 +70,7 @@
     "eslint-plugin-sonarjs": "0.17.0",
     "fs-extra": "11.1.0",
     "html-webpack-plugin": "5.5.0",
-    "jest": "29.3.1",
+    "jest": "29.4.1",
     "jest-junit": "15.0.0",
     "lodash": "4.17.21",
     "prettier": "2.8.0",
@@ -78,7 +79,7 @@
     "rimraf": "3.0.2",
     "style-loader": "3.3.1",
     "terser-webpack-plugin": "5.3.6",
-    "ts-jest": "29.0.3",
+    "ts-jest": "29.0.5",
     "ts-loader": "9.4.2",
     "ts-morph": "17.0.1",
     "ts-node": "10.9.1",

package/themeDescriptions/base/paradigm.js

@@ -167,7 +167,7 @@ exports.darkColors = {
             active: 'rgba(255, 255, 255, 0.28)',
         },
         colorBackgroundWarning: '#6C4E00',
-        colorBackgroundNegative: '#ED0A34',
+        colorBackgroundNegative: '#FF5C5C',
         colorBackgroundModal: '#303030',
         colorBackgroundPositive: '#0DC268',
         colorBackgroundNegativeTint: '#522e2e',
@@ -179,7 +179,7 @@ exports.darkColors = {
         // Text
         colorTextAccent: '#3C82FD',
         colorTextAccentThemed: '#FFFFFF',
-        colorTextNegative: '#ED0A34',
+        colorTextNegative: '#FF5C5C',
         colorTextLink: '#589BFF',
         colorTextLinkThemed: '#FFFFFF',
         colorTextMuted: '#E7E8EA',
@@ -196,7 +196,7 @@ exports.darkColors = {
         // Icons
         colorIconAccent: '#3C82FD',
         colorIconAccentThemed: '#FFFFFF',
-        colorIconNegative: '#ED0A34',
+        colorIconNegative: '#FF5C5C',
         colorIconPrimary: '#D9DADD',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#B0B1B6',
@@ -213,7 +213,7 @@ exports.darkColors = {
         colorStrokeAccent: '#3C82FD',
         colorStrokeAccentThemed: '#FFFFFF',
         colorStrokeContrast: '#FFFFFF',
-        colorStrokeNegative: '#ED0A34',
+        colorStrokeNegative: '#FF5C5C',
         colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
         colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.16)',
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.4)',
@@ -322,8 +322,8 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: {
             fontSize: 14,
             lineHeight: 18,
-            fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase3,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent3,
         },
         compact: {
             fontSize: 13,

package/themeDescriptions/base/vk.js

@@ -14,9 +14,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.darkTheme = exports.lightTheme = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = void 0;
 var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
-var FONT_FAMILY_DEFAULT = 'VK Sans Text';
-var fontFamilyAccent = "\"".concat(FONT_FAMILY_DEFAULT, "\", -apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif");
-var fontFamilyBase = "\"".concat(FONT_FAMILY_DEFAULT, "\", -apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif");
+var fontFamilyAccent = "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif";
+var fontFamilyBase = "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif";
 var fontWeightAccent1 = 600;
 var fontWeightAccent2 = 500;
 var fontWeightAccent3 = 400;
@@ -286,7 +285,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 24,
             lineHeight: 28,
-            letterSpacing: '-0.48px',
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent1,
         },
@@ -294,7 +292,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 20,
             lineHeight: 24,
-            letterSpacing: '-0.4px',
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent1,
         },
@@ -302,7 +299,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 17,
             lineHeight: 22,
-            letterSpacing: '-0.22px',
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent1,
         },
@@ -310,46 +306,39 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 16,
             lineHeight: 20,
-            letterSpacing: '-0.16px',
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent2,
         },
         compact: {
             fontSize: 15,
             lineHeight: 20,
-            letterSpacing: '-0.1px',
         },
     }, fontHeadline2: {
         regular: {
             fontSize: 15,
             lineHeight: 20,
-            letterSpacing: '-0.1px',
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent2,
         },
         compact: {
             fontSize: 14,
             lineHeight: 20,
-            letterSpacing: '-0.06px',
         },
     }, fontText: {
         regular: {
             fontSize: 16,
             lineHeight: 20,
-            letterSpacing: '-0.16px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase3,
         },
         compact: {
             fontSize: 15,
             lineHeight: 20,
-            letterSpacing: '-0.1px',
         },
     }, fontParagraph: {
         regular: {
             fontSize: 15,
             lineHeight: 20,
-            letterSpacing: '-0.1px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase3,
         },
@@ -357,20 +346,17 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 14,
             lineHeight: 18,
-            letterSpacing: '-0.06px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase3,
         },
         compact: {
             fontSize: 13,
             lineHeight: 16,
-            letterSpacing: '0px',
         },
     }, fontFootnote: {
         regular: {
             fontSize: 13,
             lineHeight: 16,
-            letterSpacing: '0px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase3,
         },
@@ -378,7 +364,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 13,
             lineHeight: 16,
-            letterSpacing: '0.3px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase3,
             textTransform: 'uppercase',
@@ -387,7 +372,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 12,
             lineHeight: 14,
-            letterSpacing: '0.06px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase3,
         },
@@ -395,7 +379,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 12,
             lineHeight: 14,
-            letterSpacing: '0.2px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase1,
             textTransform: 'uppercase',
@@ -404,7 +387,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 11,
             lineHeight: 14,
-            letterSpacing: '0.11px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase3,
         },
@@ -412,7 +394,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 11,
             lineHeight: 14,
-            letterSpacing: '0.3px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase1,
             textTransform: 'uppercase',
@@ -421,7 +402,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 9,
             lineHeight: 12,
-            letterSpacing: '0.18px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase3,
         },
@@ -429,7 +409,6 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: {
             fontSize: 9,
             lineHeight: 12,
-            letterSpacing: '0.3px',
             fontFamily: fontFamilyBase,
             fontWeight: fontWeightBase1,
             textTransform: 'uppercase',

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

@@ -405,9 +405,9 @@
 	--vkui--color_background_warning: #6C4E00;
 	--vkui--color_background_warning--hover: #72550A;
 	--vkui--color_background_warning--active: #785C14;
-	--vkui--color_background_negative: #ED0A34;
-	--vkui--color_background_negative--hover: #EE143C;
-	--vkui--color_background_negative--active: #EE1E44;
+	--vkui--color_background_negative: #FF5C5C;
+	--vkui--color_background_negative--hover: #FF6363;
+	--vkui--color_background_negative--active: #FF6969;
 	--vkui--color_background_tertiary: #252525;
 	--vkui--color_background_tertiary--hover: #2E2E2E;
 	--vkui--color_background_tertiary--active: #363636;
@@ -444,9 +444,9 @@
 	--vkui--color_text_accent_themed: #FFFFFF;
 	--vkui--color_text_accent_themed--hover: #EBEDF0;
 	--vkui--color_text_accent_themed--active: #D7D8DB;
-	--vkui--color_text_negative: #ED0A34;
-	--vkui--color_text_negative--hover: #EE143C;
-	--vkui--color_text_negative--active: #EE1E44;
+	--vkui--color_text_negative: #FF5C5C;
+	--vkui--color_text_negative--hover: #FF6363;
+	--vkui--color_text_negative--active: #FF6969;
 	--vkui--color_text_link: #589BFF;
 	--vkui--color_text_link--hover: #5F9FFF;
 	--vkui--color_text_link--active: #65A3FF;
@@ -492,9 +492,9 @@
 	--vkui--color_icon_accent_themed: #FFFFFF;
 	--vkui--color_icon_accent_themed--hover: #EBEDF0;
 	--vkui--color_icon_accent_themed--active: #D7D8DB;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #EE143C;
-	--vkui--color_icon_negative--active: #EE1E44;
+	--vkui--color_icon_negative: #FF5C5C;
+	--vkui--color_icon_negative--hover: #FF6363;
+	--vkui--color_icon_negative--active: #FF6969;
 	--vkui--color_icon_primary: #B4B4B4;
 	--vkui--color_icon_primary--hover: #B7B7B7;
 	--vkui--color_icon_primary--active: #BABABA;
@@ -540,9 +540,9 @@
 	--vkui--color_stroke_contrast: #FFFFFF;
 	--vkui--color_stroke_contrast--hover: #EBEDF0;
 	--vkui--color_stroke_contrast--active: #D7D8DB;
-	--vkui--color_stroke_negative: #ED0A34;
-	--vkui--color_stroke_negative--hover: #EE143C;
-	--vkui--color_stroke_negative--active: #EE1E44;
+	--vkui--color_stroke_negative: #FF5C5C;
+	--vkui--color_stroke_negative--hover: #FF6363;
+	--vkui--color_stroke_negative--active: #FF6969;
 	--vkui--color_image_border_alpha: rgba(255, 255, 255, 0.08);
 	--vkui--color_image_border_alpha--hover: rgba(255, 255, 255, 0.12);
 	--vkui--color_image_border_alpha--active: rgba(255, 255, 255, 0.16);

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

@@ -58,9 +58,9 @@
 	--vkui--color_background_warning: #6C4E00;
 	--vkui--color_background_warning--hover: #72550A;
 	--vkui--color_background_warning--active: #785C14;
-	--vkui--color_background_negative: #ED0A34;
-	--vkui--color_background_negative--hover: #EE143C;
-	--vkui--color_background_negative--active: #EE1E44;
+	--vkui--color_background_negative: #FF5C5C;
+	--vkui--color_background_negative--hover: #FF6363;
+	--vkui--color_background_negative--active: #FF6969;
 	--vkui--color_background_tertiary: #252525;
 	--vkui--color_background_tertiary--hover: #2E2E2E;
 	--vkui--color_background_tertiary--active: #363636;
@@ -97,9 +97,9 @@
 	--vkui--color_text_accent_themed: #FFFFFF;
 	--vkui--color_text_accent_themed--hover: #EBEDF0;
 	--vkui--color_text_accent_themed--active: #D7D8DB;
-	--vkui--color_text_negative: #ED0A34;
-	--vkui--color_text_negative--hover: #EE143C;
-	--vkui--color_text_negative--active: #EE1E44;
+	--vkui--color_text_negative: #FF5C5C;
+	--vkui--color_text_negative--hover: #FF6363;
+	--vkui--color_text_negative--active: #FF6969;
 	--vkui--color_text_link: #589BFF;
 	--vkui--color_text_link--hover: #5F9FFF;
 	--vkui--color_text_link--active: #65A3FF;
@@ -145,9 +145,9 @@
 	--vkui--color_icon_accent_themed: #FFFFFF;
 	--vkui--color_icon_accent_themed--hover: #EBEDF0;
 	--vkui--color_icon_accent_themed--active: #D7D8DB;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #EE143C;
-	--vkui--color_icon_negative--active: #EE1E44;
+	--vkui--color_icon_negative: #FF5C5C;
+	--vkui--color_icon_negative--hover: #FF6363;
+	--vkui--color_icon_negative--active: #FF6969;
 	--vkui--color_icon_primary: #B4B4B4;
 	--vkui--color_icon_primary--hover: #B7B7B7;
 	--vkui--color_icon_primary--active: #BABABA;
@@ -193,9 +193,9 @@
 	--vkui--color_stroke_contrast: #FFFFFF;
 	--vkui--color_stroke_contrast--hover: #EBEDF0;
 	--vkui--color_stroke_contrast--active: #D7D8DB;
-	--vkui--color_stroke_negative: #ED0A34;
-	--vkui--color_stroke_negative--hover: #EE143C;
-	--vkui--color_stroke_negative--active: #EE1E44;
+	--vkui--color_stroke_negative: #FF5C5C;
+	--vkui--color_stroke_negative--hover: #FF6363;
+	--vkui--color_stroke_negative--active: #FF6969;
 	--vkui--color_image_border_alpha: rgba(255, 255, 255, 0.08);
 	--vkui--color_image_border_alpha--hover: rgba(255, 255, 255, 0.12);
 	--vkui--color_image_border_alpha--active: rgba(255, 255, 255, 0.16);

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

@@ -29,9 +29,9 @@
 	--vkui--color_background_warning: #6C4E00;
 	--vkui--color_background_warning--hover: #72550A;
 	--vkui--color_background_warning--active: #785C14;
-	--vkui--color_background_negative: #ED0A34;
-	--vkui--color_background_negative--hover: #EE143C;
-	--vkui--color_background_negative--active: #EE1E44;
+	--vkui--color_background_negative: #FF5C5C;
+	--vkui--color_background_negative--hover: #FF6363;
+	--vkui--color_background_negative--active: #FF6969;
 	--vkui--color_background_tertiary: #252525;
 	--vkui--color_background_tertiary--hover: #2E2E2E;
 	--vkui--color_background_tertiary--active: #363636;
@@ -68,9 +68,9 @@
 	--vkui--color_text_accent_themed: #FFFFFF;
 	--vkui--color_text_accent_themed--hover: #EBEDF0;
 	--vkui--color_text_accent_themed--active: #D7D8DB;
-	--vkui--color_text_negative: #ED0A34;
-	--vkui--color_text_negative--hover: #EE143C;
-	--vkui--color_text_negative--active: #EE1E44;
+	--vkui--color_text_negative: #FF5C5C;
+	--vkui--color_text_negative--hover: #FF6363;
+	--vkui--color_text_negative--active: #FF6969;
 	--vkui--color_text_link: #589BFF;
 	--vkui--color_text_link--hover: #5F9FFF;
 	--vkui--color_text_link--active: #65A3FF;
@@ -116,9 +116,9 @@
 	--vkui--color_icon_accent_themed: #FFFFFF;
 	--vkui--color_icon_accent_themed--hover: #EBEDF0;
 	--vkui--color_icon_accent_themed--active: #D7D8DB;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #EE143C;
-	--vkui--color_icon_negative--active: #EE1E44;
+	--vkui--color_icon_negative: #FF5C5C;
+	--vkui--color_icon_negative--hover: #FF6363;
+	--vkui--color_icon_negative--active: #FF6969;
 	--vkui--color_icon_primary: #B4B4B4;
 	--vkui--color_icon_primary--hover: #B7B7B7;
 	--vkui--color_icon_primary--active: #BABABA;
@@ -164,9 +164,9 @@
 	--vkui--color_stroke_contrast: #FFFFFF;
 	--vkui--color_stroke_contrast--hover: #EBEDF0;
 	--vkui--color_stroke_contrast--active: #D7D8DB;
-	--vkui--color_stroke_negative: #ED0A34;
-	--vkui--color_stroke_negative--hover: #EE143C;
-	--vkui--color_stroke_negative--active: #EE1E44;
+	--vkui--color_stroke_negative: #FF5C5C;
+	--vkui--color_stroke_negative--hover: #FF6363;
+	--vkui--color_stroke_negative--active: #FF6969;
 	--vkui--color_image_border_alpha: rgba(255, 255, 255, 0.08);
 	--vkui--color_image_border_alpha--hover: rgba(255, 255, 255, 0.12);
 	--vkui--color_image_border_alpha--active: rgba(255, 255, 255, 0.16);