@vkontakte/vkui-tokens 4.14.3 → 4.16.1-dev-96aeb9.0

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

@@ -44,6 +44,8 @@ export interface Sizes {
     sizeSwitchHeight: number;
     sizeSwitchWidth: number;
     sizeSwitchPin: number;
+    sizePanelHeaderHeight: number;
+    sizeSearchHeight: number;
     sizeButtonBaseSmallPaddingHorizontal: number;
     sizeButtonBaseMediumPaddingHorizontal: number;
     sizeButtonBaseLargePaddingHorizontal: number;
@@ -59,4 +61,6 @@ export interface Sizes {
     sizeButtonMinimumWidth: number;
     sizeFormItemPaddingVertical: number;
     sizeSplitColPaddingHorizontal: number;
+    sizeSubnavigationBarGap: number;
+    sizeSubnavigationBarPaddingVertical: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.14.3",
+  "version": "4.16.1-dev-96aeb9.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",

package/themeDescriptions/base/paradigm.d.ts

@@ -8,3 +8,4 @@ export declare const lightTheme: ParadigmThemeDescription;
 export declare const darkThemeElevation: Elevation;
 export declare const darkThemeBase: ThemeDescription;
 export declare const darkTheme: ParadigmThemeDescription;
+export declare const darkThemeExport: ParadigmThemeDescription;

package/themeDescriptions/base/paradigm.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.darkTheme = exports.darkThemeBase = exports.darkThemeElevation = exports.lightTheme = exports.lightThemeBase = exports.darkColors = exports.lightColors = void 0;
+exports.darkThemeExport = exports.darkTheme = exports.darkThemeBase = exports.darkThemeElevation = exports.lightTheme = exports.lightThemeBase = exports.darkColors = exports.lightColors = void 0;
 var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
 var overlayColors_1 = require("../../build/themeProcessors/expandColors/overlayColors");
@@ -406,6 +406,9 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     }, sizeFieldHeight: {
         regular: 44,
         compact: 36,
+    }, sizeSearchHeight: {
+        regular: 36,
+        compact: 32,
     }, sizeButtonLargeHeight: {
         regular: 44,
         compact: 36,
@@ -496,6 +499,10 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 20,
         compact: 18,
     }, 
+    // Компонент PanelHeader
+    sizePanelHeaderHeight: {
+        regular: 56,
+    }, 
     // Токены отступов для кнопок
     sizeButtonBaseSmallPaddingHorizontal: {
         regular: 16,
@@ -532,6 +539,14 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     sizeSplitColPaddingHorizontal: {
         regular: 16,
     }, 
+    // Для регулирования расстояния между элементами в SubnavigationBar
+    sizeSubnavigationBarGap: {
+        regular: 8,
+    }, 
+    // Внешние отступы(верхний и нижний) для SubnavigationBar
+    sizeSubnavigationBarPaddingVertical: {
+        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 });
 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;
@@ -717,3 +732,7 @@ exports.darkTheme = __assign(__assign(__assign(__assign({}, exports.lightTheme),
             hover: 'rgba(255, 255, 255, 0.2)',
             active: 'rgba(255, 255, 255, 0.24)',
         }, colorThumbErrorBackgroundAlpha: 'rgba(237, 10, 52, 0.12)' }) });
+// Для экспорта базовой темы прописываем токен themeNameBase отдельно
+// В darkThemeBase прописать не можем, т.к. он тогда перетрёт themeNameBase
+// в продуктовых темах.
+exports.darkThemeExport = __assign(__assign({}, exports.darkTheme), { themeNameBase: 'paradigmBase' });

package/themeDescriptions/base/vk.js

@@ -444,6 +444,9 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
     }, sizeFieldHeight: {
         regular: 44,
         compact: 36,
+    }, sizeSearchHeight: {
+        regular: 36,
+        compact: 32,
     }, sizeButtonLargeHeight: {
         regular: 44,
         compact: 36,
@@ -531,6 +534,10 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: 20,
         compact: 18,
     }, 
+    // Компонент PanelHeader
+    sizePanelHeaderHeight: {
+        regular: 56,
+    }, 
     // Токены отступов для кнопок
     sizeButtonBaseSmallPaddingHorizontal: {
         regular: 16,
@@ -567,6 +574,14 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
     sizeSplitColPaddingHorizontal: {
         regular: 16,
     }, 
+    // Для регулирования расстояния между элементами в SubnavigationBar
+    sizeSubnavigationBarGap: {
+        regular: 8,
+    }, 
+    // Внешние отступы(верхний и нижний) для SubnavigationBar
+    sizeSubnavigationBarPaddingVertical: {
+        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 });
 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

@@ -163,6 +163,8 @@
 	--vkui--size_border_radius_promo--regular: 20px;
 	--vkui--size_field_height--regular: 44px;
 	--vkui--size_field_height--compact: 36px;
+	--vkui--size_search_height--regular: 36px;
+	--vkui--size_search_height--compact: 32px;
 	--vkui--size_button_large_height--regular: 44px;
 	--vkui--size_button_large_height--compact: 36px;
 	--vkui--size_button_medium_height--regular: 36px;
