@vkontakte/vkui-tokens 4.5.2 → 4.8.0

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

@@ -56,7 +56,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, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06));
+	--elevation1-invert-y: var(--vkui--elevation1_invert_y, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06));
 	--elevation2: var(--vkui--elevation2, 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06));
 	--elevation3: var(--vkui--elevation3, 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08));
 	--elevation4: var(--vkui--elevation4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16));
@@ -66,6 +68,7 @@
 	--animation-easing-default: var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1));
 	--opacity-disable: var(--vkui--opacity_disable, 0.4);
 	--opacity-disable-accessibility: var(--vkui--opacity_disable_accessibility, 0.64);
+	--theme-inherits-from: 'var\(--vkui--theme_inherits_from\,\ vkBase\)';
 	--colors-scheme: var(--vkui--colors_scheme, dark);
 	--color-background-accent: var(--vkui--color_background_accent, #529EF4);
 	--color-background-accent--hover: var(--vkui--color_background_accent--hover, #59A2F4);
@@ -196,6 +199,9 @@
 	--color-field-border-alpha: var(--vkui--color_field_border_alpha, rgba(255, 255, 255, 0.12));
 	--color-field-border-alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(255, 255, 255, 0.16));
 	--color-field-border-alpha--active: var(--vkui--color_field_border_alpha--active, rgba(255, 255, 255, 0.2));
+	--color-field-background: var(--vkui--color_field_background, #292929);
+	--color-field-background--hover: var(--vkui--color_field_background--hover, #323232);
+	--color-field-background--active: var(--vkui--color_field_background--active, #3A3A3A);
 	--color-separator-primary-alpha: var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.4));
 	--color-separator-primary-alpha--hover: var(--vkui--color_separator_primary_alpha--hover, rgba(0, 0, 0, 0.44));
 	--color-separator-primary-alpha--active: var(--vkui--color_separator_primary_alpha--active, rgba(0, 0, 0, 0.48));

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

@@ -55,7 +55,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, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06));
+$elevation1-invert-y: var(--vkui--elevation1_invert_y, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06));
 $elevation2: var(--vkui--elevation2, 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06));
 $elevation3: var(--vkui--elevation3, 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08));
 $elevation4: var(--vkui--elevation4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16));
@@ -65,6 +67,7 @@ $animation-duration-s: var(--vkui--animation_duration_s, 0.1s);
 $animation-easing-default: var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1));
 $opacity-disable: var(--vkui--opacity_disable, 0.4);
 $opacity-disable-accessibility: var(--vkui--opacity_disable_accessibility, 0.64);
+$theme-inherits-from: 'var\(--vkui--theme_inherits_from\,\ vkBase\)';
 $colors-scheme: var(--vkui--colors_scheme, dark);
 $color-background-accent: var(--vkui--color_background_accent, #529EF4);
 $color-background-accent--hover: var(--vkui--color_background_accent--hover, #59A2F4);
@@ -195,6 +198,9 @@ $color-search-field-background--active: var(--vkui--color_search_field_backgroun
 $color-field-border-alpha: var(--vkui--color_field_border_alpha, rgba(255, 255, 255, 0.12));
 $color-field-border-alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(255, 255, 255, 0.16));
 $color-field-border-alpha--active: var(--vkui--color_field_border_alpha--active, rgba(255, 255, 255, 0.2));
+$color-field-background: var(--vkui--color_field_background, #292929);
+$color-field-background--hover: var(--vkui--color_field_background--hover, #323232);
+$color-field-background--active: var(--vkui--color_field_background--active, #3A3A3A);
 $color-separator-primary-alpha: var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.4));
 $color-separator-primary-alpha--hover: var(--vkui--color_separator_primary_alpha--hover, rgba(0, 0, 0, 0.44));
 $color-separator-primary-alpha--active: var(--vkui--color_separator_primary_alpha--active, rgba(0, 0, 0, 0.48));

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

@@ -55,7 +55,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, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06));
+$elevation1-invert-y = var(--vkui--elevation1_invert_y, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06));
 $elevation2 = var(--vkui--elevation2, 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06));
 $elevation3 = var(--vkui--elevation3, 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08));
 $elevation4 = var(--vkui--elevation4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16));
@@ -65,6 +67,7 @@ $animation-duration-s = var(--vkui--animation_duration_s, 0.1s);
 $animation-easing-default = var(--vkui--animation_easing_default, cubic-bezier(0.3, 0.3, 0.5, 1));
 $opacity-disable = var(--vkui--opacity_disable, 0.4);
 $opacity-disable-accessibility = var(--vkui--opacity_disable_accessibility, 0.64);
