@vkontakte/vkui-tokens 4.5.2 → 4.8.0

package/themes/octaviusVK/cssVars/theme/fallbacks/index.css

@@ -140,7 +140,9 @@
 	--vkui--size_button_group_gap_space--regular: var(--vkui--size_button_group_gap_space--regular, 1px);
 	--vkui--size_button_group_gap_small--regular: var(--vkui--size_button_group_gap_small--regular, 8px);
 	--vkui--size_button_group_gap_medium--regular: var(--vkui--size_button_group_gap_medium--regular, 12px);
+	--vkui--size_option_hierarchy--regular: var(--vkui--size_option_hierarchy--regular, 32px);
 	--vkui--elevation1: var(--vkui--elevation1, 0 2px 0 0 rgba(0, 16, 61, 0.04));
+	--vkui--elevation1_invert_y: var(--vkui--elevation1_invert_y, 0 -2px 0 0 rgba(0, 16, 61, 0.04));
 	--vkui--elevation2: var(--vkui--elevation2, 0 4px 32px 0 rgba(0, 16, 61, 0.32));
 	--vkui--elevation3: var(--vkui--elevation3, 0 16px 48px 0 rgba(0, 0, 0, 0.48));
 	--vkui--elevation4: var(--vkui--elevation4, 0 16px 48px 0 rgba(0, 0, 0, 0.48));
@@ -329,6 +331,9 @@
 	--vkui--color_background_negative_tint: var(--vkui--color_background_negative_tint, #FAEBEB);
 	--vkui--color_background_negative_tint--hover: var(--vkui--color_background_negative_tint--hover, #F0E2E4);
 	--vkui--color_background_negative_tint--active: var(--vkui--color_background_negative_tint--active, #E6D9DD);
+	--vkui--color_field_background: var(--vkui--color_field_background, #f2f3f5);
+	--vkui--color_field_background--hover: var(--vkui--color_field_background--hover, #E8EAEE);
+	--vkui--color_field_background--active: var(--vkui--color_field_background--active, #DFE1E6);
 	--vkui--color_text_accent: var(--vkui--color_text_accent, #2688EB);
 	--vkui--color_text_accent--hover: var(--vkui--color_text_accent--hover, #2483E4);
 	--vkui--color_text_accent--active: var(--vkui--color_text_accent--active, #237EDD);
@@ -432,8 +437,8 @@
 	--vkui--color_image_border_alpha--hover: var(--vkui--color_image_border_alpha--hover, rgba(0, 0, 0, 0.12));
 	--vkui--color_image_border_alpha--active: var(--vkui--color_image_border_alpha--active, rgba(0, 0, 0, 0.16));
 	--vkui--color_field_border_alpha: var(--vkui--color_field_border_alpha, rgba(0, 0, 0, 0.12));
-	--vkui--color_field_border_alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.16));
-	--vkui--color_field_border_alpha--active: var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.2));
+	--vkui--color_field_border_alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.24));
+	--vkui--color_field_border_alpha--active: var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.36));
 	--vkui--color_separator_primary_alpha: var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.12));
 	--vkui--color_separator_primary_alpha--hover: var(--vkui--color_separator_primary_alpha--hover, rgba(0, 0, 0, 0.16));
 	--vkui--color_separator_primary_alpha--active: var(--vkui--color_separator_primary_alpha--active, rgba(0, 0, 0, 0.2));

package/themes/octaviusVK/cssVars/theme/fallbacks/index.less

@@ -55,7 +55,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));
@@ -218,6 +220,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, #f2f3f5);
+@color-field-background--hover: var(--vkui--color_field_background--hover, #E8EAEE);
+@color-field-background--active: var(--vkui--color_field_background--active, #DFE1E6);
 @color-text-accent: var(--vkui--color_text_accent, #2688EB);
 @color-text-accent--hover: var(--vkui--color_text_accent--hover, #2483E4);
 @color-text-accent--active: var(--vkui--color_text_accent--active, #237EDD);
@@ -321,8 +326,8 @@
 @color-image-border-alpha--hover: var(--vkui--color_image_border_alpha--hover, rgba(0, 0, 0, 0.12));
 @color-image-border-alpha--active: var(--vkui--color_image_border_alpha--active, rgba(0, 0, 0, 0.16));
 @color-field-border-alpha: var(--vkui--color_field_border_alpha, rgba(0, 0, 0, 0.12));
-@color-field-border-alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.16));
-@color-field-border-alpha--active: var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.2));
+@color-field-border-alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.24));
+@color-field-border-alpha--active: var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.36));
 @color-separator-primary-alpha: var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.12));
 @color-separator-primary-alpha--hover: var(--vkui--color_separator_primary_alpha--hover, rgba(0, 0, 0, 0.16));
 @color-separator-primary-alpha--active: var(--vkui--color_separator_primary_alpha--active, rgba(0, 0, 0, 0.2));