@@ -208,6 +210,7 @@
 	--vkui--size_switch_width--compact: 32px;
 	--vkui--size_switch_pin--regular: 20px;
 	--vkui--size_switch_pin--compact: 18px;
+	--vkui--size_panel_header_height--regular: 56px;
 	--vkui--size_button_base_small_padding_horizontal--regular: 16px;
 	--vkui--size_button_base_medium_padding_horizontal--regular: 16px;
 	--vkui--size_button_base_large_padding_horizontal--regular: 20px;
@@ -223,6 +226,8 @@
 	--vkui--size_button_minimum_width--regular: 80px;
 	--vkui--size_form_item_padding_vertical--regular: 12px;
 	--vkui--size_split_col_padding_horizontal--regular: 16px;
+	--vkui--size_subnavigation_bar_gap--regular: 8px;
+	--vkui--size_subnavigation_bar_padding_vertical--regular: 12px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
@@ -1345,6 +1350,7 @@
 	--vkui--size_border_radius_paper: 12px;
 	--vkui--size_border_radius_promo: 20px;
 	--vkui--size_field_height: var(--vkui--size_field_height--regular);
+	--vkui--size_search_height: var(--vkui--size_search_height--regular);
 	--vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
 	--vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
 	--vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
@@ -1382,6 +1388,7 @@
 	--vkui--size_switch_height: var(--vkui--size_switch_height--regular);
 	--vkui--size_switch_width: var(--vkui--size_switch_width--regular);
 	--vkui--size_switch_pin: var(--vkui--size_switch_pin--regular);
+	--vkui--size_panel_header_height: 56px;
 	--vkui--size_button_base_small_padding_horizontal: 16px;
 	--vkui--size_button_base_medium_padding_horizontal: 16px;
 	--vkui--size_button_base_large_padding_horizontal: 20px;
@@ -1397,6 +1404,8 @@
 	--vkui--size_button_minimum_width: 80px;
 	--vkui--size_form_item_padding_vertical: 12px;
 	--vkui--size_split_col_padding_horizontal: 16px;
+	--vkui--size_subnavigation_bar_gap: 8px;
+	--vkui--size_subnavigation_bar_padding_vertical: 12px;
 	--vkui--font_h0--font_size: var(--vkui--font_h0--font_size--regular);
 	--vkui--font_h0--line_height: var(--vkui--font_h0--line_height--regular);
 	--vkui--font_h0--font_family: var(--vkui--font_h0--font_family--regular);
@@ -1552,6 +1561,7 @@
 --vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--compact);
 --vkui--size_border_radius: var(--vkui--size_border_radius--compact);
 --vkui--size_field_height: var(--vkui--size_field_height--compact);
+--vkui--size_search_height: var(--vkui--size_search_height--compact);
 --vkui--size_button_large_height: var(--vkui--size_button_large_height--compact);
 --vkui--size_button_medium_height: var(--vkui--size_button_medium_height--compact);
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
@@ -1663,6 +1673,7 @@
 --vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--compact);
 --vkui--size_border_radius: var(--vkui--size_border_radius--compact);
 --vkui--size_field_height: var(--vkui--size_field_height--compact);
+--vkui--size_search_height: var(--vkui--size_search_height--compact);
 --vkui--size_button_large_height: var(--vkui--size_button_large_height--compact);
 --vkui--size_button_medium_height: var(--vkui--size_button_medium_height--compact);
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
@@ -1774,6 +1785,7 @@
 --vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
 --vkui--size_border_radius: var(--vkui--size_border_radius--regular);
 --vkui--size_field_height: var(--vkui--size_field_height--regular);
+--vkui--size_search_height: var(--vkui--size_search_height--regular);
 --vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
 --vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
@@ -1885,6 +1897,7 @@
 --vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
 --vkui--size_border_radius: var(--vkui--size_border_radius--regular);
 --vkui--size_field_height: var(--vkui--size_field_height--regular);
+--vkui--size_search_height: var(--vkui--size_search_height--regular);
 --vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
 --vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);

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

@@ -163,6 +163,8 @@
 	--vkui--size_border_radius_promo--regular: 20px;
 	--vkui--size_field_height--regular: 44px;
 	--vkui--size_field_height--compact: 36px;
+	--vkui--size_search_height--regular: 36px;
+	--vkui--size_search_height--compact: 32px;
 	--vkui--size_button_large_height--regular: 44px;
 	--vkui--size_button_large_height--compact: 36px;
 	--vkui--size_button_medium_height--regular: 36px;
@@ -208,6 +210,7 @@
 	--vkui--size_switch_width--compact: 32px;
 	--vkui--size_switch_pin--regular: 20px;
 	--vkui--size_switch_pin--compact: 18px;
+	--vkui--size_panel_header_height--regular: 56px;
 	--vkui--size_button_base_small_padding_horizontal--regular: 16px;
 	--vkui--size_button_base_medium_padding_horizontal--regular: 16px;
 	--vkui--size_button_base_large_padding_horizontal--regular: 20px;
