@vkontakte/vkui-tokens 4.45.0 → 4.46.1-dev-d285db.0

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

@@ -296,6 +296,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, icon
      */
     colorIconPositive: ColorDescription;
+    /**
+     * @desc Цвет иконок для предупреждений
+     * @tags color, icon
+     */
+    colorIconWarning: ColorDescription;
     /**
      * @desc Цвет иконок для ошибок и других негативных сценариев
      * @tags color, icon

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

@@ -1,7 +1,66 @@
-import { ThemeParadigmBase, ThemeParadigmBaseCssVars, ThemeParadigmBaseDescription } from '../paradigmBase';
-export interface ThemeCloud extends ThemeParadigmBase {
+import { Adaptive } from '../../general/tools';
+import { DefaultViewports } from '../../general/tools/viewports';
+import { Font } from '../../general/typography';
+import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
+interface ThemeCloudTypohraphy {
+    /**
+     * @desc Caption 1 CAPS • DEMIBOLD
+     * @tags font
+     * */
+    fontCaption1CapsDemibold: {
+        regular: Font;
+    };
+    /**
+     * @desc Caption 2 CAPS • DEMIBOLD
+     * @tags font
+     * */
+    fontCaption2CapsDemibold: {
+        regular: Font;
+    };
+    /**
+     * @desc Caption 3 CAPS • DEMIBOLD
+     * @tags font
+     * */
+    fontCaption3CapsDemibold: {
+        regular: Font;
+    };
+    /**
+     * @desc Заголовок Title 2 • Custom
+     * @tags font
+     * */
+    fontTitle2Custom: Adaptive<Font>;
+    /**
+     * @desc Заголовок Title3 • Custom
+     * @tags font
+     * */
+    fontTitle3Custom: Adaptive<Font>;
+    /**
+     * @desc Заголовок Subtitle • Medium
+     * @tags font
+     * */
+    fontSubtitleMedium: Font;
+    /**
+     * @desc Заголовок Subtitle • Regular
+     * @tags font
+     * */
+    fontSubtitleCustom: Font;
+    /**
+     * @desc Заголовок HeadlineLarge• Medium.
+     * Используется для обозначения занятого места в блоке с чистилкой
+     * @tags font
+     * */
+    fontHeadlineLargeMedium: Font;
+    /**
+     * @desc LargeText • Regular.
+     * Используется как текст под заголовком в тултипах
+     * @tags font
+     * */
+    fontLargeText: Font;
 }