+$theme-inherits-from = 'var\(--vkui--theme_inherits_from\,\ vkBase\)';
 $colors-scheme = var(--vkui--colors_scheme, dark);
 $color-background-accent = var(--vkui--color_background_accent, #529EF4);
 $color-background-accent--hover = var(--vkui--color_background_accent--hover, #59A2F4);
@@ -195,6 +198,9 @@ $color-search-field-background--active = var(--vkui--color_search_field_backgrou
 $color-field-border-alpha = var(--vkui--color_field_border_alpha, rgba(255, 255, 255, 0.12));
 $color-field-border-alpha--hover = var(--vkui--color_field_border_alpha--hover, rgba(255, 255, 255, 0.16));
 $color-field-border-alpha--active = var(--vkui--color_field_border_alpha--active, rgba(255, 255, 255, 0.2));
+$color-field-background = var(--vkui--color_field_background, #292929);
+$color-field-background--hover = var(--vkui--color_field_background--hover, #323232);
+$color-field-background--active = var(--vkui--color_field_background--active, #3A3A3A);
 $color-separator-primary-alpha = var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.4));
 $color-separator-primary-alpha--hover = var(--vkui--color_separator_primary_alpha--hover, rgba(0, 0, 0, 0.44));
 $color-separator-primary-alpha--active = var(--vkui--color_separator_primary_alpha--active, rgba(0, 0, 0, 0.48));

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

@@ -1293,10 +1293,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, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06))"
     },
+    "elevation1InvertY": {
+        "name": "--vkui--elevation1_invert_y",
+        "value": "var(--vkui--elevation1_invert_y, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06))"
+    },
     "elevation2": {
         "name": "--vkui--elevation2",
         "value": "var(--vkui--elevation2, 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06))"
@@ -1333,6 +1347,10 @@ var theme = {
         "name": "--vkui--opacity_disable_accessibility",
         "value": "var(--vkui--opacity_disable_accessibility, 0.64)"
     },
+    "themeInheritsFrom": {
+        "name": "--vkui--theme_inherits_from",
+        "value": "var(--vkui--theme_inherits_from, vkBase)"
+    },
     "fontHeadline": {
         "auto": {
             "fontSize": {
@@ -1999,6 +2017,20 @@ var theme = {
             "value": "var(--vkui--color_field_border_alpha--active, rgba(255, 255, 255, 0.2))"
         }
     },
+    "colorFieldBackground": {
+        "normal": {
+            "name": "--vkui--color_field_background",
+            "value": "var(--vkui--color_field_background, #292929)"
+        },
+        "hover": {
+            "name": "--vkui--color_field_background--hover",
+            "value": "var(--vkui--color_field_background--hover, #323232)"
+        },
+        "active": {
+            "name": "--vkui--color_field_background--active",
+            "value": "var(--vkui--color_field_background--active, #3A3A3A)"
+        }
+    },
     "colorSeparatorPrimaryAlpha": {
         "normal": {
             "name": "--vkui--color_separator_primary_alpha",

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

@@ -1291,10 +1291,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, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06))"
 	},
+	"elevation1InvertY": {
+		"name": "--vkui--elevation1_invert_y",
+		"value": "var(--vkui--elevation1_invert_y, 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06))"
+	},
 	"elevation2": {
 		"name": "--vkui--elevation2",
 		"value": "var(--vkui--elevation2, 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06))"
@@ -1331,6 +1345,10 @@
 		"name": "--vkui--opacity_disable_accessibility",
 		"value": "var(--vkui--opacity_disable_accessibility, 0.64)"
 	},
+	"themeInheritsFrom": {
+		"name": "--vkui--theme_inherits_from",
+		"value": "var(--vkui--theme_inherits_from, vkBase)"
+	},
 	"fontHeadline": {
 		"auto": {
 			"fontSize": {
@@ -1997,6 +2015,20 @@
 			"value": "var(--vkui--color_field_border_alpha--active, rgba(255, 255, 255, 0.2))"
 		}
 	},
+	"colorFieldBackground": {
+		"normal": {
+			"name": "--vkui--color_field_background",
+			"value": "var(--vkui--color_field_background, #292929)"
+		},
+		"hover": {
+			"name": "--vkui--color_field_background--hover",
+			"value": "var(--vkui--color_field_background--hover, #323232)"
+		},
+		"active": {
+			"name": "--vkui--color_field_background--active",
+			"value": "var(--vkui--color_field_background--active, #3A3A3A)"
+		}
+	},
 	"colorSeparatorPrimaryAlpha": {
 		"normal": {
 			"name": "--vkui--color_separator_primary_alpha",

package/themes/vkBaseDark/index.css

@@ -152,7 +152,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: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06);
+	--vkui--elevation1_invert_y: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06);
 	--vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06);
 	--vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
@@ -162,6 +164,7 @@
 	--vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.4;
 	--vkui--opacity_disable_accessibility: 0.64;
+	--vkui--theme_inherits_from: 'vkBase';
 	--vkui--font_headline--font_size--regular: 16px;
 	--vkui--font_headline--line_height--regular: 20px;
 	--vkui--font_headline--letter_spacing--regular: -0.16px;
@@ -300,6 +303,9 @@
 	--vkui--color_field_border_alpha: rgba(255, 255, 255, 0.12);
 	--vkui--color_field_border_alpha--hover: rgba(255, 255, 255, 0.16);
 	--vkui--color_field_border_alpha--active: rgba(255, 255, 255, 0.2);
+	--vkui--color_field_background: #292929;
+	--vkui--color_field_background--hover: #323232;
+	--vkui--color_field_background--active: #3A3A3A;
 	--vkui--color_separator_primary_alpha: rgba(0, 0, 0, 0.4);
 	--vkui--color_separator_primary_alpha--hover: rgba(0, 0, 0, 0.44);
 	--vkui--color_separator_primary_alpha--active: rgba(0, 0, 0, 0.48);

package/themes/vkBaseDark/index.js

@@ -306,7 +306,11 @@ var theme = {
     "sizeButtonGroupGapMedium": {
         "regular": 12
     },
+    "sizeOptionHierarchy": {
+        "regular": 32
+    },
     "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)",
@@ -316,6 +320,7 @@ var theme = {
     "animationEasingDefault": "cubic-bezier(0.3, 0.3, 0.5, 1)",
     "opacityDisable": 0.4,
     "opacityDisableAccessibility": 0.64,
+    "themeInheritsFrom": "vkBase",
     "fontHeadline": {
         "regular": {
             "fontSize": 16,
@@ -546,6 +551,11 @@ var theme = {
         "hover": "rgba(255, 255, 255, 0.16)",
         "active": "rgba(255, 255, 255, 0.2)"
     },
+    "colorFieldBackground": {
+        "normal": "#292929",
+        "hover": "#323232",
+        "active": "#3A3A3A"
+    },
     "colorSeparatorPrimaryAlpha": {
         "normal": "rgba(0, 0, 0, 0.4)",
         "hover": "rgba(0, 0, 0, 0.44)",

package/themes/vkBaseDark/index.json

@@ -304,7 +304,11 @@
 	"sizeButtonGroupGapMedium": {
 		"regular": 12
 	},
+	"sizeOptionHierarchy": {
+		"regular": 32
+	},
 	"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)",
@@ -314,6 +318,7 @@
 	"animationEasingDefault": "cubic-bezier(0.3, 0.3, 0.5, 1)",
 	"opacityDisable": 0.4,
 	"opacityDisableAccessibility": 0.64,
+	"themeInheritsFrom": "vkBase",
 	"fontHeadline": {
 		"regular": {
 			"fontSize": 16,
@@ -544,6 +549,11 @@
 		"hover": "rgba(255, 255, 255, 0.16)",
 		"active": "rgba(255, 255, 255, 0.2)"
 	},
+	"colorFieldBackground": {
+		"normal": "#292929",
+		"hover": "#323232",
+		"active": "#3A3A3A"
+	},
 	"colorSeparatorPrimaryAlpha": {
 		"normal": "rgba(0, 0, 0, 0.4)",
 		"hover": "rgba(0, 0, 0, 0.44)",

package/themes/vkBaseDark/index.less

@@ -55,7 +55,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: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06);
+@elevation1-invert-y: 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);
@@ -65,6 +67,7 @@
 @animation-easing-default: cubic-bezier(0.3, 0.3, 0.5, 1);
 @opacity-disable: 0.4;
 @opacity-disable-accessibility: 0.64;
+@theme-inherits-from: 'vkBase';
 @colors-scheme: dark;
 @color-background-accent: #529EF4;
 @color-background-accent--hover: #59A2F4;
@@ -195,6 +198,9 @@
 @color-field-border-alpha: rgba(255, 255, 255, 0.12);
 @color-field-border-alpha--hover: rgba(255, 255, 255, 0.16);
 @color-field-border-alpha--active: rgba(255, 255, 255, 0.2);
+@color-field-background: #292929;
+@color-field-background--hover: #323232;
+@color-field-background--active: #3A3A3A;
 @color-separator-primary-alpha: rgba(0, 0, 0, 0.4);
 @color-separator-primary-alpha--hover: rgba(0, 0, 0, 0.44);
 @color-separator-primary-alpha--active: rgba(0, 0, 0, 0.48);

package/themes/vkBaseDark/index.pcss

@@ -56,7 +56,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: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06);
+	--elevation1-invert-y: 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);
@@ -66,6 +68,7 @@
 	--animation-easing-default: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--opacity-disable: 0.4;
 	--opacity-disable-accessibility: 0.64;
+	--theme-inherits-from: 'vkBase';
 	--colors-scheme: dark;
 	--color-background-accent: #529EF4;
 	--color-background-accent--hover: #59A2F4;
@@ -196,6 +199,9 @@
 	--color-field-border-alpha: rgba(255, 255, 255, 0.12);
 	--color-field-border-alpha--hover: rgba(255, 255, 255, 0.16);
 	--color-field-border-alpha--active: rgba(255, 255, 255, 0.2);
+	--color-field-background: #292929;
+	--color-field-background--hover: #323232;
+	--color-field-background--active: #3A3A3A;
 	--color-separator-primary-alpha: rgba(0, 0, 0, 0.4);
 	--color-separator-primary-alpha--hover: rgba(0, 0, 0, 0.44);
 	--color-separator-primary-alpha--active: rgba(0, 0, 0, 0.48);

package/themes/vkBaseDark/index.scss

@@ -55,7 +55,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: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06);
+$elevation1-invert-y: 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);
@@ -65,6 +67,7 @@ $animation-duration-s: 0.1s;
 $animation-easing-default: cubic-bezier(0.3, 0.3, 0.5, 1);
 $opacity-disable: 0.4;
 $opacity-disable-accessibility: 0.64;
+$theme-inherits-from: 'vkBase';
 $colors-scheme: dark;
 $color-background-accent: #529EF4;
 $color-background-accent--hover: #59A2F4;
@@ -195,6 +198,9 @@ $color-search-field-background--active: #353536;
 $color-field-border-alpha: rgba(255, 255, 255, 0.12);
 $color-field-border-alpha--hover: rgba(255, 255, 255, 0.16);
 $color-field-border-alpha--active: rgba(255, 255, 255, 0.2);
+$color-field-background: #292929;
+$color-field-background--hover: #323232;
+$color-field-background--active: #3A3A3A;
 $color-separator-primary-alpha: rgba(0, 0, 0, 0.4);
 $color-separator-primary-alpha--hover: rgba(0, 0, 0, 0.44);
 $color-separator-primary-alpha--active: rgba(0, 0, 0, 0.48);

package/themes/vkBaseDark/index.styl

@@ -55,7 +55,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 = 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06);
+$elevation1-invert-y = 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);
@@ -65,6 +67,7 @@ $animation-duration-s = 0.1s;
 $animation-easing-default = cubic-bezier(0.3, 0.3, 0.5, 1);
 $opacity-disable = 0.4;
 $opacity-disable-accessibility = 0.64;
+$theme-inherits-from = 'vkBase';
 $colors-scheme = dark;
 $color-background-accent = #529EF4;
 $color-background-accent--hover = #59A2F4;
@@ -195,6 +198,9 @@ $color-search-field-background--active = #353536;
 $color-field-border-alpha = rgba(255, 255, 255, 0.12);
 $color-field-border-alpha--hover = rgba(255, 255, 255, 0.16);
 $color-field-border-alpha--active = rgba(255, 255, 255, 0.2);
+$color-field-background = #292929;
+$color-field-background--hover = #323232;
+$color-field-background--active = #3A3A3A;
 $color-separator-primary-alpha = rgba(0, 0, 0, 0.4);
 $color-separator-primary-alpha--hover = rgba(0, 0, 0, 0.44);
 $color-separator-primary-alpha--active = rgba(0, 0, 0, 0.48);

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

@@ -152,7 +152,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: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06);
+	--vkui--elevation1_invert_y: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06);
 	--vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06);
 	--vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