package/themes/octaviusVK/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, 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));
@@ -219,6 +221,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, #f2f3f5);
+	--color-field-background--hover: var(--vkui--color_field_background--hover, #E8EAEE);
+	--color-field-background--active: var(--vkui--color_field_background--active, #DFE1E6);
 	--color-text-accent: var(--vkui--color_text_accent, #2688EB);
 	--color-text-accent--hover: var(--vkui--color_text_accent--hover, #2483E4);
 	--color-text-accent--active: var(--vkui--color_text_accent--active, #237EDD);
@@ -322,8 +327,8 @@
 	--color-image-border-alpha--hover: var(--vkui--color_image_border_alpha--hover, rgba(0, 0, 0, 0.12));
 	--color-image-border-alpha--active: var(--vkui--color_image_border_alpha--active, rgba(0, 0, 0, 0.16));
 	--color-field-border-alpha: var(--vkui--color_field_border_alpha, rgba(0, 0, 0, 0.12));
-	--color-field-border-alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.16));
-	--color-field-border-alpha--active: var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.2));
+	--color-field-border-alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.24));
+	--color-field-border-alpha--active: var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.36));
 	--color-separator-primary-alpha: var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.12));
 	--color-separator-primary-alpha--hover: var(--vkui--color_separator_primary_alpha--hover, rgba(0, 0, 0, 0.16));
 	--color-separator-primary-alpha--active: var(--vkui--color_separator_primary_alpha--active, rgba(0, 0, 0, 0.2));

package/themes/octaviusVK/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, 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));
@@ -218,6 +220,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, #f2f3f5);
+$color-field-background--hover: var(--vkui--color_field_background--hover, #E8EAEE);
+$color-field-background--active: var(--vkui--color_field_background--active, #DFE1E6);
 $color-text-accent: var(--vkui--color_text_accent, #2688EB);
 $color-text-accent--hover: var(--vkui--color_text_accent--hover, #2483E4);
 $color-text-accent--active: var(--vkui--color_text_accent--active, #237EDD);
@@ -321,8 +326,8 @@ $color-image-border-alpha: var(--vkui--color_image_border_alpha, rgba(0, 0, 0, 0
 $color-image-border-alpha--hover: var(--vkui--color_image_border_alpha--hover, rgba(0, 0, 0, 0.12));
 $color-image-border-alpha--active: var(--vkui--color_image_border_alpha--active, rgba(0, 0, 0, 0.16));
 $color-field-border-alpha: var(--vkui--color_field_border_alpha, rgba(0, 0, 0, 0.12));
-$color-field-border-alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.16));
-$color-field-border-alpha--active: var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.2));
+$color-field-border-alpha--hover: var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.24));
+$color-field-border-alpha--active: var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.36));
 $color-separator-primary-alpha: var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.12));
 $color-separator-primary-alpha--hover: var(--vkui--color_separator_primary_alpha--hover, rgba(0, 0, 0, 0.16));
 $color-separator-primary-alpha--active: var(--vkui--color_separator_primary_alpha--active, rgba(0, 0, 0, 0.2));

