@vkontakte/vkui-tokens 4.5.2 → 4.8.0

package/themes/calendar/cssVars/theme/fallbacks/index.pcss

@@ -58,7 +58,9 @@
 	--size-button-group-gap-space--regular: var(--vkui--size_button_group_gap_space--regular, 1px);
 	--size-button-group-gap-small--regular: var(--vkui--size_button_group_gap_small--regular, 8px);
 	--size-button-group-gap-medium--regular: var(--vkui--size_button_group_gap_medium--regular, 12px);
+	--size-option-hierarchy--regular: var(--vkui--size_option_hierarchy--regular, 32px);
 	--elevation1: var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04));
+	--elevation1-invert-y: var(--vkui--elevation1_invert_y, 0 -2px 0 0 rgba(0, 16, 61, 0.04));
 	--elevation2: var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32));
 	--elevation3: var(--vkui--elevation3, 0 16px 48px 0 rgba(0, 0, 0, 0.48));
 	--elevation4: var(--vkui--elevation4, 0 16px 48px 0 rgba(0, 0, 0, 0.48));
@@ -151,6 +153,10 @@
 	--type-border-button: var(--vkui--type_border_button, solid);
 	--type-border-position: var(--vkui--type_border_position, inset);
 	--theme-name-base: 'var\(--vkui--theme_name_base\,\ calendar\)';