@@ -162,6 +164,7 @@
 	--vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.4;
 	--vkui--opacity_disable_accessibility: 0.64;
+	--vkui--theme_inherits_from: 'vkBase';
 	--vkui--font_headline--font_size--regular: 16px;
 	--vkui--font_headline--line_height--regular: 20px;
 	--vkui--font_headline--letter_spacing--regular: -0.16px;
@@ -298,8 +301,11 @@
 	--vkui--color_search_field_background--hover: #E2E4E9;
 	--vkui--color_search_field_background--active: #D8DBE2;
 	--vkui--color_field_border_alpha: rgba(0, 0, 0, 0.12);
-	--vkui--color_field_border_alpha--hover: rgba(0, 0, 0, 0.16);
-	--vkui--color_field_border_alpha--active: rgba(0, 0, 0, 0.2);
+	--vkui--color_field_border_alpha--hover: rgba(0, 0, 0, 0.24);
+	--vkui--color_field_border_alpha--active: rgba(0, 0, 0, 0.36);
+	--vkui--color_field_background: #f2f3f5;
+	--vkui--color_field_background--hover: #E8EAEE;
+	--vkui--color_field_background--active: #DFE1E6;
 	--vkui--color_separator_primary_alpha: rgba(0, 0, 0, 0.12);
 	--vkui--color_separator_primary_alpha--hover: rgba(0, 0, 0, 0.16);
 	--vkui--color_separator_primary_alpha--active: rgba(0, 0, 0, 0.2);

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