package/themes/octaviusVK/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, 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));
@@ -218,6 +220,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, #f2f3f5);
+$color-field-background--hover = var(--vkui--color_field_background--hover, #E8EAEE);
+$color-field-background--active = var(--vkui--color_field_background--active, #DFE1E6);
 $color-text-accent = var(--vkui--color_text_accent, #2688EB);
 $color-text-accent--hover = var(--vkui--color_text_accent--hover, #2483E4);
 $color-text-accent--active = var(--vkui--color_text_accent--active, #237EDD);
@@ -321,8 +326,8 @@ $color-image-border-alpha = var(--vkui--color_image_border_alpha, rgba(0, 0, 0,
 $color-image-border-alpha--hover = var(--vkui--color_image_border_alpha--hover, rgba(0, 0, 0, 0.12));
 $color-image-border-alpha--active = var(--vkui--color_image_border_alpha--active, rgba(0, 0, 0, 0.16));
 $color-field-border-alpha = var(--vkui--color_field_border_alpha, rgba(0, 0, 0, 0.12));
-$color-field-border-alpha--hover = var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.16));
-$color-field-border-alpha--active = var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.2));
+$color-field-border-alpha--hover = var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.24));
+$color-field-border-alpha--active = var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.36));
 $color-separator-primary-alpha = var(--vkui--color_separator_primary_alpha, rgba(0, 0, 0, 0.12));
 $color-separator-primary-alpha--hover = var(--vkui--color_separator_primary_alpha--hover, rgba(0, 0, 0, 0.16));
 $color-separator-primary-alpha--active = var(--vkui--color_separator_primary_alpha--active, rgba(0, 0, 0, 0.2));

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

@@ -1231,10 +1231,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))"
@@ -2485,6 +2499,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, #f2f3f5)"
+        },
+        "hover": {
+            "name": "--vkui--color_field_background--hover",
+            "value": "var(--vkui--color_field_background--hover, #E8EAEE)"
+        },
+        "active": {
+            "name": "--vkui--color_field_background--active",
+            "value": "var(--vkui--color_field_background--active, #DFE1E6)"
+        }
+    },
     "colorTextAccent": {
         "normal": {
             "name": "--vkui--color_text_accent",
@@ -2968,11 +2996,11 @@ var theme = {
         },
         "hover": {
             "name": "--vkui--color_field_border_alpha--hover",
-            "value": "var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.16))"
+            "value": "var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.24))"
         },
         "active": {
             "name": "--vkui--color_field_border_alpha--active",
-            "value": "var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.2))"
+            "value": "var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.36))"
         }
     },
     "colorSeparatorPrimaryAlpha": {

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

@@ -1229,10 +1229,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))"
@@ -2483,6 +2497,20 @@
 			"value": "var(--vkui--color_background_negative_tint--active, #E6D9DD)"
 		}
 	},
+	"colorFieldBackground": {
+		"normal": {
+			"name": "--vkui--color_field_background",
+			"value": "var(--vkui--color_field_background, #f2f3f5)"
+		},
+		"hover": {
+			"name": "--vkui--color_field_background--hover",
+			"value": "var(--vkui--color_field_background--hover, #E8EAEE)"
+		},
+		"active": {
+			"name": "--vkui--color_field_background--active",
+			"value": "var(--vkui--color_field_background--active, #DFE1E6)"
+		}
+	},
 	"colorTextAccent": {
 		"normal": {
 			"name": "--vkui--color_text_accent",
@@ -2966,11 +2994,11 @@
 		},
 		"hover": {
 			"name": "--vkui--color_field_border_alpha--hover",
-			"value": "var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.16))"
+			"value": "var(--vkui--color_field_border_alpha--hover, rgba(0, 0, 0, 0.24))"
 		},
 		"active": {
 			"name": "--vkui--color_field_border_alpha--active",
-			"value": "var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.2))"
+			"value": "var(--vkui--color_field_border_alpha--active, rgba(0, 0, 0, 0.36))"
 		}
 	},
 	"colorSeparatorPrimaryAlpha": {

package/themes/octaviusVK/index.css

@@ -140,7 +140,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);
@@ -329,6 +331,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: #f2f3f5;
+	--vkui--color_field_background--hover: #E8EAEE;
+	--vkui--color_field_background--active: #DFE1E6;
 	--vkui--color_text_accent: #2688EB;
 	--vkui--color_text_accent--hover: #2483E4;
 	--vkui--color_text_accent--active: #237EDD;
@@ -432,8 +437,8 @@
 	--vkui--color_image_border_alpha--hover: rgba(0, 0, 0, 0.12);
 	--vkui--color_image_border_alpha--active: rgba(0, 0, 0, 0.16);
 	--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_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/octaviusVK/index.js

@@ -288,7 +288,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)",
@@ -655,6 +659,11 @@ var theme = {
         "hover": "#F0E2E4",
         "active": "#E6D9DD"
     },
