@vkontakte/vkui-tokens 4.17.1 → 4.18.0

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

@@ -4,6 +4,7 @@ import { Property } from 'csstype';
  */
 export interface Animations {
     animationEasingDefault: Property.TransitionTimingFunction;
+    animationEasingPlatform: Property.TransitionTimingFunction;
     animationDurationS: string;
     animationDurationM: string;
     animationDurationL: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.17.1",
+  "version": "4.18.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -36,6 +36,7 @@
     "@types/node": "15.0.1",
     "@typescript-eslint/eslint-plugin": "4.22.0",
     "@typescript-eslint/parser": "4.22.0",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.40.4",
     "color": "3.1.3",
     "common-tags": "1.8.0",
     "css.escape": "1.5.1",
@@ -48,19 +49,19 @@
     "eslint-plugin-jasmine": "4.1.2",
     "eslint-plugin-prettier": "3.4.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
-    "eslint-plugin-sonarjs": "0.9.1",
-    "fs-extra": "9.1.0",
+    "eslint-plugin-sonarjs": "0.15.0",
+    "fs-extra": "10.1.0",
     "jest": "26.6.3",
     "jest-junit": "12.0.0",
     "lodash": "4.17.21",
     "prettier": "2.2.1",
     "release-it": "14.10.0",
-    "rimraf": "2.6.1",
+    "rimraf": "3.0.2",
     "ts-jest": "26.5.5",
     "ts-node": "9.1.1",
     "tsconfig-paths": "3.9.0",
     "tscpaths": "0.0.9",
-    "type-fest": "1.0.2",
+    "type-fest": "2.19.0",
     "typescript": "4.2.4"
   },
   "engines": {

package/themeDescriptions/base/paradigm.js

@@ -550,7 +550,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 12,
     }, 
     // Прочие отступы
-    elevation1: '0 2px 0 0 rgba(0, 16, 61, 0.04)', elevation1InvertY: '0 -2px 0 0 rgba(0, 16, 61, 0.04)', elevation2: '0 4px 32px 0 rgba(0, 16, 61, 0.32)', elevation3: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', elevation4: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', gradientBlack: getGradientPointsFromColor_1.getGradientPointsFromColor('#000000', 0.4), gradientWhite: getGradientPointsFromColor_1.getGradientPointsFromColor('#FFFFFF'), gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryLight), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64 });
+    elevation1: '0 2px 0 0 rgba(0, 16, 61, 0.04)', elevation1InvertY: '0 -2px 0 0 rgba(0, 16, 61, 0.04)', elevation2: '0 4px 32px 0 rgba(0, 16, 61, 0.32)', elevation3: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', elevation4: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', gradientBlack: getGradientPointsFromColor_1.getGradientPointsFromColor('#000000', 0.4), gradientWhite: getGradientPointsFromColor_1.getGradientPointsFromColor('#FFFFFF'), gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryLight), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64 });
 var x05 = common_1.helpers.x05, x1 = common_1.helpers.x1, x2 = common_1.helpers.x2, x3 = common_1.helpers.x3, x4 = common_1.helpers.x4, x5 = common_1.helpers.x5, x6 = common_1.helpers.x6, x8 = common_1.helpers.x8, x10 = common_1.helpers.x10;
 exports.lightTheme = __assign(__assign(__assign({}, exports.lightThemeBase), common_1.helpers), { colors: __assign(__assign({}, exports.lightThemeBase.colors), { colorRating: '#ffd400', colorButtonContrastAlpha: {
             normal: 'rgba(255, 255, 255, 1)',

package/themeDescriptions/base/vk.js

@@ -66,7 +66,7 @@ exports.lightColors = {
         colorTextPositive: '#4BB34B',
         colorTextNegative: '#E64646',
         colorTextLink: '#2D81E0',
-        colorTextLinkThemed: '#4986CC',
+        colorTextLinkThemed: '#2D81E0',
         colorTextLinkVisited: '#4986CC',
         colorTextMuted: '#2C2D2E',
         colorLinkContrast: '#FFFFFF',
@@ -156,9 +156,9 @@ exports.darkColors = {
         colorBackgroundContent: '#19191A',
         colorBackgroundSecondary: '#232324',
         colorBackgroundSecondaryAlpha: {
-            normal: 'rgba(255, 255, 255, 0.04)',
-            hover: 'rgba(255, 255, 255, 0.08)',
-            active: 'rgba(255, 255, 255, 0.12)',
+            normal: 'rgba(255, 255, 255, 0.10)',
+            hover: 'rgba(255, 255, 255, 0.12)',
+            active: 'rgba(255, 255, 255, 0.14)',
         },
         colorBackgroundTertiary: colorBackgroundTertiaryDark,
         colorBackgroundContrast: '#FFFFFF',
@@ -166,7 +166,7 @@ exports.darkColors = {
         colorBackgroundContrastInverse: '#2d2d2e',
         colorBackgroundModal: '#2D2D2E',
         colorBackgroundModalInverse: '#ffffff',
-        colorBackgroundWarning: '#887244',
+        colorBackgroundWarning: '#857250',
         colorBackgroundPositive: '#4BB34B',
         colorBackgroundNegative: '#FF5C5C',
         colorBackgroundNegativeTint: '#522E2E',
@@ -179,7 +179,7 @@ exports.darkColors = {
         colorTextPrimary: '#E1E3E6',
         colorTextPrimaryInvariably: '#000000',
         colorTextSecondary: '#76787A',
-        colorTextSubhead: '#C1C3C6',
+        colorTextSubhead: '#969A9F',
         colorTextTertiary: '#636567',
         colorTextContrast: '#FFFFFF',
         colorTextContrastThemed: '#000000',
@@ -585,5 +585,5 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: 12,
     }, 
     // Разное
-    animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64 });
+    animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.4, 0, 0.2, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64 });
 exports.darkTheme = __assign(__assign(__assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), exports.darkGradient), exports.darkElevation), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark' });

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

@@ -240,6 +240,7 @@
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;
 	--vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
+	--vkui--animation_easing_platform: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
 	--vkui--x0: 0px;

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

@@ -240,6 +240,7 @@
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;
 	--vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
+	--vkui--animation_easing_platform: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
 	--vkui--x0: 0px;

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

@@ -12,6 +12,7 @@
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;
 	--vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
+	--vkui--animation_easing_platform: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
 	--vkui--tone_value_overlay: 0.48;

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

@@ -240,6 +240,7 @@
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;
 	--vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
+	--vkui--animation_easing_platform: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
 	--vkui--x0: 0px;