@vkontakte/vkui-tokens 4.10.1 → 4.11.0

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

@@ -43,4 +43,18 @@ export interface Sizes {
     sizeSwitchHeight: number;
     sizeSwitchWidth: number;
     sizeSwitchPin: number;
+    sizeButtonBaseSmallPaddingHorizontalText: number;
+    sizeButtonBaseMediumPaddingHorizontalText: number;
+    sizeButtonBaseLargePaddingHorizontalText: number;
+    sizeButtonBaseSmallPaddingHorizontalIcon: number;
+    sizeButtonBaseMediumPaddingHorizontalIcon: number;
+    sizeButtonBaseLargePaddingHorizontalIcon: number;
+    sizeButtonTertiarySmallPaddingHorizontalText: number;
+    sizeButtonTertiaryMediumPaddingHorizontalText: number;
+    sizeButtonTertiaryLargePaddingHorizontalText: number;
+    sizeButtonTertiarySmallPaddingHorizontalIcon: number;
+    sizeButtonTertiaryMediumPaddingHorizontalIcon: number;
+    sizeButtonTertiaryLargePaddingHorizontalIcon: number;
+    sizeButtonMinimumWidth: number;
+    sizeFormItemPaddingVertical: number;
 }

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

@@ -172,6 +172,10 @@ export interface LocalOctaviusColorsDescriptionStruct {
     octaviusColorNotificationBorder: ColorDescription;
     octaviusColorPlaceholderBackground: ColorDescription;
     octaviusColorPromoBackground: ColorDescription;
+    octaviusColorBackgroundAccentTintAlpha: ColorDescription;
+    octaviusColorBackgroundNegativeTintAlpha: ColorDescription;
+    octaviusColorBackgroundPositiveTintAlpha: ColorDescription;
+    octaviusColorButtonBackgroundContrastAlpha: ColorDescription;
 }
 export declare type OctaviusLocalColors = {
     [key in keyof LocalOctaviusColorsDescriptionStruct]: ColorWithStates;

package/package.json

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

package/themeDescriptions/base/paradigm.js

@@ -475,6 +475,38 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 20,
         compact: 18,
     }, 
+    // Токены отступов для кнопок
+    sizeButtonBaseSmallPaddingHorizontalText: {
+        regular: 16,
+    }, sizeButtonBaseMediumPaddingHorizontalText: {
+        regular: 16,
+    }, sizeButtonBaseLargePaddingHorizontalText: {
+        regular: 20,
+    }, sizeButtonBaseSmallPaddingHorizontalIcon: {
+        regular: 12,
+    }, sizeButtonBaseMediumPaddingHorizontalIcon: {
+        regular: 12,
+    }, sizeButtonBaseLargePaddingHorizontalIcon: {
+        regular: 16,
+    }, sizeButtonTertiarySmallPaddingHorizontalText: {
+        regular: 12,
+    }, sizeButtonTertiaryMediumPaddingHorizontalText: {
+        regular: 12,
+    }, sizeButtonTertiaryLargePaddingHorizontalText: {
+        regular: 16,
+    }, sizeButtonTertiarySmallPaddingHorizontalIcon: {
+        regular: 8,
+    }, sizeButtonTertiaryMediumPaddingHorizontalIcon: {
+        regular: 8,
+    }, sizeButtonTertiaryLargePaddingHorizontalIcon: {
+        regular: 12,
+    }, sizeButtonMinimumWidth: {
+        regular: 80,
+    }, 
+    // FormItem
+    sizeFormItemPaddingVertical: {
+        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)', 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

@@ -475,6 +475,38 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
         regular: 20,
         compact: 18,
     }, 
+    // Токены отступов для кнопок
+    sizeButtonBaseSmallPaddingHorizontalText: {
+        regular: 16,
+    }, sizeButtonBaseMediumPaddingHorizontalText: {
+        regular: 16,
+    }, sizeButtonBaseLargePaddingHorizontalText: {
+        regular: 20,
+    }, sizeButtonBaseSmallPaddingHorizontalIcon: {
+        regular: 12,
+    }, sizeButtonBaseMediumPaddingHorizontalIcon: {
+        regular: 12,
+    }, sizeButtonBaseLargePaddingHorizontalIcon: {
+        regular: 16,
+    }, sizeButtonTertiarySmallPaddingHorizontalText: {
+        regular: 12,
+    }, sizeButtonTertiaryMediumPaddingHorizontalText: {
+        regular: 12,
+    }, sizeButtonTertiaryLargePaddingHorizontalText: {
+        regular: 16,
+    }, sizeButtonTertiarySmallPaddingHorizontalIcon: {
+        regular: 8,
+    }, sizeButtonTertiaryMediumPaddingHorizontalIcon: {
+        regular: 8,
+    }, sizeButtonTertiaryLargePaddingHorizontalIcon: {
+        regular: 12,
+    }, sizeButtonMinimumWidth: {
+        regular: 80,
+    }, 
+    // FormItem
+    sizeFormItemPaddingVertical: {
+        regular: 12,
+    }, 
     // Прочие отступы
     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