+    "colorFieldBackground": {
+        "normal": "#f2f3f5",
+        "hover": "#E8EAEE",
+        "active": "#DFE1E6"
+    },
     "colorTextAccent": {
         "normal": "#2688EB",
         "hover": "#2483E4",
@@ -827,8 +836,8 @@ var theme = {
     },
     "colorFieldBorderAlpha": {
         "normal": "rgba(0, 0, 0, 0.12)",
-        "hover": "rgba(0, 0, 0, 0.16)",
-        "active": "rgba(0, 0, 0, 0.2)"
+        "hover": "rgba(0, 0, 0, 0.24)",
+        "active": "rgba(0, 0, 0, 0.36)"
     },
     "colorSeparatorPrimaryAlpha": {
         "normal": "rgba(0, 0, 0, 0.12)",

package/themes/octaviusVK/index.json

@@ -286,7 +286,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)",
@@ -653,6 +657,11 @@
 		"hover": "#F0E2E4",
 		"active": "#E6D9DD"
 	},
+	"colorFieldBackground": {
+		"normal": "#f2f3f5",
+		"hover": "#E8EAEE",
+		"active": "#DFE1E6"
+	},
 	"colorTextAccent": {
 		"normal": "#2688EB",
 		"hover": "#2483E4",
@@ -825,8 +834,8 @@
 	},
 	"colorFieldBorderAlpha": {
 		"normal": "rgba(0, 0, 0, 0.12)",
-		"hover": "rgba(0, 0, 0, 0.16)",
-		"active": "rgba(0, 0, 0, 0.2)"
+		"hover": "rgba(0, 0, 0, 0.24)",
+		"active": "rgba(0, 0, 0, 0.36)"
 	},
 	"colorSeparatorPrimaryAlpha": {
 		"normal": "rgba(0, 0, 0, 0.12)",

package/themes/octaviusVK/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: 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);
@@ -218,6 +220,9 @@
 @color-background-negative-tint: #FAEBEB;
 @color-background-negative-tint--hover: #F0E2E4;
 @color-background-negative-tint--active: #E6D9DD;
+@color-field-background: #f2f3f5;
+@color-field-background--hover: #E8EAEE;
+@color-field-background--active: #DFE1E6;
 @color-text-accent: #2688EB;
 @color-text-accent--hover: #2483E4;
 @color-text-accent--active: #237EDD;
@@ -321,8 +326,8 @@
 @color-image-border-alpha--hover: rgba(0, 0, 0, 0.12);
 @color-image-border-alpha--active: rgba(0, 0, 0, 0.16);
 @color-field-border-alpha: rgba(0, 0, 0, 0.12);
-@color-field-border-alpha--hover: rgba(0, 0, 0, 0.16);
-@color-field-border-alpha--active: rgba(0, 0, 0, 0.2);
+@color-field-border-alpha--hover: rgba(0, 0, 0, 0.24);
+@color-field-border-alpha--active: rgba(0, 0, 0, 0.36);
 @color-separator-primary-alpha: rgba(0, 0, 0, 0.12);
 @color-separator-primary-alpha--hover: rgba(0, 0, 0, 0.16);
 @color-separator-primary-alpha--active: rgba(0, 0, 0, 0.2);

package/themes/octaviusVK/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: 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);
@@ -219,6 +221,9 @@
 	--color-background-negative-tint: #FAEBEB;
 	--color-background-negative-tint--hover: #F0E2E4;
 	--color-background-negative-tint--active: #E6D9DD;
+	--color-field-background: #f2f3f5;
+	--color-field-background--hover: #E8EAEE;
+	--color-field-background--active: #DFE1E6;
 	--color-text-accent: #2688EB;
 	--color-text-accent--hover: #2483E4;
 	--color-text-accent--active: #237EDD;
@@ -322,8 +327,8 @@
 	--color-image-border-alpha--hover: rgba(0, 0, 0, 0.12);
 	--color-image-border-alpha--active: rgba(0, 0, 0, 0.16);
 	--color-field-border-alpha: rgba(0, 0, 0, 0.12);
-	--color-field-border-alpha--hover: rgba(0, 0, 0, 0.16);
-	--color-field-border-alpha--active: rgba(0, 0, 0, 0.2);
+	--color-field-border-alpha--hover: rgba(0, 0, 0, 0.24);
+	--color-field-border-alpha--active: rgba(0, 0, 0, 0.36);
 	--color-separator-primary-alpha: rgba(0, 0, 0, 0.12);
 	--color-separator-primary-alpha--hover: rgba(0, 0, 0, 0.16);
 	--color-separator-primary-alpha--active: rgba(0, 0, 0, 0.2);