-export interface ThemeCloudDescription extends ThemeParadigmBaseDescription {
+export interface ThemeCloud extends ParadigmTheme, ThemeCloudTypohraphy {
 }
-export interface ThemeCloudCssVars extends ThemeParadigmBaseCssVars {
+export interface ThemeCloudDescription extends ParadigmThemeDescription, ThemeCloudTypohraphy {
 }
+export interface ThemeCloudCssVars extends ParadigmThemeCssVars<DefaultViewports, ThemeCloud> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.45.0",
+  "version": "4.46.1-dev-d285db.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -43,17 +43,17 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.4",
+    "@babel/core": "7.24.5",
     "@svgr/webpack": "8.1.0",
     "@types/color": "3.0.6",
     "@types/common-tags": "1.8.4",
     "@types/fs-extra": "11.0.4",
-    "@types/lodash": "4.17.0",
+    "@types/lodash": "4.17.1",
     "@types/node": "18.11.10",
-    "@types/react": "18.2.79",
-    "@types/react-dom": "18.2.25",
+    "@types/react": "18.3.2",
+    "@types/react-dom": "18.3.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
-    "@vkontakte/icons": "2.108.0",
+    "@vkontakte/icons": "2.114.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.14.1",
     "@vkontakte/vkjs": "1.1.2",
@@ -61,7 +61,7 @@
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "clean-webpack-plugin": "4.0.0",
-    "clsx": "2.1.0",
+    "clsx": "2.1.1",
     "color": "4.2.3",
     "common-tags": "1.8.2",
     "copy-webpack-plugin": "12.0.2",
@@ -87,8 +87,8 @@
     "lint-staged": "15.2.2",
     "lodash": "4.17.21",
     "prettier": "3.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "rimraf": "5.0.5",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
@@ -98,7 +98,7 @@
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tscpaths": "0.0.9",
-    "type-fest": "4.16.0",
+    "type-fest": "4.18.2",
     "typescript": "5.2.2",
     "typescript-eslint": "7.0.1",
     "webpack": "5.91.0",

package/themeDescriptions/base/paradigm.js

@@ -88,7 +88,6 @@ exports.lightColors = {
         // Icons
         colorIconAccent: '#005FF9',
         colorIconAccentThemed: '#005FF9',
-        colorIconNegative: '#ED0A34',
         colorIconPrimary: '#2C2D2E',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#919399',
@@ -100,6 +99,8 @@ exports.lightColors = {
         colorIconContrast: '#FFFFFF',
         colorIconContrastThemed: '#FFFFFF',
         colorIconPositive: '#0DC268',
+        colorIconWarning: '#FF9E00',
+        colorIconNegative: '#ED0A34',
         colorIconContrastSecondary: '#F2F3F5',
         // Stroke
         colorStrokeAccent: '#005FF9',
@@ -213,7 +214,6 @@ exports.darkColors = {
         // Icons
         colorIconAccent: '#3C82FD',
         colorIconAccentThemed: '#FFFFFF',
-        colorIconNegative: '#FF5C5C',
         colorIconPrimary: '#D9DADD',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#B0B1B6',
@@ -225,6 +225,8 @@ exports.darkColors = {
         colorIconContrast: '#FFFFFF',
         colorIconContrastThemed: '#2C2D2E',
         colorIconPositive: '#0DC268',
+        colorIconWarning: '#FF9E00',
+        colorIconNegative: '#FF5C5C',
         colorIconContrastSecondary: '#F2F3F5',
         // Stroke
         colorStrokeAccent: '#3C82FD',

package/themeDescriptions/base/vk.js

@@ -91,11 +91,20 @@ var colorFromFigma = function (colorsScheme) {
             }[colorsScheme],
             colorBackgroundModal: background.background_modal,
             colorBackgroundModalInverse: background.background_modal_inverse,
-            colorBackgroundWarning: background.background_warning,
+            colorBackgroundWarning: {
+                light: '#FFF2D6',
+                dark: '#5B4D35',
+            }[colorsScheme],
             colorBackgroundPositive: background.background_positive,
             colorBackgroundNegative: background.background_negative,
-            colorBackgroundNegativeTint: background.background_negative_tint,
-            colorBackgroundPositiveTint: background.background_positive_tint,
+            colorBackgroundNegativeTint: {
+                light: '#FFE9E9',
+                dark: '#522E2E',
+            }[colorsScheme],
+            colorBackgroundPositiveTint: {
+                light: '#E8F9E8',
+                dark: '#2E3E2B',
+            }[colorsScheme],
             colorFieldBackground: background.field_background,
             colorHeaderBackground: background.header_background,
             // Text
@@ -131,6 +140,10 @@ var colorFromFigma = function (colorsScheme) {
             colorIconContrastThemed: icons.icon_contrast_themed,
             colorIconContrastSecondary: icons.icon_contrast_secondary,
             colorIconPositive: icons.icon_positive,
+            colorIconWarning: {
+                light: '#E1B406',
+                dark: '#DBAF06',
+            }[colorsScheme],
             colorIconNegative: icons.icon_negative,
             // Stroke
             colorStrokeAccent: stroke.stroke_accent,

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

@@ -541,9 +541,6 @@
 	--vkui--color_icon_accent_themed: #005FF9;
 	--vkui--color_icon_accent_themed--hover: #005CF1;
 	--vkui--color_icon_accent_themed--active: #0059EA;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #E40A34;
-	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_primary: #2C2D2E;
 	--vkui--color_icon_primary--hover: #2A2C2F;
 	--vkui--color_icon_primary--active: #282B2F;
@@ -577,6 +574,12 @@
 	--vkui--color_icon_positive: #0DC268;
 	--vkui--color_icon_positive--hover: #0CBB66;
 	--vkui--color_icon_positive--active: #0CB465;
+	--vkui--color_icon_warning: #FF9E00;
+	--vkui--color_icon_warning--hover: #F59802;
+	--vkui--color_icon_warning--active: #EB9305;
+	--vkui--color_icon_negative: #ED0A34;
+	--vkui--color_icon_negative--hover: #E40A34;
+	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;

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

@@ -168,9 +168,6 @@
 	--vkui--color_icon_accent_themed: #005FF9;
 	--vkui--color_icon_accent_themed--hover: #005CF1;
 	--vkui--color_icon_accent_themed--active: #0059EA;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #E40A34;
-	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_primary: #2C2D2E;
 	--vkui--color_icon_primary--hover: #2A2C2F;
 	--vkui--color_icon_primary--active: #282B2F;
@@ -204,6 +201,12 @@
 	--vkui--color_icon_positive: #0DC268;
 	--vkui--color_icon_positive--hover: #0CBB66;
 	--vkui--color_icon_positive--active: #0CB465;
+	--vkui--color_icon_warning: #FF9E00;
+	--vkui--color_icon_warning--hover: #F59802;
+	--vkui--color_icon_warning--active: #EB9305;
+	--vkui--color_icon_negative: #ED0A34;
+	--vkui--color_icon_negative--hover: #E40A34;
+	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;

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

@@ -125,9 +125,6 @@
 	--vkui--color_icon_accent_themed: #005FF9;
 	--vkui--color_icon_accent_themed--hover: #005CF1;
 	--vkui--color_icon_accent_themed--active: #0059EA;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #E40A34;
-	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_primary: #2C2D2E;
 	--vkui--color_icon_primary--hover: #2A2C2F;
 	--vkui--color_icon_primary--active: #282B2F;
@@ -161,6 +158,12 @@
 	--vkui--color_icon_positive: #0DC268;
 	--vkui--color_icon_positive--hover: #0CBB66;
 	--vkui--color_icon_positive--active: #0CB465;
+	--vkui--color_icon_warning: #FF9E00;
+	--vkui--color_icon_warning--hover: #F59802;
+	--vkui--color_icon_warning--active: #EB9305;
+	--vkui--color_icon_negative: #ED0A34;
+	--vkui--color_icon_negative--hover: #E40A34;
+	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;