@@ -152,7 +152,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: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06);
+	--vkui--elevation1_invert_y: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06);
 	--vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06);
 	--vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
@@ -162,6 +164,7 @@
 	--vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.4;
 	--vkui--opacity_disable_accessibility: 0.64;
+	--vkui--theme_inherits_from: 'vkBase';
 	--vkui--font_headline--font_size--regular: 16px;
 	--vkui--font_headline--line_height--regular: 20px;
 	--vkui--font_headline--letter_spacing--regular: -0.16px;

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

@@ -2,6 +2,7 @@
 	--vkui--theme_name: 'vkCom';
 	--vkui--theme_name_base: 'vkCom';
 	--vkui--elevation1: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06);
+	--vkui--elevation1_invert_y: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06);
 	--vkui--elevation2: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06);
 	--vkui--elevation3: 0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08);
 	--vkui--elevation4: 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16);
@@ -11,6 +12,7 @@
 	--vkui--animation_easing_default: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.4;
 	--vkui--opacity_disable_accessibility: 0.64;
+	--vkui--theme_inherits_from: 'vkBase';
 	--vkui--colors_scheme: light;
 	--vkui--color_background_accent: #2688EB;
 	--vkui--color_background_accent--hover: #2483E4;
@@ -139,8 +141,11 @@
 	--vkui--color_search_field_background--hover: #E2E4E9;
 	--vkui--color_search_field_background--active: #D8DBE2;
 	--vkui--color_field_border_alpha: rgba(0, 0, 0, 0.12);