+	--calendar-elevation-header: var(--vkui--calendar_elevation_header, 0 0 16px 0 rgba(2, 13, 41, 0.12));
+	--calendar-size-border-radius-small: var(--vkui--calendar_size_border_radius_small, 4px);
+	--calendar-size-border-radius-medium: var(--vkui--calendar_size_border_radius_medium, 6px);
+	--calendar-size-border-radius-large: var(--vkui--calendar_size_border_radius_large, 8px);
 	--colors-scheme: var(--vkui--colors_scheme, light);
 	--color-background-accent: var(--vkui--color_background_accent, #005FF9);
 	--color-background-accent--hover: var(--vkui--color_background_accent--hover, #005CF1);
@@ -197,6 +203,9 @@
 	--color-background-negative-tint: var(--vkui--color_background_negative_tint, #FAEBEB);
 	--color-background-negative-tint--hover: var(--vkui--color_background_negative_tint--hover, #F0E2E4);
 	--color-background-negative-tint--active: var(--vkui--color_background_negative_tint--active, #E6D9DD);
+	--color-field-background: var(--vkui--color_field_background, #ffffff);
+	--color-field-background--hover: var(--vkui--color_field_background--hover, #F5F5F7);
+	--color-field-background--active: var(--vkui--color_field_background--active, #EBECEF);
 	--color-text-accent: var(--vkui--color_text_accent, #005FF9);
 	--color-text-accent--hover: var(--vkui--color_text_accent--hover, #005CF1);
 	--color-text-accent--active: var(--vkui--color_text_accent--active, #0059EA);

package/themes/calendar/cssVars/theme/fallbacks/index.scss

@@ -57,7 +57,9 @@ $size-base-padding-horizontal--regular: var(--vkui--size_base_padding_horizontal
 $size-button-group-gap-space--regular: var(--vkui--size_button_group_gap_space--regular, 1px);
 $size-button-group-gap-small--regular: var(--vkui--size_button_group_gap_small--regular, 8px);
 $size-button-group-gap-medium--regular: var(--vkui--size_button_group_gap_medium--regular, 12px);
+$size-option-hierarchy--regular: var(--vkui--size_option_hierarchy--regular, 32px);
 $elevation1: var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04));
+$elevation1-invert-y: var(--vkui--elevation1_invert_y, 0 -2px 0 0 rgba(0, 16, 61, 0.04));
 $elevation2: var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32));
 $elevation3: var(--vkui--elevation3, 0 16px 48px 0 rgba(0, 0, 0, 0.48));
 $elevation4: var(--vkui--elevation4, 0 16px 48px 0 rgba(0, 0, 0, 0.48));
@@ -150,6 +152,10 @@ $tone-value-focus: var(--vkui--tone_value_focus, 0.08);
 $type-border-button: var(--vkui--type_border_button, solid);
 $type-border-position: var(--vkui--type_border_position, inset);
 $theme-name-base: 'var\(--vkui--theme_name_base\,\ calendar\)';
+$calendar-elevation-header: var(--vkui--calendar_elevation_header, 0 0 16px 0 rgba(2, 13, 41, 0.12));
+$calendar-size-border-radius-small: var(--vkui--calendar_size_border_radius_small, 4px);
+$calendar-size-border-radius-medium: var(--vkui--calendar_size_border_radius_medium, 6px);
+$calendar-size-border-radius-large: var(--vkui--calendar_size_border_radius_large, 8px);
 $colors-scheme: var(--vkui--colors_scheme, light);
 $color-background-accent: var(--vkui--color_background_accent, #005FF9);
 $color-background-accent--hover: var(--vkui--color_background_accent--hover, #005CF1);
@@ -196,6 +202,9 @@ $color-background-positive--active: var(--vkui--color_background_positive--activ
 $color-background-negative-tint: var(--vkui--color_background_negative_tint, #FAEBEB);
 $color-background-negative-tint--hover: var(--vkui--color_background_negative_tint--hover, #F0E2E4);
 $color-background-negative-tint--active: var(--vkui--color_background_negative_tint--active, #E6D9DD);
+$color-field-background: var(--vkui--color_field_background, #ffffff);
+$color-field-background--hover: var(--vkui--color_field_background--hover, #F5F5F7);
+$color-field-background--active: var(--vkui--color_field_background--active, #EBECEF);
 $color-text-accent: var(--vkui--color_text_accent, #005FF9);
 $color-text-accent--hover: var(--vkui--color_text_accent--hover, #005CF1);
 $color-text-accent--active: var(--vkui--color_text_accent--active, #0059EA);

package/themes/calendar/cssVars/theme/fallbacks/index.styl

@@ -57,7 +57,9 @@ $size-base-padding-horizontal--regular = var(--vkui--size_base_padding_horizonta
 $size-button-group-gap-space--regular = var(--vkui--size_button_group_gap_space--regular, 1px);
 $size-button-group-gap-small--regular = var(--vkui--size_button_group_gap_small--regular, 8px);
 $size-button-group-gap-medium--regular = var(--vkui--size_button_group_gap_medium--regular, 12px);
+$size-option-hierarchy--regular = var(--vkui--size_option_hierarchy--regular, 32px);
 $elevation1 = var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04));
+$elevation1-invert-y = var(--vkui--elevation1_invert_y, 0 -2px 0 0 rgba(0, 16, 61, 0.04));
 $elevation2 = var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32));
 $elevation3 = var(--vkui--elevation3, 0 16px 48px 0 rgba(0, 0, 0, 0.48));
 $elevation4 = var(--vkui--elevation4, 0 16px 48px 0 rgba(0, 0, 0, 0.48));
@@ -150,6 +152,10 @@ $tone-value-focus = var(--vkui--tone_value_focus, 0.08);
 $type-border-button = var(--vkui--type_border_button, solid);
 $type-border-position = var(--vkui--type_border_position, inset);
 $theme-name-base = 'var\(--vkui--theme_name_base\,\ calendar\)';
+$calendar-elevation-header = var(--vkui--calendar_elevation_header, 0 0 16px 0 rgba(2, 13, 41, 0.12));
+$calendar-size-border-radius-small = var(--vkui--calendar_size_border_radius_small, 4px);
+$calendar-size-border-radius-medium = var(--vkui--calendar_size_border_radius_medium, 6px);
+$calendar-size-border-radius-large = var(--vkui--calendar_size_border_radius_large, 8px);
 $colors-scheme = var(--vkui--colors_scheme, light);
 $color-background-accent = var(--vkui--color_background_accent, #005FF9);
 $color-background-accent--hover = var(--vkui--color_background_accent--hover, #005CF1);
@@ -196,6 +202,9 @@ $color-background-positive--active = var(--vkui--color_background_positive--acti
 $color-background-negative-tint = var(--vkui--color_background_negative_tint, #FAEBEB);
 $color-background-negative-tint--hover = var(--vkui--color_background_negative_tint--hover, #F0E2E4);
 $color-background-negative-tint--active = var(--vkui--color_background_negative_tint--active, #E6D9DD);
+$color-field-background = var(--vkui--color_field_background, #ffffff);
+$color-field-background--hover = var(--vkui--color_field_background--hover, #F5F5F7);
+$color-field-background--active = var(--vkui--color_field_background--active, #EBECEF);
 $color-text-accent = var(--vkui--color_text_accent, #005FF9);
 $color-text-accent--hover = var(--vkui--color_text_accent--hover, #005CF1);
 $color-text-accent--active = var(--vkui--color_text_accent--active, #0059EA);

package/themes/calendar/cssVars/theme/index.js

@@ -1461,10 +1461,24 @@ var theme = {
             "value": "var(--vkui--size_button_group_gap_medium--regular, 12px)"
         }
     },
+    "sizeOptionHierarchy": {
+        "auto": {
+            "name": "--vkui--size_option_hierarchy",
+            "value": "var(--vkui--size_option_hierarchy)"
+        },
+        "regular": {
+            "name": "--vkui--size_option_hierarchy--regular",
+            "value": "var(--vkui--size_option_hierarchy--regular, 32px)"
+        }
+    },
     "elevation1": {
         "name": "--vkui--elevation1",
         "value": "var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04))"
     },
+    "elevation1InvertY": {
+        "name": "--vkui--elevation1_invert_y",
+        "value": "var(--vkui--elevation1_invert_y, 0 -2px 0 0 rgba(0, 16, 61, 0.04))"
+    },
     "elevation2": {
         "name": "--vkui--elevation2",
         "value": "var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32))"
@@ -2299,6 +2313,22 @@ var theme = {
         "name": "--vkui--theme_name_base",
         "value": "var(--vkui--theme_name_base, calendar)"
     },
+    "calendarElevationHeader": {
+        "name": "--vkui--calendar_elevation_header",
+        "value": "var(--vkui--calendar_elevation_header, 0 0 16px 0 rgba(2, 13, 41, 0.12))"
+    },
+    "calendarSizeBorderRadiusSmall": {
+        "name": "--vkui--calendar_size_border_radius_small",
+        "value": "var(--vkui--calendar_size_border_radius_small, 4px)"
+    },
+    "calendarSizeBorderRadiusMedium": {
+        "name": "--vkui--calendar_size_border_radius_medium",
+        "value": "var(--vkui--calendar_size_border_radius_medium, 6px)"
+    },
+    "calendarSizeBorderRadiusLarge": {
+        "name": "--vkui--calendar_size_border_radius_large",
+        "value": "var(--vkui--calendar_size_border_radius_large, 8px)"
+    },
     "calendarFontTextEvent": {
         "auto": {
             "fontSize": {
@@ -2681,6 +2711,20 @@ var theme = {
             "value": "var(--vkui--color_background_negative_tint--active, #E6D9DD)"
         }
     },
+    "colorFieldBackground": {
+        "normal": {
+            "name": "--vkui--color_field_background",
+            "value": "var(--vkui--color_field_background, #ffffff)"
+        },
+        "hover": {
+            "name": "--vkui--color_field_background--hover",
+            "value": "var(--vkui--color_field_background--hover, #F5F5F7)"
+        },
+        "active": {
+            "name": "--vkui--color_field_background--active",
+            "value": "var(--vkui--color_field_background--active, #EBECEF)"
+        }
+    },
     "colorTextAccent": {
         "normal": {
             "name": "--vkui--color_text_accent",

package/themes/calendar/cssVars/theme/index.json

@@ -1459,10 +1459,24 @@
 			"value": "var(--vkui--size_button_group_gap_medium--regular, 12px)"
 		}
 	},
+	"sizeOptionHierarchy": {
+		"auto": {
+			"name": "--vkui--size_option_hierarchy",
+			"value": "var(--vkui--size_option_hierarchy)"
+		},
+		"regular": {
+			"name": "--vkui--size_option_hierarchy--regular",
+			"value": "var(--vkui--size_option_hierarchy--regular, 32px)"
+		}
+	},
 	"elevation1": {
 		"name": "--vkui--elevation1",
 		"value": "var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04))"
 	},
+	"elevation1InvertY": {
+		"name": "--vkui--elevation1_invert_y",
+		"value": "var(--vkui--elevation1_invert_y, 0 -2px 0 0 rgba(0, 16, 61, 0.04))"
+	},
 	"elevation2": {
 		"name": "--vkui--elevation2",
 		"value": "var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32))"
@@ -2297,6 +2311,22 @@
 		"name": "--vkui--theme_name_base",
 		"value": "var(--vkui--theme_name_base, calendar)"
 	},
+	"calendarElevationHeader": {
+		"name": "--vkui--calendar_elevation_header",
+		"value": "var(--vkui--calendar_elevation_header, 0 0 16px 0 rgba(2, 13, 41, 0.12))"
+	},
+	"calendarSizeBorderRadiusSmall": {
+		"name": "--vkui--calendar_size_border_radius_small",
+		"value": "var(--vkui--calendar_size_border_radius_small, 4px)"
+	},
+	"calendarSizeBorderRadiusMedium": {
+		"name": "--vkui--calendar_size_border_radius_medium",
+		"value": "var(--vkui--calendar_size_border_radius_medium, 6px)"
+	},
+	"calendarSizeBorderRadiusLarge": {
+		"name": "--vkui--calendar_size_border_radius_large",
+		"value": "var(--vkui--calendar_size_border_radius_large, 8px)"
+	},
 	"calendarFontTextEvent": {
 		"auto": {
 			"fontSize": {
@@ -2679,6 +2709,20 @@
 			"value": "var(--vkui--color_background_negative_tint--active, #E6D9DD)"
 		}
 	},
+	"colorFieldBackground": {
+		"normal": {
+			"name": "--vkui--color_field_background",
+			"value": "var(--vkui--color_field_background, #ffffff)"
+		},
+		"hover": {
+			"name": "--vkui--color_field_background--hover",
+			"value": "var(--vkui--color_field_background--hover, #F5F5F7)"
+		},
+		"active": {
+			"name": "--vkui--color_field_background--active",
+			"value": "var(--vkui--color_field_background--active, #EBECEF)"
+		}
+	},
 	"colorTextAccent": {
 		"normal": {
 			"name": "--vkui--color_text_accent",

package/themes/calendar/index.css

@@ -200,7 +200,9 @@
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
+	--vkui--size_option_hierarchy--regular: 32px;
 	--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);
 	--vkui--elevation3: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
@@ -311,6 +313,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;
@@ -381,6 +387,9 @@
 	--vkui--color_background_negative_tint: #FAEBEB;
 	--vkui--color_background_negative_tint--hover: #F0E2E4;
 	--vkui--color_background_negative_tint--active: #E6D9DD;
+	--vkui--color_field_background: #ffffff;
+	--vkui--color_field_background--hover: #F5F5F7;
+	--vkui--color_field_background--active: #EBECEF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;

package/themes/calendar/index.js

@@ -378,7 +378,11 @@ var theme = {
     "sizeButtonGroupGapMedium": {
         "regular": 12
     },
+    "sizeOptionHierarchy": {
+        "regular": 32
+    },
     "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)",
@@ -621,6 +625,10 @@ var theme = {
     "typeBorderButton": "solid",
     "typeBorderPosition": "inset",
     "themeNameBase": "calendar",
+    "calendarElevationHeader": "0 0 16px 0 rgba(2, 13, 41, 0.12)",
+    "calendarSizeBorderRadiusSmall": 4,
+    "calendarSizeBorderRadiusMedium": 6,
+    "calendarSizeBorderRadiusLarge": 8,
     "calendarFontTextEvent": {
         "regular": {
             "fontSize": 17,
@@ -739,6 +747,11 @@ var theme = {
         "hover": "#F0E2E4",
         "active": "#E6D9DD"
     },
+    "colorFieldBackground": {
+        "normal": "#ffffff",
+        "hover": "#F5F5F7",
+        "active": "#EBECEF"
+    },
     "colorTextAccent": {
         "normal": "#005FF9",
         "hover": "#005CF1",

package/themes/calendar/index.json

@@ -376,7 +376,11 @@
 	"sizeButtonGroupGapMedium": {
 		"regular": 12
 	},
+	"sizeOptionHierarchy": {
+		"regular": 32
+	},
 	"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)",
@@ -619,6 +623,10 @@
 	"typeBorderButton": "solid",
 	"typeBorderPosition": "inset",
 	"themeNameBase": "calendar",
+	"calendarElevationHeader": "0 0 16px 0 rgba(2, 13, 41, 0.12)",
+	"calendarSizeBorderRadiusSmall": 4,
+	"calendarSizeBorderRadiusMedium": 6,
+	"calendarSizeBorderRadiusLarge": 8,
 	"calendarFontTextEvent": {
 		"regular": {
 			"fontSize": 17,
@@ -737,6 +745,11 @@
 		"hover": "#F0E2E4",
 		"active": "#E6D9DD"
 	},
+	"colorFieldBackground": {
+		"normal": "#ffffff",
+		"hover": "#F5F5F7",
+		"active": "#EBECEF"
+	},
 	"colorTextAccent": {
 		"normal": "#005FF9",
 		"hover": "#005CF1",

package/themes/calendar/index.less

@@ -57,7 +57,9 @@
 @size-button-group-gap-space--regular: 1px;
 @size-button-group-gap-small--regular: 8px;
 @size-button-group-gap-medium--regular: 12px;
+@size-option-hierarchy--regular: 32px;
 @elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+@elevation1-invert-y: 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);
@@ -150,6 +152,10 @@
 @type-border-button: solid;
 @type-border-position: inset;
 @theme-name-base: 'calendar';
+@calendar-elevation-header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+@calendar-size-border-radius-small: 4px;
+@calendar-size-border-radius-medium: 6px;
+@calendar-size-border-radius-large: 8px;
 @colors-scheme: light;
 @color-background-accent: #005FF9;
 @color-background-accent--hover: #005CF1;
@@ -196,6 +202,9 @@
 @color-background-negative-tint: #FAEBEB;
 @color-background-negative-tint--hover: #F0E2E4;
 @color-background-negative-tint--active: #E6D9DD;
+@color-field-background: #ffffff;
+@color-field-background--hover: #F5F5F7;
+@color-field-background--active: #EBECEF;
 @color-text-accent: #005FF9;
 @color-text-accent--hover: #005CF1;
 @color-text-accent--active: #0059EA;

package/themes/calendar/index.pcss

@@ -58,7 +58,9 @@
 	--size-button-group-gap-space--regular: 1px;
 	--size-button-group-gap-small--regular: 8px;
 	--size-button-group-gap-medium--regular: 12px;
+	--size-option-hierarchy--regular: 32px;
 	--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+	--elevation1-invert-y: 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);
@@ -151,6 +153,10 @@
 	--type-border-button: solid;
 	--type-border-position: inset;
 	--theme-name-base: 'calendar';
+	--calendar-elevation-header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--calendar-size-border-radius-small: 4px;
+	--calendar-size-border-radius-medium: 6px;
+	--calendar-size-border-radius-large: 8px;
 	--colors-scheme: light;
 	--color-background-accent: #005FF9;
 	--color-background-accent--hover: #005CF1;
@@ -197,6 +203,9 @@
 	--color-background-negative-tint: #FAEBEB;
 	--color-background-negative-tint--hover: #F0E2E4;
 	--color-background-negative-tint--active: #E6D9DD;
+	--color-field-background: #ffffff;
+	--color-field-background--hover: #F5F5F7;
+	--color-field-background--active: #EBECEF;
 	--color-text-accent: #005FF9;
 	--color-text-accent--hover: #005CF1;
 	--color-text-accent--active: #0059EA;

package/themes/calendar/index.scss

@@ -57,7 +57,9 @@ $size-base-padding-horizontal--regular: 16px;
 $size-button-group-gap-space--regular: 1px;
 $size-button-group-gap-small--regular: 8px;
 $size-button-group-gap-medium--regular: 12px;
+$size-option-hierarchy--regular: 32px;
 $elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+$elevation1-invert-y: 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);
@@ -150,6 +152,10 @@ $tone-value-focus: 0.08;
 $type-border-button: solid;
 $type-border-position: inset;
 $theme-name-base: 'calendar';
+$calendar-elevation-header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+$calendar-size-border-radius-small: 4px;
+$calendar-size-border-radius-medium: 6px;
+$calendar-size-border-radius-large: 8px;
 $colors-scheme: light;
 $color-background-accent: #005FF9;
 $color-background-accent--hover: #005CF1;
@@ -196,6 +202,9 @@ $color-background-positive--active: #0CB465;
 $color-background-negative-tint: #FAEBEB;
 $color-background-negative-tint--hover: #F0E2E4;
 $color-background-negative-tint--active: #E6D9DD;
+$color-field-background: #ffffff;
+$color-field-background--hover: #F5F5F7;
+$color-field-background--active: #EBECEF;
 $color-text-accent: #005FF9;
 $color-text-accent--hover: #005CF1;
 $color-text-accent--active: #0059EA;

package/themes/calendar/index.styl

@@ -57,7 +57,9 @@ $size-base-padding-horizontal--regular = 16px;
 $size-button-group-gap-space--regular = 1px;
 $size-button-group-gap-small--regular = 8px;
 $size-button-group-gap-medium--regular = 12px;
+$size-option-hierarchy--regular = 32px;
 $elevation1 = 0 2px 0 0 rgba(0, 16, 61, 0.04);
+$elevation1-invert-y = 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);
@@ -150,6 +152,10 @@ $tone-value-focus = 0.08;
 $type-border-button = solid;
 $type-border-position = inset;
 $theme-name-base = 'calendar';
+$calendar-elevation-header = 0 0 16px 0 rgba(2, 13, 41, 0.12);
+$calendar-size-border-radius-small = 4px;
+$calendar-size-border-radius-medium = 6px;
+$calendar-size-border-radius-large = 8px;
 $colors-scheme = light;
 $color-background-accent = #005FF9;
 $color-background-accent--hover = #005CF1;
@@ -196,6 +202,9 @@ $color-background-positive--active = #0CB465;
 $color-background-negative-tint = #FAEBEB;
 $color-background-negative-tint--hover = #F0E2E4;
 $color-background-negative-tint--active = #E6D9DD;
+$color-field-background = #ffffff;
+$color-field-background--hover = #F5F5F7;
+$color-field-background--active = #EBECEF;
 $color-text-accent = #005FF9;
 $color-text-accent--hover = #005CF1;
 $color-text-accent--active = #0059EA;

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

@@ -200,7 +200,9 @@
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
+	--vkui--size_option_hierarchy--regular: 32px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 0, 0, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 0, 0, 0.04);
 	--vkui--elevation2: 0 4px 48px 0 rgba(0, 0, 0, 0.72);
 	--vkui--elevation3: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
@@ -311,6 +313,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;
@@ -381,6 +387,9 @@
 	--vkui--color_background_negative_tint: #522e2e;
 	--vkui--color_background_negative_tint--hover: #593636;
 	--vkui--color_background_negative_tint--active: #603F3F;
+	--vkui--color_field_background: #232324;
+	--vkui--color_field_background--hover: #2C2C2D;
+	--vkui--color_field_background--active: #353536;
 	--vkui--color_text_accent: #3C82FD;
 	--vkui--color_text_accent--hover: #4487FD;
 	--vkui--color_text_accent--active: #4C8CFD;
@@ -1313,6 +1322,7 @@
 	--vkui--size_button_group_gap_space: 1px;
 	--vkui--size_button_group_gap_small: 8px;
 	--vkui--size_button_group_gap_medium: 12px;
+	--vkui--size_option_hierarchy: 32px;
 	--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/calendarDark/cssVars/declarations/noColors.css

@@ -200,7 +200,9 @@
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
+	--vkui--size_option_hierarchy--regular: 32px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 0, 0, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 0, 0, 0.04);
 	--vkui--elevation2: 0 4px 48px 0 rgba(0, 0, 0, 0.72);
 	--vkui--elevation3: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
@@ -311,6 +313,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/calendarDark/cssVars/declarations/noSizes.css

@@ -1,6 +1,7 @@
 :root {
 	--vkui--theme_name: 'calendarDark';
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 0, 0, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 0, 0, 0.04);
 	--vkui--elevation2: 0 4px 48px 0 rgba(0, 0, 0, 0.72);
 	--vkui--elevation3: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
@@ -19,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: dark;
 	--vkui--color_background_accent: #2775FC;
 	--vkui--color_background_accent--hover: #307BFC;
@@ -65,6 +67,9 @@
 	--vkui--color_background_negative_tint: #522e2e;
 	--vkui--color_background_negative_tint--hover: #593636;
 	--vkui--color_background_negative_tint--active: #603F3F;
+	--vkui--color_field_background: #232324;
+	--vkui--color_field_background--hover: #2C2C2D;
+	--vkui--color_field_background--active: #353536;
 	--vkui--color_text_accent: #3C82FD;
 	--vkui--color_text_accent--hover: #4487FD;
 	--vkui--color_text_accent--active: #4C8CFD;

package/themes/calendarDark/cssVars/declarations/onlyColors.css

@@ -44,6 +44,9 @@
 	--vkui--color_background_negative_tint: #522e2e;
 	--vkui--color_background_negative_tint--hover: #593636;
 	--vkui--color_background_negative_tint--active: #603F3F;
+	--vkui--color_field_background: #232324;
+	--vkui--color_field_background--hover: #2C2C2D;
+	--vkui--color_field_background--active: #353536;
 	--vkui--color_text_accent: #3C82FD;
 	--vkui--color_text_accent--hover: #4487FD;
 	--vkui--color_text_accent--active: #4C8CFD;