package/themes/octaviusVK/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: 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);
@@ -218,6 +220,9 @@ $color-background-positive--active: #45A64A;
 $color-background-negative-tint: #FAEBEB;
 $color-background-negative-tint--hover: #F0E2E4;
 $color-background-negative-tint--active: #E6D9DD;
+$color-field-background: #f2f3f5;
+$color-field-background--hover: #E8EAEE;
+$color-field-background--active: #DFE1E6;
 $color-text-accent: #2688EB;
 $color-text-accent--hover: #2483E4;
 $color-text-accent--active: #237EDD;
@@ -321,8 +326,8 @@ $color-image-border-alpha: rgba(0, 0, 0, 0.08);
 $color-image-border-alpha--hover: rgba(0, 0, 0, 0.12);
 $color-image-border-alpha--active: rgba(0, 0, 0, 0.16);
 $color-field-border-alpha: rgba(0, 0, 0, 0.12);
-$color-field-border-alpha--hover: rgba(0, 0, 0, 0.16);
-$color-field-border-alpha--active: rgba(0, 0, 0, 0.2);
+$color-field-border-alpha--hover: rgba(0, 0, 0, 0.24);
+$color-field-border-alpha--active: rgba(0, 0, 0, 0.36);
 $color-separator-primary-alpha: rgba(0, 0, 0, 0.12);
 $color-separator-primary-alpha--hover: rgba(0, 0, 0, 0.16);
 $color-separator-primary-alpha--active: rgba(0, 0, 0, 0.2);

package/themes/octaviusVK/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 = 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);
@@ -218,6 +220,9 @@ $color-background-positive--active = #45A64A;
 $color-background-negative-tint = #FAEBEB;
 $color-background-negative-tint--hover = #F0E2E4;
 $color-background-negative-tint--active = #E6D9DD;
+$color-field-background = #f2f3f5;
+$color-field-background--hover = #E8EAEE;
+$color-field-background--active = #DFE1E6;
 $color-text-accent = #2688EB;
 $color-text-accent--hover = #2483E4;
 $color-text-accent--active = #237EDD;
@@ -321,8 +326,8 @@ $color-image-border-alpha = rgba(0, 0, 0, 0.08);
 $color-image-border-alpha--hover = rgba(0, 0, 0, 0.12);
 $color-image-border-alpha--active = rgba(0, 0, 0, 0.16);
 $color-field-border-alpha = rgba(0, 0, 0, 0.12);
-$color-field-border-alpha--hover = rgba(0, 0, 0, 0.16);
-$color-field-border-alpha--active = rgba(0, 0, 0, 0.2);
+$color-field-border-alpha--hover = rgba(0, 0, 0, 0.24);
+$color-field-border-alpha--active = rgba(0, 0, 0, 0.36);
 $color-separator-primary-alpha = rgba(0, 0, 0, 0.12);
 $color-separator-primary-alpha--hover = rgba(0, 0, 0, 0.16);
 $color-separator-primary-alpha--active = rgba(0, 0, 0, 0.2);

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

@@ -140,7 +140,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);
@@ -329,6 +331,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: #292929;
+	--vkui--color_field_background--hover: #323232;
+	--vkui--color_field_background--active: #3A3A3A;
 	--vkui--color_text_accent: #529EF4;
 	--vkui--color_text_accent--hover: #59A2F4;
 	--vkui--color_text_accent--active: #60A6F5;
@@ -1445,6 +1450,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--letter_spacing: var(--vkui--font_h0--letter_spacing--regular);

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

@@ -140,7 +140,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);

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

@@ -1,6 +1,7 @@
 :root {
 	--vkui--theme_name: 'octaviusVKDark';
 	--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);
@@ -77,6 +78,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: #292929;
+	--vkui--color_field_background--hover: #323232;
+	--vkui--color_field_background--active: #3A3A3A;
 	--vkui--color_text_accent: #529EF4;
 	--vkui--color_text_accent--hover: #59A2F4;
 	--vkui--color_text_accent--active: #60A6F5;

package/themes/octaviusVKDark/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: #292929;
+	--vkui--color_field_background--hover: #323232;
+	--vkui--color_field_background--active: #3A3A3A;
 	--vkui--color_text_accent: #529EF4;
 	--vkui--color_text_accent--hover: #59A2F4;
 	--vkui--color_text_accent--active: #60A6F5;