@vkontakte/vkui-tokens 4.7.0 → 4.9.0

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

@@ -40,4 +40,7 @@ export interface Sizes {
     sizeButtonGroupGapSmall: number;
     sizeButtonGroupGapMedium: number;
     sizeOptionHierarchy: number;
+    sizeSwitchHeight: number;
+    sizeSwitchWidth: number;
+    sizeSwitchPin: number;
 }

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

@@ -1,3 +1,4 @@
+import { Property } from 'csstype';
 import { ThemeCssVars } from '../../general';
 import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
 import { Adaptive } from '../../general/tools';
@@ -7,6 +8,10 @@ import { ThemeParadigmBase, ThemeParadigmBaseDescription } from '../paradigmBase
 export interface ThemeCalendarOverValues {
     calendarFontTextEvent: Adaptive<Font>;
     calendarFontTextEventSmall: Adaptive<Font>;
+    calendarElevationHeader: Property.BoxShadow;
+    calendarSizeBorderRadiusSmall: number;
+    calendarSizeBorderRadiusMedium: number;
+    calendarSizeBorderRadiusLarge: number;
 }
 export interface LocalCalendarColorDescriptionStruct {
     calendarColorBackgroundAccentTintThemed: ColorDescription;

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

@@ -0,0 +1,9 @@
+import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
+declare type SearchViewports = ['touch', 'desktopS'];
+export interface ThemeSearch extends ParadigmTheme<SearchViewports> {
+}
+export interface ThemeSearchDescription extends ParadigmThemeDescription<SearchViewports> {
+}
+export interface ThemeSearchCssVars extends ParadigmThemeCssVars<SearchViewports, ThemeSearch> {
+}
+export {};

package/interfaces/themes/search/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.7.0",
+  "version": "4.9.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -63,6 +63,7 @@
     "typescript": "4.2.4"
   },
   "engines": {
-    "npm": "8.5.5"
+    "npm": "8.5.5",
+    "yarn": ">=1.21.1 <=1.22.18"
   }
 }

package/themeDescriptions/base/paradigm.js

@@ -462,6 +462,17 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     sizeOptionHierarchy: {
         regular: 32,
     }, 
+    // Компонент Switch
+    sizeSwitchHeight: {
+        regular: 14,
+        compact: 12,
+    }, sizeSwitchWidth: {
+        regular: 34,
+        compact: 32,
+    }, sizeSwitchPin: {
+        regular: 20,
+        compact: 18,
+    }, 
     // Прочие отступы
     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)', 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;

package/themeDescriptions/base/vk.js

@@ -462,6 +462,17 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
     sizeOptionHierarchy: {
         regular: 32,
     }, 
+    // Компонент Switch
+    sizeSwitchHeight: {
+        regular: 14,
+        compact: 12,
+    }, sizeSwitchWidth: {
+        regular: 34,
+        compact: 32,
+    }, sizeSwitchPin: {
+        regular: 20,
+        compact: 18,
+    }, 
     // Прочие отступы
     elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)', elevation1InvertY: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06)', elevation2: '0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06)', elevation3: '0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08)', elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)', 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({}, exports.lightTheme), exports.darkColors), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark', 

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

@@ -201,6 +201,12 @@
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
 	--vkui--size_option_hierarchy--regular: 32px;
+	--vkui--size_switch_height--regular: 14px;
+	--vkui--size_switch_height--compact: 12px;
+	--vkui--size_switch_width--regular: 34px;
+	--vkui--size_switch_width--compact: 32px;
+	--vkui--size_switch_pin--regular: 20px;
+	--vkui--size_switch_pin--compact: 18px;
 	--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);
@@ -313,6 +319,10 @@
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
+	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--vkui--calendar_size_border_radius_small: 4px;
+	--vkui--calendar_size_border_radius_medium: 6px;
+	--vkui--calendar_size_border_radius_large: 8px;
 	--vkui--calendar_font_text_event--font_size--regular: 17px;
 	--vkui--calendar_font_text_event--line_height--regular: 24px;
 	--vkui--calendar_font_text_event--font_weight--regular: 400;
@@ -1319,6 +1329,9 @@
 	--vkui--size_button_group_gap_small: 8px;
 	--vkui--size_button_group_gap_medium: 12px;
 	--vkui--size_option_hierarchy: 32px;
+	--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--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);
@@ -1479,6 +1492,9 @@
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
 --vkui--size_button_padding_horizontal: var(--vkui--size_button_padding_horizontal--compact);
 --vkui--size_avatar_x_l: var(--vkui--size_avatar_x_l--compact);
+--vkui--size_switch_height: var(--vkui--size_switch_height--compact);
+--vkui--size_switch_width: var(--vkui--size_switch_width--compact);
+--vkui--size_switch_pin: var(--vkui--size_switch_pin--compact);
 --vkui--font_h0--font_size: var(--vkui--font_h0--font_size--compact);
 --vkui--font_h0--line_height: var(--vkui--font_h0--line_height--compact);
 --vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);
@@ -1587,6 +1603,9 @@
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
 --vkui--size_button_padding_horizontal: var(--vkui--size_button_padding_horizontal--compact);
 --vkui--size_avatar_x_l: var(--vkui--size_avatar_x_l--compact);