@@ -207,6 +207,20 @@
 	--vkui--size_switch_width--compact: 32px;
 	--vkui--size_switch_pin--regular: 20px;
 	--vkui--size_switch_pin--compact: 18px;
+	--vkui--size_button_base_small_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_base_medium_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_base_large_padding_horizontal_text--regular: 20px;
+	--vkui--size_button_base_small_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_base_medium_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_base_large_padding_horizontal_icon--regular: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_text--regular: 12px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_text--regular: 12px;
+	--vkui--size_button_tertiary_large_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_icon--regular: 8px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular: 8px;
+	--vkui--size_button_tertiary_large_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_minimum_width--regular: 80px;
+	--vkui--size_form_item_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);
@@ -1338,6 +1352,20 @@
 	--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_button_base_small_padding_horizontal_text: 16px;
+	--vkui--size_button_base_medium_padding_horizontal_text: 16px;
+	--vkui--size_button_base_large_padding_horizontal_text: 20px;
+	--vkui--size_button_base_small_padding_horizontal_icon: 12px;
+	--vkui--size_button_base_medium_padding_horizontal_icon: 12px;
+	--vkui--size_button_base_large_padding_horizontal_icon: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_text: 12px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_text: 12px;
+	--vkui--size_button_tertiary_large_padding_horizontal_text: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_icon: 8px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_icon: 8px;
+	--vkui--size_button_tertiary_large_padding_horizontal_icon: 12px;
+	--vkui--size_button_minimum_width: 80px;
+	--vkui--size_form_item_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);

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

@@ -207,6 +207,20 @@
 	--vkui--size_switch_width--compact: 32px;
 	--vkui--size_switch_pin--regular: 20px;
 	--vkui--size_switch_pin--compact: 18px;
+	--vkui--size_button_base_small_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_base_medium_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_base_large_padding_horizontal_text--regular: 20px;
+	--vkui--size_button_base_small_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_base_medium_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_base_large_padding_horizontal_icon--regular: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_text--regular: 12px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_text--regular: 12px;
+	--vkui--size_button_tertiary_large_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_icon--regular: 8px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular: 8px;
+	--vkui--size_button_tertiary_large_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_minimum_width--regular: 80px;
+	--vkui--size_form_item_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

@@ -115,6 +115,20 @@
 	--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_button_base_small_padding_horizontal_text: 16px;
+	--vkui--size_button_base_medium_padding_horizontal_text: 16px;
+	--vkui--size_button_base_large_padding_horizontal_text: 20px;
+	--vkui--size_button_base_small_padding_horizontal_icon: 12px;
+	--vkui--size_button_base_medium_padding_horizontal_icon: 12px;
+	--vkui--size_button_base_large_padding_horizontal_icon: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_text: 12px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_text: 12px;
+	--vkui--size_button_tertiary_large_padding_horizontal_text: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_icon: 8px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_icon: 8px;
+	--vkui--size_button_tertiary_large_padding_horizontal_icon: 12px;
+	--vkui--size_button_minimum_width: 80px;
+	--vkui--size_form_item_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);

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

@@ -207,6 +207,20 @@
 	--vkui--size_switch_width--compact: 32px;
 	--vkui--size_switch_pin--regular: 20px;
 	--vkui--size_switch_pin--compact: 18px;
+	--vkui--size_button_base_small_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_base_medium_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_base_large_padding_horizontal_text--regular: 20px;
+	--vkui--size_button_base_small_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_base_medium_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_base_large_padding_horizontal_icon--regular: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_text--regular: 12px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_text--regular: 12px;
+	--vkui--size_button_tertiary_large_padding_horizontal_text--regular: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_icon--regular: 8px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_icon--regular: 8px;
+	--vkui--size_button_tertiary_large_padding_horizontal_icon--regular: 12px;
+	--vkui--size_button_minimum_width--regular: 80px;
+	--vkui--size_form_item_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);