-	--vkui--color_field_border_alpha--hover: rgba(0, 0, 0, 0.16);
-	--vkui--color_field_border_alpha--active: rgba(0, 0, 0, 0.2);
+	--vkui--color_field_border_alpha--hover: rgba(0, 0, 0, 0.24);
+	--vkui--color_field_border_alpha--active: rgba(0, 0, 0, 0.36);
+	--vkui--color_field_background: #f2f3f5;
+	--vkui--color_field_background--hover: #E8EAEE;
+	--vkui--color_field_background--active: #DFE1E6;
 	--vkui--color_separator_primary_alpha: rgba(0, 0, 0, 0.12);
 	--vkui--color_separator_primary_alpha--hover: rgba(0, 0, 0, 0.16);
 	--vkui--color_separator_primary_alpha--active: rgba(0, 0, 0, 0.2);

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

@@ -126,8 +126,11 @@
 	--vkui--color_search_field_background--hover: #E2E4E9;
 	--vkui--color_search_field_background--active: #D8DBE2;
 	--vkui--color_field_border_alpha: rgba(0, 0, 0, 0.12);
-	--vkui--color_field_border_alpha--hover: rgba(0, 0, 0, 0.16);
-	--vkui--color_field_border_alpha--active: rgba(0, 0, 0, 0.2);
+	--vkui--color_field_border_alpha--hover: rgba(0, 0, 0, 0.24);
+	--vkui--color_field_border_alpha--active: rgba(0, 0, 0, 0.36);
+	--vkui--color_field_background: #f2f3f5;
+	--vkui--color_field_background--hover: #E8EAEE;
+	--vkui--color_field_background--active: #DFE1E6;
 	--vkui--color_separator_primary_alpha: rgba(0, 0, 0, 0.12);
 	--vkui--color_separator_primary_alpha--hover: rgba(0, 0, 0, 0.16);
 	--vkui--color_separator_primary_alpha--active: rgba(0, 0, 0, 0.2);