+--vkui--size_switch_height: var(--vkui--size_switch_height--compact);
+--vkui--size_switch_width: var(--vkui--size_switch_width--compact);
+--vkui--size_switch_pin: var(--vkui--size_switch_pin--compact);
 --vkui--font_h0--font_size: var(--vkui--font_h0--font_size--compact);
 --vkui--font_h0--line_height: var(--vkui--font_h0--line_height--compact);
 --vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);
@@ -1695,6 +1714,9 @@
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
 --vkui--size_button_padding_horizontal: var(--vkui--size_button_padding_horizontal--regular);
 --vkui--size_avatar_x_l: var(--vkui--size_avatar_x_l--regular);
+--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--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_h1--font_size: var(--vkui--font_h1--font_size--regular);
@@ -1803,6 +1825,9 @@
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
 --vkui--size_button_padding_horizontal: var(--vkui--size_button_padding_horizontal--regular);
 --vkui--size_avatar_x_l: var(--vkui--size_avatar_x_l--regular);
+--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--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_h1--font_size: var(--vkui--font_h1--font_size--regular);

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

@@ -201,6 +201,12 @@
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
 	--vkui--size_option_hierarchy--regular: 32px;
+	--vkui--size_switch_height--regular: 14px;
+	--vkui--size_switch_height--compact: 12px;
+	--vkui--size_switch_width--regular: 34px;
+	--vkui--size_switch_width--compact: 32px;
+	--vkui--size_switch_pin--regular: 20px;
+	--vkui--size_switch_pin--compact: 18px;
 	--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);
@@ -313,6 +319,10 @@
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
+	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--vkui--calendar_size_border_radius_small: 4px;
+	--vkui--calendar_size_border_radius_medium: 6px;
+	--vkui--calendar_size_border_radius_large: 8px;
 	--vkui--calendar_font_text_event--font_size--regular: 17px;
 	--vkui--calendar_font_text_event--line_height--regular: 24px;
 	--vkui--calendar_font_text_event--font_weight--regular: 400;

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

@@ -20,6 +20,7 @@
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
+	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
 	--vkui--colors_scheme: light;
 	--vkui--color_background_accent: #005FF9;
 	--vkui--color_background_accent--hover: #005CF1;

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

@@ -112,6 +112,9 @@
 	--vkui--size_button_group_gap_small: 8px;
 	--vkui--size_button_group_gap_medium: 12px;
 	--vkui--size_option_hierarchy: 32px;
+	--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--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);
@@ -272,6 +275,9 @@
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
 --vkui--size_button_padding_horizontal: var(--vkui--size_button_padding_horizontal--compact);
 --vkui--size_avatar_x_l: var(--vkui--size_avatar_x_l--compact);
+--vkui--size_switch_height: var(--vkui--size_switch_height--compact);
+--vkui--size_switch_width: var(--vkui--size_switch_width--compact);
+--vkui--size_switch_pin: var(--vkui--size_switch_pin--compact);
 --vkui--font_h0--font_size: var(--vkui--font_h0--font_size--compact);
 --vkui--font_h0--line_height: var(--vkui--font_h0--line_height--compact);
 --vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);
@@ -380,6 +386,9 @@
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
 --vkui--size_button_padding_horizontal: var(--vkui--size_button_padding_horizontal--compact);
 --vkui--size_avatar_x_l: var(--vkui--size_avatar_x_l--compact);
+--vkui--size_switch_height: var(--vkui--size_switch_height--compact);
+--vkui--size_switch_width: var(--vkui--size_switch_width--compact);
+--vkui--size_switch_pin: var(--vkui--size_switch_pin--compact);
 --vkui--font_h0--font_size: var(--vkui--font_h0--font_size--compact);
 --vkui--font_h0--line_height: var(--vkui--font_h0--line_height--compact);
 --vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);
@@ -488,6 +497,9 @@
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
 --vkui--size_button_padding_horizontal: var(--vkui--size_button_padding_horizontal--regular);
 --vkui--size_avatar_x_l: var(--vkui--size_avatar_x_l--regular);
+--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--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_h1--font_size: var(--vkui--font_h1--font_size--regular);
@@ -596,6 +608,9 @@
 --vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
 --vkui--size_button_padding_horizontal: var(--vkui--size_button_padding_horizontal--regular);
 --vkui--size_avatar_x_l: var(--vkui--size_avatar_x_l--regular);
+--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--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_h1--font_size: var(--vkui--font_h1--font_size--regular);

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

@@ -201,6 +201,12 @@
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
 	--vkui--size_option_hierarchy--regular: 32px;
+	--vkui--size_switch_height--regular: 14px;
+	--vkui--size_switch_height--compact: 12px;
+	--vkui--size_switch_width--regular: 34px;
+	--vkui--size_switch_width--compact: 32px;
+	--vkui--size_switch_pin--regular: 20px;
+	--vkui--size_switch_pin--compact: 18px;
 	--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);
@@ -313,6 +319,10 @@
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
+	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--vkui--calendar_size_border_radius_small: 4px;
+	--vkui--calendar_size_border_radius_medium: 6px;
+	--vkui--calendar_size_border_radius_large: 8px;
 	--vkui--calendar_font_text_event--font_size--regular: 17px;
 	--vkui--calendar_font_text_event--line_height--regular: 24px;
 	--vkui--calendar_font_text_event--font_weight--regular: 400;