@vkontakte/vkui-tokens 4.63.0 → 4.65.0

package/build/compilers/structJSON/compileStructJSON.js

@@ -19,6 +19,9 @@ var groups = [
     'color',
     'font',
     'theme',
+    'blur',
+    // Todo: Раскомментить в VKUI Tokens 5.0
+    // 'spacing',
     'other',
 ];
 function parseRawToken(rawToken) {

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

@@ -0,0 +1,7 @@
+export interface Effects {
+    /**
+     * @desc Среднее размытие
+     * @tags blur
+     */
+    blurM: number;
+}

package/interfaces/general/effects/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/interfaces/general/index.d.ts

@@ -2,6 +2,7 @@ import type { Property } from 'csstype';
 import { StaticTokens, Tokens } from './tools/tokenValue';
 import { Animations } from './animations';
 import { ColorDescription, Colors, ColorsDescriptionStruct } from './colors';
+import { Effects } from './effects';
 import { Elevation } from './elevation';
 import { Sizes, SpacingSizes } from './geometry';
 import { Gradients } from './gradients';
@@ -59,7 +60,7 @@ export interface WithThemeType {
 /**
  * Общий интерфейс между описанием и самой темой
  */
-export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues, ZIndex, TypographyBaseProps, Elevation, Gradients, Animations, SpacingSizes {
+export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues, ZIndex, TypographyBaseProps, Elevation, Gradients, Animations, Effects, SpacingSizes {
 }
 /**
  * Интерфейс описания Темы (в этом типе описываются все темы дизайн-системы)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.63.0",
+  "version": "4.65.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",

package/themeDescriptions/base/paradigm.js

@@ -662,7 +662,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     // Стандартные токены для отступов
     spacingSize3Xs: 2, spacingSize2Xs: 2, spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, spacingSize2Xl: 16, spacingSize3Xl: 20, spacingSize4Xl: 24, 
     // Прочие отступы
-    elevation1: '0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)', elevation1InvertY: '0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)', elevation2: '0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)', elevation3: '0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)', elevation4: '0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), 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, opacityActive: 0.72, zIndexModal: 99, zIndexPopout: 100 });
+    elevation1: '0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)', elevation1InvertY: '0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)', elevation2: '0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)', elevation3: '0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)', elevation4: '0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), 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, opacityActive: 0.72, blurM: 16, zIndexModal: 99, zIndexPopout: 100 });
 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.d.ts

@@ -1,4 +1,5 @@
 import { ColorsDescription, ThemeDescription } from '../../interfaces/general';
+import { Effects } from '../../interfaces/general/effects';
 import { Elevation } from '../../interfaces/general/elevation';
 import { Sizes } from '../../interfaces/general/geometry';
 import { Gradients } from '../../interfaces/general/gradients';
@@ -11,6 +12,7 @@ export declare const lightElevation: Elevation;
 export declare const darkColors: ColorsDescription;
 export declare const darkGradient: Gradients;
 export declare const darkElevation: Elevation;
+export declare const effects: Effects;
 type BaseFonts = Omit<{
     [key in keyof Fonts]: Adaptive<Fonts[key]>;
 }, 'fontHeadline'> & TypographyBaseProps;

package/themeDescriptions/base/vk.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.darkTheme = exports.lightTheme = exports.sizes = exports.fonts = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = exports.colorFromFigma = void 0;
+exports.darkTheme = exports.lightTheme = exports.sizes = exports.fonts = exports.effects = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = exports.colorFromFigma = void 0;
 var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
 var vk_json_1 = __importDefault(require("./figma/vk.json"));
@@ -60,11 +60,7 @@ var colorFromFigma = function (colorsScheme) {
                     hover: states.background_secondary_alpha.hover,
                     active: states.background_secondary_alpha.active,
                 },
-                dark: {
-                    normal: 'rgba(255, 255, 255, 0.10)',
-                    hover: 'rgba(255, 255, 255, 0.12)',
-                    active: 'rgba(255, 255, 255, 0.14)',
-                },
+                dark: 'rgba(255, 255, 255, 0.10)',
             }[colorsScheme],
             colorBackgroundTertiary: background.background_tertiary,
             colorBackgroundTertiaryAlpha: {
@@ -310,6 +306,9 @@ exports.darkElevation = {
     elevation3: '0px 0px 2px 0px rgba(0, 0, 0, 0.30), 0px 4px 16px 0px rgba(0, 0, 0, 0.30)',
     elevation4: '0px 0px 8px 0px rgba(0, 0, 0, 0.10), 0px 16px 16px 0px rgba(0, 0, 0, 0.20)',
 };
+exports.effects = {
+    blurM: 16,
+};
 exports.fonts = {
     // Типографика
     fontFamilyFallbacks: fontFamilyFallbacks,
@@ -746,7 +745,7 @@ exports.sizes = {
         regular: 0.33,
     },
 };
-exports.lightTheme = __assign(__assign(__assign(__assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), exports.lightGradient), exports.lightElevation), exports.fonts), { fontHeadline: (0, tokenHelpers_1.alias)('fontHeadline1') }), exports.sizes), { 
+exports.lightTheme = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), exports.lightGradient), exports.lightElevation), exports.effects), exports.fonts), { fontHeadline: (0, tokenHelpers_1.alias)('fontHeadline1') }), exports.sizes), { 
     // Стандартные токены для отступов
     spacingSize3Xs: 2, spacingSize2Xs: 2, spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, spacingSize2Xl: 16, spacingSize3Xl: 20, spacingSize4Xl: 24, 
     // Разное

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

@@ -285,6 +285,7 @@
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
 	--vkui--opacity_active: 0.72;
+	--vkui--blur_m: 16px;
 	--vkui--z_index_modal: 99;
 	--vkui--z_index_popout: 100;
 	--vkui--x0: 0px;

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

@@ -285,6 +285,7 @@
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
 	--vkui--opacity_active: 0.72;
+	--vkui--blur_m: 16px;
 	--vkui--z_index_modal: 99;
 	--vkui--z_index_popout: 100;
 	--vkui--x0: 0px;

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

@@ -27,6 +27,7 @@
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
 	--vkui--opacity_active: 0.72;
+	--vkui--blur_m: 16px;
 	--vkui--z_index_modal: 99;
 	--vkui--z_index_popout: 100;
 	--vkui--tone_value_overlay: 0.48;

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

@@ -285,6 +285,7 @@
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
 	--vkui--opacity_active: 0.72;
+	--vkui--blur_m: 16px;
 	--vkui--z_index_modal: 99;
 	--vkui--z_index_popout: 100;
 	--vkui--x0: 0px;