@@ -223,6 +226,8 @@
 	--vkui--size_button_minimum_width--regular: 80px;
 	--vkui--size_form_item_padding_vertical--regular: 12px;
 	--vkui--size_split_col_padding_horizontal--regular: 16px;
+	--vkui--size_subnavigation_bar_gap--regular: 8px;
+	--vkui--size_subnavigation_bar_padding_vertical--regular: 12px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);

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

@@ -79,6 +79,7 @@
 	--vkui--size_border_radius_paper: 12px;
 	--vkui--size_border_radius_promo: 20px;
 	--vkui--size_field_height: var(--vkui--size_field_height--regular);
+	--vkui--size_search_height: var(--vkui--size_search_height--regular);
 	--vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
 	--vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
 	--vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
@@ -116,6 +117,7 @@
 	--vkui--size_switch_height: var(--vkui--size_switch_height--regular);
 	--vkui--size_switch_width: var(--vkui--size_switch_width--regular);
 	--vkui--size_switch_pin: var(--vkui--size_switch_pin--regular);
+	--vkui--size_panel_header_height: 56px;
 	--vkui--size_button_base_small_padding_horizontal: 16px;
 	--vkui--size_button_base_medium_padding_horizontal: 16px;
 	--vkui--size_button_base_large_padding_horizontal: 20px;
@@ -131,6 +133,8 @@
 	--vkui--size_button_minimum_width: 80px;
 	--vkui--size_form_item_padding_vertical: 12px;
 	--vkui--size_split_col_padding_horizontal: 16px;
+	--vkui--size_subnavigation_bar_gap: 8px;
+	--vkui--size_subnavigation_bar_padding_vertical: 12px;
 	--vkui--font_h0--font_size: var(--vkui--font_h0--font_size--regular);
 	--vkui--font_h0--line_height: var(--vkui--font_h0--line_height--regular);
 	--vkui--font_h0--font_family: var(--vkui--font_h0--font_family--regular);
@@ -286,6 +290,7 @@
 --vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--compact);
 --vkui--size_border_radius: var(--vkui--size_border_radius--compact);
 --vkui--size_field_height: var(--vkui--size_field_height--compact);
+--vkui--size_search_height: var(--vkui--size_search_height--compact);
 --vkui--size_button_large_height: var(--vkui--size_button_large_height--compact);
 --vkui--size_button_medium_height: var(--vkui--size_button_medium_height--compact);
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
@@ -397,6 +402,7 @@
 --vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--compact);
 --vkui--size_border_radius: var(--vkui--size_border_radius--compact);
 --vkui--size_field_height: var(--vkui--size_field_height--compact);
+--vkui--size_search_height: var(--vkui--size_search_height--compact);
 --vkui--size_button_large_height: var(--vkui--size_button_large_height--compact);
 --vkui--size_button_medium_height: var(--vkui--size_button_medium_height--compact);
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
@@ -508,6 +514,7 @@
 --vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
 --vkui--size_border_radius: var(--vkui--size_border_radius--regular);
 --vkui--size_field_height: var(--vkui--size_field_height--regular);
+--vkui--size_search_height: var(--vkui--size_search_height--regular);
 --vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
 --vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
@@ -619,6 +626,7 @@
 --vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
 --vkui--size_border_radius: var(--vkui--size_border_radius--regular);
 --vkui--size_field_height: var(--vkui--size_field_height--regular);
+--vkui--size_search_height: var(--vkui--size_search_height--regular);
 --vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
 --vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);

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

@@ -163,6 +163,8 @@
 	--vkui--size_border_radius_promo--regular: 20px;
 	--vkui--size_field_height--regular: 44px;
 	--vkui--size_field_height--compact: 36px;
+	--vkui--size_search_height--regular: 36px;
+	--vkui--size_search_height--compact: 32px;
 	--vkui--size_button_large_height--regular: 44px;
 	--vkui--size_button_large_height--compact: 36px;
 	--vkui--size_button_medium_height--regular: 36px;
@@ -208,6 +210,7 @@
 	--vkui--size_switch_width--compact: 32px;
 	--vkui--size_switch_pin--regular: 20px;
 	--vkui--size_switch_pin--compact: 18px;
+	--vkui--size_panel_header_height--regular: 56px;
 	--vkui--size_button_base_small_padding_horizontal--regular: 16px;
 	--vkui--size_button_base_medium_padding_horizontal--regular: 16px;
 	--vkui--size_button_base_large_padding_horizontal--regular: 20px;
@@ -223,6 +226,8 @@
 	--vkui--size_button_minimum_width--regular: 80px;
 	--vkui--size_form_item_padding_vertical--regular: 12px;
 	--vkui--size_split_col_padding_horizontal--regular: 16px;
+	--vkui--size_subnavigation_bar_gap--regular: 8px;
+	--vkui--size_subnavigation_bar_padding_vertical--regular: 12px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);