@vkontakte/vkui-tokens 4.5.2 → 4.8.0

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

@@ -1179,10 +1179,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 4px 12px rgba(18, 25, 43, 0.12))"
 	},
+	"elevation1InvertY": {
+		"name": "--vkui--elevation1_invert_y",
+		"value": "var(--vkui--elevation1_invert_y, 0 -2px 0 0 rgba(0, 0, 0, 0.04))"
+	},
 	"elevation2": {
 		"name": "--vkui--elevation2",
 		"value": "var(--vkui--elevation2, 0px 4px 20px rgba(18, 25, 43, 0.2))"
@@ -2291,6 +2305,20 @@
 			"value": "var(--vkui--color_background_negative_tint--active, #603F3F)"
 		}
 	},
+	"colorFieldBackground": {
+		"normal": {
+			"name": "--vkui--color_field_background",
+			"value": "var(--vkui--color_field_background, #232324)"
+		},
+		"hover": {
+			"name": "--vkui--color_field_background--hover",
+			"value": "var(--vkui--color_field_background--hover, #2C2C2D)"
+		},
+		"active": {
+			"name": "--vkui--color_field_background--active",
+			"value": "var(--vkui--color_field_background--active, #353536)"
+		}
+	},
 	"colorTextAccent": {
 		"normal": {
 			"name": "--vkui--color_text_accent",

package/themes/homeDark/index.css

@@ -136,7 +136,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 4px 12px rgba(18, 25, 43, 0.12);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 0, 0, 0.04);
 	--vkui--elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 	--vkui--elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
 	--vkui--elevation4: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
@@ -302,6 +304,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/homeDark/index.js

@@ -290,7 +290,11 @@ var theme = {
     "sizeButtonGroupGapMedium": {
         "regular": 12
     },
+    "sizeOptionHierarchy": {
+        "regular": 32
+    },
     "elevation1": "0px 4px 12px rgba(18, 25, 43, 0.12)",
+    "elevation1InvertY": "0 -2px 0 0 rgba(0, 0, 0, 0.04)",
     "elevation2": "0px 4px 20px rgba(18, 25, 43, 0.2)",
     "elevation3": "0px 16px 48px rgba(18, 25, 43, 0.28)",
     "elevation4": "0 4px 32px 0 rgba(0, 0, 0, 0.48)",
@@ -624,6 +628,11 @@ var theme = {
         "hover": "#593636",
         "active": "#603F3F"
     },
+    "colorFieldBackground": {
+        "normal": "#232324",
+        "hover": "#2C2C2D",
+        "active": "#353536"
+    },
     "colorTextAccent": {
         "normal": "#3C82FD",
         "hover": "#4487FD",

package/themes/homeDark/index.json

@@ -288,7 +288,11 @@
 	"sizeButtonGroupGapMedium": {
 		"regular": 12
 	},
+	"sizeOptionHierarchy": {
+		"regular": 32
+	},
 	"elevation1": "0px 4px 12px rgba(18, 25, 43, 0.12)",
+	"elevation1InvertY": "0 -2px 0 0 rgba(0, 0, 0, 0.04)",
 	"elevation2": "0px 4px 20px rgba(18, 25, 43, 0.2)",
 	"elevation3": "0px 16px 48px rgba(18, 25, 43, 0.28)",
 	"elevation4": "0 4px 32px 0 rgba(0, 0, 0, 0.48)",
@@ -622,6 +626,11 @@
 		"hover": "#593636",
 		"active": "#603F3F"
 	},
+	"colorFieldBackground": {
+		"normal": "#232324",
+		"hover": "#2C2C2D",
+		"active": "#353536"
+	},
 	"colorTextAccent": {
 		"normal": "#3C82FD",
 		"hover": "#4487FD",

package/themes/homeDark/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 4px 12px rgba(18, 25, 43, 0.12);
+@elevation1-invert-y: 0 -2px 0 0 rgba(0, 0, 0, 0.04);
 @elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 @elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
 @elevation4: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
@@ -197,6 +199,9 @@
 @color-background-negative-tint: #522e2e;
 @color-background-negative-tint--hover: #593636;
 @color-background-negative-tint--active: #603F3F;
+@color-field-background: #232324;
+@color-field-background--hover: #2C2C2D;
+@color-field-background--active: #353536;
 @color-text-accent: #3C82FD;
 @color-text-accent--hover: #4487FD;
 @color-text-accent--active: #4C8CFD;

package/themes/homeDark/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 4px 12px rgba(18, 25, 43, 0.12);
+	--elevation1-invert-y: 0 -2px 0 0 rgba(0, 0, 0, 0.04);
 	--elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 	--elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
 	--elevation4: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
@@ -198,6 +200,9 @@
 	--color-background-negative-tint: #522e2e;
 	--color-background-negative-tint--hover: #593636;
 	--color-background-negative-tint--active: #603F3F;
+	--color-field-background: #232324;
+	--color-field-background--hover: #2C2C2D;
+	--color-field-background--active: #353536;
 	--color-text-accent: #3C82FD;
 	--color-text-accent--hover: #4487FD;
 	--color-text-accent--active: #4C8CFD;

package/themes/homeDark/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 4px 12px rgba(18, 25, 43, 0.12);
+$elevation1-invert-y: 0 -2px 0 0 rgba(0, 0, 0, 0.04);
 $elevation2: 0px 4px 20px rgba(18, 25, 43, 0.2);
 $elevation3: 0px 16px 48px rgba(18, 25, 43, 0.28);
 $elevation4: 0 4px 32px 0 rgba(0, 0, 0, 0.48);
@@ -197,6 +199,9 @@ $color-background-positive--active: #20C774;
 $color-background-negative-tint: #522e2e;
 $color-background-negative-tint--hover: #593636;
 $color-background-negative-tint--active: #603F3F;
+$color-field-background: #232324;
+$color-field-background--hover: #2C2C2D;
+$color-field-background--active: #353536;
 $color-text-accent: #3C82FD;
 $color-text-accent--hover: #4487FD;
 $color-text-accent--active: #4C8CFD;

package/themes/homeDark/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 4px 12px rgba(18, 25, 43, 0.12);
+$elevation1-invert-y = 0 -2px 0 0 rgba(0, 0, 0, 0.04);
 $elevation2 = 0px 4px 20px rgba(18, 25, 43, 0.2);
 $elevation3 = 0px 16px 48px rgba(18, 25, 43, 0.28);
 $elevation4 = 0 4px 32px 0 rgba(0, 0, 0, 0.48);
@@ -197,6 +199,9 @@ $color-background-positive--active = #20C774;
 $color-background-negative-tint = #522e2e;
 $color-background-negative-tint--hover = #593636;
 $color-background-negative-tint--active = #603F3F;
+$color-field-background = #232324;
+$color-field-background--hover = #2C2C2D;
+$color-field-background--active = #353536;
 $color-text-accent = #3C82FD;
 $color-text-accent--hover = #4487FD;
 $color-text-accent--active = #4C8CFD;